index.html

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Dossier de direction d’ÉtymoLogique : identité, jeu et décisions.">
  <meta name="theme-color" content="#f3eee3">
  <title>Dossier de direction · ÉtymoLogique</title>
  <link rel="icon" href="assets/logo.svg" type="image/svg+xml">
  <link rel="stylesheet" href="assets/site-nav.css">
  <link rel="stylesheet" href="assets/etymo.css">
</head>
<body>
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="rar-commune" viewBox="0 0 16 16"><path d="M8 1.8 14.8 14H1.2Z"/></symbol>
  <symbol id="rar-peu" viewBox="0 0 16 16"><rect x="2.3" y="2.3" width="11.4" height="11.4" rx="0.6"/></symbol>
  <symbol id="rar-rare" viewBox="0 0 16 16"><path d="M8 1.3 14.8 6.3 12.2 14.4H3.8L1.2 6.3Z"/></symbol>
  <symbol id="rar-legendaire" viewBox="0 0 16 16"><path d="M8 .6 13.6 8 8 15.4 2.4 8Z"/></symbol>
</svg>
<div class="progress" aria-hidden="true"></div>
<a class="skip-link" href="#contenu">Aller au contenu</a>
<header class="site-nav"></header>

<main id="contenu">
  <section class="hero" id="top">
    <div class="hero-glow" aria-hidden="true"></div>
    <div class="hero-grid" aria-hidden="true"></div>
    <div class="hero-inner">
      <div>
        <p class="kicker"><span class="dot"></span>Dossier de direction · cabinet linguistique contemporain</p>
        <h1 class="title" aria-label="ÉtymoLogique">
          <span class="t-line" aria-hidden="true">Étymo</span>
          <span class="t-line t-italic" aria-hidden="true">Logique</span>
        </h1>
        <p class="lede">Un jeu de fusion où chaque mot cache une généalogie. Érudit sans être scolaire, tactile sans être enfantin.</p>
        <div class="morph-row">
          <span class="morph-label">Remonter le fil</span>
          <span class="sr-only">étymologique, du latin etymologicus, du grec ἐτυμολογικός</span>
          <span class="morph" id="morph" lang="fr" aria-hidden="true">étymologique</span>
          <span class="morph-lang" id="morphLang" data-lang="fr" aria-hidden="true">Français</span>
        </div>
        <div class="hero-cta">
          <a class="btn btn-primary" href="jeu.html">Essayer la table →</a>
          <a class="btn btn-ghost" href="#sommaire">Parcourir le dossier ↓</a>
        </div>
      </div>

      <div class="stage" id="stage">
        <div class="stage-ring" aria-hidden="true"></div>
        <div class="stage-ring r2" aria-hidden="true"></div>
        <div class="float f1" data-depth="28" aria-hidden="true"><span lang="grc" style="--dur:6.5s">λόγος</span></div>
        <div class="float f2" data-depth="-22" aria-hidden="true"><span lang="grc" style="--dur:7.5s;--delay:-2s">ἔτυμον</span></div>
        <div class="float f3" data-depth="16" aria-hidden="true"><span lang="grc" style="--dur:5.5s;--delay:-1s">-ικός</span></div>
        <div class="float f4" data-depth="-14" aria-hidden="true"><span style="--dur:6s;--delay:-3s;background:var(--c-suffix)">-logie</span></div>
        <div class="float f5" data-depth="34" aria-hidden="true"><span style="--dur:5s;--delay:-.5s">Grec → Latin → Français</span></div>

        <article class="hero-card tilt" aria-label="Carte de découverte : étymologique">
          <div class="hc-top"><span>N° 001</span><span class="hc-badge">Nouvelle découverte</span></div>
          <p class="hc-word">étymologique</p>
          <p class="hc-def">Qui concerne l’origine et l’histoire des mots.</p>
          <p class="hc-trans">du grec etumologikós</p>
          <ol class="chain">
            <li><span class="lang-dot fr"></span><span class="c-lang">Français</span><span class="c-form">étymologique</span></li>
            <li><span class="lang-dot la"></span><span class="c-lang">Latin</span><span class="c-form" lang="la">etymologicus</span></li>
            <li><span class="lang-dot grc"></span><span class="c-lang">Grec ancien</span><span class="c-form" lang="grc">ἐτυμολογικός</span></li>
          </ol>
          <div class="hc-foot">
            <span>Débloque : latin · grec ancien</span>
            <span class="conf"><i></i><i></i><i></i><b>Établie</b></span>
          </div>
        </article>
      </div>
    </div>
    <div class="cue" aria-hidden="true">Défiler<i></i></div>
  </section>

  <div class="marquees" aria-hidden="true">
    <div class="marquee">
      <div class="track">
        <span class="mq-item"><span class="brick" data-kind="préfixe"><span class="b-label">bio-</span><span class="b-meta">«&nbsp;vie&nbsp;»</span></span></span><span class="mq-item"><span class="brick" data-kind="suffixe"><span class="b-label">-logie</span><span class="b-meta">«&nbsp;étude&nbsp;»</span></span></span><span class="mq-item"><span class="brick" data-kind="préfixe"><span class="b-label">géo-</span><span class="b-meta">«&nbsp;terre&nbsp;»</span></span></span><span class="mq-item"><span class="brick" data-kind="suffixe"><span class="b-label">-graphie</span><span class="b-meta">«&nbsp;écriture&nbsp;»</span></span></span><span class="mq-item"><span class="brick" data-kind="préfixe"><span class="b-label">philo-</span><span class="b-meta">«&nbsp;qui aime&nbsp;»</span></span></span><span class="mq-item"><span class="brick" data-kind="suffixe"><span class="b-label">-sophie</span><span class="b-meta">«&nbsp;sagesse&nbsp;»</span></span></span><span class="mq-item"><span class="brick" data-kind="préfixe"><span class="b-label">astro-</span><span class="b-meta">«&nbsp;astre&nbsp;»</span></span></span><span class="mq-item"><span class="brick" data-kind="suffixe"><span class="b-label">-nomie</span><span class="b-meta">«&nbsp;loi&nbsp;»</span></span></span>
        <span class="mq-item"><span class="brick" data-kind="préfixe"><span class="b-label">bio-</span><span class="b-meta">«&nbsp;vie&nbsp;»</span></span></span><span class="mq-item"><span class="brick" data-kind="suffixe"><span class="b-label">-logie</span><span class="b-meta">«&nbsp;étude&nbsp;»</span></span></span><span class="mq-item"><span class="brick" data-kind="préfixe"><span class="b-label">géo-</span><span class="b-meta">«&nbsp;terre&nbsp;»</span></span></span><span class="mq-item"><span class="brick" data-kind="suffixe"><span class="b-label">-graphie</span><span class="b-meta">«&nbsp;écriture&nbsp;»</span></span></span><span class="mq-item"><span class="brick" data-kind="préfixe"><span class="b-label">philo-</span><span class="b-meta">«&nbsp;qui aime&nbsp;»</span></span></span><span class="mq-item"><span class="brick" data-kind="suffixe"><span class="b-label">-sophie</span><span class="b-meta">«&nbsp;sagesse&nbsp;»</span></span></span><span class="mq-item"><span class="brick" data-kind="préfixe"><span class="b-label">astro-</span><span class="b-meta">«&nbsp;astre&nbsp;»</span></span></span><span class="mq-item"><span class="brick" data-kind="suffixe"><span class="b-label">-nomie</span><span class="b-meta">«&nbsp;loi&nbsp;»</span></span></span>
      </div>
    </div>
    <div class="marquee alt">
      <div class="track">
        <span>Déduire</span><span><em>Fusionner</em></span><span>Collectionner</span><span><em>Remonter le fil</em></span><span>Transmettre</span><span><em>Découvrir</em></span>
        <span>Déduire</span><span><em>Fusionner</em></span><span>Collectionner</span><span><em>Remonter le fil</em></span><span>Transmettre</span><span><em>Découvrir</em></span>
      </div>
    </div>
  </div>

  <section class="section hub" id="sommaire">
    <div class="wrap">
      <div class="sec-head">
        <div data-reveal><span class="sec-num">Sommaire</span><h2>Dix pages, <em>trois chapitres</em></h2></div>
        <div class="sec-intro" data-reveal style="--d:120ms"><p>L’identité fixe les règles, le jeu les applique, les décisions les justifient. Chaque page renvoie aux autres là où une règle est appliquée ou décidée.</p><p class="demo-status" id="demoStatus"></p></div>
      </div>
      <div class="hub-groups" data-site-hub>
        <template data-art="identite.html"><span class="hub-art art-swatches"><i style="--c:var(--c-prefix)"></i><i style="--c:var(--c-suffix)"></i><i style="--c:var(--c-lang)"></i><i style="--c:var(--c-family)"></i><i style="--c:var(--c-pli)"></i><i style="--c:var(--c-action)"></i></span></template>
        <template data-art="design-system.html"><span class="hub-art art-ds"><span class="btn btn-primary">Fusionner</span><span class="bchip" data-kind="préfixe">bio-</span><span class="bchip" data-kind="suffixe">-logie</span></span></template>
        <template data-art="typographie.html"><span class="hub-art art-type">A<em>a</em><small lang="grc">λόγος</small></span></template>
        <template data-art="mouvement.html"><span class="hub-art art-motion"><span></span><span></span><span></span></span></template>
        <template data-art="interfaces.html"><span class="hub-art art-screens"><span></span><span></span></span></template>
        <template data-art="maquettes.html"><span class="hub-art art-screens is-drawn"><span></span><span></span></span></template>
        <template data-art="jeu.html"><span class="hub-art"><span class="bchip" data-kind="préfixe">bio-</span><span>+</span><span class="bchip" data-kind="suffixe">-logie</span></span></template>
        <template data-art="plis.html"><span class="hub-art art-rar"><svg class="rar" aria-hidden="true"><use href="#rar-commune"/></svg><svg class="rar" aria-hidden="true"><use href="#rar-peu"/></svg><svg class="rar" aria-hidden="true"><use href="#rar-rare"/></svg><svg class="rar" aria-hidden="true"><use href="#rar-legendaire"/></svg></span></template>
        <template data-art="codex.html"><span class="hub-art art-cards"><span></span><span></span><span></span></span></template>
        <template data-art="adr.html"><span class="hub-art art-adr"><span>0011 · Raretés</span><span>0012 · Rationnement</span><span>0013 · Schéma</span></span></template>
        <template data-art="modele.html"><span class="hub-art art-model"><span><i></i><i></i></span><em></em><span><i></i><i></i><i></i></span><em></em><span><i></i></span></span></template>
        <template data-art="boussole.html"><span class="hub-art art-compass"><span>+</span><span>×</span></span></template>
      </div>
    </div>
  </section>
</main>
<nav class="site-pager" aria-label="Page précédente et page suivante"></nav>

<footer class="footer">
  <div class="foot-seal" aria-hidden="true">
    <svg viewBox="0 0 200 200"><defs><path id="circ" d="M100 100 m-78 0 a78 78 0 1 1 156 0 a78 78 0 1 1 -156 0"></path></defs><text textLength="486" lengthAdjust="spacing"><textPath href="#circ">ÉtymoLogique · remonter le fil · ÉtymoLogique · remonter le fil ·</textPath></text></svg>
    <b>ÉL</b>
  </div>
  <p class="foot-phrase"><span class="sr-only">Chaque mot est une piste.</span><span aria-hidden="true">Chaque mot est une <em id="footWord">piste</em>.</span></p>
  <div class="foot-meta"><span>ÉtymoLogique · Direction visuelle 02</span><span>Cabinet linguistique contemporain</span><span>Dossier de direction · 2026</span></div>
</footer>

<div class="toast" role="status" aria-live="polite"></div>
<script src="assets/site-nav.js"></script>
<script src="assets/etymo.js"></script>
</body>
</html>