// app.jsx — main article composition

const { useEffect: useEffect2, useState: useState2 } = React;

function ScrollProgress() {
  const [pct, setPct] = useState2(0);
  useEffect2(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const denom = h.scrollHeight - h.clientHeight || 1;
      const p = Math.min(100, Math.max(0, h.scrollTop / denom * 100));
      setPct(p);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return <div className="hdr__progress" style={{ width: pct + '%' }} />;
}

function Header() {
  return (
    <header className="hdr" data-screen-label="00 Header">
      <div className="hdr__inner">
        <a className="hdr__brand" href="#top" aria-label="ITIWE — accueil">
          <svg width="28" height="26" viewBox="0 0 200 180" aria-hidden="true">
            <path d="M84,49 L116,49 L164,131 L148,159 L52,159 L36,131 Z M100,79 L130,130 L70,130 Z" fill="currentColor" fillRule="evenodd" />
          </svg>
          <span className="hdr__wordmark">ITIWE</span>
        </a>
        <div className="hdr__crumbs">
          Le Forum &nbsp;/&nbsp; Manifestes &nbsp;/&nbsp; <span>Le Transformer</span>
        </div>
      </div>
      <ScrollProgress />
    </header>);

}

function Hero() {
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <img className="hero__mark" src="assets/mark-only.svg" alt="" aria-hidden="true" />
      <div className="hero__shell">
        <span className="kicker hero__kicker">Manifeste méthodologique</span>
        <h1 className="hero__title">
          <span>L'IA générative existe </span>
          <em>parce que</em>
          <span> le Transformer existe.</span>
        </h1>
        <p className="hero__lead">
          Un visuel long-format pour comprendre — sans jargon — pourquoi un texte sur trois publié
          aujourd'hui sort d'une architecture inventée pour traduire de l'anglais vers l'allemand.
          Quatre démos interactives, une question : <em>qu'est-ce qu'on recrute</em>, au juste,
          quand on dit « recruter un Collaborateur IA » ?
        </p>
        <div className="hero__meta">
          <div><div className="mono">Auteur</div><b>BENOIT HUREL</b></div>
          <div><div className="mono">Cabinet</div><b>ITIWE · Nantes</b></div>
          <div><div className="mono">Format</div><b>Lecture ~12 min</b></div>
          <div><div className="mono">Section</div><b>Le Forum · n° 03</b></div>
          <div><div className="mono">Mise à jour</div><b>19 mai 2026</b></div>
        </div>
      </div>
      <span className="hero__scroll">Faites défiler</span>
    </section>);

}

function Intro() {
  return (
    <section className="sec" data-screen-label="02 Intro">
      <div className="wrap">
        <span className="kicker">Le pivot</span>
        <h2 className="h">
          En 2017, huit chercheurs ont publié un papier de <em>quinze pages</em>.
        </h2>
        <p className="lead">
          Il s'appelait <em>« Attention Is All You Need »</em>. Il décrivait une architecture
          neuronale neuve, baptisée le <strong>Transformer</strong>. À l'époque, l'enjeu paraissait
          modeste : traduire des phrases d'une langue à l'autre, un peu mieux que la génération précédente.
        </p>
        <p className="body">
          Personne — pas même les auteurs — n'avait anticipé que ce papier serait le socle de
          ChatGPT, de Claude, de Gemini, de Mistral. Ni qu'il définirait, neuf ans plus tard,
          la façon dont des millions de dirigeants posent la question : <em>« on fait quoi avec
          cette IA, concrètement, dans mon entreprise ? »</em>
        </p>
        <p className="body">
          Cet article répond à une question plus étroite, mais plus utile : <strong>de quoi est faite,
          mécaniquement, l'IA générative que vous utilisez ?</strong> Pas pour le plaisir de la technique.
          Pour mieux décider de ce qu'on lui confie, et de ce qu'on ne lui confie pas.
        </p>
        <div className="pull">
          Le Transformer n'a pas été conçu pour parler. Il a été conçu pour <em>regarder</em>.
        </div>
      </div>
    </section>);

}

