/* ==========================================================================
   ATELIBOX — BASE
   Reset léger, typographie (charte §2.2), chiffres tabulaires, focus (§9),
   mouvement réduit (§7.2) et pont vers Bootstrap 5.3.3.
   À charger APRÈS bootstrap.min.css, fonts.css et theme.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset léger
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--text-body);
  background-color: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   2. Titres (échelle §2.2)
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  color: var(--text-heading);
  margin-top: 0;
  /* L'espace de Plus Jakarta Sans est étroit (~0,18em) et l'interlettrage négatif le resserre encore. */
  word-spacing: 0.08em;
}

/* Pages Bootstrap pas encore refaites : un titre placé dans un bloc à couleur de texte explicite
   (bandeau sombre, carte colorée) hérite de cette couleur au lieu de --text-heading. */
:is(.text-light, .text-white, .text-bg-dark, .text-bg-primary, .text-bg-secondary, .text-bg-success,
    .text-bg-danger, .text-bg-info, .text-bg-warning, .bg-dark) :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

h1 { font-size: var(--font-size-h1); font-weight: 700; line-height: 1.2;  letter-spacing: -0.025em; }
h2 { font-size: var(--font-size-h2); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
h3 { font-size: var(--font-size-h3); font-weight: 600; line-height: 1.3;  letter-spacing: -0.015em; }
h4 { font-size: var(--font-size-h4); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
h5 { font-size: var(--font-size-h5); font-weight: 600; line-height: 1.4;  letter-spacing: 0; }

/* --------------------------------------------------------------------------
   3. Chiffres tabulaires (§2.1)
   -------------------------------------------------------------------------- */
.tabular-numbers,
[data-format='currency'],
[data-format='quantity'],
td.num,
th.num {
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
}

td.num,
th.num {
  text-align: right;
}

/* --------------------------------------------------------------------------
   4. Focus universel (§9)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. Mouvement réduit (§7.2 / §12)
   !important nécessaire : neutraliser les animations/transitions de Bootstrap
   et des styles inline, quelle que soit leur spécificité.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   6. PONT BOOTSTRAP 5.3.3
   Réaligne les variables --bs-* sur les jetons de la charte. Les valeurs
   suivent theme.css : le mode sombre bascule via data-theme="dark" (et
   data-bs-theme="dark", posés ensemble sur <html>).
   Chaque page refaite abandonnera ces classes ; le pont disparaîtra avec
   Bootstrap (voir docs/design/README.md).
   ========================================================================== */
:root,
[data-bs-theme='light'] {
  --bs-font-sans-serif: var(--font-body);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--font-size-body);
  --bs-body-line-height: var(--line-height-body);
  --bs-body-color: var(--text-body);
  --bs-body-color-rgb: 69, 62, 52;
  --bs-body-bg: var(--bg-app);
  --bs-body-bg-rgb: 250, 248, 245;
  --bs-emphasis-color: var(--text-heading);
  --bs-emphasis-color-rgb: 46, 40, 34;
  --bs-heading-color: var(--text-heading);
  --bs-secondary-color: var(--text-muted);
  --bs-secondary-color-rgb: 125, 114, 99;
  --bs-secondary-bg: var(--color-neutral-100);
  --bs-secondary-bg-rgb: 243, 239, 233;
  --bs-tertiary-color: var(--color-neutral-600);
  --bs-tertiary-color-rgb: 96, 86, 73;
  --bs-tertiary-bg: var(--color-neutral-100);
  --bs-tertiary-bg-rgb: 243, 239, 233;
  --bs-light: var(--color-neutral-100);
  --bs-light-rgb: 243, 239, 233;
  --bs-border-color: var(--border-subtle);
  --bs-border-color-translucent: rgba(46, 40, 34, 0.12);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-box-shadow-sm: var(--shadow-sm);
  --bs-box-shadow: var(--shadow-md);
  --bs-box-shadow-lg: var(--shadow-lg);

  --bs-primary: var(--color-brand-500);
  --bs-primary-rgb: 211, 92, 39;
  --bs-primary-text-emphasis: var(--color-brand-800);
  --bs-primary-bg-subtle: var(--color-brand-50);
  --bs-primary-border-subtle: var(--color-brand-200);
  --bs-link-color: var(--color-brand-600);
  --bs-link-color-rgb: 185, 73, 26;
  --bs-link-hover-color: var(--color-brand-700);
  --bs-link-hover-color-rgb: 150, 56, 20;

  --bs-success: var(--color-success-base);
  --bs-success-rgb: 22, 137, 78;
  --bs-success-text-emphasis: var(--color-success-dark);
  --bs-success-bg-subtle: var(--color-success-light);
  --bs-warning: var(--color-warning-base);
  --bs-warning-rgb: 200, 120, 8;
  --bs-warning-text-emphasis: var(--color-warning-dark);
  --bs-warning-bg-subtle: var(--color-warning-light);
  --bs-danger: var(--color-danger-base);
  --bs-danger-rgb: 217, 45, 32;
  --bs-danger-text-emphasis: var(--color-danger-dark);
  --bs-danger-bg-subtle: var(--color-danger-light);
  --bs-info: var(--color-info-base);
  --bs-info-rgb: 23, 116, 184;
  --bs-info-text-emphasis: var(--color-info-dark);
  --bs-info-bg-subtle: var(--color-info-light);
}

[data-theme='dark'],
[data-bs-theme='dark'],
.dark {
  color-scheme: dark;

  --bs-body-color: var(--text-body);
  --bs-body-color-rgb: 214, 206, 191;
  --bs-body-bg: var(--bg-app);
  --bs-body-bg-rgb: 20, 18, 16;
  --bs-emphasis-color: var(--text-heading);
  --bs-emphasis-color-rgb: 243, 239, 233;
  --bs-heading-color: var(--text-heading);
  --bs-secondary-color: var(--text-muted);
  --bs-secondary-color-rgb: 173, 162, 145;
  --bs-secondary-bg: var(--bg-surface-elevated);
  --bs-secondary-bg-rgb: 40, 36, 32;
  --bs-tertiary-color: var(--text-muted);
  --bs-tertiary-color-rgb: 173, 162, 145;
  --bs-tertiary-bg: var(--bg-surface);
  --bs-tertiary-bg-rgb: 30, 27, 24;
  /* --bs-light garde sa valeur claire : .text-light (texte sur bandeau sombre) doit rester clair.
     Seul le fond .bg-light passe en surface sombre (règle dédiée plus bas). */
  --bs-border-color: var(--border-subtle);
  --bs-border-color-translucent: rgba(243, 239, 233, 0.12);

  --bs-primary: var(--color-brand-500);
  --bs-primary-rgb: 223, 128, 83;
  --bs-primary-text-emphasis: var(--color-brand-300);
  --bs-primary-bg-subtle: rgba(223, 128, 83, 0.14);
  --bs-primary-border-subtle: rgba(223, 128, 83, 0.4);
  --bs-link-color: var(--color-brand-500);
  --bs-link-color-rgb: 223, 128, 83;
  --bs-link-hover-color: var(--color-brand-600);
  --bs-link-hover-color-rgb: 234, 169, 134;

  --bs-success-text-emphasis: #6fd39c;
  --bs-success-bg-subtle: rgba(22, 137, 78, 0.18);
  --bs-warning-text-emphasis: #f0b85a;
  --bs-warning-bg-subtle: rgba(200, 120, 8, 0.18);
  --bs-danger-text-emphasis: #f59a92;
  --bs-danger-bg-subtle: rgba(217, 45, 32, 0.18);
  --bs-info-text-emphasis: #7cc0ee;
  --bs-info-bg-subtle: rgba(23, 116, 184, 0.2);
}

/* Textes secondaires : couleur de la charte plutôt que le gris Bootstrap */
.text-muted {
  color: var(--text-muted) !important; /* Bootstrap 5.3 le déclare avec !important */
}

/* Boutons primaires (Bootstrap lit --bs-btn-* par composant) */
.btn-primary {
  --bs-btn-color: var(--text-inverted);
  --bs-btn-bg: var(--color-brand-600); /* blanc sur brand-500 = 3.94:1 < AA */
  --bs-btn-border-color: var(--color-brand-600);
  --bs-btn-hover-color: var(--text-inverted);
  --bs-btn-hover-bg: var(--color-brand-700);
  --bs-btn-hover-border-color: var(--color-brand-700);
  --bs-btn-focus-shadow-rgb: 211, 92, 39;
  --bs-btn-active-color: var(--text-inverted);
  --bs-btn-active-bg: var(--color-brand-800);
  --bs-btn-active-border-color: var(--color-brand-800);
  --bs-btn-disabled-color: var(--text-inverted);
  --bs-btn-disabled-bg: var(--color-brand-500);
  --bs-btn-disabled-border-color: var(--color-brand-500);
}

.btn-outline-primary {
  --bs-btn-color: var(--color-brand-600);
  --bs-btn-border-color: var(--color-brand-500);
  --bs-btn-hover-color: var(--text-inverted);
  --bs-btn-hover-bg: var(--color-brand-500);
  --bs-btn-hover-border-color: var(--color-brand-500);
  --bs-btn-focus-shadow-rgb: 211, 92, 39;
  --bs-btn-active-color: var(--text-inverted);
  --bs-btn-active-bg: var(--color-brand-600);
  --bs-btn-active-border-color: var(--color-brand-600);
  --bs-btn-disabled-color: var(--color-brand-500);
  --bs-btn-disabled-border-color: var(--color-brand-500);
}

[data-theme='dark'] .btn-primary,
[data-bs-theme='dark'] .btn-primary,
.dark .btn-primary {
  --bs-btn-focus-shadow-rgb: 223, 128, 83;
  --bs-btn-bg: var(--color-brand-500);
  --bs-btn-border-color: var(--color-brand-500);
  --bs-btn-hover-bg: var(--color-brand-600);
  --bs-btn-hover-border-color: var(--color-brand-600);
  --bs-btn-active-bg: var(--color-brand-600);
  --bs-btn-active-border-color: var(--color-brand-600);
}

[data-theme='dark'] .btn-outline-primary,
[data-bs-theme='dark'] .btn-outline-primary,
.dark .btn-outline-primary {
  --bs-btn-color: var(--color-brand-500);
  --bs-btn-focus-shadow-rgb: 223, 128, 83;
}

/* Bootstrap fige le bleu par défaut sur ces composants : on le remplace */
.btn-link {
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-active-color: var(--bs-link-hover-color);
}

.nav-pills {
  --bs-nav-pills-link-active-color: var(--text-inverted);
  --bs-nav-pills-link-active-bg: var(--color-brand-500);
}

.pagination {
  --bs-pagination-active-color: var(--text-inverted);
  --bs-pagination-active-bg: var(--color-brand-500);
  --bs-pagination-active-border-color: var(--color-brand-500);
  --bs-pagination-focus-color: var(--bs-link-hover-color);
}

.list-group {
  --bs-list-group-active-color: var(--text-inverted);
  --bs-list-group-active-bg: var(--color-brand-500);
  --bs-list-group-active-border-color: var(--color-brand-500);
}

.dropdown-menu {
  --bs-dropdown-link-active-color: var(--text-inverted);
  --bs-dropdown-link-active-bg: var(--color-brand-500);
}

.progress {
  --bs-progress-bar-bg: var(--color-brand-500);
}

/* Champs de formulaire : anneau de focus de la charte au lieu du bleu Bootstrap */
.form-control:focus,
.form-select:focus {
  border-color: var(--color-brand-400);
  box-shadow: var(--focus-ring);
}

.form-check-input:checked,
.form-check-input[type='checkbox']:indeterminate {
  background-color: var(--color-brand-500);
  border-color: var(--color-brand-500);
}

.form-check-input:focus {
  border-color: var(--color-brand-400);
  box-shadow: var(--focus-ring);
}

.form-range::-webkit-slider-thumb { background-color: var(--color-brand-500); }
.form-range::-moz-range-thumb { background-color: var(--color-brand-500); }

/* Dark : les blocs .bg-light des pages Bootstrap deviennent des surfaces sombres */
[data-theme='dark'] .bg-light,
[data-bs-theme='dark'] .bg-light {
  background-color: var(--bg-surface) !important; /* Bootstrap déclare .bg-light en !important */
}

/* Dark : boutons « dark » de Bootstrap (filtres des pages pas encore refaites) lisibles sur fond sombre */
[data-theme='dark'] .btn-outline-dark,
[data-bs-theme='dark'] .btn-outline-dark {
  --bs-btn-color: var(--text-body);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text-main);
  --bs-btn-hover-bg: var(--bg-surface-elevated);
  --bs-btn-hover-border-color: var(--text-muted);
  --bs-btn-active-color: var(--text-inverted);
  --bs-btn-active-bg: var(--text-main);
  --bs-btn-active-border-color: var(--text-main);
}
[data-theme='dark'] .btn-dark,
[data-bs-theme='dark'] .btn-dark {
  --bs-btn-color: var(--text-inverted);
  --bs-btn-bg: var(--text-main);
  --bs-btn-border-color: var(--text-main);
  --bs-btn-hover-color: var(--text-inverted);
  --bs-btn-hover-bg: var(--color-neutral-300);
  --bs-btn-hover-border-color: var(--color-neutral-300);
}

/* --------------------------------------------------------------------------
   Cibles tactiles ≥ 44px sur les pages encore sous Bootstrap (a11y #64)
   À retirer avec Bootstrap.
   -------------------------------------------------------------------------- */
@media (max-width: 767px), (pointer: coarse) {
  .btn,
  .form-control,
  .form-select {
    min-height: 44px;
  }
}