📋 Objectifs
- Appliquer la charte graphique (couleurs, polices)
- Layout Grid pour la structure globale
- Flexbox pour navbar, cartes projets, footer
- Responsive : 3 breakpoints (mobile, tablette, desktop)
- Animations : hover, fade-in, transitions fluides
- Dark mode via prefers-color-scheme
Architecture CSS
/* 1. Reset + Variables */
:root { --primary: #2C3E50; --accent: #3498DB; }
/* 2. Base mobile (Mobile First) */
body { font-family: Inter, sans-serif; }
/* 3. Tablette */
@media (min-width: 768px) { .grid { grid-template-columns: 1fr 1fr; } }
/* 4. Desktop */
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }
/* 5. Dark mode */
@media (prefers-color-scheme: dark) { :root { --primary: #ECF0F1; } }
💡 Sections à styliser
- Hero section : pleine hauteur, dégradé, CTA
- Cartes projets : Grid, hover avec scale + shadow
- Formulaire : flex, champs stylés, validation visuelle
- Navbar : sticky, hamburger mobile, horizontal desktop