// Trainin Center — Gabarit de page détail module (réutilisable).
// Une seule logique, pilotée par MODULE_DATA[slug]. Même style premium que
// la page « Hygiène vitale ». Chaque wrapper HTML rend <ModuleDetail slug=… />.
// Bouton « Je m'inscris » → paiement Learnybox (placeholder). Liens non branchés.

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

// ════════════════════════════════════════════════════════════
// DONNÉES MODULES
// ════════════════════════════════════════════════════════════
const MODULE_DATA = {
  'anatomie-physiologie': {
    family: 'Naturopathie', price: '390 \u20ac', img: 'assets/module-anatomie.png',
    nameLead: 'Anatomie &', nameAccent: 'physiologie.',
    paiement: 'LEARNYBOX_PAIEMENT_ANATOMIE_PHYSIOLOGIE',
    heroDesc: "Comprendre le corps humain, de la cellule aux grands syst\u00e8mes, le socle indispensable de toute pratique de naturopathe.",
    introTitle: 'Le corps humain, socle de votre pratique.',
    introText: "Avant d'accompagner, il faut comprendre. Ce module pose les bases de l'anatomie et de la physiologie : la cellule, les tissus, puis les grands syst\u00e8mes qui font fonctionner le corps. Vous apprenez \u00e0 situer chaque organe dans son r\u00f4le pour b\u00e2tir des bilans justes et des conseils coh\u00e9rents.",
    chapters: [
      { n: '01', t: 'La cellule et les tissus', items: ['La structure cellulaire', 'Les quatre grands types de tissus', 'Le m\u00e9tabolisme cellulaire'] },
      { n: '02', t: 'Les grands syst\u00e8mes', items: ['Syst\u00e8me digestif', 'Syst\u00e8me circulatoire', 'Syst\u00e8me respiratoire', 'Syst\u00e8me nerveux'] },
      { n: '03', t: 'Le syst\u00e8me endocrinien', items: [] },
      { n: '04', t: 'Le syst\u00e8me immunitaire', items: [] },
      { n: '05', t: "L'appareil locomoteur", items: [] },
    ],
  },
  'bio-nutrition': {
    family: 'Naturopathie', price: '390 \u20ac', img: 'assets/module-bio-nutrition.jpg',
    nameLead: 'Bio-', nameAccent: 'nutrition.',
    paiement: 'LEARNYBOX_PAIEMENT_BIO_NUTRITION',
    heroDesc: "L'alimentation comme pilier central de la sant\u00e9 au naturel : nourrir le terrain, pas seulement combler la faim.",
    introTitle: 'Manger pour nourrir le terrain.',
    introText: "La bio-nutrition envisage l'alimentation comme un v\u00e9ritable outil de sant\u00e9. Vous d\u00e9couvrez les macronutriments et micronutriments, l'\u00e9quilibre acido-basique, les associations alimentaires et les super-aliments pour construire des plans alimentaires adapt\u00e9s \u00e0 chaque terrain.",
    chapters: [
      { n: '01', t: 'Les principes de la bio-nutrition', items: ['Macronutriments', 'Micronutriments', "L'\u00e9quilibre acido-basique"] },
      { n: '02', t: "Les familles d'aliments", items: ['Index glyc\u00e9mique', 'Associations alimentaires', 'Aliments vivants'] },
      { n: '03', t: 'Les super-aliments', items: [] },
      { n: '04', t: 'Les cures et r\u00e9gimes alimentaires', items: [] },
      { n: '05', t: 'Construire un plan alimentaire', items: [] },
    ],
  },
  'phytotherapie': {
    family: 'Naturopathie', price: '390 \u20ac', img: 'assets/module-phytotherapie.jpg',
    nameLead: '', nameAccent: 'Phytoth\u00e9rapie.',
    paiement: 'LEARNYBOX_PAIEMENT_PHYTOTHERAPIE',
    heroDesc: "Les plantes m\u00e9dicinales et leurs bienfaits, mis en pratique au service du terrain.",
    introTitle: 'Le pouvoir des plantes, en pratique.',
    introText: "Des principes actifs aux formes gal\u00e9niques, ce module vous fait entrer dans l'univers des plantes m\u00e9dicinales. Vous apprenez \u00e0 reconna\u00eetre les grandes familles, \u00e0 pr\u00e9parer et doser, et \u00e0 utiliser la phytoth\u00e9rapie en toute s\u00e9curit\u00e9 au quotidien.",
    chapters: [
      { n: '01', t: 'Introduction \u00e0 la phytoth\u00e9rapie', items: ['Histoire et principes', 'Les principes actifs', 'Les formes gal\u00e9niques'] },
      { n: '02', t: 'Les grandes familles de plantes', items: ['Plantes digestives', 'Plantes nervines', 'Plantes circulatoires'] },
      { n: '03', t: 'Pr\u00e9parations et posologies', items: [] },
      { n: '04', t: 'Pr\u00e9cautions et interactions', items: [] },
      { n: '05', t: 'La trousse phyto au quotidien', items: [] },
    ],
  },
  'iridologie': {
    family: 'Naturopathie', price: '390 \u20ac', img: 'assets/module-iridologie.jpg',
    nameLead: '', nameAccent: 'Iridologie.',
    paiement: 'LEARNYBOX_PAIEMENT_IRIDOLOGIE',
    heroDesc: "Lire dans l'iris les signes de terrain pour affiner vos bilans naturopathiques.",
    introTitle: "L'iris, miroir du terrain.",
    introText: "L'iridologie permet de lire dans l'iris les signes constitutionnels et les fragilit\u00e9s de terrain. Vous d\u00e9couvrez la cartographie irienne, les constitutions, et la m\u00e9thode pour r\u00e9aliser un bilan qui vient compl\u00e9ter et affiner votre accompagnement.",
    chapters: [
      { n: '01', t: "Les fondements de l'iridologie", items: ['Histoire et principes', "Anatomie de l'iris", 'La cartographie irienne'] },
      { n: '02', t: 'Les constitutions iriennes', items: ['Constitution lymphatique', 'Constitution h\u00e9matog\u00e8ne', 'Constitution mixte'] },
      { n: '03', t: 'Les signes et leurs significations', items: [] },
      { n: '04', t: 'R\u00e9aliser un bilan iridologique', items: [] },
      { n: '05', t: 'Iridologie et hygi\u00e8ne vitale', items: [] },
    ],
  },
  'ouvrir-son-cabinet': {
    family: 'Naturopathie', price: '390 \u20ac', img: 'https://images.unsplash.com/photo-1666214277657-e60f05c40b04?crop=entropy&cs=tinysrgb&fm=jpg&ixid=Mnw5ODc5NHwxfDF8YWxsfDExfHx8fHx8MXx8MTY3MDcxODcxMA&ixlib=rb-4.0.3&q=80&w=1200',
    nameLead: 'Ouvrir son', nameAccent: 'cabinet.',
    paiement: 'LEARNYBOX_PAIEMENT_OUVRIR_CABINET',
    heroDesc: "Du business plan au lancement : tout pour cr\u00e9er et faire vivre votre activit\u00e9 de naturopathe.",
    introTitle: "De la formation \u00e0 l'installation.",
    introText: "Se former, c'est une chose ; s'installer en est une autre. Ce module vous accompagne pas \u00e0 pas : d\u00e9finir votre projet, choisir votre cadre juridique, construire votre business plan et trouver vos premiers clients pour lancer sereinement votre cabinet.",
    chapters: [
      { n: '01', t: 'D\u00e9finir son projet', items: ['Positionnement', 'Sp\u00e9cialisation', '\u00c9tude de march\u00e9'] },
      { n: '02', t: 'Le cadre juridique et administratif', items: ['Choix du statut', 'D\u00e9ontologie', 'Assurances'] },
      { n: '03', t: 'Construire son business plan', items: [] },
      { n: '04', t: 'Communiquer et trouver ses clients', items: [] },
      { n: '05', t: 'G\u00e9rer et d\u00e9velopper son activit\u00e9', items: [] },
    ],
  },
  'mind-switch': {
    family: 'Fr\u00e9quences \u00e9nerg\u00e9tiques', price: '260 \u20ac', img: 'assets/module-freq-1.png',
    nameLead: 'Mind', nameAccent: 'switch.',
    paiement: 'LEARNYBOX_PAIEMENT_MIND_SWITCH',
    heroDesc: "Le d\u00e9clic qui rend libre : changer de fr\u00e9quence pour changer de vie.",
    introTitle: 'Changer de fr\u00e9quence, changer de vie.',
    introText: "Mind switch est le d\u00e9clic int\u00e9rieur qui lib\u00e8re. Vous apprenez \u00e0 comprendre votre champ vibratoire, \u00e0 identifier vos blocages et \u00e0 op\u00e9rer le switch mental qui transforme durablement votre rapport \u00e0 vous-m\u00eame et au monde.",
    chapters: [
      { n: '01', t: 'Comprendre les fr\u00e9quences', items: ['Le champ vibratoire', 'Pens\u00e9e et \u00e9nergie', "Le pouvoir de l'intention"] },
      { n: '02', t: 'Le d\u00e9clic int\u00e9rieur', items: ['Identifier ses blocages', 'Lib\u00e9rer les m\u00e9moires', 'Le switch mental'] },
      { n: '03', t: 'Ancrer le changement', items: [] },
      { n: '04', t: 'Vivre align\u00e9', items: [] },
    ],
  },
  'mind-increase': {
    family: 'Fr\u00e9quences \u00e9nerg\u00e9tiques', price: '260 \u20ac', img: 'assets/module-freq-2.png',
    nameLead: 'Mind', nameAccent: 'increase.',
    paiement: 'LEARNYBOX_PAIEMENT_MIND_INCREASE',
    heroDesc: "Devenez un \u00eatre augment\u00e9 en d\u00e9veloppant votre pouvoir psychique.",
    introTitle: 'D\u00e9velopper son potentiel psychique.',
    introText: "Mind increase vous invite \u00e0 d\u00e9velopper vos facult\u00e9s psychiques : intuition, perception subtile et concentration. \u00c0 travers des exercices d'amplification, vous apprenez \u00e0 canaliser et prot\u00e9ger votre \u00e9nergie pour int\u00e9grer pleinement vos nouvelles capacit\u00e9s.",
    chapters: [
      { n: '01', t: 'Les facult\u00e9s psychiques', items: ['Intuition', 'Perception subtile', 'Concentration'] },
      { n: '02', t: "Exercices d'amplification", items: ['Visualisation', 'M\u00e9ditation active', '\u00c9nerg\u00e9tique'] },
      { n: '03', t: 'Prot\u00e9ger et canaliser son \u00e9nergie', items: [] },
      { n: '04', t: 'Int\u00e9grer ses nouvelles capacit\u00e9s', items: [] },
    ],
  },
  'connexion-infinie': {
    family: 'Fr\u00e9quences \u00e9nerg\u00e9tiques', price: '260 \u20ac', img: 'assets/module-freq-3.png',
    nameLead: 'Connexion', nameAccent: 'infinie.',
    paiement: 'LEARNYBOX_PAIEMENT_CONNEXION_INFINIE',
    heroDesc: "Connectez-vous \u00e0 la puissance infinie de l'esprit, celle qui permet de tout atteindre.",
    introTitle: "S'unir \u00e0 la source.",
    introText: "Connexion infinie vous m\u00e8ne vers les \u00e9tats de conscience \u00e9largie. Par la m\u00e9ditation profonde et le l\u00e2cher-prise, vous apprenez \u00e0 ouvrir votre canal int\u00e9rieur, \u00e0 recevoir et transmettre, et \u00e0 manifester depuis la source au quotidien.",
    chapters: [
      { n: '01', t: 'La conscience \u00e9largie', items: ['\u00c9tats de conscience', 'Le l\u00e2cher-prise', 'La pr\u00e9sence'] },
      { n: '02', t: "La connexion \u00e0 l'infini", items: ['M\u00e9ditation profonde', 'Le canal int\u00e9rieur', 'Recevoir et transmettre'] },
      { n: '03', t: 'Manifester depuis la source', items: [] },
      { n: '04', t: 'Vivre la connexion au quotidien', items: [] },
    ],
  },
};

