{label} {textarea ? (

) : (
        <input type={type} name={name} id={id} required={required} placeholder={placeholder} style={{
          height: 50, padding: '0 16px', background: TC.white,
          border: `1px solid ${TC.hairStrong}`, borderRadius: 999,
          fontFamily: fontSans, fontSize: 15, color: TC.ink, outline: 'none',
        }} />
      )}
    </div>
  );
}

const CT_ACTION = 'https://trainin-center.learnybox.com/form/6a4028343d620meoghjbmgk4k7bw6m3fzp/';
const CT_RGPD_NOTICE = "En indiquant votre adresse mail, vous acceptez de recevoir une réponse à votre demande ainsi que des informations de la part de Trainin Center. Vous pouvez vous désinscrire à tout moment via les liens de désinscription présents dans nos emails.";

function ContactMain({ device }) {
  const m = isMobCt(device);
  return (
    <Section tone="off" padY={m ? [20, 56] : [80, 88]} padX={m ? 22 : 80} id="formulaire" style={{ scrollMarginTop: m ? 76 : 96 }}>
      <div style={{
        display: m ? 'flex' : 'grid',
        flexDirection: m ? 'column' : undefined,
        gridTemplateColumns: m ? undefined : '1.1fr 0.9fr',
        gap: m ? 22 : 40, alignItems: 'stretch',
        maxWidth: 1180, margin: '0 auto',
      }}>
        {/* FORMULAIRE — fond clair, bordures fines */}
        <form method="post" acceptCharset="UTF-8" action={CT_ACTION} data-cta="contact:submit" style={{
          background: TC.white, borderRadius: 24, border: `1px solid ${TC.hair}`,
          padding: m ? '24px 22px' : '40px 40px',
          boxShadow: '0 1px 2px rgba(0,0,0,0.03), 0 18px 50px -24px rgba(26,31,28,0.18)',
          display: 'flex', flexDirection: 'column',
        }}>
          <h2 style={{
            fontFamily: fontSans, fontSize: m ? 22 : 26, fontWeight: 600,
            color: TC.ink, letterSpacing: -0.5, lineHeight: 1.2, margin: '0 0 6px',
          }}>Écrivez-nous</h2>
          <p style={{ fontFamily: fontSans, fontSize: m ? 14.5 : 15, lineHeight: 1.55, color: TC.ink2, margin: '0 0 24px', letterSpacing: -0.05 }}>
            Remplissez ce formulaire, l'équipe vous recontacte rapidement.
          </p>
          <input type="hidden" name="form_name" value="Formulaire Demande d’informations formation" />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 16 }}>
            <ContactField label="Nom / prénom" name="fname" id="form_input572050" placeholder="Votre nom et prénom *" required />
            <ContactField label="Téléphone" type="text" name="tel" id="form_input572055" placeholder="Votre numéro de téléphone *" required />
            <ContactField label="Email" type="email" name="email" id="form_input572051" placeholder="Votre adresse email *" required />
            <ContactField label="Message" textarea name="custom[message]" id="form_input572057" placeholder="Parlez-nous de votre projet…" />
          </div>
          <label htmlFor="rgpd572052" style={{ display: 'flex', alignItems: 'flex-start', gap: 10, cursor: 'pointer', marginTop: 16 }}>
            <input type="checkbox" value="1" name="rgpd" id="rgpd572052" data-no-uniform="true" required style={{ marginTop: 3, width: 16, height: 16, accentColor: TC.sage, flexShrink: 0 }} />
            <span style={{ fontFamily: fontSans, fontSize: 12.5, lineHeight: 1.5, color: TC.ink3, letterSpacing: -0.02 }}>{CT_RGPD_NOTICE}</span>
            <input type="hidden" name="rgpd_notice" value={CT_RGPD_NOTICE} />
          </label>
          <button type="submit" id="btn_submit_572053" data-cta="contact:submit" style={{
            height: 54, marginTop: 24, border: 'none', borderRadius: 999,
            background: TC.sage, color: TC.white, cursor: 'pointer',
            fontFamily: fontSans, fontSize: 15.5, fontWeight: 600, letterSpacing: -0.15,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9,
            boxShadow: '0 1px 2px rgba(0,0,0,0.06), 0 8px 22px rgba(90,145,105,0.28)',
          }}>
            Envoyer ma demande
            <svg width="15" height="15" viewBox="0 0 14 14" fill="none">
              <path d="M3 7h8M8 4l3 3-3 3" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 9, marginTop: 16 }}>
            <span style={{ marginTop: 1, flexShrink: 0 }}><IconCheck size={15} color={TC.sage} /></span>
            <span style={{ fontFamily: fontSans, fontSize: 12.5, lineHeight: 1.5, color: TC.ink3, letterSpacing: -0.02 }}>
              Vos informations restent confidentielles. L'équipe Trainin Center vous
              recontactera dans les meilleurs délais.
            </span>
          </div>
        </form>

