/* =========================
   WHY.STORY - MAIN CSS FILE
   Fichier CSS principal modulaire
========================= */

/* Import des modules CSS */
@import url('css/base.css');
@import url('css/hero.css');
@import url('css/why-choose-us.css');
@import url('css/use-cases.css');
@import url('css/video-carousel.css');
@import url('css/features.css');
@import url('css/cta-steps.css');
@import url('css/pricing-contact-faq-footer.css');

/* 
=========================
STRUCTURE DU PROJET CSS
=========================

📁 css/
├── base.css                           - Reset, variables, utilitaires
├── hero.css                          - Section Hero avec navigation
├── why-choose-us.css                 - Section Why Choose Us avec scroll hijacking
├── use-cases.css                     - Sections Use Cases avec accordéon
├── video-carousel.css                - Carrousel vidéo avec animation
├── features.css                      - Sections Features et grilles
├── cta-steps.css                     - Sections CTA et Steps
└── pricing-contact-faq-footer.css    - Pricing, Contact, FAQ et Footer

=========================
VARIABLES DISPONIBLES
=========================

Couleurs:
--primary-color: #4C3F92
--secondary-color: #6E63FA
--text-primary: #0A0A0A
--text-secondary: #1D1D1D
--text-muted: #3D3D42
--white: #FFFFFF
--background: #FFFFFF
--background-light: #FCFCFC

Espacements:
--spacing-xs à --spacing-7xl (8px à 120px)

Bordures:
--radius-sm à --radius-full (8px à 9999px)

Transitions:
--transition-fast: 0.2s ease
--transition-normal: 0.3s ease
--transition-slow: 0.4s ease

Classes utilitaires:
.container, .container-wide, .container-narrow
.section-padding, .section-padding-sm
.flex, .flex-col, .items-center, .justify-center
.gap-* (xs à 7xl)
.text-center

=========================
*/