/* =========================================================================
 * Charte graphique CyberXL — couche de thème de l'application
 *
 * Chargée juste après Bootstrap (app.js) et par les pages publiques
 * (<link> vers asset('styles/brand.css')). Elle ne crée aucun composant :
 * elle re-colore et re-type Bootstrap et les quelques motifs globaux.
 *
 * Palette : Marine #010F40 · Violet #6263FC · Jaune #F4D44D
 *           Ivoire #F7F5F0 · Blanc #FFFFFF
 * Polices : Barlow (texte) · DM Sans (titres, éléments fonctionnels) — alignées sur l'ERP
 *           Instrument Serif italique (accroches éditoriales)
 *
 * Le violet de marque (#6263FC) n'atteint que 4,46:1 sur blanc : pour le
 * texte et les fonds de boutons on utilise --cx-violet-600 (#585BE9, 5,1:1),
 * pour le texte sur fond sombre --cx-violet-300 (#898AFD, 6,1:1).
 *
 * --bs-body-bg = fond de PAGE (ivoire / nuit) : de nombreux en-têtes collants
 * l'utilisent en style inline. Les surfaces (cartes, listes, modales, champs…)
 * passent explicitement sur --cx-surface (blanc / marine nuit).
 * ========================================================================= */

/* ===== Jetons de marque (indépendants du thème) ===== */
:root {
  --cx-marine: #010F40;
  --cx-marine-rgb: 1, 15, 64;
  --cx-marine-700: #0A1A55;
  --cx-violet: #6263FC;
  --cx-violet-rgb: 98, 99, 252;
  --cx-violet-100: #EBEBFE;
  --cx-violet-200: #A9A9FD;
  --cx-violet-300: #898AFD;
  --cx-violet-600: #585BE9;
  --cx-violet-700: #4A4ECD;
  --cx-violet-800: #4046BA;
  --cx-jaune: #F4D44D;
  --cx-jaune-rgb: 244, 212, 77;
  --cx-ivoire: #F7F5F0;
  --cx-gradient: linear-gradient(90deg, #8A8BFF 0%, #5753DD 100%);

  /* Mêmes jetons que l'ERP (tokens.css) : texte en Barlow, titres en DM Sans. */
  --cx-font-title: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cx-font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cx-font-editorial: "Instrument Serif", Georgia, "Times New Roman", serif;
}

/* ===== Thème clair ===== */
:root,
[data-bs-theme="light"] {
  --cx-page: #F7F5F0;
  --cx-surface: #FFFFFF;
  --cx-surface-rgb: 255, 255, 255;
  --cx-muted: #545C80;
  --cx-shadow-sm: 0 1px 2px rgba(1, 15, 64, .06);
  --cx-shadow: 0 .5rem 1.25rem rgba(1, 15, 64, .08);
  --cx-shadow-lg: 0 1rem 2.5rem rgba(1, 15, 64, .14);
  --cx-accent-text: var(--cx-violet-600);

  --bs-font-sans-serif: var(--cx-font-body);
  --bs-body-font-family: var(--cx-font-body);

  --bs-body-bg: #F7F5F0;
  --bs-body-bg-rgb: 247, 245, 240;
  --bs-body-color: #010F40;
  --bs-body-color-rgb: 1, 15, 64;
  --bs-emphasis-color: #010F40;
  --bs-emphasis-color-rgb: 1, 15, 64;
  --bs-heading-color: #010F40;
  --bs-secondary-color: rgba(1, 15, 64, .68);
  --bs-secondary-color-rgb: 1, 15, 64;
  --bs-secondary-bg: #ECE9E1;
  --bs-secondary-bg-rgb: 236, 233, 225;
  --bs-tertiary-color: rgba(1, 15, 64, .5);
  --bs-tertiary-bg: #F1EEE7;
  --bs-tertiary-bg-rgb: 241, 238, 231;
  --bs-border-color: #E1DDD3;
  --bs-border-color-translucent: rgba(1, 15, 64, .12);

  --bs-link-color: #585BE9;
  --bs-link-color-rgb: 88, 91, 233;
  --bs-link-hover-color: #4A4ECD;
  --bs-link-hover-color-rgb: 74, 78, 205;
  --bs-code-color: #4046BA;
  --bs-highlight-bg: rgba(244, 212, 77, .45);
  --bs-highlight-color: #010F40;

  --bs-primary: #585BE9;
  --bs-primary-rgb: 88, 91, 233;
  --bs-primary-text-emphasis: #2F3194;
  --bs-primary-bg-subtle: #EBEBFE;
  --bs-primary-border-subtle: #C8C9FB;

  --bs-secondary: #545C80;
  --bs-secondary-rgb: 84, 92, 128;
  --bs-secondary-text-emphasis: #2A3050;
  --bs-secondary-bg-subtle: #E9EAF0;
  --bs-secondary-border-subtle: #CDD0DC;

  --bs-warning: #F4D44D;
  --bs-warning-rgb: 244, 212, 77;
  --bs-warning-text-emphasis: #5F4C00;
  --bs-warning-bg-subtle: #FDF6D6;
  --bs-warning-border-subtle: #F2DF8C;

  --bs-info: #2F80ED;
  --bs-info-rgb: 47, 128, 237;
  --bs-info-text-emphasis: #174A8C;
  --bs-info-bg-subtle: #E4EEFD;
  --bs-info-border-subtle: #B5D0F7;

  --bs-light: #F7F5F0;
  --bs-light-rgb: 247, 245, 240;
  --bs-dark: #010F40;
  --bs-dark-rgb: 1, 15, 64;

  --bs-border-radius: .5rem;
  --bs-border-radius-sm: .375rem;
  --bs-border-radius-lg: .75rem;
  --bs-border-radius-xl: 1rem;
  --bs-box-shadow: var(--cx-shadow);
  --bs-box-shadow-sm: var(--cx-shadow-sm);
  --bs-box-shadow-lg: var(--cx-shadow-lg);
  --bs-focus-ring-color: rgba(98, 99, 252, .3);
}

/* ===== Thème sombre (nuit marine) ===== */
[data-bs-theme="dark"] {
  color-scheme: dark;
  --cx-page: #070B22;
  --cx-surface: #0C1335;
  --cx-surface-rgb: 12, 19, 53;
  --cx-muted: #A9AFC9;
  --cx-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --cx-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .35);
  --cx-shadow-lg: 0 1rem 2.5rem rgba(0, 0, 0, .5);
  --cx-accent-text: var(--cx-violet-300);

  --bs-body-bg: #070B22;
  --bs-body-bg-rgb: 7, 11, 34;
  --bs-body-color: #E6E8F2;
  --bs-body-color-rgb: 230, 232, 242;
  --bs-emphasis-color: #FFFFFF;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-heading-color: #F2F3FA;
  --bs-secondary-color: rgba(230, 232, 242, .7);
  --bs-secondary-color-rgb: 230, 232, 242;
  --bs-secondary-bg: #18214D;
  --bs-secondary-bg-rgb: 24, 33, 77;
  --bs-tertiary-color: rgba(230, 232, 242, .5);
  --bs-tertiary-bg: #121A42;
  --bs-tertiary-bg-rgb: 18, 26, 66;
  --bs-border-color: #242D5A;
  --bs-border-color-translucent: rgba(255, 255, 255, .12);

  --bs-link-color: #898AFD;
  --bs-link-color-rgb: 137, 138, 253;
  --bs-link-hover-color: #A9A9FD;
  --bs-link-hover-color-rgb: 169, 169, 253;
  --bs-code-color: #A9A9FD;
  --bs-highlight-bg: rgba(244, 212, 77, .3);
  --bs-highlight-color: #FFFFFF;

  --bs-primary-text-emphasis: #A9A9FD;
  --bs-primary-bg-subtle: #1A1F5C;
  --bs-primary-border-subtle: #3B3FA0;

  /* Texte « secondaire » lisible sur fond nuit (7:1) ; les fonds
     .bg-secondary / .text-bg-secondary sont assombris plus bas. */
  --bs-secondary: #9AA1BF;
  --bs-secondary-rgb: 154, 161, 191;
  --bs-secondary-text-emphasis: #C9CDE0;
  --bs-secondary-bg-subtle: #1A2148;
  --bs-secondary-border-subtle: #343D6B;

  --bs-warning-text-emphasis: #F8E38E;
  --bs-warning-bg-subtle: #3A3315;
  --bs-warning-border-subtle: #7A6A24;

  --bs-info-text-emphasis: #8DB8F5;
  --bs-info-bg-subtle: #10264A;
  --bs-info-border-subtle: #1F4C8A;

  --bs-light-rgb: 247, 245, 240;
  --bs-dark-rgb: 1, 15, 64;
}

