:: StoryTitle
Melville enquête


:: StoryData
{
  "ifid": "DD81F390-76BC-4EDC-B853-503E993CE489",
  "format": "Harlowe",
  "format-version": "3.3.9",
  "start": "Start",
  "zoom": 1
}


:: Alain de loin {"position":"650,350","size":"100,100"}
(display: "HUD")
<style>
  html, body {
    margin: 0;
    padding: 0;
    background: url("https://files.catbox.moe/93srdi.jpg") center center fixed no-repeat !important;
    background-size: cover !important;
  }

  tw-story, tw-passage {
    background: transparent !important;
    color: white !important;
  }
</style>
<script>

  if (window.radioAudio) {
    window.radioAudio.pause();
  }


  if (window.ambianceDelon) {
    window.ambianceDelon.pause();
    window.ambianceDelon = null;
  }


  const amb = new Audio("https://files.catbox.moe/eiximt.mp3");
  amb.volume = 0.8;
  amb.loop = false; 
  amb.play().catch(()=>{});


  window.ambianceDelon = amb;
</script>


<p>
  <img src="https://files.catbox.moe/d6h4z8.gif" alt="Rue nocturne sous la pluie" style="max-width: 600px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
</p>

<p>
  Vous descendez dans la rue, Alain Delon et toi. Il court devant toi mais tu ne fais rien pour le rattraper. 
  Tu es méfiant. C'est bien trop beau pour être vrai.
</p>

<p>
  Alain Delon s'en aperçoit.
</p>

<div class="dialogue">
  <p><strong>Alain Delon&nbsp;:</strong> « Tu ne fais pas confiance à Delon, petit&nbsp;? On ne peut pas ne pas suivre Delon. Tu es avec moi ou contre moi. »</p>
</div>

<p>
 Il sort son pistolet (link: "silencieux")[
      (append: ?silencieux)[
        <script>
          const crowd = new Audio("https://files.catbox.moe/4i8nv9.mp3");
          crowd.play().catch(()=>{});
        </script>
      ]
    ] et te tire dessus.
</p>

<p> (link: "Retente ta chance, petit")[
    (goto: "Start")
  ]
  </p>
  
  |silencieux>[ ]


:: Châtelet {"position":"350,475","size":"100,100"}
(display: "HUD")

<style>
  html, body {
    margin: 0;
    padding: 0;
    background: url("https://files.catbox.moe/93srdi.jpg") center center fixed no-repeat !important;
    background-size: cover !important;
  }

  tw-story, tw-passage {
    background: transparent !important;
    color: white !important;
  }
</style>

<script>


  if (window.crowdPontNeuf) {
    window.crowdPontNeuf.pause();
    window.crowdPontNeuf.currentTime = 0;
    window.crowdPontNeuf = null;
  }

  if (window.radioAudio) {
    window.radioAudio.pause();
    window.radioAudio.currentTime = 0;
    window.radioAudio = null;
  }

  if (window.ambianceDelon) {
    window.ambianceDelon.pause();
    window.ambianceDelon.currentTime = 0;
    window.ambianceDelon = null;
  }

  if (window.crowdAudio) {
    window.crowdAudio.pause();
    window.crowdAudio.currentTime = 0;
    window.crowdAudio = null;
  }

  if (window.manifAudio) {
    window.manifAudio.pause();
    window.manifAudio.currentTime = 0;
    window.manifAudio = null;
  }

  const amb = new Audio("https://files.catbox.moe/eiximt.mp3");
  amb.volume = 0.8;
  amb.loop = false; // une seule fois
  amb.play().catch(()=>{});

  window.ambianceDelon = amb;
</script>

<div class="fade-in">
  <p>
    Vous courez en direction de la place du Châtelet.
    Une (link: "manifestation")[
      (append: ?manif)[
        <script>
          // Stoppe un éventuel son de manif déjà en cours
          if (window.manifAudio) {
            window.manifAudio.pause();
            window.manifAudio.currentTime = 0;
          }

          const manif = new Audio("https://files.catbox.moe/qtl22d.mp3");
          manif.loop = true; // bruit de manif continu tant qu'on est sur le passage
          manif.play().catch(()=>{});

          window.manifAudio = manif;
        </script>
      ]
    ] est en cours.
  </p>

  <p>
    <img src="https://files.catbox.moe/7ah2vk.webp"
         alt="Manifestation à Châtelet"
         style="max-width: 500px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
  </p>

  <p>
    Vous entendez des slogans tels que « CRS SS ».
    « Sous les pavés, la plage » est inscrit sur le sol.
  </p>

  <p>
    Soudain, un groupe de jeunes étudiants vous remarquent.
    Ils vous prennent pour des policiers en civil, vue la façon dont vous êtes habillés.
    Ils courent vers vous.
    Vous courez de plus en plus vite mais une voiture vous 
    (link: "percute")[
      (append: ?percute)[
        <script>
          if (window.manifAudio) {
            window.manifAudio.pause();
            window.manifAudio.currentTime = 0;
            window.manifAudio = null;
          }

          const crash = new Audio("https://files.catbox.moe/oq4n4y.mp3");
          crash.play().catch(()=>{});
        </script>
      ]
    ]
  </p>

  <p>
    (link: "Retente ta chance, ça va le faire")[
      (goto: "Dehors")
    ]
  </p>

  |manif>[ ]
  |percute>[ ]
</div>





:: Continuer tout droit {"position":"550,850","size":"100,100"}
(display: "HUD")

<style>
  html, body {
    margin: 0;
    padding: 0;
    background: url("https://files.catbox.moe/srglz1.jpg") center center fixed no-repeat !important;
    background-size: cover !important;
  }

  tw-story, tw-passage {
    background: transparent !important;
    color: white !important;
    text-shadow: 0 0 6px rgba(0,0,0,0.8);
  }
</style>

<div class="fade-in">
  <div class="dialogue">
    <p><strong>Alain Delon&nbsp;:</strong> « J'espère que tu es fier de toi, [$prenom] ! On avait une piste claire et tu as tout fait foiré ! Comment un être aussi brillant qu'Alain Delon a bien pu vouloir faire équipe avec un novice pareil ! »</p>
  </div>

  <p>Alain Delon sort un pistolet de sa poche et braque [$prenom].</p>

  <p>
    <img src="https://files.catbox.moe/qnr0da.jpg"
         alt="Alain Delon braquant"
         style="max-width: 500px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
  </p>

  <div class="dialogue">
    <p><strong>Alain Delon&nbsp;:</strong> « Je n'ai plus besoin de toi à présent. »</p>
  </div>

  <div class="dialogue">
    <p><strong>[$prenom]&nbsp;:</strong> « Attendez, je vois une trace de sang là-bas. »</p>
  </div>

  <p>Vous vous avancez et apercevez deux traces de sang dans deux directions différentes. Une où se trouve un chapeau et l'autre où se trouve une pipe.</p>

  <p>
    (link: "Suivre la trace du chapeau")[
      (set: $points to $points + 10)
      (goto: "Trace du chapeau")
    ] 
  </p>

  <p>
    (link: "Suivre la trace de la pipe")[
      (set: $points to $points - 10)
      (goto: "Trace de la pipe")
    ] 
  </p>
</div>




:: Courir vers l'homme en fuite {"position":"450,1225","size":"100,100"}
(display: "HUD")

<style>
  html, body {
    margin: 0;
    padding: 0;
    background: url("https://files.catbox.moe/0l651r.jpg") center center fixed no-repeat !important;
    background-size: cover !important;
  }

  tw-story, tw-passage {
    background: transparent !important;
    color: white !important;
    text-shadow: 0 0 6px rgba(0,0,0,0.8);
  }
</style>

<script>
  if (window.radioAudio) {
    window.radioAudio.pause();
    window.radioAudio = null;
  }
  if (window.ambianceDelon) {
    window.ambianceDelon.pause();
    window.ambianceDelon = null;
  }
</script>