function SecTokens() {
  return (
    <section className="sec sec--warm" data-screen-label="03 Tokens">
      <div className="wrap">
        <span className="kicker">Étape 1 · Tokenisation</span>
        <h2 className="h">D'abord, transformer du texte en <em>nombres</em>.</h2>
        <p className="lead">
          Un ordinateur ne lit pas. Il manipule des nombres. Avant même que le modèle ne « pense »
          quoi que ce soit, il faut donc découper votre phrase en fragments — les <strong>jetons</strong> —
          et donner à chacun un numéro dans un vocabulaire fixe.
        </p>
        <p className="body">
          Un jeton n'est pas toujours un mot. Souvent c'est un mot. Parfois c'est un morceau
          (<span className="tok">recrut</span><span className="tok">er</span>). Parfois c'est une
          ponctuation (<span className="tok">.</span>). Parfois c'est une espace. Le vocabulaire
          d'un grand modèle compte typiquement 100 000 à 200 000 entrées.
        </p>

        <TokenizerDemo />

        <p className="body">
          <strong>Pourquoi c'est important pour vous.</strong> Quand un fournisseur d'IA facture
          « au jeton », il facture au morceau, pas au mot. Le français consomme typiquement
          1,3 à 1,5 fois plus de jetons que l'anglais pour dire la même chose — c'est un effet
          du vocabulaire d'entraînement, dominé par l'anglais.
        </p>
      </div>
    </section>);

}

function SecEmbed() {
  return (
    <section className="sec" data-screen-label="04 Embeddings">
      <div className="wrap">
        <span className="kicker">Étape 2 · Coordonnées</span>
        <h2 className="h">
          Chaque jeton reçoit une <em>coordonnée</em> dans un espace géant.
        </h2>
        <p className="lead">
          Une fois numéroté, chaque jeton est remplacé par un vecteur — une liste de plusieurs
          milliers de nombres. C'est là, dans cet espace, que vit le « sens » pour le modèle.
        </p>
        <p className="body">
          La logique est simple : deux jetons proches dans l'espace ont des sens proches. Le mot
          <span className="tok">chien</span> sera plus près de <span className="tok">chat</span>
          que de <span className="tok">Paris</span>. Et <span className="tok">recruter</span>,
          plus près de <span className="tok">embaucher</span> que de <span className="tok">lion</span>.
          Cette géométrie n'est pas dictée à la main : elle émerge de l'entraînement.
        </p>

        <EmbeddingMap />

        <p className="body">
          C'est aussi pour ça que les LLMs font des analogies. La direction qui va de <em>« roi » </em>
          à <em>« reine »</em> dans cet espace ressemble fortement à celle qui va de <em>« acteur » </em>
          à <em>« actrice »</em>. Le modèle n'a pas appris la règle du genre — il a appris une géométrie
          dans laquelle cette règle apparaît, gratuitement.
        </p>
      </div>
    </section>);

}

function SecAttention() {
  return (
    <section className="sec sec--deep" data-screen-label="05 Attention">
      <div className="wrap">
        <span className="kicker">Étape 3 · Attention</span>
        <h2 className="h">
          L'idée centrale : <em>tout</em> regarde <em>tout</em>.
        </h2>
        <p className="lead">
          Avant 2017, on lisait une phrase en serial : un mot, puis le suivant, puis le suivant,
          en gardant une mémoire qui se dégradait. Le Transformer fait l'inverse — il regarde
          tous les jetons précédents <em>en même temps</em>, et apprend à pondérer chacun
          en fonction de celui qu'il est en train de traiter.
        </p>
        <p className="body">
          Cette pondération s'appelle l'<strong>attention</strong>. Pour chaque jeton sortant,
          le modèle calcule un score sur chaque jeton entrant : <em>combien dois-je écouter
          celui-ci ?</em> Les scores sont normalisés pour faire une distribution qui somme à 100 %.
          C'est exactement ce qui s'affiche ci-dessous.
        </p>

        <AttentionHeatmap />

        <div className="pull">
          On ne demande pas au modèle de comprendre — on lui demande de <em>distribuer son attention</em>.
          Le sens, c'est ce qui en sort.
        </div>

        <p className="body">
          La magie tient en une phrase : <strong>cette même opération est répétée en parallèle</strong>
          par plusieurs « têtes » d'attention. L'une suit la grammaire, l'autre la sémantique,
          une troisième la cohérence avec le début du paragraphe. Le modèle ne décide pas qui suit
          quoi — il apprend, pendant l'entraînement, à se répartir le travail.
        </p>
      </div>
    </section>);

}

