# Styles CSS du site vitrine Alter Invest

## ⚠️ Divergence avec le skill charte graphique actuel

Le skill `alter-invest-charte-graphique` utilise des couleurs légèrement différentes de celles du site vitrine réel. **Les valeurs ci-dessous sont celles du site en production** et doivent être considérées comme la référence.

| Variable | Skill actuel | Site réel (référence) |
|----------|-------------|----------------------|
| --blue-500 | #3B6A97 | **#005188** |
| --blue-600 | #2c5178 | **#00446f** |
| --blue-700 | #1e3a5f | **#003758** |
| --blue-800 | #172e4a | **#002a43** |
| --blue-900 | #0f1e33 | **#001d2e** |
| --orange-500 | #E08A64 | **#E45110** |
| --orange-600 | #c66d45 | **#c4440d** |
| --orange-700 | #a55532 | **#9e370a** |

---

## Palette de couleurs complète (site réel)

```css
:root {
  /* Palette Bleue - basée sur le logo #005188 */
  --blue-50: #edf5fb;
  --blue-100: #d0e4f4;
  --blue-200: #a1c9e9;
  --blue-300: #5a9fcf;
  --blue-400: #2d78b2;
  --blue-500: #005188;   /* BLEU LOGO */
  --blue-600: #00446f;
  --blue-700: #003758;
  --blue-800: #002a43;
  --blue-900: #001d2e;

  /* Palette Orange - basée sur le logo #E45110 */
  --orange-50: #fef4ef;
  --orange-100: #fde3d5;
  --orange-200: #fac4a5;
  --orange-300: #f69a6a;
  --orange-400: #ef7540;
  --orange-500: #E45110;  /* ORANGE LOGO */
  --orange-600: #c4440d;
  --orange-700: #9e370a;
  --orange-800: #782a08;
  --orange-900: #521d05;

  --shadow: rgba(0, 81, 136, 0.1);
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
```

---

## Typographie globale

```css
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: var(--blue-900);  /* #001d2e */
}
```

---

## Hiérarchie typographique par composant

### 1. Section Tag (surtitre de section)
Texte type : "NOS SOLUTIONS", "REVUE DE PRESSE", "TÉMOIGNAGES", "NOTRE VISION"

```css
.section-tag {
  display: inline-block;
  color: var(--orange-500);        /* #E45110 */
  font-size: 0.75rem;             /* 12px */
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
```

Variante fond sombre (sections Simulateurs, Contact) :
```css
/* Appliqué via style inline */
color: var(--orange-300);          /* #f69a6a */
```

### 2. Titre de section (h2)
Texte type : "Un accompagnement patrimonial **complet**"

```css
.section-title h2 {
  font-size: 2.5rem;              /* 40px */
  font-weight: 300;               /* light */
  color: var(--blue-700);          /* #003758 */
  letter-spacing: -1px;
  line-height: 1.3;
}

.section-title h2 strong {
  font-weight: 600;
  color: var(--orange-600);        /* #c4440d */
}
```

Variante fond sombre (Simulateurs, Contact) :
```css
.simulateurs .section-title h2 { color: white; }
.simulateurs .section-title h2 strong { color: var(--orange-300); /* #f69a6a */ }
```

Responsive ≤ 768px :
```css
.section-title h2 { font-size: 1.8rem; }
```

### 3. Sous-titre de section (p)
Texte type : "Des solutions adaptées à chaque étape de votre vie..."

```css
.section-title p {
  font-size: 1.1rem;              /* ~17.6px */
  color: var(--blue-600);          /* #00446f */
  max-width: 650px;
  margin: 1.5rem auto 0;
  line-height: 1.8;
  font-weight: 300;
}
```

Variante fond sombre :
```css
.simulateurs .section-title p { color: rgba(255,255,255,0.7); }
```

### 4. Introduction (page d'accueil)

```css
.intro-container h2 {
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--blue-700);          /* #003758 */
  line-height: 1.3;
  letter-spacing: -1px;
}

.intro-container p {
  font-size: 1.1rem;
  color: var(--blue-600);          /* #00446f */
  line-height: 1.9;
  font-weight: 300;
}
```

---

## Hero (bannière d'accueil)

