Titre 1

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vision — Mohammed Lahfid</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&family=Playfair+Display:ital,wght@0,700;1,400&display=swap" rel="stylesheet">
<style>

* { margin:0; padding:0; box-sizing:border-box; }

body {
background: #0a0a0f;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
line-height: 1.8;
overflow-x: hidden;
}

/* ── HERO VISION ── */
.vision-hero {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 24px 60px;
position: relative;
overflow: hidden;
}

.vision-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0,85,170,0.2) 0%, transparent 70%),
radial-gradient(ellipse 40% 30% at 80% 80%, rgba(0,170,255,0.06) 0%, transparent 60%);
animation: bgPulse 7s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes bgPulse {
from { opacity: 0.6; }
to { opacity: 1; }
}

/* ── LOGO SVG ── */
.logo-wrap {
position: relative;
z-index: 2;
margin-bottom: 36px;
animation: fadeDown 1.2s ease forwards;
}
@keyframes fadeDown {
from { opacity:0; transform:translateY(-24px); }
to { opacity:1; transform:translateY(0); }
}

svg#neuron {
width: 220px;
height: 220px;
overflow: visible;
}

.axon { stroke:#1a3a5c; stroke-width:2.5; fill:none; }
.dendrite { stroke:#1e4a7a; stroke-width:1.6; fill:none; opacity:0.85; }
.soma {
fill:#0d2a4a;
stroke:#00aaff;
stroke-width:2;
animation: somaGlow 2.4s ease-in-out infinite;
}
.ball-outer { fill:none; stroke:#00aaff; stroke-width:1.8; }
.ball-patch { fill:none; stroke:#00aaff; stroke-width:1.2; opacity:0.7; }

@keyframes somaGlow {
0%,100% { filter: drop-shadow(0 0 5px rgba(0,170,255,0.5)); }
50% { filter: drop-shadow(0 0 16px rgba(0,170,255,0.85)) drop-shadow(0 0 32px rgba(0,85,255,0.4)); }
}

/* Impulsions animées */
@keyframes impulseRun {
0% { offset-distance:0%; opacity:1; }
80% { opacity:1; }
100% { offset-distance:100%; opacity:0; }
}

.imp {
fill: #00d4ff;
filter: drop-shadow(0 0 5px #00aaff) drop-shadow(0 0 12px #0055ff);
}
.imp1 {
offset-path: path('M 110 110 Q 138 94 168 74');
animation: impulseRun 1.8s cubic-bezier(0.4,0,0.6,1) infinite;
}
.imp2 {
offset-path: path('M 110 110 Q 82 82 58 60');
animation: impulseRun 1.8s cubic-bezier(0.4,0,0.6,1) infinite;
animation-delay: 0.45s;
}
.imp3 {
offset-path: path('M 110 110 Q 98 142 88 172');
animation: impulseRun 1.8s cubic-bezier(0.4,0,0.6,1) infinite;
animation-delay: 0.9s;
}

/* ── NOM & TITRE ── */
.logo-name {
position: relative; z-index:2;
font-size: clamp(28px, 5vw, 52px);
font-weight: 800;
letter-spacing: 5px;
text-transform: uppercase;
color: #ffffff;
animation: fadeUp 1s 0.3s ease both;
}
.logo-name span { color: #00aaff; }

.logo-divider {
width: 80px; height: 2px;
background: linear-gradient(90deg, transparent, #00aaff, transparent);
margin: 16px auto;
position: relative; z-index:2;
animation: divPulse 2.4s ease-in-out infinite;
}
@keyframes divPulse {
0%,100% { opacity:0.5; }
50% { opacity:1; }
}

.logo-sub {
position: relative; z-index:2;
font-size: clamp(10px, 2vw, 12px);
font-weight: 300;
letter-spacing: 6px;
text-transform: uppercase;
color: #00aaff;
animation: fadeUp 1s 0.5s ease both;
}

.logo-tagline {
position: relative; z-index:2;
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: clamp(15px, 2.2vw, 20px);
color: #c8d8e8;
max-width: 600px;
margin: 28px auto 0;
animation: fadeUp 1s 0.7s ease both;
}

@keyframes fadeUp {
from { opacity:0; transform:translateY(20px); }
to { opacity:1; transform:translateY(0); }
}

/* ── SECTION 200ms ── */
.ms-section {
background: #0f1520;
border-top: 1px solid rgba(0,170,255,0.12);
border-bottom: 1px solid rgba(0,170,255,0.12);
padding: 100px 24px;
}

.ms-inner {
max-width: 900px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 80px;
align-items: center;
}

.ms-number-wrap { text-align: center; }

.ms-number {
font-size: clamp(90px, 16vw, 160px);
font-weight: 800;
color: transparent;
-webkit-text-stroke: 1.5px #00aaff;
line-height: 1;
letter-spacing: -6px;
opacity: 0.35;
animation: numPulse 3s ease-in-out infinite;
}
@keyframes numPulse {
0%,100% { opacity:0.3; }
50% { opacity:0.5; }
}

.ms-unit {
font-size: 13px;
font-weight: 300;
letter-spacing: 8px;
color: #00aaff;
text-transform: uppercase;
margin-top: -10px;
}

.ms-content .label {
font-size: 10px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: #00aaff;
margin-bottom: 12px;
}

.ms-content h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(24px, 3.5vw, 38px);
color: #ffffff;
line-height: 1.25;
margin-bottom: 20px;
}

.ms-line {
width: 48px; height: 2px;
background: #00aaff;
margin-bottom: 24px;
}

.ms-content p {
font-size: 15px;
color: #c8d8e8;
line-height: 1.9;
margin-bottom: 16px;
}

.ms-quote {
border-left: 3px solid #00aaff;
padding: 16px 20px;
margin-top: 24px;
background: rgba(0,170,255,0.04);
}
.ms-quote p {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 16px;
color: #8899aa;
margin: 0;
}
.ms-quote cite {
display: block;
margin-top: 10px;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: #00aaff;
font-style: normal;
}

/* ── VISION TEXTE ── */
.vision-section {
padding: 100px 24px;
max-width: 900px;
margin: 0 auto;
}

.vision-section .label {
font-size: 10px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: #00aaff;
margin-bottom: 12px;
}

.vision-section h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(26px, 3.8vw, 42px);
color: #ffffff;
line-height: 1.25;
margin-bottom: 20px;
}

.v-line {
width: 48px; height: 2px;
background: #00aaff;
margin-bottom: 32px;
}

.vision-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-top: 48px;
}

.vision-card {
background: #0f1520;
border: 1px solid rgba(0,170,255,0.12);
padding: 32px 24px;
position: relative;
overflow: hidden;
transition: all 0.4s;
}
.vision-card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #00aaff, transparent);
transform: scaleX(0);
transition: transform 0.4s;
}
.vision-card:hover { transform: translateY(-4px); border-color: rgba(0,170,255,0.3); }
.vision-card:hover::after { transform: scaleX(1); }

.v-card-icon {
font-size: 28px;
margin-bottom: 16px;
}
.v-card-title {
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #ffffff;
margin-bottom: 10px;
}
.v-card-text {
font-size: 13px;
color: #8899aa;
line-height: 1.8;
}

/* ── PHILOSOPHIE ── */
.philo-section {
background: #0f1520;
border-top: 1px solid rgba(0,170,255,0.1);
padding: 100px 24px;
}

.philo-inner {
max-width: 800px;
margin: 0 auto;
text-align: center;
}

.philo-inner .label {
font-size: 10px;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
color: #00aaff;
margin-bottom: 12px;
}

.philo-inner h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(24px, 3.5vw, 38px);
color: #ffffff;
margin-bottom: 20px;
}

.philo-divider {
width: 48px; height: 2px;
background: #00aaff;
margin: 0 auto 36px;
}

.philo-text {
font-size: 16px;
color: #c8d8e8;
line-height: 2;
max-width: 680px;
margin: 0 auto 32px;
}

.philo-pillars {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 48px;
flex-wrap: wrap;
}

.pillar {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}

.pillar-icon {
width: 56px; height: 56px;
background: rgba(0,170,255,0.08);
border: 1px solid rgba(0,170,255,0.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}

.pillar-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #00aaff;
}

/* ── CTA ── */
.cta-section {
padding: 80px 24px;
text-align: center;
}

.cta-section p {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: clamp(18px, 2.5vw, 26px);
color: #c8d8e8;
max-width: 600px;
margin: 0 auto 36px;
line-height: 1.6;
}

.btn {
display: inline-block;
background: #00aaff;
color: #0a0a0f;
padding: 16px 40px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s;
clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}
.btn:hover {
background: #00d4ff;
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(0,170,255,0.4);
}

/* ── SCROLL REVEAL ── */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}

/* ── RESPONSIVE ── */
@media (max-width: 700px) {
.ms-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
.vision-grid { grid-template-columns: 1fr; }
.philo-pillars { gap: 24px; }
.ms-line, .v-line { margin-left: auto; margin-right: auto; }
}

</style>
</head>
<body>

<div class="vision-hero">

<circle cx="110" cy="110" r="65" fill="url(#sg)"/>

<path class="axon" d="M 128 110 Q 150 95 172 76"/>
<circle cx="143" cy="101" r="2.8" fill="#00aaff" opacity="0.7"/>
<circle cx="159" cy="89" r="2.2" fill="#00aaff" opacity="0.5"/>

<path class="dendrite" d="M 96 97 Q 76 82 58 62"/>
<path class="dendrite" d="M 90 93 Q 72 74 62 52"/>
<path class="dendrite" d="M 88 110 Q 66 108 44 105"/>
<path class="dendrite" d="M 90 118 Q 68 122 48 128"/>
<path class="dendrite" d="M 100 126 Q 96 148 88 172"/>
<path class="dendrite" d="M 110 128 Q 110 150 112 174"/>
<path class="dendrite" d="M 106 92 Q 104 70 106 46"/>
<path class="dendrite" d="M 118 94 Q 126 72 136 50"/>

<circle class="soma" cx="110" cy="110" r="24" filter="url(#glow)"/>
<circle cx="110" cy="110" r="9" fill="#001a33" stroke="#0066aa" stroke-width="1.5"/>
<circle cx="110" cy="110" r="4" fill="#00aaff" opacity="0.7"/>

<circle class="ball-outer" cx="184" cy="68" r="20"/>
<polygon class="ball-patch" points="184,55 195,63 191,76 177,76 173,63"/>
<line class="ball-patch" x1="184" y1="55" x2="184" y2="49"/>
<line class="ball-patch" x1="195" y1="63" x2="201" y2="61"/>
<line class="ball-patch" x1="191" y1="76" x2="194" y2="82"/>
<line class="ball-patch" x1="177" y1="76" x2="174" y2="82"/>
<line class="ball-patch" x1="173" y1="63" x2="167" y2="61"/>

<circle class="imp imp1" r="4.5"/>
<circle class="imp imp2" r="3.5"/>
<circle class="imp imp3" r="3.5"/>
</svg>
</div>

<h1 class="logo-name">Mohammed <span>Lahfid</span></h1>
<div class="logo-divider"></div>
<p class="logo-sub">Neurocoaching Football · Préparation Mentale</p>
<p class="logo-tagline">
"Dans les 200 millisecondes qui précèdent un geste technique,<br>
tout se joue. Mon travail, c'est de préparer ce moment."
</p>

</div>

<div class="ms-section">
<div class="ms-inner reveal">

<div class="ms-number-wrap">
<div class="ms-number">200</div>
<div class="ms-unit">millisecondes</div>
</div>

<div class="ms-content">
<div class="label">Le Concept Fondateur</div>
<h2>La fenêtre où tout se décide</h2>
<div class="ms-line"></div>
<p>
Avant chaque geste technique — une frappe, une passe décisive, un duel —
le cerveau traite, anticipe et décide en une fraction de seconde.
Cette fenêtre neurologique invisible est le véritable terrain de jeu
du neurocoach.
</p>
<p>
Ni la puissance physique, ni la répétition seule ne suffisent.
Ce qui fait la différence au plus haut niveau, c'est la qualité
de ce traitement cérébral ultrarapide.
</p>
<div class="ms-quote">
<p>"La performance de haut niveau ne se construit pas seulement
dans les jambes. Elle se construit d'abord dans les circuits neuronaux."</p>
<cite>— Mohammed Lahfid, Neurocoach</cite>
</div>
</div>

</div>
</div>

<div class="vision-section reveal">

<div class="label">Ma Vision</div>
<h2>Repenser la performance<br>du footballeur de haut niveau</h2>
<div class="v-line"></div>

<p style="font-size:15px; color:#c8d8e8; line-height:1.9; max-width:760px;">
Depuis plus de 30 ans sur les terrains marocains — comme joueur, entraîneur
et préparateur — j'ai observé une réalité constante : les joueurs qui
font la différence ne sont pas toujours les plus rapides ni les plus forts.
Ce sont ceux dont le cerveau traite l'information plus vite, plus juste,
sous pression.
</p>
<p style="font-size:15px; color:#c8d8e8; line-height:1.9; max-width:760px; margin-top:16px;">
Ma vision est de rendre accessible au football africain et marocain
les outils des neurosciences modernes : non comme une théorie abstraite,
mais comme une pratique concrète, ancrée dans la réalité du terrain,
au service de chaque joueur et de chaque club.
</p>

<div class="vision-card">
<div class="v-card-icon">🧠</div>
<div class="v-card-title">Neurosciences Appliquées</div>
<p class="v-card-text">
Traduire les avancées scientifiques en protocoles concrets,
utilisables lors des séances d'entraînement quotidiennes.
</p>
</div>

<div class="vision-card">
<div class="v-card-icon">⚽</div>
<div class="v-card-title">Ancrage Terrain</div>
<p class="v-card-text">
Une approche née du terrain, pas des laboratoires. 30 ans de pratique
comme fondation de chaque intervention.
</p>
</div>

<div class="vision-card">
<div class="v-card-icon">🎯</div>
<div class="v-card-title">Intervention Minimale</div>
<p class="v-card-text">
Identifier le levier neurologique précis pour un impact maximal.
Pas de méthodes génériques — chaque joueur est un profil unique.
</p>
</div>

<div class="vision-card">
<div class="v-card-icon">🌍</div>
<div class="v-card-title">Football Africain</div>
<p class="v-card-text">
Placer le Maroc et l'Afrique à la pointe de la préparation mentale
et neurologique dans le football mondial.
</p>
</div>

</div>
</div>

<div class="philo-section">
<div class="philo-inner reveal">

<div class="label">Ma Philosophie</div>
<h2>Trois piliers, une conviction</h2>
<div class="philo-divider"></div>

<p class="philo-text">
Le footballeur de demain sera celui qui comprend son cerveau
aussi bien que son corps. Ma mission : accélérer cette révolution
silencieuse, un joueur à la fois.
</p>

<div class="pillar">
<div class="pillar-icon">🔬</div>
<div class="pillar-label">Science</div>
</div>

<div class="pillar">
<div class="pillar-icon">❤️</div>
<div class="pillar-label">Humanité</div>
</div>

<div class="pillar">
<div class="pillar-icon">⚡</div>
<div class="pillar-label">Performance</div>
</div>

</div>

</div>
</div>

<div class="cta-section reveal">
<p>
"Chaque joueur porte en lui un potentiel neurologique inexploité.<br>
Ensemble, nous allons l'activer."
</p>
<a href="mailto:medlahfid@gmail.com" class="btn">Prendre contact</a>
</div>

<script>
const obs = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) e.target.classList.add('visible');
});
}, { threshold: 0.1 });
document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
</script>

</body>
</html>

Acceuillez les visiteurs du site avec une introduction courte et attrayante. Double-cliquez ici pour ajouter votre texte.

L'équipe

Ceci est votre section Équipe. Présentez brièvement l'équipe, puis ajoutez sa biographie ci-dessous. Cliquez pour me modifier.

Directeur artistique

Pamela Laurent

Ajoutez une courte biographie pour chaque membre de l'équipe. Soyez bref et descriptif.

About Mohamed Lahfid

Your Mental Performance Coach

Mohamed Lahfid specializes in mental coaching for athletes, focusing on enhancing performance through mental resilience and clarity. His approach combines neuro coaching techniques with personalized strategies.