Étape 6 : CSS - Layout Principal et Header

Nous allons donner forme à la “carte” principale de l’application et styliser le titre.

1. Le Conteneur Principal (.app-container)

C’est la boîte blanche qui contient tout.

.app-container {
    width: 100%;
    max-width: 600px; /* Ne jamais dépasser 600px de large */
    background: var(--bg-card); /* Blanc */
    padding: 2rem; /* Espace intérieur aéré */
    border-radius: var(--radius); /* Coins arrondis (12px) */
    box-shadow: var(--shadow-md); /* Belle ombre portée pour le relief */
}

Notez l’utilisation des variables var(--radius) et var(--shadow-md) que nous avons définies à l’étape précédente.

2. L’En-tête (.app-header)

Nous allons centrer le texte et styliser le titre.

/* Header */
.app-header {
    text-align: center;
    margin-bottom: 2rem; /* Espace sous le header */
}

.app-header h1 {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.5px; /* Resserre légèrement les lettres pour un look moderne */
}

/* Le mot "Pro" en couleur */
.accent {
    color: var(--primary); /* Notre violet */
}

.subtitle {
    color: var(--text-muted); /* Gris plus clair */
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

---

Résultat visuel : Vous devriez voir une belle carte blanche au centre de l’écran avec une ombre douce. Le titre “TaskMaster Pro” est bien formaté, avec “Pro” en violet, et le sous-titre est en gris discret. Le reste du contenu (formulaire, stats) est encore en désordre à l’intérieur de la carte.