/*
 Surfaces d’authentification et leurs variables de thème. Source canonique.
 */

/*
 * Bénégrôles 2026 — Feedback Studio mockup visual layer.
 * The historical filename is retained to avoid breaking deployment references.
 * Loaded after page CSS and theme-safety, before the final accessibility guard.
 * This file intentionally changes presentation only: no layout state or feature is removed.
 */

body.auth-body .btn-auth {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: pretty;
}

body.auth-body {
  --auth-accent-rgb: var(--cdg-accent-rgb, 85, 86, 217);
  --auth-surface: var(--surface-elev-1);
  --auth-surface-strong: var(--surface-elev-2);
  --auth-panel: var(--bg-muted);
  --auth-ink: var(--app-text);
  --auth-text: var(--app-text);
  --auth-muted: var(--app-text-muted);
  --auth-readable-text: var(--app-text);
  --auth-readable-muted: var(--app-text-muted);
  --auth-border: var(--surface-border);
  --auth-shadow: var(--app-shadow-strong);
  --auth-shadow-sm: var(--app-shadow-sm);
  color: var(--app-text);
  background: radial-gradient(circle at 10% 6%, rgba(85, 86, 217, 0.14), transparent 31%),
    radial-gradient(circle at 92% 3%, rgba(13, 146, 121, 0.11), transparent 28%),
    linear-gradient(160deg, var(--app-bg-top), var(--app-bg-bottom));
}

body.auth-body .auth-shell,
body.auth-body .auth-card,
body.auth-body .auth-card-main,
body.auth-body .auth-form-card {
  border-color: var(--surface-border);
  background: var(--cdg-section-surface);
  color: var(--app-text);
  box-shadow: var(--app-shadow-strong);
}

body.auth-body .auth-story,
body.auth-body .auth-card-side,
body.auth-body .auth-brand {
  color: var(--app-text);
  background: radial-gradient(circle at 12% 8%, rgba(94, 224, 187, 0.13), transparent 36%),
    linear-gradient(145deg, #f1f2ff, #e3e7f4);
}

body.auth-body .auth-story *,
body.auth-body .auth-card-side *,
body.auth-body .auth-brand * {
  color: inherit;
}

body.auth-body .auth-brand::after {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(85, 86, 217, 0.07)),
    radial-gradient(circle at 82% 80%, rgba(13, 146, 121, 0.12), transparent 42%);
}

body.auth-body .auth-brand .auth-badge {
  border-color: rgba(85, 86, 217, 0.22);
  background: rgba(255, 255, 255, 0.58);
  color: #34369a;
}

body.auth-body .auth-brand .auth-tagline,
body.auth-body .auth-brand .auth-subtitle,
body.auth-body .auth-brand .auth-highlights,
body.auth-body .auth-brand .auth-highlights li,
body.auth-body .auth-brand .auth-illustration,
body.auth-body .auth-brand .auth-illustration p,
body.auth-body .auth-brand .auth-footnote {
  color: #252b40;
}

body.auth-body .auth-brand .auth-illustration {
  border-top-color: rgba(85, 86, 217, 0.18);
}

