/*
 * Avenir Voyages - Design System (tokens + base + composants).
 * Référence : "Design System Avenir Voyages.html".
 * Palette : primaire bleu marine #2c5d9e, accent orange #f26a21.
 */

:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --feature: #14233b;
  --border: #e2e6ec;
  --border-soft: #f0f2f5;
  --text-strong: #141925;
  --text-1: #232a37;
  --text-2: #4b5567;
  --text-3: #687386;
  --muted: #97a2b2;
  --primary: #2c5d9e;
  --primary-700: #1a3a66;
  --btn: #1f4880;
  --btn-hover: #14233b;
  --primary-soft: #eef4fb;
  --primary-soft-tx: #1a3a66;
  --ring: rgba(44, 93, 158, .15);
  --accent: #f26a21;
  --accent-hover: #d8550f;
  --accent-soft: #fff3ec;
  --accent-soft-tx: #b3440f;
  --success: #16a34a;
  --success-soft: #ecfdf3;
  --success-tx: #166534;
  --warning: #f59e0b;
  --warning-soft: #fffaeb;
  --warning-tx: #b45309;
  --error: #dc2626;
  --error-soft: #fef2f2;
  --error-tx: #a11212;
  --error-border: #fca5a5;
  --info: #3b82f6;
  --info-soft: #eff6ff;
  --info-tx: #1d4ed8;
  --shadow: 0 1px 2px rgba(20, 25, 37, .05);
  --radius: 12px;
}

[data-theme="dark"], html.dark, body.dark {
  --bg: #0b1120;
  --surface: #141c30;
  --surface-2: #1b2540;
  --feature: #0e1726;
  --border: #2a3450;
  --border-soft: #222d46;
  --text-strong: #f3f6fb;
  --text-1: #e6ebf4;
  --text-2: #c0c9da;
  --text-3: #99a3ba;
  --muted: #6f7b96;
  --primary: #6f9fe0;
  --primary-700: #9cc0ee;
  --btn: #2f6ab0;
  --btn-hover: #3f7cc4;
  --primary-soft: rgba(79, 127, 189, .16);
  --primary-soft-tx: #9cc0ee;
  --ring: rgba(111, 159, 224, .25);
  --accent: #f26a21;
  --accent-hover: #ff8442;
  --accent-soft: rgba(242, 106, 33, .16);
  --accent-soft-tx: #ffab73;
  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, .15);
  --success-tx: #6ce9a6;
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, .15);
  --warning-tx: #fcd34d;
  --error: #ef4444;
  --error-soft: rgba(239, 68, 68, .15);
  --error-tx: #fca5a5;
  --error-border: rgba(239, 68, 68, .5);
  --info: #3b82f6;
  --info-soft: rgba(59, 130, 246, .15);
  --info-tx: #93c5fd;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

/* ---- Base ---- */
body {
  background: var(--bg);
  color: var(--text-1);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Surface des cartes : harmonise les bordures/ombres du design system. */
.bg-white { background-color: var(--surface); }

/* ---- Composants réutilisables (préfixe ds-) ---- */
.ds-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--btn); color: #fff; border: none;
  padding: 10px 18px; border-radius: 10px; font-weight: 700; cursor: pointer;
  transition: background .15s ease;
}
.ds-btn:hover { background: var(--btn-hover); }

.ds-btn-accent { background: var(--accent); }
.ds-btn-accent:hover { background: var(--accent-hover); }

.ds-btn-ghost {
  background: var(--primary-soft); color: var(--primary-soft-tx);
}
.ds-btn-ghost:hover { background: var(--border); }

.ds-input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text-1);
}
.ds-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }

.ds-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.ds-badge-success { background: var(--success-soft); color: var(--success-tx); }
.ds-badge-warning { background: var(--warning-soft); color: var(--warning-tx); }
.ds-badge-error   { background: var(--error-soft);   color: var(--error-tx); }
.ds-badge-info    { background: var(--info-soft);    color: var(--info-tx); }
.ds-badge-accent  { background: var(--accent-soft);  color: var(--accent-soft-tx); }

.ds-page-header {
  background: var(--feature); color: #fff;
  border-radius: var(--radius); padding: 24px 28px;
}

