methode.html

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La méthode — La Table P·A·O</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='22' fill='%23F4EFE1'/%3E%3Ccircle cx='30' cy='30' r='9' fill='%23B5372C'/%3E%3Ccircle cx='70' cy='30' r='9' fill='%23B5372C'/%3E%3Ccircle cx='50' cy='50' r='9' fill='%23B5372C'/%3E%3Ccircle cx='30' cy='70' r='9' fill='%23B5372C'/%3E%3Ccircle cx='70' cy='70' r='9' fill='%23B5372C'/%3E%3C/svg%3E">
<meta name="description" content="Générer et mémoriser une passphrase maîtresse avec des dés physiques et des scènes Personnage·Action·Objet : entropie quantifiable, mémoire durable, protocole papier complet.">
<script>
// Applique le thème choisi avant le premier rendu (clé absente = suivre le système).
try{
  var t = localStorage.getItem('table-pao:theme');
  if (t === 'light' || t === 'dark') document.documentElement.dataset.theme = t;
}catch(e){ /* stockage indisponible (navigation privée) : suivre le système */ }
</script>
<style>
:root{
  color-scheme:dark;
  --felt:#1C3B2E; --felt-deep:#122A1F; --felt-line:#2A4C3B;
  --ivory:#F4EFE1; --ivory-shade:#E7DFC9; --ivory-edge:#D8CDAF;
  --ink:#25332A; --ink-soft:#4A5A4E;
  --pip:#B5372C; --brass:#B3904E; --brass-bright:#D9BE80;
  /* surfaces de carte (l'ivoire sert aussi de texte côté feutre : vars dédiées) */
  --card-hi:var(--ivory); --card-lo:var(--ivory-shade);
  --card-gloss:rgba(255,255,255,.7);
  --gold-ink:#7a5a20;
}
/* Tokens sombres en double — préférence système (sauf clair forcé) et sombre
   forcé via data-theme. Garder les deux blocs synchronisés. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --felt:#131F18; --felt-deep:#0B130E; --felt-line:#26352C;
    --ivory-edge:#39463C;
    --ink:#EAE4D2; --ink-soft:#A9B2A3;
    --pip:#E8887A;
    --card-hi:#222B24; --card-lo:#1B241D;
    --card-gloss:rgba(255,255,255,.06);
    --gold-ink:#CFA95C;
  }
}
:root[data-theme="dark"]{
  --felt:#131F18; --felt-deep:#0B130E; --felt-line:#26352C;
  --ivory-edge:#39463C;
  --ink:#EAE4D2; --ink-soft:#A9B2A3;
  --pip:#E8887A;
  --card-hi:#222B24; --card-lo:#1B241D;
  --card-gloss:rgba(255,255,255,.06);
  --gold-ink:#CFA95C;
}
.theme-switch{
  position:fixed;top:12px;right:12px;z-index:30;margin:0;
  display:flex;gap:2px;padding:3px;
  background:rgba(0,0,0,.25);border:1px solid var(--felt-line);border-radius:999px;
  backdrop-filter:blur(4px);
}
button:focus-visible,a:focus-visible{outline:3px solid var(--brass-bright);outline-offset:2px;border-radius:9px}
.theme-btn{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;border-radius:999px;
  border:none;background:none;color:var(--ivory-shade);cursor:pointer;
}
.theme-btn:hover{color:var(--ivory)}
.theme-btn[aria-pressed="true"]{background:var(--brass);color:var(--felt-deep)}
.theme-btn svg{width:15px;height:15px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media print{
  body{background:#fff;color:#000}
  .theme-switch{display:none}
  /* Ré-ancre les tokens en encre-sur-blanc quel que soit le thème actif.
     Spécificité (0,2,0) requise face aux blocs sombres ci-dessus. */
  :root[data-theme], :root:not([data-theme]){
    color-scheme:light;
    --felt:#fff; --felt-deep:#f2f2f2; --felt-line:#bbb;
    --ivory:#25332A; --ivory-shade:#4A5A4E; --ivory-edge:#8a8f85;
    --ink:#25332A; --ink-soft:#4A5A4E;
    --pip:#8a2b22; --brass:#6b5220; --brass-bright:#6b5220;
    --card-hi:#fff; --card-lo:#fff; --card-gloss:transparent;
    --gold-ink:#6b5220;
  }
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(1600px 900px at 50% 110%, rgba(0,0,0,.35), transparent 55%),
    var(--felt);
  color:var(--ivory);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.6;
  padding-bottom:60px;
}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
.display{font-family:"Palatino Linotype",Palatino,"Book Antiqua","URW Palladio L",Georgia,serif}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
header{padding:44px 0 10px;text-align:center}
.eyebrow{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--brass-bright)}
h1{font-size:clamp(2rem,6vw,2.8rem);font-weight:600;margin:.35em 0 .2em}
h1 .amp{color:var(--brass-bright);font-style:italic}
.tagline{color:var(--ivory-shade);font-style:italic}
header nav{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0 26px}
header nav a{border:1px solid var(--felt-line);border-radius:999px;padding:5px 16px;font-size:.8rem;color:var(--ivory-shade);text-decoration:none;background:rgba(0,0,0,.15)}
header nav a.primary{border-color:var(--brass);color:var(--brass-bright)}
header nav a:hover{border-color:var(--brass)}