{/* COORDONNÉES — encart vert profond (cf. programme PDF) */}
        <div style={{
          position: 'relative', overflow: 'hidden',
          borderRadius: 24,
          background: `linear-gradient(155deg, ${TC.sage} 0%, ${TC.sageInk} 100%)`,
          padding: m ? '28px 24px' : '40px 38px',
          display: 'flex', flexDirection: 'column',
        }}>
          <div style={{ position: 'absolute', top: -90, right: -90, width: 240, height: 240, borderRadius: '50%', background: 'radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%)' }} />
          <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', height: '100%' }}>
            <div style={{ fontFamily: fontMono, fontSize: 11, letterSpacing: 1.4, textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)', marginBottom: 14 }}>
              Coordonnées
            </div>
            <h2 style={{
              fontFamily: fontSans, fontSize: m ? 22 : 26, fontWeight: 600,
              color: TC.white, letterSpacing: -0.5, lineHeight: 1.2, margin: '0 0 8px',
            }}>Contacter l'école</h2>
            <p style={{ fontFamily: fontSans, fontSize: m ? 14.5 : 15, lineHeight: 1.55, color: 'rgba(255,255,255,0.8)', margin: '0 0 26px', letterSpacing: -0.05 }}>
              Par téléphone, WhatsApp ou email choisissez le canal qui vous convient.
            </p>

<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {CT_COORDS.map((c) => (
                <a key={c.k} href={c.href} style={{
                  display: 'flex', alignItems: 'center', gap: 14,
                  padding: m ? '13px 15px' : '14px 18px',
                  background: TC.white, borderRadius: 14,
                  boxShadow: '0 1px 2px rgba(0,0,0,0.05), 0 6px 18px -10px rgba(0,0,0,0.25)',
                  textDecoration: 'none',
                }}>
                  <span style={{
                    flexShrink: 0, width: 42, height: 42, borderRadius: 12,
                    background: TC.sageMist,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <CtIcon name={c.icon} size={19} color={TC.sageDeep} />
                  </span>
                  <span style={{ minWidth: 0, flex: 1 }}>
                    <span style={{ display: 'block', fontFamily: fontMono, fontSize: 10.5, letterSpacing: 0.8, textTransform: 'uppercase', color: TC.ink3 }}>{c.k}</span>
                    <span style={{ display: 'block', fontFamily: fontSans, fontSize: c.icon === 'mail' ? (m ? 14 : 15.5) : (m ? 16 : 17.5), fontWeight: 600, color: TC.ink, letterSpacing: -0.3, marginTop: 3, lineHeight: 1.2, whiteSpace: 'nowrap' }}>{c.v}</span>
                  </span>
                  <svg width="13" height="13" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0 }}>
                    <path d="M5 3l4 4-4 4" stroke={TC.ink3} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </a>
              ))}
              {/* Réseaux sociaux — à la place du lien « Site » */}
              <div style={{
                display: 'flex', alignItems: 'center', gap: 14,
                padding: m ? '16px 0 4px' : '18px 0 4px',
                borderTop: '1px solid rgba(255,255,255,0.14)',
              }}>
                <span style={{
                  flexShrink: 0, width: 42, height: 42, borderRadius: 12,
                  background: 'rgba(255,255,255,0.12)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <CtIcon name="globe" size={19} color={TC.white} />
                </span>
                <span style={{ minWidth: 0 }}>
                  <span style={{ display: 'block', fontFamily: fontMono, fontSize: 10.5, letterSpacing: 0.8, textTransform: 'uppercase', color: 'rgba(255,255,255,0.62)', marginBottom: 8 }}>Suivez-nous</span>
                  <span style={{ display: 'flex', gap: 9 }}>
                    {CT_SOCIALS.map((s) => (
                      <a key={s.name} href={s.href} aria-label={s.name} style={{
                        width: 38, height: 38, borderRadius: 19,
                        background: 'rgba(255,255,255,0.12)', color: TC.white,
                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                        textDecoration: 'none',
                      }}>
                        <span style={{ width: 18, height: 18, display: 'block' }} dangerouslySetInnerHTML={{ __html: s.svg }} />
                      </a>
                    ))}
                  </span>
                </span>
              </div>
            </div>

<div style={{ flex: 1, minHeight: m ? 18 : 24 }} />
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '9px 14px', background: 'rgba(255,255,255,0.12)', borderRadius: 999, alignSelf: 'flex-start' }}>
              <span style={{ width: 7, height: 7, borderRadius: 4, background: '#8fe0a3', display: 'inline-block' }} />
              <span style={{ fontFamily: fontSans, fontSize: 12.5, color: TC.white, fontWeight: 500 }}>Réponse rapide · du lundi au vendredi, 9h–18h</span>
            </div>
          </div>
        </div>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// ORIENTATION
// ════════════════════════════════════════════════════════════
function ContactOrientation({ device }) {
  const m = isMobCt(device);
  return (
    <Section tone="white" padY={m ? [48, 64] : [40, 96]} padX={m ? 22 : 80}>
      <div style={{
        maxWidth: 1180, margin: '0 auto',
        background: TC.off, borderRadius: 24, border: `1px solid ${TC.hair}`,
        padding: m ? '30px 24px' : '52px 56px',
        display: m ? 'flex' : 'grid',
        flexDirection: m ? 'column' : undefined,
        gridTemplateColumns: m ? undefined : '1fr auto',
        gap: m ? 22 : 48, alignItems: 'center',
      }}>
        <div style={{ maxWidth: 640 }}>
          <h2 style={{
            fontFamily: fontSans, fontSize: m ? 24 : 30, fontWeight: 600,
            color: TC.ink, letterSpacing: -0.7, lineHeight: 1.18, margin: '0 0 12px', textWrap: 'balance',
          }}>Vous ne savez pas quelle formation choisir ?</h2>
          <p style={{ fontFamily: fontSans, fontSize: m ? 15.5 : 16.5, lineHeight: 1.6, color: TC.ink2, margin: 0, letterSpacing: -0.05 }}>
            Chaque projet est différent. Vous pouvez nous écrire pour être
            orienté·e vers le parcours le plus adapté : formation Praticien·ne
            naturopathe, Fréquences énergétiques ou modules à la carte.
          </p>
        </div>
        <a href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new Event('tc-open-programme')); }} style={{ textDecoration: 'none', display: m ? 'block' : 'inline-block' }}>
          <span style={{
            height: 54, padding: '0 28px', boxSizing: 'border-box',
            background: TC.sage, color: TC.white, borderRadius: 999,
            fontFamily: fontSans, fontSize: 15.5, fontWeight: 600, letterSpacing: -0.15,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9,
            width: m ? '100%' : 'auto',
            boxShadow: '0 1px 2px rgba(0,0,0,0.06), 0 8px 22px rgba(90,145,105,0.28)',
          }} data-cta="goto:programme">
            Recevoir le programme complet
            <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>
          </span>
        </a>
      </div>
    </Section>
  );
}

// ════════════════════════════════════════════════════════════
// PAGE
// ════════════════════════════════════════════════════════════
function ContactPage({ device }) {
  // Le contenu est rendu côté client (Babel in-browser) : au chargement direct
  // de contact.html#formulaire, l'ancre native du navigateur se déclenche
  // avant que #formulaire 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} />
      <ContactHero device={device} />
      <ContactMain device={device} />
      <ContactOrientation device={device} />
      <Footer device={device} />
    </div>
  );
}

Object.assign(window, { ContactPage });

Contactez l'école{m ? ' ' : } Trainin Center.

Contactez l'école{m ? ' ' :
} Trainin Center.