<div class="fade-in">
  <p>L'homme qui court rentre dans une voiture&nbsp;: il démarre en 
    (link: "trombe")[
      (append: ?trombe)[
        <script>
          let bgm = null;
          if (window.filmAudio) {
            bgm = window.filmAudio;
            bgm.pause();
          }

          const carSound = new Audio("https://files.catbox.moe/v2e7m1.mp3");
          carSound.volume = 0.9;
          carSound.play().catch(()=>{});


          carSound.addEventListener("ended", function () {
            if (bgm) {
              bgm.play().catch(()=>{});
            }
          });


          window.sfxCar = carSound;
        </script>
      ]
    ]
  </p>

  |trombe>[ ]

  <p>Soudain, un homme au loin vous regarde d'un oeil louche. Il baisse la tête puis continue son chemin tout en vous regardant.</p>

  <div class="dialogue">
    <p><strong>Alain Delon&nbsp;:</strong> « Dépêche-toi [$prenom], qu'est-ce qu'on fait&nbsp;? C'est peut-être notre seule chance de savoir ce qui se trame&nbsp;! »</p>
  </div>

  <p>
    (link: "Tirer sur les pneus de la voiture")[
      (set: $points to $points + 10)
      (goto: "Tirer sur les pneus de la voiture")
    ] 
  </p>

  <p>
    (link: "Suivre l'homme louche")[
      (set: $points to $points - 10)
      (goto: "Suivre l'homme louche")
    ] 
  </p>
</div>



:: Dehors {"position":"450,350","size":"100,100"}
(display: "HUD")
<script>
  if (window.radioAudio) {
    window.radioAudio.pause();
    window.radioAudio.currentTime = 0;
    window.radioAudio = null;
  }
</script>

(set: $aChapeau to false)
(set: $aLunettes to false)
(set: $aImper to false)

<div class="fade-in">
  <p>
    Alain Delon te pousse dans les escaliers. Il te tire par la main.
    Vous (link: "dévalez")[
      (append: ?escaliers)[
        <script>
          const steps = new Audio("https://files.catbox.moe/2pvl9n.mp3");
          steps.play().catch(()=>{});
        </script>
      ]
    ] les marches quatre à quatre.
  </p>

  <p>
    Vous arrivez sur le Pont-Neuf. Il y a beaucoup de monde
et c'est très (link: "bruyant")[
  (append: ?pontneuf)[
    <script>
      if (window.crowdPontNeuf) {
        window.crowdPontNeuf.pause();
        window.crowdPontNeuf.currentTime = 0;
        window.crowdPontNeuf = null;
      }

      const crowd = new Audio("https://files.catbox.moe/qqzoic.mp3");
      crowd.play().catch(()=>{});


      window.crowdPontNeuf = crowd;
    </script>
  ]
]

  </p>

  <p>
    <img src="https://files.catbox.moe/q7akb2.jpg"
         alt="Pont-Neuf, 1968"
         style="max-width: 500px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
  </p>

  <div class="dialogue">
    <p><strong>Alain Delon&nbsp;:</strong> « Ok petit. C'est là que je l'ai vu la dernière fois. Tu vois, le plateau de tournage à droite. »</p>
  </div>

  <p>Tu acquiesces.</p>

  <div class="dialogue">
    <p><strong>Alain Delon&nbsp;:</strong> « Bien. Avant qu'on continue, enfile ces lunettes, ce chapeau et cet imper&nbsp;: on doit être incognito. »</p>
  </div>

  <p>
    (link: "Mettre ton chapeau")[
      (set: $aChapeau to true)
      (replace: ?chapeau)[
        <img src="https://files.catbox.moe/k2ouio.jpg"
             alt="Chapeau"
             style="max-width: 300px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
      ]
      (if: $aChapeau and $aLunettes and $aImper)[
        (after: 2s)[
          (replace: ?gif-incognito)[
            <img src="https://files.catbox.moe/ht21vg.gif"
                 alt="Alain Delon incognito"
                 style="max-width: 300px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
          ]
        ]
      ]
    ]

    (link: "Enfiler tes lunettes")[
      (set: $aLunettes to true)
      (replace: ?lunettes)[
        <img src="https://files.catbox.moe/9kqtve.webp"
             alt="Lunettes"
             style="max-width: 300px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
      ]
      (if: $aChapeau and $aLunettes and $aImper)[
        (after: 5s)[
          (replace: ?gif-incognito)[
            <img src="https://files.catbox.moe/ht21vg.gif"
                 alt="Alain Delon incognito"
                 style="max-width: 300px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
          ]
        ]
      ]
    ]

    (link: "Enfiler ton imper")[
      (set: $aImper to true)
      (replace: ?imper)[
        <img src="https://files.catbox.moe/rtx30h.jpg"
             alt="Imper"
             style="max-width: 300px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
      ]
      (if: $aChapeau and $aLunettes and $aImper)[
        (after: 2s)[
          (replace: ?gif-incognito)[
            <img src="https://files.catbox.moe/ht21vg.gif"
                 alt="Alain Delon incognito"
                 style="max-width: 300px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
          ]
        ]
      ]
    ]
  </p>

  |chapeau>[ ]
  |lunettes>[ ]
  |imper>[ ]
  |gif-incognito>[ ]



  <div class="dialogue">
    <p><strong>Alain Delon&nbsp;:</strong> « Tu es magnifique, on ne te reconnaît presque plus [$prenom]. Je sens qu'on va faire du bon boulot. On n'a pas beaucoup de temps. Il faut qu'on passe par où tu penses, vers Châtelet ou vers Odéon&nbsp;? »</p>
  </div>

  <p>
    (link: "Aller vers Châtelet")[
      (set: $points to $points - 10)
      (goto: "Châtelet")
    ]
  </p>

  <p>
    (link: "Aller vers Odéon")[
      (set: $points to $points + 10)
      (goto: "Odéon")
    ]
  </p>

  |escaliers>[ ]
  |pontneuf>[ ]
</div>






:: Fuir voiture {"position":"750,725","size":"100,100"}
(display: "HUD")

<style>
  html, body {
    margin: 0;
    padding: 0;
    background: url("https://files.catbox.moe/93srdi.jpg") center center fixed no-repeat !important;
    background-size: cover !important;
  }

  tw-story, tw-passage {
    background: transparent !important;
    color: white !important;
  }
</style>



<script>
  if (window.radioAudio) {
    window.radioAudio.pause();
  }
  if (window.ambianceDelon) {
    window.ambianceDelon.pause();
    window.ambianceDelon = null;
  }
  if (window.filmAudio) {
    window.filmAudio.pause();
    window.filmAudio = null;
  }

  const amb = new Audio("https://files.catbox.moe/eiximt.mp3");
  amb.volume = 0.8;
  amb.loop = false;
  amb.play().catch(()=>{});

  window.ambianceDelon = amb;
</script>

