/* ============================================
  PALETTE DE COULEURS - BLAIN BADMINTON CLUB
============================================ */

  :host, :root {
  /* === TYPOGRAPHIE === */
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --font-nunito: "Nunito", "serif";
  --font-alex: "Alex Brush", "serif";
  --font-kaushan: "Kaushan Script", "serif";
  --font-ebgaramond: "EB Garamond", "serif";
  --font-worksans: "Work Sans", "serif";
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
  
/* === PALETTE PRINCIPALE - BLEUS === */
  /* Alias pour compatibilité */
  --color-primary: #0C2C4A;
  --color-secondary: #1F4E7A;
  --color-accent: #2E7CC2;
  
  /* === COULEURS NEUTRES === */
  --color-white: #FFFFFF;              /* Blanc - Texte principal sur fond sombre */
  --color-light-gray: #BCC6D5;         /* Gris clair - Fond */
  --color-medium-gray: #90A1B9;        /* Gris moyen */
  --color-dark-gray: #647081;          /* Gris foncé */
  --color-bluish-gray: #7393B3;        /* Gris bleuté - Texte secondaire */
  --color-dark: #0C2C4A;               /* Noir */
        /* Texte principal sur fond sombre */
  --color-text-secondary: #A8B8C8;     /* Texte secondaire */
  --color-text-dark: #0C2C4A;          /* Texte principal sur fond clair */
  
  /* Alias neutre */
  --color-neutral-light: #E6E6E6;
  
  /* === NOUVEAU : COULEUR CHAUDE - CTA === */
  --color-orange: #F67B27;             /* Orange - Call-to-action principal */
  --color-orange-hover: #E06815;       /* Orange hover */
  --color-cta-primary: #F67B27;        /* Alias CTA */
  --color-cta-hover: #E06815;          /* Alias CTA hover */
  
  /* === NOUVEAU : COULEURS D'ÉTAT SYSTÈME === */
  --color-success: #3CC662;            /* Vert - Messages de succès */
  --color-success-light: #d4edda;      /* Vert clair - Fond success */
  --color-success-dark: #2C693C;       /* Vert foncé - Texte success */
  --color-error: #EC3C3C;              /* Rouge - Messages d'erreur */
  --color-error-hover: #C23333;        /* Rouge hover */
  --color-error-light: #F8D7DA;        /* Rouge clair - Fond error */
  --color-error-dark: #721C24;         /* Rouge foncé - Texte error */
  --color-warning: #F3B939;            /* Jaune - Avertissements */
  --color-warning-light: #FEF9E7;      /* Jaune clair - Fond warning */
  --color-info: #2E7CC2;               /* Bleu - Informations (réutilise accent) */
  --color-info-light: #E8F4FB;         /* Bleu clair - Fond info */
  
  /* === COULEURS TAILWIND (compatibilité) === */
  --color-red-400: oklch(70.5% 0.231 24.5);
  --color-red-500: oklch(63.7% 0.237 25.331);
  --color-red-600: oklch(57.7% 0.245 27.325);
  --color-red-700: oklch(50.5% 0.213 27.518);
  --color-orange-400: oklch(75% 0.183 55.934);
  --color-orange-500: oklch(70.5% 0.213 47.604);
  --color-orange-600: oklch(64.6% 0.222 41.116);
  --color-orange-700: oklch(55.3% 0.195 38.402);
  --color-amber-400: oklch(82.8% 0.189 84.429);
  --color-amber-500: oklch(76.9% 0.188 70.08);
  --color-amber-600: oklch(66.6% 0.179 58.318);
  --color-yellow-400: oklch(85.2% 0.199 91.936);
  --color-yellow-500: oklch(79.5% 0.184 86.047);
  --color-yellow-600: oklch(68.1% 0.162 75.834);
  --color-lime-400: oklch(84.1% .238 128.85);
  --color-lime-600: oklch(64.8% 0.2 131.684);
  --color-green-100: oklch(95% 0.05 150);
  --color-green-500: oklch(69% 0.17 150);
  --color-green-600: oklch(62.7% 0.194 149.214);
  --color-green-700: oklch(52.7% 0.154 150.069);
  --color-emerald-500: oklch(69.6% 0.17 162.48);
  --color-emerald-600: oklch(59.6% 0.145 163.225);
  --color-emerald-700: oklch(50.8% 0.118 165.612);
  --color-cyan-500: oklch(71.5% 0.143 215.221);
  --color-cyan-600: oklch(60.9% 0.126 221.723);
  --color-cyan-700: oklch(50.3% 0.109 228.225);
  --color-sky-500: oklch(68.5% 0.169 237.323);
  --color-sky-600: oklch(58.8% 0.158 241.966);
  --color-sky-700: oklch(48.5% 0.147 246.609);
  --color-blue-400: oklch(65.4% 0.245 263);
  --color-blue-500: oklch(60% 0.245 263);
  --color-blue-600: oklch(54.6% 0.245 262.881);
  --color-blue-700: oklch(48.8% 0.243 264.376);
  --color-blue-800: oklch(42.5% 0.241 265.871);
  --color-blue-900: oklch(35.2% 0.239 267.366);
  --color-blue-50: oklch(97.5% 0.01 263);
  --color-blue-100: oklch(95% 0.02 263);
  --color-indigo-500: oklch(58.4% 0.243 280.732);
  --color-indigo-600: oklch(52.3% 0.241 281.227);
  --color-indigo-700: oklch(45.8% 0.239 281.722);
  --color-red-50: oklch(97.5% 0.01 25);
  --color-red-100: oklch(95% 0.02 25);
  --color-purple-600: oklch(55.8% 0.288 302.321);
  --color-purple-700: oklch(49.6% 0.265 301.924);
  --color-fuchsia-600: oklch(59.1% 0.293 322.896);
  --color-pink-600: oklch(59.2% 0.249 0.584);
  --color-rose-600: oklch(58.6% 0.253 17.585);
  --color-slate-50: oklch(98.4% 0.003 247.858);
  --color-slate-100: oklch(96.8% 0.007 247.896);
  --color-slate-200: oklch(92.9% 0.013 255.508);
  --color-slate-300: oklch(86.9% 0.022 252.894);
  --color-slate-400: oklch(70.4% 0.04 256.788);
  --color-slate-500: oklch(55.4% 0.046 257.417);
  --color-slate-700: oklch(37.2% 0.044 257.287);
  --color-slate-800: oklch(27.9% 0.041 260.031);
  --color-slate-900: oklch(20.8% 0.042 265.755);
  --color-slate-950: oklch(12.9% 0.042 264.695);
  --color-gray-50: oklch(98.5% 0.002 247.839);
  --color-gray-100: oklch(96.7% 0.003 264.542);
  --color-gray-200: oklch(92.8% 0.006 264.531);
  --color-gray-300: oklch(87.2% 0.01 258.338);
  --color-gray-400: oklch(70.7% 0.022 261.325);
  --color-gray-500: oklch(55.1% 0.027 264.364);
  --color-gray-600: oklch(44.6% 0.03 256.802);
  --color-gray-700: oklch(37.3% 0.034 259.733);
  --color-gray-800: oklch(27.8% 0.033 256.848);
  --color-gray-900: oklch(21% 0.034 264.665);
  --color-gray-950: oklch(13% 0.028 261.692);
  
  /* === VARIABLES TAILWIND === */
  --tw-primary: var(--color-primary);
  --tw-secondary: var(--color-secondary);
  --tw-accent: var(--color-accent);
  --tw-neutral-light: var(--color-neutral-light);
  --tw-text-primary: var(--color-text-primary);
  --tw-text-secondary: var(--color-text-secondary);
  
  /* === SPACING === */
  --spacing: 0.25rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  
  /* === TYPOGRAPHIE - TAILLES === */
  --text-xs: 0.75rem;
  --text-xs--line-height: 1.33333;
  --text-sm: 0.875rem;
  --text-sm--line-height: 1.42857;
  --text-base: 16px;
  --text-base--line-height: 24px;
  --text-lg: 1.125rem;
  --text-lg--line-height: 1.55556;
  --text-xl: 1.25rem;
  --text-xl--line-height: 1.4;
  --text-2xl: 1.5rem;
  --text-2xl--line-height: 1.33333;
  --text-3xl: 1.875rem;
  --text-3xl--line-height: 1.2;
  --text-4xl: 2.25rem;
  --text-4xl--line-height: 1.11111;
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1;
  --text-7xl: 4.5rem;
  --text-7xl--line-height: 1;
  --text-8xl: 6rem;
  --text-8xl--line-height: 1;
  --text-9xl: 8rem;
  --text-9xl--line-height: 1;
  --text-menu: 13px;
  
  /* === TYPOGRAPHIE - POIDS === */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* === TYPOGRAPHIE - ESPACEMENT === */
  --tracking-wide: 0.025em;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  
  /* === BORDER RADIUS === */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  
  /* === ANIMATIONS === */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  --default-transition-duration: 150ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* === OMBRES === */
  --shadow-sm: 0 2px 8px rgba(12 44 74, 0.08);
  --shadow-md: 0 4px 12px rgba(12 44 74, 0.12);
  --shadow-lg: 0 8px 24px rgba(12 44 74, 0.16);
  --shadow-cta: 0 4px 12px rgba(246, 123, 39, 0.4);
}

