/* Styles de base */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    @apply bg-gray-50;
}

/* Menu principal */
.nav-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    position: relative;
    overflow: hidden;
    @apply sticky top-0 z-50;
    box-shadow: 0 4px 20px rgba(96, 165, 250, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Effet de brillance */
.nav-shine::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.2) 0%,
        transparent 50%
    );
    animation: rotate 15s linear infinite;
    pointer-events: none;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Logo styles */
.logo-hover {
    @apply transition-transform duration-300;
}

.logo-hover img {
    @apply transition-all duration-300;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

.logo-hover:hover img {
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
    transform: scale(1.05);
}

.tlogo {color: #ffffff;}



/* Navigation links */
.nav-link {
    @apply px-4 py-2 rounded-lg font-medium relative overflow-hidden transition-all duration-300;
    color: rgba(255, 255, 255, 0.95);
   /* background: rgba(255, 255, 255, 0.15);*/
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.3px;
}

.nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.2);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-link.active {
    color: #ffffff;
/* background: rgba(255, 255, 255, 0.3);*/
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3);
    font-weight: 600;
}

/* Logo text */
.logo-text {
    @apply text-white font-semibold text-lg;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.5px;
}

/* Bouton Rendez-vous spécial */
.btn-rendez-vous {
    @apply px-6 py-2 rounded-lg font-bold transition-all duration-300;
    background: rgba(255, 255, 255, 0.95);
    color: var(--primary-dark);
    border: 2px solid rgba(255, 255, 255, 0.9);
    letter-spacing: 0.3px;
}

.btn-rendez-vous:hover {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(96, 165, 250, 0.3);
    border-color: #ffffff;
}

/* Mobile menu */
.mobile-menu {
    @apply fixed inset-0 z-50 transform transition-transform duration-300 ease-in-out;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}

.mobile-menu-links {
    @apply flex flex-col space-y-4 p-6 mt-16;
}

.mobile-menu-links .nav-link {
    @apply text-center text-lg;
    color: #ffffff;
}

/* Mobile menu button */
.mobile-menu-button {
    @apply p-2 rounded-lg transition-colors duration-300;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.15);
}

.mobile-menu-button:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.25);
}

/* Messages d'alerte */
.alert {
    @apply mb-4 p-4 rounded-lg;
    animation: slideIn 0.3s ease-out;
}

.alert-error {
    @apply bg-red-100 border border-red-400 text-red-700;
}

.alert-success {
    background-color: var(--secondary-light);
    color: var(--secondary-dark);
}

.alert-info {
    background-color: var(--primary-light);
    color: var(--primary-dark);
}

/* Boutons */
.btn {
    @apply px-4 py-2 rounded-md font-medium transition-all duration-300;
}

.btn-primary {
    background-color: var(--primary);
    @apply text-white hover:bg-opacity-90 focus:ring-2 focus:ring-offset-2;
    focus-ring-color: var(--primary-light);
}

.btn-secondary {
    background-color: var(--secondary);
    @apply text-white hover:bg-opacity-90 focus:ring-2 focus:ring-offset-2;
    focus-ring-color: var(--secondary-light);
}

/* Headers et titres */
h1, h2, h3, h4, h5, h6 {
    color: var(--primary-dark);
}

/* Liens */
a {
    color: var(--primary);
    @apply hover:text-opacity-80 transition-colors duration-300;
}

/* Cards et sections */
.card {
    @apply bg-white rounded-lg shadow-md p-6;
    border-top: 3px solid var(--primary);
}

.section-highlight {
    background-color: var(--primary-light);
    @apply bg-opacity-10;
}

/* Form elements */
.form-group {
    @apply mb-4;
}

.form-label {
    @apply block text-gray-700 text-sm font-bold mb-2;
}

.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500;
    transition: all 0.3s ease;
}

.form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.form-input.error {
    @apply border-red-500 focus:ring-red-500;
}

.error-message {
    @apply text-red-500 text-sm mt-1;
}

/* Animation pour les messages */
@keyframes slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

:root {
  --primary: #60A5FA;      /* Bleu clair principal */
  --primary-light: #93C5FD; /* Bleu très clair */
  --primary-dark: #3B82F6;  /* Bleu moyen */
  --secondary: #38BDF8;     /* Bleu ciel */
  --secondary-light: #BAE6FD; /* Bleu ciel clair */
  --secondary-dark: #0284C7;  /* Bleu ciel foncé */
}