<div class="fade-in">
  <div class="dialogue">
    <p><strong>[$prenom]&nbsp;:</strong> « C'est très gentil de votre part mais nous préférons marcher à pied&nbsp;: il fait bon, ça serait dommage de ne pas en profiter ... »</p>
  </div>

  <p>
    L'inconnu de la voiture vous dévisage, remonte sa vitre et démarre.
  </p>

  <p>
    Vous reprenez votre route.
  </p>

  <p>
    Au moment de traverser, la voiture de tout à l'heure vous 
    (link: "percute")[
      (append: ?choc)[
        <script>
          if (window.ambianceDelon) {
            window.ambianceDelon.pause();
            window.ambianceDelon = null;
          }
          const crash = new Audio("https://files.catbox.moe/tphqr0.mp3");
          crash.play().catch(()=>{});
        </script>
      ]
    ].
  </p>

  <div class="dialogue">
    <p><strong>Jansen (autrefois l'inconnu)&nbsp;:</strong> « Impossible de sortir du cercle rouge. »</p>
  </div>

  <p>
    <img src="https://files.catbox.moe/gugs9y.jpg"
         alt="Le Cercle rouge"
         style="max-width: 500px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
  </p>

  <p>
    (link: "Retente ta chance, samouraï")[
      (goto: "Piste Grumbach")
    ]
  </p>

  |choc>[ ]
</div>





:: HUD {"position":"1050,75","size":"100,100"}
<div id="xpBar">
  Points : $points
</div>



:: Monter voiture {"position":"550,725","size":"100,100"}
(display: "HUD")

<style>

  @keyframes flashLandscape {
    0%   { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
  }


  #flash-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    z-index: -1;
    animation: flashLandscape 0.3s infinite;
  }


  tw-story, tw-passage {
    background: transparent !important;
    color: black !important;
  }
</style>

<div id="flash-bg"></div>

<script>
  if (window.radioAudio) {
    window.radioAudio.pause();
    window.radioAudio.currentTime = 0;
    window.radioAudio = null;
  }
</script>

<div class="fade-in">
  <p>Vous montez dans la voiture.</p>

  <div class="dialogue">
    <p><strong>Alain Delon (murmurant)&nbsp;:</strong> « C'est un peu risqué je pense, [$prenom]. Mais bon, je suppose que c'est trop tard. »</p>
  </div>

  <p>Vous n'échangez pas un mot avec les autres passagers de la voiture.</p>

  <p>
    <img src="https://files.catbox.moe/gugs9y.jpg"
         alt="Le Cercle rouge"
         style="max-width: 500px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
  </p>

  <div class="dialogue">
    <p><strong>Jansen (autrefois l'inconnu)&nbsp;:</strong> « Mettez les ceintures, conseil de quelqu'un qui vous veut du bien. »</p>
  </div>

  <p>
    Jansen allume la 
    (link: "radio")[
      (append: ?radio)[
        <script>
          if (window.ambianceDelon) {
            window.ambianceDelon.pause();
            window.ambianceDelon.currentTime = 0;
            window.ambianceDelon = null;
          }
          if (window.filmAudio) {
            window.filmAudio.pause();
            window.filmAudio.currentTime = 0;
            window.filmAudio = null;
          }
          if (window.radioAudio) {
            window.radioAudio.pause();
            window.radioAudio.currentTime = 0;
            window.radioAudio = null;
          }

          const radio = new Audio("https://files.catbox.moe/vkpipn.mp3");
          radio.volume = 0.8;
          radio.loop = false;
          radio.play().catch(()=>{});
          window.radioAudio = radio;
        </script>
      ]
    ]
    et atteint les 120&nbsp;km/h en 4&nbsp;secondes.
  </p>

  <div class="dialogue">
    <p><strong>Alain Delon&nbsp;:</strong> « Fais tes prières gamin, on est cuit. »</p>
  </div>

  <p>Soudain, la voiture s'arrête. On descend vous ouvrir la porte.</p>

  <div class="dialogue">
    <p><strong>Jansen&nbsp;:</strong> « Continuez tout droit puis tournez à gauche dans à peu près 600&nbsp;m. Vous trouverez ce que vous cherchez. »</p>
  </div>

  <p>La voiture redémarre en trombe.</p>

  <p>Vous êtes maintenant tout seuls en pleine campagne&nbsp;: vous décidez de continuer tout droit, comme indiqué.</p>

  <p>
    (link: "Continuer tout droit")[
      (goto: "Continuer tout droit")
    ]
  </p>

  |radio>[ ]
</div>




:: Odéon {"position":"550,475","size":"100,100"}
(display: "HUD")

<div class="fade-in">
  <p>Vous arrivez à Odéon.</p>
   <p>
    <img src="https://files.catbox.moe/ss26aj.jpg"
         alt="Odéon, 1968"
         style="max-width: 600px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
  </p>

  <p>
    Vous apercevez au loin deux cartes d'identité.<br>
    Sur l'une il est inscrit le nom de «&nbsp;Jean-Pierre Fortin&nbsp;» et sur l'autre, «&nbsp;Jean-Pierre Grumbach&nbsp;».
  </p>

  <div class="dialogue">
    <p><strong>[$prenom]&nbsp;:</strong> « Jean-Pierre Fortin, Jean-Pierre Grumbach... ça serait pas en rapport avec notre Melville&nbsp;? »</p>
  </div>

<div class="dialogue">
  <p><strong>Alain Delon&nbsp;:</strong> 
  « C'est tout à fait possible [$prenom]. Son film, 
  (link: "L'Armée des ombres")[
    (append: ?larmee)[
      <script>
        if (window.crowdPontNeuf) {
          window.crowdPontNeuf.pause();
          window.crowdPontNeuf.currentTime = 0;
          window.crowdPontNeuf = null;
        }

        if (window.filmAudio) {
          window.filmAudio.pause();
          window.filmAudio.currentTime = 0;
          window.filmAudio = null;
        }

        const music = new Audio("https://files.catbox.moe/pz42cy.mp3");
        music.loop = false;
        music.volume = 0.8;
        music.play().catch(()=>{});

        window.filmAudio = music;
      </script>

      <img src="https://files.catbox.moe/cgdk5q.jpg"
           alt="Affiche de L'Armée des ombres"
           style="max-width: 400px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
    ]
  ], en 1969, parle de son passé de résistant. En fait, Melville est un nom d'emprunt, un nom qu'il a pris pendant la Seconde Guerre mondiale en hommage au célèbre romancier Herman Melville. Par contre, je suis incapable de me souvenir de son nom d'origine. Tu penses qu'on devrait aller par où ? »
  </p>
</div>

|larmee>[ ]


  <p>
    (link: "Suivre la piste Fortin")[
      (set: $points to $points - 10)
      (goto: "Piste Fortin")
    ]
  </p>

  <p>
    (link: "Suivre la piste Grumbach")[
      (set: $points to $points + 10)
      (goto: "Piste Grumbach")
    ]
  </p>


</div>



:: Piste Fortin {"position":"450,600","size":"100,100"}
(display: "HUD")

<style>
  html, body {
    margin: 0;
    padding: 0;
    background: url("https://files.catbox.moe/93srdi.jpg") center center fixed no-repeat !important;
    background-size: cover !important;
  }

  tw-story, tw-passage {
    background: transparent !important;
    color: white !important;
  }
</style>


<script>

  if (window.filmAudio) {
    window.filmAudio.pause();
    window.filmAudio.currentTime = 0;
    window.filmAudio = null;
  }


  const fortinMusic = new Audio("https://files.catbox.moe/eiximt.mp3");
  fortinMusic.volume = 0.8;
  fortinMusic.loop = false;
  fortinMusic.play().catch(()=>{});

  window.fortinMusic = fortinMusic;
</script>

<p style="color: #ffffff;">Perdu ! Jean-Pierre Fortin est conseiller délégué Vie des quartiers, sécurité, propreté à la mairie de Sèvres !</p>

<p>
(link: "Clique si tu rêves de savoir à quoi ressemble Jean-Pierre Fortin !")[
  (replace: ?fortinPhoto)[
    <img src="https://files.catbox.moe/2g7aql.webp"
         alt="Jean-Pierre Fortin"
         style="max-width: 400px; height: auto; border-radius: 10px;
                margin-top: 15px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
  ]
]
</p>

|fortinPhoto>[ ]

<p style="color: #ffffff;">On va faire comme si on n'avait rien vu 🫣 !</p>

<p>
(link: "J'ai rien vu")[
  (goto: "Odéon")
]
</p>





:: Piste Grumbach {"position":"650,600","size":"100,100"}
(display: "HUD")

<div class="fade-in">

  <p>
    Vous vous avancez vers la carte d'identité « Jean-Pierre Grumbach ».
    Vous commencez à la regarder 
    (link: "attentivement")[
      (append: ?photoID)[
        <img src="https://files.catbox.moe/m2j3lm.jpg"
             alt="Carte d'identité"
             style="max-width: 450px; height: auto; border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.6);">
      ]
    ]
  </p>

  |photoID>[ ]

  <div class="dialogue">
    <p><strong>Alain Delon :</strong> « C'est bien la tête de Melville ! Bien joué mon gars, on est sur la bonne piste ! »</p>
  </div>

  <p>
    Pendant que vous parlez, une 
    (link: "voiture")[
      (append: ?sonVoiture)[
        <script>
          let bgm = null;
          if (window.filmAudio) {
            bgm = window.filmAudio;
            bgm.pause();
          }

          const v = new Audio("https://files.catbox.moe/n4s107.mp3");
          v.play().catch(()=>{});


          v.addEventListener("ended", function () {
            if (bgm) {
              bgm.play().catch(()=>{});
            }
          });

          window.carSfx = v;
        </script>
      ]
    ] 
    s'avance à toute allure devant vous.
  </p>

  |sonVoiture>[ ]

  <p>
    Un inconnu baisse sa vitre et commence à vous parler.
  </p>

  <div class="dialogue">
    <p><strong>Inconnu :</strong> « Je sais ce que vous cherchez. Montez à l'arrière de la voiture. »</p>
  </div>

  <p>Vous regardez Alain Delon, désespéré.</p>

  <div class="dialogue">
    <p><strong>Alain Delon :</strong> « C'est toi qui es détective [$prenom], c'est toi qui choisis ! »</p>
  </div>

  <p>
    (link: "Monter dans la voiture")[
      (set: $points to $points + 10)
      (goto: "Monter voiture")
    ]
  </p>

  <p>
    (link: "Refuser et partir en courant")[
      (set: $points to $points - 10)
      (goto: "Fuir voiture")
    ]
  </p>

</div>





:: Récompense {"position":"350,1475","size":"100,100"}
(display: "HUD")

<style>
  html, body {
    margin: 0;
    padding: 0;
    background:
      radial-gradient(circle at top, #202020 0%, #050505 55%, #000000 100%);
  }

  tw-story, tw-passage {
    background: transparent !important;
    color: #f8f8f8 !important;
    text-shadow: 0 0 6px rgba(0,0,0,0.8);
    font-family: "Georgia", "Times New Roman", serif;
  }

  .cinema-frame {
    max-width: 820px;
    margin: 3em auto 2em auto;
    padding: 2.2em 2.4em 2em 2.4em;
    border-radius: 18px;
    background: #050505;
    box-shadow:
      0 0 40px rgba(0,0,0,0.9),
      0 0 0 4px rgba(255,255,255,0.04);
    position: relative;
    overflow: hidden;
  }

  #projector-halo {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        to right,
        rgba(255,255,255,0.12) 0%,
        rgba(255,255,255,0.14) 20%,
        rgba(255,255,255,0.16) 50%,
        rgba(255,255,255,0.14) 80%,
        rgba(255,255,255,0.12) 100%
      ),
      linear-gradient(
        to bottom,
        rgba(255,255,255,0.12) 0%,
        rgba(255,255,255,0.14) 50%,
        rgba(255,255,255,0.12) 100%
      );
    opacity: 0.45;
    mix-blend-mode: screen;
    z-index: 0;
    pointer-events: none;
  }

  .cinema-content {
    position: relative;
    z-index: 1;
  }

  .cinema-frame::before,
  .cinema-frame::after {
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    width: 40px;
    background:
      repeating-linear-gradient(
        to bottom,
        #5a0707,
        #5a0707 7px,
        #7a0b0b 7px,
        #7a0b0b 14px
      );
    opacity: 0.9;
    z-index: 2;
  }

  .cinema-frame::before {
    left: -28px;
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
  }

  .cinema-frame::after {
    right: -28px;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
  }

  .cinema-title {
    text-align: center;
    font-size: 1.8em;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 0.4em;
    color: #ffe6a8;
  }

  .cinema-subtitle {
    text-align: center;
    font-size: 0.95em;
    margin-bottom: 1.8em;
    color: #f5f5f5;
    opacity: 0.85;
  }

  .shelves {
    margin-top: 1.2em;
  }

  .shelf-label {
    font-family: "Courier New", monospace;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8em;
    color: #999;
    margin: 1.5em 0 0.4em 0;
  }

  .film-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
  }

  .film-spine {
    background: linear-gradient(135deg, #111111, #272727);
    border-radius: 6px;
    padding: 0.35em 0.7em;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow:
      0 0 10px rgba(0,0,0,0.8),
      inset 0 0 12px rgba(0,0,0,0.7);
    font-size: 0.9em;
    white-space: nowrap;
  }

  .film-spine tw-link,
  .film-spine a {
    color: #ffd27f !important;
    text-decoration: none;
    border-bottom: 1px dashed #ffd27f;
    cursor: pointer;
  }

  .film-spine tw-link:hover {
    color: #ffffff !important;
    border-bottom-color: #ffffff;
  }

  .detail-zone {
    margin-top: 2em;
    padding: 1.2em 1.5em;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: radial-gradient(circle at top, #232323, #050505);
    font-size: 0.95em;
    min-height: 4em;
  }

  .detail-zone em {
    color: #ffd27f;
  }

  .reward-footer {
    margin-top: 2em;
    text-align: center;
    font-size: 1em;
    letter-spacing: 0.2em;
    opacity: 0.9;
  }
</style>

<div class="cinema-frame fade-in">
  <div id="projector-halo"></div>

  <div class="cinema-content">
    <div class="cinema-title">
      Filmothèque privée de Melville
    </div>

    <div class="cinema-subtitle">
      <strong>Jean-Pierre Melville&nbsp;:</strong> « Tu as eu tout bon [$prenom], pas une seule faute&nbsp;! Tu m'impressionnes&nbsp;!  
      Pour te récompenser, je te laisse accéder à tous mes films dans ma propre salle de cinéma&nbsp;! »
    </div>

    <p>
      Devant toi, des étagères entières remplies de films&nbsp;! Tu n'as qu'à cliquer sur leurs tranches
      pour plonger un peu plus dans l'univers de Melville (qui n'a pas fait que des films noirs&nbsp;!).
    </p>

    <div class="shelves">

      <div class="shelf">
        <div class="shelf-label">Rayon Résistance & clandestinité</div>
        <div class="film-row">
          <div class="film-spine">
            (link: "Le Silence de la mer (1949)")[
              (replace: ?detail)[
                <div class="detail-zone">
                  <p><em>Le Silence de la mer (1949)</em></p>
                  <p>
                    <video src="https://files.catbox.moe/j9dad8.mp4"
                           controls
                           style="max-width: 100%; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.7);">
                    </video>
                  </p>
                </div>
              ]
            ]
          </div>
          <div class="film-spine">
            (link: "L'Armée des ombres (1969)")[
              (replace: ?detail)[
                <div class="detail-zone">
                  <p><em>L'Armée des ombres (1969)</em></p>
                  <p>
                    <video src="https://files.catbox.moe/zs98it.mp4"
                           controls
                           style="max-width: 100%; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.7);">
                    </video>
                  </p>
                </div>
              ]
            ]
          </div>
        </div>
      </div>

      <div class="shelf">
        <div class="shelf-label">Films de voyous</div>
        <div class="film-row">
          <div class="film-spine">
            (link: "Bob le flambeur (1956)")[
              (replace: ?detail)[
                <div class="detail-zone">
                  <p><em>Bob le flambeur (1956)</em></p>
                  <p>
                    <video src="https://files.catbox.moe/ou19kn.mp4"
                           controls
                           style="max-width: 100%; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.7);">
                    </video>
                  </p>
                </div>
              ]
            ]
          </div>
          <div class="film-spine">
            (link: "Le Doulos (1962)")[
              (replace: ?detail)[
                <div class="detail-zone">
                  <p><em>Le Doulos (1962)</em></p>
                  <p>
                    <video src="https://files.catbox.moe/yyhir2.mp4"
                           controls
                           style="max-width: 100%; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.7);">
                    </video>
                  </p>
                </div>
              ]
            ]
          </div>
        </div>
      </div>

      <div class="shelf">
        <div class="shelf-label">OVNIS melvilliens</div>
        <div class="film-row">
          <div class="film-spine">
            (link: "Les Enfants terribles (1950)")[
              (replace: ?detail)[
                <div class="detail-zone">
                  <p><em>Les Enfants terribles (1950)</em></p>
                  <p>
                    <video src="https://files.catbox.moe/6jbxsd.mp4"
                           controls
                           style="max-width: 100%; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.7);">
                    </video>
                  </p>
                </div>
              ]
            ]
          </div>
          <div class="film-spine">
            (link: "Quand tu liras cette lettre (1953)")[
              (replace: ?detail)[
                <div class="detail-zone">
                  <p><em>Quand tu liras cette lettre (1953)</em></p>
                  <p>
                    <video src="https://files.catbox.moe/h717ah.mp4"
                           controls
                           style="max-width: 100%; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.7);">
                    </video>
                  </p>
                </div>
              ]
            ]
          </div>
          <div class="film-spine">
            (link: "Deux hommes dans Manhattan (1959)")[
              (replace: ?detail)[
                <div class="detail-zone">
                  <p><em>Deux hommes dans Manhattan (1959)</em></p>
                  <p>
                    <video src="https://files.catbox.moe/dsky17.mp4"
                           controls
                           style="max-width: 100%; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.7);">
                    </video>
                  </p>
                </div>
              ]
            ]
          </div>
        </div>
      </div>

    </div>

    |detail>[
      <div class="detail-zone">
        <p><em>Jean Seberg&nbsp;:</em> « Quelle est votre plus grande ambition dans la vie&nbsp;? »<br>
        <em>Jean-Pierre Melville&nbsp;:</em> « Devenir immortel et puis, mourir. »</p>
      </div>
    ]

    <div class="reward-footer">
      FIN
    </div>
  </div>
</div>

<script>

  if (window.radioAudio) {
    window.radioAudio.pause();
    window.radioAudio.currentTime = 0;
    window.radioAudio = null;
  }
  if (window.ambianceDelon) {
    window.ambianceDelon.pause();
    window.ambianceDelon.currentTime = 0;
    window.ambianceDelon = null;
  }
  if (window.filmAudio) {
    window.filmAudio.pause();
    window.filmAudio.currentTime = 0;
    window.filmAudio = null;
  }


  (function () {
    const halo = document.getElementById("projector-halo");
    if (!halo) return;

    if (window.projectorInterval) {
      clearInterval(window.projectorInterval);
      window.projectorInterval = null;
    }

    let up = true;
    let opacity = 0.35;

    window.projectorInterval = setInterval(function () {
      const jitter = (Math.random() * 0.06) - 0.03;

      if (up) {
        opacity += 0.02;
        if (opacity >= 0.45) {
          opacity = 0.45;
          up = false;
        }
      } else {
        opacity -= 0.02;
        if (opacity <= 0.30) {
          opacity = 0.30;
          up = true;
        }
      }

      halo.style.opacity = String(opacity + jitter);
    }, 80);
  })();
</script>



:: Start {"position":"550,225","size":"100,100"}
(display: "HUD")

<script>

  if (window.filmAudio) {
    window.filmAudio.pause();
    window.filmAudio.currentTime = 0;
    window.filmAudio = null;
  }
</script>

<div class="fade-in">
 <h2>Paris, 1972</h2>

  <p>
    Novembre. Un temps de chien. 36 quai des Orfèvres. Tu es à ton bureau, comme tous les soirs.
    Les dossiers s'empilent. Tu n'es pas près de rentrer. Il est 21h. Tu allumes une cigarette pour tenir le coup. 
    Tu allumes la radio pour te détendre. 
  (link: "Allumer la radio")[
  (append: ?musique)[
    <script>
      if (!window.radioAudio) {
        const a = new Audio("https://files.catbox.moe/r7v6hv.mp3"); 
        a.loop = true;
        a.volume = 0.5;
        window.radioAudio = a;
      }
      window.radioAudio.play().catch(()=>{});
    </script>
  ]
]

  </p>

  <p>
    Tout à coup, tu entends 
    (link: "sonner")[
      (append: ?sonnerie)[
        <script>

          if (window.radioAudio) {
            window.radioAudio.pause();
          }

          const bell = new Audio("https://files.catbox.moe/fhhmn7.mp3");
          bell.volume = 1;
          bell.play().catch(()=>{});

          bell.addEventListener('ended', () => {
            if (window.radioAudio) {
              window.radioAudio.play().catch(()=>{});
            }
          });
        </script>
      ]
    ]
  </p>

  <p>
    Alain Delon vient te voir.
  </p>

  <p>
    <img src="https://files.catbox.moe/lo08ou.avif" alt="Alain Delon" style="max-width: 500px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
  </p>

  <div class="dialogue">
    <p><strong>Alain Delon&nbsp;:</strong> « Melville a disparu&nbsp;! Jean-Pierre Melville a quitté le tournage sans que personne ne le voie&nbsp;! Aide-moi à le retrouver&nbsp;! »</p>
  </div>

  <p>
    Un peu interloqué, tu acceptes la mission.
  </p>

  <div class="dialogue">
    <p><strong>Alain Delon&nbsp;:</strong> « Alain Delon te remercie&nbsp;! Au fait, comment tu t'appelles&nbsp;? »</p>
  </div>

  <p>
    (link: "Dire son nom à Alain Delon")[
      (set: $prenom to (prompt: "Entre ton nom de détective.", ""))
      (replace: ?suiteDelon)[
        <div class="dialogue">
          <p><strong>Alain Delon&nbsp;:</strong> « [$prenom], quel beau prénom&nbsp;! Suis-moi, il n'y a pas une minute à perdre&nbsp;! »</p>
        </div>

        <p>
          (link: "Suivre Alain Delon")[
            (set: $points to $points + 10)
            (goto: "Dehors")
          ]
        </p>

        <p>
          (link: "Suivre Alain, mais de loin")[
            (set: $points to $points - 10)
            (goto: "Alain de loin")
          ]
        </p>
      ]
    ]
  </p>

  |fumee>[ ]
  |musique>[ ]
  |sonnerie>[ ]
  |suiteDelon>[ ]
</div>







:: StoryInit {"position":"1200,75","size":"100,100"}
(set: $points to 0)



:: Suivre l'homme louche {"position":"550,1350","size":"100,100"}
(display: "HUD")

<style>
  html, body {
    margin: 0;
    padding: 0;
    background: url("https://files.catbox.moe/93srdi.jpg") center center fixed no-repeat !important;
    background-size: cover !important;
  }

  tw-story, tw-passage {
    background: transparent !important;
    color: white !important;
    text-shadow: 0 0 6px rgba(0,0,0,0.8);
  }
</style>

<script>
  if (window.radioAudio) {
    window.radioAudio.pause();
    window.radioAudio = null;
  }
  if (window.ambianceDelon) {
    window.ambianceDelon.pause();
    window.ambianceDelon = null;
  }
  if (window.filmAudio) {
    window.filmAudio.pause();
    window.filmAudio = null;
  }
  if (window.sfxCar) {
    window.sfxCar.pause();
    window.sfxCar = null;
  }

  const amb = new Audio("https://files.catbox.moe/eiximt.mp3");
  amb.volume = 0.8;
  amb.loop = false;
  amb.play().catch(()=>{});
  window.ambianceDelon = amb;
</script>

<div class="fade-in">
  <p>Vous foncez sur l'homme louche. Vous l'arrêtez et le 
    (link: "ligotez")[
      (append: ?ligotez)[
        <script>
          const rope = new Audio("https://files.catbox.moe/6oz5kr.mp3");
          rope.volume = 1.0;
          rope.play().catch(()=>{});
          window.sfxRope = rope;
        </script>
      ]
    ]
  </p>

  |ligotez>[ ]

  <div class="dialogue">
    <p><strong>[$prenom]&nbsp;:</strong> « Qu'est-ce que vous nous voulez hein&nbsp;? Qu'est-ce que vous manigancez&nbsp;? »</p>
  </div>

  <div class="dialogue">
    <p><strong>L'inconnu&nbsp;:</strong> « Mais enfin, je suis un homme de foi, comment osez-vous me traiter de la sorte&nbsp;? »</p>
  </div>

  <p>Alain Delon s'approche et le regarde de plus près.</p>

  <div class="dialogue">
  <p><strong>Alain Delon&nbsp;:</strong> « Mais oui, c'est (link: "Léon Morin")[
        (append: ?leonm1)[
          <p>
            <img src="https://files.catbox.moe/bvym67.jpg"
                 alt="Léon Morin"
                 style="max-width: 500px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
          </p>
        ]
      ]! Il est inoffensif.
    <span style="font-style: normal;">
      (link: "Léon Morin, prêtre")[
        (append: ?leonm2)[
          <p>
            <img src="https://files.catbox.moe/nfaiyp.webp"
                 alt="Léon Morin, prêtre"
                 style="max-width: 500px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
          </p>
        ]
      ]
    </span>est un des films de Melville où y a le moins de personnages roublards et tortueux&nbsp;! Dépêchons-nous de rattraper la bagnole. »</p>