/* ===== Base typographique ===== */
body {
  font-family: var(--cx-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.card-header, .modal-title, .offcanvas-title, .popover-header, .toast-header,
.navbar-brand {
  font-family: var(--cx-font-title);
  font-weight: 600;
  letter-spacing: .005em;
}

/* Sur-titres / libellés fonctionnels (police des titres, capitales espacées). */
.cx-eyebrow {
  font-family: var(--cx-font-title);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cx-accent-text);
}

/* Accroche éditoriale (charte : Instrument Serif italique). */
.cx-editorial {
  font-family: var(--cx-font-editorial);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

::selection {
  background: rgba(var(--cx-violet-rgb), .28);
}

/* ===== Boutons =====
   Chaque variante déclare sa teinte (--cx-v), ses états et son encre ; deux
   règles génériques les branchent sur les variables Bootstrap. */
.btn {
  --bs-btn-font-family: var(--cx-font-title);
  --bs-btn-font-weight: 600;
  letter-spacing: .01em;
}

.btn-primary, .btn-outline-primary {
  --cx-v: #585BE9; --cx-v-h: #4A4ECD; --cx-v-a: #4046BA;
  --cx-v-ink: #FFFFFF; --cx-v-rgb: 88, 91, 233;
}
.btn-secondary, .btn-outline-secondary {
  --cx-v: #545C80; --cx-v-h: #464D6E; --cx-v-a: #3B415E;
  --cx-v-ink: #FFFFFF; --cx-v-rgb: 84, 92, 128;
}
.btn-warning, .btn-outline-warning {
  --cx-v: #F4D44D; --cx-v-h: #EBC834; --cx-v-a: #DDB920;
  --cx-v-ink: #010F40; --cx-v-rgb: 244, 212, 77;
  /* Le jaune n'est pas lisible en texte sur fond clair : encre dorée foncée. */
  --cx-v-text: #6B5600; --cx-v-border: #E3C43A;
}
.btn-dark, .btn-outline-dark {
  --cx-v: #010F40; --cx-v-h: #0A1A55; --cx-v-a: #13236A;
  --cx-v-ink: #FFFFFF; --cx-v-rgb: 1, 15, 64;
}
.btn-light, .btn-outline-light {
  --cx-v: #F7F5F0; --cx-v-h: #ECE9E1; --cx-v-a: #E1DDD3;
  --cx-v-ink: #010F40; --cx-v-rgb: 247, 245, 240;
}

.btn:is(.btn-primary, .btn-secondary, .btn-warning, .btn-dark, .btn-light) {
  --bs-btn-color: var(--cx-v-ink);
  --bs-btn-bg: var(--cx-v);
  --bs-btn-border-color: var(--cx-v);
  --bs-btn-hover-color: var(--cx-v-ink);
  --bs-btn-hover-bg: var(--cx-v-h);
  --bs-btn-hover-border-color: var(--cx-v-h);
  --bs-btn-focus-shadow-rgb: var(--cx-v-rgb);
  --bs-btn-active-color: var(--cx-v-ink);
  --bs-btn-active-bg: var(--cx-v-a);
  --bs-btn-active-border-color: var(--cx-v-a);
  --bs-btn-disabled-color: var(--cx-v-ink);
  --bs-btn-disabled-bg: var(--cx-v);
  --bs-btn-disabled-border-color: var(--cx-v);
}

.btn:is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-warning, .btn-outline-dark) {
  --bs-btn-color: var(--cx-v-text, var(--cx-v));
  --bs-btn-border-color: var(--cx-v-border, var(--cx-v));
  --bs-btn-hover-color: var(--cx-v-ink);
  --bs-btn-hover-bg: var(--cx-v);
  --bs-btn-hover-border-color: var(--cx-v);
  --bs-btn-focus-shadow-rgb: var(--cx-v-rgb);
  --bs-btn-active-color: var(--cx-v-ink);
  --bs-btn-active-bg: var(--cx-v-h);
  --bs-btn-active-border-color: var(--cx-v-h);
  --bs-btn-disabled-color: var(--cx-v-text, var(--cx-v));
  --bs-btn-disabled-border-color: var(--cx-v-border, var(--cx-v));
}

/* Le contour secondaire, très utilisé, reste discret (bordure neutre). */
.btn-outline-secondary {
  --cx-v-border: var(--bs-border-color);
}

.btn-link {
  --bs-btn-font-weight: 500;
}

/* Bascules et éléments sur fond sombre : contours et textes éclaircis. */
[data-bs-theme="dark"] .btn-outline-primary {
  --cx-v-text: #898AFD;
  --cx-v-border: #6E70F5;
}
[data-bs-theme="dark"] .btn-outline-secondary {
  --cx-v-text: #C9CDE0;
  --cx-v-border: #3A4373;
  --cx-v: #3A4373; --cx-v-h: #465087;
}
[data-bs-theme="dark"] .btn-secondary {
  --cx-v: #3A4373; --cx-v-h: #465087; --cx-v-a: #525D9A;
}
[data-bs-theme="dark"] .btn-outline-warning {
  --cx-v-text: #F4D44D;
  --cx-v-border: #C9AE3A;
}
[data-bs-theme="dark"] .btn-outline-dark {
  --cx-v-text: #E6E8F2;
  --cx-v-border: #3A4373;
}

/* En sombre : fonds secondaires assombris (texte blanc lisible) et texte
   primaire éclairci. Les utilitaires Bootstrap lisent --bs-*-rgb : on les
   redéfinit localement plutôt que de surenchérir sur leurs !important. */
[data-bs-theme="dark"] :is(.bg-secondary, .text-bg-secondary) {
  --bs-secondary-rgb: 58, 67, 115;
}
[data-bs-theme="dark"] :is(.text-primary, .link-primary) {
  --bs-primary-rgb: 137, 138, 253;
}

/* ===== Surfaces ===== */
.card {
  --bs-card-bg: var(--cx-surface);
  --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), .025);
  --bs-card-border-color: var(--bs-border-color);
}
.list-group {
  --bs-list-group-bg: var(--cx-surface);
  --bs-list-group-active-bg: var(--cx-violet-600);
  --bs-list-group-active-border-color: var(--cx-violet-600);
  --bs-list-group-action-hover-bg: var(--bs-tertiary-bg);
}
.modal {
  --bs-modal-bg: var(--cx-surface);
  --bs-modal-border-color: var(--bs-border-color);
  --bs-modal-box-shadow: var(--cx-shadow-lg);
}
.modal-content {
  box-shadow: var(--cx-shadow-lg);
}
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
  --bs-offcanvas-bg: var(--cx-surface);
}
.dropdown-menu {
  --bs-dropdown-bg: var(--cx-surface);
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-box-shadow: var(--cx-shadow);
  --bs-dropdown-link-active-bg: var(--cx-violet-600);
  --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
}
.accordion {
  --bs-accordion-bg: var(--cx-surface);
  --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
  --bs-accordion-active-color: var(--bs-primary-text-emphasis);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--cx-violet-rgb), .25);
}
.popover {
  --bs-popover-bg: var(--cx-surface);
  --bs-popover-header-bg: var(--bs-tertiary-bg);
}
.toast {
  --bs-toast-bg: rgba(var(--cx-surface-rgb), .95);
}
.tooltip {
  --bs-tooltip-bg: var(--cx-marine);
  --bs-tooltip-color: #FFFFFF;
}
[data-bs-theme="dark"] .tooltip {
  --bs-tooltip-bg: #E6E8F2;
  --bs-tooltip-color: var(--cx-marine);
}
.table {
  --bs-table-bg: var(--cx-surface);
}
.table > thead {
  font-family: var(--cx-font-title);
  letter-spacing: .02em;
}
/* En-têtes .table-light : Bootstrap les fige en clair, même en thème sombre. */
.table-light {
  --bs-table-color: var(--bs-emphasis-color);
  --bs-table-bg: var(--bs-tertiary-bg);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: var(--bs-secondary-bg);
  --bs-table-hover-bg: var(--bs-secondary-bg);
}
.nav-tabs {
  --bs-nav-tabs-link-active-bg: var(--cx-surface);
  --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
}
.nav {
  --bs-nav-link-color: var(--bs-link-color);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
}
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--cx-violet-600);
}
.pagination {
  --bs-pagination-bg: var(--cx-surface);
  --bs-pagination-color: var(--bs-link-color);
  --bs-pagination-hover-color: var(--bs-link-hover-color);
  --bs-pagination-focus-color: var(--bs-link-hover-color);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--cx-violet-rgb), .25);
  --bs-pagination-active-bg: var(--cx-violet-600);
  --bs-pagination-active-border-color: var(--cx-violet-600);
  --bs-pagination-disabled-bg: var(--cx-surface);
}
.progress, .progress-stacked {
  --bs-progress-bar-bg: var(--cx-violet-600);
}
.badge {
  font-family: var(--cx-font-title);
  font-weight: 600;
  letter-spacing: .03em;
}

