/* ============================================================
   MAIN.CSS - Fichier principal d'assemblage
   ============================================================ */

/* 1. Import des variables, reset et boutons */
@import 'variables.css';
@import 'reset.css';
@import 'buttons.css';

/* 2. Import des composants */
@import 'components/header.css';
@import 'components/hero.css';
@import 'components/services.css';
@import 'components/features.css';
@import 'components/portfolio.css';
@import 'components/testimonials.css';
@import 'components/team.css';
@import 'components/about.css';
@import 'components/contact.css';
@import 'components/footer.css';

/* 3. Styles globaux supplémentaires */
/* ============================================================ */

/* Classes utilitaires */
.container {
  max-width: var(--breakpoint-xl);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section-padding {
  padding: var(--space-xxl) 0;
}

/* Gestion du mode "réduction de mouvement" */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Sélection de texte personnalisée */
::selection {
  background: var(--color-bleu-vif);
  color: var(--color-blanc);
}

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

::-webkit-scrollbar-track {
  background: var(--color-fond);
}

::-webkit-scrollbar-thumb {
  background: var(--color-bleu-vif);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-marine);
}

/* Gestion des images responsives */
img,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Gestion des focus pour accessibilité */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-bleu-vif);
  outline-offset: 2px;
}

/* Empêcher le débordement horizontal */
html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

/* ============================================================
   FIN MAIN.CSS
   ============================================================ */