</div>

|leonm1>[ ]
|leonm2>[ ]

    (link: "Dépêche-toi de rattraper la bagnole !")[
      (goto: "Courir vers l'homme en fuite")
    ]
  </p>
</div>



:: Tirer sur les pneus de la voiture {"position":"350,1350","size":"100,100"}
(display: "HUD")

<style>
  html, body {
    margin: 0;
    padding: 0;
    background: url("https://files.catbox.moe/6ccqnv.webp") center center fixed no-repeat !important;
    background-size: cover !important;
  }

  tw-story, tw-passage {
    background: transparent !important;
    color: white !important;
    text-shadow: 0 0 6px rgba(0,0,0,0.8);
  }
</style>

<script>
  if (window.radioAudio) {
    window.radioAudio.pause();
    window.radioAudio = null;
  }
  if (window.ambianceDelon) {
    window.ambianceDelon.pause();
    window.ambianceDelon = null;
  }
  if (window.sfxCar) {
    window.sfxCar.pause();
    window.sfxCar = null;
  }
  if (window.sfxRope) {
    window.sfxRope.pause();
    window.sfxRope = null;
  }
</script>

<div class="fade-in">
  <p>Sans réfléchir vous sortez votre pistolet et 
    (link: "tirez")[
      (append: ?tirez)[
        <script>
          let bgm = null;
          if (window.filmAudio) {
            bgm = window.filmAudio;
            bgm.pause();
          }

          const gun = new Audio("https://files.catbox.moe/kdfx5j.mp3");
          gun.volume = 1.0;
          gun.play().catch(()=>{});

          gun.addEventListener("ended", function () {
            if (bgm) {
              bgm.play().catch(()=>{});
            } else {
              const music = new Audio("https://files.catbox.moe/agtxqv.mp3");
              music.volume = 0.9;
              music.loop = false;
              music.play().catch(()=>{});
              window.filmAudio = music;
            }
          });

          window.sfxGun = gun;
        </script>
      ]
    ]
    dans les roues de la voiture.
  </p>

  |tirez>[ ]

  <p>L'homme sort de sa voiture, il court à toute vitesse.</p>

  <p>Vous courez pour le rattraper et vous y arrivez.</p>

  <div class="dialogue">
    <p><strong>Alain Delon&nbsp;:</strong> « Jean-Pierre&nbsp;!! C'est toi&nbsp;!! »</p>
  </div>

  <div class="dialogue">
    <p><strong>Jean-Pierre Melville&nbsp;:</strong> « Alain, qu'est-ce que tu fais là&nbsp;? Je pensais simplement que tu allais prévenir la police mais pas venir à ma rencontre&nbsp;!! »</p>
  </div>

  <div class="dialogue">
    <p><strong>Alain Delon&nbsp;:</strong> « Jamais j'abandonnerai un copain. Mais tu vas m'expliquer tout ce cirque&nbsp;? »</p>
  </div>

  <div class="dialogue">
    <p><strong>Jean-Pierre Melville&nbsp;:</strong> « J'en ai marre des films policiers, voilà. Je voulais pas finir 
      (link: "celui qu'on était en train de faire")[
        (append: ?filmencours)[
          <p>
            <img src="https://files.catbox.moe/vg1ii6.avif"
                 alt="Film avec Deneuve"
                 style="max-width: 500px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
          </p>
        ]
      ]
      avec Deneuve. J'en ai marre que tout le monde attende ça de moi. J'ai voulu me faire passer pour mort pour qu'on me laisse tranquille et me tirer aux États-Unis faire les films que j'ai en tête. »</p>
  </div>

  |filmencours>[ ]

  <div class="dialogue">
    <p><strong>Alain Delon (murmurant à [$prenom])&nbsp;:</strong> « On dit que Melville est le plus américain des réalisateurs français. »</p>
  </div>

  <div class="dialogue">
    <p><strong>Jean-Pierre Melville&nbsp;:</strong> « Tout ça aurait réussi si tu n'avais pas été dans mes pattes, Alain. Tu me connais trop bien. En tout cas je vous félicite, détective. Vous êtes bien plus compétent que ce que j'imaginais. »</p>
  </div>

