# Tingting Work - PowerPoint Style Guide

## Identité visuelle pour les présentations professionnelles de Tingting

Ce document décrit le style visuel élégant développé pour les présentations PowerPoint de Tingting (professeure, contexte scolaire chinois).

---

## 🎨 Palette de couleurs

### Couleurs principales
- **Bordeaux profond** : `#6B2C3E` - Élégance, sérieux professionnel
- **Or antique** : `#B8974F` - Raffinement, tradition chinoise subtile
- **Crème ivoire** : `#F5F1E8` - Fond chaleureux, doux pour les yeux
- **Gris ardoise** : `#4A5568` - Texte principal
- **Encre chinoise** : `#2D3748` - Accents sombres, fonds dramatiques

### Couleurs d'accent (optionnelles)
- **Vert sauge pâle** : `#A8B5A0` - Touche européenne subtile
- **Bleu encre dilué** : `#7891A8` - Modernité chinoise

---

## 📐 Principes de design

### 1. **Minimalisme moderne avec touches traditionnelles**
- Beaucoup d'espace blanc (ou crème)
- Éléments visuels épurés
- Bordures fines (1-2pt maximum)
- Ombres très subtiles, presque imperceptibles

### 2. **Typographie**
- **Titres** : Georgia (serif) pour l'élégance
- **Corps de texte** : Arial ou équivalent system font
- **Tailles** :
  - H1 (titre principal) : 42-52pt
  - H2 (sous-titres) : 38-42pt
  - H3 (titres de sections) : 16-22pt
  - Corps : 12-15pt
  - Citations : 17-22pt en italique

### 3. **Éléments chinois ultra-subtils**
- Caractères chinois en **filigrane/watermark** : opacity 8-12% maximum
- Positionnés de façon décorative (pas au centre)
- Taille massive (280-420pt) mais ultra-transparent
- Exemples : 师 (professeur), 魂 (âme/esprit), 学 (étude)

### 4. **Structure visuelle**
- **Cartes/boxes** : fond blanc, bordure fine or antique, border-radius 6-8pt
- **Badges numérotés** : cercles bordeaux avec chiffres crème
- **Dividers** : lignes fines (1pt) or antique, jamais plus de 150-180pt de large
- **Listes** : utiliser `<ul>` avec discs, espacement généreux (line-height 1.4-1.7)

---

## 🏗️ Templates de slides types

### Slide 1 : Introduction/Titre
```
- Watermark character (师) ultra-léger en haut à droite
- Titre principal (H1) centré-gauche, bordeaux
- Divider horizontal or fin sous le titre
- Sous-titre en gris italique
- Barre auteur en bas avec bordure top or antique
```

### Slide 2 : Index/Priorités (4 boxes grid)
```
- Titre H2 en haut
- 4 boxes blanches en grille 2x2
- Chaque box :
  - Badge numéroté bordeaux en haut à gauche
  - H3 pour le titre de la priorité
  - Texte descriptif court
  - Border or antique 1pt
```

### Slide 3 : Détail d'une initiative (3 cartes verticales)
```
- Titre H2 + sous-titre italique
- Divider fin or antique
- 3 feature cards empilées verticalement
- Border-left 3pt or antique (au lieu de border complète)
- Cercle décoratif subtil en bas à droite (opacity 0.3)
```

### Slide 4 : Slide dramatique (fond sombre)
```
- Background : #2D3748 (encre chinoise)
- Watermark character (魂) énorme et ultra-léger
- Titre or antique
- Box central bordeaux avec bordure or
- Texte crème/ivoire pour contraste
```

### Slide 5 : Conclusion
```
- Background bordeaux
- Cercle décoratif or en haut à droite (opacity 0.15)
- Titre H2 crème
- Liste à puces or antique
- Divider fin or en bas du centre
- Citation finale centrée, italique, crème
```

---

## ⚙️ Contraintes techniques (html2pptx)

### Règles strictes à respecter
1. **Dimensions** : `width: 720pt; height: 405pt;` pour 16:9
2. **Marges** : Minimum 36pt (0.5") depuis le bord **inférieur**
3. **Pas de gradients CSS** : uniquement couleurs solides
4. **Bordures** : uniquement sur `<div>`, JAMAIS sur `<p>`, `<h1-6>`, `<ul>`, `<ol>`
5. **Listes** : toujours utiliser `<ul>/<ol>`, jamais de bullets manuels (•, -, *)
6. **Fonts** : web-safe uniquement (Georgia, Arial, Times New Roman, Helvetica)

### Structure HTML type
```html
<!DOCTYPE html>
<html>
<head>
<style>
html { background: #ffffff; }
body {
  width: 720pt;
  height: 405pt;
  margin: 0;
  padding: 0;
  background: #F5F1E8;
  font-family: Arial, sans-serif;
  display: flex;
}
.slide-content {
  width: 100%;
  height: 100%;
  position: relative;
}
/* Styles avec position: absolute pour placements précis */
</style>
</head>
<body>
<div class="slide-content">
  <!-- Contenu ici -->
</div>
</body>
</html>
```

---

## 💡 Philosophie du style

Ce style allie :
- **Élégance européenne** (français/anglais) : typographie serif, espacement, minimalisme
- **Modernité** : design épuré, cartes, grilles
- **Traditionalisme chinois subtil** : caractères en filigrane, or antique, rouge bordeaux
- **Professionnalisme** : adapté au contexte scolaire chinois, sérieux sans être austère

### Mots-clés
- Sophistiqué mais accessible
- Chaleureux mais professionnel
- Moderne mais respectueux de la tradition
- Élégant mais jamais "trop flashy"

---

## 📝 Usage

Quand Tingting demande de l'aide pour un PowerPoint :
1. Utiliser cette palette de couleurs
2. Appliquer ces principes de design
3. Respecter les contraintes techniques html2pptx
4. Adapter le contenu selon le contexte (réunion, présentation parents, collègues)
5. Garder cette identité visuelle cohérente pour toutes ses présentations

**Fichier de référence** : `Tingting_Class73_Chinese.pptx` (septembre 2025)