function MdInscriptionCTA({ size = 'lg', dark = false, fullWidth = false, children = "Je m'inscris", href = '#paiement' }) {
  const h = size === 'lg' ? 56 : size === 'sm' ? 44 : 50;
  const px = size === 'lg' ? 32 : 24;
  const fs = size === 'lg' ? 16 : 15;
  return (
    <a href={href} data-cta="learnybox:purchase" style={{
      height: h, padding: `0 ${px}px`,
      background: dark ? TC.white : TC.sage, color: dark ? TC.ink : TC.white,
      borderRadius: 999, textDecoration: 'none',
      fontFamily: fontSans, fontSize: fs, fontWeight: 600, letterSpacing: -0.15,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
      width: fullWidth ? '100%' : 'auto', boxSizing: 'border-box',
      boxShadow: dark ? '0 1px 2px rgba(0,0,0,0.08)' : '0 1px 2px rgba(0,0,0,0.06), 0 8px 22px rgba(90,145,105,0.28)',
    }}>
      {children}
      <svg width="15" height="15" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0 }}>
        <path d="M3 7h8M8 4l3 3-3 3" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </a>
  );
}

// ════════════════════════════════════════════════════════════
// HERO
// ════════════════════════════════════════════════════════════
function MdHero({ device, data }) {
  const m = isMobD(device);
  const pad = m ? '32px 22px 36px' : '75px 80px 44px';
  const meta = ['\u00c0 votre rythme', 'Devoir QCM', 'Attestation d\u00e9livr\u00e9e'];
  const inscriptionUrl = data.family === 'Naturopathie'
    ? 'https://espace.trainin-center.com/page-inscription-naturopathie-carte/'
    : 'https://espace.trainin-center.com/page-inscription-frequences-energetiques-carte/';
  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: '1.05fr 1fr', gap: 48, alignItems: 'stretch',
          }}>
        <div style={{ maxWidth: m ? '100%' : 595 }}>
          <a href="modules-a-la-carte.html" style={{
            display: 'inline-flex', alignItems: 'center', gap: 7, textDecoration: 'none',
            fontFamily: fontSans, fontSize: 13.5, fontWeight: 500, color: TC.ink3, marginBottom: 16,
          }}>
            <svg width="13" height="13" viewBox="0 0 14 14" fill="none">
              <path d="M11 7H3M6 4L3 7l3 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            Modules à la carte
          </a>
          <div style={{ marginBottom: m ? 16 : 20 }}>
            <Eyebrow variant="gold" size={m ? 'sm' : 'md'}>Module · {data.family}</Eyebrow>
          </div>
          <h1 style={{
            fontFamily: fontSans, fontSize: m ? 40 : 60, fontWeight: 500,
            letterSpacing: m ? -1.3 : -2, lineHeight: m ? 1.12 : 1.07,
            margin: '0 0 22px', color: TC.ink, textWrap: 'balance',
          }}>
            {data.nameLead ? <>{data.nameLead}{m ? ' ' : <br />}</> : null}
            <span style={{
              fontFamily: fontSerif, fontWeight: 400, fontStyle: 'italic',
              color: TC.sageDeep, fontSize: m ? 44 : 67, letterSpacing: m ? -1.3 : -1.8, lineHeight: 1.05,
            }}>{data.nameAccent}</span>
          </h1>
          <p style={{
            fontFamily: fontSans, fontSize: m ? 16.5 : 19, lineHeight: 1.58,
            color: TC.ink2, margin: '0 0 26px', maxWidth: m ? '100%' : 520, letterSpacing: -0.1,
          }}>{data.heroDesc}</p>
          <div style={{
            display: 'flex', flexDirection: m ? 'column' : 'row',
            gap: m ? 10 : 12, alignItems: m ? 'stretch' : 'center', marginBottom: m ? 24 : 30,
          }}>
            <MdInscriptionCTA size="lg" fullWidth={m} href={inscriptionUrl}>Je m'inscris</MdInscriptionCTA>
            <BtnGhost size="lg" fullWidth={m} data-cta="goto:programme" onClick={() => window.dispatchEvent(new Event('tc-open-programme'))}>Recevoir le programme</BtnGhost>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: m ? '10px 16px' : '10px 22px' }}>
            {meta.map((x) => (
              <div key={x} style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <IconCheck size={16} color={TC.sage} />
                <span style={{ fontFamily: fontSans, fontSize: 13.5, color: TC.ink2, letterSpacing: -0.05 }}>{x}</span>
              </div>
            ))}
          </div>
        </div>

        {/* photo — desktop : le cadre démarre à la hauteur du H1 (sous le lien retour
            et le badge) et descend jusqu'au bas de la ligne des arguments, via le
            stretch de la colonne (alignItems:'stretch') + un décalage mesuré. */}
        <div style={m ? { position: 'relative' } : { position: 'relative', height: '100%', minHeight: 428 }}>
          <div style={m
            ? {
                position: 'relative', width: '100%', aspectRatio: '4 / 3',
                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: 84, 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={data.img} alt=""
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 55%', display: 'block' }} />
          </div>
          <div style={{
            position: 'absolute', left: m ? '50%' : 20, transform: m ? 'translateX(-50%)' : 'none',
            bottom: m ? -26 : 18, width: m ? 'calc(100% - 44px)' : 213,
            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 }}>Prix</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 4 }}>
              <span style={{ fontFamily: fontSans, fontSize: 34, fontWeight: 600, color: TC.ink, letterSpacing: -1.2 }}>{data.price}</span>
              <span style={{ fontFamily: fontSans, fontSize: 13, color: TC.ink2 }}>TTC</span>
            </div>
          </div>
        </div>
      </div>
      <WhatsAppFAB />
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// À DÉCOUVRIR
// ════════════════════════════════════════════════════════════
function MdIntro({ device, data }) {
  const m = isMobD(device);
  return (
    <Section tone="white" padY={m ? [56, 56] : [88, 88]} padX={m ? 22 : 80}>
      <SectionHead eyebrow="Le module" title={data.introTitle} align="left" maxWidth={m ? '100%' : 680} />
      <p style={{
        fontFamily: fontSans, fontSize: m ? 16.5 : 18, lineHeight: 1.65,
        color: TC.ink2, margin: '-18px 0 0', maxWidth: 820, letterSpacing: -0.05,
      }}>{data.introText}</p>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// PLAN DE FORMATION
// ════════════════════════════════════════════════════════════
function MdPlan({ device, data }) {
  const m = isMobD(device);
  return (
    <Section tone="off" padY={m ? [56, 56] : [88, 88]} padX={m ? 22 : 80}>
      <SectionHead eyebrow="Plan de formation" title="Au programme." align="left" maxWidth={m ? '100%' : 680} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: m ? 14 : 16 }}>
        {data.chapters.map((c) => (
          <div key={c.n} style={{
            background: TC.white, borderRadius: 18, border: `1px solid ${TC.hair}`,
            padding: m ? '20px 20px' : '26px 28px',
            display: 'grid', gridTemplateColumns: m ? '40px 1fr' : '56px 1fr', gap: m ? 14 : 22, alignItems: 'start',
          }}>
            <div style={{
              width: m ? 40 : 48, height: m ? 40 : 48, borderRadius: m ? 20 : 24,
              background: TC.sageDeep, color: TC.white,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: fontMono, fontSize: 13, fontWeight: 500,
            }}>{c.n}</div>
            <div>
              <div style={{
                fontFamily: fontSans, fontSize: m ? 17.5 : 20, fontWeight: 600,
                color: TC.ink, letterSpacing: -0.4, lineHeight: 1.25, paddingTop: m ? 6 : 10,
              }}>{c.t}</div>
              {c.items.length > 0 && (
                <div style={{
                  marginTop: 14, display: 'grid',
                  gridTemplateColumns: m ? '1fr' : '1fr 1fr', gap: m ? 8 : '8px 22px',
                }}>
                  {c.items.map((it) => (
                    <div key={it} style={{ display: 'flex', alignItems: 'flex-start', gap: 9 }}>
                      <span style={{ width: 5, height: 5, borderRadius: 3, background: TC.sage, flexShrink: 0, marginTop: 8 }} />
                      <span style={{ fontFamily: fontSans, fontSize: 14.5, color: TC.ink2, lineHeight: 1.45, letterSpacing: -0.05 }}>{it}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// TARIFS & MODALITÉS
// ════════════════════════════════════════════════════════════
function MdTarifs({ device, data }) {
  const m = isMobD(device);
  const inscriptionUrl = data.family === 'Naturopathie'
    ? 'https://espace.trainin-center.com/page-inscription-naturopathie-carte/'
    : 'https://espace.trainin-center.com/page-inscription-frequences-energetiques-carte/';
  const fullName = `${data.nameLead ? data.nameLead + ' ' : ''}${data.nameAccent}`.replace(/\.$/, '');
  const includes = [
    `1 module complet : ${fullName}`,
    'Un devoir en fin de module (QCM)',
    'Attestation de suivi délivrée en fin de module',
  ];
  const paiements = [
    'Carte bancaire',
    'PayPal',
    'Virement bancaire',
    'Paiement en plusieurs mensualités possible',
  ];
  const head = (
    <SectionHead
      eyebrow="Tarif & inscription"
      title="Commencez quand vous voulez."
      sub="Un module, un tarif clair et un paiement en ligne sécurisé (possibilité de payer en plusieurs mensualités)."
      align="center" dark maxWidth={680}
    />
  );

  const priceCard = (
      <div style={{
        maxWidth: 560, margin: '0 auto', background: TC.white, borderRadius: 28,
        border: `1px solid ${TC.hair}`, boxShadow: '0 30px 80px -20px rgba(0,0,0,0.35)',
        padding: m ? '28px 24px' : '40px 44px',
      }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontFamily: fontMono, fontSize: 11.5, letterSpacing: 0.6, textTransform: 'uppercase', color: TC.ink3 }}>Module {fullName}</div>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 8, marginTop: 8 }}>
            <span style={{ fontFamily: fontSans, fontSize: m ? 56 : 68, fontWeight: 600, color: TC.ink, letterSpacing: -2.4, lineHeight: 1 }}>{data.price}</span>
            <span style={{ fontFamily: fontSans, fontSize: 16, color: TC.ink2 }}>TTC</span>
          </div>
        </div>

        <div style={{ height: 1, background: TC.hair, margin: m ? '24px 0' : '28px 0' }} />

        <div style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
          <div style={{ fontFamily: fontMono, fontSize: 11, letterSpacing: 0.7, textTransform: 'uppercase', color: TC.ink3, marginBottom: 1 }}>Le module comprend</div>
          {includes.map((p) => (
            <div key={p} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
              <span style={{ marginTop: 1, flexShrink: 0 }}><IconCheck size={20} color={TC.sage} /></span>
              <span style={{ fontFamily: fontSans, fontSize: m ? 15 : 15.5, color: TC.ink, lineHeight: 1.5, letterSpacing: -0.05 }}>{p}</span>
            </div>
          ))}
        </div>

        <div style={{ marginTop: m ? 26 : 32 }}>
          <MdInscriptionCTA size="lg" fullWidth href={inscriptionUrl}>Je m'inscris</MdInscriptionCTA>
        </div>

        <div style={{
          marginTop: 18, padding: m ? '16px 16px' : '18px 20px',
          background: TC.sageMist, borderRadius: 14, border: `1px solid ${TC.sageHair}`,
        }}>
          <div style={{ fontFamily: fontMono, fontSize: 10.5, letterSpacing: 0.6, textTransform: 'uppercase', color: TC.sageDeep, marginBottom: 10 }}>Paiement sécurisé</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
            {paiements.map((p) => (
              <div key={p} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                <span style={{ width: 5, height: 5, borderRadius: 3, background: TC.sage, flexShrink: 0, marginTop: 7 }} />
                <span style={{ fontFamily: fontSans, fontSize: 13.5, color: TC.ink2, lineHeight: 1.45 }}>{p}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
  );

  if (m) {
    return (
      <Section tone="sage" padY={[60, 60]} padX={22}>
        {head}
        {priceCard}
      </Section>
    );
  }

  // Desktop — bloc contenu (même logique que la section Tarifs validée
  // de formation-frequences-energetiques.html) au lieu de la bande pleine largeur.
  return (
    <section style={{ background: TC.white, padding: '64px 32px' }}>
      <div style={{
        position: 'relative', maxWidth: 1280, margin: '0 auto', width: '100%',
        background: TC.sageDeep, borderRadius: 36,
        padding: '64px 60px', overflow: 'hidden',
      }}>
        {head}
        {priceCard}
      </div>
    </section>
  );
}

// ════════════════════════════════════════════════════════════
// PAGE
// ════════════════════════════════════════════════════════════
function ModuleDetail({ device, slug }) {
  const data = MODULE_DATA[slug];
  if (!data) return <div style={{ padding: 40, fontFamily: fontSans }}>Module introuvable : {slug}</div>;
  return (
    <div style={{ background: TC.white, width: '100%', fontFamily: fontSans, color: TC.ink }}>
      <NavBar device={device} />
      <MdHero device={device} data={data} />
      <MdIntro device={device} data={data} />
      <MdPlan device={device} data={data} />
      <MdTarifs device={device} data={data} />
      <Footer device={device} />
    </div>
  );
}

Object.assign(window, { ModuleDetail, MODULE_DATA });