html[data-theme="dark"] body.auth-body,
body.auth-body.dark-mode {
  --auth-surface: var(--surface-elev-1);
  --auth-surface-strong: var(--surface-elev-2);
  --auth-panel: var(--bg-muted);
  --auth-ink: var(--app-text);
  --auth-text: var(--app-text);
  --auth-muted: var(--app-text-muted);
  --auth-readable-text: var(--app-text);
  --auth-readable-muted: var(--app-text-muted);
  --auth-border: var(--surface-border);
  background: radial-gradient(circle at 10% 6%, rgba(150, 156, 255, 0.13), transparent 31%),
    radial-gradient(circle at 92% 3%, rgba(94, 224, 187, 0.08), transparent 28%),
    linear-gradient(160deg, #080d1a, #101a2d);
}

html[data-theme="dark"] body.auth-body .auth-story,
html[data-theme="dark"] body.auth-body .auth-card-side,
html[data-theme="dark"] body.auth-body .auth-brand,
body.auth-body.dark-mode .auth-story,
body.auth-body.dark-mode .auth-card-side,
body.auth-body.dark-mode .auth-brand {
  background: radial-gradient(circle at 14% 10%, rgba(94, 224, 187, 0.1), transparent 38%),
    linear-gradient(145deg, #17233a, #111a2b);
}

html[data-theme="dark"] body.auth-body .auth-brand .auth-badge,
body.auth-body.dark-mode .auth-brand .auth-badge {
  border-color: rgba(94, 224, 187, 0.3);
  background: rgba(94, 224, 187, 0.1);
}

html[data-theme="dark"] body.auth-body .auth-brand .auth-illustration,
body.auth-body.dark-mode .auth-brand .auth-illustration {
  border-top-color: rgba(172, 187, 218, 0.22);
}

/*
 * Feedback Studio parity layer — reference:
 * organisation.chant-des-groles.fr/01-Site-Propre-FTP/appli/feedback
 *
 * The light palette comes from Feedback's own light tokens. The dark palette
 * follows the approved Studio screen: ink-blue canvas, slate panels, cool
 * borders, compact geometry and an indigo/aqua action system.
 */

:root {
  --ui-bg: #f4f6fb;
  --ui-bg-accent: #e8e9ff;
  --ui-surface: #ffffff;
  --ui-surface-soft: #eef1f7;
  --ui-ink: #171c2f;
  --ui-text: #252b40;
  --ui-muted: #5b657d;
  --ui-border: #d4daea;
  --ui-primary: #5556d9;
  --ui-primary-strong: #4546b8;
  --ui-primary-soft: #e8e9ff;
  --ui-accent: #0d9279;
  --ui-accent-strong: #08715f;
  --ui-accent-soft: #d9f5ec;
  --cdg-primary: var(--ui-primary);
  --cdg-primary-strong: var(--ui-primary-strong);
  --cdg-primary-bg: var(--ui-primary-soft);
  --cdg-primary-border: #b9bcff;
  --cdg-primary-text: #34369a;
  --cdg-primary-contrast: #ffffff;
  --cdg-secondary: var(--ui-accent);
  --cdg-secondary-strong: var(--ui-accent-strong);
  --cdg-secondary-bg: var(--ui-accent-soft);
  --cdg-secondary-border: #79d9bf;
  --cdg-secondary-text: #075646;
  --cdg-bg: var(--ui-bg);
  --cdg-bg-elevated: #eef1f7;
  --cdg-surface: var(--ui-surface);
  --cdg-surface-raised: #ffffff;
  --cdg-surface-strong: #ffffff;
  --cdg-surface-muted: var(--ui-surface-soft);
  --cdg-border: var(--ui-border);
  --cdg-text: var(--ui-ink);
  --cdg-text-muted: var(--ui-muted);
  --cdg-text-subtle: #6c758b;
  --app-bg-top: #f4f6fb;
  --app-bg-bottom: #e8ecf5;
  --bg-body-solid: #f4f6fb;
  --bg-surface: rgba(255, 255, 255, 0.96);
  --bg-surface-strong: #ffffff;
  --bg-muted: #eef1f7;
  --bg-muted-strong: #e6eaf3;
  --app-surface: var(--bg-surface);
  --app-text: var(--ui-ink);
  --app-text-muted: var(--ui-muted);
  --text-primary: var(--ui-ink);
  --text-muted: var(--ui-muted);
  --text-inverse: #ffffff;
  --app-border: rgba(23, 28, 47, 0.16);
  --app-border-strong: rgba(23, 28, 47, 0.3);
  --surface-elev-1: var(--bg-surface);
  --surface-elev-2: var(--bg-surface-strong);
  --surface-elev-3: #f7f8fc;
  --surface-border: var(--app-border);
  --app-accent: var(--ui-primary);
  --app-accent-dark: var(--ui-primary-strong);
  --color-brand: var(--ui-primary);
  --color-brand-strong: var(--ui-primary-strong);
  --cdg-accent-rgb: 85, 86, 217;
  --link-color: #4546b8;
  --focus-ring-color: #6d5dfc;
  --focus-ring: rgba(109, 93, 252, 0.28);
  --focus-border: rgba(109, 93, 252, 0.82);
  --btn-primary-bg: linear-gradient(135deg, #5556d9 0%, #4546b8 100%);
  --btn-primary-border: #4546b8;
  --btn-primary-hover-bg: linear-gradient(135deg, #494ac5 0%, #3d3eaa 100%);
  --btn-primary-hover-border: #3d3eaa;
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: 0 14px 28px -18px rgba(85, 86, 217, 0.62);
  --btn-secondary-bg: rgba(255, 255, 255, 0.88);
  --btn-secondary-border: #aeb7cc;
  --btn-secondary-hover: #eceef6;
  --input-bg: #fbfcff;
  --input-border: #aeb7cc;
  --table-head-bg: #eceff6;
  --table-row-alt-bg: rgba(85, 86, 217, 0.035);
  --navbar-bg: rgba(249, 252, 254, 0.97);
  --navbar-border: rgba(23, 28, 47, 0.16);
  --navbar-text: var(--ui-ink);
  --navbar-muted: var(--ui-muted);
  --nav-surface: var(--navbar-bg);
  --nav-border: var(--navbar-border);
  --nav-text: var(--navbar-text);
  --nav-muted: var(--navbar-muted);
  --nav-pill: rgba(85, 86, 217, 0.08);
  --nav-pill-strong: rgba(85, 86, 217, 0.15);
  --nav-accent: var(--ui-primary-strong);
  --nav-shadow: 0 18px 44px -30px rgba(16, 33, 51, 0.34);
  --app-radius-sm: 7px;
  --app-radius-md: 9px;
  --app-radius-lg: 12px;
  --app-radius-xl: 16px;
  --app-shadow-sm: 0 8px 22px -18px rgba(16, 33, 51, 0.28);
  --app-shadow: 0 18px 46px -32px rgba(16, 33, 51, 0.4);
  --app-shadow-strong: 0 26px 60px -38px rgba(16, 33, 51, 0.5);
  --cdg-site-shell: rgba(255, 255, 255, 0.74);
  --cdg-site-shell-border: rgba(65, 93, 119, 0.2);
  --cdg-section-surface: rgba(255, 255, 255, 0.96);
  --cdg-section-surface-soft: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(237, 244, 248, 0.96)),
    #ffffff;
  --cdg-section-shadow: 0 18px 44px -32px rgba(16, 33, 51, 0.38);
  --cdg-interactive-shadow: 0 10px 24px -20px rgba(16, 33, 51, 0.28);
}

html[data-theme="dark"] {
  --ui-bg: #080d1a;
  --ui-bg-accent: #141e34;
  --ui-surface: #111a2b;
  --ui-surface-soft: #17233a;
  --ui-ink: #f3f5fb;
  --ui-text: #e5e9f3;
  --ui-muted: #aab4c9;
  --ui-border: rgba(172, 187, 218, 0.24);
  --ui-primary: #969cff;
  --ui-primary-strong: #b7bbff;
  --ui-primary-soft: rgba(150, 156, 255, 0.16);
  --ui-accent: #5ee0bb;
  --ui-accent-strong: #8be9cf;
  --ui-accent-soft: rgba(94, 224, 187, 0.14);
  --cdg-primary: var(--ui-primary);
  --cdg-primary-strong: var(--ui-primary-strong);
  --cdg-primary-bg: var(--ui-primary-soft);
  --cdg-primary-border: rgba(150, 156, 255, 0.52);
  --cdg-primary-text: #e5e7ff;
  --cdg-primary-contrast: #080d1a;
  --cdg-secondary: var(--ui-accent);
  --cdg-secondary-strong: var(--ui-accent-strong);
  --cdg-secondary-bg: var(--ui-accent-soft);
  --cdg-secondary-border: rgba(94, 224, 187, 0.46);
  --cdg-secondary-text: #c9f8ea;
  --cdg-bg: var(--ui-bg);
  --cdg-bg-elevated: #0e1627;
  --cdg-surface: var(--ui-surface);
  --cdg-surface-raised: #17233a;
  --cdg-surface-strong: #0e1728;
  --cdg-surface-muted: var(--ui-surface-soft);
  --cdg-border: var(--ui-border);
  --cdg-text: var(--ui-ink);
  --cdg-text-muted: var(--ui-muted);
  --cdg-text-subtle: #c8d0e0;
  --app-bg-top: #080d1a;
  --app-bg-bottom: #101a2d;
  --bg-body-solid: #080d1a;
  --bg-surface: rgba(17, 26, 43, 0.94);
  --bg-surface-strong: #0e1728;
  --bg-muted: #17233a;
  --bg-muted-strong: #26344f;
  --app-surface: var(--bg-surface);
  --app-text: var(--ui-ink);
  --app-text-muted: var(--ui-muted);
  --text-primary: var(--ui-ink);
  --text-muted: var(--ui-muted);
  --text-inverse: #080d1a;
  --app-border: rgba(172, 187, 218, 0.24);
  --app-border-strong: rgba(202, 212, 234, 0.42);
  --surface-elev-1: var(--bg-surface);
  --surface-elev-2: var(--bg-surface-strong);
  --surface-elev-3: #1b2942;
  --surface-border: var(--app-border);
  --app-accent: var(--ui-primary);
  --app-accent-dark: var(--ui-primary-strong);
  --color-brand: var(--ui-primary);
  --color-brand-strong: var(--ui-primary-strong);
  --cdg-accent-rgb: 150, 156, 255;
  --link-color: #b7bbff;
  --focus-ring-color: #969cff;
  --focus-ring: rgba(150, 156, 255, 0.28);
  --focus-border: rgba(183, 187, 255, 0.84);
  --btn-primary-bg: linear-gradient(135deg, #969cff 0%, #737bff 100%);
  --btn-primary-border: #969cff;
  --btn-primary-hover-bg: linear-gradient(135deg, #b7bbff 0%, #8a91ff 100%);
  --btn-primary-hover-border: #b7bbff;
  --btn-primary-text: #080d1a;
  --btn-primary-shadow: 0 16px 32px -18px rgba(115, 123, 255, 0.6);
  --btn-secondary-bg: rgba(17, 26, 43, 0.94);
  --btn-secondary-border: rgba(172, 187, 218, 0.28);
  --btn-secondary-hover: #26344f;
  --input-bg: rgba(8, 13, 26, 0.78);
  --input-border: rgba(172, 187, 218, 0.28);
  --table-head-bg: rgba(23, 35, 58, 0.96);
  --table-row-alt-bg: rgba(150, 156, 255, 0.03);
  --navbar-bg: rgba(8, 13, 26, 0.97);
  --navbar-border: rgba(172, 187, 218, 0.22);
  --navbar-text: var(--ui-ink);
  --navbar-muted: var(--ui-muted);
  --nav-surface: var(--navbar-bg);
  --nav-border: var(--navbar-border);
  --nav-text: var(--navbar-text);
  --nav-muted: var(--navbar-muted);
  --nav-pill: rgba(94, 224, 187, 0.1);
  --nav-pill-strong: rgba(94, 224, 187, 0.18);
  --nav-accent: #5ee0bb;
  --nav-shadow: 0 22px 52px -28px rgba(0, 0, 0, 0.76);
  --app-shadow-sm: 0 10px 26px -18px rgba(0, 0, 0, 0.64);
  --app-shadow: 0 18px 50px -28px rgba(0, 0, 0, 0.78);
  --app-shadow-strong: 0 26px 68px -34px rgba(0, 0, 0, 0.88);
  --cdg-site-shell: rgba(8, 22, 38, 0.84);
  --cdg-site-shell-border: rgba(158, 181, 210, 0.2);
  --cdg-section-surface: rgba(15, 30, 48, 0.9);
  --cdg-section-surface-soft: linear-gradient(145deg, rgba(17, 35, 56, 0.96), rgba(12, 27, 45, 0.94)),
    #0f1e30;
  --cdg-section-shadow: 0 18px 50px -28px rgba(0, 0, 0, 0.72);
  --cdg-interactive-shadow: 0 12px 28px -22px rgba(0, 0, 0, 0.7);
  --cdg-theme-dark-text: #f5f8ff;
  --cdg-theme-dark-muted: #aebed2;
  --cdg-theme-dark-soft: #c5d2e2;
  --cdg-theme-dark-surface: #0f1e30;
  --cdg-theme-dark-surface-strong: #0b192a;
  --cdg-theme-dark-panel: var(--cdg-section-surface);
  --cdg-theme-dark-panel-soft: var(--cdg-section-surface-soft);
  --cdg-theme-dark-border: rgba(158, 181, 210, 0.24);
  --shell-polish-border: rgba(158, 181, 210, 0.22);
  --shell-polish-border-strong: rgba(50, 196, 124, 0.42);
  --shell-polish-glow: rgba(50, 196, 124, 0.09);
  --shell-polish-glow-strong: rgba(89, 168, 255, 0.13);
  --shell-polish-shadow: 0 22px 54px -34px rgba(0, 0, 0, 0.82);
}

body.auth-body .btn-auth {
  border-radius: var(--app-radius-sm);
}

body.auth-body .btn-auth {
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-border);
  background: var(--btn-primary-bg);
  box-shadow: var(--btn-primary-shadow);
}

body.auth-body .btn-auth:hover,
body.auth-body .btn-auth:focus-visible {
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-hover-border);
  background: var(--btn-primary-hover-bg);
}

body.auth-body {
  --auth-focus: var(--focus-ring);
  background: radial-gradient(760px 480px at 6% 8%, rgba(85, 86, 217, 0.13), transparent 65%),
    radial-gradient(720px 460px at 94% 0%, rgba(13, 146, 121, 0.11), transparent 66%),
    linear-gradient(160deg, var(--app-bg-top), var(--app-bg-bottom));
}

body.auth-body .auth-shell,
body.auth-body .auth-card,
body.auth-body .auth-card-main,
body.auth-body .auth-form-card,
body.auth-body .auth-story,
body.auth-body .auth-card-side,
body.auth-body .auth-brand {
  border-radius: var(--app-radius-lg);
  border-color: var(--surface-border);
}

body.auth-body .auth-story,
body.auth-body .auth-card-side,
body.auth-body .auth-brand {
  background: radial-gradient(520px 300px at 8% 4%, rgba(94, 224, 187, 0.12), transparent 66%),
    linear-gradient(145deg, #f1f2ff, #e3e7f4);
}

html[data-theme="dark"] body.auth-body,
body.auth-body.dark-mode {
  background: radial-gradient(820px 520px at 92% -8%, rgba(150, 156, 255, 0.18), transparent 64%),
    radial-gradient(720px 500px at 0% 18%, rgba(94, 224, 187, 0.08), transparent 66%),
    linear-gradient(160deg, #080d1a, #101a2d);
}

html[data-theme="dark"] body.auth-body .auth-story,
html[data-theme="dark"] body.auth-body .auth-card-side,
html[data-theme="dark"] body.auth-body .auth-brand,
body.auth-body.dark-mode .auth-story,
body.auth-body.dark-mode .auth-card-side,
body.auth-body.dark-mode .auth-brand {
  color: #f3f5fb;
  background: radial-gradient(520px 300px at 8% 4%, rgba(94, 224, 187, 0.1), transparent 66%),
    linear-gradient(145deg, #17233a, #111a2b);
}

html[data-theme="dark"] body.auth-body .auth-brand .auth-badge,
body.auth-body.dark-mode .auth-brand .auth-badge {
  color: #c9f8ea;
  border-color: rgba(94, 224, 187, 0.36);
  background: rgba(94, 224, 187, 0.12);
}

html[data-theme="dark"] body.auth-body .auth-brand .auth-tagline,
html[data-theme="dark"] body.auth-body .auth-brand .auth-subtitle,
html[data-theme="dark"] body.auth-body .auth-brand .auth-highlights,
html[data-theme="dark"] body.auth-body .auth-brand .auth-highlights li,
html[data-theme="dark"] body.auth-body .auth-brand .auth-illustration,
html[data-theme="dark"] body.auth-body .auth-brand .auth-illustration p,
html[data-theme="dark"] body.auth-body .auth-brand .auth-footnote,
body.auth-body.dark-mode .auth-brand .auth-tagline,
body.auth-body.dark-mode .auth-brand .auth-subtitle,
body.auth-body.dark-mode .auth-brand .auth-highlights,
body.auth-body.dark-mode .auth-brand .auth-highlights li,
body.auth-body.dark-mode .auth-brand .auth-illustration,
body.auth-body.dark-mode .auth-brand .auth-illustration p,
body.auth-body.dark-mode .auth-brand .auth-footnote {
  color: #c8d0e0;
}

/* Body-scoped legacy tokens have a higher specificity than root tokens. Keep
   the final computed shell on the Studio palette in every connected screen. */