/* Sam's article — How to Hang Something Heavy Without Asking Anyone for Help
 * Renders into #render-target. Source content: scripts/insert-sam-post.ts.
 * Format: Sam editorial (patchhole.jsx) — Hero, Lede, WhatYouNeed, Steps, HotTakes, Redo, Comments, Signoff.
 */

const { useState } = React;

const SamSays = ({ children }) => (
  <div className="sa-step-says">
    <span className="who">— Sam</span>
    <p>{children}</p>
  </div>
);

/* ============ CRUMBS ============ */
const Crumbs = () => (
  <nav className="sa-crumbs" aria-label="Breadcrumb">
    <div className="l">
      <a href="/">Accueil</a>
      <span>/</span>
      <a href="/fr/contributors/sam/">Sam</a>
      <span>/</span>
      <span>How-to</span>
      <span>/</span>
      <span style={{ color: "#EFE5CF" }}>Accrocher un objet lourd</span>
    </div>
    <div className="r">
      <span>Numéro 04 · Printemps '26</span>
      <span className="by">écrit par Sam ✦</span>
    </div>
  </nav>
);

/* ============ HERO ============ */
const Hero = () => (
  <section className="sa-hero">
    <div
      className="img"
      style={{
        backgroundImage:
          "url('https://images.unsplash.com/photo-1581244277943-fe4a9c777189?w=2000&q=80')",
      }}
    />
    <div className="sa-hero-wrap">
      <div>
        <div className="sa-hero-kicker">
          <span>How-to</span>
          <span className="dot">●</span>
          <span>N° 02</span>
          <span className="dot">●</span>
          <span className="sig">écrit par Sam</span>
        </div>
        <h1>
          Comment accrocher <em>un objet lourd</em> sans demander d'aide à personne
        </h1>
        <p className="standfirst">
          Le mur ne va pas gagner. Détecteur de montants, la bonne cheville, un niveau, un trou pilote pré-percé, et la discipline de prendre du recul avant de décider que c'est de travers. Six étapes, 45 minutes, pas besoin d'une deuxième personne.
        </p>
      </div>
      <div className="sa-hero-side">
        <div className="row">
          <span>Temps</span>
          <span className="v">~45 min <span style={{opacity:0.5}}>+ rebouchage, le cas échéant</span></span>
        </div>
        <div className="row">
          <span>Coût</span>
          <span className="v">8–15 $</span>
        </div>
        <div className="row">
          <span>Niveau</span>
          <span className="v">Obstinément faisable</span>
        </div>
        <div className="row">
          <span>Niveau de chantier</span>
          <span className="v warn">●○○ Poussière</span>
        </div>
        <div className="row">
          <span>Mis à jour</span>
          <span className="v">Printemps '26</span>
        </div>
      </div>
    </div>
    <div className="sa-hero-scribble">
      pas de deuxième personne. <u>promis</u>.
      <svg viewBox="0 0 60 30" fill="none">
        <path d="M2 22 C 12 8, 28 4, 56 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
        <path d="M48 6 L 56 12 L 50 20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      </svg>
    </div>
  </section>
);

/* ============ LEDE ============ */
const Lede = () => (
  <section className="sa-lede">
    <div className="sa-lede-wrap">
      <aside className="sa-lede-side">
        <div className="marker">Dans cet article</div>
        <ul>
          <li>Le miroir qui se déplace</li>
          <li>Ce qu'il te faut vraiment</li>
          <li>Les 6 étapes</li>
          <li>Hot takes</li>
          <li>Ce que je ferais différemment</li>
        </ul>
      </aside>

      <div className="sa-lede-body">
        <p className="dropcap">
          Tu déplaces ce miroir de pièce en pièce depuis trois semaines parce que tu n'arrives pas à décider où il va. Tu as décidé. <em>Il va là.</em> Sur ce mur. Aujourd'hui.
        </p>

        <p>
          Et tu ne demandes à personne de t'aider à le faire. Tu n'as pas besoin d'une deuxième personne. Tu as besoin d'un détecteur de montants, de la bonne cheville, d'un niveau, et de la discipline de <strong>prendre du recul avant de décider que c'est de travers.</strong> Tout le projet prend quarante-cinq minutes si tu fais bien et deux heures si tu dois reboucher un trou — et on va faire bien.
        </p>

        <div className="sa-pullquote">
          <p>
            Le placo seul ne tient pas une vis sous une charge réelle. Le mur, c'est du gypse et du papier. Les montants sont en bois. Trouve le bois, ou utilise une vraie cheville.
          </p>
        </div>

        <p>
          Cette phrase est tout l'article. Le reste, c'est juste comment trouver le bois, ce qui compte comme une vraie cheville, et pourquoi tu devrais acheter un niveau à quatre dollars au lieu de te fier à tes yeux.
        </p>
      </div>

      <aside className="sa-margin">
        <span className="lab">Note de Sam</span>
        <h4>Avant de percer où que ce soit</h4>
        <p>
          Si ta maison a été construite avant 1980, le mur peut être en plâtre et lattes, pas en placo. <em>Chevilles différentes.</em> Règles différentes. Si en tapant ça sonne sourd-toc-sourd-toc tout du long, c'est du plâtre — arrête et cherche les chevilles à plâtre.
        </p>
      </aside>
    </div>
  </section>
);