.card{
  background:linear-gradient(178deg,var(--card-hi),var(--card-lo));
  color:var(--ink);
  border-radius:14px;border:1px solid var(--ivory-edge);
  box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 1px 0 var(--card-gloss);
  padding:26px 30px;margin-bottom:24px;
}
.card h2{font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--pip);font-weight:700;margin-bottom:14px}
.card h3{font-size:1.05rem;margin:18px 0 6px;color:var(--ink)}
.card p{margin-bottom:10px}
.card p:last-child{margin-bottom:0}
.card em{color:var(--gold-ink);font-style:normal;font-weight:600}
.card .scene-ex{font-size:1.25rem;font-style:italic;margin:12px 0;padding-left:16px;border-left:3px solid var(--brass)}
.card .k{background:var(--felt-deep);color:var(--ivory);border-radius:6px;padding:2px 8px;font-size:.85em}
.small{font-size:.85rem;color:var(--ink-soft)}
table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.9rem}
th,td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--ivory-edge)}
th{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
td.num{font-family:ui-monospace,Menlo,Consolas,monospace}
.foot{text-align:center;font-size:.78rem;color:var(--ivory-shade);margin-top:34px}
.foot a{color:var(--brass-bright)}
a{color:var(--gold-ink)}
.card a{color:var(--gold-ink)}
@media(max-width:560px){.card{padding:20px 18px}}
/* header.wrap (0,1,1) : doit battre .wrap{padding:0 20px} (0,1,0) */
@media(max-width:620px){header.wrap{padding-top:72px}}
</style>
</head>
<body>

<nav class="theme-switch" aria-label="Thème">
  <button type="button" class="theme-btn" data-theme-set="" title="Suivre le thème du système">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
    <span class="visually-hidden">Système</span>
  </button>
  <button type="button" class="theme-btn" data-theme-set="light" title="Thème clair">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
    <span class="visually-hidden">Clair</span>
  </button>
  <button type="button" class="theme-btn" data-theme-set="dark" title="Thème sombre">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
    <span class="visually-hidden">Sombre</span>
  </button>
</nav>

<header class="wrap">
  <div class="eyebrow">La méthode</div>
  <h1 class="display">La Table <span class="amp">P·A·O</span></h1>
  <p class="tagline display">Une passphrase générée aux dés, mémorisée en scènes, récupérable dans dix ans.</p>
  <nav>
    <a class="primary" href="index.html">← Ouvrir le générateur</a>
    <a href="table-pao-imprimable.pdf">Tables imprimables (PDF)</a>
  </nav>
</header>

<main class="wrap">

<section class="card">
  <h2>Le problème</h2>
  <p>Une passphrase maîtresse de gestionnaire de mots de passe doit satisfaire trois exigences contradictoires : une <em>entropie réelle et quantifiable</em> (pas une astuce personnelle dont la force est inconnaissable), une <em>mémorabilité durable</em> (des années, y compris après une longue interruption), et une <em>procédure de récupération</em> qui survive à l'oubli sans livrer le secret à qui trouve un papier.</p>
  <p>Le diceware classique répond à la première exigence. Cette méthode y ajoute les deux autres, en remplaçant les mots isolés par des <em>scènes</em> — l'outil des athlètes de mémoire, adossé au tirage aux dés.</p>
</section>

<section class="card">
  <h2>Le principe</h2>
  <p>Une scène associe un <em>Personnage</em>, une <em>Action</em> et un <em>Objet</em>, chacun tiré dans une liste de 216 entrées par trois jets de dé (numération en base 6 : premier jet = centaine, deuxième = dizaine, troisième = unité, codes de 111 à 666).</p>
  <p class="scene-ex display">« Un ambassadeur déchire une banane. »</p>
  <p>Chaque élément vaut log₂(216) ≈ 7,75 bits ; une scène complète en vaut <em>23,3</em>. L'entropie vient exclusivement du dé — les listes sont publiques, la méthode est publique, et cela ne coûte rien : c'est le principe de Kerckhoffs. Ce qui se mémorise, c'est l'image mentale (exagérée, absurde, en mouvement). Ce qui se tape, ce sont les mots-clés, sans article ni accent : <span class="k mono">ambassadeur-dechire-banane</span>.</p>
  <p>Le fondement empirique n'est pas anecdotique : la littérature sur les histoires Personne-Action-Objet appliquées aux mots de passe (Blocki, Blum &amp; Datta, <a href="https://arxiv.org/abs/1302.5122">Naturally Rehearsing Passwords</a>) montre que des scènes tirées aléatoirement combinent syntaxe familière et associations inattendues — exactement ce que la mémoire humaine retient le mieux. Environ trois quarts des participants d'une étude de 2014 se rappelaient encore leurs quatre histoires PAO après plus de cinq mois.</p>
</section>

<section class="card">
  <h2>Combien de scènes ?</h2>
  <table>
    <tr><th>Scènes</th><th>Entropie</th><th>Verdict</th></tr>
    <tr><td class="num">2</td><td class="num">≈ 47 bits</td><td>Minimum, uniquement derrière une KDF forte (Argon2id, mémoire ≥ 64 Mo)</td></tr>
    <tr><td class="num">3</td><td class="num">≈ 70 bits</td><td><em>Recommandé</em> pour une passphrase maîtresse</td></tr>
    <tr><td class="num">4</td><td class="num">≈ 93 bits</td><td>Excellent — au-delà, le maillon faible est ailleurs (keylogger, pas force brute)</td></tr>
  </table>
  <p class="small">Ordre de grandeur : contre Argon2id bien réglé, un attaquant équipé plafonne à quelques milliers d'essais par seconde. 70 bits le placent hors de portée par des ordres de grandeur confortables.</p>
</section>

<section class="card">
  <h2>Les règles d'or</h2>
  <h3>Ne jamais rejouer un tirage</h3>
  <p>Relancer jusqu'à obtenir une scène « facile » détruit l'uniformité du tirage et donc le calcul d'entropie. La scène étrange est précisément celle qui se retient.</p>
  <h3>La scène fantôme</h3>
  <p>Une des scènes se mémorise mais ne s'écrit <em>nulle part</em>. Le papier seul devient alors mathématiquement insuffisant : il lui manque 23,3 bits, soit des millions de candidats à tester derrière une KDF lente. C'est la défense contre le scénario « quelqu'un trouve le papier ».</p>
  <h3>Le dé physique d'abord</h3>
  <p>Le générateur logiciel du navigateur (<span class="mono">crypto.getRandomValues</span>, exécuté en local) est un secours acceptable ; le dé reste supérieur car il ne dépend d'aucun logiciel, d'aucune machine, d'aucune confiance.</p>
</section>

<section class="card">
  <h2>Le protocole papier</h2>
  <h3>Papier A — chez soi</h3>
  <p>Les scènes <em>écrites en toutes lettres</em> (jamais en codes de dés), sans la scène fantôme, sans titre ni mention du gestionnaire. Support durable, endroit non évident mais retrouvable.</p>
  <h3>Papier B — ailleurs</h3>
  <p>Stocké dans un autre lieu (coffre, proche de confiance, enveloppe scellée) : l'<em>indice de méthode</em> par allusions que vous seul comprenez — où est le Papier A, comment retrouver la scène fantôme — jamais les secrets eux-mêmes. Peut mentionner le nom du gestionnaire et l'emplacement des sauvegardes du coffre.</p>
  <h3>Répétition espacée</h3>
  <p>Reconstruire la phrase de mémoire à J+1, J+3, J+7, J+14, J+30, J+90, puis deux fois par an à dates fixes. Le test semestriel se fait <em>depuis le papier et la méthode</em>, sans se laisser porter par la mémoire musculaire : c'est le seul moyen de vérifier que la procédure de secours fonctionne encore.</p>
</section>

<section class="card">
  <h2>Questions fréquentes</h2>
  <h3>Les listes sont-elles standard ? Que se passe-t-il si je les perds ?</h3>
  <p>Elles sont propres à ce projet — mais rien de vital n'en dépend. La sécurité ne repose pas sur leur secret (stockez-en des copies partout), et la récupération ne repose pas sur leur possession : le Papier A porte des mots, pas des codes. Les listes ne servent qu'à générer, vérifier une orthographe, ou retraduire un code. Elles sont <em>non secrètes mais irremplaçables</em> : gardez le PDF et ce site.</p>
  <h3>Taper les mots ou les codes de dés ?</h3>
  <p>Les mots. L'entropie est identique dans les deux cas, mais la scène mémorisée redonne directement les mots — pas les codes, qui exigeraient les tables à chaque déverrouillage. Les mots se corrigent à la frappe, s'ancrent dans la mémoire musculaire, et restent lisibles sur papier dans dix ans. Les codes ne servent qu'au moment du tirage, puis disparaissent du système.</p>
  <h3>Pourquoi pas un diceware classique ?</h3>
  <p>Le diceware reste excellent — cette méthode en est une variante, pas une réfutation. Elle échange un léger surcoût de mise en place (les tables) contre une densité supérieure (23,3 bits par unité mémorielle au lieu de 12,9) et une mémorabilité à long terme nettement meilleure, documentée par la recherche.</p>
  <h3>Et si quelqu'un connaît cette page ?</h3>
  <p>Tant mieux : la méthode est conçue pour être publique. Un attaquant qui connaît les listes, l'outil et le protocole fait toujours face à l'intégralité des bits tirés aux dés — c'est tout l'intérêt de fonder la sécurité sur l'aléa plutôt que sur l'obscurité.</p>
</section>

<section class="card">
  <h2>Limites honnêtes</h2>
  <p>Cette méthode protège contre la force brute hors ligne et contre la compromission du papier. Elle ne protège pas contre un enregistreur de frappe, un appareil compromis, ou la contrainte physique. Elle suppose une KDF correctement configurée côté gestionnaire, et un utilisateur qui fait réellement les répétitions espacées. Aucun schéma mnémotechnique ne remplace l'hygiène de la machine sur laquelle la phrase est tapée.</p>
</section>

</main>

<div class="foot wrap">
  <p><a href="index.html">Le générateur</a> · <a href="table-pao-imprimable.pdf">Tables PDF</a> — outil 100 % local, aucune donnée transmise ; rien du tirage n'est stocké.</p>
</div>

<script>
const themeBtns = document.querySelectorAll(".theme-btn");
function applyTheme(t, persist){
  if (t === "light" || t === "dark") document.documentElement.dataset.theme = t;
  else { t = ""; delete document.documentElement.dataset.theme; }
  if (persist){
    try{
      if (t) localStorage.setItem("table-pao:theme", t);
      else localStorage.removeItem("table-pao:theme");
    }catch(e){ /* stockage indisponible : préférence limitée à la session */ }
  }
  themeBtns.forEach(b => b.setAttribute("aria-pressed", String((b.dataset.themeSet || "") === t)));
}
themeBtns.forEach(b => b.addEventListener("click", () => applyTheme(b.dataset.themeSet, true)));
applyTheme(document.documentElement.dataset.theme || "", false);
</script>

</body>
</html>