/* ============================================================
   HireKazi — Design System Global
   
   CHANGER LES COULEURS : modifier uniquement les variables
   dans :root {} — tout le site s'adapte automatiquement
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@300;400;500;600&display=swap');

/* ─────────────────────────────────────────────
   DESIGN TOKENS — MODIFIER ICI UNIQUEMENT
   ───────────────────────────────────────────── */
:root {
  /* Couleurs primaires */
  /*--color-primary:        #1B 4F 72; */
  --color-primary:        #003A60;
  --color-primary-dark:   #002A46;
  --color-primary-light:  #1E77B8;
  --color-primary-xlight: #D4E7F4;

  /* Couleurs accent */
  --color-accent:         #00C16E;
  --color-accent-dark:    #1E8449;
  --color-accent-light:   #58D68D;
  --color-accent-xlight:  #D5F5E3;

  /* Neutres */
  --color-dark:           #0D1B2A;
  --color-dark-2:         #1C2B3A;
  --color-dark-3:         #243447;
  --color-gray:           #566573;
  --color-gray-light:     #ADB5BD;
  --color-gray-xlight:    #F2F3F4;
  --color-white:          #FFFFFF;

  /* Feedbacks */
  --color-error:          #E74C3C;
  --color-error-light:    #FADBD8;
  --color-warning:        #F39C12;
  --color-warning-light:  #FEF9E7;
  --color-success:        #00C16E;
  --color-success-light:  #D5F5E3;

  /* Typographie */
  --font-display:         'Poppins', sans-serif;
  --font-body:            'Inter', sans-serif;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;

  /* Espacements */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Bordures */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Ombres */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 40px rgba(0,0,0,.15), 0 4px 12px rgba(0,0,0,.08);
  --shadow-xl:  0 20px 60px rgba(0,0,0,.20);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* Layout */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
}

/* ─────────────────────────────────────────────
   RESET & BASE
   ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-dark);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────
   TYPOGRAPHIE
   ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-dark);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-light); }

/* ─────────────────────────────────────────────
   COMPOSANTS — BOUTONS
   ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Bouton primaire */
.btn-primary {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}
.btn-primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(39,174,96,.35);
}
.btn-primary:active { transform: translateY(0); }

/* Bouton secondaire */
.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secondary:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-1px);
}

/* Bouton ghost (fond sombre) */
.btn-ghost {
  background: rgba(255,255,255,.1);
  color: var(--color-white);
  border-color: rgba(255,255,255,.3);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.2);
  color: var(--color-white);
}

/* Tailles */
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); }
.btn-full { width: 100%; }

/* Loading state */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-loading::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ─────────────────────────────────────────────
   COMPOSANTS — FORMULAIRES
   ───────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-dark);
  letter-spacing: .02em;
}

.form-label .required {
  color: var(--color-error);
  margin-left: 2px;
}

.form-control {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid #E2E8F0;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-dark);
  background: var(--color-white);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}

.form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,58,96,.12);
}

.form-control.is-error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(231,76,60,.12);
}

.form-control.is-success {
  border-color: var(--color-accent);
}

.form-control::placeholder { color: var(--color-gray-light); }

/* Input avec icône */
.input-wrapper {
  position: relative;
}
.input-wrapper .input-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-gray-light);
  pointer-events: none;
  width: 18px; height: 18px;
}
.input-wrapper .form-control {
  padding-left: calc(var(--space-4) + 18px + var(--space-2));
}
.input-wrapper .input-icon-right {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--color-gray-light);
  background: none;
  border: none;
  padding: 0;
  transition: color var(--transition-fast);
}
.input-wrapper .input-icon-right:hover { color: var(--color-primary); }

/* Messages d'erreur/succès */
.form-message {
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.form-message.error { color: var(--color-error); }
.form-message.success { color: var(--color-accent); }

/* ─────────────────────────────────────────────
   COMPOSANTS — ALERTES
   ───────────────────────────────────────────── */
.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  border-left: 4px solid;
}
.alert-error {
  background: var(--color-error-light);
  color: #922B21;
  border-color: var(--color-error);
}
.alert-success {
  background: var(--color-success-light);
  color: #1E8449;
  border-color: var(--color-success);
}
.alert-warning {
  background: var(--color-warning-light);
  color: #9A7D0A;
  border-color: var(--color-warning);
}
.alert-info {
  background: var(--color-primary-xlight);
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
}
.alert-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