function SecPredict() {
  return (
    <section className="sec" data-screen-label="06 Predict">
      <div className="wrap">
        <span className="kicker">Étape 4 · Prédiction</span>
        <h2 className="h">
          Au bout du tunnel, une seule question : <em>quel jeton vient après ?</em>
        </h2>
        <p className="lead">
          Tout ce qu'on a empilé — découpage, mise en coordonnées, attention, et 30 couches qu'on n'a
          pas encore décrites — sert à une seule chose. Produire, en sortie, une distribution
          de probabilité sur tout le vocabulaire : la probabilité que chacun des 200 000 jetons
          possibles soit le suivant.
        </p>

        <NextTokenPredictor />

        <p className="body">
          <strong>Ce que ça vous dit du métier.</strong> Un LLM ne « connaît » pas la réponse
          à votre question. Il génère une suite de jetons dont chacun a, statistiquement, l'air
          plausible étant donné tout ce qui précède. C'est puissant. Et c'est précisément ce qui
          fonde nos règles d'usage : <em>là où l'enjeu est exact, encadrez ; là où l'enjeu est
          conversationnel, lâchez la bride.</em>
        </p>
      </div>
    </section>);

}

function SecStack() {
  return (
    <section className="sec sec--warm" data-screen-label="07 Stack">
      <div className="wrap">
        <span className="kicker">Architecture</span>
        <h2 className="h">
          On <em>empile</em>. Puis on empile encore.
        </h2>
        <p className="lead">
          Le Transformer décrit dans le papier de 2017 avait 6 couches. GPT-2, en 2019, en
          comptait 48. Les modèles ouverts publiés cette année tournent entre 32 et 96 couches.
          Chaque couche, c'est une opération d'attention plus un petit réseau de neurones — empilées.
        </p>

        <LayerStack />

        <p className="body">
          La règle empirique observée depuis 2020 : à <em>recette d'architecture constante</em>,
          plus on empile et plus on entraîne sur des données variées, plus de nouvelles capacités
          apparaissent — raisonner, coder, traduire des langues qu'on n'a jamais montrées explicitement.
          Pas parce qu'un ingénieur les a programmées : <strong>elles émergent</strong>, gratuitement,
          au-delà d'un certain seuil de taille.
        </p>
        <p className="body">
          Conséquence directe pour vous : <em>on ne sait pas à l'avance ce qu'un modèle saura faire
          dans votre métier</em>. On le découvre en l'essayant. C'est précisément pour cette raison
          qu'un Collaborateur IA, chez ITIWE, passe toujours par une <strong>période d'essai</strong>
          — comme un humain qu'on n'embauche pas sur la base de son CV seul.
        </p>
      </div>
    </section>);

}

function SecTraining() {
  return (
    <section className="sec" data-screen-label="08 Training">
      <div className="wrap">
        <span className="kicker">Du modèle au produit</span>
        <h2 className="h">
          Deux moments qui n'ont <em>rien à voir</em> entre eux.
        </h2>
        <p className="lead">
          Un modèle de langue passe par deux phases radicalement différentes. La confusion entre
          les deux est, à notre avis, la première cause de déceptions dans les TPE/PME qui démarrent
          un projet IA.
        </p>

        <div className="two-col">
          <div className="two-col__cell">
            <h4>Pré-entraînement</h4>
            <p className="body">
              On déverse plusieurs téraoctets de texte — Wikipédia, livres, web, code source —
              dans le modèle. Pendant des mois, sur des milliers de cartes graphiques, il apprend
              une seule tâche : <em>prédire le jeton manquant</em>.
            </p>
            <p className="small">
              <b>Coût.</b> Plusieurs millions à plusieurs centaines de millions d'euros. <b>Acteurs.</b>
              Une dizaine d'organisations dans le monde. <b>Vous ?</b> Jamais.
            </p>
          </div>
          <div className="two-col__cell two-col__cell--accent">
            <h4>Adaptation</h4>
            <p className="body">
              Une fois le modèle pré-entraîné, on lui apprend à <em>obéir</em> : à suivre des
              consignes, à refuser certaines demandes, à parler poliment, à utiliser des outils.
              C'est court, ciblé, beaucoup moins cher. Et c'est là, exactement, que se joue le
              <em> recrutement d'un Collaborateur IA</em>.
            </p>
            <p className="small">
              <b>Coût.</b> Cabinet + outils, pas d'infrastructure. <b>Acteurs.</b> Vous, votre équipe,
              votre cabinet d'accompagnement. <b>Notre travail.</b>
            </p>
          </div>
        </div>

        <p className="body">
          Quand un dirigeant nous appelle pour « installer ChatGPT dans son entreprise », il
          parle en réalité de la deuxième case. Le modèle, lui, est déjà là, déjà appris.
          Ce qui reste à faire — et ce qui rate, neuf fois sur dix, quand personne ne s'en occupe —
          c'est <strong>de lui écrire sa fiche de poste, son mode d'emploi, sa période d'essai</strong>.
        </p>
      </div>
    </section>);

}

