{"id":1419,"date":"2026-08-27T11:55:31","date_gmt":"2026-08-27T09:55:31","guid":{"rendered":"https:\/\/iconoclaste.net\/blog\/?p=1419"},"modified":"2026-08-28T01:10:47","modified_gmt":"2026-08-27T23:10:47","slug":"druuna","status":"publish","type":"post","link":"https:\/\/iconoclaste.net\/blog\/2026\/08\/27\/druuna\/","title":{"rendered":"Druuna"},"content":{"rendered":"\n<!--\n  DRUUNA \u2013 effet Commodore 64 (typewriter + curseur)\n  iconoclaste.net \u2013 2026-08-27\n-->\n<div id=\"iconoclaste-c64\" class=\"c64-boot\" role=\"button\" tabindex=\"0\" aria-label=\"Terminal Commodore 64 \u2014 Druuna, tap pour lancer\">\n  <div class=\"c64-bezel\">\n    <div class=\"c64-screen\">\n      <div class=\"c64-scanlines\" aria-hidden=\"true\"><\/div>\n      <div id=\"c64-output\" class=\"c64-output\"><\/div>\n      <span id=\"c64-cursor\" class=\"c64-cursor\" aria-hidden=\"true\">\u2588<\/span>\n      <div id=\"c64-pic\" class=\"c64-pic\" aria-hidden=\"true\">\n        <img id=\"c64-pic-img\" src=\"https:\/\/iconoclaste.net\/blog\/wp-content\/uploads\/2026\/08\/dr_uu_na.webp\" alt=\"Druuna\" width=\"720\" height=\"auto\" decoding=\"async\">\n        <div id=\"c64-pic-shutter\" class=\"c64-pic-shutter\"><\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<style>\n  #iconoclaste-c64 {\n    --c64-bg: #000000;\n    --c64-fg: #55ff55;\n    --c64-hi: #c8ffc8;\n    box-sizing: border-box;\n    width: 100%;\n    max-width: 720px;\n    margin: 0 auto 1.7em;\n    font-family: \"Courier New\", Courier, \"Lucida Console\", Monaco, monospace;\n    -webkit-tap-highlight-color: transparent;\n    user-select: none;\n    -webkit-user-select: none;\n    touch-action: manipulation;\n    cursor: pointer;\n  }\n  #iconoclaste-c64 *,\n  #iconoclaste-c64 *::before,\n  #iconoclaste-c64 *::after {\n    box-sizing: border-box;\n  }\n  .c64-bezel {\n    background: transparent;\n    border: 0;\n    padding: 0;\n  }\n  .c64-screen {\n    position: relative;\n    background: var(--c64-bg);\n    color: var(--c64-fg);\n    min-height: 0;\n    max-height: none;\n    height: auto;\n    overflow: visible;\n    padding: 16px 16px 24px;\n    text-shadow: 0 0 6px rgba(85, 255, 85, 0.35);\n    border: 0 !important;\n    box-shadow: none !important;\n  }\n  #iconoclaste-c64 .c64-output,\n  #iconoclaste-c64 pre,\n  .entry-content #iconoclaste-c64 pre,\n  .entry-content #iconoclaste-c64 .c64-output {\n    display: inline;\n    margin: 0 !important;\n    padding: 0 !important;\n    border: 0 !important;\n    outline: 0 !important;\n    box-shadow: none !important;\n    background: transparent !important;\n    color: inherit !important;\n    text-decoration: none !important;\n    white-space: pre-wrap;\n    word-break: break-word;\n    overflow-wrap: anywhere;\n    font-family: inherit !important;\n    font-size: 15px;\n    line-height: 1.45;\n  }\n  .c64-num {\n    color: var(--c64-hi);\n    text-shadow: 0 0 8px rgba(200, 255, 200, 0.55);\n  }\n  .c64-cursor {\n    display: inline-block;\n    width: 0.7em;\n    color: var(--c64-fg);\n    font-size: 15px;\n    line-height: 1.45;\n    animation: c64-blink 0.7s steps(1, end) infinite;\n    vertical-align: baseline;\n  }\n  @keyframes c64-blink {\n    0%, 49% { opacity: 1; }\n    50%, 100% { opacity: 0; }\n  }\n  .c64-scanlines {\n    pointer-events: none;\n    position: absolute;\n    inset: 0;\n    background: repeating-linear-gradient(\n      to bottom,\n      rgba(0, 0, 0, 0) 0px,\n      rgba(0, 0, 0, 0) 2px,\n      rgba(0, 0, 0, 0.18) 3px\n    );\n    mix-blend-mode: multiply;\n    opacity: 0.55;\n    z-index: 3;\n  }\n  .c64-pic {\n    display: none;\n    position: relative;\n    width: 100%;\n    margin: 14px 0 0;\n    line-height: 0;\n    overflow: hidden;\n    background: #000;\n  }\n  #iconoclaste-c64.c64-pic-on .c64-pic {\n    display: block;\n  }\n  .c64-pic img,\n  .entry-content #iconoclaste-c64 .c64-pic img {\n    display: block !important;\n    width: 100% !important;\n    max-width: 100% !important;\n    height: auto !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    border: 0 !important;\n    border-radius: 0 !important;\n    box-shadow: none !important;\n    background: #000;\n  }\n  .c64-pic-shutter {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    height: 100%;\n    background: #000;\n    z-index: 2;\n    pointer-events: none;\n  }\n  #iconoclaste-c64.c64-running,\n  #iconoclaste-c64.c64-done {\n    cursor: default;\n  }\n  @media (max-width: 600px) {\n    .c64-screen {\n      min-height: 0;\n      max-height: none;\n      padding: 12px 12px 24px;\n    }\n    .c64-output,\n    .c64-cursor {\n      font-size: 13px;\n    }\n  }\n<\/style>\n<script>\n(function () {\n  var root = document.getElementById('iconoclaste-c64');\n  if (!root || root.dataset.bound === '1') return;\n  root.dataset.bound = '1';\n  var output = document.getElementById('c64-output');\n  var pic = document.getElementById('c64-pic');\n  var picImg = document.getElementById('c64-pic-img');\n  var shutter = document.getElementById('c64-pic-shutter');\n\n  var BOOT = 'LOAD \"DRUUNA\",8,1 \\nPRESS CLIC\/TAP FOR RUN\\n';\n  var PROGRAM = [\n    { hl: true,  t: '10 # KONTEXT' },\n    { hl: false, t: '\\nDRUUNA VIT DANS UN FUTUR POST-APOCALYPTIQUE DELABRE, ET EVOLUE DANS UNE VILLE QUI SE REVELE ETRE UN IMMENSE VAISSEAU SPATIAL A LA DERIVE. UN VIRUS APPELE MORBUS GRAVIS TRANSFORME LES HUMAINS EN MUTANTS ASSOIFFES DE SEXE ET DE SANG.\\n\\n' },\n    { hl: true,  t: '20 # PROTAGO' },\n    { hl: false, t: '\\nDRUUNA EST UNE FEMME TRES VOLUPTUEUSE, AUX FORMES GENEREUSES, CHEVEUX NOIRS, TEINT KARDASHIAN ET D\\'APPARENCE MEDITERRANEENNE OU LATINO.\\n\\n' },\n    { hl: true,  t: '30 # GRIBOUILLARD' },\n    { hl: false, t: '\\nSERPIERI EST UN DESSINATEUR HYPER-REALISTE, CONNU POUR LE RENDU DETAILLE DES FESSES FEMININES \u2014 ON L\\'A SURNOMME \u00abMASTER OF THE ICONOCL-ASS\u00bb. DRUUNA EST DECRITE COMME SA \u00ab FEMME IDEALE \u00bb.\\n\\n' },\n    { hl: true,  t: '40 # KRITIK' },\n    { hl: false, t: '\\nLA SERIE DRUUNA MELANGE EROTISME, VIOLENCE GRAPHIQUE, HORREUR CORPORELLE ET THEMES PSEUDO INTELLECTUELS.\\nOEUVRE CULTE DANS LE MILIEU DE LA BD, VENDUE A PLUS D\\'UN MILLION D\\'EXEMPLAIRES, ELLE EST LA CORNE DE BRUME DU MAGAZINE METAL HURLANT.\\nEN 202X, CETTE SERIE EST TRES POLARISANTE : ADMIREE POUR LE DESSIN ET L\\'AUDACE, CRITIQUEE POUR LE TRAITEMENT DU PERSONNAGE FEMININ.' }\n  ];\n\n  var CHAR_MS = 12; \/\/ delai caracteres\n  var NL_MS = 75; \/\/ delai retour a la ligne\n  var BAND_PX = 8;\n  var BAND_MS = 28;\n  var phase = 'boot';\n  var chunks = [{ hl: false, t: BOOT }];\n  var c = 0;\n  var i = 0;\n  var node = null;\n  var timer = null;\n  var lastPointer = 0;\n  var imgReady = false;\n\n  if (picImg) {\n    if (picImg.complete && picImg.naturalWidth) {\n      imgReady = true;\n    } else {\n      picImg.addEventListener('load', function () { imgReady = true; });\n    }\n  }\n\n  function delayFor(ch) {\n    if (ch === '\\n') return NL_MS;\n    if (ch === '.') return 70;\n    if (ch === ',') return 45;\n    return CHAR_MS;\n  }\n\n  function appendChar(ch, hl) {\n    if (!node || node._hl !== hl) {\n      if (hl) {\n        node = document.createElement('span');\n        node.className = 'c64-num';\n        node._hl = true;\n        output.appendChild(node);\n      } else {\n        node = document.createTextNode('');\n        node._hl = false;\n        output.appendChild(node);\n      }\n    }\n    node.textContent += ch;\n  }\n\n  function revealImage() {\n    if (!pic || !shutter || !picImg) {\n      phase = 'done';\n      root.classList.add('c64-done');\n      return;\n    }\n    phase = 'image';\n    root.classList.add('c64-pic-on');\n    shutter.style.height = '100%';\n\n    function go() {\n      var h = pic.offsetHeight || picImg.offsetHeight || 0;\n      if (!h) {\n        window.setTimeout(go, 40);\n        return;\n      }\n      var revealed = 0;\n      function step() {\n        revealed += BAND_PX;\n        var left = Math.max(0, h - revealed);\n        shutter.style.height = left + 'px';\n        if (left > 0) {\n          timer = window.setTimeout(step, BAND_MS);\n        } else {\n          shutter.style.height = '0';\n          phase = 'done';\n          root.classList.remove('c64-running');\n          root.classList.add('c64-done');\n          timer = null;\n        }\n      }\n      step();\n    }\n\n    if (imgReady) {\n      go();\n    } else {\n      picImg.addEventListener('load', go, { once: true });\n      window.setTimeout(function () {\n        if (phase === 'image') go();\n      }, 2500);\n    }\n  }\n\n  function tick() {\n    if (c >= chunks.length) {\n      if (phase === 'boot') {\n        phase = 'wait';\n        root.classList.remove('c64-boot');\n        root.classList.add('c64-wait');\n      } else if (phase === 'run') {\n        revealImage();\n      }\n      timer = null;\n      return;\n    }\n    var chunk = chunks[c];\n    if (i >= chunk.t.length) {\n      c += 1;\n      i = 0;\n      node = null;\n      timer = window.setTimeout(tick, 0);\n      return;\n    }\n    var ch = chunk.t.charAt(i);\n    appendChar(ch, !!chunk.hl);\n    i += 1;\n    timer = window.setTimeout(tick, delayFor(ch));\n  }\n\n  function startBoot() {\n    phase = 'boot';\n    chunks = [{ hl: false, t: BOOT }];\n    c = 0;\n    i = 0;\n    node = null;\n    output.textContent = '';\n    root.className = 'c64-boot';\n    if (shutter) shutter.style.height = '100%';\n    timer = window.setTimeout(tick, 250);\n  }\n\n  function startRun() {\n    if (phase !== 'wait') return;\n    phase = 'run';\n    root.classList.remove('c64-wait');\n    root.classList.add('c64-running');\n    output.textContent = '';\n    chunks = PROGRAM;\n    c = 0;\n    i = 0;\n    node = null;\n    timer = window.setTimeout(tick, 80);\n  }\n\n  function onActivate(e) {\n    if (phase !== 'wait') return;\n    if (e) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n    var now = Date.now();\n    if (now - lastPointer < 400) return;\n    lastPointer = now;\n    startRun();\n  }\n\n  root.addEventListener('pointerup', onActivate);\n  root.addEventListener('keydown', function (e) {\n    if (phase !== 'wait') return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      onActivate(e);\n    }\n  });\n\n  startBoot();\n})();\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\">Dev+illu : <mark style=\"background-color:#ff33ff\" class=\"has-inline-color has-white-color\">L' iconoclaste<\/mark><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u2588 Dev+illu : L&rsquo; iconoclaste<\/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":[308,101],"class_list":["post-1419","post","type-post","status-publish","format-standard","hentry","category-experiences","tag-bande-dessinee","tag-girl"],"_links":{"self":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/1419","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=1419"}],"version-history":[{"count":11,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/1419\/revisions"}],"predecessor-version":[{"id":1432,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/posts\/1419\/revisions\/1432"}],"wp:attachment":[{"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/media?parent=1419"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/categories?post=1419"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iconoclaste.net\/blog\/wp-json\/wp\/v2\/tags?post=1419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}