```css
.hero-tag {
  color: var(--orange-300);        /* #f69a6a */
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.hero h1 {
  font-size: 3.8rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -1px;
  color: white;
}

.hero h1 strong {
  font-weight: 600;
  color: var(--orange-300);        /* #f69a6a */
}

.hero p {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.8;
  opacity: 0.85;
  color: white;
}
```

Fond hero : image + overlay `linear-gradient(135deg, rgba(15,30,51,0.7), rgba(59,106,151,0.4))`

---

## Barre de statistiques

```css
.stat-number {
  font-size: 3rem;
  font-weight: 300;
  color: var(--blue-700);          /* #003758 */
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}

.stat-number span {                /* unité ou symbole */
  color: var(--orange-500);        /* #E45110 */
}

.stat-label {
  color: var(--blue-600);          /* #00446f */
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}
```

---

## Cartes Services

```css
.service-content h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--blue-700);          /* #003758 */
}

.service-content p {
  color: var(--blue-600);          /* #00446f */
  line-height: 1.8;
  font-size: 0.9rem;
  font-weight: 300;
}
```

Style carte : `background: white; border-radius: 20px; border: 1px solid var(--blue-100); box-shadow: 0 4px 20px var(--shadow);`
Hover : `transform: translateY(-8px); border-color: var(--orange-300);`

---

## Cartes Simulateurs (fond sombre)

Fond section : `linear-gradient(135deg, var(--blue-800), var(--blue-700))`

```css
.simulator-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

.simulator-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: white;
}

.simulator-card p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  line-height: 1.7;
}

.simulator-tag {
  padding: 0.35rem 0.8rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
}
```

Hover carte : `border-color: var(--orange-400); transform: translateY(-5px);`

---

## Revue de Presse

### Filtres
```css
.filter-btn {
  padding: 0.6rem 1.5rem;
  border: 2px solid var(--blue-200);
  background: transparent;
  color: var(--blue-600);          /* #00446f */
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.85rem;
}

.filter-btn.active {
  background: var(--blue-500);     /* #005188 */
  border-color: var(--blue-500);
  color: white;
}
```

### Carte presse
```css
.press-source {
  padding: 1.2rem 2rem;
  background: var(--blue-50);      /* #edf5fb */
  border-bottom: 1px solid var(--blue-100);
}

.press-source-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--blue-700);          /* #003758 */
}

.press-date {
  color: var(--orange-500);        /* #E45110 */
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.press-theme-tag {
  padding: 0.25rem 0.7rem;
  background: var(--orange-50);    /* #fef4ef */
  color: var(--orange-600);        /* #c4440d */
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.press-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--blue-700);          /* #003758 */
  line-height: 1.4;
}

.press-excerpt {
  color: var(--blue-600);          /* #00446f */
  font-size: 0.88rem;
  line-height: 1.7;
  font-weight: 300;
}

.press-quote {
  color: var(--blue-500);          /* #005188 */
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.6;
  padding-left: 1rem;
  border-left: 2px solid var(--orange-300);  /* #f69a6a */
}
```

---

## Témoignages

```css
.testimonial-quote {               /* guillemet décoratif « */
  font-size: 3rem;
  color: var(--orange-300);        /* #f69a6a */
  font-family: Georgia, serif;     /* EXCEPTION : seul élément en serif */
}

.testimonial-text {
  font-size: 0.95rem;
  color: var(--blue-700);          /* #003758 */
  line-height: 1.8;
  font-style: italic;
  font-weight: 300;
}

.testimonial-author {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--blue-700);          /* #003758 */
}

.testimonial-role {
  font-size: 0.8rem;
  color: var(--blue-500);          /* #005188 */
  font-weight: 400;
}

.testimonial-stars {
  color: var(--orange-500);        /* #E45110 */
  font-size: 0.8rem;
  letter-spacing: 2px;
}
```

---

## Expertise (Notre approche)