/* ===== Formulaires ===== */
.form-control,
.form-select {
  background-color: var(--cx-surface);
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--cx-violet-300);
  box-shadow: 0 0 0 .25rem rgba(var(--cx-violet-rgb), .22);
}
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--cx-violet-600);
  border-color: var(--cx-violet-600);
}
.form-switch .form-check-input:focus:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23898AFD'/%3e%3c/svg%3e");
}
.form-label {
  font-weight: 500;
}
.input-group-text {
  background-color: var(--bs-tertiary-bg);
}

/* Choices.js (sélecteurs avancés) : couleurs de la charte au lieu du cyan. */
.choices__inner {
  background-color: var(--cx-surface);
  border-color: var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.choices__list--multiple .choices__item {
  background-color: var(--cx-violet-600);
  border-color: var(--cx-violet-600);
}
.choices__list--multiple .choices__item.is-highlighted {
  background-color: var(--cx-violet-800);
  border-color: var(--cx-violet-800);
}
.choices__list--dropdown,
.choices__list[aria-expanded] {
  background-color: var(--cx-surface);
  border-color: var(--bs-border-color);
}

/* ===== Signature « Codex by CyberXL » (fragments/brand_lockup.html.twig) ===== */
.cx-lockup {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}
.cx-lockup-emblem {
  width: 40px;
  height: auto;
  flex: 0 0 auto;
}
.cx-lockup-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.cx-lockup-name {
  font-family: var(--cx-font-title);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bs-emphasis-color);
}
.cx-lockup-by {
  margin-top: .3rem;
  font-family: var(--cx-font-title);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cx-accent-text);
}

