# Thème WordPress SOLAMED

Un thème WordPress moderne, performant et **pixel-perfect** par rapport à la maquette SOLAMED, conçu pour s'intégrer parfaitement avec **Elementor**. 

## 🌟 Fonctionnalités clés

- **Fidélité maquette** : Design "pixel-perfect", incluant la barre de valeurs flottante, les gradients spécifiques et les dispositions asymétriques.
- **Customizer avancé** : Gestion des couleurs, polices Google dynamiques, réglages de l'en-tête (sticky/shrink) et gestion complète du pied de page (infos de contact, CTA, réseaux sociaux).
- **Fallback d'accueil** : Si Elementor n'est pas utilisé, une page d'accueil complète (bannière, valeurs, à propos, solutions, cancer, présence, pourquoi, projets, actualités) est générée automatiquement.
- **Animations au scroll** : Intégration de `IntersectionObserver` pour des animations d'entrée fluides des différentes sections.
- **Support Elementor natif** : Modèle `Elementor pleine largeur` et gestion native des emplacements de thème (Header/Footer avec Elementor Pro).

---

## 🛠️ Guide d'installation

1. Transférez le dossier `solamed` dans le répertoire `wp-content/themes/` de votre installation WordPress.
2. Connectez-vous à votre interface d'administration WordPress.
3. Allez dans **Apparence > Thèmes**.
4. Repérez le thème **SOLAMED** et cliquez sur **Activer**.

*Lors de l'activation, le thème va automatiquement créer les pages de base (Accueil, À propos, Solutions, etc.) et les assigner au menu principal.*

---

## 🔌 Extensions recommandées

Le thème inclut un gestionnaire d'extensions. Allez dans **Apparence > Extensions SOLAMED** pour les installer en un clic :

- **Elementor** (Requis) : Pour la construction visuelle des pages.
- **Elementor Pro** : Pour aller plus loin (Theme Builder pour personnaliser le header/footer visuellement).
- **Advanced Custom Fields (ACF)** : Pour structurer les données personnalisées (projets, engagements).
- **Custom Post Type UI (CPT UI)** : Pour créer les types de contenus (solutions, projets).
- **Yoast SEO** : Pour l'optimisation du référencement.
- **LiteSpeed Cache / WP Rocket** : Pour optimiser les performances.

---

## 🎨 Guide de personnalisation (Customizer)

Rendez-vous dans **Apparence > Personnaliser > SOLAMED** pour ajuster le thème :

### 1. Couleurs
- **Bleu principal** (`#063c89`)
- **Vert accent** (`#79bd2a`)
- **Fond de sections** (`#f6f9fd`)
- **Bordures** (`#dce6f3`)

### 2. Typographie
- **Police du corps** : Définissez votre police (ex: `Inter, Arial, sans-serif`). Le thème charge automatiquement la Google Font si nécessaire.
- **Police des titres** : Différenciez vos `<h1>` à `<h6>`.
- **Taille de base** : Ajustez la taille de référence en pixels.

### 3. En-tête (Header)
- Activez/Désactivez l'en-tête **Sticky** (qui suit le défilement).
- Activez/Désactivez l'effet de **rétrécissement** au défilement (Shrink).
- Modifiez le **Slogan** affiché sous le logo.

### 4. Pied de page (Footer)
- Modifiez les **informations de contact** (Téléphone, Email, Site Web, Adresse) qui apparaissent dans la 2ème colonne.
- Personnalisez le **texte de l'appel à l'action** (CTA) de la 3ème colonne.
- Définissez le texte de **Copyright**.

### 5. Réseaux sociaux
- Ajoutez les URL de vos réseaux (LinkedIn, Facebook, Twitter, YouTube, Instagram). Les icônes s'afficheront automatiquement dans le pied de page si l'URL est renseignée.

---

## 🏗️ Construction des pages avec Elementor

Pour respecter le design SOLAMED, utilisez le modèle fourni :

1. Éditez une page.
2. Dans le panneau latéral de droite, sous **Modèle**, choisissez `Elementor pleine largeur SOLAMED`.
3. Cliquez sur **Modifier avec Elementor**.
4. Vous pouvez maintenant reconstruire visuellement les blocs (Hero, Valeurs, Solutions) en vous inspirant de la page d'accueil de fallback générée par le thème.

*Note : Les styles CSS de base (boutons `.button--primary`, animations `.sol-animate`, grilles) sont disponibles pour vos sections Elementor HTML.*

---

## ⚡ Performance et SEO

Ce thème a été conçu de manière allégée :
- Pas de bibliothèques superflues (pas de jQuery forcé, script JS vanilla léger).
- Pré-connexion automatique aux serveurs Google Fonts.
- Balises sémantiques `<header>`, `<footer>`, `<main>`, `<article>`.
- `aria-label` et liens d'évitement (`skip-link`) pour l'accessibilité.

**Pour aller plus loin** : 
- Utilisez des images au format **WebP**.
- Activez le lazy-loading natif de WordPress ou de votre plugin de cache.
- Assurez-vous d'avoir une arborescence de balises Hn (`h1`, `h2`, `h3`) cohérente dans vos contenus Elementor.

---

## 📂 Structure des fichiers principaux

- `style.css` : Entête du thème (meta-données).
- `functions.php` : Cœur du thème, initialisation, hooks, chargement des assets et polices dynamiques.
- `assets/css/theme.css` : Le CSS principal, gérant les layouts, les variables et le responsive.
- `assets/js/theme.js` : Le JavaScript principal (menu mobile, animations au scroll, header shrink, ancre fluide).
- `header.php` / `footer.php` : Modèles d'en-tête et de pied de page (hooks d'extension inclus).
- `template-parts/home-fallback.php` : La structure HTML complète de la maquette au cas où Elementor n'est pas actif.
- `inc/customizer.php` : L'enregistrement des paramètres du Customizer WordPress.