<p>Tu es arrivé au bout de l'histoire et tu as retrouvé Jean-Pierre Melville&nbsp;! Bravo 👏&nbsp;! Maintenant, clique sur le lien en bas pour avoir ta récompense (si tu la mérites bien sûr&nbsp;!).</p>

<p>
  (if: $points >= 70)[
    (link: "Obtiens ta récompense")[
      (goto: "Récompense")
    ]
  ]
  (else:)[
  (link: "Tu n'as pas assez de points (il en faut 70)... Recommencer depuis le début")[
    (set: $points to 0)
    (goto: "Start")
  ]
]

</p>

</div>



:: Trace de la pipe {"position":"650,975","size":"100,100"}
(display: "HUD")

<style>
  html, body {
    margin: 0;
    padding: 0;
    background: url("https://files.catbox.moe/93srdi.jpg") center center fixed no-repeat !important;
    background-size: cover !important;
  }

  tw-story, tw-passage {
    background: transparent !important;
    color: white !important;
    text-shadow: 0 0 6px rgba(0,0,0,0.85);
  }
</style>

<script>
  if (window.radioAudio) {
    window.radioAudio.pause();
    window.radioAudio = null;
  }
  if (window.ambianceDelon) {
    window.ambianceDelon.pause();
    window.ambianceDelon = null;
  }
  if (window.filmAudio) {
    window.filmAudio.pause();
    window.filmAudio = null;
  }

  const amb = new Audio("https://files.catbox.moe/eiximt.mp3");
  amb.volume = 0.8;
  amb.loop = false;
  amb.play().catch(()=>{});

  window.ambianceDelon = amb;