/* ===== Accueil (home/index.html.twig) ===== */
.cx-welcome {
  max-width: 52rem;
  margin: 3rem auto;
  padding: 2.5rem;
  border-radius: var(--bs-border-radius-xl);
  background: var(--cx-surface);
  border: 1px solid var(--bs-border-color);
  border-top: 4px solid var(--cx-violet);
  box-shadow: var(--cx-shadow);
}
.cx-welcome-title {
  margin: .5rem 0 1.5rem;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
}
.cx-welcome-text {
  margin: 0;
  font-size: 1.05rem;
  color: var(--bs-secondary-color);
}

/* ===== Pages d'erreur (bundles/TwigBundle/Exception) ===== */
.cx-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 70vh;
  padding: 2rem 1rem;
  text-align: center;
}
.cx-error-emblem {
  width: 96px;
  height: auto;
  margin-bottom: .5rem;
}
.cx-error-code {
  margin: 0;
  font-size: clamp(4rem, 12vw, 7.5rem);
  font-weight: 700;
  line-height: 1;
  background: var(--cx-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cx-error-title {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}
.cx-error-text {
  margin: 0 0 1rem;
  color: var(--bs-secondary-color);
}

/* ===== Impression : toujours en clair ===== */
@media print {
  :root,
  [data-bs-theme] {
    --cx-page: #FFFFFF;
    --cx-surface: #FFFFFF;
    --bs-body-bg: #FFFFFF;
    --bs-body-color: #010F40;
  }
}