📋 Fiche Descriptive : Template de Recrutement Haut de Gamme

🔷 INFORMATIONS GÉNÉRALES

Champ Détail

Nom du template deepseek_html_20260315_296532.html

Version 1.0.0

Date de création 18 Mars 2026

Auteur / Designer Refoia Jeremy Tech (Style inspiré par McLaren)

Type de page Fiche de poste (Job Description)

Objectif principal Présenter une offre d’emploi domestique de luxe et inciter à la candidature.

🎯 DESCRIPTION FONCTIONNELLE

📌 Que fait ce template ?

Ce template est une vitrine de recrutement premium conçue pour des services à la personne haut de gamme. Il utilise une esthétique automobile (« Bleu Le Mans Satiné ») pour transmettre un sentiment de précision, de confiance et de professionnalisme. La structure est divisée en une section informative (missions/profil) et une section contractuelle/contact.

📌 Public cible (Persona)

👤 Candidats (Nounous/Auxiliaires) : Professionnels cherchant un cadre de travail structuré et valorisant.

👤 Familles Recruteuses : Particuliers souhaitant refléter un standing élevé dès l’annonce.

⚙️ SPÉCIFICATIONS TECHNIQUES

🌐 Environnement & Compatibilité

Standard HTML : HTML5 sémantique.

CSS : CSS3 natif avec utilisation intensive de Flexbox et CSS Grid.

Framework JS : Aucun (Performance maximale).

Responsive : ✅ Oui (Breakpoint à 700px pour le passage en colonne unique).

📦 Dépendances / Assets

FontAwesome 6.0.0 : Pour l’iconographie riche (besoins, missions, contact).

Google Fonts : Police Inter (variantes 400 à 700).

📥 ENTRÉES — CONTENU DYNAMIQUE

# Nom de la variable Type Obligatoire Description

1 job_title str ✅ Intitulé du poste (ex: Auxiliaire parentale).

2 location_sub str ✅ Localisation précise (ex: Levallois).

3 salary_range str ✅ Fourchette de rémunération horaire.

4 family_description list ✅ Détails sur les enfants et l’environnement.

5 contact_email str ✅ Adresse mail de réception des CV.

🧱 STRUCTURE DU FICHIER — DOM

index.html

body : Fond sombre (#0b0f15) pour contraste maximal.

.job-card : Conteneur principal blanc à angles arrondis (2rem).

.hero-lemans : Header avec dégradé linéaire bleu profond et effet de reflet satiné (::after).

.content-grid : Grille à 2 colonnes (1fr 0.9fr).

.left-column : Missions principales et profil recherché (Listes d’icônes).

.right-column : Détails du contrat, badges de compétences (Tags) et coordonnées de contact.

.footer-note : Barre de réassurance avec badge d’inspiration McLaren.

🎨 CHARTE GRAPHIQUE & DESIGN SYSTEM

🎨 Palette de Couleurs (Inspiration McLaren Le Mans)

Bleu Primaire (Satiné) : #2e4a6a (utilisé pour les titres et icônes).

Bleu Profond (Fond Hero) : #1c2b3f.

Accents Clairs : #9bb7d4 (bordures et soulignements).

Fond de Page : #0b0f15 (Noir carbone).

Surface : #ffffff (Card principale).

📐 Mise en Page — Layout

Grille : display: grid sur le contenu principal pour un alignement parfait missions/contrat.

Bouton « Satin » : Effet de relief avec box-shadow et border translucide pour simuler une carrosserie.

♿ ACCESSIBILITÉ & SEO

Sémantique : Utilisation de

• pour les listes,

avec classes FontAwesome pour la lecture visuelle.

SEO : Titre

(via .hero-title) incluant des mots-clés métiers.

Interactivité : État :hover sur le bouton de téléchargement avec transition de 0.2s.

🧪 TESTS & VALIDATION

# Cas de test Action Résultat attendu Statut

1 Responsive Réduire la largeur < 700px La grille passe de 2 colonnes à 1 colonne. 🟢 OK

2 Effet Satiné Vérifier le header Présence d’un reflet radial subtil en haut à gauche. 🟢 OK

3 Lecture Vérifier le contraste Texte foncé sur fond blanc/bleu clair (Lisibilité AA). 🟢 OK