{"id":1629,"date":"2026-09-12T11:21:57","date_gmt":"2026-09-12T09:21:57","guid":{"rendered":"https:\/\/iconoclaste.net\/blog\/?p=1629"},"modified":"2026-09-16T11:15:35","modified_gmt":"2026-09-16T09:15:35","slug":"les-tribulations-de-mr-pilou","status":"publish","type":"post","link":"https:\/\/iconoclaste.net\/blog\/2026\/09\/12\/les-tribulations-de-mr-pilou\/","title":{"rendered":"Mr.Pilou boit&#8230;"},"content":{"rendered":"\n<!--\n  iconoclaste.net \u2013 2026-09-12\n-->\n\n<div id=\"iconoclaste-etapechoix\">\n  <div id=\"pilou-stage\">\n    <img fetchpriority=\"high\" id=\"pilou-img\" src=\"https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/09\/pilou_loading.webp\" alt=\"Mr.Pilou\" width=\"800\" height=\"800\" loading=\"eager\" decoding=\"async\">\n\n    <div id=\"pilou-preload\">\n      <div class=\"pilou-progress-wrap\">\n        <span>chargement des images<\/span>\n        <div class=\"pilou-progress-bar\">\n          <div class=\"pilou-progress-fill\" id=\"pilou-progress-fill\"><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div id=\"pilou-ui\" hidden=\"\">\n    <!-- START -->\n    <div id=\"pilou-panel-start\" class=\"pilou-panel\">\n      <p>\n        Peux-tu deviner<br>\n        en combien de gorg\u00e9es<br>\n        Mr.Pilou aphone sa pinte?\n      <\/p>\n      <form id=\"pilou-form\" action=\"#\" method=\"post\" autocomplete=\"off\">\n        <label for=\"pilou-guess\">Encode un chiffre entre 1 et 9!<\/label>\n        <input id=\"pilou-guess\" name=\"pilou-guess\" type=\"number\" inputmode=\"numeric\" pattern=\"[1-9]\" min=\"1\" max=\"9\" step=\"1\" required=\"\" aria-label=\"Chiffre entre 1 et 9\">\n        <button type=\"submit\" id=\"pilou-submit\">C&rsquo;est parti<\/button>\n      <\/form>\n    <\/div>\n\n    <!-- OK -->\n    <div id=\"pilou-panel-ok\" class=\"pilou-panel\" hidden=\"\">\n      <p>\n        Mr.Pilou te remet au d\u00e9fi<br>\n        Veux tu essayer avec une bi\u00e8re plus forte?\n      <\/p>\n      <button type=\"button\" class=\"pilou-oui\" id=\"pilou-oui-ok\">OUI<\/button>\n    <\/div>\n\n    <!-- RATE -->\n    <div id=\"pilou-panel-rate\" class=\"pilou-panel\" hidden=\"\">\n      <p id=\"pilou-rate-text\"><\/p>\n      <button type=\"button\" class=\"pilou-oui\" id=\"pilou-oui-rate\">OUI<\/button>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n  #iconoclaste-etapechoix {\n    position: relative;\n    width: 100%;\n    max-width: 100%;\n    margin: 0 auto 1.5em;\n    background: transparent;\n    text-align: center;\n    -webkit-tap-highlight-color: transparent;\n    user-select: none;\n    -webkit-user-select: none;\n    box-sizing: border-box;\n  }\n\n  #iconoclaste-etapechoix *,\n  #iconoclaste-etapechoix *::before,\n  #iconoclaste-etapechoix *::after {\n    box-sizing: border-box;\n  }\n\n  #pilou-stage {\n    position: relative;\n    width: 100%;\n    line-height: 0;\n  }\n\n  #iconoclaste-etapechoix img,\n  #pilou-img {\n    display: block;\n    width: 100%;\n    max-width: 100%;\n    height: auto;\n    margin: 0 auto;\n    border: none !important;\n    outline: none !important;\n    box-shadow: none !important;\n    border-radius: 0 !important;\n    vertical-align: top;\n    pointer-events: none;\n    background: transparent;\n  }\n\n  #pilou-preload {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 12px;\n    display: flex;\n    justify-content: center;\n    pointer-events: none;\n    z-index: 5;\n  }\n\n  #pilou-preload.hidden {\n    display: none;\n  }\n\n  .pilou-progress-wrap {\n    background: rgba(0, 0, 0, 0.72);\n    color: #fff;\n    padding: 6px 14px 8px;\n    border-radius: 4px;\n    font-family: \"Courier New\", Courier, monospace;\n    font-size: 12px;\n    text-align: center;\n    white-space: nowrap;\n  }\n\n  .pilou-progress-bar {\n    width: 140px;\n    height: 4px;\n    background: #333;\n    margin: 5px auto 0;\n    border-radius: 2px;\n    overflow: hidden;\n  }\n\n  .pilou-progress-fill {\n    height: 100%;\n    width: 0%;\n    background: #ff33ff;\n    transition: width 0.12s linear;\n  }\n\n  #pilou-ui {\n    width: 100%;\n    margin-top: 14px;\n    font-family: \"Courier New\", Courier, monospace;\n    color: #000;\n  }\n\n  .pilou-panel {\n    width: 100%;\n    text-align: center;\n  }\n\n  .pilou-panel p {\n    margin: 0 0 14px;\n    padding: 0 8px;\n    font-size: 16px;\n    line-height: 1.45;\n    font-weight: normal;\n    color: #000;\n  }\n\n  #pilou-form {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 10px;\n    width: 100%;\n    max-width: 320px;\n    margin: 0 auto;\n  }\n\n  #pilou-form label {\n    display: block;\n    font-size: 15px;\n    line-height: 1.4;\n    color: #000;\n  }\n\n  #pilou-guess {\n    width: 88px;\n    max-width: 100%;\n    height: 48px;\n    padding: 8px 6px;\n    text-align: center;\n    font-family: \"Courier New\", Courier, monospace;\n    font-size: 22px;\n    line-height: 1;\n    color: #000;\n    background: #fff;\n    border: 2px solid #ff33ff;\n    border-radius: 4px;\n    outline: none;\n    -webkit-appearance: none;\n    appearance: textfield;\n  }\n\n  #pilou-guess::-webkit-outer-spin-button,\n  #pilou-guess::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  #pilou-guess:focus {\n    border-color: #ff0000;\n    box-shadow: 0 0 0 2px rgba(255, 51, 255, 0.25);\n  }\n\n  #pilou-submit,\n  .pilou-oui {\n    display: inline-block;\n    min-width: 160px;\n    min-height: 44px;\n    padding: 10px 22px;\n    margin: 4px 0 0;\n    font-family: \"Courier New\", Courier, monospace;\n    font-size: 16px;\n    line-height: 1.2;\n    color: #fff;\n    background: #ff33ff;\n    border: none;\n    border-radius: 3px;\n    cursor: pointer;\n    -webkit-appearance: none;\n    appearance: none;\n    touch-action: manipulation;\n  }\n\n  #pilou-submit:hover,\n  #pilou-submit:focus,\n  .pilou-oui:hover,\n  .pilou-oui:focus {\n    background: #ff0000;\n    color: #fff;\n    outline: none;\n  }\n\n  #pilou-submit:disabled {\n    opacity: 0.55;\n    cursor: default;\n  }\n\n  @media screen and (max-width: 600px) {\n    .pilou-panel p {\n      font-size: 15px;\n    }\n\n    #pilou-guess {\n      width: 96px;\n      height: 52px;\n      font-size: 24px;\n    }\n\n    #pilou-submit,\n    .pilou-oui {\n      width: 80%;\n      max-width: 280px;\n      min-height: 48px;\n      font-size: 16px;\n    }\n  }\n<\/style>\n\n<script>\n(function () {\n  \"use strict\";\n\n  if (window.__iconoclasteEtapeChoixInit) return;\n  window.__iconoclasteEtapeChoixInit = true;\n\n  var BASE = \"https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/09\/\";\n\n  var IMG = {\n    loading: BASE + \"pilou_loading.webp\",\n    start:   BASE + \"pilou_10.webp\",\n    drink:   [BASE + \"pilou_20.webp\", BASE + \"pilou_21.webp\"],\n    rate:    [\n      BASE + \"pilou_30.webp\",\n      BASE + \"pilou_31.webp\",\n      BASE + \"pilou_32.webp\",\n      BASE + \"pilou_33.webp\",\n      BASE + \"pilou_40.webp\",\n      BASE + \"pilou_41.webp\"\n    ],\n    rateLoop: [BASE + \"pilou_40.webp\", BASE + \"pilou_41.webp\"],\n    ok:      BASE + \"pilou_50.webp\"\n  };\n\n  var ALL = [IMG.loading, IMG.start, IMG.ok]\n    .concat(IMG.drink, IMG.rate);\n\n  \/* Drink = moyenne ; rate = acc\u00e9l\u00e9r\u00e9 *\/\n  var DRINK_MS = 240;\n  var RATE_MS  = 110;\n  var LOOP_MS  = 150;\n\n  function wait(ms) {\n    return new Promise(function (resolve) {\n      setTimeout(resolve, ms);\n    });\n  }\n\n  function secretNumber() {\n    return Math.floor(Math.random() * 7) + 3; \/* 3 \u2192 9 *\/\n  }\n\n  function preloadAll(onProgress) {\n    var done = 0;\n    var total = ALL.length;\n\n    return Promise.all(ALL.map(function (src) {\n      return new Promise(function (resolve) {\n        var im = new Image();\n        im.onload = im.onerror = function () {\n          done += 1;\n          if (onProgress) onProgress(done, total);\n          resolve();\n        };\n        im.src = src;\n      });\n    }));\n  }\n\n  function init() {\n    var root      = document.getElementById(\"iconoclaste-etapechoix\");\n    var img       = document.getElementById(\"pilou-img\");\n    var preloadEl = document.getElementById(\"pilou-preload\");\n    var fill      = document.getElementById(\"pilou-progress-fill\");\n    var ui        = document.getElementById(\"pilou-ui\");\n    var panStart  = document.getElementById(\"pilou-panel-start\");\n    var panOk     = document.getElementById(\"pilou-panel-ok\");\n    var panRate   = document.getElementById(\"pilou-panel-rate\");\n    var rateText  = document.getElementById(\"pilou-rate-text\");\n    var form      = document.getElementById(\"pilou-form\");\n    var input     = document.getElementById(\"pilou-guess\");\n    var submitBtn = document.getElementById(\"pilou-submit\");\n    var ouiOk     = document.getElementById(\"pilou-oui-ok\");\n    var ouiRate   = document.getElementById(\"pilou-oui-rate\");\n\n    if (!root || !img || !form) return;\n\n    var secret = 0;\n    var busy = true;\n    var loopTimer = null;\n\n    function showPanel(which) {\n      panStart.hidden = which !== \"start\";\n      panOk.hidden    = which !== \"ok\";\n      panRate.hidden  = which !== \"rate\";\n      ui.hidden       = !which;\n    }\n\n    function setFrame(src) {\n      if (img.src !== src) img.src = src;\n    }\n\n    function stopLoop() {\n      if (loopTimer) {\n        clearInterval(loopTimer);\n        loopTimer = null;\n      }\n    }\n\n    function startLoop(frames, speed) {\n      stopLoop();\n      var i = 0;\n      setFrame(frames[0]);\n      loopTimer = setInterval(function () {\n        i = (i + 1) % frames.length;\n        setFrame(frames[i]);\n      }, speed);\n    }\n\n    function playSequence(frames, speed) {\n      return frames.reduce(function (chain, src) {\n        return chain.then(function () {\n          setFrame(src);\n          return wait(speed);\n        });\n      }, Promise.resolve());\n    }\n\n    function playDrink(times) {\n      var seq = [];\n      var n = Math.max(1, times | 0);\n      var i;\n      for (i = 0; i < n; i++) {\n        seq = seq.concat(IMG.drink);\n      }\n      return playSequence(seq, DRINK_MS);\n    }\n\n    function goStart() {\n      stopLoop();\n      secret = secretNumber();\n      busy = false;\n      input.value = \"\";\n      submitBtn.disabled = false;\n      setFrame(IMG.start);\n      showPanel(\"start\");\n      \/* SUPPRIM\u00c9 : input.focus() qui causait le scroll automatique *\/\n    }\n\n    function onSubmit(ev) {\n      ev.preventDefault();\n      if (busy) return;\n\n      var raw = String(input.value || \"\").trim();\n      var guess = parseInt(raw, 10);\n      if (!guess || guess < 1 || guess > 9) {\n        try { input.focus(); } catch (e) {}\n        return;\n      }\n\n      busy = true;\n      submitBtn.disabled = true;\n      showPanel(null);\n\n      var win = (guess === secret);\n\n      playDrink(guess).then(function () {\n        if (win) {\n          setFrame(IMG.ok);\n          showPanel(\"ok\");\n          busy = false;\n        } else {\n          return playSequence(IMG.rate, RATE_MS).then(function () {\n            startLoop(IMG.rateLoop, LOOP_MS);\n            if (rateText) {\n              rateText.innerHTML =\n                secret + \" gorg\u00e9es pour aphoner\u2026<br>\" +\n                \"Pas plus, pas moins<br>\" +\n                \"Veux tu essayer avec une bi\u00e8re moins forte?\";\n            }\n            showPanel(\"rate\");\n            busy = false;\n          });\n        }\n      });\n    }\n\n    form.addEventListener(\"submit\", onSubmit);\n    ouiOk.addEventListener(\"click\", function () {\n      if (busy) return;\n      goStart();\n    });\n    ouiRate.addEventListener(\"click\", function () {\n      if (busy) return;\n      goStart();\n    });\n\n    setFrame(IMG.loading);\n    showPanel(null);\n\n    preloadAll(function (done, total) {\n      if (fill) fill.style.width = Math.round((done \/ total) * 100) + \"%\";\n    }).then(function () {\n      if (preloadEl) preloadEl.classList.add(\"hidden\");\n      goStart();\n    });\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\"DOMContentLoaded\", init);\n  } else {\n    init();\n  }\n})();\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>chargement des images Peux-tu deviner en combien de gorg\u00e9es Mr.Pilou aphone sa pinte? Encode un chiffre entre 1 et 9! C&rsquo;est parti Mr.Pilou te remet au d\u00e9fi Veux tu essayer avec une bi\u00e8re plus forte? OUI OUI<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[269],"tags":[324,325,326],"class_list":["post-1629","post","type-post","status-publish","format-standard","hentry","category-experiences","tag-biere","tag-ho_si_je_peux_aider","tag-surpuissant"],"_links":{"self":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/1629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/comments?post=1629"}],"version-history":[{"count":10,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/1629\/revisions"}],"predecessor-version":[{"id":1899,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/1629\/revisions\/1899"}],"wp:attachment":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/media?parent=1629"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/categories?post=1629"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/tags?post=1629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}