Étape 7 : CSS - Statistiques et Formulaire

C’est ici que nous transformons les éléments fonctionnels en composants UI agréables.

1. Les Cartes de Statistiques (.stats-container)

Nous voulons que les 3 cartes (Total, Actives, Terminées) soient alignées côte à côte. Pour cela, display: grid est parfait.

/* Stats Cards */
.stats-container {
    display: grid;
    /* Crée 3 colonnes de largeur égale (1 fraction chacune) */
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem; /* Espace entre les cartes */
    margin-bottom: 2rem;
}

.stat-card {
    background: #f9fafb; /* Fond très léger */
    padding: 1rem;
    border-radius: var(--radius);
    text-align: center;
    border: 1px solid var(--border);
    transition: transform 0.2s; /* Pour l'animation au survol */
}

/* Petit effet de "saut" au survol de la souris */
.stat-card:hover {
    transform: translateY(-2px); /* Monte de 2 pixels */
    border-color: var(--primary); /* La bordure devient violette */
}

.stat-value {
    display: block; /* Force le retour à la ligne */
    font-size: 1.5rem; /* Gros chiffres */
    font-weight: 700;
    color: var(--text-main);
}

.stat-label {
    font-size: 0.75rem; /* Petit texte */
    color: var(--text-muted);
    text-transform: uppercase; /* TOUT EN MAJUSCULES */
    letter-spacing: 0.5px;
}

2. Le Formulaire (.task-form)

Nous mettons le champ de saisie et les boutons sur une seule ligne grâce à Flexbox.

/* Formulaire */
.task-form {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

/* Le champ texte prend toute la place disponible restante */
.input-group {
    flex: 1;
}

/* Style commun pour les Inputs et Selects */
input[type='text'],
select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.95rem;
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}

/* Effet de focus (quand on clique dedans) */
input[type='text']:focus,
select:focus {
    outline: none; /* Enlève le contour bleu moche par défaut */
    border-color: var(--primary); /* Bordure violette */
    /* Petite lueur violette autour */
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

3. Le Bouton Principal (.btn-primary)

.btn-primary {
    background: var(--primary);
    color: white;
    border: none;
    padding: 0 1.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;

    /* Pour aligner l'icône et le texte */
    display: flex;
    align-items: center;
    gap: 0.5rem;

    transition: background 0.2s;
}

.btn-primary:hover {
    background: var(--primary-hover); /* Devient plus foncé au survol */
}

---

Résultat : Votre interface commence à avoir fière allure ! Les stats sont bien alignées en haut, et le formulaire en dessous est propre et moderne avec des effets interactifs lors du clic.