/* ============================================================
   EntretiensApp — Design System moduloTech (« Style Partoo »)
   Fondations : tokens, remaps Bootstrap, base, typographie.
   Source des tokens : data-in/ds/tokens/*.css
   Light-only. Fira Sans. Une seule couleur d'accent (indigo).
   ============================================================ */

/* ===== TOKENS ===== */
:root {
  /* Brand */
  --brand-indigo: #565DF6;
  --brand-indigo-hover: #4148E0;
  --brand-indigo-tint: #EEEFFE;
  --brand-indigo-tint-2: #F4F5FF;
  --brand-ink: #303745;

  /* Neutrals */
  --gray-25: #FAFAFD;
  --gray-50: #F8F9FB;
  --gray-100: #F3F4F7;
  --gray-150: #EEEFF6;
  --gray-200: #E6E9EE;
  --gray-300: #C9CDD6;
  --gray-400: #9AA1AF;
  --gray-500: #8A92A0;
  --gray-600: #6B7280;
  --gray-700: #4B5565;
  --gray-900: #1A1D24;

  /* Status */
  --status-success-fg: #0E7C4A;
  --status-success-bg: #E4F6EC;
  --status-warning-fg: #B4690E;
  --status-warning-bg: #FDF1E3;
  --status-danger-fg: #B42318;
  --status-danger-bg: #FDECEA;
  --status-neutral-fg: #6B7280;
  --status-neutral-bg: #F3F4F7;
  --status-info-fg: #3A3FD1;
  --status-info-bg: #EEEFFE;
  --status-violet-fg: #7A4FD6;
  --status-violet-bg: #F0E9FB;

  /* Semantic */
  --surface-page: #EFF0F2;
  --surface-card: #FFFFFF;
  --surface-sunken: var(--gray-50);
  --surface-sidebar: var(--gray-25);
  --border-default: rgba(15, 23, 42, 0.07);
  --border-subtle: rgba(15, 23, 42, 0.06);
  --text-primary: var(--brand-ink);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-400);
  --accent: var(--brand-indigo);
  --accent-hover: var(--brand-indigo-hover);

  /* Typographie */
  --font-sans: 'Fira Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 38px;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.1;
  --leading-normal: 1.4;
  --leading-relaxed: 1.55;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.08em;

  /* Espacements */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 30px;
  --space-10: 34px;
  --space-12: 44px;

  /* Rayons */
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --radius-3xl: 28px;
  --radius-full: 999px;

  /* Ombres */
  --shadow-card: 0 10px 24px -18px rgba(72, 76, 150, 0.20);
  --shadow-panel-soft: 0 8px 20px -12px rgba(16, 24, 40, 0.14);
  --shadow-panel-strong: 0 28px 54px -20px rgba(16, 24, 40, 0.28);
  --shadow-cta: 0 10px 22px -10px rgba(86, 93, 246, 0.55);
  --shadow-shell: 0 30px 70px -30px rgba(16, 24, 40, 0.28);
}

/* ===== REMAP DES VARIABLES BOOTSTRAP (utilities/grid CDN) =====
   Seuls bootstrap-grid + bootstrap-utilities sont chargés : on
   remappe leurs variables sur les tokens du DS pour que les
   utilitaires (text-muted, bg-*-subtle…) suivent la palette. */
:root {
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--text-primary);
  --bs-body-bg: var(--surface-card);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color: var(--text-muted);
  --bs-border-color: var(--gray-200);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-pill: var(--radius-full);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--accent-hover);

  --bs-primary: var(--brand-indigo);
  --bs-primary-rgb: 86, 93, 246;
  --bs-primary-bg-subtle: var(--brand-indigo-tint);
  --bs-primary-text-emphasis: var(--accent);
  --bs-secondary-bg-subtle: var(--status-neutral-bg);
  --bs-secondary-text-emphasis: var(--status-neutral-fg);
  --bs-success-rgb: 14, 124, 74;
  --bs-success-bg-subtle: var(--status-success-bg);
  --bs-success-text-emphasis: var(--status-success-fg);
  --bs-warning-rgb: 180, 105, 14;
  --bs-warning-bg-subtle: var(--status-warning-bg);
  --bs-warning-text-emphasis: var(--status-warning-fg);
  --bs-danger-rgb: 180, 35, 24;
  --bs-danger-bg-subtle: var(--status-danger-bg);
  --bs-danger-text-emphasis: var(--status-danger-fg);
  --bs-info-rgb: 58, 63, 209;
  --bs-info-bg-subtle: var(--status-info-bg);
  --bs-info-text-emphasis: var(--status-info-fg);
  --bs-light-rgb: 248, 249, 251;
  --bs-dark-rgb: 26, 29, 36;
}

/* ===== BASE ===== */
*, *::before, *::after { box-sizing: border-box; }

/* L'attribut hidden doit gagner même sur un display explicite
   (ex. filtres client qui masquent des cartes en flex/grid) */
[hidden] { display: none !important; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--surface-page);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-2);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}
h1 { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-xl); letter-spacing: -0.01em; }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
h5, h6 { font-size: var(--text-base); }

p { margin: 0 0 var(--space-4); }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.16s ease;
}
a:hover { color: var(--accent-hover); }

small, .small { font-size: var(--text-sm); }

hr {
  border: 0;
  border-top: 1px solid var(--gray-150);
  margin: var(--space-6) 0;
  opacity: 1;
}

img, svg { vertical-align: middle; }

label { display: inline-block; }

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}
button { border-radius: 0; }
[role="button"], button, select { cursor: pointer; }

ul, ol { padding-left: 1.6em; margin-top: 0; margin-bottom: var(--space-4); }

table { caption-side: bottom; border-collapse: collapse; }
th { text-align: inherit; }

::placeholder { color: var(--text-muted); opacity: 1; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: #D8DBE2;
  border-radius: var(--radius-full);
  border: 3px solid #fff;
}
::-webkit-scrollbar-track { background: transparent; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Gros chiffres : resserrer le tracking (fondation DS) */
.ds-figure {
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

/* ===== ANIMATION D'ÉCRAN (unique animation décorative du DS) ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}