/* ===================================
   IMPORTS DES FICHIERS CSS
   =================================== */

/* Import des styles de blocs */
@import './blocks/_before-after.css';
@import './blocks/_blog-latest.css';
@import './blocks/_cards-grid.css';
@import './blocks/_carousel-lightbox.css';
@import './blocks/_content-split.css';
@import './blocks/_cta-centered.css';
@import './blocks/_faq-details.css';
@import './blocks/_features-grid.css';
@import './blocks/_features-screenshot.css';
@import './blocks/_gallery-grid.css';
@import './blocks/_hero-centered.css';
@import './blocks/_hero-split.css';
@import './blocks/_hero.css';
@import './blocks/_logo-cloud.css';
@import './blocks/_newsletter-centered.css';
@import './blocks/_pricing-3.css';
@import './blocks/_services.css';
@import './blocks/_stats-grid.css';
@import './blocks/_steps-horizontal.css';
@import './blocks/_tabs-simple.css';
@import './blocks/_team-grid.css';
@import './blocks/_team.css';
@import './blocks/_testimonials-cards.css';
@import './blocks/_timeline-vertical.css';

/* Import des styles globaux */
@import '_navigation.css';
@import '_complex-menu.css';
@import '_blog.css';
@import '_components.css';
@import '_contact.css';
@import '_footer.css';

/* Directives Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;


body {
  overflow-x: hidden;
  @apply h-auto;
}

/* ===================================
   STYLES GLOBAUX FULL-WIDTH
   =================================== */

/* Classe pour les sections en pleine largeur */
.cta-centered--full-width,
.features-screenshot--full-width,
.hero-centered--full-width,
.testimonials-cards--full-width,
.newsletter-centered--full-width,
.cards-grid--full-width,
.team-grid--full-width,
.tabs-simple--full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Composants personnalisés */
@layer components {
  /* Utilitaires globaux */
  .container {
    @apply max-w-7xl mx-auto px-4;
  }
  
  .section-padding {
    @apply py-16;
  }
  
  .text-gradient {
    @apply bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent;
  }
}

/* Responsive utilities */
@layer utilities {
  .mobile-only {
    @apply block lg:hidden;
  }
  
  .desktop-only {
    @apply hidden lg:block;
  }
  
  .tablet-up {
    @apply hidden md:block;
  }
  
  .mobile-up {
    @apply block;
  }
}

/* Animations personnalisées */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Focus states accessibles */
.focus-visible:focus {
  @apply outline-none ring-2 ring-primary ring-offset-2;
}

/* Scrollbar personnalisée */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-400 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500;
}