# 🎨 Structure SCSS du Portfolio

Ce projet utilise une architecture SCSS moderne et organisée pour maintenir un code CSS propre et facilement maintenable.

## 📁 Structure des fichiers

```
src/styles/
├── _variables.scss      # Variables globales (couleurs, espacements, breakpoints)
├── _mixins.scss         # Mixins réutilisables
├── _global.scss         # Styles globaux et reset CSS
├── index.scss           # Point d'entrée principal
├── main.scss            # Import des composants
└── components/          # Styles spécifiques aux composants
    ├── _header.scss
    ├── _hero.scss
    ├── _about.scss
    ├── _skills.scss
    ├── _projects.scss
    ├── _education.scss
    └── _contact.scss
```

## 🎯 Architecture

### Variables (`_variables.scss`)
- **Couleurs** : Système de couleurs pour les thèmes clair/sombre
- **Espacements** : Variables responsive pour padding/margin
- **Breakpoints** : Points de rupture pour le responsive design
- **Typography** : Tailles de police fluides
- **Z-index** : Système organisé pour la gestion des couches

### Mixins (`_mixins.scss`)
- **Responsive** : `@include respond-to(md)`, `@include respond-above(lg)`
- **Composants** : `@include card()`, `@include button-primary()`
- **Animations** : `@include transition()`, `@include fade-in-animation()`
- **Layout** : `@include flex-center()`, `@include grid-responsive()`
- **Accessibilité** : `@include focus-style()`, `@include visually-hidden()`

### Styles globaux (`_global.scss`)
- Reset CSS moderne
- Styles de base pour les éléments HTML
- Classes utilitaires
- Animations keyframes
- Gestion des thèmes (clair/sombre)

## 🛠️ Utilisation

### Responsive Design
```scss
.component {
  padding: 20px;
  
  @include respond-to(md) {
    padding: 10px;
  }
  
  @include respond-above(xl) {
    padding: 40px;
  }
}
```

### Composants réutilisables
```scss
.card {
  @include card(32px, $border-radius-large, medium);
}

.button {
  @include button-primary();
}
```

### Système de couleurs
```scss
.element {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
```

### Grilles responsive
```scss
.grid {
  @include grid-responsive(300px, 24px);
}
```

## 🎨 Thèmes

Le système de thèmes utilise les variables CSS pour permettre le basculement dynamique :

```scss
// Variables définies dans _variables.scss
$colors: (
  light: (
    bg-primary: #ffffff,
    text-primary: #1e293b,
    // ...
  ),
  dark: (
    bg-primary: #0f172a,
    text-primary: #f1f5f9,
    // ...
  )
);
```

## 🚀 Avantages de cette architecture

1. **Modularité** : Chaque composant a ses styles séparés
2. **Réutilisabilité** : Mixins pour éviter la duplication
3. **Maintenabilité** : Variables centralisées
4. **Performance** : Compilation optimisée avec Sass
5. **Responsive** : Système de breakpoints cohérent
6. **Accessibilité** : Mixins dédiés pour l'a11y
7. **Thèmes** : Support natif clair/sombre

## 📝 Bonnes pratiques

- Utiliser les variables pour toutes les valeurs récurrentes
- Préférer les mixins aux classes utilitaires
- Organiser les styles par composant
- Utiliser les imports avec `@use` plutôt que `@import`
- Suivre la convention de nommage BEM
- Documenter les mixins complexes

## 🔧 Compilation

Les fichiers SCSS sont automatiquement compilés par Vite lors du développement et de la construction.

```bash
npm run dev    # Compilation en mode développement
npm run build  # Compilation pour la production
```