diff --git a/algorithmes/crepier.html b/algorithmes/crepier.html
new file mode 100644
index 0000000..a8bdd0f
--- /dev/null
+++ b/algorithmes/crepier.html
@@ -0,0 +1,685 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Le Crêpier Psychorigide</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  :root {
+    --header-bg: #3b6d8f;
+    --header-bg-dark: #2c5570;
+    --panel-bg: #ffffff;
+    --app-bg: #e8e6e1;
+    --crepe-gold: #e2a830;
+    --crepe-dark: #c48a15;
+    --crepe-highlight: #f0c050;
+    --crepe-shadow: #a06e08;
+    --text-primary: #2a2a2a;
+    --text-secondary: #5a5a5a;
+    --success-green: #2d8a4e;
+    --warning-orange: #c67015;
+    --border-color: #b8b4ad;
+    --inset-shadow: inset 0 1px 3px rgba(0,0,0,0.12);
+  }
+
+  body {
+    font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
+    background: var(--app-bg);
+    background-image:
+      radial-gradient(circle at 20% 50%, rgba(59,109,143,0.04) 0%, transparent 50%),
+      radial-gradient(circle at 80% 20%, rgba(226,168,48,0.04) 0%, transparent 50%);
+    color: var(--text-primary);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 24px 16px;
+  }
+
+  .app {
+    width: 680px;
+    max-width: 100%;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    overflow: hidden;
+    box-shadow:
+      0 2px 8px rgba(0,0,0,0.1),
+      0 0 0 1px rgba(255,255,255,0.5) inset;
+    background: #f4f2ed;
+  }
+
+  /* ── Title bar ── */
+  .title-bar {
+    background: linear-gradient(180deg, var(--header-bg) 0%, var(--header-bg-dark) 100%);
+    color: white;
+    text-align: center;
+    padding: 10px 16px;
+    font-size: 15px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
+    border-bottom: 1px solid #1e3f55;
+    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+  }
+
+  /* ── Top panels row ── */
+  .top-row {
+    display: flex;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .panel {
+    background: var(--panel-bg);
+  }
+
+  .panel-header {
+    background: linear-gradient(180deg, #5a8fad 0%, #4a7d9b 100%);
+    color: white;
+    padding: 5px 12px;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+    border-bottom: 1px solid #3b6a82;
+  }
+
+  /* Instructions panel */
+  .instructions-panel {
+    flex: 1;
+    border-right: 1px solid var(--border-color);
+  }
+
+  .instructions-panel .panel-body {
+    padding: 12px 14px;
+    font-size: 13px;
+    line-height: 1.55;
+    color: var(--text-secondary);
+    min-height: 76px;
+    display: flex;
+    align-items: center;
+  }
+
+  /* Counter panel */
+  .counter-panel {
+    width: 160px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .counter-panel .panel-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    gap: 4px;
+  }
+
+  .spatula {
+    font-size: 28px;
+    filter: grayscale(0.3);
+    transform: rotate(-20deg);
+    display: inline-block;
+  }
+
+  .counter-value {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 32px;
+    font-weight: 500;
+    color: var(--text-primary);
+    line-height: 1;
+  }
+
+  /* ── Game area ── */
+  .game-section {
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .game-area {
+    background: var(--panel-bg);
+    min-height: 340px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 20px 30px 16px;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .game-area::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 85%;
+    height: 3px;
+    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
+    border-radius: 2px;
+  }
+
+  /* ── Pancake stack ── */
+  .pancake-stack {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+    position: relative;
+  }
+
+  .pancake {
+    height: 22px;
+    border-radius: 10px;
+    cursor: pointer;
+    position: relative;
+    transition: transform 0.08s ease, filter 0.1s ease;
+    /* 3D pancake look */
+    border: 1px solid var(--crepe-dark);
+    border-bottom: 2px solid var(--crepe-shadow);
+  }
+
+  .pancake-inner {
+    width: 100%;
+    height: 100%;
+    border-radius: 9px;
+    background:
+      linear-gradient(180deg,
+        rgba(255,255,255,0.25) 0%,
+        rgba(255,255,255,0.05) 30%,
+        transparent 50%,
+        rgba(0,0,0,0.05) 100%
+      ),
+      linear-gradient(90deg,
+        var(--crepe-dark) 0%,
+        var(--crepe-gold) 8%,
+        var(--crepe-highlight) 45%,
+        var(--crepe-gold) 55%,
+        var(--crepe-gold) 92%,
+        var(--crepe-dark) 100%
+      );
+    border-radius: 9px;
+  }
+
+  .pancake.hovered .pancake-inner {
+    background:
+      linear-gradient(180deg,
+        rgba(255,255,255,0.4) 0%,
+        rgba(255,255,255,0.15) 30%,
+        transparent 50%,
+        rgba(0,0,0,0.03) 100%
+      ),
+      linear-gradient(90deg,
+        #d49a20 0%,
+        #f0c040 8%,
+        #f8d868 45%,
+        #f0c040 55%,
+        #f0c040 92%,
+        #d49a20 100%
+      );
+  }
+
+  .pancake.hovered {
+    filter: brightness(1.05);
+    z-index: 2;
+  }
+
+  /* Spatula indicator line */
+  .spatula-line {
+    position: absolute;
+    left: -20px;
+    right: -20px;
+    height: 2px;
+    background: #c0392b;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+    z-index: 10;
+  }
+
+  .spatula-line.visible {
+    opacity: 0.6;
+  }
+
+  .spatula-line::before {
+    content: '🔪';
+    position: absolute;
+    left: -24px;
+    top: -10px;
+    font-size: 16px;
+    transform: scaleX(-1);
+  }
+
+  /* Flip animation */
+  .pancake.flipping {
+    animation: flipPancake 0.35s ease-in-out;
+  }
+
+  @keyframes flipPancake {
+    0% { transform: scaleY(1); }
+    40% { transform: scaleY(0) translateY(-8px); }
+    60% { transform: scaleY(0) translateY(-8px); }
+    100% { transform: scaleY(1); }
+  }
+
+  /* Sorted glow */
+  .pancake.sorted .pancake-inner {
+    background:
+      linear-gradient(180deg,
+        rgba(255,255,255,0.3) 0%,
+        rgba(255,255,255,0.1) 30%,
+        transparent 50%,
+        rgba(0,0,0,0.05) 100%
+      ),
+      linear-gradient(90deg,
+        #8faa30 0%,
+        #b0cc40 8%,
+        #c8e050 45%,
+        #b0cc40 55%,
+        #b0cc40 92%,
+        #8faa30 100%
+      );
+    border-color: #7a9428;
+  }
+
+  .pancake.sorted {
+    border-color: #7a9428;
+    border-bottom-color: #5a7018;
+  }
+
+  /* ── Controls bar ── */
+  .controls-bar {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    gap: 12px;
+    background: #f4f2ed;
+    border-top: 1px solid var(--border-color);
+  }
+
+  .controls-bar label {
+    font-size: 13px;
+    font-weight: 500;
+    white-space: nowrap;
+    color: var(--text-secondary);
+  }
+
+  .controls-bar input[type="range"] {
+    flex: 1;
+    height: 4px;
+    -webkit-appearance: none;
+    appearance: none;
+    background: #c8c4bc;
+    border-radius: 2px;
+    outline: none;
+    cursor: pointer;
+  }
+
+  .controls-bar input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: linear-gradient(180deg, #6a9ab8 0%, var(--header-bg) 100%);
+    border: 2px solid white;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+    cursor: pointer;
+  }
+
+  .controls-bar input[type="range"]::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: linear-gradient(180deg, #6a9ab8 0%, var(--header-bg) 100%);
+    border: 2px solid white;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+    cursor: pointer;
+  }
+
+  .crepe-count {
+    font-family: 'IBM Plex Mono', monospace;
+    font-size: 13px;
+    font-weight: 500;
+    min-width: 75px;
+    text-align: center;
+    color: var(--text-primary);
+  }
+
+  .btn {
+    font-family: 'IBM Plex Sans', sans-serif;
+    font-size: 13px;
+    font-weight: 600;
+    padding: 6px 18px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    cursor: pointer;
+    background: linear-gradient(180deg, #ffffff 0%, #e8e6e1 100%);
+    color: var(--text-primary);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
+    transition: all 0.1s ease;
+    white-space: nowrap;
+  }
+
+  .btn:hover {
+    background: linear-gradient(180deg, #ffffff 0%, #dddbd5 100%);
+    border-color: #a09c95;
+  }
+
+  .btn:active {
+    background: #dddbd5;
+    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+  }
+
+  /* ── Win overlay ── */
+  .win-overlay {
+    display: none;
+    position: absolute;
+    inset: 0;
+    background: rgba(255,255,255,0.92);
+    backdrop-filter: blur(3px);
+    z-index: 100;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    padding: 30px;
+    animation: fadeIn 0.4s ease;
+  }
+
+  .win-overlay.visible {
+    display: flex;
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  .win-title {
+    font-size: 26px;
+    font-weight: 700;
+    letter-spacing: -0.5px;
+  }
+
+  .win-title.optimal {
+    color: var(--success-green);
+  }
+
+  .win-title.suboptimal {
+    color: var(--warning-orange);
+  }
+
+  .win-message {
+    font-size: 14px;
+    text-align: center;
+    line-height: 1.6;
+    color: var(--text-secondary);
+    max-width: 380px;
+  }
+
+  .win-buttons {
+    display: flex;
+    gap: 10px;
+    margin-top: 6px;
+  }
+
+  .btn-primary {
+    background: linear-gradient(180deg, #4a8db5 0%, var(--header-bg) 100%);
+    color: white;
+    border-color: var(--header-bg-dark);
+  }
+
+  .btn-primary:hover {
+    background: linear-gradient(180deg, #5a9dc5 0%, #4580a5 100%);
+    border-color: #2a5570;
+  }
+
+  /* ── Disabled state during animation ── */
+  .game-area.animating .pancake {
+    pointer-events: none;
+  }
+</style>
+</head>
+<body>
+
+<div class="app">
+  <div class="title-bar">Le Crêpier Psychorigide</div>
+
+  <div class="top-row">
+    <div class="panel instructions-panel">
+      <div class="panel-header">Instructions</div>
+      <div class="panel-body">
+        Utilisez votre spatule pour retourner les crêpes jusqu'à obtenir une pile
+        ordonnée de la plus grande (en bas) à la plus petite (en haut). La spatule
+        retourne la pile des crêpes dont la base est celle sur laquelle vous cliquez.
+      </div>
+    </div>
+    <div class="panel counter-panel">
+      <div class="panel-header">Retournements</div>
+      <div class="panel-body">
+        <span class="spatula">🥄</span>
+        <span class="counter-value" id="counter">0</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="game-section">
+    <div class="panel-header">Pile de crêpes</div>
+    <div class="game-area" id="gameArea">
+      <div class="pancake-stack" id="stack"></div>
+      <div class="spatula-line" id="spatulaLine"></div>
+      <div class="win-overlay" id="winOverlay">
+        <div class="win-title" id="winTitle">Bravo !</div>
+        <div class="win-message" id="winMessage"></div>
+        <div class="win-buttons" id="winButtons"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="controls-bar">
+    <label for="sizeSlider">Nombre de crêpes</label>
+    <input type="range" id="sizeSlider" min="2" max="30" value="6">
+    <span class="crepe-count" id="crepeCount">6 crêpes</span>
+    <button class="btn" id="shuffleBtn">Mélanger</button>
+  </div>
+</div>
+
+<script>
+(function() {
+  const stackEl = document.getElementById('stack');
+  const counterEl = document.getElementById('counter');
+  const slider = document.getElementById('sizeSlider');
+  const crepeCountEl = document.getElementById('crepeCount');
+  const shuffleBtn = document.getElementById('shuffleBtn');
+  const gameArea = document.getElementById('gameArea');
+  const spatulaLine = document.getElementById('spatulaLine');
+  const winOverlay = document.getElementById('winOverlay');
+  const winTitle = document.getElementById('winTitle');
+  const winMessage = document.getElementById('winMessage');
+  const winButtons = document.getElementById('winButtons');
+
+  let pancakes = [];     // array of sizes (1..n), index 0 = top
+  let flips = 0;
+  let n = 6;
+  let animating = false;
+  let won = false;
+
+  function shuffle(arr) {
+    // Fisher-Yates then ensure it's not already sorted
+    let a = arr.slice();
+    do {
+      for (let i = a.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [a[i], a[j]] = [a[j], a[i]];
+      }
+    } while (isSorted(a));
+    return a;
+  }
+
+  function isSorted(arr) {
+    for (let i = 0; i < arr.length - 1; i++) {
+      if (arr[i] > arr[i + 1]) return false;
+    }
+    return true;
+  }
+
+  function maxWidth() {
+    return Math.min(580, gameArea.clientWidth - 60);
+  }
+
+  function pancakeWidth(size) {
+    const minW = 30;
+    const maxW = maxWidth();
+    return minW + (size - 1) * ((maxW - minW) / (n - 1));
+  }
+
+  function render() {
+    stackEl.innerHTML = '';
+    pancakes.forEach((size, index) => {
+      const el = document.createElement('div');
+      el.className = 'pancake';
+      el.style.width = pancakeWidth(size) + 'px';
+      el.dataset.index = index;
+
+      const inner = document.createElement('div');
+      inner.className = 'pancake-inner';
+      el.appendChild(inner);
+
+      el.addEventListener('mouseenter', () => onHover(index));
+      el.addEventListener('mouseleave', () => offHover());
+      el.addEventListener('click', () => onFlip(index));
+
+      stackEl.appendChild(el);
+    });
+  }
+
+  function onHover(index) {
+    if (animating || won) return;
+    const els = stackEl.querySelectorAll('.pancake');
+    els.forEach((el, i) => {
+      if (i <= index) el.classList.add('hovered');
+      else el.classList.remove('hovered');
+    });
+
+    // Position spatula line
+    const targetEl = els[index];
+    if (targetEl) {
+      const stackRect = stackEl.getBoundingClientRect();
+      const targetRect = targetEl.getBoundingClientRect();
+      const bottom = targetRect.bottom - stackRect.top;
+      spatulaLine.style.top = bottom + 'px';
+      spatulaLine.classList.add('visible');
+    }
+  }
+
+  function offHover() {
+    stackEl.querySelectorAll('.pancake').forEach(el => el.classList.remove('hovered'));
+    spatulaLine.classList.remove('visible');
+  }
+
+  function onFlip(index) {
+    if (animating || won) return;
+    if (index === 0) return; // flipping just the top pancake does nothing useful
+
+    animating = true;
+    gameArea.classList.add('animating');
+
+    const els = Array.from(stackEl.querySelectorAll('.pancake'));
+    const toFlip = els.slice(0, index + 1);
+
+    // Animate
+    toFlip.forEach(el => el.classList.add('flipping'));
+
+    setTimeout(() => {
+      // Actually reverse the sub-array
+      const sub = pancakes.slice(0, index + 1);
+      sub.reverse();
+      for (let i = 0; i <= index; i++) {
+        pancakes[i] = sub[i];
+      }
+
+      flips++;
+      counterEl.textContent = flips;
+
+      render();
+      offHover();
+
+      animating = false;
+      gameArea.classList.remove('animating');
+
+      if (isSorted(pancakes)) {
+        won = true;
+        showWin();
+      }
+    }, 350);
+  }
+
+  function showWin() {
+    const optimal = flips <= 2 * (n - 1);
+
+    // Mark all as sorted with stagger
+    const els = stackEl.querySelectorAll('.pancake');
+    els.forEach((el, i) => {
+      setTimeout(() => el.classList.add('sorted'), i * 60);
+    });
+
+    setTimeout(() => {
+      if (optimal) {
+        winTitle.textContent = 'Bravo !';
+        winTitle.className = 'win-title optimal';
+        winMessage.textContent = 'Félicitations ! Vous avez trouvé une démarche systématique et efficace.';
+        winButtons.innerHTML = '<button class="btn btn-primary" onclick="window._restart()">Rejouer</button>';
+      } else {
+        winTitle.textContent = 'Bravo !';
+        winTitle.className = 'win-title suboptimal';
+        winMessage.textContent = 'Vous avez réussi, mais vous avez fait de nombreux retournements inutiles. Voulez-vous recommencer ?';
+        winButtons.innerHTML =
+          '<button class="btn" onclick="window._dismiss()">Non</button>' +
+          '<button class="btn btn-primary" onclick="window._restart()">Oui</button>';
+      }
+      winOverlay.classList.add('visible');
+    }, els.length * 60 + 400);
+  }
+
+  window._restart = function() {
+    winOverlay.classList.remove('visible');
+    init();
+  };
+
+  window._dismiss = function() {
+    winOverlay.classList.remove('visible');
+  };
+
+  function init() {
+    n = parseInt(slider.value);
+    crepeCountEl.textContent = n + ' crêpe' + (n > 1 ? 's' : '');
+    flips = 0;
+    won = false;
+    counterEl.textContent = '0';
+    winOverlay.classList.remove('visible');
+
+    const sizes = [];
+    for (let i = 1; i <= n; i++) sizes.push(i);
+    pancakes = shuffle(sizes);
+
+    render();
+  }
+
+  slider.addEventListener('input', () => {
+    n = parseInt(slider.value);
+    crepeCountEl.textContent = n + ' crêpe' + (n > 1 ? 's' : '');
+  });
+
+  slider.addEventListener('change', init);
+  shuffleBtn.addEventListener('click', init);
+
+  init();
+})();
+</script>
+
+</body>
+</html>
