# ArtShare — Document de design

## 1. Principes généraux

- **Fond blanc** sur toutes les pages (`#FFFFFF`).
- **Design très sobre** : beaucoup d'espace blanc, peu de couleurs, aucune décoration superflue. Les œuvres sont les seuls éléments visuellement forts.
- **Responsive** : une seule base de code, compatible téléphone et PC (approche *mobile first*).
- **Lisibilité avant tout** : contrastes suffisants (norme WCAG AA), tailles de texte confortables.

## 2. Charte graphique

### Couleurs
| Rôle | Couleur | Usage |
|---|---|---|
| Fond | `#FFFFFF` | Fond de toutes les pages |
| Texte principal | `#1A1A1A` | Titres, textes |
| Texte secondaire | `#6B6B6B` | Légendes, métadonnées (artiste, date, type) |
| Bordures / séparateurs | `#E6E6E6` | Lignes fines, contours de champs |
| Accent (unique) | `#1A1A1A` ou un gris-bleu discret `#3A4A5C` | Liens actifs, bouton principal, focus |
| Erreur | `#B3261E` | Messages d'erreur uniquement |

Aucune autre couleur dans l'interface : la couleur vient des œuvres.

### Typographie
- Une seule famille sans empattement, sobre : **Inter** (ou police système en repli).
- Titres : poids 500–600, pas de majuscules forcées.
- Tailles : corps 16 px (mobile et PC), légendes 14 px, titres de section 20–24 px, titre principal 28–32 px.
- Interlignage : 1,5 pour le texte.

### Éléments d'interface
- Coins légèrement arrondis (4 px) ou droits — pas d'arrondis prononcés.
- Pas d'ombres portées, ou une ombre très légère au survol des cartes sur PC.
- Boutons : texte simple ou contour fin ; un seul bouton « plein » par écran au maximum.
- Icônes : trait fin, monochromes (ex. Lucide / Feather).
- Animations : uniquement des transitions courtes (150–200 ms) sur survol et ouverture de menus.

## 3. Responsive (téléphone / PC)

| Point de rupture | Largeur | Grille des œuvres |
|---|---|---|
| Téléphone | < 640 px | 1 colonne (2 possibles pour les vignettes) |
| Tablette | 640–1024 px | 2 colonnes |
| PC | > 1024 px | 3 à 4 colonnes, contenu centré, largeur max 1200 px |

- Marges latérales : 16 px sur téléphone, 32 px et plus sur PC.
- Zones cliquables d'au moins 44 × 44 px sur téléphone.
- Pas de défilement horizontal.
- Images chargées en différé (*lazy loading*) et adaptées à la taille d'écran.

## 4. En-tête (toutes les pages)

- **À gauche** : nom du site « ArtShare » (texte simple, sert de lien vers l'accueil).
- **À droite** : lien **« Se connecter »** — discret (texte, taille normale, couleur du texte principal) mais toujours visible, sans être un gros bouton.
- Une fois connecté, ce lien est remplacé par le nom (ou l'initiale) de l'utilisateur, ouvrant un petit menu : Mon compte, Se déconnecter.
- Sur téléphone, l'en-tête reste sur une seule ligne ; pas de menu « burger » nécessaire tant que la navigation reste minimale.
- Fine ligne de séparation `#E6E6E6` sous l'en-tête.

## 5. Connexion

### Accès
- Le clic sur « Se connecter » ouvre une **fenêtre modale** légère sur PC et un **écran plein** sur téléphone (pas de redirection brutale).
- Champs : e-mail, mot de passe, case **« Rester connecté »** (cochée par défaut), bouton « Se connecter ».
- Liens secondaires discrets : « Mot de passe oublié ? », « Créer un compte ».
- Messages d'erreur sobres, sous le champ concerné, en couleur erreur.

### Reconnexion automatique (cookies)
- Si l'utilisateur s'est déjà connecté avec « Rester connecté », il est **reconnecté automatiquement** à son arrivée, sans aucune action.
- Côté technique (à valider avec le développement) :
  - cookie de session longue durée (ex. 30 jours), renouvelé à chaque visite ;
  - attributs `HttpOnly`, `Secure`, `SameSite=Lax` ;
  - jeton de session stocké côté serveur et révocable (déconnexion, changement de mot de passe) — jamais le mot de passe dans le cookie ;
  - la déconnexion supprime le cookie.
- Pendant la vérification du cookie, l'en-tête n'affiche pas « Se connecter » puis le nom (éviter le clignotement) : réserver l'emplacement jusqu'à la réponse.
- Bandeau cookies : sobre, en bas d'écran, une ligne de texte + « Accepter » / « Refuser ». Le cookie de connexion est un cookie fonctionnel.

## 6. Page d'accueil — visiteur non connecté

Ordre des blocs, de haut en bas (identique sur téléphone et PC, les colonnes s'adaptent) :

### 6.1 Recherche
- Placée en haut, bien visible, centrée.
- **Champ texte** : recherche sur le **nom** (de l'œuvre, de l'artiste ou de la collection). Texte d'aide : « Rechercher une œuvre, un artiste… ».
- **Filtre par type d'œuvre** : liste déroulante ou rangée de puces sélectionnables (ex. Peinture, Sculpture, Photographie, Dessin, Gravure, Autre — liste à confirmer).
  - Sur téléphone : liste déroulante ou puces défilantes horizontalement à l'intérieur de leur bloc.
- Les deux critères sont combinables. Bouton loupe ou validation par la touche Entrée.
- Résultats affichés en grille de vignettes (image, titre, artiste, type).

### 6.2 Deux œuvres au hasard
- Titre de section : « Œuvres à découvrir ».
- 2 cartes côte à côte sur PC/tablette, l'une sous l'autre sur téléphone.
- Carte : image (ratio conservé, pas de recadrage abusif), titre, artiste, type d'œuvre.

### 6.3 Une collection au hasard
- Titre de section : « Collection à découvrir ».
- Une carte : nom de la collection, courte description (2 lignes max), aperçu de 3 à 4 vignettes d'œuvres de la collection, lien « Voir la collection ».

### 6.4 Un artiste au hasard
- Titre de section : « Artiste à découvrir ».
- Une carte : photo ou œuvre représentative, nom, courte biographie (2–3 lignes), lien « Voir l'artiste ».

### Règles du hasard
- Nouveau tirage à chaque chargement de la page.
- Les 2 œuvres sont différentes ; ne tirer que des éléments publics et ayant au moins une image.
- Petit lien discret « Autres suggestions » (icône de rafraîchissement) pour relancer le tirage sans recharger la page — optionnel.

## 7. Page d'accueil — utilisateur connecté
- Même structure (recherche + découvertes) ; l'en-tête affiche l'utilisateur au lieu de « Se connecter ».
- Contenus personnels (favoris, ses propres œuvres…) à définir dans une prochaine version.

## 8. Pied de page
- Très léger : mentions légales, contact, politique de cookies. Texte secondaire en 14 px, ligne de séparation fine au-dessus.

## 9. Accessibilité et performance
- Textes alternatifs sur toutes les images d'œuvres.
- Navigation possible au clavier, focus visible.
- Contrastes conformes WCAG AA.
- Objectif : page d'accueil affichée en moins de 2 s sur mobile (images optimisées, WebP/AVIF).

## 10. Points à valider
1. Liste définitive des types d'œuvres.
2. Recherche sur le nom : œuvres seulement, ou aussi artistes et collections ?
3. Durée de la connexion automatique (30 jours proposé).
4. Couleur d'accent : noir pur ou gris-bleu discret.
5. Création de compte ouverte à tous ou sur invitation.