/* ─────────────────────────────────────────────
   COMPOSANTS — BADGES
   ───────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.badge-primary { background: var(--color-primary-xlight); color: var(--color-primary); }
.badge-accent  { background: var(--color-accent-xlight);  color: var(--color-accent-dark); }
.badge-gray    { background: var(--color-gray-xlight);    color: var(--color-gray); }
.badge-warning { background: var(--color-warning-light);  color: var(--color-warning); }

/* ─────────────────────────────────────────────
   COMPOSANTS — CARDS
   ───────────────────────────────────────────── */
.card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
}
.card-sm { padding: var(--space-5); }
.card-lg { padding: var(--space-12); }

/* ─────────────────────────────────────────────
   UTILITAIRES
   ───────────────────────────────────────────── */
.text-center { text-align: center; }
.text-muted  { color: var(--color-gray); }
.text-small  { font-size: var(--text-sm); }
.text-accent { color: var(--color-accent); }
.text-primary { color: var(--color-primary); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.divider {
  border: none;
  border-top: 1px solid #E2E8F0;
  margin: var(--space-6) 0;
}

.divider-text {
  position: relative;
  text-align: center;
  margin: var(--space-6) 0;
}
.divider-text::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: #E2E8F0;
}
.divider-text span {
  position: relative;
  background: var(--color-white);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-gray);
}

/* ─────────────────────────────────────────────
   ANIMATIONS
   ───────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

.animate-fadeInUp   { animation: fadeInUp .5s ease forwards; }
.animate-fadeIn     { animation: fadeIn .4s ease forwards; }
.animate-slideRight { animation: slideInRight .5s ease forwards; }

/* Délais pour animations en cascade */
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }
.delay-5 { animation-delay: .5s; }

/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --text-3xl: 1.5rem;
    --text-4xl: 1.875rem;
    --text-5xl: 2.25rem;
  }
}

/* ─────────────────────────────────────────────
   LUCIDE ICONS — Intégration globale
   ───────────────────────────────────────────── */

/* Icônes dans les inputs (remplacement SVG) */
i[data-lucide].input-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-gray-light);
  pointer-events: none;
  flex-shrink: 0;
}

/* Icônes dans les boutons */
.btn i[data-lucide] {
  flex-shrink: 0;
  vertical-align: middle;
}

/* Icônes dans les sidebar links */
.sidebar-link i[data-lucide] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: .7;
  transition: opacity var(--transition-fast);
}
.sidebar-link:hover i[data-lucide],
.sidebar-link.active i[data-lucide] {
  opacity: 1;
}

/* Icônes dans les stat cards */
.stat-icon i[data-lucide] {
  width: 22px;
  height: 22px;
}

