/* ══════════════════════════════════════
   QUI SUIS-JE — STYLES SPÉCIFIQUES À CETTE PAGE
   ══════════════════════════════════════ */
h1, h2, h3 { font-family: 'Bebas Neue', Impact, sans-serif; letter-spacing: 1px; text-transform: uppercase; line-height: 1.05; }

.tag { display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #00c96e; margin-bottom: 14px; }
.tag::before { content: ''; width: 28px; height: 2px; background: #00c96e; display: inline-block; }

/* HERO */
.hero { background: #0c0c0c; color: #ffffff; padding: 110px 0 0; overflow: hidden; position: relative; }
.hero-glow { position: absolute; top: -80px; right: -100px; width: 650px; height: 650px; border-radius: 50%; background: radial-gradient(circle, rgba(0,201,110,.2) 0%, transparent 70%); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: end; position: relative; z-index: 2; }
.hero-text { padding-bottom: 100px; }
.hero h1 { font-size: 6.4rem; color: #ffffff; margin-bottom: 28px; }
.hero h1 em { color: #00c96e; font-style: normal; display: block; }
.hero-intro { color: #c6c8cc; font-size: 1.2rem; font-weight: 300; max-width: 560px; margin-bottom: 38px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-badge { padding: 11px 22px; border: 1px solid rgba(255,255,255,.2); border-radius: 24px; font-size: .88rem; font-weight: 600; letter-spacing: .5px; color: rgba(255,255,255,.8); }
.hero-photo { position: relative; height: 720px; overflow: hidden; border-radius: 18px 18px 0 0; margin: 0 0 0 40px; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hero-photo-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(0deg, #0c0c0c 0%, transparent 100%); }

/* SECTIONS */
section { padding: 80px 0; }
.section-light { background: #ffffff; }
.section-gray { background: #f4f5f7; }
.section-dark { background: #0c0c0c; color: #ffffff; }

/* FORMATION */
.formation-grid-single { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 16px; }
.formation-card { background: #ffffff; border: 1px solid #e3e4e7; border-radius: 16px; padding: 26px 22px; border-top: 3px solid #00c96e; transition: transform .3s, box-shadow .3s; }
.formation-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,.07); }
.formation-card .year { font-size: .72rem; font-weight: 700; letter-spacing: 2px; color: #00c96e; text-transform: uppercase; margin-bottom: 8px; }
.formation-card h3 { font-size: 1.05rem; margin-bottom: 8px; color: #0c0c0c; }
.formation-card p { font-size: .86rem; color: #6b6f76; }

/* EXPÉRIENCES PRO & SPORTIVES */
.experiences-grid { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 60px; align-items: start; }
.experiences-divider { background: rgba(255,255,255,.1); align-self: stretch; }
.sports-stack { display: flex; flex-direction: column; gap: 30px; }

/* TIMELINE */
.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, #00c96e, rgba(0,201,110,.1)); }
.tl-item { position: relative; margin-bottom: 36px; }
.tl-item:last-child { margin-bottom: 0; }
.tl-dot { position: absolute; left: -39px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: #00c96e; border: 3px solid #0c0c0c; }
.tl-date { font-size: .72rem; font-weight: 700; letter-spacing: 2px; color: #00c96e; text-transform: uppercase; margin-bottom: 6px; }
.tl-title { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 1.25rem; color: #ffffff; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 4px; }
.tl-sub { font-size: .88rem; color: #9a9da3; font-weight: 300; }

/* SPORTS */
.sports-col h3 { font-size: 1.3rem; color: #ffffff; margin-bottom: 18px; }
.sports-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.sport-tag { padding: 8px 16px; border-radius: 20px; font-size: .82rem; font-weight: 600; background: rgba(255,255,255,.06); color: #d8d8d8; border: 1px solid rgba(255,255,255,.1); }

/* À PROPOS */
.apropos-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 70px; align-items: start; }
.apropos-img { border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.1); }
.apropos-img img { width: 100%; height: 480px; object-fit: cover; object-position: top; }
.apropos-text p { color: #6b6f76; font-size: 1rem; margin-bottom: 18px; }
.apropos-text p:last-child { margin-bottom: 0; }

/* COACHING */
.coaching-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 40px; }
.coaching-card { background: #16181b; border-radius: 18px; padding: 34px 30px; border: 1px solid rgba(255,255,255,.06); transition: border-color .3s, transform .3s; }
.coaching-card:hover { border-color: #00c96e; transform: translateY(-5px); }
.coaching-card h3 { font-size: 1.3rem; color: #ffffff; margin-bottom: 14px; }
.coaching-card p { color: #a7aab0; font-size: .94rem; font-weight: 300; }

/* QUOTE */
.quote-strip { background: #00c96e; padding: 80px 0; text-align: center; }
.quote-strip blockquote { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 2.6rem; color: #0c0c0c; max-width: 860px; margin: 0 auto; letter-spacing: 1px; text-transform: uppercase; line-height: 1.15; }
.quote-strip cite { display: block; margin-top: 14px; font-family: 'Inter', Arial, sans-serif; font-size: .82rem; font-weight: 700; letter-spacing: 1px; opacity: .55; text-transform: uppercase; font-style: normal; }

/* RESPONSIVE */
@media (max-width: 960px) {
  .hero { padding: 80px 0 0; }
  .hero-grid, .apropos-grid { grid-template-columns: 1fr; }
  .hero-text { padding-bottom: 40px; }
  .hero-photo { height: 420px; margin: 30px 0 0; }
  .hero h1 { font-size: 3.6rem; }
  .formation-grid-single { grid-template-columns: 1fr; }
  .coaching-grid { grid-template-columns: 1fr; }
  .experiences-grid { grid-template-columns: 1fr; gap: 50px; }
  .experiences-divider { display: none; }
  .sports-stack { gap: 24px; }
}
@media (max-width: 560px) {
  section { padding: 60px 0; }
  .hero { padding: 60px 0 0; }
  .hero-photo { height: 300px; }
  .hero h1 { font-size: 2.8rem; }
  .quote-strip blockquote { font-size: 1.8rem; }
}