: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);
    /* Z-index de l'en-tête collant du site : les barres d'outils de page doivent
       rester dessous (ex. `.menu-ed__bar` = calc(var(--z-site-header) - 1)) pour ne
       pas passer par-dessus les menus déroulants de la nav. */
    --z-site-header: 20;
    --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);
    --datepick-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%3Crect x='3' y='4.5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E");
    --datepick-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%3Crect x='3' y='4.5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E");
    --datepick-icon-svg: var(--datepick-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);
    /* Alias hérités « --color-* » employés par quelques gabarits sysadmin
       (facturation par école, promotions, catalogue) : mappés sur les tokens
       réels du thème actif pour que fonds/bordures/texte muted s'affichent au
       lieu de tomber en « invalide au calcul » (custom property indéfinie). */
    --color-border: var(--line);
    --color-text-muted: var(--muted);
    --color-surface-1: color-mix(in srgb, var(--line) 6%, transparent);
    --color-surface-2: color-mix(in srgb, var(--line) 11%, transparent);
    --color-surface-3: color-mix(in srgb, var(--line) 17%, transparent);
    --border-radius: var(--radius-sm);
    --radius-pill: 999px;
    --ring: color-mix(in srgb, var(--accent) 44%, transparent);
    /* ── Champs de formulaire : marqueur « obligatoire » + état d'erreur (source unique) ──
       Le rouge est surchargé pour la famille de thèmes sombres plus bas ; la
       surface et l'anneau se dérivent de --bg-elevated donc suivent chaque thème. */
    --field-required: #b42318;
    --field-error: #b42318;
    --field-error-surface: color-mix(in srgb, var(--field-error) 8%, var(--bg-elevated));
    --field-error-ring: color-mix(in srgb, var(--field-error) 20%, transparent);
    --icon-form-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill-rule='evenodd' d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm-8 56a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0Zm8 100a12 12 0 1 1 12-12 12 12 0 0 1-12 12Z'/%3E%3C/svg%3E");
    --charcoal: var(--brand-charcoal);
    --brand-primary: var(--brand-blue);
    /* Barre de navigation rapide d'un écran admin : elle se colle SOUS le chrome
       du site (bandeaux + en-tête), mesuré en direct par js/sticky_offsets.js.
       Le repli 7.75rem couvre bandeau + en-tête déployé sans JS. */
    --admin-quick-nav-offset: calc(var(--dojo-sticky-offset, 7.75rem) + 0.5rem);
    --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 24%, transparent);
    --admin-quick-primary-count-border: color-mix(in srgb, #ffffff 55%, transparent);
    --admin-quick-primary-pill-bg: color-mix(in srgb, #ffffff 16%, transparent);
    --admin-quick-primary-pill-border: color-mix(in srgb, #ffffff 32%, transparent);
    --admin-quick-primary-pill-text: color-mix(in srgb, #ffffff 92%, transparent);
    --admin-quick-primary-actions-bg: color-mix(in srgb, #ffffff 10%, transparent);
    --admin-quick-primary-actions-border: color-mix(in srgb, #ffffff 22%, transparent);
}

/* Rouge « obligatoire / erreur » plus lumineux sur les thèmes sombres (lisibilité). */
html[data-theme="dark"],
html[data-theme="aurora"],
html[data-theme="sunset-dark"],
html[data-theme="paper-ink-dark"],
html[data-theme="vampire"] {
    --field-required: #ff8f80;
    --field-error: #ff8f80;
}

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);
    --datepick-icon-svg: var(--datepick-icon-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);
}

/* ── Mode accessibilité (haut contraste) : adaptations par palette ──
   Activé via l'attribut html[data-a11y="on"] posé par-dessus le thème choisi.
   Les anciens thèmes « Signal du matin / minuit » deviennent les variantes
   accessibilité de light/dark. */
html[data-theme="light"][data-a11y="on"] {
    --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="dark"][data-a11y="on"] {
    --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);
    --datepick-icon-svg: var(--datepick-icon-svg-dark);
    --logo-glow-color: rgba(114, 239, 255, 0.56);
}

html[data-theme="aurora-light"][data-a11y="on"] {
    --bg: #ffffff;
    --bg-elevated: #ffffff;
    --bg-elevated-strong: #ffffff;
    --text: #000000;
    --on-elevated: #000000;
    --on-accent: #ffffff;
    --muted: #1f1f1f;
    --line: #000000;
    --accent: #0f6b5e;
    --accent-strong: #0a4f45;
    --accent-soft: #d9f0ec;
    --card-highlight: linear-gradient(135deg, rgba(15, 107, 94, 0.14), rgba(72, 108, 225, 0.16));
    --warning: #fff2a8;
    --success: #dff6df;
    --error: #ffd9d9;
    --announcement-bg-color: #dff3ef;
    --shadow-soft: none;
    --calendar-weekend-bg: #d9f0ec;
    --calendar-weekend-border: #0f6b5e;
    --calendar-holiday-bg: #4a2f8f;
    --calendar-holiday-text: #ffffff;
    --calendar-holiday-border: #000000;
    --logo-glow-color: rgba(15, 107, 94, 0.32);
}

html[data-theme="aurora"][data-a11y="on"] {
    --bg: #000000;
    --bg-elevated: #090909;
    --bg-elevated-strong: #0f0f0f;
    --text: #ffffff;
    --on-elevated: #ffffff;
    --on-accent: #000000;
    --muted: #f1f1f1;
    --line: #ffffff;
    --accent: #45e0cf;
    --accent-strong: #88e4d8;
    --accent-soft: rgba(69, 224, 207, 0.15);
    --card-highlight: linear-gradient(135deg, rgba(69, 224, 207, 0.24), rgba(136, 198, 255, 0.16));
    --warning: #5d5400;
    --success: #103b10;
    --error: #4b1111;
    --announcement-bg-color: #06231f;
    --shadow-soft: none;
    --calendar-weekend-bg: rgba(69, 224, 207, 0.2);
    --calendar-weekend-border: #45e0cf;
    --calendar-holiday-bg: #e7b5ff;
    --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);
    --datepick-icon-svg: var(--datepick-icon-svg-dark);
    --logo-glow-color: rgba(136, 228, 216, 0.56);
}

html[data-theme="sunset"][data-a11y="on"] {
    --bg: #ffffff;
    --bg-elevated: #ffffff;
    --bg-elevated-strong: #ffffff;
    --text: #000000;
    --on-elevated: #000000;
    --on-accent: #ffffff;
    --muted: #1f1f1f;
    --line: #000000;
    --accent: #b3431f;
    --accent-strong: #8a3216;
    --accent-soft: #ffe2cf;
    --card-highlight: linear-gradient(135deg, rgba(179, 67, 31, 0.16), rgba(255, 210, 122, 0.2));
    --warning: #fff2a8;
    --success: #dff6df;
    --error: #ffd9d2;
    --announcement-bg-color: #ffe4d2;
    --shadow-soft: none;
    --calendar-weekend-bg: #ffe7d6;
    --calendar-weekend-border: #b3431f;
    --calendar-holiday-bg: #a83a00;
    --calendar-holiday-text: #ffffff;
    --calendar-holiday-border: #000000;
    --logo-glow-color: rgba(179, 67, 31, 0.32);
}

html[data-theme="sunset-dark"][data-a11y="on"] {
    --bg: #000000;
    --bg-elevated: #090909;
    --bg-elevated-strong: #0f0f0f;
    --text: #ffffff;
    --on-elevated: #ffffff;
    --on-accent: #000000;
    --muted: #f1f1f1;
    --line: #ffffff;
    --accent: #ffb27a;
    --accent-strong: #ffc7a2;
    --accent-soft: rgba(255, 178, 122, 0.16);
    --card-highlight: linear-gradient(135deg, rgba(255, 178, 122, 0.24), rgba(255, 210, 122, 0.16));
    --warning: #5d5400;
    --success: #103b10;
    --error: #4b1111;
    --announcement-bg-color: #2a160f;
    --shadow-soft: none;
    --calendar-weekend-bg: rgba(255, 178, 122, 0.2);
    --calendar-weekend-border: #ffb27a;
    --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);
    --datepick-icon-svg: var(--datepick-icon-svg-dark);
    --logo-glow-color: rgba(255, 199, 162, 0.56);
}

html[data-theme="paper-ink"][data-a11y="on"] {
    --bg: #ffffff;
    --bg-elevated: #ffffff;
    --bg-elevated-strong: #ffffff;
    --text: #000000;
    --on-elevated: #000000;
    --on-accent: #ffffff;
    --muted: #1f1f1f;
    --line: #000000;
    --accent: #0d3a73;
    --accent-strong: #082a55;
    --accent-soft: #dce7f5;
    --card-highlight: linear-gradient(135deg, rgba(13, 58, 115, 0.14), rgba(31, 41, 55, 0.12));
    --warning: #fff2a8;
    --success: #dff6df;
    --error: #ffd9d9;
    --announcement-bg-color: #e3ebf7;
    --shadow-soft: none;
    --calendar-weekend-bg: #dce7f5;
    --calendar-weekend-border: #0d3a73;
    --calendar-holiday-bg: #9b3f31;
    --calendar-holiday-text: #ffffff;
    --calendar-holiday-border: #000000;
    --logo-glow-color: rgba(13, 58, 115, 0.32);
}

html[data-theme="paper-ink-dark"][data-a11y="on"] {
    --bg: #000000;
    --bg-elevated: #090909;
    --bg-elevated-strong: #0f0f0f;
    --text: #ffffff;
    --on-elevated: #ffffff;
    --on-accent: #000000;
    --muted: #f1f1f1;
    --line: #ffffff;
    --accent: #9bc0ff;
    --accent-strong: #c5dbff;
    --accent-soft: rgba(155, 192, 255, 0.16);
    --card-highlight: linear-gradient(135deg, rgba(155, 192, 255, 0.24), rgba(120, 104, 84, 0.16));
    --warning: #5d5400;
    --success: #103b10;
    --error: #4b1111;
    --announcement-bg-color: #0a1830;
    --shadow-soft: none;
    --calendar-weekend-bg: rgba(155, 192, 255, 0.2);
    --calendar-weekend-border: #9bc0ff;
    --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);
    --datepick-icon-svg: var(--datepick-icon-svg-dark);
    --logo-glow-color: rgba(155, 192, 255, 0.56);
}

html[data-theme="vampire-light"][data-a11y="on"] {
    --bg: #ffffff;
    --bg-elevated: #ffffff;
    --bg-elevated-strong: #ffffff;
    --text: #000000;
    --on-elevated: #000000;
    --on-accent: #ffffff;
    --muted: #1f1f1f;
    --line: #000000;
    --accent: #8c1e52;
    --accent-strong: #6b173f;
    --accent-soft: #fbe0ec;
    --card-highlight: linear-gradient(135deg, rgba(140, 30, 82, 0.16), rgba(109, 40, 217, 0.12));
    --warning: #fff2a8;
    --success: #dff6df;
    --error: #f7d6e1;
    --announcement-bg-color: #fde5f0;
    --shadow-soft: none;
    --calendar-weekend-bg: #fbe0ec;
    --calendar-weekend-border: #8c1e52;
    --calendar-holiday-bg: #932d5c;
    --calendar-holiday-text: #ffffff;
    --calendar-holiday-border: #000000;
    --logo-glow-color: rgba(140, 30, 82, 0.32);
}

html[data-theme="vampire"][data-a11y="on"] {
    --bg: #000000;
    --bg-elevated: #090909;
    --bg-elevated-strong: #0f0f0f;
    --text: #ffffff;
    --on-elevated: #ffffff;
    --on-accent: #000000;
    --muted: #f1f1f1;
    --line: #ffffff;
    --accent: #ff86b6;
    --accent-strong: #ffb0cf;
    --accent-soft: rgba(255, 134, 182, 0.16);
    --card-highlight: linear-gradient(135deg, rgba(255, 134, 182, 0.24), rgba(109, 40, 217, 0.16));
    --warning: #5d5400;
    --success: #103b10;
    --error: #4b1111;
    --announcement-bg-color: #2a0a1d;
    --shadow-soft: none;
    --calendar-weekend-bg: rgba(255, 134, 182, 0.2);
    --calendar-weekend-border: #ff86b6;
    --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);
    --datepick-icon-svg: var(--datepick-icon-svg-dark);
    --logo-glow-color: rgba(255, 176, 207, 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);
    --datepick-icon-svg: var(--datepick-icon-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);
    --datepick-icon-svg: var(--datepick-icon-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);
    --datepick-icon-svg: var(--datepick-icon-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);
    --datepick-icon-svg: var(--datepick-icon-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="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;
}

/* Mode accessibilité : aplatit les titres et boutons rapides du tableau de bord
   sur le texte/contour à fort contraste, quelle que soit la palette active. */
html[data-a11y="on"] {
    --shadow-soft: none;
    --dashboard-title-strong: var(--text);
    --dashboard-title-interactive: var(--text);
    --dashboard-title-emphasis: var(--text);
    --dashboard-title-hover-bg: var(--accent-soft);
    --dashboard-title-hover-border: var(--text);
    --admin-quick-primary-bg: var(--accent);
    --admin-quick-primary-border: var(--line);
    --admin-quick-primary-count-border: var(--on-accent);
    --admin-quick-primary-pill-border: var(--on-accent);
    --admin-quick-primary-actions-border: var(--on-accent);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* ⚠️ Décalage d'arrêt du défilement — source unique du site.
       Les bandeaux collants (dev, aperçu utilisateur) et l'en-tête masquent le
       haut de la page d'une hauteur VARIABLE : l'en-tête se compacte au
       défilement, les bandeaux se replient sur plusieurs lignes en écran
       étroit. `--dojo-sticky-offset` est mesuré en direct par
       js/sticky_offsets.js ; le repli 7.75rem couvre bandeau + en-tête déployé
       sans JS. Toute ancre (`#section`) et tout `scrollIntoView({block:'start'})`
       s'arrêtent donc SOUS le chrome, sans que chaque écran le recalcule.
       ⚠️ Corollaire : un `scroll-margin-top` d'écran ne doit plus contenir que
       le chrome PROPRE à cet écran (barre de navigation rapide…) — les deux
       s'additionnent, y remettre l'en-tête le compterait deux fois. */
    scroll-padding-top: calc(var(--dojo-sticky-offset, 7.75rem) + 0.75rem);
    /* Anti-boucle du header : `.site-header` est `position: sticky` et se
       compacte au défilement (base.html, classe `site-header--compact`), ce qui
       réduit sa hauteur d'un coup (~40 px, delta > l'hystérésis ENTER 120 /
       EXIT 96). Sur les navigateurs qui font du scroll anchoring (Chrome,
       Firefox — Safari n'en fait pas), ce rétrécissement décale `scrollY`
       d'autant pour garder la vue stable ; ce décalage repasse alors sous le
       seuil inverse et fait rebasculer le header → il « grandit et rétrécit en
       boucle » quand on s'arrête juste dans la bande de bascule. Désactiver
       l'ancrage sur le défileur racine coupe cette rétroaction à la source. */
    overflow-anchor: none;
}

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: var(--dojo-banners-height, 0px);
    z-index: var(--z-site-header, 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;
}

/* L'en-tête colle sous les bandeaux empilés au-dessus de lui (bandeau dev,
   aperçu utilisateur) : `--dojo-banners-height` est leur somme mesurée par
   js/sticky_offsets.js. Le repli ci-dessous couvre le seul cas connu sans JS,
   le bandeau dev sur une ligne. */
body.has-dev-banner .site-header {
    top: var(--dojo-banners-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);
    }

    /* Réduit le bouton « Gérer … » en pastille icône, comme les boutons ronds. */
    .site-header--compact .page-manage-action {
        width: 44px;
        min-width: 44px;
        padding: 0.35rem;
        gap: 0;
    }

    .site-header--compact .page-manage-action span {
        display: none;
        max-width: 0;
        opacity: 0;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   En-tête immersif AU-DESSUS d'un hero photo (layout « presentation_minimal »)
   ─────────────────────────────────────────────────────────────────────────
   Dans ce layout, le hero photo est remonté SOUS l'en-tête « verre » resté
   transparent (marge négative, cf. [data-home-layout="presentation_minimal"]
   [data-home-block="hero"]). Sur un thème PÂLE, les liens de nav (bleu marine
   dérivé de --accent-strong) et le nom du dojo (texte foncé) se noyaient sur le
   dégradé clair→photo : illisibles. Tant que l'en-tête n'a pas défilé (donc pas
   encore de fond opaque), on l'habille comme une barre posée sur média : léger
   voile dégradé + textes CLAIRS à ombre douce → lisibles quel que soit le thème.
   Au défilement, .site-header--scrolled reprend la main (fond frosté + couleurs
   du thème) : d'où le :not(.site-header--scrolled). Scopé à .site-hero--photo :
   sans photo (repli orbes, potentiellement pâle), le texte foncé par défaut
   reste le bon choix. Le voile suffit à la lisibilité sur tous les thèmes. */
body:has([data-home-layout="presentation_minimal"] .site-hero--photo) .site-header:not(.site-header--scrolled) {
    background: linear-gradient(
        180deg,
        rgba(8, 14, 30, 0.52) 0%,
        rgba(8, 14, 30, 0.30) 68%,
        rgba(8, 14, 30, 0.14) 100%
    );
    border-bottom-color: transparent;
}

/* Nom + slogan du dojo : toujours dans la barre (topbar), même menu mobile
   ouvert → on les éclaircit à toutes les largeurs. */
body:has([data-home-layout="presentation_minimal"] .site-hero--photo) .site-header:not(.site-header--scrolled) .brand strong {
    color: #f5f8ff;
    text-shadow: 0 1px 12px rgba(4, 10, 24, 0.6);
}

body:has([data-home-layout="presentation_minimal"] .site-hero--photo) .site-header:not(.site-header--scrolled) .brand small {
    color: rgba(233, 240, 255, 0.82);
    text-shadow: 0 1px 8px rgba(4, 10, 24, 0.5);
}

/* Bouton hamburger (mobile) posé sur la photo : bâtonnets et contour clairs. */
body:has([data-home-layout="presentation_minimal"] .site-hero--photo) .site-header:not(.site-header--scrolled) .nav-toggle {
    color: #f5f8ff;
    border-color: rgba(255, 255, 255, 0.4);
}

/* Liens de nav en clair UNIQUEMENT en bureau (nav en ligne dans la barre). En
   mobile (≤ 960 px), la nav déployée est une feuille opaque claire : les liens
   y gardent leur texte foncé par défaut, sinon ils deviendraient invisibles. */
@media (min-width: 961px) {
    body:has([data-home-layout="presentation_minimal"] .site-hero--photo) .site-header:not(.site-header--scrolled) .main-nav .nav-link {
        --nav-link-base-color: rgba(244, 248, 255, 0.92);
        --nav-link-hover-color: #ffffff;
        text-shadow: 0 1px 8px rgba(4, 10, 24, 0.5);
    }

    /* Pastilles « S'inscrire » (highlight) / primaire : verre clair translucide
       au lieu de la pastille accent-soft, quasi invisible sur la photo. */
    body:has([data-home-layout="presentation_minimal"] .site-hero--photo) .site-header:not(.site-header--scrolled) .main-nav .nav-link-highlight,
    body:has([data-home-layout="presentation_minimal"] .site-hero--photo) .site-header:not(.site-header--scrolled) .main-nav .nav-link-primary {
        background: rgba(255, 255, 255, 0.16);
        border-color: rgba(255, 255, 255, 0.36);
    }

    /* Le panneau déroulant (« À propos ») garde SON fond clair, sous la barre :
       l'éclaircissement des liens n'y a pas lieu d'être (blanc sur pâle =
       illisible). On rétablit la couleur de thème pour ses liens non actifs ;
       le toggle « À propos » lui-même reste sur la barre → non touché, et le
       lien actif garde sa pastille accent + libellé clair. */
    body:has([data-home-layout="presentation_minimal"] .site-hero--photo) .site-header:not(.site-header--scrolled) .main-nav .nav-submenu-panel .nav-link:not(.is-active) {
        --nav-link-base-color: color-mix(in srgb, var(--accent-strong) 86%, var(--text) 14%);
        --nav-link-hover-color: var(--accent);
        text-shadow: none;
    }
}

.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;
}

/* ---- Pile des bandeaux du haut de page (source unique du collage) ----
   Bandeau dev, aperçu d'un utilisateur, mode visualisation : ils s'empilent
   dans le flux d'UN conteneur collant. Chacun collait auparavant pour son
   compte au même bord, donc deux bandeaux affichés ensemble se recouvraient ;
   et chaque nouveau bandeau devait connaître la hauteur des précédents.
   La hauteur totale est publiée en --dojo-banners-height (js/sticky_offsets.js),
   c'est elle qui décale l'en-tête collant. */
.site-banners {
    position: sticky;
    top: 0;
    z-index: 9999;
}

.site-banners:empty {
    display: none;
}

/* ---- Un bandeau du haut de page (habillage unique) ----
   Géométrie commune, couleur par TON : le contenu vient du registre
   `app/site_banners.py`, donc un nouveau bandeau n'a rien à écrire ici — il
   choisit un ton. Les trois bandeaux avaient chacun leur bloc de règles, et
   leurs différences (padding, taille, forme du bouton) n'exprimaient rien
   d'autre que l'ordre dans lequel ils avaient été écrits. */
.site-banner {
    --banner-accent: var(--accent, #6d5efc);
    --banner-text: #ffffff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    row-gap: 0.4rem;
    padding: 0.4rem 1rem;
    background: color-mix(in srgb, var(--banner-accent) 88%, #000 12%);
    border-bottom: 2px solid color-mix(in srgb, var(--banner-accent) 60%, #fff 40%);
    color: var(--banner-text);
    font-size: 0.82rem;
    line-height: 1.2;
    text-align: center;
}

.site-banner--warning {
    --banner-accent: var(--brand-orange, #e07b39);
}

.site-banner--danger {
    --banner-accent: var(--brand-red, #b42318);
}

.site-banner--success {
    --banner-accent: #1f8f5f;
}

/* Ton « dev » : volontairement à part — il ne parle pas de l'école mais de
   l'environnement, donc il ne prend aucune couleur de marque (sinon il change
   d'allure d'un dojo à l'autre et se confond avec un message du site). */
.site-banner--dev {
    --banner-accent: #c9a000;
    --banner-text: #c9a000;
    background: #2a2a2a;
    gap: 0.5rem;
    row-gap: 0.35rem;
    padding: 0.3rem 1rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    user-select: none;
}

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

.site-banner__icon {
    display: inline-flex;
    font-size: 1rem;
}

.site-banner__text strong {
    font-weight: 700;
}

.site-banner__form {
    margin: 0;
}

/* Une seule allure d'action, que ce soit un lien ou un bouton de formulaire. */
.site-banner__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.8rem;
    border: 1px solid color-mix(in srgb, #fff 70%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, #fff 16%, transparent);
    color: inherit;
    text-decoration: none;
    font: inherit;
    font-weight: 600;
    font-size: 0.78rem;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.site-banner__action:hover,
.site-banner__action:focus-visible {
    background: color-mix(in srgb, #fff 28%, transparent);
    border-color: #fff;
    outline: none;
}

.site-banner--dev .site-banner__action {
    border-color: color-mix(in srgb, #c9a000 74%, #ffffff 26%);
    background: transparent;
    color: #ffe7a6;
    padding: 0.2rem 0.65rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.15;
}

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

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

@media (max-width: 960px) {
    .site-banner {
        padding: 0.4rem 0.75rem;
    }

    .site-banner--dev {
        padding: 0.35rem 0.75rem;
        line-height: 1.15;
    }

    /* Rouage décoratif : inutile sur petit écran (orphelin au repli) */
    .site-banner--dev .site-banner__icon {
        display: none;
    }

    .site-banner__action {
        min-height: 44px;
        padding: 0.5rem 0.9rem;
    }

    .site-banner--dev .site-banner__action {
        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;
    /* Ne pas animer font-size/line-height : theme.js MESURE ces propriétés pour
       décider de .brand-title-compact. Les animer faisait tomber la mesure sur une
       valeur intermédiaire, qui décidait un autre état, qui relançait l'animation
       → boucle infinie de redimensionnement (ResizeObserver). On n'anime pas ce
       qu'on mesure. Le basculement est de toute façon lié au redimensionnement. */
}

.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 {
    --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 {
    --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="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);
}

/* Le lien actif n'a pas de couche hover ::after : son libellé est déjà dessiné
   par ::before (blanc sur pilule accent), avec ou sans le glider. */
.main-nav .nav-link.is-active::after {
    content: none;
}

.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;
}

/* Le repère « page courante » de repli reste masqué quand il n'a pas de contenu :
   sans ce garde, la règle mobile .nav-link-temporary { display: flex } écrase
   l'attribut [hidden] et laisse une pastille vide en pointillé dans le menu. */
.main-nav .nav-link-temporary[hidden] {
    display: none;
}

/* --- Lien « Festifun » : pilule festive néon (palette de la vitrine Festifun) ---
   Neutralise l'astuce data-label/::before-::after du .nav-link (on affiche un vrai
   libellé dans .festifun-nav-link__text) et pose une pilule à dégradé, glow pulsé
   et sweep de lumière. Confettis au survol/clic via festifun_nav_confetti.js. */
/* --- Lien « Festifun » : version 100 % compositée GPU ---------------------
   Tout ce qui « respire » est animé en OPACITY ou TRANSFORM (couches séparées),
   jamais en box-shadow/background-position : ces deux-là forçaient un repaint de
   l'en-tête à ~60 i/s en permanence (le bouton vit dans la nav globale). Le glow
   pulsé = deux ombres statiques qui se croisent en opacité ; le cycle de teinte =
   fondu d'un 2e dégradé ; le balayage = translateX. Résultat : ~0 repaint au repos.

   L'ombre du glow doit déborder du bouton → elle ne peut pas vivre dans un enfant
   « overflow:hidden ». Le clip du balayage est donc déporté sur .festifun-nav-link__fx,
   et le bouton lui-même n'a plus d'overflow : ses pseudo-éléments ::before/::after
   portent le glow librement. */
.main-nav .festifun-nav-link {
    --festifun-pink: #ff2e88;
    --festifun-cyan: #22d3ee;
    --festifun-yellow: #ffe14d;
    --festifun-purple: #a855f7;
    isolation: isolate;
    color: #fff;
    padding: 0.34rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: linear-gradient(110deg, var(--festifun-pink), var(--festifun-purple) 48%, var(--festifun-cyan));
    transition: transform 200ms ease;
}

/* Glow — couche A (rose/violet, toujours visible) sur ::before, couche B
   (cyan/jaune, en fondu) sur ::after. Le croisement d'opacité recrée le cycle de
   couleur sans jamais animer box-shadow. */
.main-nav .festifun-nav-link::before,
.main-nav .festifun-nav-link::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    /* Neutralise le révélateur de texte hérité de .nav-link::after (même
       spécificité) : sans ça, clip-path rognerait la couche glow à zéro. */
    clip-path: none;
    background: none;
    transition: none;
}

.main-nav .festifun-nav-link::before {
    box-shadow:
        0 0 0 1px rgba(255, 46, 136, 0.25),
        0 6px 18px -6px rgba(168, 85, 247, 0.6),
        0 0 16px rgba(255, 46, 136, 0.4);
}

.main-nav .festifun-nav-link::after {
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.35),
        0 6px 20px -6px rgba(34, 211, 238, 0.7),
        0 0 26px rgba(255, 225, 77, 0.5);
    opacity: 0;
    animation: festifun-nav-glow-fade 2.8s ease-in-out infinite;
}

/* Couche d'effets clippée à la pilule : contient le fondu de teinte et le balayage.
   C'est ELLE qui porte overflow:hidden (plus le bouton), pour ne pas rogner le glow. */
.main-nav .festifun-nav-link__fx {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

/* Fondu de teinte : 2e dégradé (jaune/rose) crossfadé par-dessus le dégradé de base. */
.main-nav .festifun-nav-link__fx::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, var(--festifun-yellow), var(--festifun-pink) 52%, var(--festifun-cyan));
    opacity: 0;
    animation: festifun-nav-hue-fade 6s ease-in-out infinite;
}

.main-nav .festifun-nav-link .festifun-nav-link__text {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #fff;
    text-shadow: 0 1px 6px rgba(12, 8, 32, 0.45);
}

.main-nav .festifun-nav-link .ph-confetti {
    font-size: 1.05em;
}

.main-nav .festifun-nav-link__emoji {
    display: inline-block;
    transform-origin: 70% 70%;
}

/* Sweep de lumière qui traverse la pilule en boucle (transform → composité GPU) */
.main-nav .festifun-nav-link__sheen {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 66%);
    transform: translateX(-120%);
    animation: festifun-nav-sheen 3.4s ease-in-out infinite;
}

.main-nav .festifun-nav-link:hover,
.main-nav .festifun-nav-link:focus-visible {
    transform: translateY(-1px) scale(1.05);
}

/* Intensification au survol : bascule d'opacité des deux couches de glow
   (interaction ponctuelle → coût de repaint négligeable, contrairement à l'idle). */
.main-nav .festifun-nav-link:hover::after,
.main-nav .festifun-nav-link:focus-visible::after {
    animation: none;
    opacity: 1;
}

/* Au survol/focus, .nav-link::after hérite d'un clip-path rectangulaire
   (révélateur de texte des liens normaux, spécificité 0,4,1) qui rognait le glow
   Festifun en carré. On le neutralise à spécificité égale, plus loin dans la source. */
.main-nav .festifun-nav-link:not(.is-active):hover::after,
.main-nav .festifun-nav-link:not(.is-active):focus-visible::after {
    clip-path: none;
}

.main-nav .festifun-nav-link:hover .festifun-nav-link__emoji,
.main-nav .festifun-nav-link:focus-visible .festifun-nav-link__emoji {
    animation: festifun-nav-wiggle 0.5s ease-in-out infinite;
}

@keyframes festifun-nav-hue-fade {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

@keyframes festifun-nav-glow-fade {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

@keyframes festifun-nav-sheen {
    0% { transform: translateX(-120%); }
    55%, 100% { transform: translateX(120%); }
}

@keyframes festifun-nav-wiggle {
    0%, 100% { transform: rotate(-12deg) scale(1.08); }
    50% { transform: rotate(12deg) scale(1.22); }
}

/* Confettis générés par le JS (couche document, position fixed) */
.festifun-confetti-piece {
    position: fixed;
    top: 0;
    left: 0;
    width: 9px;
    height: 14px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 4000;
    will-change: transform, opacity;
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .main-nav .festifun-nav-link::after,
    .main-nav .festifun-nav-link__fx::before,
    .main-nav .festifun-nav-link:hover .festifun-nav-link__emoji,
    .main-nav .festifun-nav-link:focus-visible .festifun-nav-link__emoji {
        animation: none;
    }
    .main-nav .festifun-nav-link::after,
    .main-nav .festifun-nav-link__fx::before {
        opacity: 0;
    }
    .main-nav .festifun-nav-link__sheen {
        display: none;
    }
    .main-nav .festifun-nav-link:hover,
    .main-nav .festifun-nav-link:focus-visible {
        transform: none;
    }
    .festifun-confetti-piece {
        display: none;
    }
}

/* Liste des sites (portail sysadmin → Festivités → Menu Festifun) */
.festifun-site-toggle-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.festifun-site-toggle-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--line, #e2e2e2);
    border-radius: 12px;
}

.festifun-site-toggle-row .autosave-status {
    margin: 0;
    font-size: 0.85rem;
}

.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 .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.
   `inherit` (et non une valeur en dur) : la boîte du <summary> est dimensionnée par son
   texte réel (transparent) — si le libellé ::before/::after avait une graisse différente,
   il serait plus large que la boîte et déborderait dans la zone du chevron (visible sur
   les libellés longs, ex. « Approvisionnement »). */
.main-nav .nav-submenu-toggle::before,
.main-nav .nav-submenu-toggle::after {
    font-weight: inherit;
    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).
   font-weight ici même : un <summary> n'est pas couvert par `.main-nav a` (600), et le
   texte réel doit avoir la même graisse que le libellé ::before qui le recouvre. */
.main-nav .nav-submenu-toggle {
    font-weight: 600;
    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;
}

.main-nav .calendar-member-filter-indicator::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        120deg,
        color-mix(in srgb, var(--accent) 80%, #ffffff 20%) 0%,
        color-mix(in srgb, var(--accent-strong, var(--accent)) 90%, #000000 10%) 100%
    );
    opacity: 0;
    transition: opacity 240ms ease;
    pointer-events: none;
}

.main-nav[data-indicator-on-submenu] .calendar-member-filter-indicator::after {
    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%);
    /* Le libellé est dessiné par ::before : on colore CELUI-CI et on garde le
       vrai texte transparent. Sinon (color:#fff) le texte réel ET le ::before
       s'affichent tous les deux → libellé dédoublé (visible en thème sombre). */
    --nav-link-base-color: #ffffff;
    color: transparent;
}

/* ── 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;
}

/* Connexion = action principale du visiteur : libellé toujours visible (une icône
   seule se lit aussi bien « déconnexion » que « suivant »), fond plein pour la
   distinguer des liens de navigation voisins. */
.session-login-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.55rem 1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 60%, #000000 40%);
    border-radius: 999px;
    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%)
    );
    box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 24%, transparent);
    color: var(--brand-white);
    white-space: nowrap;
    transition: box-shadow var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

/* Surcharge le `.session-links a { color: var(--accent-strong) }` générique. */
.session-links a.session-login-link {
    color: var(--brand-white);
}

.session-login-link:hover,
.session-login-link:focus-visible {
    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 14px 28px color-mix(in srgb, var(--accent) 34%, transparent);
}

.session-login-link:focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}

.session-login-link:active {
    transform: translateY(1px);
}

.session-login-text {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.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;
}

/* Battement discret des badges de messages non lus
   (inspiré d'Animista heartbeat : double pulsation puis longue pause) */
[data-unread-badge]:not([hidden]) {
    animation: unread-badge-heartbeat 3s ease-in-out 1.5s infinite;
}

@keyframes unread-badge-heartbeat {
    0%,
    12%,
    24%,
    100% {
        transform: scale(1);
    }
    6% {
        transform: scale(1.16);
    }
    18% {
        transform: scale(1.1);
    }
}

.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: 240px;
    max-height: min(78vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* En-tête collant : la recherche « Aperçu d'un utilisateur » reste visible en
   haut du panneau, ses résultats aussi, pendant que la liste de rôles défile. */
.profile-preview-head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    gap: 0.3rem;
    padding-bottom: 0.45rem;
    margin-bottom: 0.1rem;
    background: var(--bg-elevated-strong);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}

/* Liste de rôles repliée par défaut (ouverte si un aperçu de rôle est actif). */
.profile-preview-roles {
    display: grid;
    gap: 0.15rem;
}

.profile-preview-roles-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.52rem 0.6rem;
    border-radius: 10px;
    font: inherit;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

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

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

.profile-preview-roles-caret {
    font-size: 0.9rem;
    opacity: 0.7;
    transition: transform var(--transition-fast);
}

.profile-preview-roles[open] .profile-preview-roles-caret {
    transform: rotate(180deg);
}

.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);
}

/* Aperçu « comme un utilisateur précis » : recherche dans le menu Prévisualiser. */
.profile-preview-user {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.profile-preview-user-form {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.profile-preview-user-input {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    border-radius: 10px;
    padding: 0.5rem 0.6rem;
    font: inherit;
}

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

.profile-preview-user-results {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-height: 220px;
    overflow-y: auto;
}

.profile-preview-user-result {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    border-radius: 10px;
    padding: 0.45rem 0.6rem;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.profile-preview-user-result:hover,
.profile-preview-user-result:focus-visible {
    background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
    outline: none;
}

.profile-preview-user-result-name {
    font-weight: 600;
}

.profile-preview-user-result-email {
    font-size: 0.78rem;
    color: var(--text-muted, color-mix(in srgb, var(--text) 62%, transparent));
}

.profile-preview-user-empty {
    padding: 0.45rem 0.6rem;
    font-size: 0.82rem;
    color: var(--text-muted, color-mix(in srgb, var(--text) 62%, transparent));
}

.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;
    /* Ne jamais dépasser le bas de l'écran : plafonne la hauteur au viewport
       (repli vh + dvh pour la barre d'adresse mobile) et fait défiler à
       l'intérieur. overscroll-behavior empêche la page de défiler dessous. */
    max-height: calc(100vh - 5.5rem);
    max-height: min(72vh, calc(100dvh - 5.5rem));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--line) 80%, transparent) transparent;
    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);
}

/* Sous le bandeau « dev », l'en-tête descend : on réserve sa hauteur en plus. */
body.has-dev-banner .profile-menu-panel {
    max-height: calc(100dvh - 5.5rem - var(--dev-banner-height, 1.35rem));
}

/* Scrollbar discrète (WebKit) quand le menu défile */
.profile-menu-panel::-webkit-scrollbar {
    width: 8px;
}

.profile-menu-panel::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.profile-menu-panel::-webkit-scrollbar-track {
    background: transparent;
}

.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 .profile-theme-options {
    padding: 0;
}

.profile-menu-panel a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    border-radius: 11px;
    padding: 0.42rem 0.5rem;
    color: var(--text);
    font-weight: 600;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

/* Chaque icône du menu est posée dans une « tuile » arrondie, neutre par
   défaut (les sections spéciales la reteintent plus bas). */
.profile-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--line) 34%, transparent);
    background: color-mix(in srgb, var(--line) 20%, transparent);
    flex-shrink: 0;
    color: var(--muted);
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.profile-menu-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.profile-menu-panel a:hover .profile-menu-icon {
    background: color-mix(in srgb, var(--accent-soft) 88%, transparent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--accent);
}

/* Pousse vers la droite les badges de compteur et la flèche « lien externe ». */
.profile-menu-panel a .count-badge,
.profile-menu-panel a .menu-link__ext {
    margin-left: auto;
}

.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;
    transform: translateX(2px);
}

.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;
}

/* Section Administration + Déconnexion : chaque entrée porte une « tuile »
   d'icône teintée par catégorie (bleu = portails admin, ambre = portail
   système, rouge = déconnexion) pour un rendu plus soigné qu'une simple
   barre latérale. Tout est exprimé en tokens → compatible avec tous les thèmes. */
/* — Bleu (portails admin) — */
.profile-menu-panel a.menu-link--admin .profile-menu-icon {
    background: color-mix(in srgb, var(--accent-soft) 72%, transparent);
    border-color: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent);
}

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

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

/* — Ambre / or (portail système) : couleur propre, distincte du bleu admin
   et du rouge de la déconnexion. Défini en variable locale héritée par
   l'icône et les états de survol. */
.profile-menu-panel a.menu-link--sysadmin {
    --sysadmin: #d97706;
    color: color-mix(in srgb, var(--sysadmin) 72%, var(--text));
}

.profile-menu-panel a.menu-link--sysadmin .profile-menu-icon {
    background: color-mix(in srgb, var(--sysadmin) 14%, transparent);
    border-color: color-mix(in srgb, var(--sysadmin) 28%, transparent);
    color: var(--sysadmin);
}

.profile-menu-panel a.menu-link--sysadmin:hover {
    background: color-mix(in srgb, var(--sysadmin) 12%, transparent);
    color: color-mix(in srgb, var(--sysadmin) 85%, var(--text));
    transform: translateX(2px);
}

.profile-menu-panel a.menu-link--sysadmin:hover .profile-menu-icon {
    background: color-mix(in srgb, var(--sysadmin) 24%, transparent);
    border-color: color-mix(in srgb, var(--sysadmin) 48%, transparent);
    color: var(--sysadmin);
}

/* — Déconnexion : même tuile rouge, cohérente avec le portail système — */
.profile-menu-panel a.menu-logout .profile-menu-icon {
    background: color-mix(in srgb, var(--brand-red) 12%, transparent);
    border-color: color-mix(in srgb, var(--brand-red) 24%, transparent);
    color: color-mix(in srgb, var(--brand-red) 85%, #000000 15%);
}

.profile-menu-panel a.menu-logout:hover .profile-menu-icon {
    background: color-mix(in srgb, var(--brand-red) 20%, transparent);
    border-color: color-mix(in srgb, var(--brand-red) 45%, transparent);
    color: color-mix(in srgb, var(--brand-red) 90%, #000000 10%);
}

/* Flèche « lien externe » → petite pastille discrète qui s'illumine au survol */
.menu-link__ext {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1;
    opacity: 0.7;
    background: color-mix(in srgb, var(--line) 45%, transparent);
    flex-shrink: 0;
    transition: opacity var(--transition-fast), background var(--transition-fast);
}

.profile-menu-panel a:hover .menu-link__ext {
    opacity: 1;
    background: color-mix(in srgb, var(--line) 70%, transparent);
}

.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;
}

/* ── Interrupteur compact « squircle » (.ui-toggle--sm) ──────────────────────
   Modificateur réutilisable : piste/pouce à coins arrondis, plus courts que le
   gros interrupteur, pour les listes empilées denses et les micro-réglages
   secondaires. Source unique de vérité — le sélecteur de thème (menu profil
   .profile-menu-panel--theme + sélecteur public .theme-picker__panel) partage
   exactement le même rendu via les listes de sélecteurs ci-dessous, sans avoir
   à ajouter la classe dans base.html. Documenté dans la page Système de design.
   Pour l'utiliser ailleurs : <label class="ui-toggle ui-toggle--sm">…</label>. */
.ui-toggle--sm,
.profile-menu-panel--theme .ui-toggle,
.theme-picker__panel .ui-toggle {
    min-height: 1.65rem;
    gap: 0.5rem;
}

.ui-toggle--sm .ui-toggle__track,
.profile-menu-panel--theme .ui-toggle__track,
.theme-picker__panel .ui-toggle__track {
    /* Piste « squircle » compacte : coins arrondis concentriques avec le pouce
       (rayon piste − padding ≈ rayon pouce), fond dégradé + creux interne léger
       pour donner une vraie fente où loge la touche. */
    width: 2.2rem;
    height: 1.25rem;
    border-radius: 7px;
    padding: 0.17rem;
    flex-shrink: 0;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--line) 58%, var(--bg-elevated)) 0%,
            color-mix(in srgb, var(--line) 38%, var(--bg-elevated)) 100%);
    box-shadow:
        inset 0 1px 2px color-mix(in srgb, #000000 20%, transparent),
        inset 0 -1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

.ui-toggle--sm .ui-toggle__thumb,
.profile-menu-panel--theme .ui-toggle__thumb,
.theme-picker__panel .ui-toggle__thumb {
    /* Touche carrée-arrondie dimensionnée pour tenir dans la fente sans être
       rognée (hauteur ≤ zone de contenu de la piste). Sheen vertical discret au
       lieu de la bille radiale héritée du gros interrupteur. */
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 4.5px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, #ffffff 92%, var(--bg-elevated)) 0%,
            color-mix(in srgb, #ffffff 66%, var(--bg-elevated)) 100%);
    box-shadow:
        0 1px 2px color-mix(in srgb, #000000 32%, transparent),
        0 0 1px color-mix(in srgb, #000000 20%, transparent),
        inset 0 0.5px 0 color-mix(in srgb, #ffffff 85%, transparent);
}

.ui-toggle--sm .ui-toggle__input:checked + .ui-toggle__track,
.profile-menu-panel--theme .ui-toggle__input:checked + .ui-toggle__track,
.theme-picker__panel .ui-toggle__input:checked + .ui-toggle__track {
    /* Halo d'accent resserré (2 px au lieu de 3) adapté à la petite piste. */
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent),
        inset 0 1px 1px color-mix(in srgb, #000000 14%, transparent);
}

.ui-toggle--sm .ui-toggle__input:checked + .ui-toggle__track .ui-toggle__thumb,
.profile-menu-panel--theme .ui-toggle__input:checked + .ui-toggle__track .ui-toggle__thumb,
.theme-picker__panel .ui-toggle__input:checked + .ui-toggle__track .ui-toggle__thumb {
    /* Piste rectangulaire réduite : on neutralise l'animation « bump » (calée
       sur la grande piste, elle déborderait) et on translate au bord, marge
       égale à celle de gauche. */
    transform: translateX(0.95rem);
    animation: none;
    background:
        linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, #ffffff 80%, var(--accent)) 100%);
    box-shadow:
        0 1px 2px color-mix(in srgb, #000000 30%, transparent),
        inset 0 0.5px 0 #ffffff;
}

.profile-menu-panel--theme .ui-toggle__text,
.theme-picker__panel .ui-toggle__text {
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Resserre l'espacement vertical des interrupteurs empilés ; la marge
   horizontale de 0.6rem aligne leur bord gauche sur les pastilles de thème. */
.profile-menu-panel--theme .theme-auto-toggle,
.profile-menu-panel--theme .theme-a11y-toggle {
    margin: 0.02rem 0.6rem 0.04rem;
}

.theme-picker__panel .theme-picker__auto-toggle {
    margin: 0 0.72rem 0.14rem;
}

/* Options de thème regroupées dans un encadré compact sous les interrupteurs. */
.profile-menu-panel--theme .profile-theme-options,
.theme-picker__panel .theme-picker__options {
    margin: 0.35rem 0.6rem 0.15rem;
    padding: 0.22rem;
    border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    gap: 0.08rem;
}

.theme-picker__panel .theme-picker__options {
    margin: 0.35rem 0.72rem 0.15rem;
}

.profile-menu-panel--theme .profile-theme-option {
    padding: 0.32rem 0.5rem;
    border-radius: 9px;
}

.theme-picker__panel .theme-picker__option {
    min-height: 0;
    padding: 0.34rem 0.55rem;
    border-radius: 9px;
}

.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;
    /* Marge intérieure pour que le cadre de sélection (box-shadow) et le
       survol (translateY) ne soient pas coupés par overflow: auto. */
    padding: 0.3rem 0.32rem;
}

.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);
}

/* ─── Champ verrouillé (lecture seule) — rend le cadenas explicite, p. ex. la
   date de naissance côté membre (modifiable uniquement par l'administration).
   Fond atténué + bordure pointillée + cadenas dans le champ + badge au libellé. */
.locked-field {
    position: relative;
}
.locked-field__icon {
    position: absolute;
    top: 50%;
    right: 0.9rem;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 1.05rem;
    pointer-events: none;
}
.form-input--locked {
    padding-right: 2.5rem;
    color: var(--muted);
    background-color: color-mix(in srgb, var(--bg-elevated) 55%, var(--line));
    border-style: dashed;
    cursor: not-allowed;
}
.locked-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--muted);
    background: color-mix(in srgb, var(--muted) 16%, transparent);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}
.locked-badge .ph {
    font-size: 0.85rem;
}
/* Badge cliquable → ouvre la messagerie vers l'administration pour demander une
   correction du champ verrouillé. */
a.locked-badge {
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
a.locked-badge:hover,
a.locked-badge:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.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;
}

/* Le <select> d'origine, masqué mais toujours soumis avec le formulaire.
   ⚠️ `select.` (élément + classe) et non la classe seule : `.form-control`, qui
   pose `width: 100%`, est déclaré bien plus bas dans cette feuille et gagnait
   donc à égalité de spécificité — le champ natif restait large (invisible grâce
   au seul `clip-path`, ce qui ne tenait qu'à un fil). */
select.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;
}

/* ⚠️ Le déclencheur porte désormais la classe de champ de son <select> d'origine
   (`.form-input` OU `.form-control`, voir custom_select.js). `.form-control` est
   déclaré bien plus bas dans cette feuille et utilise le RACCOURCI `background:`,
   qui remet `background-image` à `none` — le chevron disparaissait. On le
   réaffirme donc avec un sélecteur plus spécifique (élément + classe), sans
   `!important`. */
button.custom-select__trigger {
    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;
}

/* Champ enrichi par custom_combobox.js (saisie libre + panneau de suggestions).
   Le chevron est la seule chose qui annonce la liste : sans lui, le champ passe
   pour une saisie libre ordinaire et les suggestions n'existent que pour qui
   pense à cliquer dedans. Sélecteur élément + classe pour la même raison que
   `button.custom-select__trigger` : `.form-control` (Festifun) utilise le
   raccourci `background:` et effacerait l'image. */
input.custom-combobox-input {
    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;
}

/* Dans un combobox, la 2e colonne est le LIBELLÉ humain d'une clé technique :
   elle peut être longue là où un `data-hint` de custom_select est un prix ou un
   compte. Elle cède donc la place au lieu de déborder du panneau. */
.custom-select__panel--combobox .custom-select__option-button.has-hint {
    gap: 1.1rem;
}

.custom-select__panel--combobox .custom-select__option-hint {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

.custom-select__trigger-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    overflow: hidden;
}

.custom-select__trigger-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-select__trigger-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: 0 0 auto;
    border-radius: 4px;
}

.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;
    /* Fond pleinement OPAQUE : le panneau est porté dans <body>, au-dessus de
       contenu quelconque, et --bg-elevated est volontairement translucide
       (surfaces « verre »). On peint donc la base opaque --bg puis on superpose
       la teinte élevée, sinon le texte derrière transparaît (menu illisible,
       visible sur le sélecteur « Jour » des horaires de groupe). */
    background-color: var(--bg);
    background-image: linear-gradient(var(--bg-elevated), var(--bg-elevated));
    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;
    /* Repli si le JS n'a pas encore mesuré l'espace : la liste défile déjà. */
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--line) 80%, transparent) transparent;
}

/* Scrollbar discrète (WebKit) quand la liste d'options défile */
.custom-select__list::-webkit-scrollbar {
    width: 8px;
}

.custom-select__list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.custom-select__list::-webkit-scrollbar-track {
    background: transparent;
}

.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;
}

/* Option avec coût/indice secondaire (ex. tarif OpenRouter via data-hint). */
.custom-select__option-button.has-hint {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.85rem;
}

/* Option avec vignette (ex. glyphe de remplacement via data-icon). */
.custom-select__option-button.has-icon {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.custom-select__option-button.has-icon.has-hint {
    justify-content: space-between;
}

.custom-select__option-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex: 0 0 auto;
    border-radius: 4px;
}

.custom-select__option-label {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}

/* Vignette d'un visuel de remplacement dans une liste (ex. visuels de cours). */
.glyph-preview-row {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.glyph-preview-thumb {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: 0 0 auto;
    border-radius: 4px;
}

.custom-select__option-hint {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.custom-select__option-button.is-selected .custom-select__option-hint {
    color: inherit;
}

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

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

/* Filtres à facettes optionnels (opt-in via data-custom-select-filters).
   Aucun effet sur les <select> ordinaires : le bloc reste vide et caché. */
.custom-select__filters {
    display: grid;
    gap: 0.4rem;
    margin: 0.1rem 0 0.5rem;
}

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

.custom-select__filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.custom-select__filter-group-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    margin-right: 0.15rem;
}

.custom-select__filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.custom-select__filter-chip:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

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

.custom-select__filter-chip.is-active {
    background: color-mix(in srgb, var(--accent-soft) 80%, transparent);
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
    color: color-mix(in srgb, var(--accent) 70%, var(--text));
}

.custom-select__filter-chip-count {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
}

.custom-select__filter-chip.is-active .custom-select__filter-chip-count {
    color: inherit;
}

.custom-select__filter-reset {
    border: 0;
    background: transparent;
    color: var(--accent-strong);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.2rem 0.35rem;
    border-radius: 8px;
}

.custom-select__filter-reset:hover {
    text-decoration: underline;
}

/* Rangée « champ modèle + bouton Charger les modèles » (config IA). */
.model-select-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.model-select-row .custom-select {
    flex: 1 1 240px;
    min-width: 0;
    width: auto;
}

/* Menu à choix multiple custom (custom_multiselect.js) : déclencheur à puces +
   panneau de cases à cocher. Réutilise le panneau/liste de .custom-select. */
.custom-multiselect__trigger {
    flex-wrap: wrap;
    height: auto;
    min-height: 44px;
    gap: 0.4rem;
    cursor: pointer;
}

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

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

.custom-multiselect__values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.custom-multiselect__placeholder {
    color: var(--muted);
}

.custom-multiselect__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.3rem 0.18rem 0.55rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
    color: color-mix(in srgb, var(--accent) 70%, var(--text));
    font-size: 0.85rem;
    max-width: 100%;
}

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

.custom-multiselect__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 0.72rem;
    line-height: 1;
}

.custom-multiselect__chip-remove:hover {
    background: color-mix(in srgb, var(--accent) 24%, transparent);
}

.custom-multiselect__option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.custom-multiselect__option.is-selected {
    font-weight: 600;
}

.custom-multiselect__check {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    border: 1.5px solid color-mix(in srgb, var(--accent) 40%, var(--line));
    border-radius: 6px;
    background: var(--bg-elevated);
    position: relative;
}

.custom-multiselect__option.is-selected .custom-multiselect__check {
    background: var(--accent);
    border-color: var(--accent);
}

.custom-multiselect__option.is-selected .custom-multiselect__check::after {
    content: "";
    position: absolute;
    left: 0.36rem;
    top: 0.16rem;
    width: 0.28rem;
    height: 0.55rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-multiselect__option-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.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.72rem 0.3rem;
}

.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;
}

/* État « champ manquant / invalide » — unifié pour tout le site.
   - .input-error-highlight : posé par theme.js sur les champs requis laissés vides
   - :user-invalid : validation native du navigateur (courriel, motif, requis) après
     interaction — même apparence, pour couvrir aussi les formats invalides.
   Couvre .form-input et .form-control (Festivités). */
.input-error-highlight,
.form-input:user-invalid,
.form-control:user-invalid {
    border-color: var(--field-error);
    background: var(--field-error-surface);
    box-shadow: 0 0 0 3px var(--field-error-ring);
}

.input-error-highlight:focus,
.form-input:user-invalid:focus,
.form-control:user-invalid:focus {
    border-color: var(--field-error);
    outline-color: color-mix(in srgb, var(--field-error) 28%, transparent);
    box-shadow: 0 0 0 3px var(--field-error-ring);
}

/* ---- 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-category-group + .role-category-group {
    margin-top: 1.1rem;
}

.role-category-group__title {
    margin: 0 0 0.15rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.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-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;
}

/* Liste des utilisateurs — colonnes : 1 sélection, 2 nom, 3 rôles, 4 messagerie,
   5 état, 6 création, 7 actions.
   La colonne Actions porte jusqu'à sept boutons (modifier, responsable, fiche
   membre, archiver, activer/désactiver, messagerie, mot de passe) : sans plancher
   de largeur, le tableau la comprimait et les boutons se repliaient sur deux
   lignes. La place lui vient des rôles, qui tiennent en une pastille. */
.admin-users-table th:nth-child(3),
.admin-users-table td:nth-child(3) {
    width: 8.5rem;
}

.admin-users-table td.actions-cell {
    min-width: max-content;
}

/* .actions-cell .actions-inline autorise le repli ; la variante groupée, non. */
.admin-users-table .actions-cell .actions-inline--grouped {
    flex-wrap: nowrap;
}

/* ── Grappe de pastilles : « 7 rôles » qui déplie sa liste au survol ──
   Pendant CSS de `static/js/badge_cluster.js`. Le panneau est un élément
   `popover` : il est rendu dans la couche supérieure, donc jamais rogné par
   l'`overflow-x: auto` du `.table-wrap` (un panneau en position absolue l'est).
   Ses coordonnées viennent du JS — la couche supérieure ignore la position du
   déclencheur. */
.badge-cluster {
    display: inline-flex;
}

.badge-cluster__trigger {
    appearance: none;
    cursor: default;
    font-family: inherit;
    /* Le déclencheur est un vrai <button> (clavier + tactile) : il ne doit pas
       hériter des marges internes d'un bouton natif, seulement du look pastille. */
    margin: 0;
}

.badge-cluster__trigger::after {
    content: "";
    /* Chevron discret : sans lui, rien ne distingue « 7 rôles » d'une pastille
       ordinaire, donc rien n'invite à survoler. */
    width: 0.34rem;
    height: 0.34rem;
    margin-left: 0.42rem;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-1px) rotate(45deg);
    opacity: 0.72;
}

.badge-cluster__trigger:hover,
.badge-cluster__trigger:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
}

.badge-cluster__panel {
    position: fixed;
    inset: auto;
    margin: 0;
    max-width: min(22rem, calc(100vw - 1rem));
    padding: 0.6rem;
    border: 1px solid color-mix(in srgb, var(--line) 80%, var(--accent) 20%);
    border-radius: 0.8rem;
    background: var(--bg-elevated-strong);
    box-shadow: var(--shadow-soft);
    /* Le JS borne `max-height` à la place disponible ; au-delà, le panneau
       défile plutôt que de recouvrir son déclencheur. */
    overflow-y: auto;
}

.badge-cluster__panel:popover-open {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.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 tabs styling ---- */
.ui-tabs {
    display: flex;
    gap: 0.15rem;
    border-bottom: 2px solid var(--line);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.ui-tabs::-webkit-scrollbar {
    display: none;
}
.ui-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.1rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    margin-bottom: -2px;
    border-radius: 6px 6px 0 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ui-tab:hover {
    color: var(--text);
    background: var(--accent-soft);
}
.ui-tab--active {
    color: var(--accent-strong);
    border-bottom-color: var(--accent);
}
.ui-tab__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.3rem;
    border-radius: 99px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 0.7rem;
    font-weight: 700;
}
.ui-tab-panel.ui-tab-panel--hidden {
    display: none;
}

/* ---- Indice de défilement horizontal (voir static/js/scroll_hint.js) ----
   Un chevron discret se colle au bord encore scrollable. Pourquoi un chevron
   plutôt qu'un dégradé : une barre d'onglets se termine presque toujours par
   du vide (le padding de l'onglet suivant) juste avant le bord, donc un
   dégradé tombe dans le vide, n'estompe que le trait de soulignement et
   ressemble à un bug. Le chevron, lui, ne dépend pas de l'endroit où le
   contenu est coupé et laisse le trait intact.
   `position: sticky` le maintient au bord visible pendant le défilement.
   Seul le bord « suite » est marqué : un chevron de retour, côté gauche, se
   poserait par-dessus l'onglet coupé (illisible) et n'apprendrait rien à
   quelqu'un qui vient justement de glisser depuis là.
   `width: 0` + `text-indent` négatif : le glyphe se dessine à gauche de sa
   boîte, donc il n'ajoute pas de largeur défilable. Sinon, arriver au bout
   ferait disparaître le chevron et recalerait les onglets d'un cran.
   `.is-scroll-hint-used` : posée dès que l'utilisateur a glissé lui-même — le
   signal a fait son travail, on le retire. */
[data-scroll-hint].is-scroll-hint-end:not(.is-scroll-hint-used)::after {
    content: "\203A";
    position: sticky;
    right: 0;
    z-index: 1;
    flex: 0 0 auto;
    align-self: center;
    width: 0;
    text-indent: -1.05rem;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--accent-strong, var(--muted));
    pointer-events: none;
    /* Halo : garde le chevron lisible s'il passe au-dessus d'un onglet coupé. */
    text-shadow:
        0 0 0.3rem var(--bg-elevated, #fff),
        0 0 0.6rem var(--bg-elevated, #fff),
        0 0 1rem var(--bg-elevated, #fff);
    animation: scroll-hint-nudge 1.5s ease-in-out 3;
}
@keyframes scroll-hint-nudge {
    0%, 100% { transform: translateX(0); opacity: 0.8; }
    50% { transform: translateX(0.22rem); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    [data-scroll-hint].is-scroll-hint-end:not(.is-scroll-hint-used)::after {
        animation: none;
    }
}

/* ---- 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;
}

/* Widget de saisie taille/poids bi-unités (voir static/js/measurement_input.js) */
.measurement-fields {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

/* Chaque vue (métrique / impériale) est une rangée de champs à suffixe d'unité. */
.measurement-fields [data-measurement-view] {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

/* L'attribut [hidden] doit l'emporter sur le display:flex ci-dessus (sinon les
   deux vues, métrique et impériale, s'affichent en même temps). */
.measurement-fields [data-measurement-view][hidden] {
    display: none;
}

.measurement-field {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: center;
}

.measurement-field input {
    width: 100%;
    padding-right: 2.6rem;
}

.measurement-field__unit {
    position: absolute;
    right: 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    pointer-events: none;
}

/* Taille impériale : deux champs pi/po compacts et alignés à gauche (au lieu de
   deux demi-largeurs), pour rester aussi compact que le champ métrique unique. */
[data-measurement-input] [data-measurement-field="height"] [data-measurement-view="imperial"] {
    justify-content: flex-start;
}

[data-measurement-input] [data-measurement-field="height"] [data-measurement-view="imperial"] .measurement-field {
    flex: 0 0 auto;
    width: 7rem;
}

/* Segmented radio — contrôle 3 états */
.segmented-radio {
    display: inline-flex;
    border-radius: var(--radius-pill);
    padding: 0.2rem;
    background: color-mix(in srgb, var(--bg-elevated) 60%, var(--line) 40%);
    border: 1px solid var(--line);
    gap: 0.15rem;
}

.segmented-radio__option {
    display: flex;
    cursor: pointer;
    margin: 0;
}

.segmented-radio__option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.segmented-radio__option span {
    display: block;
    padding: 0.35rem 1.1rem;
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted);
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
    user-select: none;
    line-height: 1.5;
}

.segmented-radio__option:hover span {
    color: var(--text);
    background: color-mix(in srgb, var(--accent-soft) 30%, transparent);
}

.segmented-radio__option input[type="radio"]:checked + span {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

.segmented-radio__option input[type="radio"]:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.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;
    /* Espace entre une icône (ou un badge) et son libellé : sans lui, tout
       bouton composé rend « ✉Synchroniser », collé. Sans effet sur un bouton
       qui n'a qu'un libellé. */
    gap: 0.4rem;
    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;
}

/* Récapitulatif de fin de recopie de saison : les groupes qui existaient déjà
   dans l'année cible, et ce qu'on propose d'y ajouter (templates/admin/_season_completion.html). */
.session-completion-list {
    display: grid;
    gap: 0.75rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
}

.session-completion-item {
    display: grid;
    gap: 0.55rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-elevated) 92%, var(--accent-soft));
}

.session-completion-item__head {
    display: flex;
    align-items: start;
    gap: 0.6rem;
    cursor: pointer;
    line-height: 1.4;
}

.session-completion-item__head input[type="checkbox"] {
    margin-top: 0.25rem;
    flex: 0 0 auto;
}

.session-completion-item__meta {
    display: block;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.session-completion-item__body {
    display: grid;
    gap: 0.4rem;
    padding-left: 1.85rem;
}

.session-completion-item__label {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
}

.session-completion-sublist {
    display: grid;
    gap: 0.28rem;
    margin: 0;
    padding-left: 1.05rem;
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--text);
}

.session-completion-sublist li {
    overflow-wrap: anywhere;
}

/* Groupes déjà complets : repliés (aucune décision à prendre), rangés par
   session et affichés en jetons plutôt qu'en énumération séparée par virgules. */
.session-completion-complete .filter-collapse__title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

/* Même graine verte que `.badge-success` du système unifié de badges de statut :
   « complet » doit se lire du même vert partout. */
.session-completion-complete__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: color-mix(in srgb, #1f9d57 24%, var(--bg-elevated));
    color: color-mix(in srgb, #1f9d57 72%, var(--text));
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
}

/* « Voir lesquels » n'a plus rien à dire une fois la liste ouverte. */
.session-completion-complete[open] .filter-collapse__meta {
    visibility: hidden;
}

.session-completion-season + .session-completion-season {
    margin-top: 0.75rem;
}

.session-completion-season__count {
    margin-left: 0.35rem;
    color: color-mix(in srgb, var(--muted) 75%, var(--text));
    letter-spacing: normal;
}

.session-completion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
}

.session-completion-chip {
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-elevated) 88%, var(--accent-soft));
    font-size: 0.84rem;
    line-height: 1.3;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* .badge-success / .badge-danger : définis avec les autres statuts par le
   système unifié « teinte-graine » (voir « Badges de statut » plus bas). */

.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;
}

/* Le chrome du site est déjà couvert par `scroll-padding-top` sur <html> :
   il ne reste ici que la barre de navigation rapide, collée par-dessus. */
.is-admin .settings-subcard[id],
.is-admin .content-card[id] {
    scroll-margin-top: 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-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;
}

/* Aperçu du parcours montré au visiteur SANS compte (étape 0). Les étapes n'y
   sont pas cliquables : c'est une carte du chemin, pas une navigation — d'où
   le curseur par défaut et l'absence de survol qui promettrait une action. */
.registration-steps--preview .registration-step {
    cursor: default;
    align-items: start;
}

.registration-steps--preview .registration-step:hover {
    transform: none;
}

/* Le libellé long de chaque étape : en minuscules, il ne doit pas hériter du
   `text-transform: uppercase` des `small` du rail. */
.registration-step__hint {
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.8rem;
    line-height: 1.35;
}

.registration-start__actions {
    display: grid;
    gap: 0.6rem;
    justify-items: center;
    text-align: center;
    margin-top: 1.1rem;
}

.registration-start__cta {
    font-size: 1.02rem;
    padding-inline: 1.6rem;
}

.registration-start__alt {
    margin: 0;
}

.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;
}

/* Mention « non certifié famille proche » : le rabais familial ne s'appliquera
   pas à ce membre. Ton informatif et non alarmant — ce n'est pas une erreur du
   parent, c'est une case qu'il n'a pas cochée et qu'il peut encore corriger. */
.member-select-card__flag {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    margin-top: 0.25rem;
    color: var(--text);
    font-size: 0.78rem;
    line-height: 1.35;
}

.member-select-card__flag i {
    flex: none;
    margin-top: 0.12rem;
    color: var(--primary-accent, currentColor);
}

.member-select-card__flag a {
    color: inherit;
    text-decoration: underline;
    white-space: nowrap;
}

/* ── 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: 1.5px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
    color: var(--text);
    min-height: 2.6rem;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.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) 65%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
}

.registration-member-substep.is-current {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 85%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

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

.registration-member-substep.is-current .registration-member-substep__index {
    background: var(--accent);
    color: #fff;
}

/* Animista: ping (attention) */
@keyframes member-status-ping {
    0%   { transform: scale(0.6); opacity: 0.9; }
    80%  { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}

/* Animista: scale-in-center (entrance) */
@keyframes member-status-scale-in {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.registration-member-substep__status {
    position: relative;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    border: 1.5px dashed color-mix(in srgb, var(--brand-orange) 65%, var(--line));
    margin-left: 0.15rem;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    transition: background 0.2s, border-color 0.2s;
}

.registration-member-substep:not(.is-done) .registration-member-substep__status::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--brand-orange) 55%, transparent);
    animation: member-status-ping 2.4s ease-out infinite;
    pointer-events: none;
}

.registration-member-substep.is-done .registration-member-substep__status {
    border: none;
    background: var(--success);
    animation: member-status-scale-in 0.28s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.registration-member-substep.is-done .registration-member-substep__status::after {
    content: '';
    display: block;
    width: 0.28rem;
    height: 0.52rem;
    border: 1.5px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translate(-0.5px, -1px);
}

@media (prefers-reduced-motion: reduce) {
    .registration-member-substep:not(.is-done) .registration-member-substep__status::before {
        animation: none;
    }
    .registration-member-substep.is-done .registration-member-substep__status {
        animation: none;
    }
}

.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;
}

.members-map-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.2rem;
    margin-bottom: 0.85rem;
}

.members-map-status {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.members-map-progress {
    flex: 1 1 220px;
    min-width: 200px;
}

.members-map-progress__bar {
    height: 8px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}

.members-map-progress__bar span {
    display: block;
    height: 100%;
    background: var(--brand-orange);
    transition: width 0.3s ease;
}

.members-map-progress__label {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    opacity: 0.8;
}

.members-map {
    height: min(70vh, 640px);
    min-height: 360px;
    width: 100%;
    border-radius: 16px;
    border: 1px solid var(--line);
    z-index: 0;
}

.members-map-empty {
    margin: 0.85rem 0 0;
    font-size: 0.92rem;
    opacity: 0.85;
}

.account-lock-notice {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--brand-orange) 45%, var(--line));
    border-left: 4px solid var(--brand-orange);
    border-radius: 14px;
    background: var(--warning);
    color: inherit;
    font-size: 0.92rem;
    line-height: 1.45;
}

.account-lock-notice strong {
    display: block;
    margin-bottom: 0.35rem;
}

.account-lock-notice ul {
    margin: 0;
    padding-left: 1.2rem;
}

.account-lock-notice li {
    margin: 0.15rem 0;
}

.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: 2.75rem;
    font-size: 0.96rem;
    color: var(--muted);
}

.landing-owner-request-hint a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.4rem;
    padding: 0.36rem 0.95rem;
    border-radius: 999px;
    font-weight: 650;
    text-decoration: none;
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent-soft) 52%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.landing-owner-request-hint a:hover {
    background: color-mix(in srgb, var(--accent-soft) 78%, transparent);
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
    transform: translateY(-1px);
}

.landing-owner-request-hint a i {
    font-size: 0.9rem;
}

.landing-dojo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 240px));
    gap: 1.4rem;
    justify-content: center;
    max-width: 920px;
    margin: 2.75rem auto 0;
}

.landing-dojo-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    min-height: 244px;
    padding: 2.1rem 1.35rem 1.5rem;
    text-align: center;
    text-decoration: none;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

/* Voile lumineux teinté par l'accent, révélé au survol/focus. */
.landing-dojo-card__sheen {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(125% 82% at 50% -12%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%);
    transition: opacity var(--transition-fast);
}

.landing-dojo-card:hover,
.landing-dojo-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: var(--shadow-strong);
    border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
}

.landing-dojo-card:hover .landing-dojo-card__sheen,
.landing-dojo-card:focus-visible .landing-dojo-card__sheen {
    opacity: 1;
}

.landing-dojo-card__logo-wrap {
    position: relative;
    width: 106px;
    height: 106px;
    border-radius: 26px;
    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 color-mix(in srgb, var(--accent) 24%, var(--line));
    box-shadow:
        0 14px 28px -16px color-mix(in srgb, var(--accent) 62%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 22%, transparent);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.landing-dojo-card:hover .landing-dojo-card__logo-wrap,
.landing-dojo-card:focus-visible .landing-dojo-card__logo-wrap {
    transform: scale(1.05) translateY(-2px);
    box-shadow:
        0 20px 36px -16px color-mix(in srgb, var(--accent) 72%, transparent),
        inset 0 1px 0 color-mix(in srgb, white 30%, transparent);
}

/* Logo réel (image) : on retire l'encadré — pas de fond, de bordure ni d'ombre
   de cadre. L'encadré n'est conservé que pour la lettre de repli. */
.landing-dojo-card__logo-wrap:has(.landing-dojo-card__logo) {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.landing-dojo-card:hover .landing-dojo-card__logo-wrap:has(.landing-dojo-card__logo),
.landing-dojo-card:focus-visible .landing-dojo-card__logo-wrap:has(.landing-dojo-card__logo) {
    box-shadow: none;
}

.landing-dojo-card__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.landing-dojo-card__fallback {
    font-family: var(--font-title);
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--accent-strong);
}

.landing-dojo-card__name {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.32;
    color: var(--text);
    text-wrap: balance;
}

/* Appel à l'action révélé au survol/focus : « Accéder → ». La place est
   réservée en permanence (opacité seule) → aucun saut de mise en page. */
.landing-dojo-card__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--accent-strong);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.landing-dojo-card__cta i {
    font-size: 1rem;
    transition: transform var(--transition-fast);
}

.landing-dojo-card:hover .landing-dojo-card__cta,
.landing-dojo-card:focus-visible .landing-dojo-card__cta {
    opacity: 1;
    transform: translateY(0);
}

.landing-dojo-card:hover .landing-dojo-card__cta i,
.landing-dojo-card:focus-visible .landing-dojo-card__cta i {
    transform: translateX(3px);
}

.landing-empty-state {
    text-align: center;
    color: var(--muted);
}

.landing-competitions {
    position: fixed;
    bottom: 1.75rem;
    right: 1.75rem;
    z-index: 50;
    max-width: min(360px, calc(100vw - 2rem));
}

.landing-competitions-card {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.1rem 1.4rem;
    text-decoration: none;
    box-shadow: var(--shadow-strong);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

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

.landing-competitions-card__icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.7rem;
    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);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 20%, transparent);
}

.landing-competitions-card__text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.landing-competitions-card__title {
    font-family: var(--font-title);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.landing-competitions-card__subtitle {
    font-size: 0.9rem;
    color: var(--muted);
}

.landing-competitions-card__arrow {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 1.15rem;
    color: color-mix(in srgb, var(--accent-strong) 70%, var(--muted));
    transition: transform var(--transition-fast);
}

.landing-competitions-card:hover .landing-competitions-card__arrow {
    transform: translateX(3px);
    color: var(--accent-strong);
}

.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);
}

/* Documents à lire à l'inscription : un bloc par contrat, empilés. */
.registration-contracts {
    gap: 0.9rem;
}

.registration-contract {
    display: grid;
    gap: 0.35rem;
}

.registration-contract + .registration-contract {
    border-top: 1px dashed var(--line);
    padding-top: 0.9rem;
}

.registration-contract__text {
    height: 14rem;
    overflow: auto;
    white-space: pre-line;
}

.registration-contract__text.is-read {
    border-color: color-mix(in srgb, var(--success, #2a9d8f) 55%, var(--line));
}

.registration-contract__reminder {
    margin-top: 0.5rem;
    color: var(--brand-orange, #F77F00);
}

.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));
}

/* La colonne des montants est toujours calée à droite. `:last-child` ne suffit pas
   dès qu'une ligne porte deux paires clé/valeur (bloc « Payer maintenant ») :
   la première valeur retombait alors au début de sa colonne. */
.summary-row > span:last-child,
.summary-row > .summary-value {
    justify-self: end;
    text-align: right;
    font-weight: 700;
}

/* Le bloc mensualités n'a qu'un enfant : sans ça il se range dans la colonne
   des libellés (220 px) et son contenu est écrasé au lieu d'occuper la ligne. */
.summary-row--monthly-breakdown > div {
    grid-column: 1 / -1;
}

.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;
}

/* Session deja commencee : les dates du recap partent du premier cours a venir. */
.summary-course-meta__partial {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.35rem;
    border: 1px solid color-mix(in srgb, #3b62d6 52%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, #3b62d6 24%, var(--bg-elevated));
    color: color-mix(in srgb, #3b62d6 72%, var(--text));
    font-size: 0.75rem;
    font-weight: 600;
}

/* ── 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;
    }

    /* Le jour et la plage passent en pile : le marqueur repart de la marge gauche. */
    .summary-course-meta__partial {
        margin-left: 0;
        margin-top: 0.15rem;
    }

    .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;
}

/* En-tête de sous-bloc : libellé à gauche, action IA à droite. */
.settings-subcard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ai-seo-generate-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.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: 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;
}

/* Periode reellement couverte par l'annee saisie : « 2026-2027 · septembre 2026
   → août 2027 ». L'annee d'une ligne EST l'annee scolaire, et rien d'autre a
   l'ecran ne la distingue d'une annee civile. */
.federation-rules-editor__span {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--muted);
}

.federation-year-conversion {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    background: var(--bg-elevated);
}

.federation-year-conversion__row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border);
}

.federation-year-conversion__row small {
    color: var(--muted);
}

@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: #3a3a3a;
    background-image:
        linear-gradient(45deg, #2a2a2a 25%, transparent 25%),
        linear-gradient(-45deg, #2a2a2a 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #2a2a2a 75%),
        linear-gradient(-45deg, transparent 75%, #2a2a2a 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.asset-drop-preview.is-favicon {
    min-height: 64px;
}

.asset-drop-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.35rem 0.5rem;
    color: var(--muted);
    opacity: 0.7;
    pointer-events: none;
    text-align: center;
}

/* Une zone vide doit dire ce qu'on peut y faire : sans cette phrase, le damier
   ne se distinguait pas d'un simple aperçu vide (même consigne que la macro
   partagée `_image_drop.html`). */
.asset-drop-hint {
    font-size: 0.72rem;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.asset-drop-preview img {
    display: none;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background-color: #3a3a3a;
    background-image:
        linear-gradient(45deg, #2a2a2a 25%, transparent 25%),
        linear-gradient(-45deg, #2a2a2a 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #2a2a2a 75%),
        linear-gradient(-45deg, transparent 75%, #2a2a2a 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0;
}

#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;
}

/* ── Sélecteur de couleur (input[type=color]) ──────────────────────────────
   Socle global : neutralise le rendu natif (« trait » étiré dans .form-control)
   et arrondit la pastille, dans tous les navigateurs. La taille/cadre par défaut
   est posée via :where() (spécificité nulle) → n'importe quelle classe
   (.color-picker-input, .form-control, .logo-editor…) peut la surcharger sans
   lutte de spécificité. */
input[type="color"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 8px;
}

input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 8px;
}

:where(input[type="color"]) {
    width: 3rem;
    height: 2.6rem;
    padding: 0.2rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-elevated);
    cursor: pointer;
}

.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:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent, #2563eb) 60%, white 40%);
    outline-offset: 2px;
}

.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;
}

.color-picker-input::-moz-color-swatch {
    border: none;
    border-radius: 8px;
}

.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);
}

/* Communications automatisées : matrices de toggles très denses (Activer /
   désabonnement / Facebook / Instagram / SMS répétées par type de courriel).
   On resserre au maximum — uniquement les grilles qui contiennent un
   interrupteur (:has), donc les grilles de champs de saisie ne sont pas
   touchées, et le .form-grid global (32 pages) reste intact. */
.email-task-content .form-grid:has(.ui-toggle),
.email-task-content .form-grid--3:has(.ui-toggle) {
    gap: 0.1rem 0.9rem;
}

.email-task-content .ui-toggle--sm {
    min-height: 1.35rem;
}

/* Festivités → Configuration : listes empilées de sous-options de notification
   (espace client, « Quand notifier ? », notifications admin). Même resserrement
   que les communications automatisées — remplace le gap:.5rem inline. */
.fest-toggle-list {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.fest-toggle-list .ui-toggle--sm {
    min-height: 1.4rem;
}

/* Finances → Prorata : la sous-liste d'options (arrondi, exclusions, chronologie)
   sous l'interrupteur principal « Activer le prorata ». Resserre uniquement
   cette section (les autres grilles finances gardent leur aération). */
#prorata-finances .form-grid {
    gap: 0.25rem 0.9rem;
}

#prorata-finances .ui-toggle--sm {
    min-height: 1.4rem;
}

.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;
}

/* ── Éditeur de la fiche de groupe (horaires, tarifs) ──────
   Préfixe neutre : le même bloc sert les horaires ET les tarifs du groupe. */
.fiche-editor {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-top: 1.25rem;
}

.fiche-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);
}

.fiche-editor__title {
    font-weight: 700;
    font-size: 0.95rem;
}

.fiche-editor__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fiche-editor__empty {
    padding: 1rem 1.2rem;
    color: var(--muted);
    font-size: 0.875rem;
    font-style: italic;
}

.fiche-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);
}

.fiche-editor-row:hover {
    background-color: color-mix(in srgb, var(--accent-soft) 30%, transparent);
}

.fiche-editor-row__info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    flex-wrap: wrap;
    min-width: 0;
}

.fiche-editor-row__day {
    font-weight: 700;
    font-size: 0.875rem;
    min-width: 5.5rem;
}

.fiche-editor-row__time {
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    font-size: 0.875rem;
}

.fiche-editor-row__chip {
    font-size: 0.78rem;
    background: var(--accent-soft);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--line);
}

.fiche-editor-row__chip--note {
    font-style: italic;
}

.fiche-editor-row__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    flex-shrink: 0;
}

.fiche-editor-row__actions form {
    display: inline-flex;
    margin: 0;
}

.fiche-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);
}

/* Éditeur horizontal compact : la pastille d'erreur des champs heure se pose
   DANS le champ, au bout à droite. Superposition par grille (libellé en ligne 1,
   champ et pastille dans la même cellule en ligne 2) plutôt qu'en position
   absolue : la pastille se centre sur le champ sans calcul de hauteur, et sa
   présence ne décale rien (les colonnes Jour/Début/Fin/Lieu/Note gardent leur
   ligne de base, erreur affichée ou non). */
.fiche-editor__add [data-time-field-wrapper='true'] {
    display: grid;
    grid-template-rows: auto auto;
}

.fiche-editor__add [data-time-field-wrapper='true'] > [data-time-field='true'],
.fiche-editor__add [data-time-field-wrapper='true'] > [data-time-field-error] {
    grid-row: 2;
    grid-column: 1;
}

/* Place réservée en permanence : la pastille apparaît sans faire sauter la saisie. */
.fiche-editor__add [data-time-field='true'] {
    padding-right: 1.85rem;
}

/* On ne garde que la pastille comme marqueur discret (le champ est déjà surligné
   en rouge et le format figure dans le placeholder). Le libellé complet passe en
   infobulle `title` (posée par time_fields.js) et reste lu par les lecteurs
   d'écran. `pointer-events: none` : le clic traverse jusqu'au champ. */
.fiche-editor__add [data-time-field-error] {
    justify-self: end;
    align-self: center;
    gap: 0;
    margin: 0 0.6rem 0 0;
    font-size: 0;
    line-height: 0;
    pointer-events: none;
}

.fiche-editor__add [data-time-field-error]::before {
    width: 0.9rem;
    height: 0.9rem;
    margin-top: 0;
}

.fiche-editor__add-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fiche-editor__add-field--location {
    flex: 1;
    min-width: 8rem;
}

.fiche-editor__add-field--note {
    flex: 1.2;
    min-width: 12rem;
}

/* Options rarement touchées d'un tarif : repliées par défaut, sur leur propre
   ligne, pour que l'ajout courant reste « libellé, mode, montant, Ajouter ». */
.fiche-editor__add-advanced {
    flex-basis: 100%;
    font-size: 0.8rem;
}

.fiche-editor__add-advanced > summary {
    cursor: pointer;
    color: var(--muted);
    font-weight: 600;
}

.fiche-editor__add-advanced-fields {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.fiche-editor__add-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.fiche-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%;
}

/* ─── Sélecteur de date maison (popup thématisé) — voir static/js/date_picker.js.
   La classe .datepick__input n'est posée que sur écran « fin » (souris) ; sur
   mobile/tactile le champ reste natif. Look inspiré de .resa-cal (composant partagé catalog_calendar.css)
   mais aux couleurs du thème actif. */
input.datepick__input {
    padding-right: 2rem;
    background-image: var(--datepick-icon-svg);
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    background-position: right 0.65rem center;
    cursor: pointer;
}
input.datepick__input::-webkit-calendar-picker-indicator {
    display: none;
}

.datepick-pop {
    position: absolute;
    z-index: 1200;
    box-sizing: border-box;
    width: min(320px, calc(100vw - 16px));
    padding: 0.75rem;
    background: var(--bg-elevated-strong);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    color: var(--text);
    user-select: none;
    -webkit-user-select: none;
}
.datepick-pop[hidden] { display: none; }

.datepick-cal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.datepick-cal__title {
    border: none;
    background: none;
    font: inherit;
    font-weight: 700;
    text-transform: capitalize;
    color: inherit;
    cursor: pointer;
    padding: 0.2rem 0.45rem;
    border-radius: 8px;
}
.datepick-cal__title:hover {
    background: color-mix(in srgb, var(--accent-soft) 32%, transparent);
    color: var(--accent);
}
.datepick-cal__nav {
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--accent-soft) 22%, transparent);
    border-radius: 8px;
    width: 2rem;
    height: 2rem;
    font-size: 1.15rem;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}
.datepick-cal__nav:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.datepick-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.datepick-cal__dow {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    opacity: 0.55;
    padding: 0.25rem 0;
}
.datepick-cal__day {
    aspect-ratio: 1 / 1;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--accent-soft) 20%, transparent);
    border-radius: 10px;
    font: inherit;
    font-size: 0.85rem;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.datepick-cal__day--blank {
    background: transparent;
    cursor: default;
}
.datepick-cal__day--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: transparent;
}
.datepick-cal__day:not(.datepick-cal__day--disabled):not(.datepick-cal__day--blank):not(.datepick-cal__day--selected):hover {
    border-color: var(--accent);
}
.datepick-cal__day--today {
    box-shadow: inset 0 0 0 1px var(--accent);
}
.datepick-cal__day--selected {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 700;
}
.datepick-cal__foot {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.datepick-cal__link {
    border: none;
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.15rem 0.3rem;
    border-radius: 6px;
}
.datepick-cal__link:hover {
    text-decoration: underline;
}

/* Vue « choix de l'année » (clic sur le titre du calendrier) */
.datepick-cal__years {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 2px;
}
.datepick-cal__year {
    padding: 0.6rem 0.25rem;
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--accent-soft) 20%, transparent);
    border-radius: 10px;
    font: inherit;
    font-size: 0.9rem;
    color: inherit;
    cursor: pointer;
}
.datepick-cal__year--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: transparent;
}
.datepick-cal__year:not(.datepick-cal__year--disabled):not(.datepick-cal__year--current):hover {
    border-color: var(--accent);
}
.datepick-cal__year--current {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 700;
}

.fiche-editor__add-submit {
    padding-bottom: 0.05rem;
}

.fiche-editor__add-action {
    padding: 0.875rem 1.2rem;
}

.fiche-editor__list .fiche-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;
}

.fiche-editor__list .fiche-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;
}

/* Détail d'un rabais dans une bulle du récapitulatif d'inscription.
   Une ligne = un rabais appliqué : libellé à gauche, montant retiré à droite,
   règle en dessous. La version en phrase (« membre (saison) - Multi-cours 2+ -
   à partir du seuil 2+ - 65,00 $ par cours ») se repliait sur trois lignes
   sans que l'œil retrouve où commençait l'entrée suivante. */
.summary-help {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.summary-help__row {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.6rem;
    align-items: baseline;
}

.summary-help__label {
    font-weight: 650;
    overflow-wrap: anywhere;
}

.summary-help__amount {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text);
    font-weight: 650;
}

/* La règle passe sous les deux colonnes : à côté du montant, elle réduirait le
   libellé à un mot par ligne dans un panneau de 38 caractères. */
.summary-help__meta {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 500;
}

.summary-help__intro {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 500;
}

.summary-help__total {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--line);
}

.summary-help__total strong {
    font-variant-numeric: tabular-nums;
}

.summary-help__note {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 500;
}

@media (max-width: 960px) {
    /* Cible tactile de 44 px SANS pastille géante : à 2.75rem de diamètre visible,
       le « ? » pesait plus lourd que le libellé qu'il annote. Le disque reste
       discret et c'est un ::before transparent qui étend la zone de tap (le
       ::after sert déjà à l'infobulle CSS). */
    .field-help {
        width: 1.7rem;
        height: 1.7rem;
        font-size: 0.8rem;
    }

    .field-help::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2.75rem;
        height: 2.75rem;
        transform: translate(-50%, -50%);
        border-radius: inherit;
    }

    .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;
}

/* Éditeur riche (Quill) réutilisable — voir templates/admin/_rich_text_editor.html
   et static/js/rich_text_editor.js. Classes génériques (rich-editor*), pas liées
   à une entité en particulier (pages, cours…). */
.rich-editor {
    padding: 0.95rem;
    border: 1px solid color-mix(in srgb, var(--line) 78%, var(--accent) 22%);
    border-radius: 14px;
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--bg-elevated) 94%, transparent),
        color-mix(in srgb, var(--accent-soft) 34%, transparent)
    );
}

.rich-editor__controls {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: nowrap;
}

.rich-editor__toolbar {
    border: 1px solid color-mix(in srgb, var(--line) 84%, var(--accent) 16%) !important;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-card) 95%, var(--accent-soft) 5%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 30%, transparent);
    padding: 0.3rem !important;
    flex: 1 1 auto;
    min-width: 0;
}

.rich-editor__toolbar.ql-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.rich-editor__toolbar .ql-formats {
    margin: 0 !important;
    padding: 0.2rem;
    border: none;
    border-radius: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.rich-editor .ql-snow.ql-toolbar button,
.rich-editor .ql-snow .ql-toolbar button {
    color: var(--text) !important;
}

.rich-editor .ql-snow.ql-toolbar button {
    width: 2rem;
    height: 2rem;
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

/* Icônes Phosphor (posées par static/js/rich_text_editor.js à la place des SVG
   par défaut de Quill) : glyphes de police, colorés via `color` (pas de
   stroke/fill SVG à gérer). Même taille de bouton pour tous, y compris les
   titres H2/H3 — plus de largeur spéciale pour du texte « H2 »/« H3 ». */
.rich-editor .ql-snow.ql-toolbar button .ph {
    font-size: 1.05rem;
    line-height: 1;
    color: color-mix(in srgb, var(--text) 76%, transparent);
}

.rich-editor .ql-snow.ql-toolbar button:hover,
.rich-editor .ql-snow.ql-toolbar button:focus-visible,
.rich-editor .ql-snow.ql-toolbar .ql-picker-label:hover,
.rich-editor .ql-snow.ql-toolbar .ql-picker-label:focus-visible {
    background: color-mix(in srgb, var(--accent-soft) 35%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.rich-editor .ql-snow.ql-toolbar button.ql-active {
    background: color-mix(in srgb, var(--accent) 24%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.rich-editor .ql-snow.ql-toolbar button.ql-active .ph,
.rich-editor .ql-snow.ql-toolbar button:hover .ph {
    color: var(--accent-strong);
}

.rich-editor .ql-snow.ql-toolbar button:focus-visible,
.rich-editor .rich-editor__tool-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 62%, transparent);
    outline-offset: 1px;
}

.rich-editor [data-rich-source-toggle] {
    margin-left: auto;
    border-color: color-mix(in srgb, var(--line) 76%, var(--accent) 24%);
    flex: 0 0 auto;
}

.rich-editor .rich-editor__tool-btn {
    min-height: 2rem;
    height: 2rem;
    padding: 0 0.72rem;
    border-radius: 8px;
    font-weight: 650;
    letter-spacing: 0.01em;
    background: transparent;
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--line) 74%, var(--accent) 26%);
}

.rich-editor .rich-editor__tool-btn:hover,
.rich-editor .rich-editor__tool-btn:focus-visible {
    background: color-mix(in srgb, var(--accent-soft) 35%, transparent);
    border-color: color-mix(in srgb, var(--accent) 36%, transparent);
}

.rich-editor__shell {
    margin-top: 0.6rem;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line) 86%, var(--accent) 14%);
    border-radius: 12px;
    background: var(--bg-card);
}

.rich-editor .ql-container.ql-snow {
    border: 0 !important;
    font-family: inherit;
    font-size: 1rem;
    color: var(--text);
}

.rich-editor .ql-editor {
    line-height: 1.65;
    min-height: 280px;
    padding: 0.95rem 1rem;
}

.rich-editor .ql-editor.ql-blank::before {
    color: color-mix(in srgb, var(--text-muted) 80%, transparent);
    font-style: normal;
}

.rich-editor .ql-editor a {
    color: var(--accent-strong);
    text-underline-offset: 2px;
}

@media (max-width: 640px) {
    .rich-editor {
        padding: 0.72rem;
    }

    .rich-editor__controls {
        flex-wrap: wrap;
    }

    .rich-editor__toolbar {
        width: 100%;
        flex-basis: 100%;
    }

    .rich-editor__toolbar.ql-toolbar {
        gap: 0.25rem;
    }

    .rich-editor__toolbar .ql-formats {
        padding: 0.15rem;
        gap: 0.1rem;
    }

    .rich-editor .ql-snow.ql-toolbar button {
        width: 1.85rem;
        height: 1.85rem;
    }

    .rich-editor .ql-snow.ql-toolbar .ql-picker-label {
        min-height: 1.85rem;
        padding: 0.15rem 0.45rem;
    }

    .rich-editor [data-rich-source-toggle] {
        width: 100%;
        margin-left: 0;
        min-height: 1.9rem;
        height: 1.9rem;
    }

    .rich-editor .ql-editor {
        min-height: 220px;
        padding: 0.8rem 0.75rem;
    }
}

.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;
}

/* Habillage maison des cases à cocher.
   `.bare-control` = porte de sortie GÉNÉRIQUE : « cet input est masqué, c'est un
   composant qui dessine son état » (pastille, carte, interrupteur). Les quatre
   exclusions nommées qui la précèdent disent déjà exactement ça, une par
   composant — cette classe évite d'allonger 27 sélecteurs à chaque nouveau.
   ⚠️ Ces sélecteurs pèsent lourd en spécificité (jusqu'à 6 classes) : un
   composant qui masque son input avec une simple règle `.mon-toggle input`
   (spécificité 1) NE GAGNE PAS — l'état `:disabled` global remet notamment
   `opacity: .58` et la case native réapparaît le temps d'une requête AJAX.
   Mettre `class="bare-control"` sur l'input, ne pas surenchérir en spécificité. */
.checkbox-row input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.bare-control),
.checkbox-inline input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.bare-control),
input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.bare-control):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):not(.bare-control)::before,
.checkbox-inline input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.bare-control)::before,
input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.bare-control):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):not(.bare-control):hover,
.checkbox-inline input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.bare-control):hover,
input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.bare-control):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):not(.bare-control):checked,
.checkbox-inline input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.bare-control):checked,
input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.bare-control):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):not(.bare-control):checked::before,
.checkbox-inline input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.bare-control):checked::before,
input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.bare-control):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):not(.bare-control):focus-visible,
.checkbox-inline input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.bare-control):focus-visible,
input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.bare-control):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):not(.bare-control):disabled,
.checkbox-inline input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.bare-control):disabled,
input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.bare-control):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):not(.payment-card__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):not(.payment-card__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):not(.payment-card__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):not(.payment-card__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):not(.payment-card__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):not(.payment-card__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):not(.payment-card__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):not(.payment-card__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):not(.payment-card__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):not(.payment-card__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):not(.bare-control),
    .checkbox-inline input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.bare-control),
    input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.bare-control):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):not(.payment-card__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):not(.bare-control)::before,
    .checkbox-inline input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.bare-control)::before,
    input[type="checkbox"]:not(.selection-card__control):not(.role-chip__input):not(.sys-toggle__input):not(.ui-toggle__input):not(.bare-control):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):not(.payment-card__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):not(.payment-card__input)::before,
    .selection-card__control[type="radio"]::before {
        width: 0.64rem;
        height: 0.64rem;
    }
}

.form-error {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.4rem 0 0;
    color: var(--field-error);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
}

.form-error::before {
    content: "";
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin-top: 0.08rem;
    background-color: currentColor;
    -webkit-mask: var(--icon-form-error) center / contain no-repeat;
    mask: var(--icon-form-error) center / contain no-repeat;
}

/* ⚠️ Le `display: flex` ci-dessus battait `[hidden]` (feuille de l'agent
   utilisateur), donc un message d'erreur vide posé en gabarit montrait sa
   pastille rouge en permanence. C'est l'invariant `[hidden]` en fin de feuille
   qui tranche désormais — ne pas le contourner ici. */

.form-success {
    margin: 0.4rem 0 0;
    color: #2d6a4f;
    font-size: 0.92rem;
}

.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);
}

/* 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%);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGE PUBLIQUE « LE DOJO » — refonte visuelle
   Hero dégradé animé, cartes à icônes, révélations au défilement, compteur.
   .feature-card / .muted-text / .two-columns ne servent que sur cette page
   (vérifié) → on les stylise via le préfixe .le-dojo-page pour gagner la
   spécificité face aux règles globales déclarées plus bas dans le fichier.
═══════════════════════════════════════════════════════════════════════ */

.le-dojo-page > .content-card.spaced-top {
    margin-top: 1.6rem;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.site-hero {
    /* L'en-tête du site est collant/translucide et flotte au-dessus du haut de
       page : on décale le hero pour qu'il démarre sous la barre de nav. */
    margin-top: clamp(3.5rem, 5vw, 5.5rem);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 34px;
    padding: clamp(2.4rem, 4vw, 4rem) clamp(1.5rem, 4vw, 3.4rem);
    /* Hero adaptatif : la surface se dérive des tokens du thème actif (clair sur
       les thèmes clairs, sombre sur les sombres) et se teinte de l'accent, si
       bien que chaque thème (sunset/aurora/vampire…) donne un hero cohérent avec
       le reste de la page. Le texte suit --text → toujours lisible. */
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    background:
        radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--brand-cyan) 32%, transparent), transparent 46%),
        radial-gradient(circle at 86% 6%, color-mix(in srgb, var(--brand-orange) 28%, transparent), transparent 44%),
        radial-gradient(circle at 78% 104%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 58%),
        linear-gradient(155deg,
            color-mix(in srgb, var(--accent) 24%, var(--bg-elevated-strong)) 0%,
            color-mix(in srgb, var(--accent) 12%, var(--bg-elevated-strong)) 52%,
            color-mix(in srgb, var(--accent-strong) 22%, var(--bg-elevated-strong)) 100%);
    box-shadow: 0 40px 84px -34px color-mix(in srgb, var(--accent) 32%, rgba(4, 12, 32, 0.45));
}

.site-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 720px;
}

.site-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1.1rem;
    padding: 0.42rem 0.9rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent-strong) 55%, var(--text));
    background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
    backdrop-filter: blur(6px);
    /* Animation d'entrée du hero (au chargement, au-dessus de la ligne de flottaison). */
    animation: site-hero-rise 640ms ease both 100ms;
}

.site-hero__eyebrow i {
    font-size: 0.95rem;
    color: color-mix(in srgb, var(--brand-orange) 78%, var(--text) 22%);
}

.site-hero__title {
    margin: 0 0 0.9rem;
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 700;
    text-wrap: balance;
    color: var(--text);
    animation: site-hero-focus 820ms cubic-bezier(0.2, 0.6, 0.35, 1) both 180ms;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .site-hero__title {
        /* Dégradé du titre dérivé du thème : texte→accent (foncé→bleu sur clair,
           blanc→bleu clair sur sombre) — lisible sur tous les thèmes. */
        background: linear-gradient(120deg,
            var(--text) 6%,
            color-mix(in srgb, var(--accent-strong) 62%, var(--text)) 55%,
            var(--accent-strong) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.site-hero__lead {
    margin: 0 0 1.6rem;
    max-width: 56ch;
    font-size: clamp(1.02rem, 1.6vw, 1.22rem);
    line-height: 1.6;
    color: var(--text-soft);
    animation: site-hero-rise 720ms ease both 300ms;
}

.site-hero__meta {
    margin: -0.8rem 0 1.4rem;
    font-size: 0.92rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    color: color-mix(in srgb, var(--text) 68%, var(--accent-strong) 32%);
    animation: site-hero-rise 720ms ease both 340ms;
}

.site-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    animation: site-hero-rise 720ms ease both 400ms;
}

.le-dojo-page .button,
.site-hero .button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Bouton secondaire du hero : panneau « glass » theme-aware, dérivé d'une surface
   plus opaque que le hero pour rester détaché sur tous les thèmes. */
.site-hero .button.secondary {
    background: color-mix(in srgb, var(--bg-elevated-strong) 82%, var(--accent-soft) 18%);
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    color: var(--text);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent);
    backdrop-filter: blur(6px);
}

.site-hero .button.secondary:hover {
    background: color-mix(in srgb, var(--bg-elevated-strong) 70%, var(--accent-soft) 30%);
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
}

/* Halos flottants + texture pointillée du hero (décoratifs). */
.site-hero__orb {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    filter: blur(52px);
    opacity: 0.55;
    pointer-events: none;
}

.site-hero__orb--one {
    width: 320px;
    height: 320px;
    top: -120px;
    right: -60px;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand-cyan) 80%, transparent), transparent 70%);
    animation: site-hero-orb-a 12s ease-in-out infinite;
}

.site-hero__orb--two {
    width: 260px;
    height: 260px;
    bottom: -140px;
    left: -40px;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand-orange) 66%, transparent), transparent 70%);
    animation: site-hero-orb-b 15s ease-in-out infinite;
}

.site-hero__grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
    background-image: radial-gradient(color-mix(in srgb, var(--text) 8%, transparent) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent 72%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent 72%);
}

@keyframes site-hero-rise {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes site-hero-focus {
    from {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

@keyframes site-hero-orb-a {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-26px, 22px) scale(1.08);
    }
}

@keyframes site-hero-orb-b {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(24px, -20px) scale(1.1);
    }
}

/* ── Grilles de la page (scopées pour rester à 3 colonnes, y compris ≥1920px) ── */
.le-dojo-page .feature-grid.le-dojo-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
    margin-top: 1.2rem;
}

@media (max-width: 960px) {
    .le-dojo-page .feature-grid.le-dojo-features {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 600px) and (max-width: 960px) {
    .le-dojo-page .feature-grid.le-dojo-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Cartes à icône ────────────────────────────────────────────────────── */
.le-dojo-page .feature-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 1.5rem 1.4rem;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--line) 76%, var(--accent) 24%);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent-soft) 42%, transparent), transparent 42%),
        linear-gradient(165deg, color-mix(in srgb, var(--bg-elevated-strong) 96%, var(--accent-soft) 4%), var(--bg-elevated));
    box-shadow: 0 20px 42px -28px color-mix(in srgb, var(--accent) 42%, rgba(6, 14, 30, 0.5));
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

/* Pas de display imposé aux fiches instructeur : elles gardent leur grille photo/texte. */
.le-dojo-page .feature-card:not(.le-dojo-instructor-card) {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.le-dojo-page .feature-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--brand-cyan));
    opacity: 0.9;
    transform: scaleX(0.35);
    transform-origin: left;
    transition: transform var(--transition-medium);
}

.le-dojo-page .feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 54px -26px color-mix(in srgb, var(--accent) 52%, rgba(6, 14, 30, 0.55));
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
}

.le-dojo-page .feature-card:hover::before {
    transform: scaleX(1);
}

.feature-card__icon {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.35rem;
    border-radius: 16px;
    font-size: 1.5rem;
    color: var(--accent-strong);
    background: linear-gradient(150deg, color-mix(in srgb, var(--accent-soft) 82%, transparent), color-mix(in srgb, var(--accent) 22%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 30%, transparent);
    transition: transform var(--transition-medium);
}

.le-dojo-page .feature-card:hover .feature-card__icon {
    transform: translateY(-2px) rotate(-5deg) scale(1.06);
}

.feature-card--warm .feature-card__icon {
    color: color-mix(in srgb, var(--brand-orange) 82%, var(--text) 18%);
    background: linear-gradient(150deg, color-mix(in srgb, var(--brand-orange) 24%, transparent), color-mix(in srgb, var(--brand-red) 14%, transparent));
    border-color: color-mix(in srgb, var(--brand-orange) 34%, var(--line));
}

.feature-card--cool .feature-card__icon {
    color: color-mix(in srgb, var(--brand-cyan) 78%, var(--text) 22%);
    background: linear-gradient(150deg, color-mix(in srgb, var(--brand-cyan) 26%, transparent), color-mix(in srgb, var(--brand-blue) 18%, transparent));
    border-color: color-mix(in srgb, var(--brand-cyan) 34%, var(--line));
}

.le-dojo-page .feature-card h3 {
    margin: 0;
    font-size: 1.16rem;
    letter-spacing: -0.01em;
}

.le-dojo-page .feature-card > p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.6;
}

.le-dojo-feature-link {
    margin-top: auto;
    padding-top: 0.35rem;
}

.le-dojo-feature-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 650;
}

.le-dojo-feature-link i {
    transition: transform var(--transition-fast);
}

.le-dojo-feature-link a:hover i {
    transform: translateX(3px);
}

.le-dojo-mission-text {
    margin: 0.4rem 0 0;
    max-width: 72ch;
    color: var(--text-soft);
}

/* ── Coordonnées & carte ───────────────────────────────────────────────── */
.le-dojo-page .dashboard-grid.two-columns.le-dojo-contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
    margin-top: 1.2rem;
    align-items: stretch;
}

@media (max-width: 820px) {
    .le-dojo-page .dashboard-grid.two-columns.le-dojo-contact-grid {
        grid-template-columns: 1fr;
    }
}

/* Cartes contact/carte à hauteurs égales : on centre la liste et on laisse
   l'iframe remplir la hauteur pour éviter un grand vide sous les coordonnées. */
.le-dojo-contact-card {
    justify-content: center;
}

.le-dojo-map-card .u-iframe-rounded {
    flex: 1 1 auto;
    min-height: 280px;
}

.le-dojo-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.le-dojo-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}

.le-dojo-contact-list__icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border-radius: 14px;
    font-size: 1.25rem;
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
}

.le-dojo-contact-list__body {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.le-dojo-contact-list__label {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--muted);
}

.le-dojo-contact-list__value {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
}

.le-dojo-contact-list__value a {
    color: var(--accent-strong);
    font-weight: 600;
}

.le-dojo-map-empty {
    flex: 1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.6rem;
    min-height: 220px;
    padding: 1.4rem;
    text-align: center;
    color: var(--muted);
    border-radius: var(--radius-md);
    border: 1px dashed color-mix(in srgb, var(--accent) 26%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 20%, transparent);
}

.le-dojo-map-empty i {
    font-size: 2.4rem;
    color: color-mix(in srgb, var(--accent) 60%, var(--muted));
}

.le-dojo-map-empty p {
    margin: 0;
    max-width: 34ch;
}

/* ── Instructeurs ──────────────────────────────────────────────────────── */
.le-dojo-page .table-heading.le-dojo-instructors-head {
    align-items: center;
    flex-wrap: wrap;
}

.le-dojo-team-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--accent-soft) 70%, transparent), color-mix(in srgb, var(--accent) 18%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent);
}

.le-dojo-team-badge__num {
    font-family: var(--font-title);
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent-strong);
    font-variant-numeric: tabular-nums;
}

.le-dojo-team-badge__label {
    font-size: 0.8rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted);
}

.le-dojo-page .le-dojo-instructors-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.2rem;
}

.le-dojo-page .le-dojo-instructor-card {
    display: grid;
    align-items: start;
}

.le-dojo-page .le-dojo-instructor-card.has-avatar {
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 1.1rem;
}

.le-dojo-instructor-avatar {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 20px;
    font-size: 2.2rem;
    color: var(--accent-strong);
    background: linear-gradient(150deg, color-mix(in srgb, var(--accent-soft) 80%, transparent), color-mix(in srgb, var(--accent) 22%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
}

.le-dojo-instructor-title {
    margin: 0.15rem 0 0.45rem;
    font-weight: 700;
    color: var(--accent-strong);
}

.le-dojo-instructor-grade {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.6rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 650;
    color: color-mix(in srgb, var(--text) 82%, var(--accent-strong) 18%);
    background: color-mix(in srgb, var(--accent-soft) 46%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
}

.le-dojo-instructor-grade i {
    color: color-mix(in srgb, var(--brand-orange) 78%, var(--text) 22%);
}

.le-dojo-page .muted-text {
    color: var(--muted);
}

@media (max-width: 620px) {
    .le-dojo-page .le-dojo-instructor-card.has-avatar {
        grid-template-columns: 1fr;
        justify-items: start;
    }
}

/* ── Révélation au défilement (JS pose .is-visible) + cascade des cartes ── */
html.js .le-dojo-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

html.js .le-dojo-reveal.is-visible {
    opacity: 1;
    transform: none;
}

html.js .le-dojo-reveal .feature-grid > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

html.js .le-dojo-reveal.is-visible .feature-grid > * {
    opacity: 1;
    transform: none;
}

html.js .le-dojo-reveal.is-visible .feature-grid > *:nth-child(1) { transition-delay: 0.08s; }
html.js .le-dojo-reveal.is-visible .feature-grid > *:nth-child(2) { transition-delay: 0.16s; }
html.js .le-dojo-reveal.is-visible .feature-grid > *:nth-child(3) { transition-delay: 0.24s; }
html.js .le-dojo-reveal.is-visible .feature-grid > *:nth-child(4) { transition-delay: 0.32s; }
html.js .le-dojo-reveal.is-visible .feature-grid > *:nth-child(n+5) { transition-delay: 0.4s; }

/* ── Respect du niveau de mouvement réduit (spécificité > base, sans !important) ── */
body[data-motion-level="reduced"] .site-hero__eyebrow,
body[data-motion-level="reduced"] .site-hero__title,
body[data-motion-level="reduced"] .site-hero__lead,
body[data-motion-level="reduced"] .site-hero__actions,
body[data-motion-level="reduced"] .site-hero__orb {
    animation: none;
}

/* Embedded map iframe */
.u-iframe-rounded {
    border: 0;
    border-radius: 14px;
}

.import-source-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1.15rem 0 0.4rem;
    padding-bottom: 1.15rem;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.import-source-label {
    margin: 0;
    flex-shrink: 0;
}

/* ---- Import historique : mise en page de la carte d'import ---- */
.historique-import-form {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    margin-top: 1.2rem;
}

.hi-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 1.1rem 1.4rem;
    align-items: start;
}

.hi-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hi-field .form-input {
    width: 100%;
}

/* Zone de dépôt du fichier — carte invitante centrée */
.hi-dropzone.photo-drop-zone {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.35rem;
    min-height: 8.5rem;
    padding: 1.4rem 1.25rem;
    border: 1.5px dashed color-mix(in srgb, var(--line) 55%, var(--accent) 45%);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-soft) 22%, transparent);
}

.hi-dropzone.photo-drop-zone:hover,
.hi-dropzone.photo-drop-zone:focus-visible {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 40%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
    outline: none;
}

.hi-dropzone__icon {
    font-size: 1.9rem;
    line-height: 1;
    color: var(--accent);
    margin-bottom: 0.15rem;
}

.hi-dropzone__title {
    display: block;
    font-weight: 700;
    color: var(--text);
}

.hi-dropzone__hint {
    display: block;
    font-size: 0.85rem;
    color: var(--muted);
}

.hi-file-status {
    margin: 0.5rem 0 0;
    font-size: 0.82rem;
    color: var(--muted);
}

/* Bloc « Options d'import » */
.hi-options {
    margin: 0;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-elevated-strong) 55%, transparent);
}

.hi-options__legend {
    padding: 0 0.5rem;
    margin-left: -0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

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

.historique-import-form .historique-actions {
    justify-content: flex-end;
    margin-top: 0;
}

@media (max-width: 760px) {
    .hi-top,
    .hi-options__grid {
        grid-template-columns: 1fr;
    }

    .historique-import-form .historique-actions {
        justify-content: stretch;
    }
}

.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%;
    }
}

.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);
}

/* Ajout d'un membre de famille : formulaire présenté en modale */
.family-member-create-dialog {
    width: min(720px, calc(100vw - 1.5rem));
    max-width: 720px;
}

.family-member-create-dialog .inner-form-card {
    margin-bottom: 0;
}

/* Un panneau par étape de l'ajout : reprend la grille de `.form-card` pour que
   l'espacement reste le même que si les champs étaient d'un seul tenant. */
.family-member-step {
    display: grid;
    gap: 1rem;
}

.family-member-step[hidden] {
    display: none;
}

.family-member-empty {
    display: grid;
    justify-items: start;
    gap: 0.75rem;
}

.family-member-empty p {
    margin: 0;
}

/* Passes de nouveautés repliables du portail documentaire */
.doc-news summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
}

.doc-news summary::-webkit-details-marker {
    display: none;
}

.doc-news summary::before {
    content: "▸";
    font-size: 0.9rem;
    color: var(--accent-strong);
    transform-origin: center;
    transition: transform var(--transition-fast);
}

.doc-news[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;
}

/* Fermeture d'angle. `flex-shrink: 0` : sans lui, un nom de fichier long
   écrase la pastille jusqu'à la rendre incliquable. */
.logo-editor-close {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.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));
}

.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;
}

/* Utilisée par huit gabarits… mais jamais définie : les blocs marqués
   « petit espacement » se touchaient (fiche produit de la boutique, entre le
   dépliant de date et le champ de durée, par exemple). */
.spaced-top-xs {
    margin-top: 0.5rem;
}

/* Uniformisation (référence groupes admin): espacements de sections et d'actions,
   appliquée aussi aux pages membres (boutique, profil, etc.) pour un cadrage cohérent. */
.container.section > .content-card:first-of-type:not(.spaced-top):not(.spaced-top-sm),
.container.section > .content-card + .content-card:not(.spaced-top):not(.spaced-top-sm) {
    margin-top: 1rem;
}

.section-heading.split-heading > .inline-actions,
.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;
}

/* Teintes saisonnières (gestion des groupes + items d'inscription d'un lot).
   Hiver = bleu, Automne = ocre, Printemps = vert, Été = orange.
   La couleur est fondue dans le fond de surface pour rester lisible dans tous
   les thèmes ; un liseré à gauche renforce la distinction ocre/orange. */
.season-row[data-season="hiver"] { --season-tint: #3b82f6; }
.season-row[data-season="automne"] { --season-tint: #b0791f; }
.season-row[data-season="printemps"] { --season-tint: #16a34a; }
.season-row[data-season="ete"] { --season-tint: #f97316; }

/* Lignes de la liste des groupes (tableau) */
.is-admin tbody tr.season-row[data-season] {
    background: color-mix(in srgb, var(--season-tint) 12%, var(--bg-elevated));
}

.is-admin tbody tr.season-row[data-season] > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--season-tint);
}

.is-admin .table-wrap table tbody tr.season-row[data-season]:hover {
    background: color-mix(in srgb, var(--season-tint) 22%, var(--bg-elevated));
}

/* Items d'inscription à l'intérieur d'un lot (liste des inscriptions) */
.action-item.season-row[data-season] {
    background: color-mix(in srgb, var(--season-tint) 14%, var(--bg-elevated));
    box-shadow: inset 3px 0 0 0 var(--season-tint);
}

.action-item.season-row[data-season]:hover,
.action-item.season-row[data-season]:focus-within {
    background: color-mix(in srgb, var(--season-tint) 24%, var(--bg-elevated));
}

.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;
}

/* ── Grade history timeline ─────────────────────────────── */

.member-grade-history-filters {
    display: grid;
    gap: 1rem;
}

.grade-history-header-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.15rem;
    color: var(--text-light);
    font-size: 0.95rem;
}

.grade-history-current-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem 0.2rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, #1f7a45 16%, var(--accent-soft));
    border: 1.2px solid color-mix(in srgb, #1f7a45 35%, var(--line));
    color: color-mix(in srgb, #1f7a45 95%, var(--text));
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.grade-history-header-sep {
    opacity: 0.4;
}

.grade-history-header-resp {
    color: var(--muted);
    font-size: 0.9rem;
}

.grade-history-list {
    display: flex;
    flex-direction: column;
    padding-top: 0.35rem;
}

.grade-history-entry {
    display: grid;
    grid-template-columns: 1.75rem 1fr auto;
    gap: 0 0.85rem;
    align-items: stretch;
}

.grade-history-entry__timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.85rem;
}

.grade-history-entry__dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 2.5px solid color-mix(in srgb, var(--accent) 25%, var(--line));
    flex-shrink: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.grade-history-entry:not(:last-child) .grade-history-entry__timeline::after {
    content: '';
    flex: 1;
    width: 2px;
    background: var(--line);
    margin-top: 4px;
}

.grade-history-entry--current .grade-history-entry__dot {
    background: color-mix(in srgb, #1f7a45 22%, var(--bg-elevated));
    border-color: color-mix(in srgb, #1f7a45 70%, var(--line));
    box-shadow: 0 0 0 4px color-mix(in srgb, #1f7a45 10%, transparent);
}

.grade-history-entry__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0 0.85rem;
    border-bottom: 1px solid var(--line);
}

.grade-history-entry:last-child .grade-history-entry__body {
    border-bottom: none;
}

.grade-history-entry__head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.grade-history-entry__number {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}

.grade-history-entry--current .grade-history-entry__number {
    color: color-mix(in srgb, #1f7a45 90%, var(--text));
}

.grade-history-entry__type {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-light);
    padding-top: 0.1rem;
}

.grade-history-entry__style {
    font-size: 0.78rem;
    color: var(--muted);
    padding-top: 0.1rem;
}

.grade-history-entry__current-badge {
    padding: 0.18rem 0.55rem;
    font-size: 0.71rem;
}

.grade-history-entry__date {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.grade-history-entry__actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding-top: 0.6rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.grade-history-entry:last-child .grade-history-entry__actions {
    border-bottom: none;
}

.grade-history-entry:hover .grade-history-entry__actions,
.grade-history-entry:focus-within .grade-history-entry__actions {
    opacity: 1;
}

.grade-history-entry__actions form {
    margin: 0;
}

.grade-history-empty {
    padding: 1.75rem 0.5rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.92rem;
}

.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;
}

/* Colonne de sélection des actions en lot : réduite au contenu, case centrée. */
.is-admin .admin-pricing-select-col,
.is-admin .admin-pricing-select-cell {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

.is-admin .admin-pricing-select-col .bulk-select-all,
.is-admin .admin-pricing-select-cell .bulk-select-checkbox {
    width: 1.05rem;
    height: 1.05rem;
    cursor: pointer;
    vertical-align: middle;
}

.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;
}

/* (obsolète — était pour l'ancienne table, remplacée par la timeline) */

.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);
}

/* Deux couleurs de bulle, une par PORTÉE du message : au nom de
   l'administration (bleu) ou à titre personnel (orange). Deux nuances de bleu
   ne se distinguaient pas — or c'est la portée qui doit sauter aux yeux, elle
   ne se lit nulle part ailleurs dans le fil.
   ⚠️ La couleur ne porte jamais le sens seule : le filet de gauche double la
   teinte, chaque message porte son icône de sens (envoyé/reçu) avec son mot
   pour les lecteurs d'écran, et le fil affiche son badge de portée. */
.message-bubble--admin {
    background: color-mix(in srgb, var(--brand-blue) 12%, var(--bg-elevated));
    border-left: 3px solid color-mix(in srgb, var(--brand-blue) 55%, var(--line));
}

.message-bubble--perso {
    background: color-mix(in srgb, var(--brand-orange) 12%, var(--bg-elevated));
    border-left: 3px solid color-mix(in srgb, var(--brand-orange) 55%, var(--line));
}

.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__from {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

/* ── Portée dans la LISTE des conversations ──────────────────────────────────
   Même code couleur que les bulles du fil (bleu = administration, orange =
   personnel) : la liste et le fil doivent raconter la même chose, sinon le
   badge se relit comme une autre information. Le filet à gauche de la ligne
   rend la portée lisible en balayant la colonne, sans lire les badges. */
.badge--portee-admin {
    background: color-mix(in srgb, var(--brand-blue) 18%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--brand-blue) 45%, var(--line));
}

.badge--portee-perso {
    background: color-mix(in srgb, var(--brand-orange) 18%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--brand-orange) 45%, var(--line));
}

tr[data-thread-row] > td:first-child {
    box-shadow: inset 3px 0 0 var(--thread-scope-accent, transparent);
}

tr[data-thread-row].is-portee-admin {
    --thread-scope-accent: color-mix(in srgb, var(--brand-blue) 55%, var(--line));
}

tr[data-thread-row].is-portee-perso {
    --thread-scope-accent: color-mix(in srgb, var(--brand-orange) 55%, var(--line));
}

/* Sens du DERNIER message de la conversation, même métaphore que dans le fil :
   avion = le dernier mot est de notre côté, bac = on attend une réponse de
   nous. Icône en `--muted` : la couleur reste réservée à la portée.
   L'icône a sa propre gouttière à gauche du sujet — dans le flux du texte, un
   sujet sur deux lignes se repliait dessous et la colonne perdait son bord. */
.thread-row-subject {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
}

.thread-row-subject__body {
    min-width: 0;
}

.thread-row-direction {
    font-size: 1.6em;
    line-height: 1.05;
    color: var(--muted);
    flex: 0 0 auto;
    margin-left: -0.45rem;
}

/* Sens du message : envoyé (avion) ou reçu (bac). La FORME porte le sens à elle
   seule — la couleur est déjà prise par la portée, et deux axes de couleur dans
   la même bulle ne se lisent plus. */
.message-bubble__direction {
    font-size: 1.05em;
    line-height: 1;
    color: var(--muted);
    flex: 0 0 auto;
}

.message-bubble p {
    margin: 0;
}

/* Corps de message en texte riche (mise en forme comme les descriptions de
   cours) : espacement des paragraphes, listes et titres rendus depuis
   post.body_html (sanitizé au serveur, cf. app/rich_text.py). */
.message-bubble__body.rich-content > * {
    margin: 0 0 0.6rem;
}

.message-bubble__body.rich-content > *:last-child {
    margin-bottom: 0;
}

.message-bubble__body.rich-content ul,
.message-bubble__body.rich-content ol {
    padding-left: 1.35rem;
}

.message-bubble__body.rich-content li {
    margin: 0.15rem 0;
}

.message-bubble__body.rich-content h2,
.message-bubble__body.rich-content h3,
.message-bubble__body.rich-content h4 {
    font-size: 1.02rem;
    line-height: 1.3;
    margin: 0.2rem 0 0.4rem;
}

.message-bubble__body.rich-content blockquote {
    margin: 0.4rem 0;
    padding-left: 0.85rem;
    border-left: 3px solid color-mix(in srgb, var(--brand-blue) 40%, var(--line));
    color: var(--muted);
}

.message-bubble__body.rich-content a {
    color: var(--brand-blue);
    text-decoration: underline;
}

.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    animation: empty-state-pop 420ms cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}

@keyframes empty-state-pop {
    from {
        opacity: 0;
        transform: scale(0.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.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;
}

/* Marqueur « saison en cours » sur la puce de raccourci. Il valait un « ● »
   collé au libellé, que rien n'expliquait : c'est maintenant une pastille
   dédiée, doublée d'un `title` et d'un texte pour les lecteurs d'écran. */
.federation-saison-current {
    display: inline-block;
    inline-size: 0.4rem;
    block-size: 0.4rem;
    margin-inline-start: 0.4rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
}

.status-filter-bar a.is-active .federation-saison-current {
    opacity: 1;
}

/* Période précise : une ligne « Du mois de … au mois de … » suivie de ses deux
   boutons. Les champs étaient en `flex: 1` dans une carte pleine largeur —
   deux sélecteurs de mois étirés sur ~900 px chacun pour afficher « septembre
   2025 ». Ils reprennent ici une largeur de champ, pas une largeur de page. */
.federation-period-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 1rem;
    margin: 0;
    padding-top: 0.7rem;
    border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}

.federation-period-form .filter-group__label {
    /* Centré optiquement sur la hauteur des champs : la rangée est alignée en
       bas, sans ce calage le nom du groupe tombait sous les libellés. */
    padding-bottom: 0.85rem;
}

/* `flex: 1 1 auto` et non la taille intrinsèque : en `0 1 auto`, la largeur du
   groupe se calculait sur le `flex-basis` des champs (12 rem) alors qu'ils
   s'étirent ensuite jusqu'à leur `max-inline-size` (15 rem) — les deux
   sélecteurs de mois ne tenaient donc pas sur la ligne et passaient l'un sous
   l'autre en plein écran. */
.federation-period-form__fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem;
    flex: 1 1 auto;
}

/* `.form-group` porte `margin-bottom: 1.1rem`, annulé sur le seul dernier
   enfant : dans une rangée alignée en bas, le premier champ se retrouvait
   donc remonté de 1,1 rem par rapport au second — les deux sélecteurs de mois
   étaient visiblement décalés. Sélecteur composé et non `!important` : la
   règle `.form-group` est déclarée bien plus bas dans la feuille, donc à
   spécificité égale c'est elle qui l'emporterait. */
.federation-period-form__fields .form-group {
    margin-bottom: 0;
}

.federation-period-form__field {
    max-inline-size: 15rem;
    flex: 1 1 12rem;
}

.federation-period-form__field .form-label {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.federation-period-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-inline-start: auto;
}

/* Barre compteur/impression : elle coiffe le tableau, donc pas de marge haute
   héritée de `--footer` ni de filet en double avec celui de la carte. Elle vit
   DANS `.table-wrap` (boîte bordée sans padding : ce sont les cellules qui en
   portent) — sans retrait propre, « 34 membres · … » collait au bord gauche du
   cadre. Padding calé sur celui des cellules (0.75rem à l'horizontale). */
.federation-members-toolbar {
    margin-top: 0;
    margin-bottom: 0.6rem;
    padding: 0.9rem 0.75rem 0;
}

.federation-members-toolbar .list-toolbar__bar {
    padding-top: 0;
    border-top: 0;
}

.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 1.5rem;
    text-align: center;
}

.federation-members-empty-icon {
    font-size: 2.2rem;
    color: color-mix(in srgb, var(--accent) 55%, var(--muted));
}

/* Sélecteurs composés : `.empty-state p` (déclaré juste au-dessus) porte
   `margin: 0 0 2rem` et l'emporterait sur une simple classe — l'indication
   perdait ses marges automatiques et restait collée à gauche. */
.empty-state .federation-members-empty-text {
    color: var(--text);
    font-weight: 600;
    margin: 0.6rem 0 0;
}

/* Une liste vide n'est pas forcément une erreur : dire à quelle condition un
   membre y entre évite de croire à une panne quand le cours n'est simplement
   pas soumis à la cotisation. */
.empty-state .federation-members-empty-hint {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0.35rem auto 0;
    max-inline-size: 46ch;
}

#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.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;
}

/* Encadré unique « Choisir un dossier d'inscription » : sous-sections espacées proprement */
.registrations-page .registrations-dossier-card .registrations-subsection > * + * {
    margin-top: 0.6rem;
}

.registrations-page .registrations-dossier-card .registrations-subsection > .form-grid,
.registrations-page .registrations-dossier-card .registrations-subsection > .period-navigation,
.registrations-page .registrations-dossier-card .registrations-subsection > .registrations-list,
.registrations-page .registrations-dossier-card .registrations-subsection > .registration-state-timeline {
    margin-top: 0.85rem;
}

.registrations-page .registrations-dossier-card .registration-payment-subsection .section-heading {
    margin-bottom: 0;
}

.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;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    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;
}

/* Variante compacte : les détails de redirection sont en infobulle, la carte tient en une tuile */
.registration-payment-page .payment-method-card--compact {
    padding: 0.85rem 0.9rem;
    gap: 0.5rem;
    align-content: start;
}

.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--compact .payment-method-card__head h3 {
    margin: 0;
    font-size: 1.05rem;
}

.registration-payment-page .payment-method-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
}

.registration-payment-page .payment-method-card__instructions {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.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;
}

/* Badge du panier : porté aussi bien par le bouton du hero que par le panier
   flottant (posé hors de `.catalog-page` dans le gabarit) → règle non scopée,
   c'est le même badge produit par le même script. */
.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);
}

/* ── Boutique : panier flottant qui suit le défilement ─────────────────────
   La boutique se parcourt en défilant : le bouton du hero quitte l'écran au
   bout de quelques articles. Ce jumeau fixe prend le relais dès que l'original
   sort de la fenêtre (IntersectionObserver, cf. templates/catalogue.html).
   Il reste un `.button.primary` : dégradé, survol et thèmes sont ceux de tous
   les boutons du site, on ne redéfinit que la forme et l'ancrage.
   Sélecteur `.button.catalog-cart-fab` (et non la classe seule) : `.button.primary`
   pose déjà une ombre à la même spécificité, il faut la même pour la remplacer
   par celle, plus portée, d'un élément qui flotte au-dessus du contenu.
   ⚠️ Ancré EN HAUT à droite, et surtout pas dans le coin inférieur droit : ce
   coin est déjà pris par le bouton « Retour en haut » (`.admin-scroll-top`,
   z-index 65, qui recouvrait le panier) et par l'orbe de l'assistant (jusqu'à
   196px de large selon la largeur d'écran) ; le coin inférieur gauche l'est par
   la pastille de recherche.
   `--cart-fab-top` est posé par le gabarit, qui MESURE le bas de l'en-tête
   collant : sa hauteur n'est pas une constante (il se compacte au défilement,
   descend sous le bandeau dev, passe sur deux lignes en mobile). La valeur de
   repli couvre le cas où le script ne tourne pas. */
.button.catalog-cart-fab {
    position: fixed;
    right: max(1.15rem, env(safe-area-inset-right, 0px));
    top: var(--cart-fab-top, 6.5rem);
    z-index: 60;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    /* `.button` clippe son contenu : sans ça le badge, posé à cheval sur le
       bord du disque, serait rogné. */
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    /* Entrée par glissement depuis le bord droit. `translate` (et non
       `transform`) : il se compose avec le `transform: translateY(-2px)` de
       survol de `.button`, qui reste donc vivant. */
    translate: 0.9rem 0;
    box-shadow: 0 18px 38px color-mix(in srgb, var(--accent) 34%, transparent);
    transition: opacity 0.24s ease, translate 0.24s ease,
                transform var(--transition-fast), box-shadow var(--transition-fast),
                background var(--transition-fast), filter var(--transition-fast);
}

.catalog-cart-fab.is-visible {
    opacity: 1;
    visibility: visible;
    translate: none;
}

.catalog-cart-fab i {
    font-size: 1.5rem;
    line-height: 1;
}

.catalog-cart-fab .catalog-order-button__badge {
    top: -0.15rem;
    right: -0.15rem;
}

/* ── Panier : stepper de quantité ── */
.cart-qty-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.cart-qty-stepper__value {
    min-width: 1.6rem;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Badge compteur générique sur bouton (ex.: commandes à payer) ── */
.button.has-count-badge {
    position: relative;
    overflow: visible;
}

.button-count-badge {
    position: absolute;
    top: -0.45rem;
    right: -0.45rem;
    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%;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.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.5rem;
}

.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-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.6rem;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    text-align: center;
    padding: 1.25rem;
}

.catalog-page .catalog-item-media__placeholder i {
    font-size: 3.25rem;
    opacity: 0.5;
}

.catalog-page .catalog-item-purchase-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px;
    gap: 0.8rem;
    align-items: end;
}

/* Options de produit dans le catalogue membre.
   Le balisage vient du socle partagé `templates/_option_fields.html` (commun avec
   Festifun), avec le préfixe `shop-`. Les anciennes puces `.catalog-option-chip`
   ont été retirées : elles ne pouvaient porter ni champ de quantité ni état
   « épuisé », et leurs radios n'étaient pas exclusifs. */
.catalog-item-options {
    margin-top: 0.5rem;
}
.shop-option-group {
    border: none;
    padding: 0;
    margin: 0 0 0.5rem;
}
.shop-option-group > legend {
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--text, #333);
    padding: 0;
}
.shop-option-group__desc {
    margin: 0.1rem 0 0.35rem;
    font-size: 0.78rem;
}
.shop-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.82rem;
    cursor: pointer;
}
/* Le libellé occupe la place restante et **se replie** : sans `min-width: 0`, un
   nom long (« Écusson Yoseikan Budo +8.00 $ ch. ») refuse de rétrécir, pousse la
   ligne hors de la carte et vient se superposer à la colonne voisine. */
.shop-option > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}
.shop-option--soldout {
    opacity: 0.55;
    cursor: not-allowed;
}
.shop-option input[type="radio"],
.shop-option input[type="checkbox"] {
    accent-color: var(--accent, #2563eb);
    margin: 0;
    flex: 0 0 auto;
}
/* ⚠️ Sélecteur qualifié à dessein : le socle partagé pose `form-control` sur ce
   champ, et `.form-control` (utilitaires du module compétitions) est déclaré
   **plus bas** dans cette feuille avec `width: 100%`. À spécificité égale, la
   dernière règle gagnait : la petite boîte de quantité prenait toute la largeur
   de la carte. On monte la spécificité plutôt que de poser un `!important`. */
.shop-option .shop-option__qty {
    width: 4.5rem;
    flex: 0 0 auto;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    border-radius: 10px;
    font-size: 0.85rem;
    text-align: center;
}
.shop-option__price {
    font-weight: 700;
    white-space: nowrap;
}
.shop-option__soldout {
    color: var(--danger, #c0392b);
}
/* Groupe replié au-delà de 4 choix (miroir de .fest-option-collapse). */
.shop-option-collapse {
    border: 1px solid var(--line, rgba(0, 0, 0, .14));
    border-radius: 10px;
    overflow: hidden;
}
.shop-option-collapse > .shop-option-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.45rem 0.7rem;
    background: rgba(0, 0, 0, .04);
    font-weight: 600;
    font-size: 0.82rem;
}
.shop-option-collapse > .shop-option-summary::-webkit-details-marker { display: none; }
.shop-option-collapse > .shop-option-summary::after {
    content: "+";
    margin-left: auto;
    font-size: 1.2rem;
    line-height: 1;
    opacity: .7;
}
.shop-option-collapse[open] > .shop-option-summary::after { content: "–"; }
.shop-option-collapse__body { padding: 0.5rem 0.85rem 0.7rem; }
.shop-option-summary__count { font-weight: 400; }
.catalog-item-dates {
    margin-top: 0.5rem;
}

.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;
}

/* Confirmation discrète et « en place » de l'ajout au panier (remplace l'ancienne
   animation de l'article qui s'envolait vers le panier). */
.catalog-page .catalog-item-purchase-cta .button.is-added {
    gap: 0.4rem;
    background: var(--success);
    border-color: color-mix(in srgb, var(--success-strong) 32%, var(--line));
    color: color-mix(in srgb, var(--success-strong) 45%, var(--text) 55%);
    box-shadow: none;
    animation: catalog-added-pop 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.catalog-page .catalog-item-purchase-cta .button.is-added:hover {
    transform: none;
}

.catalog-page .catalog-item-purchase-cta .button.is-added i {
    font-size: 1.05em;
    line-height: 1;
    animation: catalog-added-check 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes catalog-added-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

@keyframes catalog-added-check {
    0% { transform: scale(0.6); opacity: 0; }
    60% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .catalog-page .catalog-item-purchase-cta .button.is-added,
    .catalog-page .catalog-item-purchase-cta .button.is-added i {
        animation: none;
    }
}

@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 {
    display: grid;
    gap: 0.85rem;
    background: color-mix(in srgb, var(--accent-soft) 22%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
}

.message-contact-card__header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.message-contact-card__header .eyebrow {
    margin: 0;
}

.message-contact-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.message-contact-details {
    display: grid;
    gap: 0.55rem;
    margin: 0;
}

.message-contact-row {
    display: grid;
    grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
    align-items: baseline;
    gap: 0.4rem 0.9rem;
}

.message-contact-row__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.message-contact-row__label i {
    font-size: 0.95rem;
    color: var(--accent);
}

.message-contact-row__value {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-weight: 500;
}

.message-contact-row__link {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.message-contact-row__link:hover {
    border-bottom-color: var(--accent);
}

.message-contact-row__empty {
    color: var(--muted);
}

.message-contact-recipients {
    display: grid;
    gap: 0.5rem;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
}

.message-contact-recipients-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.message-contact-recipients-title i {
    font-size: 0.95rem;
    color: var(--accent);
}

.message-contact-recipients-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.4rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    font-size: 0.72rem;
    letter-spacing: 0;
}

.message-recipient-list--compact {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.message-recipient-list--compact li + li {
    margin-top: 0;
}

.message-recipient-item {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem 0.4rem 0.4rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.message-recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.message-recipient-chip__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

.message-recipient-chip__label {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-weight: 500;
}

.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;
}


.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 {
    --handle-inset-y: 0.85rem;
    --handle-inset-x: 0.95rem;
    --handle-radius: 14px 0 0 14px;
    --handle-border: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: var(--handle-inset-y) var(--handle-inset-x);
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
}

/* ---- Liste compacte (grades membres) ----
   Même contenu, moins d'espace vertical : méta condensée sur une ligne
   à côté du libellé, paddings réduits. Scopé au modificateur pour ne pas
   toucher les autres listes triables (FAQ, séances, catégories…). */
.sortable-list--compact {
    gap: 0.4rem;
}

.sortable-list--compact .sortable-item {
    --handle-inset-y: 0.4rem;
    --handle-inset-x: 0.7rem;
    --handle-radius: 10px 0 0 10px;
    align-items: center;
    gap: 0.75rem;
    padding: var(--handle-inset-y) var(--handle-inset-x);
    border-radius: 10px;
}

.sortable-list--compact .sortable-item-main {
    align-items: center;
    flex: 1 1 auto;
}

.sortable-list--compact .sortable-item-main > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.55rem;
    min-width: 0;
}

.sortable-list--compact .sortable-item-main strong {
    font-size: 0.95rem;
}

.sortable-list--compact .grade-line__meta {
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
}

.sortable-list--compact .drag-handle {
    min-width: 2rem;
    min-height: 1.45rem;
}

.sortable-list--compact .drag-handle::before {
    box-shadow:
        -2.5px -5px 0 0 currentColor, 2.5px -5px 0 0 currentColor,
        -2.5px    0 0 0 currentColor, 2.5px    0 0 0 currentColor,
        -2.5px  5px 0 0 currentColor, 2.5px  5px 0 0 currentColor;
}

/* ---- Catégories Festivités : liste identique au tableau des articles ----
   Vraie <table class="data-table"> : hérite du style générique (en-tête sticky
   majuscule, zébrures, survol). Ajouts spécifiques : colonnes poignée/compteur,
   pastille de compte, et styles de glisser-déposer sur les lignes <tr>. */
.cat-table td {
    vertical-align: middle;
}

.cat-table th.cat-col-handle,
.cat-table td.cat-col-handle {
    width: 2.5rem;
    text-align: center;
}

.cat-table td.cat-col-handle {
    padding: 0;
    position: relative;
}

.cat-table th.cat-col-count,
.cat-table td.cat-col-count {
    width: 5rem;
    text-align: center;
}

.cat-table td .button.small + form {
    margin-left: 0.3rem;
}

.cat-count-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    padding: 0.12rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--accent-soft) 70%, transparent);
    color: var(--accent-strong);
    cursor: help;
}

.cat-count-chip.is-empty {
    background: color-mix(in srgb, var(--line) 40%, transparent);
    color: var(--muted);
    cursor: default;
}

/* Glisser-déposer sur les lignes <tr> (le composant utilise itemSelector .cat-row). */
.cat-row {
    cursor: default;
}

/* Poignée en tableau (pas de contexte flex : align-self/marge négative de
   .drag-handle n'ont aucun effet ici) : la cellule a perdu son padding et
   est positionnée (.table-wrap td.sortable-col-handle / .cat-table
   td.cat-col-handle, padding:0 + position:relative) ; la poignée est posée
   en position:absolute + inset:0 pour occuper exactement la cellule — un
   simple width/height:100% ne suit pas fidèlement la hauteur de ligne
   calculée par le tableau selon les navigateurs, inset:0 le garantit. Sans
   bordure propre (fond seul), carrée par défaut (lignes empilées bord à
   bord dans .table-wrap) sauf la dernière ligne, qui reprend l'arrondi
   bas-gauche du conteneur pour ne pas déborder de son coin arrondi
   (14px, .is-admin .table-wrap). */
.cat-row .drag-handle {
    position: absolute;
    inset: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    cursor: grab;
}

.cat-row:last-child .drag-handle {
    border-radius: 0 0 0 14px;
}

.cat-row.is-dragging {
    opacity: 0.85;
    background: color-mix(in srgb, var(--accent-soft) 40%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.cat-row.is-dragging .drag-handle {
    cursor: grabbing;
}

/* Ligne survolée comme cible de dépôt : prime sur les zébrures/survol du tableau. */
.is-admin .table-wrap table tbody tr.cat-row.drop-target {
    background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* Formulaire « Ajouter » détaché du tableau par un filet pointillé. */
.cat-add-row {
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px dashed var(--line);
}

/* ---- Glisser-déposer générique sur des lignes <tr> (composant partagé) ----
   Pendant du bloc .cat-row ci-dessus, mais réutilisable par toute liste admin
   convertie en tableau (au lieu de dupliquer un préfixe par écran). Le
   composant utilise itemSelector: '.sortable-row'. */
.sortable-row .drag-handle {
    position: absolute;
    inset: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    cursor: grab;
}

.sortable-row:last-child .drag-handle {
    border-radius: 0 0 0 14px;
}

.sortable-row.is-dragging {
    opacity: 0.85;
    background: color-mix(in srgb, var(--accent-soft) 40%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

.sortable-row.is-dragging .drag-handle {
    cursor: grabbing;
}

.is-admin .table-wrap table tbody tr.sortable-row.drop-target {
    background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}

.table-wrap th.sortable-col-handle,
.table-wrap td.sortable-col-handle {
    width: 2.5rem;
    text-align: center;
}

.table-wrap td.sortable-col-handle {
    padding: 0;
    position: relative;
}

.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;
}

/* Poignée de glisser-déposer — composant partagé par toutes les listes/tableaux
   réordonnables du site (FAQ, tarifs, grades, cours, pages…). Le texte source
   ("::" ou "≡", gardé pour la sémantique/l'historique des gabarits) est masqué
   par font-size:0. Rendu en bande unie (fond plein, grille de points) collée
   au bord de la carte, avec le même arrondi qu'elle : align-self:stretch l'étire
   à la hauteur de la ligne, et une marge négative égale au padding du conteneur
   (--handle-inset-y/-x, déclaré par .sortable-item/.photo-sortable-item/…) la
   fait déborder jusqu'au bord intérieur de la bordure de la carte — --handle-radius
   reprend l'arrondi de cette carte côté gauche seulement. Conteneurs qui ne
   déclarent pas ces variables (ex. <td> de tableau, pas de contexte flex) :
   les valeurs par défaut (0 de marge, badge carré autonome) s'appliquent —
   aucun gabarit à retoucher, un seul changement CSS. */
.drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex: 0 0 auto;
    min-width: 2.3rem;
    min-height: 1.7rem;
    margin: calc(-1 * var(--handle-inset-y, 0px)) 0 calc(-1 * var(--handle-inset-y, 0px)) calc(-1 * var(--handle-inset-x, 0px));
    font-size: 0;
    color: color-mix(in srgb, var(--accent) 70%, var(--muted));
    cursor: grab;
    border: var(--handle-border, 1px solid var(--line));
    border-radius: var(--handle-radius, 10px);
    background-color: color-mix(in srgb, var(--accent-soft) 42%, transparent);
    user-select: none;
    position: relative;
    overflow: hidden;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.drag-handle::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: transparent;
    box-shadow:
        -2.5px -7.5px 0 0 currentColor, 2.5px -7.5px 0 0 currentColor,
        -2.5px -2.5px 0 0 currentColor, 2.5px -2.5px 0 0 currentColor,
        -2.5px  2.5px 0 0 currentColor, 2.5px  2.5px 0 0 currentColor,
        -2.5px  7.5px 0 0 currentColor, 2.5px  7.5px 0 0 currentColor;
}

.drag-handle:hover {
    background-color: color-mix(in srgb, var(--accent-soft) 72%, transparent);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    color: var(--accent);
}

.drag-handle:active {
    cursor: grabbing;
    background-color: color-mix(in srgb, var(--accent-soft) 92%, transparent);
}

.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;
}

/* Poignée dans un tableau (ex. Catégories) : la bulle par défaut est centrée
   sous la poignée, or celle-ci colle au bord gauche et le .table-wrap
   (overflow-x:auto) rogne la bulle (« …our réordonner »). On l'ouvre donc à
   droite de la poignée, centrée verticalement, pour rester dans le tableau. */
.table-wrap .drag-handle[data-tooltip]:hover::after,
.table-wrap .drag-handle[data-tooltip]:focus-visible::after {
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

@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 .fiche-editor-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
    }

    .session-form-page .fiche-editor-row__info,
    .session-form-page .fiche-editor-row__actions {
        width: 100%;
    }

    .session-form-page .fiche-editor-row__actions {
        justify-content: flex-start;
    }

    .session-form-page .fiche-editor__add-field--location,
    .session-form-page .fiche-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;
    }

    /* Idem pour les champs posés DIRECTEMENT dans la carte, hors .form-grid :
       .form-card est une grille, ses items gardent `min-width: auto` (donc leur
       taille min-content). Un <select> à longue option — « Yoseikan Budo
       (13 ans et +) – Automne 2026 (…) » — élargit alors sa piste et emporte
       toute la colonne hors de l'écran, ellipse comprise (voir plus bas : elle
       est déjà prévue, mais n'a jamais l'occasion de s'appliquer sans ça). */
    .is-admin .content-card > *,
    .is-admin .form-card > *,
    .is-admin .content-card > form > *,
    .is-admin .form-card > form > * {
        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 .fiche-editor__header {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .session-form-page .fiche-editor__add {
        flex-direction: column;
        align-items: stretch;
    }

    /* En pile, on abandonne la densité de l'éditeur horizontal : chaque champ
       reprend une cible confortable au doigt (≥ 44 px) et un texte à 16 px.
       Sous 16 px, iOS Safari zoome à la mise au point — le viewport n'interdit
       pas le zoom (à raison, pour l'accessibilité), donc la page reste agrandie
       après la saisie. */
    .session-form-page .fiche-editor__add .form-input {
        padding-block: 0.72rem;
        font-size: 1rem;
    }

    .session-form-page .fiche-editor__add-label {
        font-size: 0.8rem;
    }

    /* En pile, chaque champ occupe sa propre ligne : le message quitte le champ
       (ligne 3 de la grille) pour reprendre sa place dans le flux et redevenir un
       texte lisible (il y a la place ici). */
    .session-form-page .fiche-editor__add [data-time-field-wrapper='true'] > [data-time-field-error] {
        grid-row: 3;
        justify-self: stretch;
        gap: 0.4rem;
        margin: 0.25rem 0 0;
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .session-form-page .fiche-editor__add [data-time-field-error]::before {
        width: 1rem;
        height: 1rem;
        margin-top: 0.08rem;
    }

    .session-form-page .fiche-editor__add-submit {
        align-self: stretch;
        padding-bottom: 0;
    }

    .session-form-page .fiche-editor__add-submit .button {
        width: 100%;
        justify-content: center;
    }

    .session-form-page .fiche-editor__add-action {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    .session-form-page .fiche-editor__add-action .button {
        width: 100%;
        justify-content: center;
    }

    .session-form-page .fiche-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 .fiche-editor__header,
    .session-form-page .fiche-editor__empty,
    .session-form-page .fiche-editor-row,
    .session-form-page .fiche-editor__add,
    .session-form-page .fiche-editor__add-action {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .session-form-page .fiche-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 .fiche-editor__header,
    .session-form-page .fiche-editor__empty,
    .session-form-page .fiche-editor-row,
    .session-form-page .fiche-editor__add,
    .session-form-page .fiche-editor__add-action {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    .session-form-page .fiche-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);
}

@media (prefers-reduced-motion: no-preference) {
    .sortable-item.is-dragging {
        transform: scale(1.015) rotate(-0.6deg);
    }

    .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) rotate(0); }
}

.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);
}

/* Éditeur de liste réutilisable (list_editor.js) : remplace les textarea
   « une ligne par élément » par une vraie liste éditable et réordonnable. */
.list-editor__source {
    display: none;
}

.list-editor {
    display: grid;
    gap: 0.65rem;
}

.list-editor__rows {
    gap: 0.5rem;
}

.list-editor__row {
    --handle-inset-y: 0.55rem;
    --handle-inset-x: 0.65rem;
    align-items: center;
    gap: 0.6rem;
    padding: var(--handle-inset-y) var(--handle-inset-x);
}

.list-editor__fields {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.list-editor__input {
    flex: 1 1 12rem;
    min-width: 0;
}

.list-editor__input--compact {
    flex: 0 1 12rem;
}

.list-editor__handle {
    flex: 0 0 auto;
    cursor: grab;
}

.list-editor__remove {
    flex: 0 0 auto;
    color: color-mix(in srgb, #b42318 70%, var(--muted));
}

.list-editor__remove:hover {
    color: #b42318;
    border-color: color-mix(in srgb, #b42318 45%, var(--line));
}

.list-editor__footer {
    display: flex;
}

.list-editor__empty {
    margin: 0;
}

@media (max-width: 640px) {
    .list-editor__input--compact {
        flex: 1 1 8rem;
    }
}

.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;
}

/* Contenu issu de l'éditeur riche (Quill) : styles pour les éléments produits
   par la barre d'outils (liens, listes, citation) absents des balises nues. */
.prose a:not(.button) {
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose a:not(.button):hover {
    text-decoration-thickness: 2px;
}

.prose ul,
.prose ol {
    padding-left: 1.35rem;
}

.prose li + li {
    margin-top: 0.3rem;
}

.prose blockquote {
    margin: 0.9rem 0;
    padding: 0.2rem 1rem;
    border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--line));
    color: var(--text-muted);
    font-style: italic;
}

/* Titres dans le contenu riche (Quill) : espacement auto en em (proportionnel
   à la taille de chaque niveau de titre) plutôt que des marges fixes par
   contexte. Plus d'avant que d'après pour rattacher visuellement le titre au
   texte qui suit ; pas d'espace superflu si le titre ouvre ou clôt le bloc. */
.prose :is(h1, h2, h3, h4, h5, h6) {
    margin: 1.5em 0 0.6em;
    line-height: 1.25;
}

.prose :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

.prose :is(h1, h2, h3, h4, h5, h6):last-child {
    margin-bottom: 0;
}

.disciplines-page {
    position: relative;
}

.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: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border-radius: 16px;
    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-strip__label {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--accent-strong);
    white-space: nowrap;
}

.discipline-current-strip__label i {
    font-size: 1rem;
}

.discipline-current-strip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    font-size: 0.72rem;
    letter-spacing: 0;
}

.discipline-current-carousel-nav {
    gap: 0.3rem;
    flex: 0 0 auto;
}

/* `.button` impose display:inline-flex et neutralise l'attribut hidden posé par le JS. */
.discipline-current-carousel-nav .button[hidden] {
    display: none;
}

.discipline-current-carousel {
    border-radius: 12px;
    outline: none;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.discipline-current-carousel::before,
.discipline-current-carousel::after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 46px;
    display: flex;
    align-items: center;
    pointer-events: none;
    cursor: default;
    font-size: 1.3rem;
    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: 0.55rem;
    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: 0.55rem;
    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: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding: 0.1rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.discipline-current-carousel-track::-webkit-scrollbar {
    display: none;
}

.discipline-current-card {
    scroll-snap-align: start;
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
    border-radius: 999px;
    padding: 0.25rem 0.25rem 0.25rem 0.95rem;
    background: color-mix(in srgb, var(--bg-elevated) 96%, transparent);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 45%, transparent);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.discipline-current-card:hover {
    border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 45%, transparent),
        0 6px 16px color-mix(in srgb, var(--accent) 14%, transparent);
}

.discipline-current-card__info {
    display: grid;
    gap: 0.05rem;
    min-width: 0;
}

.discipline-current-card h3 {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.2;
    white-space: nowrap;
}

.discipline-current-card__age {
    margin: 0;
    font-weight: 700;
    color: var(--accent-strong);
    font-size: 0.74rem;
    line-height: 1.2;
    white-space: nowrap;
}

.discipline-current-card__actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
}

/* Spécificité volontaire : bat `.button.ghost.small` (min-height 40px) sans !important. */
.discipline-current-strip .discipline-current-card__actions .button.small {
    min-height: 34px;
    height: 34px;
    padding: 0 0.85rem;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 999px;
    white-space: nowrap;
}

.discipline-current-strip .discipline-current-card__actions .button.small i {
    font-size: 0.9rem;
    line-height: 1;
}

.discipline-current-strip .discipline-current-card__actions .button.ghost.small {
    border-width: 1px;
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
    background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
    color: var(--text-muted);
}

.discipline-current-strip .discipline-current-card__actions .button.ghost.small:hover,
.discipline-current-strip .discipline-current-card__actions .button.ghost.small:focus-visible {
    background: color-mix(in srgb, var(--accent-soft) 72%, transparent);
    border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
    color: var(--accent-strong);
}

.discipline-current-strip .discipline-current-card__actions .button.primary.small {
    box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 26%, transparent);
}

.discipline-current-strip .discipline-current-card__actions .button.primary.small:hover {
    box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 34%, transparent);
}

/* Les flèches suivent la même hauteur que les boutons des pastilles. */
.discipline-current-strip .discipline-current-carousel-nav .button.small.icon-only {
    width: 34px;
    height: 34px;
    min-height: 34px;
    border-width: 1px;
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
    background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
    color: var(--accent-strong);
}

.discipline-current-strip .discipline-current-carousel-nav .button.small.icon-only:hover {
    background: color-mix(in srgb, var(--accent-soft) 72%, transparent);
    border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
}

.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-text h3 {
    font-size: clamp(1.02rem, 1.6vw, 1.18rem);
}

/* Titres du contenu riche (Quill), plus discrets que le nom du cours
   (.discipline-text > h2) pour garder ce dernier comme repère visuel principal
   de la carte. */
.discipline-description__content h2 {
    font-size: clamp(1.08rem, 1.75vw, 1.32rem);
}

.discipline-description {
    display: grid;
    gap: 0.65rem;
}

.discipline-summary-highlight {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    padding: 0.75rem 0.9rem;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 65%, transparent), color-mix(in srgb, var(--accent-soft) 25%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md, 10px);
    box-shadow: var(--shadow-soft);
}

.discipline-summary-highlight__icon {
    flex: 0 0 auto;
    margin-top: 0.16rem;
    font-size: 1.15rem;
    color: var(--accent-strong);
}

.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;
}

/* Contenu riche (Quill) dans la fiche cours : aligner listes/citations sur le
   rythme resserré des paragraphes (.discipline-text p) plutôt que les marges
   par défaut du navigateur (1em + indentation 40px), trop larges pour la carte. */
.discipline-description__content ul,
.discipline-description__content ol {
    margin: 0 0 0.48rem;
    padding-left: 1.15rem;
}

.discipline-description__content li {
    margin: 0 0 0.2rem;
}

.discipline-description__content li:last-child {
    margin-bottom: 0;
}

.discipline-description__content ul:last-child,
.discipline-description__content ol:last-child {
    margin-bottom: 0;
}

.discipline-description__content blockquote {
    margin: 0.5rem 0;
}

/* Ligne vide volontaire posée par Quill (double Entrée) : rendue comme un
   paragraphe presque nul plutôt qu'une marge + interligne complets, pour
   éviter un espace deux fois plus grand que prévu avant la liste qui suit. */
.discipline-description__content p:empty,
.discipline-description__content p:has(> br:only-child) {
    margin: 0 0 0.15rem;
    line-height: 0.4;
}

.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);
    }
}

/* Grosseur des toasts : préférence sysadmin (défaut plateforme) surchargée par
   la préférence de compte, injectée en attribut data-toast-size sur <body>.
   --toast-scale multiplie largeur/espacement/typo aux trois paliers responsives
   (base, ≥961px, ≤960px). Voir app/toast_preferences.py. */
body[data-toast-size="petit"] { --toast-scale: 0.86; }
body[data-toast-size="normal"] { --toast-scale: 1; }
body[data-toast-size="grand"] { --toast-scale: 1.18; }
body[data-toast-size="tres-grand"] { --toast-scale: 1.4; }

.dojo-toast-container {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 9999;
    width: min(calc(380px * var(--toast-scale, 1)), calc(100vw - 2rem));
    min-height: 86px;
    pointer-events: none;
}

.dojo-toast-card {
    --toast-stack-index: 0;
    --toast-halo: var(--accent);
    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: calc(0.72rem * var(--toast-scale, 1)) calc(0.82rem * var(--toast-scale, 1));
    display: grid;
    gap: 0.25rem;
    transform-origin: center;
    /* Empilement décalé façon pile de feuilles : translate/rotate/scale (propriétés distinctes de "transform")
       pour ne pas être écrasées par l'animation d'entrée, qui anime "transform" pour le rebond */
    translate: calc(var(--toast-stack-index) * -10px) calc(var(--toast-stack-index) * -22px);
    rotate: calc(var(--toast-stack-index) * -2.5deg);
    scale: calc(1 - var(--toast-stack-index) * 0.05);
    opacity: calc(1 - var(--toast-stack-index) * 0.3);
    transition: translate 160ms ease, rotate 160ms ease, scale 160ms ease, opacity 160ms ease;
    animation: dojo-toast-in 340ms cubic-bezier(0.215, 0.610, 0.355, 1.000) both, dojo-toast-halo-pulse 700ms ease-out both;
    pointer-events: auto;
}

.dojo-toast-card__title {
    font-size: calc(0.88rem * var(--toast-scale, 1));
    line-height: 1.25;
}

.dojo-toast-card__message {
    margin: 0;
    font-size: calc(0.86rem * var(--toast-scale, 1));
    color: var(--text-muted);
    line-height: 1.4;
}

.dojo-toast-card__summary {
    margin: 0.08rem 0 0;
    font-size: calc(0.78rem * var(--toast-scale, 1));
    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 {
    --toast-halo: #1f9d57;
    border-left-color: color-mix(in srgb, #1f9d57 74%, var(--line));
}

.dojo-toast-card--error {
    --toast-halo: var(--brand-red);
    border-left-color: color-mix(in srgb, var(--brand-red) 78%, var(--line));
    padding-right: 4rem;
    animation:
        dojo-toast-in 340ms cubic-bezier(0.215, 0.610, 0.355, 1.000) both,
        dojo-toast-error-shake 420ms 380ms ease-in-out,
        dojo-toast-halo-pulse 700ms ease-out both;
}

.dojo-toast-card--info {
    --toast-halo: var(--accent);
    border-left-color: color-mix(in srgb, var(--accent) 76%, var(--line));
}

.dojo-toast-card--warning {
    --toast-halo: color-mix(in srgb, var(--warning) 60%, var(--brand-orange) 40%);
    border-left-color: color-mix(in srgb, var(--warning) 72%, var(--brand-orange) 28%);
}

/* Tracé lumineux d'attention (tons avertissement/erreur seulement, injecté par ui_modal.js) :
   une ligne de la couleur du toast (--toast-halo) qui entoure graduellement la carte, un glow
   qui suit sa progression (rect « tête »), puis une palpitation de glow à la fermeture du contour.
   pathLength=100 normalise le contour → tracé identique quelle que soit la taille de la carte. */
.dojo-toast-card__trace {
    position: absolute;
    /* Taille explicite : un <svg> est un élément remplacé (taille intrinsèque 150px),
       un simple inset ne l'étire pas — il faut width/height pour épouser la carte. */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    /* Au-dessus du fond/bordure de la carte, sous le texte : la carte forme un contexte
       d'empilement (translate/scale/rotate non-none), donc z-index négatif y reste confiné. */
    z-index: -1;
}

.dojo-toast-card__trace rect {
    /* Léger retrait (2px) pour que le tracé coure juste à l'intérieur de la bordure.
       width/height="100%" restent en attributs (compat) ; le calc affine le retrait. */
    x: 2px;
    y: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    rx: 10px;
    ry: 10px;
    fill: none;
    stroke-width: 2px;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* La ligne qui se dessine graduellement autour du toast, puis palpite en se dissipant. */
.dojo-toast-card__trace-line {
    stroke: var(--toast-halo);
    stroke-dasharray: 100 100;
    stroke-dashoffset: 100;
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--toast-halo) 70%, transparent));
    animation:
        dojo-toast-trace-draw 1100ms cubic-bezier(0.33, 0, 0.2, 1) forwards,
        dojo-toast-trace-pulse 1100ms 1100ms ease-out forwards;
}

/* Le glow qui suit la ligne : court segment clair, fortement halo, calé sur la tête du tracé. */
.dojo-toast-card__trace-head {
    stroke: color-mix(in srgb, var(--toast-halo) 55%, #fff);
    stroke-dasharray: 7 93;
    stroke-dashoffset: 100;
    filter:
        drop-shadow(0 0 6px var(--toast-halo))
        drop-shadow(0 0 3px var(--toast-halo));
    animation:
        dojo-toast-trace-draw 1100ms cubic-bezier(0.33, 0, 0.2, 1) forwards,
        dojo-toast-trace-head-fade 260ms 1040ms ease-out forwards;
}

/* Le contour se dessine du haut, dans le sens horaire, jusqu'à faire le tour complet. */
@keyframes dojo-toast-trace-draw {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
}

/* Palpitation finale : un battement de glow une fois le tour bouclé, puis dissipation. */
@keyframes dojo-toast-trace-pulse {
    0% {
        filter: drop-shadow(0 0 3px color-mix(in srgb, var(--toast-halo) 70%, transparent));
        opacity: 1;
    }
    28% {
        filter:
            drop-shadow(0 0 14px var(--toast-halo))
            drop-shadow(0 0 6px var(--toast-halo));
        opacity: 1;
    }
    55% {
        filter: drop-shadow(0 0 4px color-mix(in srgb, var(--toast-halo) 60%, transparent));
        opacity: 1;
    }
    100% {
        filter: drop-shadow(0 0 0 transparent);
        opacity: 0;
    }
}

@keyframes dojo-toast-trace-head-fade {
    to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .dojo-toast-card__trace {
        display: none;
    }
}

.dojo-toast-card.is-hiding {
    animation: dojo-toast-out 220ms ease-in both;
}

/* Cartes empilées derrière la première : seul le contour (façon feuille) reste visible, sans texte superposé */
.dojo-toast-card--peek .dojo-toast-card__title,
.dojo-toast-card--peek .dojo-toast-card__message,
.dojo-toast-card--peek .dojo-toast-card__summary,
.dojo-toast-card--peek .dojo-toast-card__copy-btn,
.dojo-toast-card--peek .dojo-toast-card__close-btn,
.dojo-toast-card--peek .dojo-toast-card__trace {
    visibility: hidden;
}

@keyframes dojo-toast-in {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
        filter: blur(4px);
    }
    55% {
        opacity: 1;
        transform: translateY(-6px) scale(1.035);
        filter: blur(0);
    }
    80% {
        transform: translateY(2px) scale(0.99);
    }
    100% {
        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);
    }
}

/* Secousse d'attention pour les toasts d'erreur (inspirée d'Animista shake-horizontal, adoucie) */
@keyframes dojo-toast-error-shake {
    0%,
    100% {
        transform: translateX(0);
    }
    20%,
    60% {
        transform: translateX(-5px);
    }
    40%,
    80% {
        transform: translateX(5px);
    }
}

/* Halo lumineux pulsé à l'apparition, pour rendre le toast plus évident */
@keyframes dojo-toast-halo-pulse {
    from {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--toast-halo) 55%, transparent), var(--shadow-strong);
    }
    to {
        box-shadow: 0 0 0 16px color-mix(in srgb, var(--toast-halo) 0%, transparent), var(--shadow-strong);
    }
}

/* Toasts agrandis (x1.5) sur écrans standards ; taille d'origine conservée sur petits écrans (voir @media max-width: 960px) */
@media (min-width: 961px) {
    .dojo-toast-container {
        width: min(calc(570px * var(--toast-scale, 1)), calc(100vw - 2rem));
        min-height: 129px;
    }

    .dojo-toast-card {
        padding: calc(1.08rem * var(--toast-scale, 1)) calc(1.23rem * var(--toast-scale, 1));
        border-radius: 18px;
        border-left-width: 6px;
        gap: 0.375rem;
    }

    .dojo-toast-card__title {
        font-size: calc(1.32rem * var(--toast-scale, 1));
    }

    .dojo-toast-card__message {
        font-size: calc(1.29rem * var(--toast-scale, 1));
    }

    .dojo-toast-card__summary {
        font-size: calc(1.17rem * var(--toast-scale, 1));
        margin: 0.12rem 0 0;
    }

    .dojo-toast-card__copy-btn,
    .dojo-toast-card__close-btn {
        width: 36px;
        height: 36px;
        top: 0.6rem;
    }

    .dojo-toast-card__copy-btn {
        right: 3.15rem;
    }

    .dojo-toast-card__copy-btn svg {
        width: 18px;
        height: 18px;
    }

    .dojo-toast-card__close-btn {
        right: 0.6rem;
        font-size: 1.38rem;
    }

    .dojo-toast-card--error {
        padding-right: 6rem;
    }

    /* Rayon du tracé aligné sur la carte agrandie (border-radius 18px) */
    .dojo-toast-card__trace rect {
        rx: 15px;
        ry: 15px;
    }
}

@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 {
    --handle-inset-y: 0.55rem;
    --handle-inset-x: 0.7rem;
    --handle-radius: 12px 0 0 12px;
    --handle-border: none;
    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: var(--handle-inset-y) var(--handle-inset-x);
}

.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.92;
    border-style: solid;
    border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
    box-shadow: 0 14px 28px color-mix(in srgb, var(--accent) 20%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    .photo-sortable-item.is-dragging {
        transform: scale(1.015) rotate(-0.5deg);
    }
}

/* Diapo du carrousel hero : la vignette + les réglages (durée, transition) tiennent
   sur une ligne, la miniature reste fixe et les champs s'adaptent / passent à la
   ligne sur mobile. */
.hero-sortable-item { flex-wrap: wrap; }
.hero-sortable-item .photo-thumb-button { flex: 0 0 auto; }

/* Outil de cadrage vertical : vignette « cover » où l'on glisse pour choisir le
   centre vertical (background-position-y). La ligne marque le centre retenu. */
.hero-focal {
    position: relative;
    flex: 0 0 auto;
    width: 148px;
    height: 84px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: 50%;
    cursor: ns-resize;
    touch-action: none;   /* le glisser vertical ne fait pas défiler la page */
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}
.hero-focal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Vignette inline STATIQUE (aperçu du cadrage) — l'outil de cadrage vit dans la modale. */
.hero-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 148px;
    height: 84px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: 50%;
    overflow: hidden;
}
.hero-focal__line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 2px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
    transform: translateY(-1px);
    pointer-events: none;
}
.hero-focal__hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.15rem 0.2rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    pointer-events: none;
}
/* Bouton loupe : rouvre l'aperçu plein écran (ne déclenche pas le cadrage). */
.hero-focal__zoom {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    cursor: zoom-in;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-size: 0.95rem;
    line-height: 1;
    opacity: 0.85;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.hero-focal__zoom:hover { opacity: 1; background: rgba(0, 0, 0, 0.7); }

/* Ligne épurée : résumé (durée + transition) + bouton « Modifier ». */
.hero-item-summary {
    flex: 1 1 8rem;
    min-width: 6rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.82rem;
    color: var(--muted);
}
.hero-item-summary__dur { font-weight: 700; color: var(--text); display: inline-flex; align-items: center; gap: 0.25rem; }
.hero-sortable-item .hero-item-edit { flex: 0 0 auto; }

/* Modale « Modifier la diapo ». */
.hero-edit-dialog { max-width: 780px; width: calc(100vw - 2rem); }
/* Grande image en haut (cadrage draggable), champs en ligne en dessous. */
.hero-edit-grid { display: flex; flex-direction: column; gap: 1rem; margin: 0.4rem 0 0.2rem; }
.hero-edit-focal-wrap { display: flex; flex-direction: column; gap: 0.4rem; }
.hero-focal.hero-edit-focal {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 56vh;
    background-color: var(--bg-elevated);
}
.hero-edit-focal .hero-focal__hint { font-size: 0.72rem; padding: 0.3rem; }
.hero-edit-focal-hint { margin: 0; font-size: 0.8rem; line-height: 1.3; text-align: center; }
.hero-edit-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.9rem; }
.hero-edit-fields [data-edit-replace] { flex: 0 0 auto; }
.hero-edit-fields .hero-item-field { flex: 1 1 9rem; min-width: 8rem; }
.hero-edit-status { flex-basis: 100%; margin: 0; min-height: 1.1em; font-size: 0.85rem; color: var(--accent); }

.hero-item-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    flex: 1 1 8rem;
    min-width: 6.5rem;
}
.hero-item-field .hero-duration-input,
.hero-item-field .hero-transition-select {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-elevated);
    width: 100%;
}
/* Badge « N photos » de l'en-tête : colonne non compressible + libellé insécable
   (sinon « 2 photos » se coupe sur deux lignes quand la description est longue). */
#hero-photo-image .compact-actions { flex-shrink: 0; }
#hero-photo-image .compact-actions .badge { white-space: nowrap; }

.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);
}

@media (prefers-reduced-motion: no-preference) {
    .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 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex: 0 0 auto;
    min-width: 2rem;
    min-height: 1.5rem;
    margin: calc(-1 * var(--handle-inset-y, 0px)) 0 calc(-1 * var(--handle-inset-y, 0px)) calc(-1 * var(--handle-inset-x, 0px));
    font-size: 0;
    cursor: grab;
    color: var(--muted);
    border: var(--handle-border, 1px solid var(--line));
    border-radius: var(--handle-radius, 9px);
    background-color: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
    position: relative;
    overflow: hidden;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.photo-handle::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: transparent;
    box-shadow:
        -2.2px -6px 0 0 currentColor, 2.2px -6px 0 0 currentColor,
        -2.2px -2px 0 0 currentColor, 2.2px -2px 0 0 currentColor,
        -2.2px  2px 0 0 currentColor, 2.2px  2px 0 0 currentColor,
        -2.2px  6px 0 0 currentColor, 2.2px  6px 0 0 currentColor;
}

.photo-handle:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background-color: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}

.photo-handle:active {
    cursor: grabbing;
}

.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);
}

.photo-reuse-btn {
    flex: 0 0 auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.photo-reuse-btn:hover {
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent) 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;
}

/* Pied de page : bloc de suivi en puces compactes (icône + info dans le bouton). */
.footer-follow-chips {
    display: flex;
    flex-wrap: wrap;
    /* `flex-start` : une puce à pastille est plus haute (sa marge basse réserve
       la place du compteur) — sans ça, ses voisines s'étireraient à sa hauteur. */
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 0.65rem;
}

.footer-follow-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.64rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    color: inherit;
    font-size: 0.82rem;
    line-height: 1;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.footer-follow-chip:hover,
.footer-follow-chip:focus-visible {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.footer-follow-chip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.footer-follow-chip__icon .social-icon-mask {
    width: 1.05rem;
    height: 1.05rem;
}

.footer-follow-chip__icon .ph {
    font-size: 1.05rem;
}

.footer-follow-chip__text {
    white-space: nowrap;
}

/* --- Pastille de compteur sous le bouton (J'aime Facebook, abonnés Instagram) ---
   La marge basse de la puce réserve la place : la pastille est en position
   absolue et ne doit pas chevaucher la ligne suivante. */
.footer-follow-chip--badged {
    position: relative;
    /* Doit couvrir la hauteur de la pastille moins son chevauchement (1,6 − 0,25),
       sinon elle mord sur ce qui suit. */
    margin-bottom: 1.4rem;
}

.footer-follow-chip__badge {
    position: absolute;
    top: 100%;
    left: 50%;
    /* Léger chevauchement du bord bas : la pastille se lit comme une extension
       du bouton plutôt que comme une étiquette flottante. */
    transform: translate(-50%, -0.25rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* `min-width` = hauteur : un petit nombre reste un cercle parfait, un grand
       s'allonge en pastille sans jamais casser la forme arrondie. */
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 6px rgba(10, 23, 52, 0.22);
}

.footer-follow-chip--facebook .footer-follow-chip__badge {
    background: #1877f2;
}

.footer-follow-chip--instagram .footer-follow-chip__badge {
    background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 55%, #6228d7 100%);
}

.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;
}

.contact-confirmation {
    text-align: center;
    padding: 2.75rem 1.75rem;
    animation: empty-state-pop 420ms cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}

.contact-confirmation:focus {
    outline: none;
}

.contact-confirmation__icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.9rem;
}

.contact-confirmation h2 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
}

.contact-confirmation p {
    margin: 0 auto 0.6rem;
    max-width: 42ch;
    color: var(--text);
}

.contact-confirmation__reply {
    color: var(--muted);
}

.contact-confirmation__actions {
    justify-content: center;
    margin-top: 1.75rem;
}

body[data-motion-level="reduced"] .contact-confirmation {
    animation: none;
}

.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;
}

.follow-social-card__count {
    font-size: 0.82rem;
    opacity: 0.7;
}

/* --- Fil d'actualités social (page Actualités : Facebook + Instagram) --- */
.social-news-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-top: 1.25rem;
    padding: 0.9rem 1.05rem;
    border: 1px solid color-mix(in srgb, var(--warning, #d97706) 40%, var(--line));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--warning, #d97706) 12%, var(--surface));
    color: var(--text);
    font-size: 0.9rem;
}

.social-news-notice > i {
    font-size: 1.2rem;
    color: var(--warning, #d97706);
    flex-shrink: 0;
}

.social-news-notice__hint {
    font-size: 0.8rem;
    opacity: 0.7;
}

.social-news-notice p {
    margin: 0.3rem 0 0;
    word-break: break-word;
}

.social-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.4rem;
}

.social-news-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-top: 3px solid var(--line);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.social-news-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-strong);
}

/* `--social-news-brand` : couleur du réseau, réutilisée par la teinte de la
   carte sans image, la pièce jointe et le filigrane. */
.social-news-card--facebook {
    --social-news-brand: #1877f2;
    border-top-color: var(--social-news-brand);
}

.social-news-card--instagram {
    --social-news-brand: #dd2a7b;
    border-top-color: var(--social-news-brand);
}

/* Actualité publiée sur le site (pas un réseau externe). */
.social-news-card--site {
    --social-news-brand: var(--accent);
    border-top-color: var(--social-news-brand);
}

.social-news-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.social-news-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.24rem 0.62rem;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #fff;
}

.social-news-badge i {
    font-size: 1rem;
}

.social-news-badge--facebook {
    background: #1877f2;
}

.social-news-badge--instagram {
    background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 45%, #6228d7 100%);
}

.social-news-badge--site {
    background: var(--accent);
}

.social-news-card__date {
    font-size: 0.82rem;
    color: var(--muted);
}

.social-news-card__media {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-md);
    aspect-ratio: 16 / 10;
    background: color-mix(in srgb, var(--line) 40%, transparent);
}

.social-news-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.social-news-card:hover .social-news-card__media img {
    transform: scale(1.045);
}

/* Pastille « vidéo » / « album » posée sur la vignette. */
.social-news-card__media-flag {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-pill);
    background: rgba(12, 18, 32, 0.62);
    color: #fff;
    font-size: 1.15rem;
}

.social-news-card__body {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    min-width: 0;
}

/* Tout le contenu passe au-dessus du filigrane. */
.social-news-card__body > * {
    position: relative;
    z-index: 1;
}

.social-news-card__text {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 0.94rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.social-news-card__text--empty {
    color: var(--muted);
    font-style: italic;
}

/* --- Carte sans image : le texte devient le sujet principal ---------------
   Sans vignette, la carte se retrouvait à moitié vide à côté de ses voisines.
   Elle gagne une teinte du réseau, un filigrane et une typo plus généreuse,
   et son texte se centre pour occuper la hauteur de la rangée. */
.social-news-card--text {
    background:
        linear-gradient(
            158deg,
            color-mix(in srgb, var(--social-news-brand, var(--accent)) 13%, transparent),
            transparent 60%
        ),
        color-mix(in srgb, var(--surface) 96%, transparent);
}

.social-news-card--text .social-news-card__body {
    justify-content: center;
    padding: 0.25rem 0;
}

.social-news-card--text .social-news-card__text {
    font-size: 1.06rem;
    line-height: 1.62;
    font-weight: 500;
    -webkit-line-clamp: 14;
}

.social-news-card__watermark {
    position: absolute;
    right: -0.85rem;
    bottom: -1.6rem;
    z-index: 0;
    font-size: 6.5rem;
    line-height: 1;
    color: color-mix(in srgb, var(--social-news-brand, var(--accent)) 13%, transparent);
    pointer-events: none;
}

/* --- Pièce jointe (événement créé, lien ou vidéo partagée) --------------- */
.social-news-attachment {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--social-news-brand, var(--accent)) 26%, var(--line));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--social-news-brand, var(--accent)) 7%, var(--surface));
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.social-news-attachment:hover {
    border-color: color-mix(in srgb, var(--social-news-brand, var(--accent)) 55%, var(--line));
    background: color-mix(in srgb, var(--social-news-brand, var(--accent)) 14%, var(--surface));
}

.social-news-attachment__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--social-news-brand, var(--accent)) 17%, transparent);
    color: color-mix(in srgb, var(--social-news-brand, var(--accent)) 78%, var(--text));
    font-size: 1.15rem;
}

.social-news-attachment__body {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
    min-width: 0;
}

.social-news-attachment__kind {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--social-news-brand, var(--accent)) 72%, var(--text));
}

.social-news-attachment__title {
    font-weight: 600;
    font-size: 0.94rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.social-news-attachment__desc {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--muted);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Pied de carte : compteurs d'engagement + lien vers la publication --- */
/* Colonne plutôt que ligne : à la largeur d'une carte, « compteurs + lien »
   tiennent tantôt sur une ligne tantôt sur deux, et la grille perdait son
   alignement d'une carte à l'autre. */
.social-news-card__foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: auto;
    padding-top: 0.8rem;
    border-top: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}

.social-news-stats {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.social-news-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.social-news-stat i {
    font-size: 1.05rem;
}

.social-news-stat--like i {
    color: #e0245e;
}

.social-news-stat--comment i {
    color: color-mix(in srgb, var(--accent) 82%, var(--text));
}

.social-news-stat--share i {
    color: var(--success-strong);
}

.social-news-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--accent);
    text-decoration: none;
}

.social-news-card__link:hover {
    text-decoration: underline;
}

.social-news-card__link i {
    font-size: 0.95rem;
}

/* --- Boutons like / partage pour les actualités du site ----------------- */
.site-news-like-btn,
.site-news-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.45rem;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    font-size: 0.86rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
    font-family: inherit;
}

.site-news-like-btn:hover,
.site-news-share-btn:hover {
    background: color-mix(in srgb, var(--line) 40%, transparent);
}

.site-news-like-btn:focus-visible,
.site-news-share-btn:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.site-news-like-btn i,
.site-news-share-btn i {
    font-size: 1.05rem;
    transition: transform 0.2s ease;
}

.site-news-like-btn:hover i {
    transform: scale(1.2);
}

.site-news-like-btn.is-liked {
    color: #e0245e;
}

.site-news-like-btn.is-liked i {
    animation: site-news-like-pop 0.35s ease;
}

@keyframes site-news-like-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.site-news-share-btn i {
    color: var(--success-strong);
}

/* Feedback toast du partage */
.site-news-share-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 0.6rem 1.3rem;
    border-radius: var(--radius-pill);
    background: var(--heading);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    animation: site-news-toast-in 0.3s ease;
    pointer-events: none;
}

.site-news-share-toast--fade {
    animation: site-news-toast-out 0.3s ease forwards;
}

@keyframes site-news-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(0.6rem); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes site-news-toast-out {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to { opacity: 0; transform: translateX(-50%) translateY(0.6rem); }
}

/* ── Modal des actualités du site ─────────────────────────────────────── */
.site-news-modal {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.site-news-modal[hidden] {
    display: none;
}

.site-news-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
}

.site-news-modal__dialog {
    position: relative;
    width: min(720px, 100%);
    max-height: min(88vh, 800px);
    overflow-y: auto;
    border-radius: 24px;
    background: var(--bg-elevated-strong);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-strong);
    animation: site-news-modal-in 220ms ease-out;
    display: grid;
    gap: 0;
}

.site-news-modal__close {
    position: sticky;
    top: 0.75rem;
    align-self: start;
    justify-self: end;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0.65rem 0.75rem -2.5rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-elevated-strong);
    color: var(--text);
    font-size: 1.1rem;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.site-news-modal__close:hover,
.site-news-modal__close:focus-visible {
    background: var(--accent-soft);
    border-color: var(--accent);
    transform: scale(1.06);
}

.site-news-modal__image-wrap {
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    background: color-mix(in srgb, var(--bg) 60%, var(--accent-soft));
}

.site-news-modal__image-wrap img {
    display: block;
    width: 100%;
    max-height: min(52vh, 420px);
    object-fit: cover;
}

.site-news-modal__body {
    display: grid;
    gap: 0.6rem;
    padding: 1.3rem 1.5rem 1.6rem;
}

.site-news-modal__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent-soft) 64%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
}

.site-news-modal__title {
    margin: 0;
    font-size: clamp(1.2rem, 2.4vw, 1.55rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.site-news-modal__date {
    font-size: 0.88rem;
    color: var(--muted);
}

.site-news-modal__text {
    margin-top: 0.2rem;
    line-height: 1.7;
    color: var(--text);
    white-space: pre-line;
}

/* Carte cliquable — curseur et animation au survol */
.social-news-card--clickable {
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .social-news-card--clickable:hover {
        border-color: color-mix(in srgb, var(--accent) 44%, var(--line));
        box-shadow: var(--shadow-strong);
        transform: translateY(-2px);
    }
}

/* États de focus clavier */
.social-news-card--clickable:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent);
    outline-offset: 2px;
}

@keyframes site-news-modal-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 640px) {
    .site-news-modal {
        padding: 0.5rem;
        align-items: flex-end;
    }

    .site-news-modal__dialog {
        max-height: 92vh;
        border-radius: 22px 22px 0 0;
        animation: site-news-modal-in-mobile 280ms ease-out;
    }

    .site-news-modal__image-wrap {
        border-radius: 22px 22px 0 0;
    }

    .site-news-modal__body {
        padding: 1rem 1.15rem 1.4rem;
        gap: 0.5rem;
    }

    .site-news-modal__close {
        top: 0.5rem;
        width: 2.75rem;
        height: 2.75rem;
        margin: 0.5rem 0.5rem -2.75rem;
    }
}

@keyframes site-news-modal-in-mobile {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .site-news-modal__body {
        padding: 0.9rem 1rem 1.3rem;
    }

    .site-news-modal__text {
        font-size: 0.94rem;
    }
}

/* --- Carte d'invitation « La suite sur les réseaux sociaux » --------------
   Dernière carte de la grille (après les 24 publications fusionnées), elle
   invite à visiter le fil Facebook/Instagram pour voir la suite puisque la
   page est volontairement limitée. */
.social-news-card--invite {
    border-top: 3px solid var(--accent);
    background:
        radial-gradient(
            ellipse at 60% 10%,
            color-mix(in srgb, var(--accent) 16%, transparent) 0%,
            transparent 70%
        ),
        radial-gradient(
            ellipse at 20% 90%,
            color-mix(in srgb, var(--accent) 8%, transparent) 0%,
            transparent 60%
        ),
        var(--surface);
    box-shadow: var(--shadow-soft), 0 0 0 1px var(--line);
}

.social-news-card--invite:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-strong), 0 0 0 1px var(--accent-light, var(--accent));
}

.social-news-invite {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0.4rem 0;
    text-align: center;
    overflow: hidden;
}

.social-news-invite__brands {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.social-news-invite__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-pill);
    font-size: 1.55rem;
    color: #fff;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));
}

.social-news-invite__brand--facebook {
    background: #1877f2;
}

.social-news-invite__brand--instagram {
    background: linear-gradient(145deg, #f9ce34 0%, #ee2a7b 45%, #6228d7 100%);
}

.social-news-invite__body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: relative;
    z-index: 1;
}

.social-news-invite__lead {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--heading);
    letter-spacing: -0.01em;
}

.social-news-invite__hint {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--muted);
    max-width: 26ch;
    margin-inline: auto;
}

.social-news-invite__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    position: relative;
    z-index: 1;
}

/* Boutons pastel pour les liens réseau */
.btn--social-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
    backdrop-filter: blur(4px);
}

.btn--social-outline i {
    font-size: 1.05rem;
}

.btn--social-outline:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    transform: translateY(-1px);
}

.btn--social-outline:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* Filigrane décoratif : icônes géantes en fond */
.social-news-invite__pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
}

.social-news-invite__pattern i {
    font-size: 7rem;
    line-height: 1;
    color: color-mix(in srgb, var(--line) 35%, transparent);
    opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
    .social-news-card,
    .social-news-card__media img {
        transition: none;
    }

    .social-news-card:hover,
    .social-news-card:hover .social-news-card__media img {
        transform: none;
    }

    .social-news-card--invite:hover {
        transform: none;
    }

    .btn--social-outline,
    .btn--social-outline:hover {
        transition: none;
        transform: none;
    }
}

@media (max-width: 960px) {
    .social-icon-badge--brand {
        width: 2.75rem;
        height: 2.75rem;
    }

    .social-news-grid {
        grid-template-columns: 1fr;
    }

    .social-news-card__watermark {
        font-size: 5rem;
    }
}

.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;
}

/* ── Apparition graduelle au défilement (tout le site public) ──────────────
   Sur les pages publiques, l'attribut html.reveal-on — posé pré-paint quand le
   mouvement est permis (cf. base.html) — transforme l'animation d'entrée « au
   chargement » de .reveal en apparition « au défilement » : la section est
   masquée puis révélée par IntersectionObserver (static/js/public_reveal.js)
   dès qu'elle entre dans la fenêtre. reveal-on n'est JAMAIS posé en mouvement
   réduit (préférence OS ou réglage du site) → aucun conflit avec les règles de
   mouvement réduit, et un filet de sécurité dans base.html retire reveal-on si
   le JS ne démarre pas → jamais de contenu bloqué invisible. */
html.reveal-on .reveal {
    opacity: 0;
    /* On utilise la propriété `translate` (et non `transform`) : elle se compose
       avec un `transform` de survol (ex. le -2px des lignes de cours ou des
       cartes), donc le reveal ne fige jamais le micro-survol. Repli gracieux
       (fondu seul) sur un navigateur sans `translate`. */
    translate: 0 28px;
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                translate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    animation: none;
    will-change: opacity, translate;
}

html.reveal-on .reveal.is-visible {
    opacity: 1;
    translate: none;
}

.delay-1 {
    animation-delay: 120ms;
}

.delay-2 {
    animation-delay: 180ms;
}

.delay-3 {
    animation-delay: 240ms;
}

/* Cascade d'apparition des enfants directs d'une grille de cartes.
   S'ajoute à .reveal ou s'utilise seul sur le conteneur. */
.reveal-stagger > * {
    animation: rise-in 560ms ease both;
}

.reveal-stagger > *:nth-child(1) { animation-delay: 80ms; }
.reveal-stagger > *:nth-child(2) { animation-delay: 150ms; }
.reveal-stagger > *:nth-child(3) { animation-delay: 220ms; }
.reveal-stagger > *:nth-child(4) { animation-delay: 290ms; }
.reveal-stagger > *:nth-child(5) { animation-delay: 360ms; }
.reveal-stagger > *:nth-child(6) { animation-delay: 430ms; }
.reveal-stagger > *:nth-child(7) { animation-delay: 500ms; }
.reveal-stagger > *:nth-child(n+8) { animation-delay: 570ms; }

/* Cascade d'arrivée des widgets du tableau de bord admin.
   Classe posée puis retirée par admin_dashboard_layout.js après le montage :
   opacité seulement, pour ne pas fausser les mesures de positionnement
   (FLIP, resize observer) qui lisent les rects pendant l'animation. */
.dashboard-cascade > .dashboard-widget {
    animation: widget-fade-in 420ms ease both;
}

.dashboard-cascade > .dashboard-widget:nth-child(1) { animation-delay: 40ms; }
.dashboard-cascade > .dashboard-widget:nth-child(2) { animation-delay: 100ms; }
.dashboard-cascade > .dashboard-widget:nth-child(3) { animation-delay: 160ms; }
.dashboard-cascade > .dashboard-widget:nth-child(4) { animation-delay: 220ms; }
.dashboard-cascade > .dashboard-widget:nth-child(5) { animation-delay: 280ms; }
.dashboard-cascade > .dashboard-widget:nth-child(6) { animation-delay: 340ms; }
.dashboard-cascade > .dashboard-widget:nth-child(7) { animation-delay: 400ms; }
.dashboard-cascade > .dashboard-widget:nth-child(n+8) { animation-delay: 460ms; }

@keyframes widget-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Mise au point du titre hero (inspirée d'Animista text-focus-in, adoucie) */
.reveal .hero-copy h1,
.reveal .landing-heading h1 {
    animation: hero-title-focus-in 720ms cubic-bezier(0.250, 0.460, 0.450, 0.940) 120ms both;
}

@keyframes hero-title-focus-in {
    from {
        opacity: 0;
        filter: blur(6px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

@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;
    }

    .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;
    }

    /* ── Menu mobile : sous-menus en UNE colonne + rail d'imbrication ────────
       Même logique que le menu festif (Festifun) portée à tout le site : la
       grille 2 colonnes (items orphelins) laisse place à une liste verticale
       claire, avec un rail de gauche pour matérialiser l'accordéon. Thémé par
       variables (clair/sombre + accent du dojo). Scopé .main-nav.is-open pour
       viser uniquement l'état mobile déployé et ne jamais toucher les menus
       déroulants bureau (dont le thème festif entre 769 et 960px). */
    .main-nav.is-open .nav-submenu-panel {
        grid-template-columns: 1fr;
        gap: 0.28rem;
        margin: 0.3rem 0 0.15rem 0.5rem;
        padding: 0.4rem 0.4rem 0.4rem 0.55rem;
        border-left: 2px solid color-mix(in srgb, var(--accent) 42%, var(--line));
        border-radius: 0 12px 12px 0;
        background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
    }
    .main-nav.is-open .nav-submenu-panel .nav-link {
        width: 100%;
        min-height: 46px;
        border-radius: 10px;
    }
    /* Parent d'un sous-menu ouvert : mis en évidence (repère quand plusieurs) */
    .main-nav.is-open .nav-submenu[open] > .nav-submenu-toggle {
        background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
        border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    }
    /* Chevron un peu plus lisible */
    .main-nav.is-open .nav-submenu-caret {
        font-size: 0.9em;
    }
    /* Focus clavier : anneau net à l'accent du thème (au lieu du liseré discret) */
    .main-nav.is-open .nav-link:focus-visible,
    .main-nav.is-open .nav-submenu-toggle:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
        outline-offset: 2px;
    }
    /* Feuille : le menu ouvert se détache du contenu (fond + coins + ombre).
       Le thème par défaut n'a pas de dégradé d'en-tête derrière le menu.
       Exclut le thème festif (body.is-festivites) qui garde son dégradé rose. */
    body:not(.is-festivites) .main-nav.is-open {
        background-color: color-mix(in srgb, var(--surface, var(--bg-elevated)) 90%, transparent);
        border-radius: 0 0 18px 18px;
        padding: 0.6rem 0.6rem 0.75rem;
        box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.28);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    .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;
    }

    .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,
    .section-heading.split-heading .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) {
    /* Les deux sélecteurs de mois passent l'un sous l'autre, et les boutons
       reviennent à gauche sous eux plutôt que de rester poussés à droite. */
    .federation-period-form__field {
        flex-basis: 100%;
        max-inline-size: none;
    }

    .federation-period-form__actions {
        margin-inline-start: 0;
        width: 100%;
    }

    .federation-period-form__actions .button {
        flex: 1 1 auto;
        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;
    }

    .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;
    }

    /* Cinq rôles en pastilles pleine taille prenaient trois rangées avant même
       le premier champ du formulaire : sur mobile ils se condensent (corps,
       rembourrage et gouttière réduits) pour tenir sur une ou deux rangées.
       Rien n'est masqué — un rôle qu'on ne voit plus est un rôle qu'on croit
       ne pas avoir. */
    .profile-page .role-badges {
        width: 100%;
        margin-top: 0.7rem;
        gap: 0.35rem;
    }

    .profile-page .role-badges .badge {
        white-space: normal;
        padding: 0.22rem 0.6rem;
        font-size: 0.68rem;
        letter-spacing: 0.2px;
        border-width: 1px;
    }

    .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-strip__label span:not(.discipline-current-strip__count) {
        display: none;
    }

    .member-grade-history-filters__actions {
        width: 100%;
    }

    .member-grade-history-filters__actions .button {
        width: 100%;
        justify-content: center;
    }

    .grade-history-entry__actions {
        opacity: 1;
    }

    .grade-history-entry {
        grid-template-columns: 1.5rem 1fr auto;
        gap: 0 0.6rem;
    }

    .grade-history-header-meta {
        font-size: 0.88rem;
    }

    .grade-history-current-chip {
        font-size: 0.78rem;
    }

    .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-col-address,
    .federation-members-cell-address {
        max-width: 170px;
    }

    .discipline-current-carousel-nav {
        display: none;
    }
}

@media (max-width: 360px) {
    .main-nav.is-open,
    .main-nav .nav-submenu-panel {
        grid-template-columns: 1fr;
    }

    .federation-members-col-address,
    .federation-members-cell-address {
        max-width: 150px;
    }

    .discipline-current-card h3 {
        font-size: 0.86rem;
    }
}

body[data-motion-level="reduced"] .reveal,
body[data-motion-level="reduced"] .reveal-stagger > *,
body[data-motion-level="reduced"] .reveal .hero-copy h1,
body[data-motion-level="reduced"] .reveal .landing-heading h1,
body[data-motion-level="reduced"] .empty-state,
body[data-motion-level="reduced"] [data-unread-badge],
body[data-motion-level="reduced"] .dashboard-cascade > .dashboard-widget,
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) {
    .fiche-editor-row__day {
        min-width: unset;
    }

    .fiche-editor__add {
        flex-direction: column;
        align-items: stretch;
    }

    .fiche-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);
    }

    /* 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;
    }

    /* ≤ 480 px : topbar en FLEX plutôt qu'une grille figeant le toolbar sur sa
       propre rangée pleine largeur (header doublé à ~128px, espace gâché sur
       petit écran). Le flex garde [hamburger][nom][actions] sur UNE rangée quand
       les actions sont légères (visiteur : juste « Connexion » → header ~68px),
       et ne laisse le toolbar RETOMBER sur sa propre rangée que s'il est chargé
       (admin : thème/aperçu/écoles/profil/« Gérer ») grâce au min-width du nom
       qui force le retour à la ligne — donc aucune régression du cas admin. */
    .topbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 0.5rem;
        row-gap: 0.5rem;
    }

    .nav-toggle {
        order: 0;
    }

    .brand {
        order: 1;
        flex: 1 1 55%;
        min-width: 8.5rem;
        gap: 0.55rem;
    }

    .brand strong {
        font-size: 0.9rem;
        line-height: 1.14;
        overflow-wrap: normal;
        word-break: keep-all;
    }

    /* Actions : collées à droite ; retombent sous le nom seulement si chargées. */
    .toolbar {
        order: 2;
        width: auto;
        margin-left: auto;
        justify-content: flex-end;
        overflow: visible;
        flex-wrap: wrap;
    }

    /* La nav déployée occupe toujours une rangée pleine sous la barre. */
    .main-nav {
        order: 3;
        flex: 1 0 100%;
    }

    .session-links {
        min-width: 0;
    }

    .session-login-link {
        gap: 0.32rem;
        padding: 0.5rem 0.8rem;
        font-size: 0.88rem;
    }

    .theme-picker__summary {
        min-width: 40px;
        min-height: 40px;
    }

    .theme-picker__summary-icon {
        width: 1.05rem;
        height: 1.05rem;
    }

    .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%;
    }

    /* 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;
    }

    .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;
    }

    .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.72rem;
        font-size: 0.82rem;
    }

    /* Sous 360 px c'est l'icône décorative qui saute, jamais le libellé :
       le mot porte le sens, l'icône ne fait que l'accompagner. */
    .session-login-link .session-login-icon {
        display: none;
    }

    .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.
       `padding-block` seul, jamais la shorthand `padding` : le retrait horizontal
       vaut déjà 1rem dans la règle de base, et une shorthand ici effacerait les
       longhands des champs à icône (horloge des heures, cadenas d'un champ
       verrouillé, œil du mot de passe, calendrier du sélecteur de date, pastille
       d'erreur) — l'icône se retrouvait alors SOUS le texte sur tout appareil
       tactile. */
    .form-input {
        padding-block: 1.05rem;
    }
}

/* ═══════════════════════════════════════
   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.is-dragging {
    box-shadow: 0 18px 34px color-mix(in srgb, var(--accent) 24%, transparent);
}

.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;
}

/* Surbrillance au survol des cartes : le titre s'illumine en couleur accent
   avec un halo doux. S'applique au titre de chaque carte-widget ainsi qu'aux
   titres des cartes d'actions rapides et des mini-cartes santé. Le léger
   grossissement est coupé si l'utilisateur réduit les animations. */
.dashboard-widget-title--drag,
.admin-quick-card__head .eyebrow,
.admin-health-item .eyebrow {
    transition: color var(--transition-fast), text-shadow var(--transition-fast),
                transform var(--transition-fast);
}

[data-dashboard-widget]:hover .dashboard-widget-title--drag,
.admin-quick-card:hover .admin-quick-card__head .eyebrow,
.admin-health-item:hover .eyebrow {
    color: var(--accent);
    text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 32%, transparent);
}

.admin-quick-card--primary:hover .admin-quick-card__head .eyebrow {
    color: var(--admin-quick-primary-text);
    text-shadow:
        0 0 6px color-mix(in srgb, #fff 30%, transparent),
        var(--admin-quick-primary-heading-shadow);
}

@media (prefers-reduced-motion: no-preference) {
    [data-dashboard-widget]:hover .dashboard-widget-title--drag {
        transform: scale(1.035);
        transform-origin: left center;
    }
}

.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-command-trigger {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 46px;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font: inherit;
    text-align: left;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.admin-dashboard-command-trigger:hover,
.admin-dashboard-command-trigger:focus-visible {
    color: var(--text);
    border-color: var(--accent);
}

.admin-dashboard-command-trigger__icon {
    flex-shrink: 0;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--text-muted);
}

.admin-dashboard-command-trigger__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.admin-dashboard-command-trigger__kbd {
    flex-shrink: 0;
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-soft);
    font-family: var(--font-body);
    font-size: 0.72rem;
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .admin-dashboard-command-trigger__kbd {
        display: none;
    }
}

.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,
.sys-kamatera-billing-rate {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sys-kamatera-billing-spec {
    font-family: var(--font-mono, monospace);
    font-size: 0.82rem;
    white-space: nowrap;
    opacity: 0.85;
}

.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%);
}

/* ---------------------------------------------------------------------------
   Statistiques par site (page sysadmin Kamatera) : jauge disque + tableau
   -------------------------------------------------------------------------- */
.sys-site-disk {
    margin-top: 0.75rem;
    padding: 0.9rem 1.1rem 1rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
    background: color-mix(in srgb, var(--bg-elevated-strong) 88%, var(--accent-soft) 12%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
}

.sys-site-disk-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.55rem;
    flex-wrap: wrap;
}

.sys-site-disk-title {
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.74rem;
    color: var(--text-muted);
}

.sys-site-disk-figure {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sys-site-disk-figure--warn {
    color: color-mix(in srgb, #d97706 82%, var(--text));
}

.sys-site-disk-figure--crit {
    color: color-mix(in srgb, #dc2626 82%, var(--text));
}

.sys-site-disk-track {
    position: relative;
    height: 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 55%, transparent);
    overflow: hidden;
    box-shadow: inset 0 1px 2px color-mix(in srgb, #000000 20%, transparent);
}

/* Palette des postes de disque : une teinte par poste, partagée par le segment
   de la barre empilée, la pastille de légende et la ligne du tableau — l'œil
   fait le lien sans relire les libellés. Teintes fixes mélangées à du blanc pour
   rester lisibles en thème clair comme en sombre. */
.sys-site-disk,
.sys-disk-table {
    --sys-disk-medias: #0ea5e9;
    --sys-disk-instance: #8b5cf6;
    --sys-disk-bd: #f59e0b;
    --sys-disk-sauvegardes: #14b8a6;
    --sys-disk-releases: #ec4899;
    --sys-disk-applications: #84cc16;
    --sys-disk-journaux: #ea580c;
    --sys-disk-autres: color-mix(in srgb, var(--text-muted) 60%, transparent);
    --sys-disk-libre: color-mix(in srgb, var(--line) 70%, transparent);
}

.sys-site-disk-track--stacked {
    display: flex;
    gap: 1px;
}

.sys-disk-seg {
    flex: 0 0 var(--sys-seg-pct, 0%);
    min-width: 2px;
    height: 100%;
    transition: flex-basis 0.6s ease;
    background: var(--sys-disk-autres);
}

.sys-disk-seg--medias {
    background: color-mix(in srgb, var(--sys-disk-medias) 88%, #ffffff 12%);
}

.sys-disk-seg--instance {
    background: color-mix(in srgb, var(--sys-disk-instance) 88%, #ffffff 12%);
}

.sys-disk-seg--bd {
    background: color-mix(in srgb, var(--sys-disk-bd) 88%, #ffffff 12%);
}

.sys-disk-seg--sauvegardes {
    background: color-mix(in srgb, var(--sys-disk-sauvegardes) 88%, #ffffff 12%);
}

.sys-disk-seg--releases {
    background: color-mix(in srgb, var(--sys-disk-releases) 88%, #ffffff 12%);
}

.sys-disk-seg--applications {
    background: color-mix(in srgb, var(--sys-disk-applications) 88%, #ffffff 12%);
}

.sys-disk-seg--journaux {
    background: color-mix(in srgb, var(--sys-disk-journaux) 88%, #ffffff 12%);
}

.sys-disk-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.15rem;
    margin: 0.7rem 0 0;
    padding: 0;
    list-style: none;
}

.sys-disk-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.84rem;
}

.sys-disk-legend-label {
    color: var(--text-muted);
}

.sys-disk-legend-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sys-disk-legend-pct {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.sys-disk-dot {
    display: inline-block;
    flex: none;
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    background: var(--sys-disk-autres);
}

.sys-disk-dot--medias {
    background: var(--sys-disk-medias);
}

.sys-disk-dot--instance {
    background: var(--sys-disk-instance);
}

.sys-disk-dot--bd {
    background: var(--sys-disk-bd);
}

.sys-disk-dot--sauvegardes {
    background: var(--sys-disk-sauvegardes);
}

.sys-disk-dot--releases {
    background: var(--sys-disk-releases);
}

.sys-disk-dot--applications {
    background: var(--sys-disk-applications);
}

.sys-disk-dot--journaux {
    background: var(--sys-disk-journaux);
}

.sys-disk-dot--libre {
    background: var(--sys-disk-libre);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent);
}

.sys-disk-table td:first-child .sys-disk-dot {
    margin-right: 0.45rem;
}

.sys-disk-note {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.sys-disk-children {
    display: grid;
    gap: 0.3rem;
    /* Bornée : la première colonne du tableau prend toute la largeur restante,
       sans quoi la barre de sous-poste se retrouverait loin de son libellé. */
    max-width: 36rem;
    margin: 0.55rem 0 0;
    padding: 0;
    list-style: none;
}

.sys-disk-children li {
    display: grid;
    grid-template-columns: minmax(6rem, 1fr) minmax(2.5rem, 6rem) auto;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
}

.sys-disk-child-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--text-muted);
}

.sys-disk-child-bar {
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 55%, transparent);
    overflow: hidden;
}

.sys-disk-child-bar > span {
    display: block;
    height: 100%;
    width: var(--sys-child-pct, 0%);
    border-radius: inherit;
    background: color-mix(in srgb, var(--sys-child-color, var(--accent)) 80%, transparent);
}

.sys-disk-children--medias {
    --sys-child-color: var(--sys-disk-medias);
}

.sys-disk-children--instance {
    --sys-child-color: var(--sys-disk-instance);
}

.sys-disk-children--bd {
    --sys-child-color: var(--sys-disk-bd);
}

.sys-disk-children--sauvegardes {
    --sys-child-color: var(--sys-disk-sauvegardes);
}

.sys-disk-children--releases {
    --sys-child-color: var(--sys-disk-releases);
}

.sys-disk-children--applications {
    --sys-child-color: var(--sys-disk-applications);
}

.sys-disk-children--journaux {
    --sys-child-color: var(--sys-disk-journaux);
}

.sys-disk-child-size {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sys-site-stats-wrap {
    margin-top: 1.1rem;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
    background:
        radial-gradient(circle at 6% 6%, color-mix(in srgb, var(--accent-soft) 20%, transparent) 0%, transparent 42%),
        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-site-stats-table {
    width: 100%;
}

.sys-site-stats-table thead th {
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.76rem;
}

.sys-site-stats-table th.num,
.sys-site-stats-table td.num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sys-site-stats-table tbody tr {
    transition: background var(--transition-fast);
}

.sys-site-stats-table tbody tr:hover {
    background: color-mix(in srgb, var(--accent-soft) 22%, transparent);
}

.sys-site-name {
    font-weight: 700;
}

.sys-site-slug {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.06rem 0.42rem;
    border-radius: 6px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.78rem;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--line) 38%, transparent);
}

.sys-num--zero {
    color: var(--text-muted);
    opacity: 0.5;
}

.sys-site-store-size {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sys-site-store-files {
    margin-left: 0.4rem;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-muted);
}

/* Hors école (plateforme, orphelins) : dans le pied de tableau mais distinct du
   total — ce sont des lignes de stockage, pas des écoles. */
.sys-site-unassigned td {
    border-top: 1px dashed color-mix(in srgb, var(--line) 85%, transparent);
    color: var(--text-muted);
}

.sys-site-stats-total td {
    border-top: 2px solid color-mix(in srgb, var(--accent) 40%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 15%, transparent);
    font-weight: 700;
}

.sys-site-stats-note {
    margin: 0.9rem 0 0;
    max-width: 74ch;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.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 {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--line) 78%, var(--accent) 22%);
    border-radius: 22px;
    padding: 1.25rem 1.3rem;
    background:
        radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--accent-soft) 20%, transparent) 0%, transparent 40%),
        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),
        inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent);
    transition: border-color var(--transition-medium), box-shadow var(--transition-medium),
                transform var(--transition-medium);
}

.admin-quick-card:hover {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    box-shadow:
        0 10px 26px color-mix(in srgb, var(--accent) 12%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
    transform: translateY(-3px);
}

.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 6px 18px color-mix(in srgb, var(--admin-quick-primary-border) 35%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 20%, transparent);
}

.admin-quick-card--primary:hover {
    border-color: color-mix(in srgb, var(--admin-quick-primary-border) 88%, var(--accent) 12%);
    box-shadow:
        0 12px 30px color-mix(in srgb, var(--admin-quick-primary-border) 45%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent);
    transform: translateY(-3px);
}

.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.6rem;
    min-height: 2.6rem;
    padding: 0.45rem 0.6rem;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--line) 60%, var(--accent) 40%);
    background: color-mix(in srgb, var(--accent-soft) 42%, var(--bg-elevated));
    color: var(--dashboard-title-emphasis);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent);
    transition: all var(--transition-fast);
}

.admin-quick-card:hover .admin-quick-card__count {
    transform: scale(1.05);
}

.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);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 45%, transparent),
        0 2px 8px rgba(0, 0, 0, 0.16);
}

.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.34rem 0.72rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent) 18%);
    background: color-mix(in srgb, var(--bg-elevated) 62%, var(--accent-soft) 38%);
    color: var(--muted);
    font-size: 0.81rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    cursor: default;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
    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;
    margin-top: auto;
    padding: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--line) 68%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-elevated) 60%, var(--accent-soft) 40%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent);
    transition: all var(--transition-fast);
}

.admin-quick-card--primary .admin-quick-card__actions {
    background: var(--admin-quick-primary-actions-bg);
    border-color: var(--admin-quick-primary-actions-border);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 14%, transparent);
}

.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;
    /* En plus du chrome du site : la barre de saut entre domaines, collée juste
       sous l'en-tête (`.admin-hub-jump-nav`). */
    scroll-margin-top: 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;
}

/* Services encore à configurer (hub « Paramètres ») : liste compacte de puces
   cliquables vers chaque réglage manquant, teinte « en attente » (orange). */
.admin-hub-config-pending {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-top: 0.7rem;
}

.admin-hub-config-pending__label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--brand-orange) 78%, var(--text));
}

.admin-hub-config-pending__label i {
    font-size: 0.95rem;
}

.admin-hub-config-pending__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.admin-config-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--brand-orange) 42%, var(--line));
    background: color-mix(in srgb, var(--brand-orange) 12%, var(--bg-elevated));
    color: color-mix(in srgb, var(--brand-orange) 30%, var(--text));
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.admin-config-chip:hover,
.admin-config-chip:focus-visible {
    border-color: color-mix(in srgb, var(--brand-orange) 68%, var(--line));
    background: color-mix(in srgb, var(--brand-orange) 20%, var(--bg-elevated));
    color: color-mix(in srgb, var(--brand-orange) 12%, var(--text));
}

.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: 0;
    padding: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.2s ease, padding 0.2s ease;
}

/* Padding latéral et bas (compensé par des marges négatives pour garder
   l'alignement) : laisse respirer l'anneau box-shadow des boutons
   .module-locked-highlight, sinon rogné par l'overflow: hidden */
.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: 0.35rem -0.35rem 0;
    padding: 0.45rem 0.35rem 0.4rem;
}

/* Cascade des boutons à la révélation : montée avec léger rebond, décalée
   bouton par bouton. Délai nul au repos pour une rétraction simultanée. */
.admin-hub-more .button {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition: opacity 200ms ease, transform var(--transition-medium);
}

.admin-hub-card:hover .admin-hub-more .button,
.admin-hub-card:focus-within .admin-hub-more .button,
.admin-hub-card.is-search-match .admin-hub-more .button {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.admin-hub-card:hover .admin-hub-more .button:nth-child(2),
.admin-hub-card:focus-within .admin-hub-more .button:nth-child(2),
.admin-hub-card.is-search-match .admin-hub-more .button:nth-child(2) {
    transition-delay: 50ms;
}

.admin-hub-card:hover .admin-hub-more .button:nth-child(3),
.admin-hub-card:focus-within .admin-hub-more .button:nth-child(3),
.admin-hub-card.is-search-match .admin-hub-more .button:nth-child(3) {
    transition-delay: 100ms;
}

.admin-hub-card:hover .admin-hub-more .button:nth-child(n+4),
.admin-hub-card:focus-within .admin-hub-more .button:nth-child(n+4),
.admin-hub-card.is-search-match .admin-hub-more .button:nth-child(n+4) {
    transition-delay: 150ms;
}

@media (hover: none), (max-width: 960px) {
    .admin-hub-more {
        max-height: none;
        opacity: 1;
        pointer-events: auto;
        margin: 0.35rem -0.35rem 0;
        padding: 0.45rem 0.35rem 0.4rem;
        transition: none;
    }

    /* Bloc toujours visible : les boutons ne doivent jamais rester masqués */
    .admin-hub-more .button {
        opacity: 1;
        transform: none;
        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(--dojo-sticky-offset, 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 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    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: background var(--transition-medium), border-color var(--transition-medium),
        transform var(--transition-medium), box-shadow var(--transition-medium),
        opacity var(--transition-medium), max-height var(--transition-medium),
        padding 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);
}

/* Le corps cliquable de la carte (l'ancienne carte entière était le lien). */
.admin-next-action__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    font: inherit;
    text-decoration: none;
}

.admin-next-action__label {
    min-width: 0;
}

/* Bouton « × » d'ignorance, discret puis marqué au survol de la carte. */
.admin-next-action__dismiss {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    padding: 0;
    line-height: 1;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid transparent;
    background: transparent;
    color: color-mix(in srgb, var(--text) 45%, transparent);
    opacity: 0.55;
    transition: all var(--transition-fast);
}

.admin-next-action:hover .admin-next-action__dismiss,
.admin-next-action:focus-within .admin-next-action__dismiss {
    opacity: 1;
}

.admin-next-action__dismiss:hover,
.admin-next-action__dismiss:focus-visible {
    opacity: 1;
    color: var(--text);
    background: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
    border-color: color-mix(in srgb, var(--line) 80%, transparent);
    transform: scale(1.08);
}

/* Retrait animé (collapse) quand une suggestion est ignorée. */
.admin-next-action--dismissing {
    overflow: hidden;
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateX(16px);
    pointer-events: none;
    box-shadow: none;
}

.admin-next-actions.is-empty {
    display: none;
}

/* Lien « Réafficher les suggestions ignorées ». */
.admin-next-actions__restore {
    margin-top: 0.85rem;
    display: flex;
    justify-content: center;
}

.admin-next-actions__restore-btn {
    border: 1px dashed color-mix(in srgb, var(--accent) 32%, var(--line));
    background: transparent;
    color: var(--muted);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.admin-next-actions__restore-btn:hover,
.admin-next-actions__restore-btn:focus-visible {
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 30%, transparent);
}

/* Info-bulle « i » listant les types de tâches de la carte. */
.next-actions-info {
    flex: 0 0 auto;
    align-self: flex-start;
}

.next-actions-info__list {
    margin: 0.45rem 0 0;
    padding-left: 1.05rem;
    display: grid;
    gap: 0.25rem;
}

.next-actions-info__hint {
    margin: 0.55rem 0 0;
    color: var(--muted);
    font-size: 0.76rem;
}

.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;
    }

    /* ⚠️ Contrat de la poignée partagée (.drag-handle) : un conteneur qui change
       le padding ou l'arrondi de la carte DOIT redéclarer ces variables. Sans
       ça, une carte triable gardait les valeurs de `.sortable-item` (0.85/0.95rem,
       coin 14px) alors qu'elle est peinte en 1.15/1.2rem et 24px : la poignée
       s'arrêtait à 5px du bord au lieu de s'y coller, avec un coin plus serré
       que celui de la carte. */
    .is-admin .sortable-item.content-card {
        --handle-inset-y: 1.15rem;
        --handle-inset-x: 1.2rem;
        --handle-radius: 24px 0 0 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(calc(400px * var(--toast-scale, 1)), calc(100vw - 2rem));
        min-height: 60px;
    }

    /* Les cartes s'ancrent en haut du conteneur et empilent vers le bas, façon pile de feuilles */
    .dojo-toast-card {
        top: 0;
        bottom: auto;
        left: 0;
        right: auto;
        width: 100%;
        transform-origin: center;
        /* Empiler vers le bas (positif) au lieu de vers le haut (négatif) ; translate/rotate/scale
           distincts de "transform" (voir règle de base) pour ne pas être écrasés par l'animation d'entrée */
        translate: calc(var(--toast-stack-index) * 10px) calc(var(--toast-stack-index) * 22px);
        rotate: calc(var(--toast-stack-index) * 2.5deg);
        scale: calc(1 - var(--toast-stack-index) * 0.05);
        animation-name: dojo-toast-in-top, dojo-toast-halo-pulse;
    }

    .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;
        /* animation-name seul : conserve durées/délais du raccourci de base,
           dont la secousse d'erreur déclarée hors media query */
        animation-name: dojo-toast-in-top, dojo-toast-error-shake, dojo-toast-halo-pulse;
    }

    .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 {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
        filter: blur(4px);
    }
    55% {
        opacity: 1;
        transform: translateY(6px) scale(1.035);
        filter: blur(0);
    }
    80% {
        transform: translateY(-2px) scale(0.99);
    }
    100% {
        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;
    }

}

@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 ───────────────────────────────
   Les badges de statut (pending, confirmed, canceled, …) sont regroupés
   dans le système unifié « teinte-graine » plus bas. Ici : uniquement la
   famille « déjà inscrit » (badges pleins) et la pastille d'alerte. */

.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);
}

/* ── Pastille « attention » actionnable (avis d'en-tête des hubs admin) ──
   Remplace la pastille orange plate et passive par une puce cliquable qui
   mène droit à la page à compléter : point clignotant discret (attention),
   dégradé + halo pour du relief, chevron révélé au survol. */
.hub-alert-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.42rem 0.78rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: color-mix(in srgb, var(--brand-orange) 68%, #3a1c00);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--brand-orange) 24%, var(--accent-soft)),
            color-mix(in srgb, var(--brand-orange) 13%, var(--accent-soft)));
    border: 1.2px solid color-mix(in srgb, var(--brand-orange) 46%, var(--line));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 34%, transparent),
        0 3px 12px color-mix(in srgb, var(--brand-orange) 18%, transparent);
    transition: transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast);
}

.hub-alert-badge:hover,
.hub-alert-badge:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--brand-orange) 66%, var(--line));
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--brand-orange) 30%, var(--accent-soft)),
            color-mix(in srgb, var(--brand-orange) 17%, var(--accent-soft)));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 40%, transparent),
        0 6px 18px color-mix(in srgb, var(--brand-orange) 30%, transparent);
    outline: none;
}

.hub-alert-badge__pulse {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--brand-orange);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-orange) 55%, transparent);
    animation: hub-alert-pulse 2.1s ease-out infinite;
}

@keyframes hub-alert-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-orange) 52%, transparent); }
    70% { box-shadow: 0 0 0 0.55rem color-mix(in srgb, var(--brand-orange) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-orange) 0%, transparent); }
}

.hub-alert-badge__chevron {
    flex: 0 0 auto;
    opacity: 0.5;
    transform: translateX(-3px);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.hub-alert-badge:hover .hub-alert-badge__chevron,
.hub-alert-badge:focus-visible .hub-alert-badge__chevron {
    opacity: 0.85;
    transform: translateX(0);
}

html[data-theme="dark"] .hub-alert-badge,
html[data-theme="vampire"] .hub-alert-badge {
    color: color-mix(in srgb, var(--brand-orange) 86%, #ffffff 14%);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--brand-orange) 32%, transparent),
            color-mix(in srgb, var(--brand-orange) 15%, transparent));
    border-color: color-mix(in srgb, var(--brand-orange) 52%, var(--line));
}

html[data-theme="dark"] .hub-alert-badge:hover,
html[data-theme="dark"] .hub-alert-badge:focus-visible,
html[data-theme="vampire"] .hub-alert-badge:hover,
html[data-theme="vampire"] .hub-alert-badge:focus-visible {
    border-color: color-mix(in srgb, var(--brand-orange) 70%, var(--line));
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--brand-orange) 40%, transparent),
            color-mix(in srgb, var(--brand-orange) 20%, transparent));
}

@media (prefers-reduced-motion: reduce) {
    .hub-alert-badge__pulse { animation: none; }
    .hub-alert-badge,
    .hub-alert-badge__chevron { transition: none; }
}

html[data-theme="dark"] .badge-already-registered,
html[data-theme="vampire"] .badge-already-registered {
    color: color-mix(in srgb, #8ff0cb 90%, #ffffff 10%);
}

/* ── Badges de statut : système unifié « teinte-graine » ──────────────
   Chaque variante ne déclare qu'UNE couleur-graine (--badge-seed). Le fond,
   la bordure et le texte en sont dérivés par color-mix selon des ratios
   identiques → poids visuel homogène d'une variante à l'autre.
   Le fond est mixé dans --bg-elevated (surface NEUTRE, pas --accent-soft) :
   ainsi la teinte-graine se lit vraie et chaque statut se distingue par sa
   couleur de remplissage — sinon, sur un thème coloré (accent-soft bleuté,
   sunset ambré…), toutes les pastilles se fondaient dans l'accent et seul le
   texte les différenciait. Comme fond ET texte sont tirés vers les jetons du
   thème (--bg-elevated / --text), la lisibilité s'aligne toujours sur le
   thème : lisible tel quel dans TOUS les thèmes (clair, sombre, aurora,
   sunset, paper-ink, vampire) et leurs variantes accessibilité — plus aucune
   surcharge par thème.
   Les graines sont choisies pour un écart de teinte maximal entre statuts
   proches : orange vif (en attente) vs bronze (fermée), indigo (partiel) vs
   sarcelle (importée), gris neutre (brouillon) vs bleu-ardoise (terminée).
   Paires volontairement identiques (même sens) : succès=confirmée (vert),
   danger=annulée (rouge). */
.badge-success,
.badge-danger,
.badge-pending,
.badge-confirmed,
.badge-partial,
.badge-imported,
.badge-canceled,
.badge-brouillon,
.badge-fermee,
.badge-terminee,
.badge-mixed {
    background: color-mix(in srgb, var(--badge-seed) 24%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--badge-seed) 52%, var(--line));
    color: color-mix(in srgb, var(--badge-seed) 72%, var(--text));
}

.badge-success   { --badge-seed: #1f9d57; }               /* vert         */
.badge-confirmed { --badge-seed: #1f9d57; }               /* vert         */
.badge-danger    { --badge-seed: var(--brand-red); }      /* rouge        */
.badge-canceled  { --badge-seed: var(--brand-red); }      /* rouge        */
.badge-pending   { --badge-seed: var(--brand-orange); }   /* orange vif   */
.badge-fermee    { --badge-seed: #a86a1e; }               /* bronze       */
.badge-partial   { --badge-seed: #3b62d6; }               /* indigo       */
.badge-imported  { --badge-seed: #0d9aa8; }               /* sarcelle     */
.badge-mixed     { --badge-seed: #8b5cf6; }               /* violet       */
.badge-brouillon { --badge-seed: #8a8f99; }               /* gris neutre  */
.badge-terminee  { --badge-seed: #5b6b8c; }               /* bleu-ardoise */

.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;
}

/* Panneau replié + filtres posés : la phrase générique (« Affiner la liste
   par… ») laisse croire qu'aucun filtre n'agit. Le décompte prend sa place et
   se signale comme un état, pas comme une consigne. */
.filter-collapse__meta--active {
    padding: 0.16rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
    color: var(--accent-strong);
    font-weight: 600;
    white-space: nowrap;
}

.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;
}

/* Variante « section » : replie une sous-section entière (eyebrow + titre de niveau h2) */
.filter-collapse--section .filter-collapse__summary {
    padding: 0.85rem 1.05rem;
}

.filter-collapse--section .filter-collapse__heading {
    display: grid;
    gap: 0.15rem;
}

.filter-collapse--section .filter-collapse__heading .eyebrow {
    margin: 0;
}

.filter-collapse--section .filter-collapse__title {
    font-family: var(--font-title);
    font-size: 1.2rem;
    line-height: 1.25;
}

.filter-collapse--section .filter-collapse__body {
    padding: 0 1.05rem 1.05rem;
}

.filter-collapse--section .filter-collapse__body > * + * {
    margin-top: 0.6rem;
}

@media (max-width: 960px) {
    .filter-collapse__summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    /* Le résumé replié a trois éléments : titre, phrase d'aide et chevron
       (`::after`). Une fois la phrase passée en pleine largeur, le chevron —
       dernier de la rangée — était renvoyé seul sur une TROISIÈME ligne, à
       gauche, où il ne se lit plus comme l'indicateur d'ouverture du panneau.
       On le remonte à droite du titre et on laisse la phrase passer dessous. */
    .filter-collapse__meta {
        order: 3;
        width: 100%;
        text-align: left;
    }

    .filter-collapse__summary::after {
        order: 2;
        margin-left: auto;
    }
}

@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;
}

.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;
    }

}

/* ── Contrôle segmenté de filtre (listes admin) ────────────────
   Une famille de filtre = UN groupe. Les puces vivent dans un rail commun
   (fond légèrement creusé) plutôt qu'en boutons flottants indépendants : c'est
   ce qui dit visuellement « choisis-en un ici », et ce qui distingue deux
   familles voisines dont les libellés se ressemblent (« Annulées » pour le
   statut, « Annulé » pour le paiement). Partagé avec la barre de vue
   d'archivage (`admin/_archive_controls.html`). */
.status-filter-bar {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: center;
    gap: 0.15rem;
    padding: 0.22rem;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 999px;
    /* Teinte prise sur le TEXTE, pas sur un fond nommé : le rail doit se
       creuser aussi bien sur une carte claire que sur une carte sombre, et
       `--bg` y est trop proche du fond de la carte pour se voir. */
    background: color-mix(in srgb, var(--text) 5%, transparent);
}

.status-filter-bar a {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.8rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.85rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--text-muted) 78%, var(--text) 22%);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.status-filter-bar a:hover {
    background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
    color: color-mix(in srgb, var(--accent-strong) 80%, var(--text) 20%);
}

.status-filter-bar a.is-active {
    background: color-mix(in srgb, var(--accent-soft) 85%, transparent);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    color: var(--accent-strong);
}

/* Barre « filtre de vue + raccourci archivage » (groupes) : tout tient sur une
   seule ligne. .compact-actions met flex-wrap/justify-content:flex-end par
   défaut, ce qui pousse tout à droite ; on force une seule ligne alignée à
   gauche. */
.admin-session-list-actions {
    flex-wrap: nowrap;
    justify-content: flex-start;
}

/* Hauteur forcée identique (44px, le minimum tactile) sur le rail segmenté et
   le bouton raccourci : sans ça chaque composant garde sa hauteur naturelle
   (paddings différents) et le centrage vertical seul laisse des tailles
   visiblement inégales sur la même ligne. */
.admin-session-list-actions .status-filter-bar,
.admin-session-list-actions > .button {
    height: 44px;
}

@media (max-width: 960px) {
    .admin-session-list-actions {
        flex-wrap: wrap;
    }
}

/* ── 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;
    }

    /* Contenu du 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%);
}

/* La page courante était rendue exactement comme les autres numéros (badge
   transparent) : rien ne disait où on se trouvait. Même vocabulaire visuel que
   la puce active d'un filtre segmenté. */
.list-pagination__current {
    min-width: 2rem;
    justify-content: center;
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 85%, transparent);
    color: var(--accent-strong);
    font-weight: 700;
}

.list-pagination .list-pagination__current {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 85%, transparent);
    color: var(--accent-strong);
}

.list-pagination__gap {
    padding-inline: 0.15rem;
    color: var(--text-muted);
}

@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;
}

/* ── Barre d'outils d'une liste admin ──────────────────────────
   Filtres rapides, compteur, pagination et actions de liste tenaient sur trois
   bandes empilées, chacune alignée différemment (puces à gauche, vue à droite,
   titre « Résultats » en split) : trois rythmes visuels pour une seule
   fonction. Ici, un seul bloc — les FILTRES en haut (une ligne par famille
   nommée), l'ÉTAT de la liste en bas (combien, quelle page, quelles actions),
   séparés par un filet. */
.list-toolbar {
    display: grid;
    /* minmax(0, …) et non `auto` : une piste `auto` se dimensionne sur le
       contenu MINIMUM de ses enfants, donc un rail de filtres large débordait
       la carte (et faisait défiler la page entière à l'horizontale) au lieu de
       défiler lui-même. */
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
    margin-top: 0.15rem;
}

.list-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.35rem;
}

/* Une famille de filtre : son nom, puis ses puces. Nommer la famille est ce
   qui rend « Annulées » (statut) et « Annulé » (paiement) lisibles côte à
   côte — un simple séparateur vertical laissait deviner. */
.filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.filter-group__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.list-toolbar__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    padding-top: 0.7rem;
    border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
}

/* Pied de liste : même barre, filet AU-DESSUS du tableau côté haut, en dessous
   côté bas — la liste se referme sur le même repère qu'elle a ouvert. */
.list-toolbar--footer {
    margin-top: 0.9rem;
}

.list-toolbar__count {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.list-toolbar__count strong {
    color: var(--text);
}

.list-toolbar__count-sep {
    margin-inline: 0.3rem;
    opacity: 0.6;
}

/* La pagination prend la place restante et se centre ; les actions restent
   collées à droite quelle que soit la largeur du compteur. */
.list-toolbar .registrations-pagination {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0;
}

.list-toolbar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

.list-toolbar__actions form {
    margin: 0;
}

/* ── Puces de filtres actifs ───────────────────────────────────
   Pendant visuel de `app/admin_list_filters.py` : le panneau de filtres étant
   replié par défaut, ces puces sont le seul endroit où l'on voit CE qui filtre
   la liste — et chacune se retire d'un clic, sans emporter les autres. */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.8rem;
}

.active-filters__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.active-filters__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 22rem;
    padding: 0.28rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
    font-size: 0.82rem;
    color: var(--text);
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.active-filters__chip:hover {
    background: color-mix(in srgb, var(--accent-soft) 90%, transparent);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.active-filters__chip-label {
    color: var(--text-muted);
}

.active-filters__chip-value {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-filters__chip .ph {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.active-filters__chip:hover .ph {
    color: var(--accent-strong);
}

.active-filters__clear {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-strong);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 720px) {
    .list-toolbar__filters {
        gap: 0.55rem;
    }

    .filter-group {
        width: 100%;
    }

    /* Le rail défile plutôt que de se replier : une famille reste UNE ligne.
       En repli, la dernière puce (« Remboursées ») occupait seule toute une
       ligne — elle avait l'air d'un bouton d'action, pas d'un choix parmi
       cinq. Les puces gardent donc leur largeur naturelle ici, malgré le
       `flex: 1 1 auto` que le mobile pose sur les barres hors filter-group. */
    .filter-group .status-filter-bar {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .filter-group .status-filter-bar::-webkit-scrollbar {
        display: none;
    }

    .filter-group .status-filter-bar a {
        flex: 0 0 auto;
    }

    /* Le décompte de filtres est une pastille, pas un bandeau : la règle
       mobile de `.filter-collapse__meta` (width: 100%) l'étirait sur toute
       la largeur du panneau. */
    .filter-collapse__meta--active {
        width: fit-content;
    }

    .list-toolbar .registrations-pagination {
        order: 3;
        width: 100%;
        justify-content: flex-start;
    }

    .list-toolbar__actions {
        margin-left: 0;
    }
}

/* ── 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 .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 .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;
}

/* Colonne de droite du profil : une liste de portes d'entrée vers les écrans
   qui portent le contenu (famille, préférences, notifications, avantages).
   Les rangées se touchent — un filet les sépare, pas un espacement : la carte
   se lit comme un menu, pas comme quatre encarts empilés. */
.profile-links-card {
    display: grid;
    gap: 0.5rem;
}

.profile-links {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: grid;
}

.profile-links > li + li {
    border-top: 1px solid var(--border);
}

.profile-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.35rem;
    border-radius: 0.6rem;
    color: inherit;
    text-decoration: none;
    transition: background-color 120ms ease, transform 120ms ease;
}

.profile-link:hover,
.profile-link:focus-visible {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    text-decoration: none;
}

.profile-link__icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    color: var(--accent);
}

.profile-link__text {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.profile-link__text strong {
    font-size: 0.92rem;
    line-height: 1.3;
}

.profile-link__text > span {
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--text-muted);
}

.profile-link__chevron {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 120ms ease;
}

.profile-link:hover .profile-link__chevron {
    transform: translateX(2px);
}

/* Écrans regroupés (« Mes préférences », « Cartes-cadeaux et référencement ») :
   plusieurs réglages par carte, séparés par un filet plutôt que par une carte
   chacun — c'est exactement ce que le profil avait de trop. */
.profile-settings-page .content-card > .table-heading h2 {
    font-size: 1.15rem;
    line-height: 1.25;
    margin: 0;
}

.profile-settings-page .content-card > .table-heading p {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* Sur une pleine largeur, un champ de code étiré sur 1 800 px et son bouton
   rejeté à la ligne se lisent mal : la saisie garde une largeur de formulaire. */
.profile-settings-page .input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 32rem;
}

.profile-settings-page .input-group .form-input {
    flex: 1 1 auto;
    min-width: 0;
}

.profile-settings-page .input-group .button {
    flex: 0 0 auto;
}

.profile-settings-page .profile-gift-card-list,
.profile-settings-page .profile-referral-details,
.profile-settings-page .profile-referral-link-row {
    max-width: 32rem;
}

/* Le bouton « Générer un lien » s'étirait sur toute la colonne : réglé pour la
   barre latérale étroite, cette pleine largeur n'a plus de sens sur une page. */
.profile-settings-page .profile-referral-generate .button {
    width: auto;
}

/* Le vide de ces cartes est une bonne nouvelle (« aucun blocage ») : il n'a pas
   à occuper la hauteur d'une page vide. */
.profile-settings-page .empty-state {
    padding: 1.1rem 0.5rem;
}

.profile-settings-page .empty-state p {
    margin: 0;
    font-size: 0.9rem;
}

/* Le libellé d'un réglage prend la largeur restante : l'interrupteur ne se
   dimensionne que sur sa piste. Sans ça, sur un écran étroit, les deux se
   partageaient la ligne à parts presque égales et « Permission d'utilisation
   d'image » tombait sur trois lignes à côté d'un interrupteur entouré de vide. */
.profile-settings-page .inline-toggle-row > .ui-toggle {
    /* Sous 960 px, `.ui-toggle` passe en `width: 100%` pour les interrupteurs
       posés seuls dans un formulaire ; dans une rangée à deux colonnes cette
       largeur mange tout le libellé. */
    flex: 0 0 auto;
    width: auto;
}

.profile-settings-page .inline-toggle-row__text {
    flex: 1 1 auto;
    min-width: 0;
}

.profile-settings-page .settings-row + .settings-row {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}

/* `:first-of-type` ne servirait à rien ici : le titre de section est un `div`
   comme les rangées, il est donc « le premier de son type ». */
.profile-settings-page .table-heading + .settings-row {
    margin-top: 0.8rem;
}

.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;
}

.family-certification-examples {
    margin-top: 0.15rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm, 0.4rem);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    line-height: 1.5;
}
.family-certification-examples strong {
    color: var(--text);
}

.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;
}

/* Bouton + état de sauvegarde sur une seule ligne, SOUS les champs.
   ⚠️ Ne pas remettre `grid-template-columns` sur le formulaire : il a porté
   `minmax(0, 1fr) auto` pour coller le bouton à droite des champs, mais ses
   enfants sont des grilles de champs — la deuxième s'installait dans la piste
   `auto` prévue pour le bouton, et « Mot de passe actuel » se retrouvait à
   ~108 px de large (valeur illisible dès qu'on l'affiche, alors que c'est
   justement le champ qu'on relit quand la connexion est refusée). */
.password-security-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.password-security-actions .autosave-status {
    margin: 0;
}

@media (min-width: 641px) {
    .profile-password-section .password-security-form .submit-button {
        width: auto;
        white-space: nowrap;
        margin-bottom: 0;
    }
}

.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__qr-wrap {
    position: relative;
    display: inline-flex;
    container-type: inline-size;
    line-height: 0;
}

.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__avatar {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23cqw;
    height: 23cqw;
    border-radius: 24%;
    background: #ffffff;
    border: 2px solid color-mix(in srgb, var(--accent) 55%, #ffffff);
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.22);
    font-size: 13cqw;
    line-height: 1;
    user-select: none;
}

.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;
}

/* Boutons « Ajouter à un portefeuille mobile » (Apple Wallet / Google Wallet) */
.attendance-qr-card__wallet {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border, rgba(0, 0, 0, 0.08));
    display: grid;
    gap: 0.6rem;
    justify-items: center;
}

.attendance-qr-card__wallet-title {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.attendance-qr-card__wallet-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

.wallet-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 1.1rem;
    border-radius: 0.7rem;
    background: #000;
    color: #fff;
    text-decoration: none;
    line-height: 1.1;
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.wallet-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.wallet-badge .ph {
    font-size: 1.5rem;
}

.wallet-badge__text {
    display: flex;
    flex-direction: column;
    font-size: 1.02rem;
    font-weight: 600;
    text-align: left;
}

.wallet-badge__text small {
    font-size: 0.68rem;
    font-weight: 500;
    opacity: 0.82;
    letter-spacing: 0.02em;
}

.wallet-badge--google {
    background: #fff;
    color: #3c4043;
    border-color: rgba(60, 64, 67, 0.24);
}

.wallet-badge--google .ph-google-logo {
    color: #4285f4;
}

.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-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.attendance-scan-controls {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.attendance-toggle-group {
    display: grid;
    gap: 0.45rem;
}

.attendance-camera-bar {
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    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;
    pointer-events: none;
}

.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;
    cursor: pointer;
}

.attendance-camera-wrap:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.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-cue {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--accent) 72%, #ffffff);
}

.attendance-camera-cue i {
    font-size: clamp(4.5rem, 12vw, 7rem);
    line-height: 1;
    opacity: 0.9;
    filter: drop-shadow(0 2px 10px color-mix(in srgb, #000000 45%, transparent));
    animation: attendance-cue-pulse 2.2s ease-in-out infinite;
}

@keyframes attendance-cue-pulse {
    0%, 100% { transform: scale(1); opacity: 0.78; }
    50% { transform: scale(1.08); opacity: 1; }
}

.attendance-camera-wrap[data-state="running"] .attendance-camera-cue {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .attendance-camera-cue i {
        animation: none;
    }
}

.attendance-camera-state {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    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:empty {
    display: none;
}

.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 {
    display: grid;
    gap: 0.3rem;
}

.attendance-recent-item__name {
    font-size: 0.98rem;
    line-height: 1.25;
}

.attendance-recent-item__course {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--accent) 78%, var(--text));
}

.attendance-recent-item__course i {
    font-size: 0.95em;
    opacity: 0.9;
}

.attendance-recent-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.85rem;
    color: var(--muted);
    font-size: 0.82rem;
}

.attendance-recent-item__time,
.attendance-recent-item__source {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.attendance-recent-item__meta i {
    font-size: 0.95em;
    opacity: 0.85;
}

@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-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;
    animation: cal-legend-overlay-fade-in 190ms ease;
}

@keyframes cal-legend-overlay-fade-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cal-legend-panel.is-open .cal-legend-panel__overlay {
        animation: none;
    }
}

.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 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 45;
}

.cal-month-heading__legend-slot[hidden] {
    display: 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: 0.5rem 1.05rem;
}

.calendar-page .cal-month-heading__legend-slot .cal-legend-panel--static .cal-legend-panel__toggle {
    display: inline-flex;
    min-height: 0;
    height: auto;
    width: max-content;
    min-width: 0;
    padding: 0;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    line-height: 1;
    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 {
    animation: cal-legend-month-inline-snap 240ms ease both;
}

@keyframes cal-legend-month-inline-snap {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-page .cal-month-heading__legend-slot .cal-legend-panel.is-month-snap {
        animation: none;
    }
}

@media (max-width: 960px) {
    .cal-month-heading {
        flex-direction: column;
        align-items: stretch;
    }

    .cal-month-heading__legend-slot {
        position: static;
        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, 0px) 0 0 0;
    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;
    transform: none;
    transition: none;
}

.assistant-widget.is-fullscreen .assistant-orb {
    display: none;
}

.assistant-widget.is-fullscreen .assistant-panel {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    animation: assistant-fullscreen-panel-in 240ms ease-out;
}

@keyframes assistant-fullscreen-panel-in {
    from {
        opacity: 0.55;
        transform: scale(0.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .assistant-widget.is-fullscreen .assistant-panel {
        animation: none;
    }
}

/* Conversation en colonne centrée, lisible sur grand écran */
.assistant-widget.is-fullscreen .assistant-messages {
    padding-inline: max(0.95rem, calc((100% - 52rem) / 2));
    /* La zone est bien plus haute qu'en panneau : sans ceci, la grille
       étire bulles et suggestions pour combler la hauteur libre. */
    align-content: start;
}

.assistant-widget.is-fullscreen .assistant-form {
    padding-inline: max(0.75rem, calc((100% - 52rem) / 2));
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 641px) {
    .assistant-widget.is-fullscreen .assistant-messages {
        padding-block: 1.4rem;
        gap: 0.9rem;
    }

    .assistant-widget.is-fullscreen .assistant-message {
        font-size: 1rem;
        max-width: 82%;
    }
}

/* Le panneau couvre la page : on fige seulement le défilement en dessous */
body.assistant-fullscreen-mode {
    overflow: hidden;
}

.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);
}

.assistant-action-icon[hidden] {
    display: none;
}

.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;
}

/* Plan d'actions de l'assistant admin — proposé, coché, puis exécuté.
   La même carte sert de compte rendu après l'exécution (`.is-done`) : garder
   deux blocs distincts ferait perdre le lien entre ce qui a été proposé et ce
   qui a été fait. */
.assistant-plan {
    margin: 0.35rem 0 0.15rem;
    padding: 0.6rem 0.7rem;
    border-radius: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
    background: color-mix(in srgb, var(--bg-elevated) 92%, var(--accent-soft));
}

.assistant-plan-head {
    margin: 0 0 0.45rem;
    font-size: 0.74rem;
    font-weight: 720;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--accent-strong) 88%, var(--text));
}

.assistant-plan-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.assistant-plan-step {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}

.assistant-plan-check {
    margin-top: 0.16rem;
    flex: 0 0 auto;
    accent-color: var(--accent);
    cursor: pointer;
}

.assistant-plan-check:disabled {
    cursor: not-allowed;
}

.assistant-plan-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.78rem;
    line-height: 1.32;
    cursor: pointer;
}

.assistant-plan-step.is-refuse .assistant-plan-body {
    cursor: default;
    opacity: 0.72;
}

.assistant-plan-step-label {
    font-weight: 620;
    color: var(--text);
}

.assistant-plan-step-detail {
    font-size: 0.73rem;
    color: var(--muted);
}

.assistant-plan-step-reason {
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--danger-strong) 82%, var(--text));
}

.assistant-plan-step-warning {
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--warning) 30%, var(--text));
}

.assistant-plan-step.is-sans_effet .assistant-plan-step-detail {
    font-style: italic;
}

.assistant-plan-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.55rem;
}

.assistant-plan-note {
    font-size: 0.7rem;
    color: var(--muted);
}

.assistant-plan-run.is-sending {
    opacity: 0.72;
    pointer-events: none;
}

.assistant-plan-report {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.assistant-plan-report-row {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.76rem;
    line-height: 1.3;
    color: var(--text);
}

.assistant-plan-report-icon {
    flex: 0 0 auto;
    font-weight: 760;
}

.assistant-plan-report-row.is-fait .assistant-plan-report-icon {
    color: color-mix(in srgb, var(--success-strong) 86%, var(--text));
}

.assistant-plan-report-row.is-erreur .assistant-plan-report-icon {
    color: color-mix(in srgb, var(--danger-strong) 86%, var(--text));
}

.assistant-plan-report-row.is-ignore {
    color: var(--muted);
}

.assistant-plan.is-done {
    border-color: color-mix(in srgb, var(--success) 52%, var(--line));
    background: color-mix(in srgb, var(--bg-elevated) 94%, var(--success));
}

/* 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 — « étincelles » (source unique) =====
   Composition en quatre couches, pensée pour être organique et non mécanique :
   un noyau et un halo qui se DÉFORMENT en dérivant (blobs morphants, pas des
   disques qui pulsent), deux arcs dégradés concentriques en CONTRE-rotation à
   vitesse irrégulière, et six étoiles qui s'allument en dérivant vers
   l'extérieur.

   ⚠️ Le rendu organique tient à une seule règle : **aucune durée n'est
   multiple d'une autre** (7,3 / 5,1 / 4,7 / 6,7 s et 2,9 à 4,3 s pour les
   étoiles). Les couches ne se réalignent donc qu'après plusieurs minutes :
   l'œil ne perçoit aucune boucle. Harmoniser ces durées « pour faire propre »
   rendrait aussitôt l'animation mécanique — c'est le piège à éviter ici.
   Même logique dans les keyframes : les étapes sont volontairement
   irrégulières (27 %, 53 %, 78 %…) pour que rien ne tourne à vitesse
   constante.

   Le markup reste celui d'origine (.ai-gen-loader__orbs > __orb--1/2/3 + __ring),
   répliqué dans une vingtaine de gabarits et injecté par
   static/js/ai_button_loader.js : changer l'animation ici la change partout.
   Les douze couches peintes viennent des pseudo-éléments, pas du HTML.

   ⚠️ Un seul réglage dimensionne la composition : --ai-loader-size. Les
   keyframes ne travaillent qu'en transform/opacity/border-radius (aucune
   dimension en dur), donc la version bouton n'a qu'à redéfinir cette
   variable — pas de jeu de keyframes par format. */
.ai-gen-loader {
    --ai-loader-size: 80px;
    --ai-loader-ring-width: 3px;
    --ai-loader-c1: #6366f1;   /* indigo */
    --ai-loader-c2: #a855f7;   /* violet */
    --ai-loader-c3: #ec4899;   /* rose */
    /* Durées premières entre elles — voir l'avertissement ci-dessus. */
    --ai-dur-halo: 7.3s;
    --ai-dur-core: 5.1s;
    --ai-dur-arc-out: 4.7s;
    --ai-dur-arc-in: 6.7s;
    /* Interrupteur de mouvement : 1 = animé, 0 = composition figée. Toutes les
       durées sont multipliées par lui et toutes les opacités de repos en
       dérivent, si bien que l'état figé n'est écrit qu'UNE fois — la media
       query « mouvement réduit » et l'aperçu du design système se contentent
       de poser 0. */
    --ai-motion: 1;
    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: var(--ai-loader-size);
    height: var(--ai-loader-size);
    flex-shrink: 0;
}

/* Halo : blob diffus qui se déforme lentement en contre-rotation. */
.ai-gen-loader__orbs::before {
    content: "";
    position: absolute;
    inset: calc(var(--ai-loader-size) * -0.16);
    border-radius: 47% 53% 61% 39% / 55% 44% 56% 45%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--ai-loader-c2) 34%, transparent) 0%,
        transparent 68%);
    opacity: calc(1 - 0.5 * (1 - var(--ai-motion)));
    animation: ai-loader-halo calc(var(--ai-dur-halo) * var(--ai-motion)) ease-in-out infinite;
}

/* Noyau : blob lumineux qui se déforme et dérive légèrement hors du centre —
   c'est ce décentrage qui le fait paraître vivant plutôt que posé. */
.ai-gen-loader__orbs::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--ai-loader-size) * 0.27);
    height: calc(var(--ai-loader-size) * 0.27);
    margin: calc(var(--ai-loader-size) * -0.135) 0 0 calc(var(--ai-loader-size) * -0.135);
    border-radius: 58% 42% 51% 49% / 47% 53% 47% 53%;
    background: radial-gradient(circle at 34% 30%, #fff 0%, var(--ai-loader-c1) 58%, var(--ai-loader-c2) 100%);
    box-shadow: 0 0 calc(var(--ai-loader-size) * 0.18) color-mix(in srgb, var(--ai-loader-c1) 55%, transparent);
    z-index: 3;
    /* Deux animations qui ne se disputent aucune propriété (forme+position
       contre opacité) : l'interrupteur --ai-motion en éteint toujours une des
       deux. ⚠️ Le !important est la seule exception assumée du loader : plus
       haut dans ce fichier, `*, *::before, *::after { animation: none
       !important }` en mouvement réduit couperait AUSSI la respiration, et un
       loader entièrement immobile se lit comme un rendu cassé. */
    animation:
        ai-loader-core calc(var(--ai-dur-core) * var(--ai-motion)) ease-in-out infinite,
        ai-loader-breathe calc(2.6s * (1 - var(--ai-motion))) ease-in-out infinite !important;
}

/* Anneau : DEUX arcs concentriques en contre-rotation, chacun masqué
   séparément (conic-gradient + masque radial — une bordure ne sait pas
   dégrader). ⚠️ Le conteneur reste transparent et SANS masque : un masque posé
   sur lui rognerait ses deux enfants au même anneau, ce qui rend le second arc
   impossible. Même piège que le clip-path des étoiles plus bas. */
.ai-gen-loader__ring {
    position: absolute;
    inset: calc(var(--ai-loader-size) * 0.08);
    opacity: calc(1 - 0.45 * (1 - var(--ai-motion)));
    z-index: 1;
}

.ai-gen-loader__ring::before,
.ai-gen-loader__ring::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

/* Arc externe : long, dégradé sur les trois teintes, sens horaire. */
.ai-gen-loader__ring::before {
    inset: 0;
    background: conic-gradient(from 0turn,
        transparent 0turn,
        color-mix(in srgb, var(--ai-loader-c1) 20%, transparent) 0.14turn,
        var(--ai-loader-c1) 0.44turn,
        var(--ai-loader-c2) 0.68turn,
        var(--ai-loader-c3) 0.88turn,
        transparent 1turn);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ai-loader-ring-width)), #000 calc(100% - var(--ai-loader-ring-width)));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--ai-loader-ring-width)), #000 calc(100% - var(--ai-loader-ring-width)));
    animation: ai-loader-arc-out calc(var(--ai-dur-arc-out) * var(--ai-motion)) ease-in-out infinite;
}

/* Arc interne : plus court, plus fin, sens inverse — c'est le croisement des
   deux qui donne la profondeur. */
.ai-gen-loader__ring::after {
    inset: 21%;
    background: conic-gradient(from 0.55turn,
        transparent 0turn,
        var(--ai-loader-c2) 0.22turn,
        color-mix(in srgb, var(--ai-loader-c1) 80%, #fff) 0.4turn,
        transparent 0.62turn,
        transparent 1turn);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ai-loader-ring-width) * 0.62), #000 calc(100% - var(--ai-loader-ring-width) * 0.62));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--ai-loader-ring-width) * 0.62), #000 calc(100% - var(--ai-loader-ring-width) * 0.62));
    animation: ai-loader-arc-in calc(var(--ai-dur-arc-in) * var(--ai-motion)) ease-in-out infinite;
}

/* Étoiles : six, réparties autour des arcs. Chacune naît, DÉRIVE vers
   l'extérieur en tournant sur elle-même, puis s'éteint — elle ne clignote pas
   sur place.

   ⚠️ Le markup ne fournit que trois éléments : chaque __orb n'est donc qu'un
   point d'ancrage transparent, et ce sont ses ::before (étoile principale) et
   ::after (satellite décalé) qui portent les étoiles — d'où six sans toucher
   aux ~20 gabarits. Corollaire : le clip-path vit sur les pseudos, jamais sur
   l'ancre, sinon elle rognerait ses propres enfants.

   Chaque étoile règle sa durée, son retard et sa direction de dérive dans SES
   PROPRES variables (déclarées sur le pseudo, lues par la keyframe commune) :
   une seule keyframe, six trajectoires distinctes. Les durées vont de 2,9 à
   4,3 s sans être multiples entre elles — voir l'avertissement en tête de
   section. */
.ai-gen-loader__orb {
    --ai-sparkle-size: calc(var(--ai-loader-size) * 0.26);
    --ai-sat-size: calc(var(--ai-loader-size) * 0.13);
    --ai-sat-x: 0px;
    --ai-sat-y: 0px;
    position: absolute;
    width: 0;
    height: 0;
    z-index: 2;
}

.ai-gen-loader__orb::before,
.ai-gen-loader__orb::after {
    content: "";
    position: absolute;
    clip-path: polygon(50% 0%, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0% 50%, 41% 41%);
    /* Éteintes au repos quand ça tourne (l'animation les allume), visibles
       quand la composition est figée — sans quoi il ne resterait aucune étoile
       en mouvement réduit. */
    opacity: calc(0.4 * (1 - var(--ai-motion)));
    animation: ai-loader-sparkle calc(var(--ai-star-dur, 3.5s) * var(--ai-motion)) ease-in-out infinite;
    animation-delay: var(--ai-star-delay, 0s);
}

.ai-gen-loader__orb::before {
    top: calc(var(--ai-sparkle-size) / -2);
    left: calc(var(--ai-sparkle-size) / -2);
    width: var(--ai-sparkle-size);
    height: var(--ai-sparkle-size);
    background: var(--ai-sparkle-bg);
}

.ai-gen-loader__orb::after {
    top: calc(var(--ai-sat-y) - var(--ai-sat-size) / 2);
    left: calc(var(--ai-sat-x) - var(--ai-sat-size) / 2);
    width: var(--ai-sat-size);
    height: var(--ai-sat-size);
    background: var(--ai-sat-bg, var(--ai-sparkle-bg));
}

/* Ancres : position, teintes, tailles. */
.ai-gen-loader__orb--1 {
    --ai-sparkle-bg: linear-gradient(160deg, #c7d2fe, var(--ai-loader-c1));
    --ai-sat-bg: linear-gradient(160deg, #ede9fe, var(--ai-loader-c2));
    --ai-sat-x: calc(var(--ai-loader-size) * 0.38);
    --ai-sat-y: calc(var(--ai-loader-size) * 0.22);
    top: 6%;
    left: 50%;
    filter: drop-shadow(0 0 calc(var(--ai-loader-size) * 0.05) color-mix(in srgb, var(--ai-loader-c1) 70%, transparent));
}

.ai-gen-loader__orb--2 {
    --ai-sparkle-size: calc(var(--ai-loader-size) * 0.22);
    --ai-sat-size: calc(var(--ai-loader-size) * 0.11);
    --ai-sparkle-bg: linear-gradient(160deg, #fbcfe8, var(--ai-loader-c3));
    --ai-sat-bg: linear-gradient(160deg, #fce7f3, var(--ai-loader-c3));
    --ai-sat-x: calc(var(--ai-loader-size) * -0.38);
    --ai-sat-y: calc(var(--ai-loader-size) * 0.22);
    top: 72%;
    left: 88%;
    filter: drop-shadow(0 0 calc(var(--ai-loader-size) * 0.05) color-mix(in srgb, var(--ai-loader-c3) 70%, transparent));
}

.ai-gen-loader__orb--3 {
    --ai-sparkle-size: calc(var(--ai-loader-size) * 0.19);
    --ai-sat-size: calc(var(--ai-loader-size) * 0.15);
    --ai-sparkle-bg: linear-gradient(160deg, #e9d5ff, var(--ai-loader-c2));
    --ai-sat-bg: linear-gradient(160deg, #dbeafe, var(--ai-loader-c1));
    --ai-sat-y: calc(var(--ai-loader-size) * -0.44);
    top: 72%;
    left: 12%;
    filter: drop-shadow(0 0 calc(var(--ai-loader-size) * 0.05) color-mix(in srgb, var(--ai-loader-c2) 70%, transparent));
}

/* Rythme et trajectoire, étoile par étoile : chacune dérive vers l'extérieur
   du cercle depuis sa propre ancre. */
.ai-gen-loader__orb--1::before {
    --ai-star-dur: 3.1s;
    --ai-star-delay: 0s;
    --ai-drift-x: 0px;
    --ai-drift-y: calc(var(--ai-loader-size) * -0.1);
}

.ai-gen-loader__orb--1::after {
    --ai-star-dur: 3.7s;
    --ai-star-delay: 0.7s;
    --ai-drift-x: calc(var(--ai-loader-size) * 0.07);
    --ai-drift-y: calc(var(--ai-loader-size) * -0.06);
}

.ai-gen-loader__orb--2::before {
    --ai-star-dur: 4.3s;
    --ai-star-delay: 1.4s;
    --ai-drift-x: calc(var(--ai-loader-size) * 0.08);
    --ai-drift-y: calc(var(--ai-loader-size) * 0.05);
}

.ai-gen-loader__orb--2::after {
    --ai-star-dur: 2.9s;
    --ai-star-delay: 2.1s;
    --ai-drift-x: 0px;
    --ai-drift-y: calc(var(--ai-loader-size) * 0.1);
}

.ai-gen-loader__orb--3::before {
    --ai-star-dur: 3.3s;
    --ai-star-delay: 2.8s;
    --ai-drift-x: calc(var(--ai-loader-size) * -0.08);
    --ai-drift-y: calc(var(--ai-loader-size) * 0.05);
}

.ai-gen-loader__orb--3::after {
    --ai-star-dur: 4.1s;
    --ai-star-delay: 3.5s;
    --ai-drift-x: calc(var(--ai-loader-size) * -0.07);
    --ai-drift-y: calc(var(--ai-loader-size) * -0.06);
}

/* Les deux arcs : rotation à vitesse variable (étapes irrégulières) et
   respiration NON uniforme, en sens opposés. ⚠️ Les deux axes du scale sont
   volontairement désaccordés (1.05 / 0.97…) : l'anneau ondule alors comme un
   cercle vu de biais au lieu de rester un cercle parfait qui tourne — c'est ce
   détail, plus que la rotation elle-même, qui enlève l'effet « spinner ». */
@keyframes ai-loader-arc-out {
    0%   { transform: rotate(0deg)   scale(1, 1); }
    27%  { transform: rotate(84deg)  scale(1.05, 0.97); }
    53%  { transform: rotate(196deg) scale(0.96, 1.04); }
    78%  { transform: rotate(268deg) scale(1.03, 0.98); }
    100% { transform: rotate(360deg) scale(1, 1); }
}

@keyframes ai-loader-arc-in {
    0%   { transform: rotate(0deg)    scale(1, 1); }
    31%  { transform: rotate(-72deg)  scale(0.93, 1.05); }
    58%  { transform: rotate(-208deg) scale(1.07, 0.95); }
    82%  { transform: rotate(-284deg) scale(0.98, 1.03); }
    100% { transform: rotate(-360deg) scale(1, 1); }
}

/* Blobs : le border-radius morphe en même temps que la forme tourne et dérive.
   C'est le morphing — pas le déplacement — qui fait lire la forme comme
   vivante ; une pulsation d'échelle seule redonnerait un battement mécanique. */
@keyframes ai-loader-halo {
    0%   { border-radius: 47% 53% 61% 39% / 55% 44% 56% 45%; transform: scale(0.9) rotate(0deg);      opacity: 0.5; }
    29%  { border-radius: 62% 38% 43% 57% / 40% 61% 39% 60%; transform: scale(1.08) rotate(-74deg);   opacity: 0.86; }
    54%  { border-radius: 38% 62% 56% 44% / 63% 38% 62% 37%; transform: scale(0.95) rotate(-162deg);  opacity: 0.6; }
    81%  { border-radius: 57% 43% 39% 61% / 45% 58% 42% 55%; transform: scale(1.05) rotate(-271deg);  opacity: 0.88; }
    100% { border-radius: 47% 53% 61% 39% / 55% 44% 56% 45%; transform: scale(0.9) rotate(-360deg);   opacity: 0.5; }
}

@keyframes ai-loader-core {
    0%   { border-radius: 58% 42% 51% 49% / 47% 53% 47% 53%; transform: translate(0, 0) scale(0.9) rotate(0deg); }
    23%  { border-radius: 44% 56% 62% 38% / 58% 41% 59% 42%; transform: translate(3%, -4%) scale(1.03) rotate(46deg); }
    49%  { border-radius: 63% 37% 40% 60% / 44% 62% 38% 56%; transform: translate(-2%, 3%) scale(0.94) rotate(128deg); }
    72%  { border-radius: 39% 61% 57% 43% / 61% 39% 61% 39%; transform: translate(-3%, -2%) scale(1.07) rotate(232deg); }
    100% { border-radius: 58% 42% 51% 49% / 47% 53% 47% 53%; transform: translate(0, 0) scale(0.9) rotate(360deg); }
}

/* Étoile : naît, dérive vers l'extérieur en tournant, s'éteint, puis attend le
   reste de son cycle (d'où les 42 % de silence — sans eux, les six étoiles
   seraient allumées en permanence et le motif redeviendrait régulier). */
@keyframes ai-loader-sparkle {
    0%   { transform: translate(0, 0) scale(0) rotate(-55deg); opacity: 0; }
    14%  { transform: translate(calc(var(--ai-drift-x, 0px) * 0.18), calc(var(--ai-drift-y, 0px) * 0.18)) scale(1) rotate(0deg); opacity: 1; }
    38%  { transform: translate(calc(var(--ai-drift-x, 0px) * 0.55), calc(var(--ai-drift-y, 0px) * 0.55)) scale(0.62) rotate(30deg); opacity: 0.55; }
    58%  { transform: translate(var(--ai-drift-x, 0px), var(--ai-drift-y, 0px)) scale(0) rotate(66deg); opacity: 0; }
    100% { transform: translate(0, 0) scale(0) rotate(-55deg); opacity: 0; }
}

.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 : rien à réécrire, juste l'échelle. */
.ai-gen-loader--sm {
    --ai-loader-size: 22px;
    --ai-loader-ring-width: 2px;
    display: inline-flex;
    padding: 0;
    min-height: unset;
    width: auto;
    gap: 0;
    margin-right: 0.4rem;
    vertical-align: middle;
}

/* Mouvement réduit : la composition entière se fige (durées × 0) et seul le
   noyau garde une respiration d'opacité — le mouvement est ce que la
   préférence vise, pas un fondu doux, et un loader parfaitement immobile se
   lit comme un rendu cassé. Les libellés « Génération… » restent de toute
   façon.

   ⚠️ Une seule ligne suffit parce que l'état figé est décrit là où chaque
   couche est définie (opacités de repos + durées multipliées par
   --ai-motion) : ne PAS réintroduire ici un bloc de règles jumelles, il
   dériverait de l'état réel. C'est aussi ce qui permet à l'aperçu du design
   système de montrer ce mode sans le simuler. */
@media (prefers-reduced-motion: reduce) {
    .ai-gen-loader {
        --ai-motion: 0;
    }
}

/* Aperçu « mouvement réduit » hors préférence système (page Design système).
   Même interrupteur, donc l'aperçu ne peut pas mentir sur le rendu réel. */
.ai-gen-loader--still {
    --ai-motion: 0;
}

@keyframes ai-loader-breathe {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

.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;
}

/* Bouton en cours de génération IA piloté par le helper partagé
   (static/js/ai_button_loader.js) : loader orbital + libellé centrés, quel que
   soit le type de bouton (.button, .btn-icon…). */
.is-ai-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: wait;
}

.ai-btn-loader__label {
    line-height: 1;
    white-space: nowrap;
}

/* 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-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));
    }

}

@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;
    /* Au-dessus du raccourci ⌘K (1180), sous la palette elle-même (1400). */
    z-index: 1200;
    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;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    animation: slide-up-from-bottom 240ms cubic-bezier(0.2, 0.85, 0.35, 1) both;
}

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

/* Le panneau flotte au-dessus de la liste : on réserve la place en bas de page
   (hauteur mesurée par bulk_actions.js) pour garder la dernière ligne cliquable. */
body.has-bulk-selection {
    padding-bottom: var(--bulk-panel-height, 0px);
}

/* Champ que réclame une action en lot paramétrée (« grade minimum à appliquer »,
   « festival de destination ») : il n'a de sens qu'une fois une sélection faite,
   donc il n'apparaît qu'à ce moment-là — au repos, la liste reste nue. Le socle
   pose `has-bulk-selection` sur le body, aucun script de page n'est nécessaire. */
.bulk-inline-tools {
    display: none;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.75rem 0;
}

body.has-bulk-selection .bulk-inline-tools {
    display: flex;
}

/* Borner AUSSI `.custom-select` : le champ est enrichi par
   `static/js/custom_select.js`, qui masque le `<select>` d'origine et affiche
   son propre déclencheur — une largeur posée sur le seul `select` ne se voit
   nulle part, et le champ s'étale alors sur toute la ligne. */
.bulk-inline-tools select,
.bulk-inline-tools .custom-select {
    max-width: 22rem;
    flex: 1 1 16rem;
}

/* Le raccourci ⌘K occupe le même coin : il s'efface pendant la sélection
   (le raccourci clavier, lui, reste actif). */
body.has-bulk-selection .command-palette-fab {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
}

.bulk-actions-panel.is-busy {
    cursor: progress;
}

@keyframes slide-up-from-bottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ⚠️ Le nombre d'actions n'est pas fixe (5 sur les inscriptions, 7 sur les
   groupes…) et le panneau vit dans un `.container` borné : la rangée de boutons
   doit pouvoir passer à la ligne. Sans `flex-wrap`, elle débordait et écrasait la
   colonne de texte à zéro — la description tombait à un mot par ligne et
   chevauchait les boutons. */
.bulk-actions-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.9rem 1.5rem;
    padding: 0;
    /* Place réservée au « × », qui est ancré en haut à droite du panneau. */
    padding-right: 2.75rem;
}

/* Plancher de lisibilité : la colonne « 23 groupes sélectionnés + portée » ne se
   comprime plus au-delà, elle prend sa propre rangée. */
.bulk-actions-info {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex: 1 1 20rem;
    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__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 0.5rem;
    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-texts {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.bulk-actions-description {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.3;
}

.bulk-actions-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

/* Portée réelle de l'action (ex. « 7 inscriptions » pour 3 lots cochés). */
.bulk-actions-detail {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
    color: var(--text);
    font-weight: 700;
    white-space: nowrap;
}

.bulk-actions-detail[hidden] {
    display: none;
}

.bulk-actions-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent-strong);
    font-weight: 700;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bulk-actions-link:hover:not(:disabled) {
    color: var(--text);
}

.bulk-actions-link:disabled {
    opacity: 0.5;
    cursor: default;
}

.bulk-actions-link[hidden] {
    display: none;
}

.bulk-actions-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.bulk-actions-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    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 i {
    font-size: 1.05em;
    line-height: 1;
}

.bulk-actions-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: saturate(1.04);
}

/* Action en cours : le panneau se verrouille (pas de double envoi). */
.bulk-actions-btn:disabled {
    opacity: 0.55;
    cursor: default;
    box-shadow: none;
}

.bulk-actions-btn.is-busy {
    opacity: 1;
    cursor: progress;
}

.bulk-actions-btn.is-busy i {
    display: none;
}

.bulk-actions-btn.is-busy::before {
    content: "";
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    animation: bulk-actions-spin 700ms linear infinite;
}

@keyframes bulk-actions-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bulk-actions-panel {
        animation: none;
    }

    .bulk-actions-btn.is-busy::before {
        animation-duration: 2s;
    }
}

.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);
}

/* Ancré au panneau (et non dans le flux) : dès que la rangée de boutons passe à
   la ligne, un « × » resté en flux tombait seul sur une rangée, tout à gauche. */
.bulk-actions-close {
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    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 i {
    font-size: 1.15rem;
    line-height: 1;
}

.bulk-actions-close:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-soft) 52%, transparent);
    color: var(--text);
}

.bulk-actions-close:disabled {
    opacity: 0.45;
    cursor: default;
}

@media (max-width: 900px) {
    .bulk-actions-panel {
        padding: 0.85rem 0;
        padding-bottom: max(0.85rem, env(safe-area-inset-bottom));
    }

    .bulk-actions-container {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .bulk-actions-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
        /* Le conteneur passe en colonne : le `flex-basis` de la version large
           deviendrait une HAUTEUR de 20rem sous le texte. */
        flex: 0 0 auto;
    }

    .bulk-actions-controls {
        justify-content: stretch;
    }

    .bulk-actions-btn {
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
    }

}

@media (max-width: 640px) {
    .bulk-actions-panel {
        padding: 0.75rem 0;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    }

    .bulk-actions-count {
        font-size: 0.9rem;
    }

    .bulk-actions-count__badge {
        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) ---
   Le hero est le composant partagé .site-hero (orbes + dégradé teinté par le
   thème), rendu tel quel : grand panneau en haut, grille de cartes en dessous.
   Aucun override du hero ici — seule la grille reçoit une bordure d'accent. */
[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) ---
   Le hero partagé occupe presque toute la fenêtre, contenu centré, titre XXL :
   impact maximal. Les orbes flottants (déjà dans .site-hero) remplissent l'espace. */
[data-home-layout="full_hero"] .site-hero {
    min-height: min(90svh, 780px);
    display: flex;
    align-items: center;
    padding: clamp(3rem, 7vh, 5.5rem) clamp(1.5rem, 5vw, 4rem);
}

[data-home-layout="full_hero"] .site-hero__inner {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

[data-home-layout="full_hero"] .site-hero__title {
    font-size: clamp(2.8rem, 7vw, 5rem);
}

[data-home-layout="full_hero"] .site-hero__lead {
    margin-left: auto;
    margin-right: auto;
}

[data-home-layout="full_hero"] .site-hero__actions {
    justify-content: center;
}

[data-home-layout="full_hero"] .site-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) ---
   Intro compacte : le hero partagé est plus petit et ses orbes discrets, pour
   laisser les cartes ci-dessous passer en avant-scène. */
[data-home-layout="card_grid"] .site-hero {
    padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.5rem, 4vw, 2.5rem);
    border-radius: 26px;
}

[data-home-layout="card_grid"] .site-hero__title {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    margin-bottom: 0.5rem;
}

[data-home-layout="card_grid"] .site-hero__lead {
    font-size: 1rem;
    margin-bottom: 0.9rem;
}

[data-home-layout="card_grid"] .site-hero__orb {
    opacity: 0.3;
}

[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 {
    --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 {
    --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) ---
   On dépouille le hero partagé : ni orbes, ni grain, ni fond, ni bordure — juste
   une grande typographie aérée et des boutons fantômes. Décoration minimale. */
[data-home-layout="minimal_typo"] .site-hero {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    padding: clamp(2rem, 5vh, 3.5rem) 0;
}

[data-home-layout="minimal_typo"] .site-hero__orb,
[data-home-layout="minimal_typo"] .site-hero__grain {
    display: none;
}

[data-home-layout="minimal_typo"] .site-hero__inner {
    max-width: 860px;
}

[data-home-layout="minimal_typo"] .site-hero__eyebrow {
    background: none;
    border: 0;
    padding: 0;
    backdrop-filter: none;
    color: var(--muted);
    letter-spacing: 0.16em;
    opacity: 0.85;
}

[data-home-layout="minimal_typo"] .site-hero__eyebrow i {
    display: none;
}

[data-home-layout="minimal_typo"] .site-hero__title {
    font-size: clamp(2.5rem, 6.4vw, 4.8rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
}

[data-home-layout="minimal_typo"] .site-hero__lead {
    font-size: 1.18rem;
    max-width: 580px;
}

[data-home-layout="minimal_typo"] .site-hero__actions {
    gap: 0.55rem;
}

[data-home-layout="minimal_typo"] .site-hero__actions .button {
    border-radius: 999px;
    background: transparent;
    border-width: 1px;
    box-shadow: none;
}

[data-home-layout="minimal_typo"] .site-hero__actions .button.primary {
    color: var(--text);
    border-color: color-mix(in srgb, var(--text) 26%, transparent);
}

[data-home-layout="minimal_typo"] .site-hero__actions .button.secondary {
    color: var(--muted);
    border-color: color-mix(in srgb, var(--line) 88%, transparent);
    background: 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"] .site-hero {
        min-height: auto;
        padding: 3.2rem clamp(1.3rem, 5vw, 2rem) 2.8rem;
    }

    [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"] .site-hero {
        padding-top: 3.2rem;
        padding-bottom: 3rem;
    }
}

@media (max-width: 640px) {
    [data-home-layout="full_hero"] .site-hero {
        padding: 2.6rem 1.3rem;
    }

    [data-home-layout="full_hero"] .site-hero__actions .button {
        min-width: 100%;
    }
}

/* --- Modificateur .site-hero--photo (hero photo immersif, réutilisable) ---
   Image plein cadre + voile de lisibilité ; texte forcé en clair quel que soit
   le thème (car par-dessus un voile sombre). */
.site-hero--photo {
    background:
        var(--site-hero-image) center / cover no-repeat,
        color-mix(in srgb, var(--accent) 30%, #0a1428);
    color: #f5f8ff;
    border-color: color-mix(in srgb, #ffffff 22%, transparent);
}

.site-hero--photo .site-hero__orb,
.site-hero--photo .site-hero__grain {
    display: none;
}

.site-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(6, 12, 28, 0.28) 0%, rgba(6, 12, 28, 0.64) 100%),
        linear-gradient(105deg, rgba(6, 12, 28, 0.66) 0%, rgba(6, 12, 28, 0.18) 60%, transparent 100%);
}

/* --- Carrousel hero : couches d'images empilées sous le voile ---
   z-index : slides (0) < voile (1) < contenu (.site-hero__inner, 2).
   Modèle « entrante par-dessus, sortante tenue dessous » : la diapo qui ENTRE
   (`.is-active`, au-dessus) joue son effet ; la diapo qui SORT (`.is-leaving`) reste
   opaque et immobile EN DESSOUS le temps de la transition, puis est masquée par le
   JS. Ainsi aucune couleur de fond ne « flashe » entre deux diapos, quel que soit
   le mélange d'effets (fondu, glissement, zoom, coupe). Chaque diapo porte sa
   propre classe d'effet ; le JS ne fait que basculer `.is-active`/`.is-leaving`. */
.site-hero__slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.site-hero__slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    will-change: opacity, transform, filter, clip-path;
}
.site-hero__slide.is-active { opacity: 1; z-index: 2; }

@media (prefers-reduced-motion: no-preference) {
    /* Effet d'ENTRÉE de la diapo active (état de départ = état non-actif ci-dessous). */

    /* Fondu enchaîné. */
    .site-hero__slide--fade { transition: opacity 800ms ease; }

    /* Fondu flou : fond net qui émerge d'un flou. */
    .site-hero__slide--blur { filter: blur(16px); transition: opacity 850ms ease, filter 850ms ease; }
    .site-hero__slide--blur.is-active { filter: blur(0); }

    /* Glissement horizontal : opaque instantanément puis glisse depuis la droite. */
    .site-hero__slide--slide {
        transform: translateX(100%);
        transition: opacity 1ms linear, transform 780ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .site-hero__slide--slide.is-active { transform: translateX(0); }

    /* Glissement vertical : glisse depuis le bas. */
    .site-hero__slide--slide-up {
        transform: translateY(100%);
        transition: opacity 1ms linear, transform 780ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .site-hero__slide--slide-up.is-active { transform: translateY(0); }

    /* Zoom avant (Ken Burns) : fondu + agrandissement lent, relancé à chaque activation. */
    .site-hero__slide--zoom { transition: opacity 900ms ease; }
    .site-hero__slide--zoom.is-active { animation: heroKenBurns 9s ease-out both; }

    /* Zoom arrière : entre en grand puis se stabilise, en fondu. */
    .site-hero__slide--zoom-out {
        transform: scale(1.18);
        transition: opacity 900ms ease, transform 1100ms ease;
    }
    .site-hero__slide--zoom-out.is-active { transform: scale(1); }

    /* Balayage : révélé de la droite vers la gauche via clip-path (opaque). */
    .site-hero__slide--wipe {
        clip-path: inset(0 0 0 100%);
        transition: opacity 1ms linear, clip-path 820ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .site-hero__slide--wipe.is-active { clip-path: inset(0 0 0 0); }

    /* Bascule : léger retournement 3D en entrée, opaque, par-dessus la sortante. */
    .site-hero__slide--flip {
        transform: perspective(1400px) rotateY(16deg);
        transform-origin: center;
        transition: opacity 1ms linear, transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .site-hero__slide--flip.is-active { transform: perspective(1400px) rotateY(0); }

    /* Coupe nette : apparition instantanée par-dessus la sortante (aucun flash). */
    .site-hero__slide--cut { transition: none; }

    @keyframes heroKenBurns { from { transform: scale(1.02); } to { transform: scale(1.14); } }
}

/* Diapo sortante : tenue pleinement visible, immobile, nette et non rognée, juste
   sous l'entrante — placée APRÈS les effets pour l'emporter à spécificité égale
   (sinon une sortante « balayage »/« flou » se re-rognerait/re-flouterait → flash). */
.site-hero__slide.is-leaving {
    opacity: 1;
    z-index: 1;
    transform: none;
    filter: none;
    clip-path: none;
    transition: none;
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    /* Aucune animation : simple présence/absence (le JS n'avance pas non plus). */
    .site-hero__slide {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }
}

.site-hero--photo .site-hero__title {
    background: linear-gradient(120deg, #ffffff 10%, #dbe8ff 68%, color-mix(in srgb, var(--brand-cyan) 60%, #ffffff) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.site-hero--photo .site-hero__lead {
    color: rgba(233, 240, 255, 0.92);
}

.site-hero--photo .site-hero__eyebrow {
    color: #eaf1ff;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.32);
}

.site-hero--photo .site-hero__eyebrow i {
    color: color-mix(in srgb, var(--brand-orange) 70%, #ffd8a8);
}

.site-hero--photo .button.secondary {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.34);
    color: #f5f8ff;
}

/* --- Filigrane (mode « affiche ») : logo géant estompé derrière le texte --- */
.site-hero__watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(120%, 780px);
    max-width: none;
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity: 0.06;
    filter: grayscale(1);
    pointer-events: none;
    object-fit: contain;
}

/* --- layout: hero_image (hero photo immersif) ---
   Grand hero plein cadre, texte ancré en bas à gauche (patron photo classique).
   Sans image téléversée, se rabat sur le hero à orbes (dégradé du thème). */
[data-home-layout="hero_image"] .site-hero {
    min-height: min(82svh, 720px);
    display: flex;
    align-items: flex-end;
    padding: clamp(2.5rem, 6vh, 5rem) clamp(1.5rem, 5vw, 4rem);
}

[data-home-layout="hero_image"] .site-hero__inner {
    max-width: 760px;
}

[data-home-layout="hero_image"] .site-hero__title {
    font-size: clamp(2.6rem, 6vw, 4.6rem);
}

/* --- layout: presentation_minimal (présentation minimaliste) ---
   Carrousel d'images téléversées en quasi plein écran + habillage texte épuré
   par-dessus : pas de pastille eyebrow, grand titre centré, CTA discrètes façon
   « verre ». S'appuie sur .site-hero--photo (fond + voile + texte clair) alimenté
   par `home_hero_images` — mêmes diapos/transitions que « Hero photo immersif ». */
/* Fond pleine fenêtre : le hero déborde du conteneur (bord-à-bord, 100vw), remonte
   SOUS l'en-tête « verre » (transparent) et prend toute la hauteur d'écran →
   l'image devient un vrai fond plein écran, la barre de nav flotte par-dessus.
   `--dojo-header-height` est tenue à jour par ui_modal.js (fiable en prod). */
[data-home-layout="presentation_minimal"] [data-home-block="hero"] {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: calc(-1 * var(--dojo-header-height, 4.5rem));
    padding: 0;
}

[data-home-layout="presentation_minimal"] .site-hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(3rem, 9vh, 6rem) clamp(1.5rem, 6vw, 4rem);
    border-radius: 0;
}

[data-home-layout="presentation_minimal"] .site-hero__inner {
    max-width: 840px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

[data-home-layout="presentation_minimal"] .site-hero__eyebrow {
    display: none;
}

[data-home-layout="presentation_minimal"] .site-hero__title {
    font-size: clamp(2.8rem, 7vw, 5.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.04;
}

[data-home-layout="presentation_minimal"] .site-hero__lead {
    font-size: 1.2rem;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

[data-home-layout="presentation_minimal"] .site-hero__actions {
    justify-content: center;
    gap: 0.6rem;
}

[data-home-layout="presentation_minimal"] .site-hero__actions .button {
    border-radius: 999px;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #f5f8ff;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

[data-home-layout="presentation_minimal"] .site-hero__actions .button.primary {
    background: rgba(255, 255, 255, 0.92);
    border-color: transparent;
    color: #10233f;
}

/* --- layout: campaign_spotlight (inscriptions en vedette) ---
   Hero compact, puis la carte de campagne devient la vedette (grande, centrée,
   accent). Sans campagne active, la section est masquée (repli gracieux). */
[data-home-layout="campaign_spotlight"] .site-hero {
    padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.5rem, 4vw, 2.4rem);
    border-radius: 26px;
}

[data-home-layout="campaign_spotlight"] .site-hero__title {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
}

[data-home-layout="campaign_spotlight"] .site-hero__orb {
    opacity: 0.3;
}

[data-home-layout="campaign_spotlight"] .campaign-card {
    padding: clamp(2rem, 4vw, 3.2rem);
    border-radius: 28px;
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent-soft) 80%, transparent), transparent 60%),
        linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, var(--bg-elevated-strong)), var(--bg-elevated));
    box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--accent) 45%, rgba(6, 14, 30, 0.5));
}

[data-home-layout="campaign_spotlight"] .campaign-card h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
}

[data-home-layout="campaign_spotlight"] .campaign-card .hero-actions {
    justify-content: center;
}

[data-home-layout="campaign_spotlight"] .campaign-card .button.primary {
    min-width: 12rem;
    font-size: 1.05rem;
    padding: 1rem 1.6rem;
}

/* --- layout: poster (affiche) ---
   Un seul écran : nom du dojo en très grand, centré, logo en filigrane derrière,
   une CTA. Impact d'affiche. */
[data-home-layout="poster"] .site-hero {
    min-height: min(94svh, 820px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(3rem, 8vh, 6rem) clamp(1.5rem, 5vw, 4rem);
}

[data-home-layout="poster"] .site-hero__inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

[data-home-layout="poster"] .site-hero__title {
    font-size: clamp(3rem, 9vw, 6.5rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
}

[data-home-layout="poster"] .site-hero__actions {
    justify-content: center;
}

/* --- layout: bento (mosaïque asymétrique) ---
   Hero compact, puis les grilles de cartes deviennent une mosaïque : cartes de
   largeurs variées, flux dense. */
[data-home-layout="bento"] .site-hero {
    padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.5rem, 4vw, 2.4rem);
    border-radius: 28px;
}

[data-home-layout="bento"] .site-hero__title {
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
}

[data-home-layout="bento"] .home-card-section .feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    grid-auto-flow: dense;
}

[data-home-layout="bento"] .home-card-section .feature-grid > * {
    grid-column: span 2;
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent-soft) 34%, transparent), transparent 46%),
        color-mix(in srgb, var(--bg-elevated) 96%, transparent);
    box-shadow: 0 14px 30px color-mix(in srgb, #000000 10%, transparent);
}

/* Rythme mosaïque : la 1re carte de chaque groupe de 3 s'élargit. */
[data-home-layout="bento"] .home-card-section .feature-grid > *:nth-child(3n+1) {
    grid-column: span 4;
}

@media (max-width: 760px) {
    [data-home-layout="bento"] .home-card-section .feature-grid {
        grid-template-columns: 1fr;
    }

    [data-home-layout="bento"] .home-card-section .feature-grid > *,
    [data-home-layout="bento"] .home-card-section .feature-grid > *:nth-child(3n+1) {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    [data-home-layout="hero_image"] .site-hero {
        min-height: min(72svh, 540px);
        padding: 2.2rem 1.3rem;
    }

    [data-home-layout="poster"] .site-hero {
        min-height: auto;
        padding: 4rem 1.3rem;
    }
}

/* ── /Layouts page d'accueil ───────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   Sélecteur visuel de mise en page accueil (admin)
   ───────────────────────────────────────────────────────────── */
/* Aperçu + téléversement de l'image du hero photo (admin) */
.hero-image-preview {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    max-width: 520px;
}

.hero-image-preview img {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: cover;
}

.hero-image-upload-form {
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.hero-image-upload-input {
    max-width: 340px;
}

.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);
}
/* 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), Spec (3), $/mois (4), Datacenter (5), Début (6), Fin (7), Unités (8), Coût (9) */
    .sys-kamatera-billing-table th:nth-child(2),
    .sys-kamatera-billing-table td:nth-child(2) { min-width: 140px; }
    .sys-kamatera-billing-table th:nth-child(3),
    .sys-kamatera-billing-table td:nth-child(3) { min-width: 180px; }
    .sys-kamatera-billing-table th:nth-child(4),
    .sys-kamatera-billing-table td:nth-child(4) { min-width: 90px; }
    .sys-kamatera-billing-table th:nth-child(5),
    .sys-kamatera-billing-table td:nth-child(5) { min-width: 110px; }
    .sys-kamatera-billing-table th:nth-child(6),
    .sys-kamatera-billing-table td:nth-child(6),
    .sys-kamatera-billing-table th:nth-child(7),
    .sys-kamatera-billing-table td:nth-child(7) { min-width: 148px; }
    .sys-kamatera-billing-table th:nth-child(8),
    .sys-kamatera-billing-table td:nth-child(8) { min-width: 112px; }
    .sys-kamatera-billing-table th:nth-child(9),
    .sys-kamatera-billing-table td:nth-child(9) { min-width: 128px; }

    /* admin-members-table (1 = sélection) : Membre (2), Responsable (3) */
    .admin-members-table th:nth-child(2),
    .admin-members-table td:nth-child(2),
    .admin-members-table th:nth-child(3),
    .admin-members-table td:nth-child(3) { min-width: 160px; }

    /* admin-users-table (1 = sélection) : Nom (2), Roles (3), Messagerie (4), Actions (7) */
    .admin-users-table th:nth-child(2),
    .admin-users-table td:nth-child(2) { min-width: 160px; }
    .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(4),
    .admin-users-table td:nth-child(4) { width: 120px; min-width: 120px; }
    /* max-content et non une valeur fixe : la colonne ne se replie plus, elle ne
       doit donc jamais déborder de sa cellule (le tableau défile déjà). */
    .admin-users-table th:nth-child(7),
    .admin-users-table td:nth-child(7) { min-width: max-content; }

    /* 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 (1 = sélection) : Nom (2) */
    .admin-discount-codes-table th:nth-child(2),
    .admin-discount-codes-table td:nth-child(2) { 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 (1 = sélection) : Sujet (2), École (3), Expéditeur (4) */
    .admin-messages-table th:nth-child(2),
    .admin-messages-table td:nth-child(2) { min-width: 200px; }
    .admin-messages-table th:nth-child(3),
    .admin-messages-table td:nth-child(3),
    .admin-messages-table th:nth-child(4),
    .admin-messages-table td:nth-child(4) { min-width: 140px; }

    /* admin-gift-cards-table (1 = sélection) : Libellé (2), Acheteur (6), Destinataire (7) */
    .admin-gift-cards-table th:nth-child(2),
    .admin-gift-cards-table td:nth-child(2) { min-width: 160px; }
    .admin-gift-cards-table th:nth-child(6),
    .admin-gift-cards-table td:nth-child(6),
    .admin-gift-cards-table th:nth-child(7),
    .admin-gift-cards-table td:nth-child(7) { min-width: 140px; }

    /* admin-surveys-table (1 = sélection) : Titre (2) */
    .admin-surveys-table th:nth-child(2),
    .admin-surveys-table td:nth-child(2) { 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-permissions-table: Droit (1), À quoi il sert (2) */
    .social-permissions-table th:nth-child(1),
    .social-permissions-table td:nth-child(1) { min-width: 180px; }
    .social-permissions-table th:nth-child(2),
    .social-permissions-table td:nth-child(2) { min-width: 240px; }

    /* 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;
    }
}


/* ===== Facturation par école (sysadmin) — sections au rendu uniforme ===== */

/* Panneau « périodes » autonome (Palier, Services) — pendant de
   .module-periods-section pour les sections sans bloc encadré autour. */
.billing-periods-panel {
    margin-top: 1rem;
    padding: 0.875rem 1.125rem;
    background: var(--color-surface-1);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

/* Repli & frais des services — grille éditable rendue comme
   sys-billing-prices-table. Chaque ligne reste un <form> autosubmit : un vrai
   <table> ne peut pas envelopper un <form> par ligne (le parseur l'éjecte), on
   reproduit donc l'apparence du tableau sur une grille. */
.svc-override-grid {
    display: grid;
    grid-template-columns: minmax(11rem, 1.5fr) 10.5rem 8.5rem 6.5rem minmax(8rem, 1fr);
    gap: 0.6rem;
    align-items: center;
}

.svc-override-head {
    padding: 0.72rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--text) 88%, var(--accent-strong) 12%);
    background: color-mix(in srgb, var(--bg-elevated-strong) 92%, var(--accent-soft) 8%);
    border-bottom: 1px solid var(--line);
}

.svc-override-row {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--line);
    transition: background var(--transition-fast);
}

.svc-override-row:nth-of-type(even) {
    background: color-mix(in srgb, var(--accent-soft) 20%, transparent);
}

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


/* --- 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);
}

/* Sélecteur de style (les styles inline JS ont été remplacés par ces règles). */
.ai-text-enhancer__style-select {
    width: 160px;
    max-width: 160px;
    padding: 0.5rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--bg-elevated);
    color: var(--text);
    cursor: pointer;
    box-sizing: border-box;
    flex-shrink: 0;
}

.ai-text-enhancer__style-select:hover {
    border-color: var(--accent);
}

/* Le sélecteur de style vit dans une barre flottante compacte, aux côtés de
   boutons de ~34 px : le déclencheur de la liste custom (44 px de haut par
   défaut) y ferait une marche. Il hérite de la classe ci-dessus (voir
   custom_select.js), on ne rattrape donc que la hauteur et la place du chevron. */
.custom-select__trigger.ai-text-enhancer__style-select {
    min-height: 0;
    padding-right: 1.9rem;
    background-position: right 0.55rem center;
}

/* Boutons rapides Raccourcir/Allonger : libellé masqué sur petit écran. */
@media (max-width: 560px) {
    .ai-text-enhancer__button--length .ai-text-enhancer__label {
        display: none;
    }
}

.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,
.admin-modal > .admin-modal__body {
    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: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 0.55rem;
    row-gap: 0.18rem;
    align-items: center;
}

.payment-card__icon {
    font-size: 1.25rem;
    line-height: 1;
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
}

.payment-card__name {
    font-weight: 600;
    font-size: 0.96rem;
    grid-column: 2;
    grid-row: 1;
    color: var(--text);
    min-width: 0;
}

.payment-card__check {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    border: 2px solid var(--line);
    background: var(--bg);
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
    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;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-self: start;
}

.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-group__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted, #64748b);
}

.comp-action-group__title i {
    font-size: 1.1rem;
    color: var(--accent);
}

.comp-action-grid .button {
    justify-content: flex-start;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.1rem;
    height: auto;
    min-height: 3.15rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.25;
    text-align: left;
    white-space: normal;
    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;
}

/* L'attribut [hidden] doit l'emporter sur le display:flex ci-dessus
   (spécificité de classe), sinon un champ masqué reste visible. */
.form-group[hidden] {
    display: none;
}

.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);
}

/* Marqueur « champ obligatoire » — astérisque raffiné, unifié pour tout le site.
   Le libellé natif title="Obligatoire" (posé dans les gabarits) fournit l'infobulle. */
.required,
.req {
    display: inline-block;
    margin-left: 0.22em;
    color: var(--field-required);
    font-weight: 800;
    font-size: 1.05em;
    line-height: 1;
    cursor: help;
}

.inline-form-mini {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* ── Pastille « présent » (`.attendance-today-toggle`) ─────────────────────
   Case à cocher dont l'état est montré par une pastille, pas par la case native
   (voir `.bare-control` plus haut : sans cette classe sur l'input, l'habillage
   global des cases le rend visible dès qu'un script le désactive).
   Partagé pour que le specimen du design système soit le composant réel. */
.attendance-today-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    vertical-align: middle;
}
.attendance-today-toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.attendance-today-toggle__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 34px;
    padding: 0.32rem 0.72rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--line);
    background: var(--bg-elevated);
    color: color-mix(in srgb, var(--text) 58%, transparent);
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.attendance-today-toggle__pill i { opacity: 0.35; }
.attendance-today-toggle input:checked + .attendance-today-toggle__pill {
    background: color-mix(in srgb, var(--success, #2d8f6f) 16%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--success, #2d8f6f) 55%, transparent);
    color: color-mix(in srgb, var(--success, #2d8f6f) 92%, var(--text));
}
.attendance-today-toggle input:checked + .attendance-today-toggle__pill i { opacity: 1; }
.attendance-today-toggle input:focus-visible + .attendance-today-toggle__pill {
    outline: 2px solid var(--accent, #3358d4);
    outline-offset: 2px;
}
.attendance-today-toggle__total {
    margin-left: 0.4rem;
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--text) 45%, transparent);
}

/* ── Barre de filtres d'une liste back-office (`.tmf-*`) ───────────────────
   Recherche + sélecteurs compacts au-dessus d'un tableau. Écrit ici une seule
   fois : c'était un bloc local de la liste des membres de l'encadrement, dont la
   feuille de présence a besoin à l'identique (un champ de recherche qui ne
   ressemble pas au reste de la page se lit comme un bogue). */
.tmf-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.tmf-search {
    flex: 1 1 150px;
    min-width: 0;
    box-sizing: border-box;
    height: 2rem;
    padding: 0 0.75rem;
    border: 1px solid var(--line);
    background: var(--bg-elevated);
    color: var(--text);
    border-radius: 10px;
    font: inherit;
    font-size: 0.85rem;
}

.tmf-select {
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 2rem;
    padding: 0 0.5rem;
    border: 1px solid var(--line);
    background: var(--bg-elevated);
    color: var(--text);
    border-radius: 10px;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}
.tmf-select--year   { width: 5.8rem; }
.tmf-select--season { width: 8.5rem; }
.tmf-select--grade  { width: 11rem; }

.tmf-reset {
    font-size: 0.82rem;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Tableau → cartes empilées sur téléphone (opt-in : .stacked-table-mobile) ──
   Un tableau de back-office consulté dans le dojo, téléphone en main, ne se lit
   pas en défilement horizontal : chaque ligne devient une carte et chaque cellule
   porte son en-tête via `data-label`. Écrit ici une seule fois — c'était un bloc
   local de la liste des membres de l'encadrement, repris tel quel par la feuille
   de présence. Une cellule sans `data-label` reste muette (pas d'étiquette
   fantôme), et `.card-title` désigne la cellule d'en-tête de la carte. */
@media (max-width: 640px) {
    .stacked-table-mobile .table-wrap { overflow: visible; }
    .stacked-table-mobile table,
    .stacked-table-mobile thead,
    .stacked-table-mobile tbody,
    .stacked-table-mobile tr,
    .stacked-table-mobile td {
        display: block;
        width: auto;
    }
    .stacked-table-mobile thead { display: none; }
    .stacked-table-mobile tbody tr {
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 0.6rem 0.85rem;
        margin-bottom: 0.7rem;
        background: var(--bg-elevated);
    }
    .stacked-table-mobile tbody td {
        border: 0;
        padding: 0.3rem 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.85rem;
    }
    .stacked-table-mobile tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: color-mix(in srgb, var(--text) 52%, transparent);
        padding-top: 0.12rem;
    }
    .stacked-table-mobile tbody td.card-title {
        display: block;
        border-bottom: 1px solid var(--line);
        padding-bottom: 0.5rem;
        margin-bottom: 0.35rem;
        font-size: 1.05rem;
    }
    .stacked-table-mobile tbody td.card-title::before { content: none; }
    /* `.card-stack` désigne la cellule dont le contenu est un BLOC (un panneau
       repliable, une liste de bascules) et non une valeur : l'étiquette passe
       au-dessus et le contenu prend toute la largeur de la carte. Mise en rangée
       comme les autres, elle se retrouvait comprimée dans la moitié droite. */
    .stacked-table-mobile tbody td.card-stack {
        display: block;
        padding-top: 0.5rem;
    }
    .stacked-table-mobile tbody td.card-stack[data-label]::before {
        display: block;
        margin-bottom: 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;
    line-height: 1.5;
    /* Flux bloc : une sous-titre est de la prose (peut contenir <strong>, <br>,
       liens, badges inline). Un conteneur flex transformerait chaque segment de
       texte en item flex séparé et ignorerait les <br> → texte dispersé. Les
       badges/icônes inline s'alignent naturellement au fil du texte. */
    display: block;
}

/* Badge/statut placé en tête d'une sous-titre : léger recentrage vertical. */
.page-subtitle > .badge,
.page-subtitle > [class*="badge"] {
    vertical-align: middle;
}

.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;
}

/* Pastilles d'épreuves avec actions inline (modifier / retirer).
   Les mini-boutons se fondent dans la pastille au lieu d'afficher le
   chrome par défaut du navigateur (l'ancienne classe .linklike n'existait
   pas → cases grises tassées dans la pastille). */
.event-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.event-chip {
    gap: 0.1rem;
    padding-block: 0.28rem;
    padding-inline: 0.7rem 0.32rem;
}

.event-chip__label {
    margin-inline-end: 0.15rem;
}

.event-chip__form {
    display: inline-flex;
    margin: 0;
}

.event-chip__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    line-height: 1;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.event-chip__action i {
    font-size: 0.95rem;
}

.event-chip__action:hover,
.event-chip__action:focus-visible {
    background: color-mix(in srgb, currentColor 20%, transparent);
    outline: none;
}

.event-chip__action--danger:hover,
.event-chip__action--danger:focus-visible {
    background: color-mix(in srgb, var(--danger) 22%, transparent);
    color: var(--danger-strong);
}

/* Colonne d'actions des tableaux compétition : boutons icône compacts et
   circulaires, sans le halo rouge du bouton danger qui bavait sur les lignes
   voisines (l'ombre par défaut de .button.danger, 0 8px 22px, était trop large
   pour une cellule serrée). */
.comp-row-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.comp-row-actions form {
    display: inline-flex;
    margin: 0;
}

.button.small.icon-only {
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    flex: 0 0 auto;
}

.button.small.icon-only i {
    font-size: 1.05rem;
    line-height: 1;
}

.comp-row-actions .button.danger {
    box-shadow: 0 2px 6px color-mix(in srgb, var(--brand-red) 16%, transparent);
}

.comp-row-actions .button.danger:hover {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-red) 24%, transparent);
    transform: translateY(-1px);
}

/* 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;
}

/* Sélection multi-membres (compte connecté) */
.comp-reg-members {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.comp-reg-member {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.comp-reg-member--active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.comp-reg-member--disabled {
    opacity: 0.6;
}

.comp-reg-member__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    margin: 0;
}

.comp-reg-member--disabled .comp-reg-member__head {
    cursor: not-allowed;
}

.comp-reg-member__head input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
}

.comp-reg-member__id {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1 1 auto;
    min-width: 0;
}

.comp-reg-member__name {
    font-weight: 600;
}

.comp-reg-member__meta {
    font-size: 0.8rem;
    color: var(--muted);
}

.comp-reg-member__body {
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--line);
    margin-top: 0.1rem;
}

.comp-reg-member__body .form-group {
    margin-top: 0.85rem;
}

.comp-reg-badge {
    flex: 0 0 auto;
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.comp-reg-badge--muted {
    background: var(--bg-subtle, rgba(127, 127, 127, 0.15));
    color: var(--muted);
}

.comp-reg-badge--warn {
    background: rgba(217, 119, 6, 0.15);
    color: #b45309;
}

/* Inscription visiteur — champs déterminant la catégorie (âge / genre / poids) */
.comp-reg-profile {
    margin-top: 0.35rem;
    padding-top: 1.1rem;
    border-top: 1px dashed var(--line);
}

/* Résumé de la catégorie déterminée dynamiquement */
.comp-cat-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.95rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.comp-cat-summary i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.comp-cat-summary--ok {
    background: color-mix(in srgb, var(--success) 55%, transparent);
    border-color: color-mix(in srgb, var(--success-strong) 40%, var(--line));
    color: var(--success-strong);
}

.comp-cat-summary--multi {
    background: color-mix(in srgb, var(--accent-soft) 50%, transparent);
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    color: var(--accent-strong);
}

/* Liste des catégories filtrées + épreuves */
.comp-reg-categories {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.comp-reg-category {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem 1rem;
    background: var(--bg-elevated);
}

.comp-reg-category__name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.comp-reg-category__name i {
    color: var(--accent);
}

.comp-reg-category__events {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.comp-reg-event {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.comp-empty--warn {
    border-color: color-mix(in srgb, var(--warning) 60%, var(--line));
    background: color-mix(in srgb, var(--warning) 28%, transparent);
    color: var(--text);
}

.comp-empty--warn i {
    opacity: 0.55;
}

/* 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 {
    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 {
    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 {
    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 {
    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;
    }
}

/* ── Responsive mobile/tablette — module compétitions ── */

/* Tablette et moins : les tableaux du module compétitions ne sont pas
   enveloppés dans .content-card/.form-card, donc ils n'héritent pas des
   règles globales. On les fait défiler à leur largeur naturelle plutôt que
   d'écraser les colonnes. */
@media (max-width: 768px) {
    .is-competition .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-competition .table-wrap table {
        inline-size: max-content;
        min-inline-size: 100%;
    }

    .is-competition .table-wrap th,
    .is-competition .table-wrap td {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* En-tête de page : titre puis actions empilées en pleine largeur.
       .is-competition surpasse le <style> inline de base.html. */
    .page-header,
    .is-competition .page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header-actions {
        width: 100%;
    }

    .page-header-actions > .button {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    /* Densité des cellules sur petit écran */
    .is-competition .table-wrap th,
    .is-competition .table-wrap td {
        padding: 0.6rem 0.55rem;
    }

    /* Cibles tactiles minimales pour les actions inline (pesée, inscriptions) */
    .inline-form-mini .button,
    .inline-form-mini .button.tiny {
        min-height: 40px;
        min-width: 40px;
    }

    .inline-form-mini .form-control--inline {
        min-height: 40px;
        width: 6.5rem;
    }

    /* Carte « match en cours » : empilement vertical lisible */
    .live-match-card {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    /* Formulaires : un seul champ par ligne sur téléphone */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Grille d'actions : pleine largeur pour faciliter le tap */
    .comp-action-grid {
        grid-template-columns: 1fr;
    }

    .comp-action-grid .button.primary {
        grid-column: span 1;
    }
}

/* ── 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;
    }
}

/* ── Palette de commandes admin (Ctrl+K) ─────────────────────────────────── */

.command-palette-fab {
    position: fixed;
    bottom: 1.1rem;
    left: 1.1rem;
    z-index: 1180;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--bg-elevated-strong);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.82rem;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.command-palette-fab:hover,
.command-palette-fab:focus-visible {
    color: var(--text);
    border-color: var(--accent);
}

.command-palette-fab kbd {
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-soft);
    font-size: 0.7rem;
    font-family: var(--font-body);
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .command-palette-fab-label,
    .command-palette-fab kbd {
        display: none;
    }

    .command-palette-fab {
        padding: 0.55rem;
    }
}

@media print {
    .command-palette-fab {
        display: none;
    }
}

.command-palette-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: min(14vh, 8rem) 1rem 2rem;
    background: color-mix(in srgb, var(--bg) 55%, rgba(4, 8, 16, 0.45));
    backdrop-filter: blur(3px);
}

/* display:flex ci-dessus l'emporterait sur l'attribut hidden : on le rétablit. */
.command-palette-overlay[hidden] {
    display: none;
}

body.command-palette-lock {
    overflow: hidden;
}

.command-palette-dialog {
    width: min(620px, 100%);
    max-height: min(70vh, 34rem);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--bg-elevated-strong);
    box-shadow: var(--shadow-strong);
    overflow: hidden;
}

.command-palette-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--line);
    color: var(--text-muted);
}

.command-palette-input {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1rem;
    outline: none;
}

.command-palette-close {
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-soft);
    color: var(--text-muted);
    font-size: 0.72rem;
    cursor: pointer;
}

.command-palette-results {
    overflow-y: auto;
    padding: 0.5rem;
}

.command-palette-group-label {
    margin: 0.5rem 0.6rem 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.command-palette-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
}

.command-palette-item.is-active {
    background: var(--accent-soft);
    color: var(--text);
}

.command-palette-item-label {
    font-weight: 600;
    font-size: 0.95rem;
}

.command-palette-item-meta {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.command-palette-empty {
    margin: 1rem 0.7rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ── Sélection en lot (liste des inscriptions) ────────────────────────────── */

.registrations-table .expand-cell {
    width: 5.8rem;
    white-space: nowrap;
    vertical-align: middle;
}

.bulk-select-checkbox,
.bulk-select-all {
    appearance: none;
    -webkit-appearance: none;
    width: 1.45rem;
    height: 1.45rem;
    margin: 0 0.55rem 0 0;
    border: 2px solid color-mix(in srgb, var(--accent) 45%, var(--line));
    border-radius: 7px;
    background: var(--bg-elevated);
    cursor: pointer;
    vertical-align: middle;
    display: inline-grid;
    place-content: center;
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.bulk-select-checkbox::before,
.bulk-select-all::before {
    content: "";
    width: 0.78rem;
    height: 0.78rem;
    transform: scale(0);
    transition: transform 120ms ease-in-out;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    background: var(--on-accent);
}

.bulk-select-checkbox:hover,
.bulk-select-checkbox:focus-visible,
.bulk-select-all:hover,
.bulk-select-all:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-soft) 60%, transparent);
}

.bulk-select-checkbox:checked,
.bulk-select-all:checked {
    background: linear-gradient(140deg, var(--accent), var(--accent-strong));
    border-color: var(--accent-strong);
}

.bulk-select-checkbox:checked::before,
.bulk-select-all:checked::before {
    transform: scale(1);
}

/* Case maître « tout sélectionner » : centrée dans l'en-tête, sans marge. */
th .bulk-select-all {
    margin: 0;
}

/* Ligne de lot sélectionnée : surlignage + filet accent à gauche. */
.registrations-table .group-summary-row:has(.bulk-select-checkbox:checked) {
    background: color-mix(in srgb, var(--accent-soft) 42%, transparent);
    box-shadow: inset 3px 0 0 var(--accent);
}

.registrations-table .group-summary-row:has(.bulk-select-checkbox:checked) td {
    border-bottom-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}

/* ── Rédaction IA (popup « Rédiger avec l'IA ») ───────────────────────────── */

.ai-text-creator {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: min(16vh, 9rem) 1rem 2rem;
    background: color-mix(in srgb, var(--bg) 55%, rgba(4, 8, 16, 0.45));
    backdrop-filter: blur(3px);
}

.ai-text-creator[hidden] {
    display: none;
}

.ai-text-creator__dialog {
    width: min(560px, 100%);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.1rem 1.2rem 1.2rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--bg-elevated-strong);
    box-shadow: var(--shadow-strong);
}

.ai-text-creator__title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.05rem;
}

.ai-text-creator__context {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.ai-text-creator__prompt {
    resize: vertical;
    min-height: 6.5rem;
}

.ai-text-creator__lengths {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.ai-text-creator__length {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--text-muted);
    background: var(--surface-soft);
}

.ai-text-creator__length:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--text);
    font-weight: 600;
}

.ai-text-creator__length input {
    accent-color: var(--accent);
}

.ai-text-creator__replace {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
}

.ai-text-creator__status {
    margin: 0;
    min-height: 1.1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.ai-text-creator__actions {
    justify-content: flex-end;
}

/* ─── Bannière d'installation PWA (mobile) ─────────────────────────── */

.pwa-install-banner {
    position: fixed;
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    z-index: 1200;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.9rem 2.4rem 0.9rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-strong);
    opacity: 0;
    transform: translateY(0.9rem);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.pwa-install-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.pwa-install-banner__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
}

.pwa-install-banner__body {
    min-width: 0;
    flex: 1;
}

.pwa-install-banner__title {
    margin: 0 0 0.2rem;
    font-family: var(--font-title);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text);
}

.pwa-install-banner__text {
    margin: 0 0 0.65rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-muted);
}

.pwa-install-banner__text .ph {
    vertical-align: -0.12em;
}

.pwa-install-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pwa-install-banner__close {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
}

.pwa-install-banner__close:hover,
.pwa-install-banner__close:focus-visible {
    background: var(--surface-soft);
    color: var(--text);
}

@media (min-width: 640px) {
    .pwa-install-banner {
        left: auto;
        right: 1.25rem;
        max-width: 26rem;
    }
}

/* ─────────────────────────────────────────────────────────────
   Examens d'arbitre — passage & résultats (thème-aware, partagé)
   Rendu par templates/competitions/_exam_form.html
   ───────────────────────────────────────────────────────────── */

/* Carte de question (mode passage) */
.exam-question {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: var(--surface);
    color: var(--text);
}
.exam-question__title { font-size: 1rem; margin: 0 0 0.85rem; line-height: 1.45; }

.exam-choices { display: flex; flex-direction: column; gap: 0.5rem; }
.exam-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.exam-choice:hover { background: var(--surface-soft); }
.exam-choice:has(.exam-choice__input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.exam-choice__input { margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--accent); }
.exam-choice__text { line-height: 1.4; }

.exam-text-answer {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 1rem;
}
.exam-text-answer:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.exam-hint {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.55rem 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Barre de progression */
.exam-progress { margin: 1.25rem 0; }
.exam-progress__track {
    background: color-mix(in srgb, var(--text) 12%, transparent);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}
.exam-progress__bar {
    background: var(--accent);
    height: 100%;
    width: 0%;
    border-radius: 4px;
    transition: width 0.3s ease;
}
.exam-progress__label { font-size: 0.8rem; margin: 0.3rem 0 0; color: var(--text-muted); }

/* Résumé du résultat */
.exam-summary {
    border-radius: 14px;
    padding: 2rem 1.5rem;
    text-align: center;
    margin-bottom: 2rem;
    border: 2px solid var(--border-color);
    background: var(--surface);
    color: var(--text);
}
.exam-summary--pass {
    border-color: var(--success);
    background: color-mix(in srgb, var(--success) 14%, var(--surface));
}
.exam-summary--fail {
    border-color: var(--error);
    background: color-mix(in srgb, var(--error) 14%, var(--surface));
}
.exam-summary__score { font-size: 4rem; font-weight: 900; line-height: 1; }
.exam-summary__label { font-size: 1.5rem; font-weight: 700; margin: 0.5rem 0; }
.exam-summary__meta { font-size: 0.9rem; opacity: 0.85; margin: 0.35rem 0 0; }

/* Correction détaillée par question */
.exam-review {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--border-color);
    margin-bottom: 1rem;
    background: var(--surface);
    color: var(--text);
}
.exam-review--ok {
    border-left-color: var(--success);
    background: color-mix(in srgb, var(--success) 8%, var(--surface));
}
.exam-review--ko {
    border-left-color: var(--error);
    background: color-mix(in srgb, var(--error) 8%, var(--surface));
}
.exam-review__title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-size: 1rem;
    line-height: 1.45;
}
.exam-review__icon { font-size: 1.2rem; flex-shrink: 0; align-self: center; }
.exam-review--ok .exam-review__icon { color: var(--success); }
.exam-review--ko .exam-review__icon { color: var(--error); }

.exam-review-choices { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.exam-review-choice { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.92rem; padding: 0.25rem 0; }
.exam-review-choice__icon { flex-shrink: 0; opacity: 0.4; }
.exam-review-choice.is-correct { color: var(--success-strong); font-weight: 600; }
.exam-review-choice.is-correct .exam-review-choice__icon { opacity: 1; color: var(--success); }
.exam-review-choice.is-wrong { color: var(--danger-strong); }
.exam-review-choice.is-wrong .exam-review-choice__icon { opacity: 1; color: var(--error); }
.exam-review-choice.is-wrong .exam-review-choice__text { text-decoration: line-through; }
.exam-review-choice__note { font-size: 0.82rem; opacity: 0.7; font-style: italic; }

.exam-review-answer { font-size: 0.92rem; margin-top: 0.3rem; }
.exam-review-answer__label { color: var(--text-muted); margin-right: 0.35rem; }
.exam-review-answer__value.is-correct { color: var(--success-strong); font-weight: 600; }
.exam-review-answer__value.is-wrong { color: var(--danger-strong); font-weight: 600; }

.exam-review__explanation {
    margin: 0.8rem 0 0;
    padding: 0.6rem 0.9rem;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    border-radius: 8px;
    font-size: 0.88rem;
    color: var(--text-muted);
    display: flex;
    gap: 0.4rem;
    align-items: baseline;
}

/* ==========================================================================
   Mockup de publication sociale (aperçu Facebook/Instagram)
   Partagé : communications automatisées (modale d'aperçu IA) et pages
   Publications Facebook/Instagram (aperçu en direct du formulaire).
   ========================================================================== */

.social-preview-mockup {
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    background: #ffffff;
    color: #1c1e21;
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 460px;
    margin: 0 auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.social-preview-mockup__header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.9rem;
}

.social-preview-mockup__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e8f0fe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.social-preview-mockup__more {
    font-size: 1.1rem;
    color: #65676b;
    letter-spacing: 0.05em;
    cursor: default;
    user-select: none;
}

.social-preview-mockup__name {
    font-weight: 700;
    font-size: 0.875rem;
    display: block;
    color: #050505;
    line-height: 1.3;
}

.social-preview-mockup__meta {
    font-size: 0.72rem;
    color: #65676b;
    display: block;
}

.social-preview-mockup__body {
    padding: 0 0.9rem 0.75rem;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #1c1e21;
    max-height: 220px;
    overflow-y: auto;
    font-size: 0.9rem;
    line-height: 1.55;
}

/* ---- Facebook ---- */
.social-preview-mockup--fb {
    border: 1px solid #d8dadf;
}

.social-preview-mockup--fb .social-preview-mockup__header {
    background: #ffffff;
    border-bottom: 1px solid #f0f2f5;
}

.social-preview-mockup--fb .social-preview-mockup__avatar--fb {
    background: #e7f3ff;
}

.social-preview-mockup--fb .social-preview-mockup__name {
    color: #1877f2;
}

.social-preview-mockup__reaction-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.9rem;
    font-size: 0.78rem;
    color: #65676b;
    border-bottom: 1px solid #f0f2f5;
}

.social-preview-mockup__reactions {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.reaction-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 0.7rem;
    margin-left: -4px;
    border: 1.5px solid #fff;
    background: #fff;
}

.reaction-bubble:first-child { margin-left: 0; }

.reaction-count {
    margin-left: 0.2rem;
    font-weight: 500;
    color: #65676b;
}

.reaction-right { color: #65676b; }

.social-preview-mockup__actions {
    display: flex;
    gap: 0;
    padding: 0.25rem 0.5rem;
    border-top: 1px solid #f0f2f5;
}

.mock-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #65676b;
    background: none;
    border: none;
    padding: 0.45rem 0.5rem;
    cursor: default;
    border-radius: 4px;
}

/* ---- Instagram ---- */
.social-preview-mockup--ig {
    border: 1px solid #dbdbdb;
    background: #ffffff;
}

.mailjournal-preview__frame--full {
    height: 70vh;
    min-height: 24rem;
}

.social-preview-mockup--ig .social-preview-mockup__header {
    background: #ffffff;
    border-bottom: 1px solid #efefef;
}

.social-preview-mockup__avatar--ig {
    background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
    color: #fff;
    border: 2px solid transparent;
    outline: 2px solid #e1306c;
    outline-offset: 1px;
}

.social-preview-mockup__photo-placeholder {
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 40%, #0f3460 70%, #533483 100%);
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.social-preview-mockup__photo-placeholder--fb {
    height: 260px;
    background: linear-gradient(145deg, #1877f2 0%, #0a5dc2 60%, #053a87 100%);
}

.ig-photo-dojo-name {
    color: rgba(255,255,255,0.9);
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    padding: 0 1rem;
    letter-spacing: 0.03em;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    z-index: 1;
}

.social-preview-mockup__ig-actions {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem 0.3rem;
    gap: 0.5rem;
}

.mock-icon-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: default;
    color: #262626;
    display: flex;
    align-items: center;
}

.ig-actions-left {
    display: flex;
    gap: 0.5rem;
}

.social-preview-mockup__ig-likes {
    padding: 0 0.9rem 0.25rem;
    font-size: 0.83rem;
    color: #262626;
}

.social-preview-mockup__ig-footer {
    padding: 0.35rem 0.9rem 0.6rem;
    font-size: 0.72rem;
    color: #8e8e8e;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.social-preview-mockup__hashtags {
    padding: 0 0.9rem 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.4rem;
    line-height: 1.6;
}

.ig-hashtag {
    color: #0095f6;
    font-weight: 500;
    font-size: 0.85rem;
}

/* Galerie d'images du mockup (aperçu en direct des pages Publications) :
   approximation des dispositions Facebook (1 pleine largeur, 2 côte à côte,
   3 = une grande + deux, 4+ = grille 2×2 avec pastille « +N »). */
.social-preview-mockup__photos {
    display: grid;
    gap: 2px;
    grid-template-columns: 1fr 1fr;
    background: #f0f2f5;
}

.social-preview-mockup__photos[hidden] {
    display: none;
}

.social-preview-mockup__photo {
    position: relative;
    overflow: hidden;
    min-height: 0;
    height: 150px;
}

.social-preview-mockup__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.social-preview-mockup__photo--wide {
    grid-column: 1 / -1;
    height: 220px;
}

.social-preview-mockup__photos--single .social-preview-mockup__photo {
    grid-column: 1 / -1;
    height: 280px;
}

.social-preview-mockup__photo--more::after {
    content: attr(data-more);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 700;
}

/* Carte de lien (aperçu du lien partagé, style Facebook) */
.social-preview-mockup__linkcard {
    display: block;
    background: #f0f2f5;
    border-top: 1px solid #e4e6eb;
    border-bottom: 1px solid #e4e6eb;
    padding: 0.6rem 0.9rem;
}

.social-preview-mockup__linkcard-domain {
    display: block;
    font-size: 0.7rem;
    color: #65676b;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.social-preview-mockup__linkcard-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #050505;
    word-break: break-all;
}

/* Hashtags Facebook (rendus en bleu dans le corps du message) */
.fb-hashtag {
    color: #1877f2;
    font-weight: 500;
}

/* Badge « 1/N » d'un carrousel Instagram */
.social-preview-mockup__carousel-badge {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    z-index: 1;
}

/* Image réelle dans la zone photo du mockup Instagram */
.social-preview-mockup__photo-placeholder img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   Coordonnées protégées (courriel / téléphone) — puce anti-moisson
   L'image SVG de repli est monochrome (encodée en base64, illisible pour les
   robots) : isolée dans un <img>, elle ne peut pas lire le thème du site, c'est
   donc la page qui l'inverse ici sur les thèmes sombres. Voir
   app/contact_protection.py et static/js/protected_{email,phone}.js.
   ========================================================================== */
.contact-chip {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.contact-chip-img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    transition: filter 160ms ease, transform 160ms ease, opacity 160ms ease;
}

/* Lien cliquable (mailto:/tel:) hydraté par le JS : léger retour au survol. */
.contact-chip--link {
    cursor: pointer;
    border-radius: 10px;
}

.contact-chip--link:hover .contact-chip-img,
.contact-chip--link:focus-visible .contact-chip-img {
    opacity: 0.85;
    transform: translateY(-1px);
}

.contact-chip--link:focus-visible {
    outline: 2px solid var(--primary-accent, #2563eb);
    outline-offset: 3px;
    border-radius: 10px;
}

/* Thèmes sombres : on inverse la puce (encre foncée → claire) tout en
   préservant la teinte. Le SVG est neutre, l'inversion reste propre. */
html[data-theme="dark"] .contact-chip-img,
html[data-theme="aurora"] .contact-chip-img,
html[data-theme="sunset-dark"] .contact-chip-img,
html[data-theme="paper-ink-dark"] .contact-chip-img,
html[data-theme="vampire"] .contact-chip-img {
    filter: invert(1) hue-rotate(180deg);
}

/* ── Options boutique (accordeon, miroir de .fest-acc) ────────────────── */
.shop-acc {
    border: 1px solid var(--line, rgba(0, 0, 0, .12));
    border-radius: 12px;
    margin-bottom: .75rem;
    background: var(--surface, #fff);
    overflow: hidden;
}
.shop-acc--inactive { opacity: .6; }
.shop-acc__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem 1rem;
    font-size: .95rem;
    user-select: none;
}
.shop-acc__summary::-webkit-details-marker { display: none; }
.shop-acc__summary:hover { background: rgba(0, 0, 0, .02); }
.shop-acc__chevron {
    transition: transform .2s ease;
    flex: 0 0 auto;
    opacity: .6;
    font-size: 1rem;
}
.shop-acc[open] > .shop-acc__summary .shop-acc__chevron { transform: rotate(90deg); }
.shop-acc__title { font-weight: 600; }
.shop-acc__meta {
    margin-left: auto;
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    align-items: center;
}
.shop-acc__badge {
    font-size: .75rem;
    padding: .1rem .55rem;
    border-radius: 99px;
    background: var(--bg-muted, #f0f0f0);
    color: var(--text, #333);
    white-space: nowrap;
}
.shop-acc__badge--price { font-family: var(--font-mono, monospace); }
.shop-acc__badge--warn { background: var(--warning-bg, #fff3cd); color: var(--warning, #856404); }
.shop-acc__body { padding: 0 1rem 1rem; }
.shop-option-rows { margin-bottom: .5rem; }
.shop-option-row {
    display: flex;
    gap: .75rem;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: .5rem 0;
    border-top: 1px solid var(--line, rgba(0, 0, 0, .08));
}
.shop-opt-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: var(--bg-muted, #f0f0f0);
    border-radius: 99px;
    padding: .15rem .65rem;
    font-size: .8rem;
}
/* Barre de recherche de la bibliothèque + attache des groupes à un produit
   (socles `templates/_option_library.html` et `_option_attach.html`). */
.shop-opt-toolbar {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.shop-opt-toolbar__search { flex: 1 1 240px; max-width: 280px; }
.shop-opt-attach-row {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
    padding: .5rem 0;
    border-top: 1px solid var(--line, rgba(0, 0, 0, .08));
}
.shop-opt-preview { display: flex; gap: .35rem; flex-wrap: wrap; flex: 2 1 300px; }
.shop-opt-chip--default {
    background: color-mix(in srgb, var(--accent, #2563eb) 12%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 30%, transparent);
}
.shop-opt-chip__price { color: var(--muted, #666); font-weight: 600; }
.shop-opt-chip__price--muted { font-weight: 500; opacity: .8; }
.shop-opt-chip i { font-size: .8rem; opacity: .7; }
.shop-opt-edit { font-size: .8rem; color: var(--muted, #666); text-decoration: none; }
.shop-opt-edit:hover { text-decoration: underline; }

/* ──────────────────────────────────────────────────────────────────────────
   Parcours de démarrage de l'école (templates/admin/school_setup.html)
   Liste verticale d'étapes : le parcours entier est visible d'un coup d'œil,
   chaque condition non remplie porte son propre lien de correction.
   ────────────────────────────────────────────────────────────────────────── */
.setup-steps,
.setup-progress-card {
    --setup-ok-seed: #1f9d57;   /* même vert que .badge-success */
}

.setup-progress {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.setup-progress__track {
    position: relative;
    height: 0.65rem;
    border-radius: 99px;
    overflow: hidden;
    background: color-mix(in srgb, var(--line) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 85%, var(--accent) 15%);
}

.setup-progress__fill {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 72%, #ffffff 28%),
        var(--accent));
    transition: width var(--transition-slow, 420ms) ease;
}

.setup-progress__label {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.setup-progress__next {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    color: var(--text);
}

.setup-progress__next i {
    color: var(--accent);
    font-size: 1.05rem;
}

.setup-progress__next a {
    font-weight: 700;
    color: var(--accent);
    text-underline-offset: 3px;
}

.setup-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.setup-step {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    border-left: 3px solid color-mix(in srgb, var(--accent) 45%, var(--line));
}

/* Étape complétée : on la garde lisible mais elle cesse d'attirer l'œil —
   c'est ce qui reste à faire qui doit ressortir. Le vert suit la même graine
   et les mêmes mélanges que `.badge-success` : lisible dans les deux thèmes. */
.setup-step.is-ready {
    border-left-color: color-mix(in srgb, var(--setup-ok-seed) 52%, var(--line));
    background: color-mix(in srgb, var(--setup-ok-seed) 8%, var(--bg-elevated));
}

.setup-step__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.85rem;
}

.setup-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    font-weight: 800;
    font-size: 0.95rem;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
    background: color-mix(in srgb, var(--bg-elevated) 58%, var(--accent-soft) 42%);
    color: var(--text);
}

.setup-step.is-ready .setup-step__number {
    border-color: color-mix(in srgb, var(--setup-ok-seed) 52%, var(--line));
    background: color-mix(in srgb, var(--setup-ok-seed) 24%, var(--bg-elevated));
    color: color-mix(in srgb, var(--setup-ok-seed) 72%, var(--text));
}

.setup-step__title h2 {
    margin: 0.15rem 0 0.3rem;
    font-size: 1.18rem;
}

.setup-step__title .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
}

.setup-step__title .admin-hub-description {
    margin: 0;
}

.setup-checks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    border-radius: 12px;
    overflow: hidden;
}

.setup-check {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
}

.setup-check + .setup-check {
    border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
}

.setup-check__icon {
    font-size: 1.15rem;
    flex: 0 0 auto;
}

.setup-check.is-ok .setup-check__icon {
    color: color-mix(in srgb, var(--setup-ok-seed) 78%, var(--text));
}

.setup-check.is-todo .setup-check__icon {
    color: color-mix(in srgb, var(--muted) 70%, var(--accent) 30%);
}

.setup-check.is-ok .setup-check__label {
    color: var(--muted);
}

.setup-check__label {
    flex: 1 1 12rem;
    min-width: 0;
}

.setup-check__fix {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--accent);
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.setup-check__fix:hover,
.setup-check__fix:focus-visible {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 58%, transparent);
}

.setup-step__manual {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px dashed color-mix(in srgb, var(--line) 78%, transparent);
}

.setup-step__manual form {
    margin: 0;
}

.setup-step__manual-hint {
    margin: 0;
    flex: 1 1 16rem;
    font-size: 0.82rem;
    color: var(--muted);
}

@media (max-width: 720px) {
    .setup-step__head {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .setup-step__head .badge {
        grid-column: 2;
        justify-self: start;
    }

    .setup-check__fix {
        margin-left: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INVARIANT `hidden` — À GARDER EN DERNIÈRE POSITION DE LA FEUILLE
   ═══════════════════════════════════════════════════════════════════════════
   `[hidden] { display: none }` vient de la feuille de l'AGENT UTILISATEUR : à
   spécificité égale, n'importe quelle règle d'auteur la bat. Une simple
   `.mon-bloc { display: flex }` suffit donc à rendre visible un élément que le
   gabarit ou le JS croit masqué — le bogue est silencieux, puisque le balisage
   « dit » hidden.

   Mesuré dans Chromium sur les feuilles réelles : 19 éléments étaient dans ce
   cas (pastille d'erreur des champs heure, aperçu de média, résultat du test
   Interac, bouton de téléchargement des diplômes, encart « Saison dernière »,
   avertissements du scanner, bouton « Réafficher les suggestions ignorées »…).

   Garde à (0,3,0) : l'attribut doublé est un rehaussement de spécificité
   DÉLIBÉRÉ (préféré à `!important`, cf. conventions du projet), suffisant pour
   couvrir les sélecteurs composés. `:not([hidden="until-found"])` préserve la
   sémantique HTML du masquage révélé par la recherche dans la page.

   ⚠️ Un élément qui doit rester affiché ne doit PAS porter `hidden` : c'est le
   balisage qu'il faut corriger, pas cette garde qu'il faut affaiblir. */
[hidden][hidden]:not([hidden="until-found"]) {
    display: none;
}

/* ── Terminal virtuel (caisse) ────────────────────────────────────────────────
   Deux colonnes : le catalogue à gauche (statique pendant la vente), la zone
   vivante à droite (client, panier, encaissement, reçus) qui est le seul bloc
   re-rendu après chaque action AJAX. Sur petit écran, tout s'empile — le
   catalogue d'abord, puisque c'est par lui que commence une vente. */
.pos-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 1.25rem;
    align-items: start;
}

/* Le catalogue se fige AVANT de passer sous le menu : son point d'arrêt est le
   bas du chrome collant (bandeaux + en-tête), pas le haut de la fenêtre — avec
   `top: 1rem`, la colonne se figeait derrière le menu, dont le premier tiers
   restait masqué. La zone vivante, elle, continue de monter. */
.pos-grid__catalog {
    position: sticky;
    top: calc(var(--dojo-sticky-offset, 7.75rem) + 1rem);
}

@media (max-width: 1100px) {
    .pos-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pos-grid__catalog {
        position: static;
    }
}

/* ⚠️ La liste se borne aussi à ce qui RESTE sous le chrome : une colonne plus
   haute que la fenêtre ne colle pas au point demandé (le navigateur la laisse
   défiler jusqu'à ce que son bas soit visible). Les ~13rem retranchées sont
   l'en-tête de la carte et le champ de recherche, au-dessus de la liste ;
   le plancher de 14rem garde la liste utilisable sur un écran très court. */
.pos-catalog {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: min(62vh, 40rem, max(14rem, calc(100dvh - var(--dojo-sticky-offset, 7.75rem) - 13rem)));
    overflow-y: auto;
    padding-right: 0.25rem;
}

.pos-catalog__item {
    border: 1px solid var(--border, rgba(128, 128, 128, 0.28));
    border-radius: 0.6rem;
    background: var(--surface-2, transparent);
}

.pos-catalog__item[open] {
    border-color: var(--accent, #3b82f6);
    box-shadow: 0 0 0 1px var(--accent, #3b82f6);
}

.pos-catalog__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    list-style: none;
}

.pos-catalog__summary::-webkit-details-marker {
    display: none;
}

.pos-catalog__title {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.pos-catalog__name {
    font-weight: 600;
    line-height: 1.25;
}

.pos-catalog__sub {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 400;
}

.pos-catalog__cat {
    color: var(--muted, #6b7280);
}

.pos-catalog__price {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

/* Étiquette discrète : `.badge` passe en majuscules et pèse trop pour une
   liste dense où l'information principale est le nom de l'article. */
.pos-tag {
    display: inline-block;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    border: 1px solid var(--border, rgba(128, 128, 128, 0.35));
    color: var(--muted, #6b7280);
    font-size: 0.72rem;
    line-height: 1.5;
    white-space: nowrap;
}

.pos-tag--service {
    border-color: color-mix(in srgb, var(--accent, #3b82f6) 45%, transparent);
    color: var(--accent, #3b82f6);
}

.pos-tag--warn {
    border-color: color-mix(in srgb, #d97706 45%, transparent);
    color: #b45309;
}

/* Numéro d'étape : l'écran se lit 1 → 4 (choisir, client, panier, encaisser). */
.pos-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-right: 0.4rem;
    border-radius: 50%;
    background: var(--accent, #3b82f6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.pos-panel--todo {
    border-left: 3px solid var(--accent, #3b82f6);
}

.pos-panel__state {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
}

.pos-panel__ok {
    color: #16a34a;
    font-size: 1.05rem;
}

.pos-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pos-hints {
    margin: 0.6rem 0 0;
    padding-left: 1.1rem;
    color: var(--muted, #6b7280);
    font-size: 0.83rem;
    line-height: 1.5;
}

.pos-checkout {
    padding-top: 0.9rem;
    border-top: 1px solid var(--border, rgba(128, 128, 128, 0.28));
}

.pos-catalog__form {
    padding: 0 0.75rem 0.75rem;
}

.pos-client-tabs {
    display: inline-flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Sélecteur de client du carnet (`static/js/customer_picker.js`). Préfixe
   neutre `.customer-picker-` : le composant est destiné à tout écran de vente
   du back-office, pas seulement au terminal virtuel. */
.customer-picker {
    position: relative;
}

.customer-picker__results {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    max-height: 16rem;
    overflow-y: auto;
    margin: 0.2rem 0 0;
    padding: 0.25rem;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg-elevated);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.customer-picker__option {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.customer-picker__option:hover,
.customer-picker__option:focus-visible {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.customer-picker__meta,
.customer-picker__empty {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.customer-picker__empty {
    padding: 0.45rem 0.6rem;
}

.customer-picker__create {
    padding: 0.6rem;
    border: 1px dashed var(--line);
    border-radius: 12px;
}

/* En-tête d'une fiche du carnet. Chaque valeur a son porteur, rendu même vide
   pour que `customer_picker.js` puisse l'alimenter après un enregistrement :
   d'où le masquage des porteurs vides, et un espacement par `gap` plutôt que
   par des séparateurs « · » qui laisseraient des points orphelins. */
#customers-live .filter-collapse__title,
#customers-live .filter-collapse__meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.55rem;
}

#customers-live .filter-collapse__meta {
    justify-content: flex-end;
}

#customers-live .filter-collapse__title > span:empty,
#customers-live .filter-collapse__meta > span:empty {
    display: none;
}

/* Même raison côté Festifun : le badge de compagnie est rendu même vide pour
   que le script puisse l'alimenter après un enregistrement. */
#fest-clients .badge:empty {
    display: none;
}

.pos-totals {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
}

.pos-totals > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.pos-totals dt,
.pos-totals dd {
    margin: 0;
}

.pos-totals dd {
    font-variant-numeric: tabular-nums;
}

.pos-totals__discount dd {
    color: #16a34a;
}

.pos-totals__grand {
    padding-top: 0.35rem;
    border-top: 1px solid var(--border, rgba(128, 128, 128, 0.28));
    font-size: 1.25rem;
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════════
   Boutique du membre — parcours d'achat (panier → paiement → confirmation)

   Le panier était un tableau de données et les totaux une ligne de bas de page :
   rien ne disait où on en était, ce qu'on achetait, ni combien on allait payer
   avant de faire défiler. Ces règles apportent le repère d'étapes, la ligne de
   panier lisible (vignette + détail), et le récapitulatif qui reste sous les yeux.
   Tous les tons viennent des jetons du thème : clair et sombre suivent d'office.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Fil des étapes (templates/_shop_steps.html) ────────────────────────── */
.shop-steps {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
}

.shop-steps__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem 0.35rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.shop-steps__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--line) 45%, transparent);
    color: inherit;
    font-size: 0.9rem;
}

.shop-steps__item.is-current {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 70%, var(--bg-elevated));
    color: var(--text);
}

.shop-steps__item.is-current .shop-steps__marker {
    background: var(--accent);
    color: #fff;
}

.shop-steps__item.is-done {
    color: var(--text);
}

.shop-steps__item.is-done .shop-steps__marker {
    background: color-mix(in srgb, var(--success, #16a34a) 22%, var(--bg-elevated));
    color: var(--success-strong, #14532d);
}

/* ── Panier : lignes à gauche, récapitulatif qui suit à droite ──────────── */
.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: 1.1rem;
    align-items: start;
}

@media (max-width: 900px) {
    .cart-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cart-summary {
    position: sticky;
    /* Sous l'en-tête collant : le récapitulatif reste visible en faisant défiler. */
    top: 5.5rem;
}

@media (max-width: 900px) {
    .cart-summary {
        position: static;
    }
}

.cart-lines {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cart-line {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: start;
    padding: 0.85rem 0;
    border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.cart-line:first-child {
    border-top: 0;
    padding-top: 0.25rem;
}

.cart-line__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-elevated) 90%, var(--accent-soft));
    color: var(--muted);
    font-size: 1.4rem;
}

.cart-line__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-line__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.cart-line__variant {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.cart-line__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.55rem;
    margin-top: 0.35rem;
    color: var(--muted);
    font-size: 0.8rem;
}

.cart-line__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 38%, transparent);
}

.cart-line__details {
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.cart-line__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    text-align: right;
}

.cart-line__price {
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
}

.cart-line__unit {
    color: var(--muted);
    font-size: 0.78rem;
}

@media (max-width: 560px) {
    .cart-line {
        grid-template-columns: 3.25rem minmax(0, 1fr);
    }

    .cart-line__media {
        width: 3.25rem;
        height: 3.25rem;
    }

    .cart-line__side {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
}

/* Code promo du panier : le champ et son bouton sur une seule ligne. */
.cart-promo {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.cart-promo__field {
    flex: 1 1 9rem;
    min-width: 0;
}

.cart-promo__applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* ── Vitrine : le prix d'abord ──────────────────────────────────────────────
   Le montant se lisait dans une pastille grise, à égalité visuelle avec l'état
   du stock. Il redevient l'information principale de la carte. */
.catalog-page .catalog-item-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.65rem;
}

.catalog-page .catalog-item-price__amount {
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.catalog-page .catalog-item-price__unit {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
}


/* ── Vitrine : carte d'article attirante ────────────────────────────────────
   La carte listait des champs de formulaire ; elle doit d'abord donner envie.
   Élévation au survol, description écrêtée pour une grille régulière, état posé
   sur la photo, et champ de durée compact plutôt qu'un pavé de texte. */
.catalog-page .catalog-item-card:hover,
.catalog-page .catalog-item-card:focus-within {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--accent) 55%, transparent);
}

.catalog-page .catalog-item-description {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Écrêtage réversible : la grille reste régulière, le texte reste lisible en
   entier d'un clic. Pas de voile dégradé — le fond de la carte est lui-même un
   dégradé, un voile de couleur unie s'y verrait. */
.catalog-page .catalog-item-desc.is-clamped .catalog-item-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.catalog-page .catalog-item-desc__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.catalog-page .catalog-item-desc__toggle:hover,
.catalog-page .catalog-item-desc__toggle:focus-visible {
    text-decoration: underline;
}

.catalog-page .catalog-item-desc__toggle i {
    font-size: 0.9rem;
}

/* Étiquette d'état posée sur la photo. */
.catalog-page .catalog-item-flag {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-elevated) 88%, transparent);
    backdrop-filter: blur(6px);
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.45);
}

.catalog-page .catalog-item-flag--service {
    background: color-mix(in srgb, var(--accent) 82%, transparent);
    color: #fff;
}

.catalog-page .catalog-item-flag--low {
    background: color-mix(in srgb, var(--warning, #f59e0b) 86%, transparent);
    color: #3b2a00;
}

.catalog-page .catalog-item-flag--out {
    background: color-mix(in srgb, var(--danger, #dc2626) 84%, transparent);
    color: #fff;
}

/* Durée facturée : l'unité vit dans le champ, l'aide tient sur une ligne. */
.catalog-duration__control {
    position: relative;
}

.catalog-duration__control .form-input {
    padding-right: 3rem;
    /* Les flèches natives se battraient avec l'unité affichée à droite. */
    appearance: textfield;
    -moz-appearance: textfield;
}

.catalog-duration__control .form-input::-webkit-outer-spin-button,
.catalog-duration__control .form-input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.catalog-duration__unit {
    position: absolute;
    top: 50%;
    right: 0.9rem;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    pointer-events: none;
}

.catalog-duration__hint {
    margin-top: 0.3rem;
    font-size: 0.78rem;
}

/* Icône + libellé collés dans les boutons du parcours boutique (`.button` est en
   inline-flex sans `gap`). Corrigé ici seulement : la règle globale toucherait
   toutes les pages du site. */
.catalog-page .button,
.cart-layout .button,
#shop-checkout-form .button {
    gap: 0.4rem;
}

.catalog-page .catalog-item-foot {
    margin-top: 0.55rem;
    font-size: 0.8rem;
}

/* --- Page sysadmin « Automatisations » : colonne « Dernier résultat » -------
   Les jobs renvoient un dict (`{'status': 'success', 'emails_sent': 3}`)
   reparsé côté serveur (app/scheduler_result_format.py) : statut + motif sur
   la première ligne, puis un compteur par ligne, libellé à gauche et valeur
   à droite. Les zéros passent en sourdine pour laisser ressortir le reste. */
.job-result {
    display: grid;
    gap: 0.4rem;
    justify-items: start;
    max-inline-size: 22rem;
}

.job-result__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.35;
}

.job-result__head .badge {
    padding: 0.15rem 0.55rem;
    font-size: 0.68rem;
}

.job-result__stats {
    display: grid;
    gap: 0.2rem;
    margin: 0;
    inline-size: 100%;
    font-size: 0.85rem;
}

.job-result__stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    border-block-end: 1px dotted color-mix(in srgb, var(--line) 60%, transparent);
    padding-block-end: 0.2rem;
}

.job-result__stat:last-child {
    border-block-end: 0;
    padding-block-end: 0;
}

.job-result__stat dt {
    color: var(--muted);
}

.job-result__stat dd {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.job-result__stat.is-zero dd {
    font-weight: 600;
    color: var(--muted);
}

/* Valeur trop longue pour la colonne : elle passe sous son libellé. */
.job-result__stat--block {
    display: grid;
    justify-items: stretch;
    gap: 0.15rem;
}

.job-result__stat--block dd {
    text-align: left;
    font-weight: 600;
}

.job-result__text {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.35;
    max-inline-size: 22rem;
}

.job-result__text.is-zero {
    color: var(--muted);
}

.job-result__details summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.85rem;
}

.job-result pre,
.job-result__details pre {
    margin: 0.35rem 0 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--accent-soft);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.75rem;
    max-inline-size: 32rem;
}

/* ── Journal des courriels (sysadmin) : aperçu d'un message non envoyé ──
   Le contenu n'est conservé QUE pour les envois locaux (statut « simule ») :
   l'aperçu vit sur sa propre page (un courriel de marque pèse ~80 Ko, la liste
   en montre jusqu'à 300) et le message y est cantonné dans un iframe pour que
   ses styles ne débordent pas sur la page. */
/* Bandeau « ce serveur n'envoie rien » : affiché seulement là où c'est vrai. */
.mailjournal-banner {
    margin-bottom: 1.25rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--line);
    border-inline-start: 4px solid var(--brand-orange);
    border-radius: 0.75rem;
    background: var(--accent-soft);
    font-size: 0.9rem;
    line-height: 1.45;
}

.mailjournal-preview__link {
    display: inline-block;
    margin-top: 0.3rem;
    font-size: 0.8rem;
}

/* En-tête de l'aperçu : une ligne par renseignement, libellé au-dessus. */
.mailjournal-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.9rem;
    margin: 0;
}

.mailjournal-meta dt {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.mailjournal-meta dd {
    margin: 0.15rem 0 0;
    overflow-wrap: anywhere;
}

.mailjournal-preview__frame {
    display: block;
    width: 100%;
    min-width: 18rem;
    height: 22rem;
    margin-top: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    /* Le HTML d'un courriel suppose un fond clair : le forcer évite un texte
       sombre sur fond sombre quand le thème du site est nocturne. */
    background: #ffffff;
}

.mailjournal-preview__text {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--accent-soft);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.75rem;
    max-height: 16rem;
    overflow: auto;
}