// Trainin Center — Page « L'école »
// Réutilise le design system (tc-system) + NavBar/Footer (tc-sections).
// Sections : Hero · Notre mission · Ce qui nous différencie · À qui s'adresse
//            l'école · Apprentissage à distance · CTA final.

const isMobEc = (d) => d === 'mobile';

// ════════════════════════════════════════════════════════════
// HERO
// ════════════════════════════════════════════════════════════
function EcoleHero({ device }) {
  const m = isMobEc(device);
  const pad = m ? '40px 22px 36px' : '75px 80px 44px';
  return (
    <section style={{ background: TC.off, position: 'relative', overflow: 'hidden' }}>
      <div style={{
        position: 'absolute', top: m ? -130 : -260, right: m ? -170 : -180,
        width: m ? 400 : 740, height: m ? 400 : 740, borderRadius: '50%',
        background: `radial-gradient(circle, ${TC.sageSoft} 0%, ${TC.off} 65%)`,
        pointerEvents: 'none',
      }} />
      <div style={m
        ? { position: 'relative', padding: pad, display: 'flex', flexDirection: 'column', gap: 30 }
        : {
            position: 'relative', maxWidth: TC_CONTAINER, margin: '0 auto', width: '100%', padding: pad,
            display: 'grid', gridTemplateColumns: '1fr 1.04fr', gap: 64, alignItems: 'stretch',
          }}>
        {/* text */}
        <div style={{ maxWidth: m ? '100%' : 520 }}>
          <div style={{ marginBottom: m ? 18 : 22 }}>
            <Eyebrow variant="sage" size={m ? 'sm' : 'md'}>L'école Trainin Center</Eyebrow>
          </div>
          <h1 style={{
            fontFamily: fontSans, fontSize: m ? 42 : 'clamp(44px, 3.6vw, 56px)', fontWeight: 500,
            letterSpacing: m ? -1.4 : -1.8, lineHeight: m ? 1.1 : 1.08,
            margin: '0 0 20px', color: TC.ink, textWrap: 'balance',
          }}>
            Une école en ligne{m ? ' ' : <br />}
            <span style={{
              fontFamily: fontSerif, fontWeight: 400, fontStyle: 'italic',
              color: TC.sageDeep, fontSize: m ? 46 : 'clamp(48px, 4vw, 62px)', letterSpacing: m ? -1.4 : -1.6,
              lineHeight: 1.06,
            }}>dédiée aux métiers du bien-être.</span>
          </h1>
          <p style={{
            fontFamily: fontSans, fontSize: m ? 16.5 : 17.5, lineHeight: 1.58,
            color: TC.ink2, margin: '0 0 26px', maxWidth: m ? '100%' : 480, letterSpacing: -0.1,
          }}>
            Trainin Center accompagne les personnes qui souhaitent se former à la
            naturopathie, aux pratiques naturelles et aux approches complémentaires
            du bien-être, avec un cadre clair, humain et flexible.
          </p>
          <div style={{
            display: 'flex', flexDirection: m ? 'column' : 'row',
            gap: m ? 10 : 12, alignItems: m ? 'stretch' : 'center',
          }}>
            <a href="javascript:void(0)" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new Event('tc-open-programme')); }} style={{ textDecoration: 'none', display: m ? 'block' : 'inline-block' }}><BtnPrimary size="lg" fullWidth={m} data-cta="goto:formations" style={m ? undefined : { whiteSpace: 'nowrap', minWidth: 220 }}>Découvrir nos formations</BtnPrimary></a>
            <a href="recevoir-le-programme.html" style={{ textDecoration: 'none', display: m ? 'block' : 'inline-block' }}><BtnGhost size="lg" fullWidth={m} data-cta="goto:programme" style={m ? undefined : { whiteSpace: 'nowrap', minWidth: 220 }}>Recevoir le programme</BtnGhost></a>
          </div>
        </div>

        {/* photo — desktop : le cadre démarre à la hauteur du H1 (sous le badge) et
            descend jusqu'au bas de la rangée de boutons, via le stretch de la
            colonne (alignItems:'stretch') + un décalage égal à la hauteur du badge. */}
        <div style={m ? { position: 'relative' } : { position: 'relative', height: '100%' }}>
          <div style={m
            ? {
                position: 'relative', width: '100%', aspectRatio: '4 / 5',
                borderRadius: 24, overflow: 'hidden',
                boxShadow: '0 30px 80px -20px rgba(26,31,28,0.25), 0 1px 2px rgba(0,0,0,0.06)',
              }
            : {
                position: 'absolute', top: 52, left: 0, right: 0, bottom: 0,
                borderRadius: 28, overflow: 'hidden',
                boxShadow: '0 30px 80px -20px rgba(26,31,28,0.25), 0 1px 2px rgba(0,0,0,0.06)',
              }}>
            <img src="assets/ecole-hero.png" alt=""
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '30% 38%', display: 'block' }} />
          </div>
          <div style={{
            position: 'absolute', left: m ? '50%' : 20, transform: m ? 'translateX(-50%)' : 'none',
            bottom: m ? -26 : 20, width: m ? 'calc(100% - 44px)' : 234,
            background: TC.white, borderRadius: 16, padding: '16px 18px',
            boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 14px 36px rgba(26,31,28,0.10)',
            border: `1px solid ${TC.hair}`,
          }}>
            <div style={{ fontFamily: fontMono, fontSize: 11, letterSpacing: 0.6, textTransform: 'uppercase', color: TC.ink3 }}>Une école française</div>
            <div style={{ fontFamily: fontSans, fontSize: 14.5, lineHeight: 1.45, color: TC.ink, marginTop: 6, letterSpacing: -0.1 }}>
              Se former au bien-être, sérieusement et à votre rythme.
            </div>
          </div>
        </div>
      </div>
      <WhatsAppFAB />
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// NOTRE MISSION
// ════════════════════════════════════════════════════════════
function Mission({ device }) {
  const m = isMobEc(device);
  return (
    <Section tone="white" padY={m ? [60, 60] : [96, 96]} padX={m ? 22 : 80}>
      <div style={{
        display: m ? 'flex' : 'grid',
        flexDirection: m ? 'column' : undefined,
        gridTemplateColumns: m ? undefined : '0.95fr 1.05fr',
        gap: m ? 22 : 72, alignItems: m ? 'flex-start' : 'center',
      }}>
        <div>
          <Eyebrow variant="sage">Notre mission</Eyebrow>
          <h2 style={{
            fontFamily: fontSans, fontSize: m ? 30 : 44, fontWeight: 500,
            letterSpacing: m ? -1 : -1.4, lineHeight: 1.1,
            color: TC.ink, margin: '18px 0 0', textWrap: 'balance',
          }}>
            Rendre la formation bien-être plus accessible, plus claire et
            <span style={{ fontFamily: fontSerif, fontStyle: 'italic', fontWeight: 400, color: TC.sageDeep }}> plus humaine.</span>
          </h2>
        </div>
        <p style={{
          fontFamily: fontSans, fontSize: m ? 16.5 : 18.5, lineHeight: 1.7,
          color: TC.ink2, margin: 0, letterSpacing: -0.05, maxWidth: 560,
        }}>
          Nous avons conçu nos parcours pour permettre à chacun d'apprendre à son
          rythme, sans sacrifier la qualité pédagogique ni l'accompagnement.
          L'objectif&nbsp;: transmettre des connaissances solides, applicables et
          structurées, dans un environnement rassurant.
        </p>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// CE QUI NOUS DIFFÉRENCIE — 4 cartes premium
// ════════════════════════════════════════════════════════════
function Differenciation({ device }) {
  const m = isMobEc(device);
  const items = [
    { theme: 'online',         t: 'Formation 100% en ligne',        b: "Vous avancez depuis chez vous, à votre rythme, avec des contenus accessibles à tout moment." },
    { theme: 'accompagnement', t: 'Accompagnement humain',          b: "Nos élèves ne sont pas seuls devant leurs vidéos : ils bénéficient d'un suivi et de réponses à leurs questions." },
    { theme: 'book',           t: 'Pédagogie structurée',           b: "Les modules sont organisés pour progresser étape par étape, avec une logique claire et facile à suivre." },
    { theme: 'holistic',       t: 'Approche globale du bien-être',  b: "Nos formations intègrent une vision holistique : corps, équilibre, hygiène de vie, énergie et relation d'aide." },
  ];
  return (
    <Section tone="off" padY={m ? [60, 60] : [96, 96]} padX={m ? 22 : 80}>
      <SectionHead
        eyebrow="Ce qui nous différencie"
        title="Une école pensée dans le détail."
        sub="Quatre engagements concrets qui font la qualité d'un parcours Trainin Center."
        align="left"
        maxWidth={m ? '100%' : 640}
      />
      <div style={{
        display: 'grid',
        gridTemplateColumns: m ? '1fr' : 'repeat(2, 1fr)',
        gap: m ? 14 : 20, marginTop: m ? 4 : 12,
      }}>
        {items.map((it) => (
          <div key={it.t} style={{
            display: 'flex', flexDirection: m ? 'column' : 'row', gap: m ? 14 : 20,
            padding: m ? '24px 22px' : '30px 30px',
            background: TC.white, borderRadius: 18, border: `1px solid ${TC.hair}`,
            alignItems: 'flex-start',
          }}>
            <ThemeMark theme={it.theme} size={m ? 50 : 56} />
            <div>
              <div style={{ fontFamily: fontSans, fontSize: m ? 18 : 20, fontWeight: 600, color: TC.ink, letterSpacing: -0.3, lineHeight: 1.25 }}>{it.t}</div>
              <div style={{ fontFamily: fontSans, fontSize: m ? 14.5 : 15.5, lineHeight: 1.6, color: TC.ink2, letterSpacing: -0.05, marginTop: 8 }}>{it.b}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', justifyContent: m ? 'stretch' : 'flex-start', marginTop: m ? 28 : 36 }}>
        <BtnPrimary size="lg" fullWidth={m} onClick={() => window.dispatchEvent(new Event('tc-open-programme'))}>Recevoir le programme</BtnPrimary>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// À QUI S'ADRESSE L'ÉCOLE — 3 profils
// ════════════════════════════════════════════════════════════
function Profils({ device }) {
  const m = isMobEc(device);
  const items = [
    { theme: 'reconversion', n: '01', t: 'Personnes en reconversion', b: "Vous voulez changer de voie et donner du sens à votre travail en vous formant à un métier du bien-être." },
    { theme: 'leaf',         n: '02', t: 'Passionnés de bien-être',   b: "Vous nourrissez déjà cet univers et souhaitez structurer vos connaissances dans un cadre sérieux." },
    { theme: 'accompagnement', n: '03', t: 'Professionnels du secteur', b: "Vous exercez déjà et souhaitez ajouter une compétence complémentaire à votre pratique." },
  ];
  return (
    <Section tone="white" padY={m ? [60, 60] : [96, 96]} padX={m ? 22 : 80}>
      <SectionHead
        eyebrow="À qui s'adresse l'école ?"
        title="Une formation pour chaque projet."
        align={m ? 'left' : 'center'}
        maxWidth={720}
      />
      <div style={{
        display: 'grid',
        gridTemplateColumns: m ? '1fr' : 'repeat(3, 1fr)',
        gap: m ? 14 : 22, marginTop: m ? 4 : 16,
      }}>
        {items.map((it) => (
          <div key={it.t} style={{
            background: TC.off, borderRadius: 22, border: `1px solid ${TC.hair}`,
            padding: m ? '24px 22px' : '32px 28px',
            display: 'flex', flexDirection: 'column', gap: 14,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <ThemeMark theme={it.theme} size={m ? 48 : 54} />
              <span style={{ fontFamily: fontMono, fontSize: 13, color: TC.sage, letterSpacing: 0.4 }}>{it.n}</span>
            </div>
            <div style={{ fontFamily: fontSans, fontSize: m ? 18 : 20, fontWeight: 600, color: TC.ink, letterSpacing: -0.3, lineHeight: 1.25 }}>{it.t}</div>
            <div style={{ fontFamily: fontSans, fontSize: m ? 14.5 : 15.5, lineHeight: 1.6, color: TC.ink2, letterSpacing: -0.05 }}>{it.b}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// APPRENTISSAGE À DISTANCE — bloc visuel
// ════════════════════════════════════════════════════════════
function ADistance({ device }) {
  const m = isMobEc(device);
  const points = [
    { t: 'Une plateforme accessible 24h/24', b: 'Vos cours, supports et vidéos disponibles à tout moment, sur ordinateur, tablette ou mobile.' },
    { t: 'Des contenus pensés pour l\'écran', b: 'Vidéos claires, supports téléchargeables et modules courts pour rester concentré·e.' },
    { t: 'Un accompagnement à distance, mais réel', b: 'Une équipe pédagogique disponible pour répondre à vos questions tout au long du parcours.' },
  ];
  return (
    <Section tone="off" padY={m ? [60, 60] : [96, 96]} padX={m ? 22 : 80}>
      <div style={{
        display: m ? 'flex' : 'grid',
        flexDirection: m ? 'column' : undefined,
        gridTemplateColumns: m ? undefined : '1.05fr 0.95fr',
        gap: m ? 28 : 72, alignItems: 'center',
      }}>
        {/* visual */}
        <div style={{ position: 'relative' }}>
          <div style={{
            position: 'relative', width: '100%',
            aspectRatio: m ? '4 / 3' : '4 / 5',
            borderRadius: 24, overflow: 'hidden',
            boxShadow: '0 30px 80px -28px rgba(26,31,28,0.28)',
          }}>
            <img src="assets/ecole-distance.png" alt=""
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 30%', display: 'block' }} />
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(26,31,28,0.5) 100%)',
            }} />
            <div style={{ position: 'absolute', left: 20, right: 20, bottom: 20, color: TC.white }}>
              <div style={{ fontFamily: fontMono, fontSize: 10.5, letterSpacing: 1, textTransform: 'uppercase', opacity: 0.82 }}>Apprentissage à distance</div>
              <div style={{ fontFamily: fontSerif, fontStyle: 'italic', fontSize: m ? 21 : 25, lineHeight: 1.3, letterSpacing: -0.4, marginTop: 8 }}>
                Étudier chez soi, à son rythme.
              </div>
            </div>
          </div>
        </div>

        {/* text */}
        <div>
          <SectionHead
            eyebrow="Une école pensée pour le distanciel"
            title="Apprendre à distance, dans les meilleures conditions."
            align="left"
            maxWidth={m ? '100%' : 520}
          />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0, marginTop: -8 }}>
            {points.map((p, i) => (
              <div key={p.t} style={{
                display: 'grid', gridTemplateColumns: '24px 1fr', gap: 16,
                padding: '18px 0',
                borderTop: i === 0 ? 'none' : `1px solid ${TC.hair}`,
                alignItems: 'start',
              }}>
                <span style={{ marginTop: 1 }}><IconCheck size={22} color={TC.sage} /></span>
                <div>
                  <div style={{ fontFamily: fontSans, fontSize: m ? 16.5 : 18, fontWeight: 600, color: TC.ink, letterSpacing: -0.25, lineHeight: 1.3 }}>{p.t}</div>
                  <div style={{ fontFamily: fontSans, fontSize: 14.5, lineHeight: 1.55, color: TC.ink2, marginTop: 6, letterSpacing: -0.05 }}>{p.b}</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: m ? 24 : 28 }}>
            <a href="contact.html#formulaire" style={{ textDecoration: 'none' }}><BtnPrimary size="lg" fullWidth={m} data-cta="goto:contact">Contactez-nous</BtnPrimary></a>
          </div>
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// ÉQUIPE PÉDAGOGIQUE — cartes formatrices
// ════════════════════════════════════════════════════════════
function EquipePedagogique({ device }) {
  const m = isMobEc(device);
  const team = [
    { photo: 'assets/prof-andrea.jpg',     name: 'Andrea Fiedermutz',   role: 'Naturopathe certifiée',           line: 'Transmet les fondamentaux : cures, tempéraments et techniques naturopathiques.' },
    { photo: 'assets/prof-maeva.jpg',      name: 'Maeva Mène',          role: 'Naturopathe-iridologue certifiée', line: 'Guide l’étude du corps humain, de l’anatomie à la physiologie.' },
    { photo: 'assets/prof-antoinette.jpg', name: 'Antoinette Guépratte', role: 'Naturopathe certifiée',          line: 'Aborde l’alimentation comme un véritable outil de santé.' },
    { photo: 'assets/prof-oceane.jpg',     name: 'Océane Ruggiu',       role: 'Herboriste diplômée',             line: 'Partage l’art des plantes, de la phytothérapie à l’aromathérapie.' },
    { photo: 'assets/prof-patricia.jpg',   name: 'Patricia Nourissat',  role: 'Naturopathe-iridologue certifiée', line: 'Forme à l’iridologie et à la posture professionnelle du praticien.' },
  ];
  return (
    <Section id="equipe" tone="white" padY={m ? [60, 60] : [96, 96]} padX={m ? 22 : 80} style={{ scrollMarginTop: m ? 76 : 96 }}>
      <SectionHead
        eyebrow="Notre équipe pédagogique"
        title="Une équipe pédagogique spécialisée."
        sub="Les parcours Trainin Center sont portés par des intervenantes spécialisées, chacune associée à un axe fort de la formation : naturopathie, anatomie, alimentation, phytothérapie, iridologie et posture professionnelle."
        align={m ? 'left' : 'center'}
        maxWidth={760}
      />
      <div style={m
        ? { display: 'flex', flexDirection: 'column', gap: 14, marginTop: 6 }
        : { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, marginTop: 20 }}>
        {team.map((t) => (
          <article key={t.name} style={{
            background: TC.white, border: `1px solid ${TC.hair}`, borderRadius: 20,
            padding: m ? '26px 24px' : '34px 36px',
            display: 'flex', flexDirection: m ? 'column' : 'row',
            alignItems: 'center', textAlign: m ? 'center' : 'left',
            gap: m ? 0 : 26,
          }}>
            <div style={{
              flexShrink: 0,
              width: m ? 150 : 158, height: m ? 150 : 158, borderRadius: '50%',
              overflow: 'hidden', border: `1px solid ${TC.hair}`, background: TC.sageSoft,
              boxShadow: '0 10px 28px -12px rgba(26,31,28,0.28)',
            }}>
              <img src={t.photo} alt={t.name}
                style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 18%', display: 'block' }} />
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: m ? 'center' : 'flex-start' }}>
              <h3 style={{
                fontFamily: fontSans, fontSize: m ? 19 : 22, fontWeight: 600,
                color: TC.ink, letterSpacing: -0.4, margin: m ? '18px 0 0' : 0, lineHeight: 1.2,
              }}>{t.name}</h3>
              <div style={{
                fontFamily: fontSans, fontSize: m ? 13 : 13.5, fontWeight: 500,
                color: TC.sageDeep, marginTop: 6, letterSpacing: -0.05,
              }}>{t.role}</div>
              <div style={{ width: 28, height: 1, background: TC.hair, margin: '14px 0' }} />
              <p style={{
                fontFamily: fontSans, fontSize: m ? 14.5 : 15.5, lineHeight: 1.6,
                color: TC.ink2, margin: 0, letterSpacing: -0.05, maxWidth: m ? 250 : 320,
              }}>{t.line}</p>
            </div>
          </article>
        ))}
        {/* encart — invitation entretien (complète la ligne de Patricia) */}
        {m ? (
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 4 }}>
            <a href="contact.html#formulaire" style={{ textDecoration: 'none' }}><BtnPrimary size="lg" fullWidth data-cta="goto:contact">Réservez un entretien</BtnPrimary></a>
          </div>
        ) : (
          <article style={{
            background: TC.white,
            border: `1px solid ${TC.hair}`,
            borderRadius: 20, padding: '34px 40px',
            display: 'flex', flexDirection: 'column',
            alignItems: 'flex-start',
            justifyContent: 'center', textAlign: 'left',
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ position: 'relative' }}>
              <div style={{ fontFamily: fontMono, fontSize: 11, letterSpacing: 1, textTransform: 'uppercase', color: TC.sageDeep }}>Un échange pour vous orienter</div>
              <h3 style={{
                fontFamily: fontSans, fontSize: 26, fontWeight: 500,
                letterSpacing: -0.6, lineHeight: 1.18, color: TC.ink, margin: '12px 0 0', textWrap: 'balance',
              }}>
                Parlons de votre projet<br />
                <span style={{ fontFamily: fontSerif, fontStyle: 'italic', fontWeight: 400 }}>en toute simplicité.</span>
              </h3>
              <p style={{
                fontFamily: fontSans, fontSize: 15, lineHeight: 1.6,
                color: TC.ink2, margin: '14px 0 22px', letterSpacing: -0.05, maxWidth: 360,
              }}>
                Échangez avec l'équipe pour être orienté·e vers le parcours le plus adapté à vos objectifs.
              </p>
              <a href="contact.html#formulaire" style={{ textDecoration: 'none' }}><BtnPrimary size="lg" data-cta="goto:contact">Réservez un entretien</BtnPrimary></a>
            </div>
          </article>
        )}
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// CTA FINAL
// ════════════════════════════════════════════════════════════
function EcoleCTA({ device }) {
  const m = isMobEc(device);
  return (
    <section style={{ padding: m ? '24px 16px' : '32px 48px', background: TC.white }}>
      <div style={{
        position: 'relative', borderRadius: m ? 28 : 36,
        background: `linear-gradient(160deg, ${TC.sage} 0%, ${TC.sageInk} 100%)`,
        padding: m ? '48px 28px' : '76px 80px', overflow: 'hidden', textAlign: 'center',
        ...(m ? {} : { maxWidth: 1100, marginLeft: 'auto', marginRight: 'auto' }),
      }}>
        <div style={{ position: 'absolute', top: -120, right: -120, width: 360, height: 360, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 70%)' }} />
        <div style={{ position: 'absolute', bottom: -160, left: -160, width: 420, height: 420, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%)' }} />
        <div style={{ position: 'relative' }}>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <Eyebrow variant="light">L'école Trainin Center</Eyebrow>
          </div>
          <h2 style={{
            fontFamily: fontSans, fontSize: m ? 34 : 56, fontWeight: 500,
            letterSpacing: m ? -1.2 : -2, lineHeight: 1.05,
            color: TC.white, margin: '20px auto 16px', textWrap: 'balance', maxWidth: 760,
          }}>
            Vous souhaitez découvrir{m ? ' ' : <br />}
            <span style={{ fontFamily: fontSerif, fontStyle: 'italic', fontWeight: 400 }}>nos formations&nbsp;?</span>
          </h2>
          <p style={{
            fontFamily: fontSans, fontSize: m ? 16 : 18, lineHeight: 1.55,
            color: 'rgba(255,255,255,0.78)', margin: '0 auto 28px', maxWidth: 520, letterSpacing: -0.1,
          }}>
            Explorez nos parcours ou recevez le programme détaillé pour faire votre
            choix sereinement.
          </p>
          <div style={{ display: 'flex', flexDirection: m ? 'column' : 'row', gap: 12, justifyContent: 'center', alignItems: 'center' }}>
            <BtnPrimary size="lg" dark fullWidth={m} data-cta="goto:formations" onClick={() => window.dispatchEvent(new Event('tc-open-programme'))}>Voir les formations</BtnPrimary>
            <a href="recevoir-le-programme.html" style={{ textDecoration: 'none', display: m ? 'block' : 'inline-block', width: m ? '100%' : 'auto' }}><BtnGhost size="lg" dark fullWidth={m} data-cta="goto:programme">Recevoir le programme</BtnGhost></a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// PAGE
// ════════════════════════════════════════════════════════════
function EcolePage({ device }) {
  // Le contenu est rendu côté client (Babel in-browser) : au chargement direct
  // de ecole.html#equipe depuis une autre page, l'ancre native du
  // navigateur se déclenche avant que #equipe n'existe dans le DOM et
  // échoue silencieusement. On rejoue le scroll une fois le composant monté.
  React.useEffect(() => {
    if (!location.hash) return;
    const el = document.getElementById(location.hash.slice(1));
    if (el) el.scrollIntoView({ block: 'start' });
  }, []);
  return (
    <div style={{ background: TC.white, width: '100%', fontFamily: fontSans, color: TC.ink }}>
      <NavBar device={device} />
      <EcoleHero device={device} />
      <Mission device={device} />
      <Differenciation device={device} />
      <Profils device={device} />
      <ADistance device={device} />
      <EquipePedagogique device={device} />
      <EcoleCTA device={device} />
      <Footer device={device} />
    </div>
  );
}

Object.assign(window, { EcolePage });