@tailwind base;
@tailwind components;
@tailwind utilities;

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

/* Base styles */
@layer base {
  body {
    @apply font-sans antialiased text-slate-600 bg-slate-100 min-h-screen flex flex-col items-center dark:bg-slate-950 dark:text-slate-100;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-bold text-slate-800;
  }
  
  a {
    @apply transition-colors duration-200;
  }
}

/* Custom components */
@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200;
    background-color: rgb(5 150 105)!important;
    color: white !important;
  }
  
  .btn-primary {
    @apply bg-emerald-600 text-white hover:bg-emerald-700 shadow-sm;
    background-color: rgb(5 150 105)!important;
    color: white !important;
  }
  
  .card {
    @apply bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden;
  }
  
  .form-input {
    @apply w-full px-4 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 transition-colors duration-200;
    
  }

  .active{
    @apply bg-emerald-600 text-white shadow-sm shadow-emerald-200 hover:-translate-y-1 !important;
    background-color: rgb(5 150 105)!important;
    color: white !important;
  }
}

/* Custom animations */
@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.animate-marquee {
  animation: scroll 25s linear infinite;
}

/* Hover effects */
.hover\:-translate-y-1:hover {
  transform: translateY(-0.25rem);
}

.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}

/* Ensure transitions are smooth */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

/* Dark mode styles */
html, body {
    min-height: 100%;
}

/* Effets de survol */
.hover\:-translate-y-1:hover {
    transform: translateY(-0.25rem);
    transition: transform 0.3s ease;
}

.hover\:bg-emerald-600:hover {
    background-color: #059669;
}

.hover\:text-white:hover {
    color: white;
}

.hover\:bg-emerald-50:hover {
    background-color: #ecfdf5;
}

.hover\:text-emerald-700:hover {
    color: #047857;
}

.group:hover .group-hover\:scale-105 {
    transform: scale(1.05);
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.duration-300 {
    transition-duration: 300ms;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hover\:shadow-\[0_25px_50px_-12px_rgba\(0\2c 0\2c 0\2c 0\.5\)\]:hover {
    --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Links in dark mode */
.dark a:not(.btn) {
    color: #60a5fa;
}

.dark a:not(.btn):hover {
    color: #3b82f6;
}

body {
    position: relative;
    background-color: rgba(248, 250, 252, 0.95); /* fallback */
}

/* L'image de fond est maintenant gérée dynamiquement via le layout */

/* Custom Animation for Flash Info / Marquee */
@keyframes scroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.animate-marquee {
    animation: scroll 30s linear infinite;
}

/* Pagination custom styles */
.pagination-link {
    @apply flex items-center justify-center w-10 h-10 rounded-lg border border-slate-200 bg-white text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-green-700 hover:border-green-200 transition-all;
}

.pagination-link.active {
    @apply bg-green-50 text-green-700 border-green-200 font-semibold ring-1 ring-green-200;
}

/* Article Content Styles (article.html) */
.article-content p { 
    margin-bottom: 1.5rem; 
    line-height: 1.8; 
}

.article-content h2 { 
    font-weight: 600; 
    font-size: 1.5rem; 
    letter-spacing: -0.025em; 
    margin-top: 2.5rem; 
    margin-bottom: 1rem; 
    color: #1e293b; 
}

.article-content h3 { 
    font-weight: 600; 
    font-size: 1.25rem; 
    margin-top: 2rem; 
    margin-bottom: 0.75rem; 
    color: #334155; 
}

.article-content ul { 
    list-style-type: disc; 
    padding-left: 1.5rem; 
    margin-bottom: 1.5rem; 
}

.article-content li { 
    margin-bottom: 0.5rem; 
}

.article-content blockquote { 
    border-left: 4px solid #16a34a; 
    padding-left: 1rem; 
    font-style: italic; 
    color: #475569; 
    margin: 2rem 0; 
}

/* Office Page - Accordion Styling */
details > summary {
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

details[open] summary ~ * {
    animation: slideDown 0.3s ease-in-out;
}

@keyframes slideDown {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Gallery Page - Transitions */
.gallery-item {
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.gallery-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}