Étape 5 : CSS - Variables et Reset

Maintenant que nous avons le squelette HTML, passons à l’habillage. Ouvrez le fichier style.css. Nous allons commencer par définir notre palette de couleurs et nettoyer les styles par défaut du navigateur.

1. Définition des Variables (:root)

Les variables CSS sont extrêmement puissantes. Elles nous permettent de définir nos couleurs une seule fois et de les réutiliser partout. Si nous voulons changer la couleur principale du bleu au rouge plus tard, nous n’aurons qu’une seule ligne à modifier !

Ajoutez ceci au tout début du fichier style.css :

:root {
    /* Couleurs principales */
    --primary: #6366f1; /* Un beau violet Indigo */
    --primary-hover: #4f46e5; /* Version plus foncée pour le survol */

    /* Couleurs de fond et de texte */
    --bg-body: #f3f4f6; /* Gris très clair pour le fond de page */
    --bg-card: #ffffff; /* Blanc pur pour la carte de l'app */
    --text-main: #1f2937; /* Gris très foncé (presque noir) pour le texte */
    --text-muted: #6b7280; /* Gris moyen pour les sous-titres */
    --border: #e5e7eb; /* Gris clair pour les bordures */

    /* Couleurs d'état */
    --success: #10b981; /* Vert émeraude */
    --danger: #ef4444; /* Rouge vif */
    --warning: #f59e0b; /* Orange ambré */

    /* Effets (Ombres et Arrondis) */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --radius: 12px; /* Arrondi standard pour nos éléments */
}

2. Le Reset Universel

Chaque navigateur (Chrome, Firefox, Safari) a ses propres marges par défaut. Pour éviter les mauvaises surprises, nous allons tout remettre à zéro. Nous utilisons box-sizing: border-box, ce qui est crucial : cela signifie que si on dit qu’un élément fait 100px de large, il fera 100px padding inclus. Sans ça, les calculs de taille deviennent un cauchemar.

Ajoutez ceci à la suite :

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

3. Style de base du Body

Nous allons appliquer la police, la couleur de fond et centrer notre application verticalement et horizontalement.

body {
    font-family: 'Inter', sans-serif; /* Notre police Google Fonts */
    background-color: var(--bg-body);
    color: var(--text-main);

    /* Flexbox pour centrer l'application au milieu de l'écran */
    display: flex;
    justify-content: center;

    /* Hauteur minimale de 100% de la fenêtre (Viewport Height) */
    min-height: 100vh;
    padding: 40px 20px; /* Un peu d'espace autour */
}

---

À ce stade : Votre page a maintenant un fond gris clair, la police “Inter” est appliquée, et tout le contenu est centré horizontalement en haut de la page.