/* Icônes dans les alertes */
.alert i[data-lucide] {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Tailles utilitaires */
i[data-lucide].icon-sm  { width: 14px; height: 14px; }
i[data-lucide].icon-md  { width: 18px; height: 18px; }
i[data-lucide].icon-lg  { width: 24px; height: 24px; }
i[data-lucide].icon-xl  { width: 32px; height: 32px; }

/* ─────────────────────────────────────────────
   UTILITAIRES — Icônes Lucide (tailles standard)
   ───────────────────────────────────────────── */
.icon-xs  { width: 11px; height: 11px; flex-shrink: 0; }
.icon-sm  { width: 13px; height: 13px; flex-shrink: 0; }
.icon-md  { width: 16px; height: 16px; flex-shrink: 0; }
.icon-base{ width: 18px; height: 18px; flex-shrink: 0; }
.icon-lg  { width: 22px; height: 22px; flex-shrink: 0; }
.icon-xl  { width: 32px; height: 32px; flex-shrink: 0; }
.icon-2xl { width: 40px; height: 40px; flex-shrink: 0; }
.icon-3xl { width: 48px; height: 48px; flex-shrink: 0; }

/* Icônes colorées */
.icon-primary  { color: var(--color-primary); }
.icon-accent   { color: var(--color-accent); }
.icon-warning  { color: var(--color-warning); }
.icon-error    { color: var(--color-error); }
.icon-gray     { color: var(--color-gray); }
.icon-gray-lt  { color: var(--color-gray-light); }
.icon-success  { color: var(--color-accent); }
.icon-muted    { opacity: .35; }

/* ─────────────────────────────────────────────
   UTILITAIRES — Espacements
   ───────────────────────────────────────────── */
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.m-0  { margin: 0; }
.p-0  { padding: 0; }

/* ─────────────────────────────────────────────
   UTILITAIRES — Flexbox
   ───────────────────────────────────────────── */
.d-flex         { display: flex; }
.flex-col       { flex-direction: column; }
.align-center   { align-items: center; }
.align-start    { align-items: flex-start; }
.justify-between{ justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.flex-wrap      { flex-wrap: wrap; }
.flex-1         { flex: 1; }
.flex-shrink-0  { flex-shrink: 0; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* ─────────────────────────────────────────────
   UTILITAIRES — Grilles courantes
   ───────────────────────────────────────────── */
.grid-2     { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-3     { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); }
.grid-4     { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-4); }
.grid-2-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }

/* ─────────────────────────────────────────────
   UTILITAIRES — Typographie
   ───────────────────────────────────────────── */
.text-xs     { font-size: var(--text-xs); }
.text-sm     { font-size: var(--text-sm); }
.text-base   { font-size: var(--text-base); }
.text-lg     { font-size: var(--text-lg); }
.text-xl     { font-size: var(--text-xl); }
.text-2xl    { font-size: var(--text-2xl); }

.text-dark   { color: var(--color-dark); }
.text-gray   { color: var(--color-gray); }
.text-gray-lt{ color: var(--color-gray-light); }
.text-primary{ color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-warning{ color: var(--color-warning); }
.text-error  { color: var(--color-error); }
.text-white  { color: white; }

.font-600    { font-weight: 600; }
.font-700    { font-weight: 700; }
.font-display{ font-family: var(--font-display); }
.font-mono   { font-family: monospace; }

.text-center  { text-align: center; }
.text-right   { text-align: right; }
.uppercase    { text-transform: uppercase; letter-spacing: .08em; }
.italic       { font-style: italic; }
.truncate     { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line-height-16{ line-height: 1.6; }
.line-height-17{ line-height: 1.7; }

/* ─────────────────────────────────────────────
   UTILITAIRES — Largeur & dimensions
   ───────────────────────────────────────────── */
.w-full        { width: 100%; }
.min-w-0       { min-width: 0; }
.max-w-560     { max-width: 560px; margin-left: auto; margin-right: auto; }
.overflow-x    { overflow-x: auto; }
.overflow-hide { overflow: hidden; }
.pos-relative  { position: relative; }
.text-no-wrap  { white-space: nowrap; }

/* ─────────────────────────────────────────────
   UTILITAIRES — Fonds & bordures
   ───────────────────────────────────────────── */
.bg-gray-xlight { background: var(--color-gray-xlight); }
.bg-white       { background: white; }
.border-top     { border-top: 1px solid #F0F4F8; }
.border-bottom  { border-bottom: 1px solid #F0F4F8; }
.rounded-full   { border-radius: var(--radius-full); }

/* ─────────────────────────────────────────────
   COMPOSANT — Avatar initiale
   ───────────────────────────────────────────── */
.avatar {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--color-primary);
    color: white;
}
.avatar-sm  { width: 32px; height: 32px; font-size: var(--text-xs); }
.avatar-md  { width: 38px; height: 38px; font-size: var(--text-sm); }
.avatar-lg  { width: 48px; height: 48px; font-size: var(--text-base); }
.avatar-xl  { width: 64px; height: 64px; font-size: var(--text-xl); }

/* ─────────────────────────────────────────────
   COMPOSANT — Icône de section (stat card)
   ───────────────────────────────────────────── */
.icon-box {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.icon-box-sm  { width: 32px; height: 32px; }
.icon-box-lg  { width: 52px; height: 52px; }
.icon-box--blue   { background: rgba(0,58,96,.1);  color: var(--color-primary); }
.icon-box--green  { background: rgba(39,174,96,.1);  color: var(--color-accent); }
.icon-box--orange { background: rgba(230,126,34,.1); color: var(--color-warning); }
.icon-box--red    { background: rgba(231,76,60,.1);  color: var(--color-error); }
.icon-box--purple { background: rgba(123,31,162,.1); color: #7B1FA2; }
.icon-box--gray   { background: var(--color-gray-xlight); color: var(--color-gray); }

/* ─────────────────────────────────────────────
   COMPOSANT — En-tête de page (page-header)
   Remplace les inline sur page-greeting, page-subtitle
   ───────────────────────────────────────────── */
.page-header         { margin-bottom: var(--space-8); }
.page-header--row    { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
.page-header__meta   { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }

/* ─────────────────────────────────────────────
   COMPOSANT — Tableau générique
   ───────────────────────────────────────────── */
.table         { width: 100%; border-collapse: collapse; }
.table th      { padding: var(--space-4) var(--space-5); text-align: left; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-gray); background: var(--color-gray-xlight); }
.table th.center, .table td.center { text-align: center; }
.table th.right,  .table td.right  { text-align: right;  }
.table td      { padding: var(--space-4) var(--space-5); font-size: var(--text-sm); color: var(--color-dark); border-top: 1px solid #F0F4F8; }
.table tbody tr{ transition: background var(--transition-fast); }
.table tbody tr:hover { background: #FAFBFD; }
.table--padded th, .table--padded td { padding-left: var(--space-6); padding-right: var(--space-6); }

/* ─────────────────────────────────────────────
   COMPOSANT — Formulaire (form-stack)
   ───────────────────────────────────────────── */
.form-stack       { display: flex; flex-direction: column; gap: var(--space-5); }
.form-row         { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-group--clean{ margin: 0; }
.form-hint        { font-size: var(--text-xs); color: var(--color-gray); margin-top: var(--space-1); }

/* ─────────────────────────────────────────────
   COMPOSANT — Section card (header/body/footer)
   Alias pour éviter la duplication inline
   ───────────────────────────────────────────── */
.card-body--padded { padding: var(--space-6); }
.card-body--tight  { padding: var(--space-4); }
.card-body--zero   { padding: 0; }
.card-footer       { padding: var(--space-4) var(--space-6); border-top: 1px solid #F0F4F8; background: var(--color-gray-xlight); }

/* ─────────────────────────────────────────────
   COMPOSANT — Score matching
   ───────────────────────────────────────────── */
.match-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 45px;
    text-align: center;
}
.match-chip__value {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 800;
    line-height: 1;
}
.match-chip__label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-gray);
}
.match-chip--high   .match-chip__value { color: var(--color-accent); }
.match-chip--medium .match-chip__value { color: var(--color-warning); }
.match-chip--low    .match-chip__value { color: var(--color-error); }

/* ─────────────────────────────────────────────
   COMPOSANT — Vide (empty state)
   ───────────────────────────────────────────── */
.empty-state--lg { padding: var(--space-16) var(--space-8); }
.empty-state--md { padding: var(--space-10) var(--space-6); }

/* ─────────────────────────────────────────────
   COMPOSANT — Action buttons (icônes directes)
   ───────────────────────────────────────────── */
.action-icon {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    border: none; cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.action-icon--blue   { background: var(--color-primary-xlight); color: var(--color-primary); }
.action-icon--green  { background: var(--color-accent-xlight);  color: var(--color-accent-dark); }
.action-icon--orange { background: #FEF3C7; color: #92400E; }
.action-icon--gray   { background: var(--color-gray-xlight); color: var(--color-gray); }
.action-icon--red    { background: var(--color-error-light); color: var(--color-error); }
.action-icon--blue:hover   { background: var(--color-primary);  color: white; }
.action-icon--green:hover  { background: var(--color-accent);   color: white; }
.action-icon--orange:hover { background: var(--color-warning);  color: white; }
.action-icon--gray:hover   { background: #CBD5E1; color: var(--color-dark); }
.action-icon--red:hover    { background: var(--color-error);    color: white; }

.align-self-center { align-self: center; }

/* ─────────────────────────────────────────────
   PAGES D'ERREUR (400, 403, 404, 500)
   ───────────────────────────────────────────── */
.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--color-gray-xlight);
}
.error-page__box {
    text-align: center;
    padding: 3rem;
}
.error-page__code {
    font-family: var(--font-display);
    font-size: 6rem;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
}
.error-page__code--error { color: var(--color-error); }
.error-page__msg {
    font-size: 1.2rem;
    color: var(--color-gray);
    margin: 1rem 0 2rem;
}

.d-none { display: none !important; }

.visually-hidden { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
/* ══════════════════════════════════════════
   MON COMPTE (page universelle, tous layouts)
   ══════════════════════════════════════════ */
.account-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-6);
    align-items: start;
}
.account-aside { display: flex; flex-direction: column; gap: var(--space-4); }

.account-id-card { text-align: center; }
.account-avatar-wrap { display: flex; justify-content: center; margin-bottom: var(--space-3); }
.account-avatar-img,
.account-avatar-placeholder {
    width: 88px; height: 88px;
    border-radius: var(--radius-full, 999px);
    object-fit: cover;
}
.account-avatar-placeholder {
    background: var(--color-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-3xl, 28px); font-weight: 700;
}
.account-id-name { font-size: var(--text-lg); font-weight: 700; color: var(--color-dark); margin: 0 0 var(--space-2); }

.account-meta-card { display: flex; flex-direction: column; gap: var(--space-4, 16px); }
.account-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--text-base, 15px); padding: 5px 0; }
.account-meta-label { display: inline-flex; align-items: center; gap: 11px; color: var(--color-dark); font-weight: 600; }
.account-meta-label i, .account-meta-label svg { width: 20px; height: 20px; }
.account-refund-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: var(--space-2, 8px);
    padding: 12px 16px; border-radius: var(--radius-md, 10px);
    background: var(--color-warning, #F39C12);
    font-weight: 700; font-size: var(--text-sm, 14px); text-decoration: none;
    transition: filter .15s;
}
.account-refund-btn,
.account-refund-btn:hover,
.account-refund-btn:focus,
.account-refund-btn:visited { color: #fff !important; }
.account-refund-btn:hover { filter: brightness(.94); }
.account-refund-btn i, .account-refund-btn svg { width: 17px; height: 17px; }

.account-tabs {
    display: flex;
    gap: var(--space-2, 8px);
    margin-bottom: var(--space-5, 24px);
    border-bottom: 2px solid #E2E8F0;
}
.account-tab {
    position: relative;
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 16px;
    border: none; background: none; cursor: pointer;
    font-family: var(--font-body); font-size: var(--text-base, 15px); font-weight: 600;
    color: var(--color-gray);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.account-tab i { width: 18px; height: 18px; }
.account-tab:hover {
    color: var(--color-primary);
    background: var(--color-primary-xlight);
    border-top-left-radius: var(--radius-sm, 6px);
    border-top-right-radius: var(--radius-sm, 6px);
}
.account-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 700;
}
.account-tab.active i { color: var(--color-primary); }

.account-panel { display: none; }
.account-panel.active { display: block; }

.account-section-title { font-size: var(--text-lg); font-weight: 700; color: var(--color-dark); margin: 0 0 var(--space-4); }
.account-section-desc { font-size: var(--text-sm); color: var(--color-gray); margin: 0 0 var(--space-4); }
.account-checkbox { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-dark); cursor: pointer; }

@media (max-width: 1024px) {
    .account-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .account-tab { font-size: var(--text-xs); padding: 8px 6px; }
}

/* Carte de base pour la page Mon compte (autonome, padding inclus) */
.account-card {
    background: var(--color-white, #fff);
    border-radius: var(--radius-lg, 14px);
    border: 1px solid #EEF2F7;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    padding: var(--space-5, 20px);
}
.account-aside .account-card { padding: var(--space-6, 26px); }