/* Tuiles d'actions rapides (sobres, uniformes) */
.ds-action-tile {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding: 20px 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ds-action-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(20, 25, 37, .10); border-color: var(--primary); }
.ds-action-ico { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.ds-action-label { font-weight: 700; color: var(--text-1); font-size: 14px; }

/* ---- Harmonisation : violet / indigo / pourpre (hors-palette) -> primaire navy ----
   Couvre les éléments stylés par CLASSES Tailwind (les inline sont déjà remappés). */
.from-violet-500, .from-violet-600, .from-violet-700,
.from-indigo-500, .from-indigo-600, .from-indigo-700,
.from-purple-500, .from-purple-600, .from-purple-700 {
  --tw-gradient-from: #2c5d9e !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important;
}
.to-violet-600, .to-violet-700, .to-violet-800,
.to-indigo-600, .to-indigo-700, .to-indigo-800,
.to-purple-600, .to-purple-700, .to-purple-800 {
  --tw-gradient-to: #1a3a66 !important;
}
.bg-violet-500, .bg-violet-600, .bg-indigo-500, .bg-indigo-600, .bg-purple-500, .bg-purple-600 {
  background-color: #2c5d9e !important;
}
.hover\:bg-violet-700:hover, .hover\:bg-indigo-700:hover, .hover\:bg-purple-700:hover,
.hover\:bg-violet-600:hover, .hover\:bg-indigo-600:hover, .hover\:bg-purple-600:hover {
  background-color: #1a3a66 !important;
}
.text-violet-600, .text-violet-700, .text-indigo-600, .text-indigo-700, .text-purple-600, .text-purple-700 {
  color: #2c5d9e !important;
}
.bg-violet-50, .bg-indigo-50, .bg-purple-50 { background-color: var(--primary-soft) !important; }
.border-violet-200, .border-indigo-200, .border-purple-200,
.border-violet-300, .border-indigo-300, .border-purple-300 { border-color: #cdddf0 !important; }
.text-violet-100, .text-indigo-100, .text-purple-100 { color: #dbe6f5 !important; }
.from-violet-100, .from-indigo-100, .from-purple-100 { --tw-gradient-from: var(--primary-soft) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important; }
.to-violet-100, .to-indigo-100, .to-purple-100, .to-blue-100 { --tw-gradient-to: #e3edf8 !important; }
.ring-violet-500, .ring-indigo-500, .ring-purple-500 { --tw-ring-color: var(--ring) !important; }
.focus\:ring-violet-500:focus, .focus\:ring-indigo-500:focus, .focus\:ring-purple-500:focus { --tw-ring-color: var(--ring) !important; }
.focus\:border-violet-500:focus, .focus\:border-indigo-500:focus, .focus\:border-purple-500:focus { border-color: var(--primary) !important; }
.border-b-violet-500, .border-violet-500, .border-indigo-500, .border-purple-500 { border-color: var(--primary) !important; }

/* ---- En-têtes de tables / modales / bandeaux en dégradés hors-palette -> navy plein ----
   `background:` (shorthand) l'emporte, que la classe bg-gradient-to-* soit purgée ou non.
   Les boutons ont un background inline !important qui prévaut : ils gardent leur couleur. */
.bg-gradient-to-r.from-violet-600, .bg-gradient-to-br.from-violet-600,
.bg-gradient-to-r.from-violet-500, .bg-gradient-to-br.from-violet-500,
.bg-gradient-to-r.from-purple-600, .bg-gradient-to-br.from-purple-600,
.bg-gradient-to-r.from-purple-500, .bg-gradient-to-br.from-purple-500,
.bg-gradient-to-r.from-indigo-600, .bg-gradient-to-br.from-indigo-600,
.bg-gradient-to-r.from-blue-600.to-cyan-600, .bg-gradient-to-br.from-blue-600.to-cyan-600,
.bg-gradient-to-r.from-blue-500.to-purple-600, .bg-gradient-to-br.from-blue-500.to-purple-600 {
  background: linear-gradient(to right, #14233b, #1a3a66) !important;
  color: #fff;
}

/* ---- Encadrés décoratifs pastel (from-*-50/100 to-*-50/100) -> surface douce neutre ---- */
.bg-gradient-to-r.from-violet-50, .bg-gradient-to-br.from-violet-50,
.bg-gradient-to-r.from-blue-50, .bg-gradient-to-br.from-blue-50,
.bg-gradient-to-r.from-indigo-50, .bg-gradient-to-br.from-indigo-50,
.bg-gradient-to-r.from-purple-50, .bg-gradient-to-br.from-purple-50,
.bg-gradient-to-r.from-cyan-50, .bg-gradient-to-br.from-cyan-50,
.bg-gradient-to-r.from-orange-50, .bg-gradient-to-br.from-orange-50,
.bg-gradient-to-r.from-yellow-50, .bg-gradient-to-br.from-yellow-50 {
  background: var(--primary-soft) !important;
}

/* Sécurise les arrêts de dégradé bleu/cyan restants (theads sans inline) vers le navy. */
.from-blue-600, .from-blue-500 { --tw-gradient-from: #14233b !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important; }
.to-blue-600, .to-cyan-600, .to-cyan-500 { --tw-gradient-to: #1a3a66 !important; }

/* ---- Modales / overlays : z-index des classes arbitraires (purgées) ----
   NB : on NE force PAS .fixed / .inset-0 globalement (ça cassait la sidebar
   `fixed ... lg:static` en la forçant fixed sur grand écran -> recouvrait le
   contenu). Les modales qui doivent passer au-dessus sont téléportées dans
   <body> avec des styles inline (voir x-teleport). Ici on ne corrige que le
   z-index des classes arbitraires réellement purgées. */
.z-\[200\] { z-index: 9999 !important; }
.z-\[10000\] { z-index: 10000 !important; }