</script>

<div class="fade-in">

  <p>Vous tournez sur un petit sentier à droite et ramassez la pipe. Au bout de quelques mètres, vous vous rendez compte qu'un chevreuil est mort sur le sentier&nbsp;: c'était son sang.</p>

  <div class="dialogue">
    <p><strong>Alain Delon&nbsp;:</strong> « Pourquoi t'as pris ce chemin&nbsp;? C'est pas la pipe l'accessoire de Melville, c'est le chapeau&nbsp;! Regarde. »</p>
  </div>

  <p>
    Alain Delon sort une 
    (link: "photo")[
      (append: ?photo)[
        <p>
          <img src="https://files.catbox.moe/uh7fjr.jpg"
               alt="Photo de Melville"
               style="max-width: 500px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
        </p>
      ]
    ]
    de sa poche.
  </p>


  |photo>[ ]

  <div class="dialogue">
    <p><strong>Alain Delon&nbsp;:</strong> « J'ai le chic d'être tombé sur le plus pourri des flics de Paris&nbsp;! J'y crois pas&nbsp;! »</p>
  </div>

  <p>
    (link: "Rebrousse vite chemin avant qu'Alain ne pique sa crise !")[
      (goto: "Continuer tout droit")
    ]
  </p>

</div>




:: Trace du chapeau {"position":"450,975","size":"100,100"}
(display: "HUD")

