# SPEC.md - ASA Chimie & Cosmétique

## 1. Project Overview

**Project Name:** ASA - Site Web Corporate  
**Type:** Landing Page professionnelle - Entreprise de chimie/cosmétique  
**Core Functionality:** Présenter les services d'ASADERMA et ASACHIMIE, formulaire de contact avec sauvegarde en base de données, interface d'administration  
**Target Users:** Professionnels et entrepreneurs du secteur cosmétique, parapharmaceutique et chimique

---

## 2. UI/UX Specification

### Layout Structure

**Single Page - Sections:**
1. **Hero/Introduction** - Pleine page avec animation de particules
2. **ASADERMA** - Section présentation avec 3 cartes de services
3. **ASACHIMIE** - Section services avec 4 cartes
4. **Contact** - Formulaire de contact intégré
5. **Footer** - Informations légales

**Responsive Breakpoints:**
- Mobile: < 768px (1 colonne)
- Tablet: 768px - 1024px (2 colonnes)
- Desktop: > 1024px (3-4 colonnes)

### Visual Design

**Color Palette:**
- `--color-black`: #0a0a0a (fond principal)
- `--color-gold`: #C9A84C (accents dorés)
- `--color-gold-light`: #E8D5A3 (or clair)
- `--color-cream`: #F5F0E8 (blanc cassé)
- `--color-anthracite`: #1a1a2e (gris anthracite)
- `--color-text`: #F5F0E8 (texte principal)
- `--color-text-muted`: #A0A0A0 (texte secondaire)
- `--color-glass`: rgba(255, 255, 255, 0.05) (verre dépoli)

**Typography:**
- Display/Titles: "Cormorant Garamond", serif (Google Fonts)
- Body: "Lato", sans-serif (Google Fonts)
- Title sizes: 3.5rem (h1), 2.5rem (h2), 1.5rem (h3)
- Body size: 1rem (16px)
- Letter-spacing: 0.05em - 0.15em pour les titres

**Spacing System:**
- Section padding: 120px vertical, 5% horizontal
- Card padding: 40px
- Element gaps: 24px (grid), 16px (inline)

**Visual Effects:**
- Glassmorphism: backdrop-filter: blur(20px), background semi-transparent
- Golden shadows: box-shadow: 0 20px 60px rgba(201, 168, 76, 0.15)
- Gradient overlays sur les sections
- Border dorés subtils: 1px solid rgba(201, 168, 76, 0.3)
- Noise texture overlay (subtile)

### Components

**Hero Section:**
- Logo "ASA" en grand (Cormorant Garamond, 8rem, or)
- Slogan avec animation typing ou fade-in
- Animation particules chimiques (Canvas ou CSS)
- Bouton CTA avec effet shimmer doré
- Scroll indicator flottant

**Cards (Service Cards):**
- Fond glassmorphism
- Icône SVG dorée (min 48px)
- Titre en or
- Description en crème
- Hover: scale(1.02), ombre renforcée
- Bordure dorée subtile

**Formulaire:**
- Labels flottants ou fixes au-dessus
- Inputs avec bordure or au focus
- Select dropdown stylisé
- Bouton submit avec gradient doré et animation
- Message de succès toast

**Animations:**
- Intersection Observer pour fade-in des sections
- Stagger delay sur les cartes (100ms entre chaque)
- Smooth scroll entre sections
- Particules en arrière-plan (mouvement aléatoire)

---

## 3. Functionality Specification

### Core Features

**Frontend:**
1. Animation particules dans le Hero (ronds qui flottent/tournent)
2. Navigation smooth scroll vers les sections
3. Validation HTML5 du formulaire
4. Soumission AJAX avec fetch API
5. Message de succès sans rechargement
6. Animations d'apparition au scroll

**Backend (PHP + SQLite):**
1. `init_db.php` - Création automatique de la base et table
2. `submit.php` - Réception POST, validation, insertion
3. `admin.php` - Interface admin avec mot de passe

**Admin Panel:**
- Authentification simple (session PHP)
- Tableau listant tous les contacts
- Bouton supprimer par ligne
- Export CSV de toutes les données
- Design cohérent avec le site principal

### Data Handling

**Table: contacts**
```sql
CREATE TABLE contacts (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    nom TEXT NOT NULL,
    telephone TEXT NOT NULL,
    service TEXT NOT NULL,
    message TEXT,
    date_soumission DATETIME DEFAULT CURRENT_TIMESTAMP
);
```

### Edge Cases
- Formulaire envoyé vide: validation côté client et serveur
- Base de données manquante: création automatique
- Échec insertion: message d'erreur JSON

---

## 4. Acceptance Criteria

### Visual Checkpoints
- [ ] Hero affiche logo "ASA" avec animation particules
- [ ] Les 2 sections (ASADERMA, ASACHIMIE) ont des cartes avec icônes
- [ ] Le formulaire est fonctionnel avec validation
- [ ] Les animations fade-in fonctionnent au scroll
- [ ] Le design est responsive sur mobile
- [ ] Les couleurs sont cohérentes (noir, or, crème)
- [ ] La police Cormorant Garamond s'affiche pour les titres

### Functional Checkpoints
- [ ] Le formulaire soumet sans rechargement (AJAX)
- [ ] Les données sont enregistrées en SQLite
- [ ] admin.php est accessible et affiche les données
- [ ] Le mot de passe fonctionne (admin / asaadmin2025)
- [ ] L'export CSV fonctionne
- [ ] La suppression d'une entrée fonctionne

---

## 5. File Structure

```
C:\xampp\htdocs\asachimie\
├── SPEC.md
├── README.md
├── index.html
├── style.css
├── script.js
├── submit.php
├── admin.php
└── init_db.php
```