Étape 3 : CSS - Effet Verre Dépoli (Glassmorphism)

C’est une tendance très moderne. Un fond dégradé coloré et un formulaire semi-transparent par-dessus.

1. Reset et Fond Dégradé

:root {
    --primary-color: #8e44ad; /* Violet */
    --error-color: #e74c3c; /* Rouge */
    --success-color: #2ecc71; /* Vert */
}

* {
    box-sizing: border-box;
}

body {
    background: linear-gradient(135deg, #74ebd5 0%, #9face6 100%);
    font-family: 'Poppins', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

2. La Carte (Glassmorphism)

.container {
    background: rgba(255, 255, 255, 0.7); /* Blanc semi-transparent */
    backdrop-filter: blur(10px); /* L'effet de flou magique */
    border-radius: 10px;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5); /* Bordure subtile */
    width: 400px;
    max-width: 100%;
    overflow: hidden;
}

.header {
    background: #f7f7f7;
    border-bottom: 1px solid #f0f0f0;
    padding: 20px 40px;
    text-align: center;
}

.header h2 {
    margin: 0;
    color: #333;
}

.form {
    padding: 30px 40px;
}

3. Les Champs (.form-control)

C’est ici que toute la logique visuelle se joue.

.form-control {
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative; /* Pour positionner les icônes */
}

.form-control label {
    display: inline-block;
    margin-bottom: 5px;
    color: #555;
    font-size: 0.9rem;
}

.form-control input {
    border: 2px solid #f0f0f0;
    border-radius: 4px;
    display: block;
    font-family: inherit;
    font-size: 14px;
    padding: 10px;
    width: 100%;
    transition: all 0.3s;
}

/* Quand on clique dans le champ */
.form-control input:focus {
    outline: 0;
    border-color: #777;
}

4. Les États (Succès / Erreur)

/* SUCCÈS */
.form-control.success input {
    border-color: var(--success-color);
}

.form-control.success i.fa-check-circle {
    visibility: visible;
    color: var(--success-color);
}

/* ERREUR */
.form-control.error input {
    border-color: var(--error-color);
    background-color: rgba(231, 76, 60, 0.05); /* Fond légèrement rouge */
}

.form-control.error i.fa-exclamation-circle {
    visibility: visible;
    color: var(--error-color);
}

.form-control.error small {
    visibility: visible;
    color: var(--error-color);
}

5. Icônes et Messages cachés par défaut

.form-control i {
    visibility: hidden; /* Caché */
    position: absolute;
    top: 40px;
    right: 10px;
}

.form-control small {
    visibility: hidden; /* Caché */
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 0.75rem;
}

button {
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    color: #fff;
    display: block;
    font-family: inherit;
    font-size: 16px;
    padding: 10px;
    margin-top: 20px;
    width: 100%;
    cursor: pointer;
    transition: 0.3s;
}

button:hover {
    background-color: #732d91;
}

Résultat : Un formulaire très élégant qui réagit visuellement dès qu’on lui applique les classes .success ou .error.