/* ============ WHAT YOU NEED ============ */
const WhatYouNeed = () => (
  <section className="sa-need">
    <div className="sa-need-wrap">
      <div>
        <div className="sa-need-head">§ 01 / Outils</div>
        <h2>
          Ce qu'il te faut <em>vraiment</em>
        </h2>
        <p className="body">
          Budget total&nbsp;: <strong>8–15 $</strong> de matériel. La majeure partie du coût, c'est le niveau — et le niveau, c'est le truc que tu utiliseras sur chaque projet du reste de ta vie. <strong>Achète le niveau à quatre dollars.</strong>
        </p>

        <div className="sa-need-dont">
          <span className="lab">Pas la peine de prendre</span>
          <ul>
            <li>
              Les chevilles en plastique fournies dans la boîte
              <span className="why">Décoratives au mieux. Les boulons à bascule, c'est la solution.</span>
            </li>
            <li>
              Faire le niveau à l'œil
              <span className="why">Tu sauras. Tous les jours. Pendant des années.</span>
            </li>
            <li>
              Planter un clou et espérer
              <span className="why">Pour un cadre de moins d'un kilo, OK. Pour quelque chose de lourd, non.</span>
            </li>
          </ul>
        </div>
      </div>

      <ul className="sa-need-list">
        <li>
          <span className="item">
            Détecteur de montants (ou ta jointure)
            <span className="why">8–15 $ pour le moins cher. Ou utilise le test de la jointure gratuitement.</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Perceuse (sans fil, n'importe quelle taille)
            <span className="why">Emprunte si tu n'en possèdes pas. N'achète pas une à 300 $ pour accrocher un miroir.</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Niveau à bulle (60 cm ou plus)
            <span className="why">4 $ dans n'importe quel magasin de bricolage. Les meilleurs quatre dollars que tu dépenseras sur ce projet.</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Boulons à bascule OU chevilles à expansion filetées
            <span className="why">Homologuées pour le double du poids que tu accroches. Lis l'étiquette.</span>
          </span>
          <span className="qty">×2–4</span>
        </li>
        <li>
          <span className="item">
            Une bonne vis, longueur adaptée à ta cheville
            <span className="why">Vient avec le paquet de chevilles d'habitude.</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Crayon
            <span className="why">Pour marquer les montants et l'endroit. Pas un Sharpie. Crayon.</span>
          </span>
          <span className="qty">×1</span>
        </li>
        <li>
          <span className="item">
            Café
            <span className="why">Non négociable.</span>
          </span>
          <span className="qty">×1 mug</span>
        </li>
      </ul>
    </div>
  </section>
);

/* ============ STEPS ============ */
const STEPS = [
  {
    n: "01",
    phase: "Trouver · 5 min",
    title: "Trouve d'abord le montant. Toujours.",
    flip: false,
    body: (
      <>
        <p>
          Tape le long du mur avec ta jointure jusqu'à ce que le son passe de <em>creux</em> à <em>plein</em>. C'est le montant. C'est ton meilleur ami là maintenant. Un détecteur de montants marche aussi — mais honnêtement ta jointure est gratuite et déjà attachée à toi.
        </p>
        <p>
          Les montants sont typiquement <strong>espacés de quarante centimètres entraxe.</strong> Une fois que tu en as trouvé un, tu peux généralement trouver le suivant sans vérifier. Marque chacun au crayon pour ne pas perdre le fil quand tu commences à percer.
        </p>
      </>
    ),
    tip: { lab: "Jointure vs détecteur de montants", text: "Le test de la jointure est plus rapide et gratuit, mais les détecteurs de montants sont plus fiables sur les murs en plâtre et les murs avec isolation. Si tu débutes, achète le détecteur à 10 $. Il s'amortit dès la première fois qu'il t'évite un trou." },
    fig: {
      img: "https://images.unsplash.com/photo-1503602642458-232111445657?w=1200&q=80",
      tag: "Fig 01 · Le montant",
      cap: "du bois, derrière le gypse.",
    },
    says: "Marque chaque montant que tu trouves, pas seulement celui que tu utilises. Tu en auras besoin la prochaine fois.",
  },
  {
    n: "02",
    phase: "Cheville · 5 min",
    title: "S'il n'y a pas de montant là où tu en as besoin, utilise la bonne cheville.",
    flip: true,
    body: (
      <>
        <p>
          Toutes les chevilles murales ne sont pas les mêmes. Les petites en plastique qui viennent dans la boîte avec le truc que tu as acheté sont généralement <em>de la merde</em>. Prends un boulon à bascule ou une cheville à expansion filetée homologuée pour plus de poids que ce que tu accroches.
        </p>
        <p>
          <strong>Double-le.</strong> Ne fais confiance à rien. L'étiquette sur la cheville te dit la charge nominale — lis-la avant d'acheter. Un miroir lourd pèse plus que tu ne penses. Un miroir plus un gosse qui tire dessus pèse encore plus.
        </p>
      </>
    ),
    warn: { lab: "Attention", text: "Si tu accroches une patère qui va tenir de vrais manteaux, va dans un montant. Pas de cheville. Les patères lâchent dramatiquement — elles prennent plus de poids que tu ne t'attends, et le mode de défaillance, c'est la patère qui arrache un morceau de mur." },
    fig: {
      img: "https://images.unsplash.com/photo-1581244277943-fe4a9c777189?w=1200&q=80",
      tag: "Fig 02 · La cheville",
      cap: "métal, filetée, homologuée.",
    },
  },
  {
    n: "03",
    phase: "Niveau · 1 min",
    title: "Utilise un niveau.",
    flip: false,
    body: (
      <>
        <p>
          Je sais que tu penses pouvoir le faire à l'œil. <em>Tu ne peux pas.</em> Personne ne peut. <strong>Utilise le niveau.</strong> Passe les quarante secondes en plus. Tu vas fixer ce truc tous les jours et tu sauras s'il est à un demi-degré près.
        </p>
        <p>
          Le niveau coûte quatre dollars dans n'importe quel magasin de bricolage. C'est les meilleurs quatre dollars que tu peux dépenser sur ce projet. Si tu n'en possèdes pas encore, achètes-en un avant de faire quoi que ce soit d'autre dans cet article.
        </p>
      </>
    ),
    tip: { lab: "Apps niveau pour téléphone", text: "Elles marchent, mais elles sont plus lentes qu'un vrai niveau à bulle et elles t'obligent à tenir le téléphone bien droit. Le niveau à bulle est plus rapide, plus précis, et n'a pas besoin d'être chargé. Prends le niveau à bulle." },
    fig: {
      img: "https://images.unsplash.com/photo-1503602642458-232111445657?w=1200&q=80",
      tag: "Fig 03 · Le niveau",
      cap: "l'assurance la moins chère que tu achèteras.",
    },
    says: "Pose le niveau sur le dessus du cadre du miroir, pas sur le mur. Le miroir, c'est ce que les gens vont voir. Le mur, c'est ce que les gens ne verront pas.",
  },
  {
    n: "04",
    phase: "Perçage · 2 min",
    title: "Pré-perce le trou pilote.",
    flip: true,
    body: (
      <>
        <p>
          Ne force pas la vis directement dans le placo. Pré-perce un trou pilote légèrement plus petit que ta vis. <em>Elle entre plus proprement. Elle tient mieux. Le mur la respecte plus.</em>
        </p>
        <p>
          Si tu utilises une cheville, la boîte de la cheville te dit quel foret utiliser — fais-le exactement. Si tu vas dans un montant, un trou pilote de 1,5&nbsp;mm suffit largement.
        </p>
      </>
    ),
    warn: { lab: "Si tu touches quelque chose de dur", text: "Arrête. Immédiatement. C'est soit un tuyau, soit un fil et aucun des deux n'est ton ami aujourd'hui. Sors, déplace-toi de dix centimètres, réessaie. Le mur a des trucs à l'intérieur et les trucs à l'intérieur sont plus importants que le miroir." },
    fig: {
      img: "https://images.unsplash.com/photo-1572297870735-d68a30c0e603?w=1200&q=80",
      tag: "Fig 04 · Le pilote",
      cap: "petit, délibéré, intentionnel.",
    },
  },
  {
    n: "05",
    phase: "Accrochage · 5 min",
    title: "Accroche-le. Recule. Ne touche pas.",
    flip: false,
    body: (
      <>
        <p>
          Accroche le truc. Recule. <em>Regarde-le pendant dix secondes avant de décider que c'est de travers.</em>
        </p>
        <p>
          Ce n'est probablement pas de travers. Tu n'es juste pas habitué à ce qu'il soit là. Si ça t'embête encore après dix secondes et qu'un niveau confirme une inclinaison, alors ajuste. <strong>Si tu as ajusté parce que ça « semblait » de travers et que le niveau dit que c'est bon, tu l'as rendu vraiment de travers.</strong> Fais confiance au niveau plus qu'à tes yeux.
        </p>
      </>
    ),
    tip: { lab: "Prends une photo", text: "De l'autre bout de la pièce, avec le flash. L'appareil photo verra ce que tes yeux ne peuvent pas — légères inclinaisons, illusions de parallaxe, poussière. Ajuste sur la base de la photo, pas de la vue en personne. La photo, c'est ce que les gens verront en entrant." },
    fig: {
      img: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1200&q=80",
      tag: "Fig 05 · L'accrochage",
      cap: "règle des dix secondes. toujours.",
    },
    says: "Si tu ajustes trois fois, arrête. Va-t'en. Fais du café. Reviens dans cinq minutes. Tes yeux se recalibrent.",
  },
  {
    n: "06",
    phase: "Fini",
    title: "Le moment de la victoire.",
    flip: true,
    body: (
      <>
        <p>
          C'est en place. C'est de niveau. Rien n'est tombé. <em>Tu n'as demandé d'aide à personne et tu n'avais pas besoin.</em>
        </p>
        <p>
          <strong>C'est tout le truc.</strong> Prends une photo. Envoie-la à qui doutait de toi. Passe à autre chose dans ta vie. Il y a un truc spécifiquement satisfaisant à accrocher un objet lourd seul — plus grand que le projet, plus petit qu'une expérience religieuse. Reste assis avec ça une seconde.
        </p>
      </>
    ),
    fig: {
      img: "https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=1200&q=80",
      tag: "Fig 06 · La victoire",
      cap: "le mur n'a pas gagné.",
    },
    says: "Si c'est un miroir, la première chose que tu vois dedans, c'est ton visage après avoir accroché un miroir toute seule. C'est un beau visage.",
  },
];

const Step = ({ data }) => (
  <article className={`sa-step ${data.flip ? "flip" : ""}`}>
    <div className="sa-step-text">
      <div className="sa-step-meta">
        <span className="sa-step-num">{data.n}</span>
        <span className="sa-step-phase">{data.phase}</span>
      </div>
      <h3>{data.title}</h3>
      <div className="sa-step-body">{data.body}</div>
      {data.tip && (
        <div className="sa-step-tip">
          <span className="lab">{data.tip.lab}</span>
          <p>{data.tip.text}</p>
        </div>
      )}
      {data.warn && (
        <div className="sa-step-warn">
          <span className="lab">{data.warn.lab}</span>
          <p>{data.warn.text}</p>
        </div>
      )}
    </div>
    <figure className="sa-step-fig">
      <div className="frame">
        <span className="tag">{data.fig.tag}</span>
        <img src={data.fig.img} alt="" loading="lazy" />
      </div>
      <figcaption>{data.fig.cap}</figcaption>
      {data.says && <SamSays>{data.says}</SamSays>}
    </figure>
  </article>
);

const Steps = () => (
  <section className="sa-steps">
    <div className="sa-steps-wrap">
      <header className="sa-steps-head">
        <h2>
          Les <em>six</em> étapes
        </h2>
        <span className="count">06 ÉTAPES · ≈45 MIN ACTIVES</span>
      </header>
      {STEPS.map((s) => (
        <Step key={s.n} data={s} />
      ))}
    </div>
  </section>
);

/* ============ HOT TAKES ============ */
const HotTakes = () => (
  <section className="sa-hottakes">
    <div className="sa-hottakes-wrap">
      <header className="sa-hottakes-head">
        <span className="lab">Les hot takes de Sam</span>
        <h2>
          Des choses dont je suis <em>fatiguée</em> de voir
        </h2>
      </header>
      <div className="sa-hottakes-list">
        <div className="sa-take">
          <div className="num">i.</div>
          <h3>Faire confiance à la cheville en plastique de la boîte</h3>
          <p>
            Elles sont venues gratuites avec le truc que tu as acheté. Elles sont gratuites pour une raison. Les boulons à bascule coûtent deux dollars. Le miroir coûte plus que deux dollars. Les maths.
          </p>
        </div>
        <div className="sa-take">
          <div className="num">ii.</div>
          <h3>Accrocher sans trouver le montant d'abord</h3>
          <p>
            Même si tu finis par utiliser une cheville, savoir où sont les montants te dit où sont les <em>non</em>-montants. Percer dans un tuyau parce que tu as sauté la vérif des montants, c'est une erreur à mille dollars.
          </p>
        </div>
        <div className="sa-take">
          <div className="num">iii.</div>
          <h3>« Je vais juste utiliser un clou »</h3>
          <p>
            Pour une carte postale, OK. Pour quoi que ce soit qui casse en tombant, non. Les clous s'arrachent direct sous charge. Les vis se vissent. Le filetage, c'est tout l'intérêt.
          </p>
        </div>
        <div className="sa-take">
          <div className="num">iv.</div>
          <h3>Demander à quelqu'un de « tenir ça une seconde »</h3>
          <p>
            Ils ne peuvent pas lire un niveau depuis ton angle. Ils se fatiguent en huit secondes. Ils veulent faire littéralement n'importe quoi d'autre. <em>Accroche-le toi-même.</em> C'est de ça que parle cet article.
          </p>
        </div>
      </div>
    </div>
  </section>
);

/* ============ WHAT I'D DO DIFFERENTLY ============ */
const Redo = () => (
  <section className="sa-redo">
    <div className="sa-redo-wrap">
      <aside className="sa-redo-side">
        ce que je ferais
        <br />
        <em style={{ color: "#D97A4F" }}>différemment</em>
        <svg viewBox="0 0 80 60" fill="none">
          <path d="M5 12 C 25 6, 55 14, 70 38" stroke="#91A86C" strokeWidth="2" strokeLinecap="round" />
          <path d="M64 30 L 70 38 L 60 42" stroke="#91A86C" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
        </svg>
      </aside>
      <div>
        <h2>
          Ce que je ferais <em>différemment</em> la prochaine fois
        </h2>
        <p>
          Le premier objet lourd que j'ai accroché toute seule, j'ai utilisé les chevilles en plastique fournies dans la boîte. En un mois, le miroir penchait. En deux mois, il était par terre. <strong>Les chevilles en plastique fournies dans la boîte sont décoratives.</strong> Elles ne portent pas de charge. Utilise une vraie cheville.
        </p>
        <p>
          Ce que je dirais à <strong>la moi d'avant</strong>&nbsp;: achète un niveau plus long que tu ne penses avoir besoin. Le niveau de 60 cm est le minimum. Le 120 cm est mieux. Tu l'utiliseras sur chaque étagère, chaque mur de galerie, chaque tringle à rideaux du reste de ta vie. Plus le niveau est long, plus la lecture est précise.
        </p>
        <p>
          Et je mettrais l'étape de la photo avant l'étape de l'ajustement. Une fois que tu as ajusté à la main deux fois, tes yeux te mentent. La photo ne ment pas. <em>Fais confiance à la photo.</em>
        </p>
      </div>
    </div>
  </section>
);

/* ============ COMMENTS ============ */
const Comments = () => (
  <section className="sa-comments">
    <div className="sa-comments-wrap">
      <header className="sa-comments-head">
        <h2>
          Des <em>lecteurs</em>
        </h2>
        <span className="meta">19 LETTRES · DES MIROIRS, SURTOUT</span>
      </header>

      <div className="sa-comment">
        <div className="who">
          <span className="n">James T.</span>
          <span>Brooklyn, NY</span>
          <span className="when">il y a 1 semaine</span>
        </div>
        <div className="body">
          <p>
            J'ai 47 ans et je n'ai jamais possédé de perceuse. Ton essai « achète juste la moins chère » m'a convaincu d'essayer, et j'ai accroché des étagères dans la chambre de ma fille. Elle pense que je suis un magicien maintenant.
          </p>
          <div className="sa-reply">
            <span className="lab">Sam a répondu</span>
            <p>
              James, tu ES un magicien. Ne lui dis pas le truc.
              <span className="sig">— S</span>
            </p>
          </div>
        </div>
      </div>

      <div className="sa-comment">
        <div className="who">
          <span className="n">Priya K.</span>
          <span>Toronto, ON</span>
          <span className="when">il y a 2 semaines</span>
        </div>
        <div className="body">
          <p>
            Question — j'ai suivi ce guide mais mes murs sont en plâtre et lattes, pas en placo. Chevilles différentes&nbsp;? Ou est-ce que toute l'approche est à revoir&nbsp;?
          </p>
          <div className="sa-reply">
            <span className="lab">Sam a répondu</span>
            <p>
              le plâtre a son propre guide — qui arrive le mois prochain. Attends, tu as raison d'être prudente. Les chevilles à plâtre, c'est un autre animal.
              <span className="sig">— S</span>
            </p>
          </div>
        </div>
      </div>

      <div className="sa-comment">
        <div className="who">
          <span className="n">Reggie B.</span>
          <span>Atlanta, GA</span>
          <span className="when">il y a 3 semaines</span>
        </div>
        <div className="body">
          <p>
            Accroché un miroir de 18 kg au-dessus de la console d'entrée tout seul. Boulons à bascule, deux, dans le placo au-dessus du cadre de la porte. Solide. Ma femme est rentrée et a supposé que j'avais eu de l'aide. Pas du tout.
          </p>
        </div>
      </div>

      <div className="sa-comment">
        <div className="who">
          <span className="n">Sara M.</span>
          <span>Seattle, WA</span>
          <span className="when">il y a 1 mois</span>
        </div>
        <div className="body">
          <p>
            Percé dans un fil à ma première tentative. Le disjoncteur a sauté, pas d'incendie, pas de blessure, mais j'ai dû appeler un électricien à 180 $ pour réparer l'intérieur du mur. Leçon&nbsp;: la règle « si tu touches quelque chose de dur, arrête » n'est pas une suggestion.
          </p>
        </div>
      </div>
    </div>
  </section>
);

/* ============ SIGNOFF ============ */
const Signoff = () => (
  <section className="sa-signoff">
    <div className="sa-signoff-wrap">
      <div>
        <h2>
          C'est tout. <em>Accroche le truc.</em>
        </h2>
        <p>
          Si tu as fini — ou que tu es coincé à mi-chemin avec une perceuse à la main et que tu doutes — envoie une photo. Je lis tout ce qui arrive. Photos triomphales préférées. Photos d'échec aussi bienvenues.
        </p>
        <div className="sig">— Sam</div>
        <div className="ctas" style={{ marginTop: 28 }}>
          <a href="/contact/" className="btn primary">
            Envoyer une photo →
          </a>
          <a href="/fr/contributors/sam/" className="btn ghost">
            Plus de Sam
          </a>
        </div>
      </div>
      <div className="sa-readnext">
        <span className="lab">À lire ensuite</span>
        <a href="/fr/contributors/sam/how-to-refinish-a-thrifted-chair/">
          <span>Rénover une chaise de brocante</span>
          <span className="m">3 H</span>
        </a>
        <a href="/en/install/living-room/">
          <span>Installer × Salon — fixations et accroches</span>
          <span className="m">HUB</span>
        </a>
        <a href="/en/install/bedroom/">
          <span>Installer × Chambre — étagères, cadres, lumières</span>
          <span className="m">HUB</span>
        </a>
        <a href="/fr/contributors/sam/">
          <span>Tous les guides de Sam</span>
          <span className="m">PROFIL</span>
        </a>
      </div>
    </div>
  </section>
);

/* ============ ROOT ============ */
const Article = () => (
  <div className="sa">
    <Crumbs />
    <Hero />
    <Lede />
    <WhatYouNeed />
    <Steps />
    <HotTakes />
    <Redo />
    <Comments />
    <Signoff />
  </div>
);

ReactDOM.createRoot(document.getElementById("render-target")).render(<Article />);