// ============================================
// FLC — Soutien scolaire (i18n) — modern levels showcase
// ============================================

function SoutienPage() {
  useLang();
  const [tab, setTab] = React.useState('primaire');
  const data = {
    primaire: {
      label: t('sou.pri.label'),
      img: IMG.primaire,
      title: t('sou.pri.title'),
      desc: t('sou.pri.desc'),
      subjects:[t('sou.pri.subj1'),t('sou.pri.subj2'),t('sou.pri.subj3'),t('sou.pri.subj4'),t('sou.pri.subj5'),t('sou.pri.subj6')],
      points:[t('sou.pri.p1'),t('sou.pri.p2'),t('sou.pri.p3'),t('sou.pri.p4'),t('sou.pri.p5')],
      price:'1 800',
      age:'6-11',
      grade:'CP → CM2',
      gradeAr:'الابتدائي',
      color:'#7FC8A9',
      colorSoft:'#E6F4EE',
      icon:'🎒',
    },
    college: {
      label: t('sou.col.label'),
      img: IMG.college,
      title: t('sou.col.title'),
      desc: t('sou.col.desc'),
      subjects:[t('sou.col.s1'),t('sou.col.s2'),t('sou.col.s3'),t('sou.col.s4'),t('sou.col.s5'),t('sou.col.s6'),t('sou.col.s7'),t('sou.col.s8')],
      points:[t('sou.col.p1'),t('sou.col.p2'),t('sou.col.p3'),t('sou.col.p4'),t('sou.col.p5')],
      price:'2 400',
      age:'12-15',
      grade:'1AC → 3AC',
      gradeAr:'الإعدادي',
      color:'#F4A24C',
      colorSoft:'#FFEFD9',
      icon:'📚',
    },
    lycee: {
      label: t('sou.lyc.label'),
      img: IMG.lycee,
      title: t('sou.lyc.title'),
      desc: t('sou.lyc.desc'),
      subjects:[t('sou.lyc.s1'),t('sou.lyc.s2'),t('sou.lyc.s3'),t('sou.lyc.s4'),t('sou.lyc.s5'),t('sou.lyc.s6'),t('sou.lyc.s7'),t('sou.lyc.s8')],
      points:[t('sou.lyc.p1'),t('sou.lyc.p2'),t('sou.lyc.p3'),t('sou.lyc.p4'),t('sou.lyc.p5')],
      price:'3 200',
      age:'15-18',
      grade:'TC · 1Bac · 2Bac',
      gradeAr:'الثانوي',
      color:'#E8806B',
      colorSoft:'#FBE3DD',
      icon:'🎓',
    }
  };
  const d = data[tab];
  const lang = (typeof getLang === 'function') ? getLang() : 'fr';

  return (
    <React.Fragment>
      <FLCObserver/>
      <FLCHeader active="soutien.html"/>
      <main>
        <FLCPageHero
          pillText={t('sou.pill')}
          pillVariant="mint"
          title={t('sou.title1')}
          emText={t('sou.title_em')}
          titleSuffix={` ${t('sou.title2')}`}
          lead={`${t('sou.lead_a')}${t('sou.lead_em')}${t('sou.lead_b')}`}
          primaryCta={{ label: t('sou.cta'), href: 'contact.html' }}
          image={IMG.primaire}
          imageBadge={{ icon: '✏️', label: 'Niveaux', value: 'Primaire · Collège · Lycée' }}
          stats={[
            { label: 'Élèves/groupe', value: '6–10', sub: 'Suivi rapproché', color: 'var(--mint-600)' },
            { label: 'Progrès', value: '+3 pts', sub: 'En moyenne par trimestre', color: 'var(--saffron-dark)' }
          ]}
          blob1={{ color:'#7FC8A9', w:340, h:340, top:-120, right:-80, opacity:0.4 }}
          blob2={{ color:'#F4A24C', w:260, h:260, bottom:-100, left:-60, opacity:0.3 }}
          accent="var(--mint-600)"
        />

        {/* ======== METHOD: 4 STEPS — modern flowing path ======== */}
        <section className="mth-section">
          <div className="mth-bg-blob mth-blob-1"></div>
          <div className="mth-bg-blob mth-blob-2"></div>
          <div className="container" style={{position:'relative'}}>
            <div className="section-head reveal" style={{textAlign:'center'}}>
              <span className="eyebrow" style={{color:'var(--saffron-dark)'}}>{t('sou.method.eyebrow')}</span>
              <h2 className="h-display h2">{t('sou.method.title')}</h2>
              <p className="lead" style={{maxWidth:560,margin:'12px auto 0'}}>
                {(typeof getLang==='function' && getLang()==='ar')
                  ? 'منهجية مجربة وفعّالة. كل خطوة تُبنى على السابقة لتحويل التلميذ من الفهم إلى النجاح المستدام.'
                  : "Une méthodologie éprouvée et efficace. Chaque étape s'appuie sur la précédente pour transformer l'élève de la compréhension à la réussite durable."}
              </p>
            </div>

            {/* Connection line (desktop) */}
            <div className="mth-flow reveal">
              <svg className="mth-line" viewBox="0 0 1200 40" preserveAspectRatio="none" aria-hidden="true">
                <defs>
                  <linearGradient id="mthGrad" x1="0" y1="0" x2="1" y2="0">
                    <stop offset="0%" stopColor="#F4A24C"/>
                    <stop offset="33%" stopColor="#7FC8A9"/>
                    <stop offset="66%" stopColor="#3E4F8F"/>
                    <stop offset="100%" stopColor="#E8806B"/>
                  </linearGradient>
                </defs>
                <path d="M 60 20 Q 300 -10 600 20 T 1140 20" fill="none" stroke="url(#mthGrad)" strokeWidth="2" strokeDasharray="6 8" strokeLinecap="round"/>
              </svg>

              <div className="mth-grid">
                {[
                  {n:'01',t:t('sou.m1.t'),d:t('sou.m1.d'),c:'#F4A24C',cs:'#FFEFD9',icon:'🧠'},
                  {n:'02',t:t('sou.m2.t'),d:t('sou.m2.d'),c:'#7FC8A9',cs:'#E6F4EE',icon:'💪'},
                  {n:'03',t:t('sou.m3.t'),d:t('sou.m3.d'),c:'#3E4F8F',cs:'#E4E8F4',icon:'🎯'},
                  {n:'04',t:t('sou.m4.t'),d:t('sou.m4.d'),c:'#E8806B',cs:'#FBE3DD',icon:'🏆'},
                ].map((m,i)=>(
                  <div key={i} className="mth-card reveal" style={{'--c':m.c,'--cs':m.cs,animationDelay:`${i*0.08}s`}}>
                    <div className="mth-orb">
                      <div className="mth-orb-ring"></div>
                      <div className="mth-orb-inner">
                        <span className="mth-icon">{m.icon}</span>
                      </div>
                      <div className="mth-num">{m.n}</div>
                    </div>
                    <div className="mth-body">
                      <h4 className="h-display mth-title">{m.t}</h4>
                      <p className="mth-desc">{m.d}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <style>{`
            .mth-section {
              padding: 64px 0 !important;
              background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
              position: relative;
              overflow: hidden;
            }
            @media (min-width: 768px) { .mth-section { padding: 96px 0 !important; } }
            .mth-bg-blob {
              position: absolute;
              border-radius: 50%;
              filter: blur(100px);
              opacity: 0.25;
              pointer-events: none;
            }
            .mth-blob-1 { width: 360px; height: 360px; background: #F4A24C; top: -100px; right: -120px; }
            .mth-blob-2 { width: 320px; height: 320px; background: #7FC8A9; bottom: -100px; left: -100px; }

            .mth-flow { position: relative; margin-top: 56px; }
            .mth-line {
              display: none;
              position: absolute;
              top: 60px;
              left: 0; right: 0;
              width: 100%;
              height: 40px;
              z-index: 0;
              pointer-events: none;
              animation: mthDash 30s linear infinite;
            }
            @keyframes mthDash { to { stroke-dashoffset: -200; } }
            @media (min-width: 1024px) { .mth-line { display: block; } }

            .mth-grid {
              display: grid;
              grid-template-columns: 1fr;
              gap: 22px;
              position: relative;
              z-index: 1;
            }
            @media (min-width: 640px) { .mth-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
            @media (min-width: 1024px) { .mth-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

            .mth-card {
              background: white;
              border-radius: var(--r-2xl);
              padding: 28px 22px 26px;
              box-shadow: 0 4px 20px -10px rgba(20,28,66,.08), 0 1px 3px rgba(20,28,66,.04);
              position: relative;
              transition: all 0.4s cubic-bezier(.2,.7,.3,1.1);
              animation: mthFade 0.6s both;
              border: 1px solid var(--ink-100);
              overflow: hidden;
              text-align: center;
            }
            @keyframes mthFade {
              from { opacity: 0; transform: translateY(20px); }
              to { opacity: 1; transform: translateY(0); }
            }
            .mth-card::before {
              content: '';
              position: absolute;
              inset: 0;
              background: radial-gradient(circle at 50% 0%, var(--cs) 0%, transparent 60%);
              opacity: 0.6;
              pointer-events: none;
              transition: opacity 0.4s;
            }
            .mth-card:hover {
              transform: translateY(-8px);
              box-shadow: 0 24px 50px -20px var(--c), 0 4px 12px -4px rgba(20,28,66,.1);
              border-color: var(--c);
            }
            .mth-card:hover::before { opacity: 1; }
            .mth-card:hover .mth-orb-ring {
              transform: scale(1.1) rotate(180deg);
              opacity: 1;
            }
            .mth-card:hover .mth-icon { transform: scale(1.2) rotate(-8deg); }

            /* Orb */
            .mth-orb {
              position: relative;
              width: 96px;
              height: 96px;
              margin: 0 auto 18px;
              z-index: 1;
            }
            .mth-orb-ring {
              position: absolute;
              inset: -6px;
              border-radius: 50%;
              border: 2px dashed var(--c);
              opacity: 0.4;
              transition: all 0.6s cubic-bezier(.2,.7,.3,1.1);
            }
            .mth-orb-inner {
              position: absolute;
              inset: 0;
              border-radius: 50%;
              background: linear-gradient(135deg, var(--cs) 0%, white 100%);
              border: 1px solid var(--ink-100);
              display: grid;
              place-items: center;
              box-shadow: inset 0 -8px 20px rgba(20,28,66,.04);
            }
            .mth-icon {
              font-size: 38px;
              transition: transform 0.4s cubic-bezier(.34,1.56,.64,1);
              display: inline-block;
            }
            .mth-num {
              position: absolute;
              top: -4px; right: -4px;
              width: 32px; height: 32px;
              background: var(--c);
              color: white;
              border-radius: 50%;
              display: grid; place-items: center;
              font-family: var(--font-display);
              font-size: 13px;
              font-weight: 700;
              box-shadow: 0 4px 12px -2px var(--c);
              border: 3px solid white;
            }
            html[dir="rtl"] .mth-num { right: auto; left: -4px; }

            /* Body */
            .mth-body { position: relative; z-index: 1; }
            .mth-title {
              font-size: 22px;
              font-weight: 600;
              color: var(--indigo-900);
              line-height: 1.2;
            }
            .mth-desc {
              font-size: 13.5px;
              color: var(--ink-700);
              margin-top: 8px;
              line-height: 1.55;
            }

            html[dir="rtl"] .mth-num { right: auto; left: -4px; }
          `}</style>
        </section>

        {/* ======== MODERN LEVELS SHOWCASE ======== */}
        <section className="lvl-section" style={{background:`linear-gradient(180deg, var(--cream) 0%, ${d.colorSoft} 100%)`,transition:'background 0.6s ease'}}>
          <div className="container">
            <div className="section-head reveal" style={{textAlign:'center'}}>
              <span className="eyebrow" style={{color:d.color,transition:'color 0.3s'}}>{t('sou.lvl.eyebrow')}</span>
              <h2 className="h-display h2">{t('sou.lvl.title')}</h2>
              <p className="lead" style={{maxWidth:560,margin:'12px auto 0'}}>
                {lang === 'ar'
                  ? 'ثلاثة مسارات، ثلاث مراحل من الحياة المدرسية. اختر المستوى لاكتشاف البرنامج الكامل، المواد والإيقاع.'
                  : "Trois parcours, trois moments de la vie scolaire. Choisissez le niveau pour découvrir le programme complet, les matières et le rythme."}
              </p>
            </div>

            {/* Level selector cards */}
            <div className="lvl-selector reveal">
              {Object.keys(data).map(k=>{
                const it = data[k];
                const isActive = tab === k;
                return (
                  <button
                    key={k}
                    className={`lvl-pick ${isActive?'active':''}`}
                    onClick={()=>setTab(k)}
                    style={{
                      '--c': it.color,
                      '--cs': it.colorSoft,
                    }}
                  >
                    <div className="lvl-pick-icon">{it.icon}</div>
                    <div className="lvl-pick-body">
                      <div className="lvl-pick-grade">{lang==='ar'?it.gradeAr:it.grade}</div>
                      <div className="lvl-pick-label">{it.label.replace(/^[^\s]+\s/, '')}</div>
                      <div className="lvl-pick-age">
                        <span style={{opacity:.6,marginRight:4}}>•</span>{it.age} {lang==='ar'?'سنة':'ans'}
                      </div>
                    </div>
                    <div className="lvl-pick-arrow"><I.Arrow size={14}/></div>
                  </button>
                );
              })}
            </div>

            {/* Active level showcase */}
            <div className="lvl-showcase reveal" key={tab}>
              <div className="lvl-showcase-img">
                <img src={d.img} alt=""/>
                <div className="lvl-showcase-overlay">
                  <div className="lvl-showcase-badge" style={{background:d.color}}>
                    <span style={{fontSize:24}}>{d.icon}</span>
                  </div>
                  <div className="lvl-showcase-meta">
                    <div className="lvl-showcase-grade">{lang==='ar'?d.gradeAr:d.grade}</div>
                    <div className="lvl-showcase-age">{d.age} {lang==='ar'?'سنة':'ans'}</div>
                  </div>
                </div>
                <div className="lvl-price-tag">
                  <div className="lvl-price-label">{t('sou.price.label')}</div>
                  <div className="lvl-price-amount">
                    <span className="lvl-price-num">{d.price}</span>
                    <span className="lvl-price-unit">{t('sou.price.unit')}</span>
                  </div>
                </div>
              </div>
              <div className="lvl-showcase-body">
                <h3 className="h-display" style={{fontSize:'clamp(22px,4vw,30px)',fontWeight:600,color:'var(--indigo-900)',lineHeight:1.2}}>{d.title}</h3>
                <p style={{color:'var(--ink-700)',marginTop:14,fontSize:15,lineHeight:1.65}}>{d.desc}</p>

                <div className="lvl-subjects">
                  <div className="lvl-section-label" style={{color:d.color}}>
                    <span className="lvl-section-dot" style={{background:d.color}}></span>
                    {t('sou.subj.label')}
                  </div>
                  <div className="lvl-subj-chips">
                    {d.subjects.map((s,i)=>(
                      <span key={s} className="lvl-chip" style={{animationDelay:`${i*0.05}s`}}>{s}</span>
                    ))}
                  </div>
                </div>

                <div className="lvl-points">
                  <div className="lvl-section-label" style={{color:d.color}}>
                    <span className="lvl-section-dot" style={{background:d.color}}></span>
                    {lang==='ar'?'ما يميز هذا البرنامج':'Ce qui rend ce programme unique'}
                  </div>
                  <ul className="lvl-points-list">
                    {d.points.map((p,i)=>(
                      <li key={i} style={{animationDelay:`${i*0.06}s`}}>
                        <span className="lvl-check" style={{background:d.colorSoft,color:d.color}}><I.Check size={14}/></span>
                        <span>{p}</span>
                      </li>
                    ))}
                  </ul>
                </div>

                <a href="contact.html" className="lvl-cta" style={{background:d.color}}>
                  {lang==='ar'?`احجز حصة في ${d.gradeAr}`:`Réserver une séance · ${data[tab].label.replace(/^[^\s]+\s/, '')}`}
                  <I.Arrow size={16}/>
                </a>
              </div>
            </div>
          </div>

          <style>{`
            .lvl-section { padding: 64px 0 !important; }
            @media (min-width: 768px) { .lvl-section { padding: 88px 0 !important; } }

            /* Level picker */
            .lvl-selector {
              display: grid;
              grid-template-columns: 1fr;
              gap: 12px;
              margin: 32px auto 36px;
              max-width: 920px;
            }
            @media (min-width: 768px) {
              .lvl-selector { grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 40px auto 48px; }
            }
            .lvl-pick {
              display: flex;
              align-items: center;
              gap: 14px;
              padding: 18px 18px;
              background: white;
              border: 2px solid var(--ink-100);
              border-radius: var(--r-lg);
              text-align: start;
              transition: all 0.35s cubic-bezier(.2,.7,.3,1.1);
              position: relative;
              overflow: hidden;
              cursor: pointer;
            }
            .lvl-pick::before {
              content: '';
              position: absolute;
              inset: 0;
              background: linear-gradient(135deg, var(--cs) 0%, transparent 70%);
              opacity: 0;
              transition: opacity 0.35s;
              pointer-events: none;
            }
            .lvl-pick:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--c); }
            .lvl-pick:hover::before { opacity: 1; }
            .lvl-pick.active {
              border-color: var(--c);
              background: white;
              box-shadow: 0 14px 30px -12px var(--c), 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent);
              transform: translateY(-2px);
            }
            .lvl-pick.active::before { opacity: 1; }
            .lvl-pick-icon {
              width: 52px; height: 52px;
              border-radius: 14px;
              background: var(--cs);
              display: grid; place-items: center;
              font-size: 26px;
              flex-shrink: 0;
              transition: transform 0.35s;
              position: relative; z-index: 1;
            }
            .lvl-pick.active .lvl-pick-icon { background: var(--c); transform: scale(1.05) rotate(-4deg); }
            .lvl-pick-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
            .lvl-pick-grade {
              font-family: var(--font-display);
              font-size: 13px; font-weight: 700;
              color: var(--c);
              letter-spacing: 0.06em;
              text-transform: uppercase;
            }
            .lvl-pick-label {
              font-size: 16px; font-weight: 600;
              color: var(--indigo-900);
              margin-top: 2px;
              line-height: 1.2;
            }
            .lvl-pick-age {
              font-size: 12px;
              color: var(--ink-500);
              margin-top: 4px;
            }
            .lvl-pick-arrow {
              flex-shrink: 0;
              width: 32px; height: 32px;
              border-radius: 50%;
              background: var(--cream);
              color: var(--ink-700);
              display: grid; place-items: center;
              transition: all 0.3s;
              position: relative; z-index: 1;
            }
            .lvl-pick.active .lvl-pick-arrow { background: var(--c); color: white; transform: translateX(4px); }
            html[dir="rtl"] .lvl-pick.active .lvl-pick-arrow { transform: translateX(-4px) scaleX(-1); }
            html[dir="rtl"] .lvl-pick-arrow svg { transform: scaleX(-1); }

            /* Showcase */
            .lvl-showcase {
              background: white;
              border-radius: var(--r-2xl);
              overflow: hidden;
              box-shadow: var(--shadow-xl);
              display: grid;
              grid-template-columns: 1fr;
              animation: lvlFade 0.5s ease;
            }
            @keyframes lvlFade {
              from { opacity: 0; transform: translateY(12px); }
              to { opacity: 1; transform: translateY(0); }
            }
            @media (min-width: 900px) {
              .lvl-showcase { grid-template-columns: 0.9fr 1.1fr; }
            }
            .lvl-showcase-img {
              position: relative;
              aspect-ratio: 4/3.2;
              overflow: hidden;
            }
            @media (min-width: 900px) {
              .lvl-showcase-img { aspect-ratio: auto; min-height: 100%; }
            }
            .lvl-showcase-img img {
              width: 100%; height: 100%; object-fit: cover;
              transition: transform 8s ease;
            }
            .lvl-showcase:hover .lvl-showcase-img img { transform: scale(1.05); }
            .lvl-showcase-overlay {
              position: absolute;
              top: 16px; left: 16px;
              display: flex; align-items: center; gap: 10px;
              background: rgba(255,255,255,.95);
              backdrop-filter: blur(8px);
              padding: 8px 14px 8px 8px;
              border-radius: 999px;
              box-shadow: var(--shadow-md);
            }
            html[dir="rtl"] .lvl-showcase-overlay { left: auto; right: 16px; padding: 8px 8px 8px 14px; }
            .lvl-showcase-badge {
              width: 36px; height: 36px;
              border-radius: 50%;
              display: grid; place-items: center;
              color: white;
              flex-shrink: 0;
            }
            .lvl-showcase-meta { min-width: 0; }
            .lvl-showcase-grade {
              font-family: var(--font-display);
              font-size: 11px; font-weight: 700;
              letter-spacing: 0.06em;
              text-transform: uppercase;
              color: var(--ink-500);
              line-height: 1;
              white-space: nowrap;
            }
            .lvl-showcase-age {
              font-weight: 700;
              font-size: 14px;
              color: var(--indigo-900);
              line-height: 1;
              margin-top: 4px;
              white-space: nowrap;
            }
            .lvl-price-tag {
              position: absolute;
              bottom: 16px; right: 16px;
              background: var(--indigo-900);
              color: white;
              padding: 12px 18px;
              border-radius: var(--r-md);
              box-shadow: var(--shadow-lg);
            }
            html[dir="rtl"] .lvl-price-tag { right: auto; left: 16px; }
            .lvl-price-label {
              font-size: 10px;
              font-weight: 700;
              letter-spacing: 0.1em;
              text-transform: uppercase;
              opacity: 0.7;
            }
            .lvl-price-amount {
              display: flex;
              align-items: baseline;
              gap: 6px;
              margin-top: 2px;
            }
            .lvl-price-num {
              font-family: var(--font-display);
              font-size: 26px;
              font-weight: 700;
              line-height: 1;
            }
            .lvl-price-unit { font-size: 11px; opacity: 0.7; }

            /* Body */
            .lvl-showcase-body {
              padding: 28px 24px 32px;
              display: flex;
              flex-direction: column;
              gap: 22px;
            }
            @media (min-width: 768px) {
              .lvl-showcase-body { padding: 40px 36px 40px; gap: 26px; }
            }
            .lvl-section-label {
              display: inline-flex;
              align-items: center;
              gap: 8px;
              font-size: 11px;
              font-weight: 700;
              letter-spacing: 0.12em;
              text-transform: uppercase;
              margin-bottom: 12px;
            }
            .lvl-section-dot {
              width: 6px; height: 6px;
              border-radius: 50%;
            }
            .lvl-subj-chips {
              display: flex;
              flex-wrap: wrap;
              gap: 6px;
            }
            .lvl-chip {
              padding: 6px 12px;
              background: var(--cream);
              border: 1px solid var(--ink-100);
              border-radius: 999px;
              font-size: 12px;
              font-weight: 500;
              color: var(--ink-900);
              animation: chipIn 0.4s both;
            }
            @keyframes chipIn {
              from { opacity: 0; transform: scale(0.85); }
              to { opacity: 1; transform: scale(1); }
            }
            .lvl-points-list {
              list-style: none;
              display: flex;
              flex-direction: column;
              gap: 10px;
            }
            .lvl-points-list li {
              display: flex;
              gap: 12px;
              align-items: flex-start;
              font-size: 14px;
              color: var(--ink-900);
              line-height: 1.55;
              animation: chipIn 0.5s both;
            }
            .lvl-check {
              flex-shrink: 0;
              width: 24px; height: 24px;
              border-radius: 50%;
              display: grid; place-items: center;
              margin-top: 1px;
            }
            .lvl-cta {
              display: inline-flex;
              align-items: center;
              gap: 10px;
              padding: 14px 22px;
              border-radius: var(--r-md);
              color: white;
              font-weight: 600;
              font-size: 14px;
              align-self: flex-start;
              transition: all 0.25s;
              box-shadow: var(--shadow-md);
            }
            .lvl-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); gap: 14px; }
            html[dir="rtl"] .lvl-cta svg { transform: scaleX(-1); }
          `}</style>
        </section>

        <HomeCTA/>
      </main>
      <FLCFooter/>
      <FLCSticky/>
      <FLCFab/>
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<SoutienPage/>);