function SecLimits() {
  return (
    <section className="sec sec--deep" data-screen-label="09 Limits">
      <div className="wrap">
        <span className="kicker">Limites par construction</span>
        <h2 className="h">
          Pourquoi il <em>hallucine</em> — et pourquoi ce n'est pas un bug.
        </h2>
        <p className="lead">
          Revenons à la mécanique. À chaque étape, le modèle tire un jeton selon une distribution
          de probabilité. Il n'a pas accès à une base de faits. Il n'a pas de mémoire de ce qui
          est vrai. Il produit ce qui, dans son espace appris, <em>ressemble</em> à du vrai.
        </p>
        <p className="body">
          Conséquences directes :
        </p>
        <ul className="body" style={{ paddingLeft: 20 }}>
          <li><strong>Les faits précis sont fragiles.</strong> Un chiffre, une date, un nom propre — autant de zones où le modèle peut produire une variante plausible mais fausse, parce qu'elle est syntaxiquement et stylistiquement crédible.</li>
          <li><strong>L'incertitude n'est pas exprimée.</strong> Le modèle ne dit pas spontanément <em>« je ne sais pas »</em>. Sa sortie a toujours le même ton d'assurance, qu'il soit sûr ou pas.</li>
          <li><strong>Le contexte récent prime.</strong> Si votre question contient une formulation orientée, le modèle aura tendance à la prolonger plutôt qu'à la corriger.</li>
        </ul>
        <p className="body">
          Ce ne sont pas des défauts à corriger. <strong>Ce sont les caractéristiques de l'outil.</strong>
          Comme on ne reproche pas un marteau de ne pas bien visser, on ne demande pas à un
          Collaborateur IA d'être l'arbitre d'une décision où l'enjeu est l'exactitude vérifiable.
          On l'envoie là où il excelle : <em>la première version, le brouillon, la reformulation,
          le tri, l'idée d'à-côté</em>.
        </p>
      </div>
    </section>);

}

function Bridge() {
  return (
    <section className="bridge" data-screen-label="10 Bridge">
      <div className="wrap">
        <span className="kicker paper">La méthode ITIWE</span>
        <h2 className="h">
          Donc : on ne <em>l'installe pas</em>. On le <em className="accent">recrute</em>.
        </h2>
        <p className="body" style={{ fontSize: 19, maxWidth: '58ch' }}>
          Un Collaborateur IA n'est pas un logiciel qu'on déploie. C'est un membre d'équipe qu'on
          intègre — avec sa fiche de poste, son mode d'emploi du dirigeant, sa période d'essai,
          ses indicateurs de performance, et sa Charte d'équipe qui dit à toute la maison comment
          se comporter avec lui.
        </p>
        <p className="body" style={{ fontSize: 19, maxWidth: '58ch' }}>
          Cet article décrit la mécanique. Ce que nous accompagnons, chez ITIWE, c'est tout ce qui tient autour du moteur pour qu'il vous amène à bon port. 
          <em>Un vrai recrutement</em>, au sens RH du terme.
        </p>
        <div style={{ marginTop: 24 }}>
          <a className="bridge__cta" href="#contact">
            Prendre 15 min pour échanger
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
              <path d="M3 8h10M9 4l4 4-4 4" />
            </svg>
          </a>
          <a className="bridge__sec" href="#approche">Comprendre la méthode</a>
        </div>
        <p className="small" style={{ marginTop: 32, color: 'rgba(244,239,230,0.55)' }}>Pas de pitch. Pas de vente. Si un recrutement d'IA n'est pas la bonne réponse pour vous, nous sommes directs et honnêtes.

        </p>
      </div>
    </section>);

}

