:root {
  /* Couleurs principales */
  --primary: #2C5282;      /* Bleu médical profond */
  --secondary: #63B3ED;    /* Bleu ciel apaisant */
  --accent: #48BB78;       /* Vert médical */
  --background: #F7FAFC;   /* Gris très clair */
  --text: #2D3748;         /* Gris foncé */

  /* Variantes de transparence pour primary */
  --primary-100: rgba(44, 82, 130, 0.1);
  --primary-200: rgba(44, 82, 130, 0.2);
  --primary-300: rgba(44, 82, 130, 0.3);
  --primary-400: rgba(44, 82, 130, 0.4);
  --primary-500: rgba(44, 82, 130, 0.5);
  --primary-600: rgba(44, 82, 130, 0.6);
  --primary-700: #234066;  /* Version plus foncée */
  --primary-800: #1a304d;  /* Version encore plus foncée */
  --primary-900: rgba(44, 82, 130, 0.9);

  /* Variantes de transparence pour secondary */
  --secondary-100: rgba(99, 179, 237, 0.1);
  --secondary-200: rgba(99, 179, 237, 0.2);
  --secondary-300: rgba(99, 179, 237, 0.3);
  --secondary-400: rgba(99, 179, 237, 0.4);
  --secondary-500: rgba(99, 179, 237, 0.5);
  --secondary-600: rgba(99, 179, 237, 0.6);
  --secondary-700: rgba(99, 179, 237, 0.7);
  --secondary-800: rgba(99, 179, 237, 0.8);
  --secondary-900: rgba(99, 179, 237, 0.9);

  /* Variantes de transparence pour accent */
  --accent-100: rgba(72, 187, 120, 0.1);
  --accent-200: rgba(72, 187, 120, 0.2);
  --accent-300: rgba(72, 187, 120, 0.3);
  --accent-400: rgba(72, 187, 120, 0.4);
  --accent-500: rgba(72, 187, 120, 0.5);
  --accent-600: rgba(72, 187, 120, 0.6);
  --accent-700: rgba(72, 187, 120, 0.7);
  --accent-800: rgba(72, 187, 120, 0.8);
  --accent-900: rgba(72, 187, 120, 0.9);
} 

.primary {color: var(--primary);}
.secondary {color: var(--secondary);}
.accent {color: var(--accent);}
.background {color: var(--background);}
.text {color: var(--text);}

.primary-100 {color: var(--primary-100);}
.secondary-100 {color: var(--secondary-100);}
.accent-100 {color: var(--accent-100);}

.primary-200 {color: var(--primary-200);}
.secondary-200 {color: var(--secondary-200);}
.accent-200 {color: var(--accent-200);}

.primary-300 {color: var(--primary-300);}
.secondary-300 {color: var(--secondary-300);}
.accent-300 {color: var(--accent-300);}

.primary-400 {color: var(--primary-400);}
.secondary-400 {color: var(--secondary-400);}
.accent-400 {color: var(--accent-400);}

.primary-500 {color: var(--primary-500);}
.secondary-500 {color: var(--secondary-500);}
.accent-500 {color: var(--accent-500);}

.primary-600 {color: var(--primary-600);}
.secondary-600 {color: var(--secondary-600);}
.accent-600 {color: var(--accent-600);}

.primary-700 {color: var(--primary-700);}
.secondary-700 {color: var(--secondary-700);}
.accent-700 {color: var(--accent-700);}

.primary-800 {color: var(--primary-800);}
.secondary-800 {color: var(--secondary-800);}
.accent-800 {color: var(--accent-800);}

.primary-900 {color: var(--primary-900);}
.secondary-900 {color: var(--secondary-900);}
.accent-900 {color: var(--accent-900);} 

.bg-primary {background-color: var(--primary);}
.bg-secondary {background-color: var(--secondary);}
.bg-accent {background-color: var(--accent);}
.bg-background {background-color: var(--background);}
.bg-text {background-color: var(--text);}


/* FONTS */
@font-face {
  font-family: 'Poppins-Bold';
  src: url('/static/fonts/Poppins-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Poppins-Regular';
  src: url('/static/fonts/Poppins-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Poppins-Medium';
  src: url('/static/fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: medium;
}

@font-face {
  font-family: 'Poppins-Light';
  src: url('/static/fonts/Poppins-Light.ttf') format('truetype');
  font-weight: light;
}

@font-face {
  font-family: 'Poppins-Thin';
  src: url('/static/fonts/Poppins-Thin.ttf') format('truetype');
  font-weight: thin;
}


@font-face {
  font-family: 'Poppins-ExtraLight';
  src: url('/static/fonts/Poppins-ExtraLight.ttf') format('truetype');
  font-weight: extralight;
}


@font-face {
  font-family: 'Poppins-Black';
  src: url('/static/fonts/Poppins-Black.ttf') format('truetype');
  font-weight: black;
}

.font-poppins {
  font-family: 'Poppins-Regular', sans-serif;
}

.font-poppins-bold {
  font-family: 'Poppins-Bold', sans-serif;
}

.font-poppins-medium {font-family: 'Poppins-Medium', sans-serif!important;}
.font-poppins-light {font-family: 'Poppins-Light', sans-serif!important;}
.font-poppins-thin {font-family: 'Poppins-Thin', sans-serif!important;}
.font-poppins-extralight {font-family: 'Poppins-ExtraLight', sans-serif!important;}
.font-poppins-black {font-family: 'Poppins-Black', sans-serif!important;}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins-Bold', sans-serif;
}

p, span, a, li, td, th, label, input, textarea, select, option, button {
  font-family: 'Poppins-Regular', sans-serif;
}

/* Ajout de nouvelles classes utilitaires */
.shadow-hover {
  transition: box-shadow 0.2s ease-in-out;
}

.shadow-hover:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.focus-ring {
  transition: all 0.2s ease-in-out;
}

.focus-ring:focus {
  outline: none;
  ring: 2px;
  ring-color: var(--primary-300);
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hover-lift {
  transition: transform 0.2s ease-in-out;
}

.hover-lift:hover {
  transform: translateY(-1px);
}

.bg-gradient-primary {
  background: linear-gradient(to right, var(--primary), var(--primary-700));
}

/* Amélioration des transitions */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

/* Ajout des styles pour l'effet de vague */
.wave-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--background);
  clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 100%, 0 100%);
}

/* Amélioration des transitions pour les éléments du hero */
.hero-element {
  transition: all 0.3s ease-in-out;
}

.hero-element:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}