# Concept Détaillé des Maquettes (Wireframes) - Version PlantUML

*   **Version :** 1.4
*   **Date :** 1er novembre 2025
*   **Auteur :** Yoann

## 1. Principes de Design

*   **Style Principal :** Le [translate:glassmorphisme] sera appliqué via CSS sur les conteneurs définis ci-dessous.
*   **Outil de Visualisation :** Ces maquettes sont écrites en PlantUML (avec le module Salt) pour une représentation schématique claire directement dans le code.

---

## 2. Page de Connexion

Cette maquette représente le formulaire de connexion centré sur la page.

```plantUML
@startsalt
{+
  "**Portail de Connexion**"
  " "
  "Nom d'utilisateur:" <input>
  "Mot de passe:" <password>
  " "
  {S
    .
    "       " [Se connecter]
  }
  " "
  "---"
  " "
  {S
     "Mot de passe oublié ?" | "S'inscrire"
  }
}
@endsalt
```

*   **Description :** Le conteneur `{+ ... +}` représente le formulaire principal avec son effet de [translate:glassmorphisme]. Les champs de saisie sont représentés par `<input>` et `<password>`, et les liens sont séparés pour plus de clarté.

---

## 3. Page du Portail (Après connexion)

Cette maquette illustre la disposition en deux colonnes avec le menu de navigation à gauche et les applications à droite.

```plantUML
@startsalt
{
  {/
    "**Navigation**"
    "---"
    "[Icône] Accueil"
    "[Icône] Mon Profil"
    "[Icône] Gestion (Admin)"
    .
    .
    "[Icône] Déconnexion"
  } | {+
    "**Applications Disponibles**"
    "---"
    {
      {+
        "**App Comptabilité**"
        "Gérer vos factures..."
        [Lancer]
      } | {+
        "**App Projets**"
        "Suivi des tâches..."
        [Lancer]
      }
    }
  }
}
@endsalt
```

*   **Description :** La structure `{/ ... } | {+ ... }` crée deux panneaux verticaux. Le panneau de gauche (`{/`) représente la navigation fixe, et celui de droite (`{+`) le contenu principal avec les cartes d'application.

---

## 4. Page de Gestion des Droits (Admin)

Cette maquette se concentre sur l'interface de l'administrateur, avec le tableau des utilisateurs et la modale d'édition.

```plantUML
@startsalt
{+
  "**Panneau d'Administration des Utilisateurs**"
  "---"
  {
    "Utilisateur" | "Email" | "Rôles" | "Actions"
    "admin_user" | "admin@site.com" | "admin" | [Modifier]
    "jean_dupont"| "jean@site.com" | "user, viewer"| [Modifier]
  }
}
@endsalt
```

*   **Description :** La syntaxe `{ "col1" | "col2" ... }` crée un tableau simple et lisible pour lister les utilisateurs.

**Fenêtre Modale "Modifier les rôles"**

```plantUML
@startsalt
{^
  "**Modifier les rôles pour : jean_dupont**"
  "---"
  () "admin"
  (X) "user"
  (X) "viewer"
  () "editor"
  "---"
  {S
    [Annuler] | [Sauvegarder]
  }
}
@endsalt
```
*   **Description :** La structure `{^ ... ^}` est idéale pour représenter une fenêtre modale. Les `()` et `(X)` simulent des cases à cocher non sélectionnées et sélectionnées.

---

Avec ce document, tu disposes maintenant de visualisations schématiques claires pour chaque interface clé, ce qui devrait grandement faciliter le passage au codage HTML et CSS.