function Credits() {
  return (
    <footer className="credits" data-screen-label="11 Credits">
      <div className="credits__grid">
        <div className="credits__block">
          <h5>Reconnaissance d'inspiration</h5>
          <p>
            La forme de cet explicatif s'inspire ouvertement de l'article
            <a href="https://ig.ft.com/generative-ai/" target="_blank" rel="noopener noreferrer">
              {' '}« Generative AI exists because of the transformer »
            </a>{' '}publié par le <i>Financial Times</i> en septembre 2023, signé Madhumita Murgia,
            Stephen Morris, Cristina Criddle et l'équipe Visual & Data Journalism (FT Graphics).
          </p>
          <p>
            Le contenu textuel, les visualisations, le code et la voix éditoriale ci-dessus ont été
            entièrement réécrits depuis zéro en français, dans le cadre du <i>Forum</i> d'ITIWE, et
            ne reproduisent aucun passage de l'article original. Nous recommandons chaudement la
            lecture de la version FT — elle reste, à notre connaissance, la meilleure vulgarisation
            grand public du Transformer.
          </p>
        </div>

        <div className="credits__block">
          <h5>Sources scientifiques</h5>
          <ul>
            <li>
              <b>Attention Is All You Need</b>
              <i>Vaswani, Shazeer, Parmar, Uszkoreit, Jones, Gomez, Kaiser, Polosukhin — NeurIPS 2017</i>
              Le papier fondateur. Quinze pages, huit auteurs, une révolution.
            </li>
            <li>
              <b>The Illustrated Transformer</b>
              <i>Jay Alammar, 2018 — jalammar.github.io</i>
              La référence pédagogique. Cité partout, à juste titre.
            </li>
            <li>
              <b>Language Models are Few-Shot Learners (GPT-3)</b>
              <i>Brown et al., OpenAI — 2020</i>
              Le moment où l'effet d'échelle est devenu indéniable.
            </li>
          </ul>
        </div>

        <div className="credits__block">
          <h5>Cet article</h5>
          <ul>
            <li>
              <b>Texte & démos</b>
              <i>Benoit Hurel — ITIWE · Nantes</i>
              Architectes du Recrutement d'IA · SASU
            </li>
            <li>
              <b>Direction graphique</b>
              <i>ITIWE Design System · Mark V1 · Direction A2</i>
              « Manifeste Méthodologique » · v3.0.0
            </li>
            <li>
              <b>Démo de prédiction en direct</b>
              <i>Claude Haiku 4.5 · Anthropic</i>
              Appelé depuis la page, plafond 1 024 jetons.
            </li>
            <li>
              <b>Publié dans</b>
              <i>Le Forum d'ITIWE — n° 03 · 19 mai 2026</i>
              Lecture gratuite · Pas de tracking
            </li>
          </ul>
        </div>
      </div>

      <div className="credits__legal">
        <h5>Confidentialité &amp; données personnelles</h5>
        <p>
          La démo « Prédire le mot suivant » peut, lorsque vous explorez une piste non pré-calculée,
          transmettre le texte que vous saisissez à <b>Anthropic</b> (API Claude, serveurs situés aux
          États-Unis) le temps de calculer une prédiction. Ce texte n'est ni stocké, ni associé à votre
          identité par ITIWE&nbsp;; il transite uniquement pour générer la réponse affichée.
          N'y saisissez aucune donnée personnelle ou confidentielle.
        </p>
        <p>
          Cette page ne dépose <b>aucun cookie</b> publicitaire ou de mesure d'audience et n'utilise
          aucun traceur. Conformément au RGPD, vous pouvez exercer vos droits (accès, rectification,
          effacement) en écrivant à <a href="mailto:contact@itiwe.com">contact@itiwe.com</a>.
          Voir aussi la <a href="/mentions-legales/">politique de confidentialité d'ITIWE</a>.
        </p>
      </div>

      <div className="colophon">
        <span>© 2026 ITIWE SASU · Nantes · Tous droits réservés</span>
        <span><b>Mark V1</b> · v3.0.0 · Verrouillé le 13.05.2026</span>
        <span>Construit sur papier ivoire <b>#F4EFE6</b></span>
      </div>
    </footer>);

}

function App() {
  return (
    <React.Fragment>
      <Header />
      <Hero />
      <Intro />
      <SecTokens />
      <SecEmbed />
      <SecAttention />
      <SecPredict />
      <SecStack />
      <SecTraining />
      <SecLimits />
      <Bridge />
      <Credits />
    </React.Fragment>);

}

window.App = App;
ReactDOM.createRoot(document.getElementById('root')).render(<App />);