/* ============================================
  CLASSES UTILITAIRES - COULEURS DE FOND
============================================ */
/* Bleus */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-accent { background-color: var(--color-accent) !important; }

/* Neutres */
.bg-white { background-color: var(--color-white) !important; }
.bg-light-gray { background-color: var(--color-light-gray) !important; }
.bg-neutral-light { background-color: var(--color-neutral-light) !important; }
.bg-transparent { background-color: transparent !important; }

.bg-dark-gray { background-color: var(--color-text-dark) !important; }

/* CTA */
.bg-cta { background-color: var(--color-orange) !important; }
.bg-orange { background-color: var(--color-orange) !important; }

/* États système */
.bg-success { background-color: var(--color-success) !important; }
.bg-success-light { background-color: var(--color-success-light) !important; }
.bg-error { background-color: var(--color-error) !important; }
.bg-error-light { background-color: var(--color-error-light) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-warning-light { background-color: var(--color-warning-light) !important; }
.bg-info { background-color: var(--color-info) !important; }
.bg-info-light { background-color: var(--color-info-light) !important; }
.bg-dark { background-color: var(--color-text-dark) !important; }
.bg-red { background-color: var(--color-error) !important; }
.bg-red-hover { background-color: var(--color-error-hover) !important; }
.bg-red-light { background-color: var(--color-error-light) !important; }
.bg-yellow { background-color: var(--color-warning) !important; }
.bg-yellow-light { background-color: var(--color-warning-light) !important; }
.bg-green { background-color: var(--color-success) !important; }
.bg-green-light { background-color: var(--color-success-light) !important; }
.bg-green-100 { background-color: var(--color-green-100) !important; }
.bg-lime-400 { background-color: var(--color-lime-400) !important; }
.bg-blue { background-color: var(--color-primary) !important; }
.bg-blue-light { background-color: var(--color-primary-light) !important; }

/* ============================================
  CLASSES UTILITAIRES - COULEURS DE TEXTE
============================================ */
/* Bleus */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-accent { color: var(--color-accent) !important; }

.text-blue-primary { color: var(--color-primary) !important; }
.text-blue-secondary { color: var(--color-secondary) !important; }
.text-blue-accent { color: var(--color-accent) !important; }

/* Texte sémantique */
.text-title { color: var(--color-primary) !important; }
.text-subtitle { color: var(--color-accent) !important; }
.text-paragraph { color: var(--color-text-secondary) !important; }

/* Neutres */
.text-white { color: var(--color-white) !important; }
.text-dark { color: var(--color-text-dark) !important; }
.text-neutral-light { color: var(--color-neutral-light) !important; }
.text-bluish-gray { color: var(--color-bluish-gray) !important; }
.text-gray-900 { color: var(--color-gray-900) !important; }

/* CTA */
.text-cta { color: var(--color-orange) !important; }
.text-orange { color: var(--color-orange) !important; }

/* États système */
.text-success { color: var(--color-white) !important; }
.text-error { color: var(--color-white) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info { color: var(--color-info) !important; }

.text-emerald-500 { color: var(--color-emerald-500) !important; }
.text-orange-500 { color: var(--color-orange-500) !important; }
.text-red-500 { color: var(--color-red-500) !important; }
.text-blue-500 { color: var(--color-blue-500) !important; }
.text-blue-600 { color: var(--color-blue-600) !important; }
.text-blue-700 { color: var(--color-blue-700) !important; }
.text-blue-800 { color: var(--color-blue-800) !important; }
.text-blue-900 { color: var(--color-blue-900) !important; }
.text-indigo-500 { color: var(--color-indigo-500) !important; }
.text-indigo-600 { color: var(--color-indigo-600) !important; }
.text-indigo-700 { color: var(--color-indigo-700) !important; }
.text-sky-500 { color: var(--color-sky-500) !important; }
.text-sky-600 { color: var(--color-sky-600) !important; }
.text-sky-700 { color: var(--color-sky-700) !important; }
.text-cyan-500 { color: var(--color-cyan-500) !important; }
.text-cyan-600 { color: var(--color-cyan-600) !important; }
.text-cyan-700 { color: var(--color-cyan-700) !important; }


.blog-link { color: var(--color-primary) !important; }
.blog-link:hover { color: var(--color-accent) !important; }

/* ============================================
  CLASSES UTILITAIRES - BORDURES
============================================ */
.border-primary { border-color: var(--color-primary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }
.border-accent { border-color: var(--color-accent) !important; }
.border-neutral-light { border-color: var(--color-neutral-light) !important; }
.border-white { border-color: var(--color-white) !important; }
.border-cta { border-color: var(--color-orange) !important; }
.border-success { border-color: var(--color-success) !important; }
.border-error { border-color: var(--color-error) !important; }
.border-warning { border-color: var(--color-warning) !important; }

/* Hover et focus pour border-accent */
.hover\:border-accent:hover { border-color: var(--color-accent) !important; }
.focus\:border-accent:focus { border-color: var(--color-accent) !important; }

/* ============================================
  ÉTATS HOVER - FOND
============================================ */
.hover-bg-primary:hover { background-color: var(--color-primary) !important; }
.hover-bg-secondary:hover { background-color: var(--color-secondary) !important; }
.hover-bg-accent:hover { background-color: var(--color-accent) !important; }
.hover-bg-cta:hover { background-color: var(--color-orange-hover) !important; }
.hover-bg-orange:hover { background-color: var(--color-orange-hover) !important; }

/* Hover spécifiques palette */
.hover-bg-primary-dark:hover { background-color: #0C2C4A !important; }
.hover-bg-secondary-medium:hover { background-color: #1F4E7A !important; }
.hover-bg-accent-light:hover { background-color: #2E7CC2 !important; }

/* Hover pour les classes bg- Tailwind */
.hover\:bg-blue-50:hover { background-color: var(--color-blue-50) !important; }
.hover\:bg-blue-100:hover { background-color: var(--color-blue-100) !important; }
.hover\:bg-blue-400:hover { background-color: var(--color-blue-400) !important; }
.hover\:bg-blue-500:hover { background-color: var(--color-blue-500) !important; }
.hover\:bg-blue-600:hover { background-color: var(--color-blue-600) !important; }
.hover\:bg-blue-700:hover { background-color: var(--color-blue-700) !important; }
.hover\:bg-blue-800:hover { background-color: var(--color-blue-800) !important; }
.hover\:bg-blue-900:hover { background-color: var(--color-blue-900) !important; }
.hover\:bg-indigo-500:hover { background-color: var(--color-indigo-500) !important; }
.hover\:bg-indigo-600:hover { background-color: var(--color-indigo-600) !important; }
.hover\:bg-indigo-700:hover { background-color: var(--color-indigo-700) !important; }
.hover\:bg-sky-500:hover { background-color: var(--color-sky-500) !important; }
.hover\:bg-sky-600:hover { background-color: var(--color-sky-600) !important; }
.hover\:bg-sky-700:hover { background-color: var(--color-sky-700) !important; }
.hover\:bg-cyan-500:hover { background-color: var(--color-cyan-500) !important; }
.hover\:bg-cyan-600:hover { background-color: var(--color-cyan-600) !important; }
.hover\:bg-cyan-700:hover { background-color: var(--color-cyan-700) !important; }
.hover\:bg-red-50:hover { background-color: var(--color-red-50) !important; }
.hover\:bg-red-100:hover { background-color: var(--color-red-100) !important; }

/* ============================================
  ÉTATS HOVER - TEXTE
============================================ */
.hover-text-primary:hover { color: var(--color-primary) !important; }
.hover-text-secondary:hover { color: var(--color-text-secondary) !important; }
.hover-text-accent:hover { color: var(--color-accent) !important; }
.hover-text-cta:hover { color: var(--color-orange-hover) !important; }
.hover-text-white:hover { color: var(--color-white) !important; }

/* ============================================
  BOUTONS
============================================ */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 2px solid var(--color-white);
  padding: 12px 28px;
  border-radius: var(--radius-lg);
  font-weight: 600;
  transition: all var(--default-transition-duration) var(--default-transition-timing-function);
  cursor: pointer;
}

.btn-primary:hover {
  background-color: var(--color-cta-hover);
  color: var(--color-white);
  border-color: var(--color-white);
  box-shadow: var(--color-light-gray);
}

.btn-secondary {
  background-color: var(--color-accent);
  color: var(--color-white);
  border: 2px solid var(--color-white);
  padding: 12px 28px;
  border-radius: var(--radius-lg);
  font-weight: 600;
  transition: all var(--default-transition-duration) var(--default-transition-timing-function);
  cursor: pointer;
}

.btn-secondary:hover {
  background-color: var(--color-cta-hover);
  color: var(--color-white);
  border-color: var(--color-white);
  box-shadow: var(--color-light-gray);
}

.btn-light {
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  padding: 12px 28px;
  border-radius: var(--radius-lg);
  font-weight: 600;
  transition: all var(--default-transition-duration) var(--default-transition-timing-function);
  cursor: pointer;
}

.btn-light:hover {
  background-color: var(--color-cta-hover);
  color: var(--color-white);
  border-color: var(--color-white);
  box-shadow: var(--color-light-gray);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
  padding: 12px 28px;
  border-radius: var(--radius-lg);
  font-weight: 600;
  transition: all var(--default-transition-duration) var(--default-transition-timing-function);
  cursor: pointer;
}

.btn-outline:hover {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.btn-round-light {
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  padding: 12px;
  border-radius: var(--radius-lg);
  font-weight: 600;
  transition: all var(--default-transition-duration) var(--default-transition-timing-function);
  cursor: pointer;
}

.btn-round-light:hover {
  background-color: var(--color-cta-hover);
  color: var(--color-white);
  border-color: var(--color-white);
  box-shadow: var(--color-light-gray);
}

/* ============================================
  BOUTONS D'ACTION (VALIDER / ANNULER)
============================================ */
.btn-validate {
  background-color: var(--color-accent) !important;
  color: var(--color-white) !important;
  transition: all var(--default-transition-duration) var(--default-transition-timing-function);
}

.btn-validate:hover {
  background-color: var(--color-secondary) !important;
  color: var(--color-white) !important;
}

.btn-cancel {
  background-color: var(--color-dark-gray) !important;
  color: var(--color-white) !important;
  transition: all var(--default-transition-duration) var(--default-transition-timing-function);
}

.btn-cancel:hover {
  background-color: var(--color-medium-gray) !important;
  color: var(--color-white) !important;
}

/* ============================================
  PARTENAIRES
============================================ */
.partner-logo {
  -webkit-filter:   contrast(120%) grayscale(100%) hue-rotate(0deg) invert(0%) opacity(100%) saturate(100%) sepia(0%);
          filter:   contrast(120%) grayscale(100%) hue-rotate(0deg) invert(0%) opacity(100%) saturate(100%) sepia(0%);
  mix-blend-mode: none;
  opacity: 0.7;
  transition: all 0.5s ease;
}

.partner-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* ============================================
  CARTES
============================================ */
.card-primary {
  background-color: var(--color-secondary);
  border: 1px solid var(--color-neutral-light);
  color: var(--color-white);
  padding: 24px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--default-transition-duration) var(--default-transition-timing-function);
}

.card-primary:hover {
  background-color: var(--color-primary);
  border-color: var(--color-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-light {
  background-color: var(--color-white);
  border: 1px solid var(--color-light-gray);
  color: var(--color-text-dark);
  padding: 24px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--default-transition-duration) var(--default-transition-timing-function);
}

.card-light:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ============================================
  ALERTES
============================================ */
.alert {
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  margin: 16px 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.alert-success {
  background-color: var(--color-success);
  color: var(--color-white);
}

.alert-error {
  background-color: var(--color-error);
  color: var(--color-white);
}

.alert-warning {
  background-color: var(--color-warning);
  color: var(--color-text-dark);
}

.alert-info {
  background-color: var(--color-info);
  color: var(--color-white);
}

/* ============================================
  GRADIENTS
============================================ */
.gradient-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.gradient-secondary {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-accent) 100%);
}

.gradient-cta {
  background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-hover) 100%);
}

/* Overlay du carousel avec gradient des 3 bleus */
.carousel-overlay {
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-secondary) 50%,
    var(--color-accent) 100%
  );
  opacity: 0.7;
}

/* Variante avec opacité progressive pour plus de profondeur */
.overlay-gradient {
  background: linear-gradient(
    135deg,
    rgba(12, 44, 74, 0.6) 0%,
    rgba(31, 78, 122, 0.5) 50%,
    rgba(46, 124, 194, 0.4) 100%
  );
}

/* Overlay pour les images du carousel avec les 3 bleus */
[data-carousel-item]:not(.hidden)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(12, 44, 74, 0.7) 0%,
    rgba(31, 78, 122, 0.5) 50%,
    rgba(46, 124, 194, 0.3) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* ============================================
  OVERRIDES TAILWIND
============================================ */

.bg-indigo-600 { background-color: var(--color-accent) !important; }
.hover\:bg-indigo-700:hover { background-color: var(--color-secondary) !important; }
.border-indigo-600 { border-color: var(--color-accent) !important; }
.hover\:border-indigo-700:hover { border-color: var(--color-secondary) !important; }
.text-indigo-600 { color: var(--color-accent) !important; }
.hover\:text-indigo-700:hover { color: var(--color-secondary) !important; }

/* Classes pour les badges de rôles */
.bg-purple-600 { background-color: var(--color-purple-600) !important; }
.bg-blue-50 { background-color: var(--color-blue-50) !important; }
.bg-blue-100 { background-color: var(--color-blue-100) !important; }
.bg-blue-400 { background-color: var(--color-blue-400) !important; }
.bg-blue-500 { background-color: var(--color-blue-500) !important; }
.bg-blue-600 { background-color: var(--color-blue-600) !important; }
.bg-blue-700 { background-color: var(--color-blue-700) !important; }
.bg-blue-800 { background-color: var(--color-blue-800) !important; }
.bg-blue-900 { background-color: var(--color-blue-900) !important; }
.bg-indigo-500 { background-color: var(--color-indigo-500) !important; }
.bg-indigo-600 { background-color: var(--color-indigo-600) !important; }
.bg-indigo-700 { background-color: var(--color-indigo-700) !important; }
.bg-sky-500 { background-color: var(--color-sky-500) !important; }
.bg-sky-600 { background-color: var(--color-sky-600) !important; }
.bg-sky-700 { background-color: var(--color-sky-700) !important; }
.bg-cyan-500 { background-color: var(--color-cyan-500) !important; }
.bg-cyan-600 { background-color: var(--color-cyan-600) !important; }
.bg-cyan-700 { background-color: var(--color-cyan-700) !important; }
.bg-emerald-600 { background-color: var(--color-emerald-600) !important; }
.bg-gray-200 { background-color: var(--color-gray-200) !important; }
.bg-gray-500 { background-color: var(--color-gray-500) !important; }
.bg-yellow-600 { background-color: var(--color-yellow-600) !important; }
.bg-green-500 { background-color: var(--color-green-500) !important; }
.bg-green-600 { background-color: var(--color-green-600) !important; }
.bg-red-50 { background-color: var(--color-red-50) !important; }
.bg-red-100 { background-color: var(--color-red-100) !important; }
.bg-red-400 { background-color: var(--color-red-400) !important; }
.bg-red-500 { background-color: var(--color-red-500) !important; }
.bg-red-600 { background-color: var(--color-red-600) !important; }


/* ============================================
  UTILITAIRES SUPPLÉMENTAIRES
============================================ */

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-cta { box-shadow: var(--shadow-cta); }

.transition-default {
  transition: all var(--default-transition-duration) var(--default-transition-timing-function);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}


/* ============================================
  FORM CUSTOM
============================================ */

/*  input custom */
.custom-input, .custom-input:focus, .custom-input:hover, .custom-input:focus-visible {
  background-color: var(--color-white);
  border: 1px solid var(--color-light-gray);
  border-radius: var(--radius-lg);
  padding: 12px 24px;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  transition: all var(--default-transition-duration) var(--default-transition-timing-function);
}

.custom-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.custom-input:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.custom-input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

/*  boutons radio custom */
.custom-radio {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-light-gray);
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  position: relative;
  background-color: var(--color-white);
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.custom-radio:hover {
  border-color: var(--color-accent);
}

.custom-radio:checked {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
}

.custom-radio:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-white);
}

.custom-radio:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/*  checkbox custom */
.custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-light-gray);
  border-radius: var(--radius-lg);
  outline: none;
}

.custom-checkbox:hover {
  border-color: var(--color-accent);
}

.custom-checkbox:checked {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
}

.custom-checkbox:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
}

.custom-checkbox:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 12px 24px;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  transition: all var(--default-transition-duration) var(--default-transition-timing-function);
}

.custom-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.custom-select:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.custom-select:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

/* === CLASSES UTILITAIRES CURSOR === */
.cursor-not-allowed {
  cursor: not-allowed;
}

/* === EFFET HOVER CARTE CONTACT === */
.contact-card-hover:hover {
  box-shadow: 0 0 11px rgba(33,33,33,0.2);
  border-color: rgb(248 113 113); /* red-400 */
}

/* === EFFET HOVER CARTE CONTACT - TEXTE BLANC === */
.contact-card-hover:hover .contact-card-text,
.contact-card-hover:hover .contact-card-link {
  color: white !important;
}