```css
.expertise-content h2 {
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--blue-700);          /* #003758 */
  letter-spacing: -0.5px;
  line-height: 1.3;
}

.expertise-content > p {
  font-size: 1rem;
  color: var(--blue-600);          /* #00446f */
  line-height: 1.8;
  font-weight: 300;
}

.feature-number {
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--orange-500);        /* #E45110 */
  border: 1px solid var(--orange-200);
  border-radius: 8px;
  background: var(--orange-50);
}

.feature-text h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--blue-700);          /* #003758 */
}

.feature-text p {
  font-size: 0.88rem;
  color: var(--blue-600);          /* #00446f */
  line-height: 1.7;
  font-weight: 300;
}
```

---

## Navigation

```css
.nav-links a {
  color: var(--blue-700);          /* #003758 */
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.3px;
}

.nav-links a:hover { color: var(--orange-500); /* #E45110 */ }

.nav-cta {
  padding: 0.65rem 1.8rem;
  background: var(--orange-500);   /* #E45110 */
  color: white;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
```

---

## Boutons

```css
/* Bouton principal hero (orange plein) */
.btn-hero-primary {
  padding: 1rem 2.5rem;
  background: var(--orange-500);   /* #E45110 */
  color: white;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 10px;
  border: 2px solid var(--orange-500);
}

/* Bouton secondaire hero (contour blanc) */
.btn-hero-secondary {
  padding: 1rem 2.5rem;
  background: transparent;
  color: white;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.3);
}

/* Bouton formulaire contact */
.form-submit {
  background: var(--orange-500);   /* #E45110 */
  color: white;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
}
```

---

## Formulaire Contact (fond sombre)

Fond section : `linear-gradient(135deg, var(--blue-900), var(--blue-800))`

```css
.form-group label {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-group input,
.form-group textarea,
.form-group select {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  color: white;
  font-size: 0.9rem;
}

/* Focus */
border-color: var(--orange-400);   /* #ef7540 */
background: rgba(255,255,255,0.08);
```

---

## Footer

```css
footer {
  background: var(--blue-900);     /* #001d2e */
  color: rgba(255,255,255,0.6);
  padding: 4rem 4rem 0;
}

.footer-section h4 {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-links a {
  color: rgba(255,255,255,0.5);
  font-size: 0.88rem;
}

.footer-links a:hover { color: var(--orange-400); /* #ef7540 */ }

.footer-legal {
  font-size: 0.72rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.35);
}

.footer-bottom {
  font-size: 0.78rem;
}
```

---

## Fond des sections (alternance)

| Section | Background |
|---------|-----------|
| Hero | Image + overlay gradient |
| Stats | `white` |
| Introduction | `white` |
| Services (Nos solutions) | `var(--blue-50)` (#edf5fb) |
| Simulateurs | `linear-gradient(135deg, var(--blue-800), var(--blue-700))` |
| Presse | `white` |
| Témoignages | `var(--blue-50)` (#edf5fb) |
| Expertise | `white` |
| Contact | `linear-gradient(135deg, var(--blue-900), var(--blue-800))` |
| Footer | `var(--blue-900)` (#001d2e) |

---

## Animations

```css
/* Apparition au scroll */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hover cartes */
transform: translateY(-5px à -8px);
box-shadow: 0 15px 40px rgba(59, 106, 151, 0.12 à 0.15);

/* Hover boutons */
transform: translateY(-2px à -3px);
box-shadow: 0 10px 30px rgba(224, 138, 100, 0.3);
```

---

## Responsive

| Breakpoint | Changements |
|------------|------------|
| ≤ 1200px | Grilles 2 colonnes, nav padding réduit, expertise 1 colonne, contact 1 colonne |
| ≤ 768px | Navigation mobile (hamburger), grilles 1 colonne, hero h1 2.2rem, section h2 1.8rem, stats 2 colonnes |

---

## Récapitulatif des poids typographiques

| Contexte | Poids | Utilisation |
|----------|-------|------------|
| 300 (light) | Titres h1/h2, paragraphes, stat-number, feature-number | Élégance, légèreté |
| 400 (regular) | Liens nav, body text | Lecture courante |
| 500 (medium) | Bouton secondaire, stat-label, simulator-tag | Importance intermédiaire |
| 600 (semi-bold) | Strong dans titres, section-tag, h3, boutons CTA, labels, dates, auteurs | Accentuation |
| 700 (bold) | Aucun usage direct dans le site | Non utilisé |