<style>
  html, body {
    margin: 0;
    padding: 0;
    background: url("https://files.catbox.moe/srglz1.jpg") center center fixed no-repeat !important;
    background-size: cover !important;
  }

  tw-story, tw-passage {
    background: transparent !important;
    color: white !important;
    text-shadow: 0 0 6px rgba(0,0,0,0.8);
  }

  .computer-frame {
    max-width: 520px;
    margin: 2em auto;
    padding: 1.2em;
    border-radius: 10px;
    border: 3px solid #00ff7f;
    background: rgba(0, 0, 0, 0.9);
    box-shadow: 0 0 20px rgba(0,0,0,0.9);
    font-family: "Courier New", monospace;
  }

  .computer-screen {
    border-radius: 6px;
    padding: 1em;
    background: radial-gradient(circle at top, #003300, #000000);
    color: #9cff9c;
    font-size: 0.95em;
    line-height: 1.5;
  }

  .computer-screen tw-link,
  .computer-screen a {
    color: #7CFF7C !important;
    text-decoration: underline;
  }
</style>

<script>
  if (window.radioAudio) {
    window.radioAudio.pause();
    window.radioAudio = null;
  }

  if (window.ambianceDelon) {
    window.ambianceDelon.pause();
    window.ambianceDelon = null;
  }
  if (window.filmAudio) {
    window.filmAudio.pause();
    window.filmAudio = null;
  }
</script>

<div class="fade-in">
  <p>Vous vous engagez sur le sentier à gauche et vous ramassez le chapeau.</p>

  <p>Alain Delon vous tape l'épaule.</p>

  <div class="dialogue">
    <p><strong>Alain Delon&nbsp;:</strong> « Je suis fier de toi&nbsp;! Effectivement, le chapeau est bien l'accessoire fétiche de Melville, 
      (link: "regarde")[
        (append: ?regarde)[
          <p>
            <img src="https://files.catbox.moe/uh7fjr.jpg"
                 alt="Photo de Melville"
                 style="max-width: 500px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
          </p>
        ]
      ]
      On est sûrement sur la bonne piste&nbsp;! »</p>
  </div>

  |regarde>[ ]

  <p>Vous vous avancez un peu sur le sentier. Soudain, vous apercevez un gros 
    (link: "ordinateur")[
      (append: ?ordinateur)[
        <p>
          <img src="https://files.catbox.moe/3e9lk4.jpg"
               alt="Ordinateur mystérieux"
               style="max-width: 500px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
        </p>
      ]
    ]
    
  </p>

  |ordinateur>[ ]

  <p>Vous vous approchez, l'allumez et voyez trois vidéos apparaître. De plus, l'ordinateur vous dit que si vous trouvez la vidéo issue d'un film de Melville, il affichera les coordonnées GPS de l'endroit où se trouve Melville&nbsp;!</p>

  <p>
    (link: "Vidéo n°1")[
      (append: ?video1)[
        <p>
          <video src="https://files.catbox.moe/o2vdos.mp4"
                 controls
                 style="max-width: 500px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
          </video>
        </p>
      ]
    ]
  </p>

  |video1>[ ]

  <p>
    (link: "Vidéo n°2")[
      (append: ?video2)[
        <p>
          <video src="https://files.catbox.moe/w02k7d.mp4"
                 controls
                 style="max-width: 500px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
          </video>
        </p>
      ]
    ]
  </p>

  |video2>[ ]

  <p>
    (link: "Vidéo n°3")[
      (append: ?video3)[
        <p>
          <video src="https://files.catbox.moe/54dvgo.mp4"
                 controls
                 style="max-width: 500px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
          </video>
        </p>
      ]
    ]
  </p>

  |video3>[ ]

  <div class="dialogue">
    <p><strong>Alain Delon&nbsp;:</strong> « Pas évident, pas évident… Naturellement, je ne peux pas t'aider, je joue dans les trois. Si tu trouves, j'aurai pleinement confiance en toi. »</p>
  </div>

  <div class="computer-frame">
    <div class="computer-screen">
      <p>Veuillez sélectionner une vidéo.</p>
      <p>
        (link: "Vidéo n°1")[
          (set: $points to $points - 10)
          (goto: "Video 1")
        ]
      </p>
      <p>
        (link: "Vidéo n°2")[
          (set: $points to $points + 10)
          (goto: "Video 2")
        ]
      </p>
      <p>
        (link: "Vidéo n°3")[
          (set: $points to $points - 10)
          (goto: "Video 3")
        ]
      </p>
    </div>
  </div>
</div>




:: Video 1 {"position":"325,1100","size":"100,100"}
(display: "HUD")

<style>
  html, body {
    margin: 0;
    padding: 0;
    background: url("https://files.catbox.moe/93srdi.jpg") center center fixed no-repeat !important;
    background-size: cover !important;
  }

  tw-story, tw-passage {
    background: transparent !important;
    color: white !important;
    text-shadow: 0 0 6px rgba(0,0,0,0.8);
  }

  .computer-frame {
    max-width: 520px;
    margin: 2em auto;
    padding: 1.2em;
    border-radius: 10px;
    border: 3px solid #00ff7f;
    background: rgba(0, 0, 0, 0.9);
    box-shadow: 0 0 20px rgba(0,0,0,0.9);
    font-family: "Courier New", monospace;
  }

  .computer-screen {
    border-radius: 6px;
    padding: 1em;
    background: radial-gradient(circle at top, #003300, #000000);
    color: #9cff9c;
    font-size: 0.95em;
    line-height: 1.5;
  }

  @keyframes blinkError {
    0%   { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
  }

  .error-blink {
    color: #ff4444;
    font-weight: bold;
    animation: blinkError 0.7s infinite;
  }
</style>

<script>
  if (window.radioAudio) {
    window.radioAudio.pause();
    window.radioAudio = null;
  }
  if (window.ambianceDelon) {
    window.ambianceDelon.pause();
    window.ambianceDelon = null;
  }
  if (window.filmAudio) {
    window.filmAudio.pause();
    window.filmAudio = null;
  }

  const amb = new Audio("https://files.catbox.moe/eiximt.mp3");
  amb.volume = 0.8;
  amb.loop = false;
  amb.play().catch(()=>{});

  window.ambianceDelon = amb;
</script>

<div class="fade-in">

  <div class="computer-frame">
    <div class="computer-screen">
      <p><span class="error-blink">Error&nbsp;!</span></p>
      <p>Opération échouée. L'ordinateur s'autodétruira dans 3 secondes.</p>
    </div>
  </div>

  <p>Vous vous éloignez le plus vite possible et entendez un grand 
    (link: "BOUM")[
      (append: ?boum)[
        <script>
          if (window.filmAudio) {
            window.filmAudio.pause();
          }
          const explosion = new Audio("https://files.catbox.moe/7afl9d.mp3");
          explosion.volume = 1.0;
          explosion.play().catch(()=>{});
          window.filmAudio = explosion;
        </script>
      ]
    ]
  </p>

  |boum>[ ]

  <div class="dialogue">
    <p><strong>Alain Delon&nbsp;:</strong> « C'était un extrait de 
      <span style="font-style: normal;"> (link: "Plein Soleil")[
        (append: ?pleinsoleil)[
          <p>
            <img src="https://files.catbox.moe/5o7gj8.webp"
                 alt="Plein Soleil"
                 style="max-width: 500px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
          </p>
        ]
      ]</span>
     Ça n'a rien à voir avec Melville&nbsp;! C'est un film de René Clément sorti en 1960. »</p>
  </div>

  |pleinsoleil>[ ]

  <div class="dialogue">
    <p><strong>Alain Delon&nbsp;:</strong> « Je ne peux pas te faire confiance. Je m'en vais. »</p>
  </div>

  <div class="dialogue">
    <p><strong>[$prenom]&nbsp;:</strong> « Laissez-moi une dernière chance, juste une dernière. »</p>
  </div>

  <p>
    (link: "Dernière chance [$prenom]")[
      (goto: "Trace du chapeau")
    ]
  </p>

</div>



:: Video 2 {"position":"450,1100","size":"100,100"}
(display: "HUD")

<style>
  html, body {
    margin: 0;
    padding: 0;
    background: url("https://files.catbox.moe/srglz1.jpg") center center fixed no-repeat !important;
    background-size: cover !important;
  }

  tw-story, tw-passage {
    background: transparent !important;
    color: white !important;
    text-shadow: 0 0 6px rgba(0,0,0,0.8);
  }

  .computer-frame {
    max-width: 520px;
    margin: 2em auto;
    padding: 1.2em;
    border-radius: 10px;
    border: 3px solid #00ff7f;
    background: rgba(0, 0, 0, 0.9);
    box-shadow: 0 0 20px rgba(0,0,0,0.9);
    font-family: "Courier New", monospace;
  }

  .computer-screen {
    border-radius: 6px;
    padding: 1em;
    background: radial-gradient(circle at top, #003300, #000000);
    color: #9cff9c;
    font-size: 0.95em;
    line-height: 1.5;
  }

  @keyframes blinkSuccess {
    0%   { opacity: 1; }
    50%  { opacity: 0.2; }
    100% { opacity: 1; }
  }

  .success-blink {
    color: #7CFF7C;
    font-weight: bold;
    animation: blinkSuccess 0.8s infinite;
  }
</style>

<script>
  if (window.radioAudio) {
    window.radioAudio.pause();
    window.radioAudio = null;
  }
  if (window.ambianceDelon) {
    window.ambianceDelon.pause();
    window.ambianceDelon = null;
  }
  if (window.filmAudio) {
    window.filmAudio.pause();
    window.filmAudio = null;
  }
</script>

<div class="fade-in">

  <div class="computer-frame">
    <div class="computer-screen">
      <p><span class="success-blink">Félicitations 🎉</span></p>
      <p>Voici l'endroit où se trouve Melville&nbsp;: 48.957327,3.071323. Tu touches au but détective.</p>
    </div>
  </div>

  <div class="dialogue">
    <p><strong>Alain Delon&nbsp;:</strong> « Bravo [$prenom] ! Je vois que tu connais parfaitement la filmographie de Melville ! C'était un extrait du 
      (link: "Cercle Rouge")[
        (append: ?cercle)[
          <p>
            <img src="https://files.catbox.moe/7t11ot.jpg"
                 alt="Le Cercle rouge"
                 style="max-width: 500px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
          </p>
          <script>
            if (window.filmAudio) {
              window.filmAudio.pause();
            }
            const music = new Audio("https://files.catbox.moe/agtxqv.mp3");
            music.volume = 0.9;
            music.loop = false;
            music.play().catch(()=>{});
            window.filmAudio = music;
          </script>
        ]
      ]
      ! J'ai pris beaucoup de plaisir à tourner cette scène avec Gian Maria Volonté. J'ai pleinement confiance en toi maintenant ! »</p>
  </div>

  |cercle>[ ]

  <p>Vous sortez votre boussole et vous vous dirigez vers l'endroit indiqué par l'ordinateur.</p>

  <p>Soudain, vous découvrez un cadavre gisant au sol&nbsp;: il y a beaucoup de sang. Il porte un imper et des lunettes de soleil.</p>

  <div class="dialogue">
    <p><strong>[$prenom]&nbsp;:</strong> « C'est peut-être Melville&nbsp;: son chapeau puis maintenant des lunettes de soleil et un imper&nbsp;! »</p>
  </div>

  <p>Vous retournez le cadavre.</p>

  <div class="dialogue">
    <p><strong>Alain Delon&nbsp;:</strong> « Ce n'est pas lui&nbsp;! Je l'aurais forcément reconnu. C'est tout de même étrange qu'on nous ait amené là. Comme si on voulait volontairement nous induire en erreur… »</p>
  </div>

  <p>Soudain, vous apercevez un homme au loin qui court à toute vitesse.</p>

  <p>
    (link: "Courir vers l'homme en fuite")[
      (goto: "Courir vers l'homme en fuite")
    ]
  </p>

</div>



:: Video 3 {"position":"575,1100","size":"100,100"}
(display: "HUD")

<style>
  html, body {
    margin: 0;
    padding: 0;
    background: url("https://files.catbox.moe/93srdi.jpg") center center fixed no-repeat !important;
    background-size: cover !important;
  }

  tw-story, tw-passage {
    background: transparent !important;
    color: white !important;
    text-shadow: 0 0 6px rgba(0,0,0,0.8);
  }

  .computer-frame {
    max-width: 520px;
    margin: 2em auto;
    padding: 1.2em;
    border-radius: 10px;
    border: 3px solid #00ff7f;
    background: rgba(0, 0, 0, 0.9);
    box-shadow: 0 0 20px rgba(0,0,0,0.9);
    font-family: "Courier New", monospace;
  }

  .computer-screen {
    border-radius: 6px;
    padding: 1em;
    background: radial-gradient(circle at top, #003300, #000000);
    color: #9cff9c;
    font-size: 0.95em;
    line-height: 1.5;
  }

  @keyframes blinkError {
    0%   { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
  }

  .error-blink {
    color: #ff4444;
    font-weight: bold;
    animation: blinkError 0.7s infinite;
  }
</style>

<script>
  if (window.radioAudio) {
    window.radioAudio.pause();
    window.radioAudio = null;
  }
  if (window.ambianceDelon) {
    window.ambianceDelon.pause();
    window.ambianceDelon = null;
  }
  if (window.filmAudio) {
    window.filmAudio.pause();
    window.filmAudio = null;
  }

  const amb = new Audio("https://files.catbox.moe/eiximt.mp3");
  amb.volume = 0.8;
  amb.loop = false;
  amb.play().catch(()=>{});

  window.ambianceDelon = amb;
</script>

<div class="fade-in">

  <div class="computer-frame">
    <div class="computer-screen">
      <p><span class="error-blink">Error&nbsp;!</span></p>
      <p>Opération échouée. L'ordinateur s'autodétruira dans 3 secondes.</p>
    </div>
  </div>

  <p>Vous vous éloignez le plus vite possible et entendez un grand 
    (link: "BOUM")[
      (append: ?boum)[
        <script>
          if (window.filmAudio) {
            window.filmAudio.pause();
          }
          const explosion = new Audio("https://files.catbox.moe/7afl9d.mp3");
          explosion.volume = 1.0;
          explosion.play().catch(()=>{});
          window.filmAudio = explosion;
        </script>
      ]
    ]
  </p>

  |boum>[ ]

  <div class="dialogue">
    <p><strong>Alain Delon&nbsp;:</strong> « C'était un extrait du 
      <span style="font-style: normal;"> (link: "Clan des Siciliens")[
        (append: ?ClandesSiciliens)[
          <p>
            <img src="https://files.catbox.moe/3vb087.jpg"
                 alt="Plein Soleil"
                 style="max-width: 500px; height: auto; border-radius: 10px; box-shadow: 0 0 18px rgba(0,0,0,0.6);">
          </p>
        ]
      ]</span>
     Ça n'a rien à voir avec Melville&nbsp;! C'est un film de Henri Verneuil sorti en 1969. J'y suis avec mes potes et mes mentors : Ventura et Gabin.»</p>
  </div>

  |ClandesSiciliens>[ ]

  <div class="dialogue">
    <p><strong>Alain Delon&nbsp;:</strong> « Je ne peux pas te faire confiance. Je m'en vais. »</p>
  </div>

  <div class="dialogue">
    <p><strong>[$prenom]&nbsp;:</strong> « Laissez-moi une dernière chance, juste une dernière. »</p>
  </div>

  <p>
    (link: "Dernière chance [$prenom]")[
      (goto: "Trace du chapeau")
    ]
  </p>

</div>



:: StoryStylesheet [stylesheet]
body {
  background-color: #0a0a0a;
  background-image:
    radial-gradient(circle at top left, #1a1a1a 0%, #000 100%),
    url("https://upload.wikimedia.org/wikipedia/commons/4/4d/Street_at_night_Paris_1950s.jpg");
  background-size: cover;
  background-blend-mode: multiply;
  color: #e5e5e5;
  font-family: "Courier Prime", "Courier New", monospace;
  line-height: 1.6;
  margin: 0;
  height: 100vh;
  overflow-y: auto;
}


.passage {
  max-width: 700px;
  margin: 8vh auto;
  background: rgba(0, 0, 0, 0.6);
  padding: 2.5em;
  border-radius: 10px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
  animation: fadeIn 1.5s ease-in;
  backdrop-filter: blur(3px);
}


h2 {
  text-align: center;
  color: #f5deb3;
  font-family: "Playfair Display", serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 0.8em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 0.4em;
}


p {
  color: #e0e0e0;
  font-size: 1.05em;
  margin-bottom: 1.2em;
}


a {
  display: inline-block;
  color: #ffcc66;
  text-decoration: none;
  border-bottom: 1px dotted #ffcc66;
  transition: color 0.3s, text-shadow 0.3s;
}

a:hover {
  color: #fff3b0;
  text-shadow: 0 0 5px #ffcc66;
}


.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 0.12em solid #ffcc66;
  width: 0;
  animation: typing steps(var(--chars)) 3s forwards, blink 1s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: calc(var(--chars) * 1ch); }
}

@keyframes blink {
  50% { border-color: transparent; }
}


.fade-in {
  animation: fadeIn 1.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}


.whisper {
  font-style: italic;
  color: #aaa;
  opacity: 0.8;
}


blockquote {
  border-left: 3px solid #ffcc66;
  padding-left: 1em;
  color: #ddd;
  opacity: 0.9;
  margin-left: 0;
}


strong {
  color: #ffb84d;
}
.dialogue {
  margin: 1.2em 0;
  padding: 0.8em 1.1em;
  background: rgba(0, 0, 0, 0.35);
  border-left: 4px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  line-height: 1.6;
}


.dialogue p {
  margin: 0;
  font-style: italic;
}


.dialogue p strong {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-right: 0.35em;
}

#xpBar {
  position: fixed;
  top: 10px;
  right: 15px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 10px;
  color: white;
  font-weight: bold;
  font-size: 1.05em;
  backdrop-filter: blur(4px);
  z-index: 9999;
  border: 1px solid rgba(255,255,255,0.2);
}