JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<<nobr>> <<audio "introhum" loop play volume 0.5>> <div class="intro-main"> <p class="glitch-line">[CONNEXION_CONNECTA::ALICE_UNAVAILABLE]</p> <h1 class="intro-headline"> <span class="intro-headline--first">"Elle n’a plus donné signe de vie depuis deux mois."</span><br> <span class="intro-headline--second">"Personne ne semble inquiet..."</span><br> <span class="intro-headline--third">"Mais moi, je sais que quelque chose cloche..."</span><br> </h1> <div class="intro-choice"> [[Lancer la reconstruction →|INTRO_0]] </div> </div> <</nobr>> <style> #passages { max-width: 64rem; } .glitch-line { font-family: 'IBM Plex Mono', monospace; color: rgba(150, 150, 255, 0.4); font-size: 1.25em; margin-top: 15px; animation: glitchFlash 2s infinite alternate; letter-spacing: 0.05em; } @keyframes glitchFlash { 0%, 40% { opacity: 0; } 60% { opacity: 0.9; } 100% { opacity: 0; } } body { margin: 0; height: 100%; background: radial-gradient(circle at 50% 20%, #0a0a15 0%, #000 90%); background-repeat: no-repeat; overflow-y: scroll; position: relative; font-family: 'IBM Plex Mono', monospace; color: #aab0ff; } body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(90, 70, 200, 0.15), transparent 70%), radial-gradient(circle at 80% 70%, rgba(140, 90, 255, 0.1), transparent 70%); animation: pulseLight 14s infinite alternate ease-in-out; z-index: -3; } body::after { content: ""; position: fixed; inset: 0; background-image: radial-gradient(rgba(180, 180, 255, 0.1) 1px, transparent 1px); background-size: 3px 3px; opacity: 0.25; animation: drift 60s linear infinite; z-index: -2; } .glitch-overlay { position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 2px, transparent 4px ); mix-blend-mode: overlay; opacity: 0.15; animation: scan 8s linear infinite; z-index: -1; } @keyframes scan { 0% { background-position-y: 0; } 100% { background-position-y: 100%; } } .intro-main { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; text-align: center; padding: 0 1.25rem; } .intro-headline--first { opacity: 0; animation: fadeInText 2s ease forwards; } .intro-headline--second { opacity: 0; animation: fadeInText 2s ease 1.5s forwards; } .intro-headline--third { opacity: 0; animation: fadeInText 2s ease 3s forwards; } .intro-main span{ display: inline-block; margin-bottom: 30px; } .intro-headline { font-size: 1.8em; line-height: 1.6em; font-weight: 400; color: #c7c7ff; max-width: 1024px; text-shadow: 0 0 6px rgba(150, 150, 255, 0.2); } .intro-headline-break { display: block; height: 0.8em; } @keyframes fadeInText { 0% { opacity: 0; transform: translateY(20px); filter: blur(4px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .intro-choice { margin-top: 60px; text-align: center; animation: fadeIn 2s ease forwards; animation-delay: 3s; } .intro-choice a.link-internal { color: #99aaff; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid #333; padding: 12px 24px; border-radius: 8px; text-decoration: none; transition: all 0.3s ease; font-weight: 600; } .intro-choice a.link-internal:hover { background-color: rgba(80, 80, 255, 0.1); text-shadow: 0 0 8px #88f; color: #fff; border-color: #555; transform: scale(1.02); } @media (max-width: 1024px) { } @media (max-width: 768px) { } @media (max-width: 480px) { .glitch-line { font-size: 0.8em; word-break: break-word; } } </style>
<<nobr>> <<include "CSS_HACKSCREEN">> <<set $hackingStatus = false>> <<audio "introhum" play volume 0.2>> <div class="hack-intro-main"> <h1 class="hack-headline"> "Je dois trouver la cause de sa disparition."<br> <span class="intro-headline-break"></span> "Mais pour ça je dois enquêter..."<br> <span class="intro-headline-break"></span> "Depuis sa disparition, je suis vide... j'ai comme un trou noir au fond de moi..."<br> <span class="intro-headline-break"></span> "Je dois accéder à son compte, pas tous les moyens..." </h1> <div class="postit-wrap-container"> <div class="postit-wrap"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/postit.png" alt="Post-it adresse mail" class="postit-img"> <div class="postit-text"></div> </div> <p class="postit-indice">Key_98679688893</p> </div> <div class="hack-choice"> [[Commencer le hack][$hackingStatus = true]] </div> </div> <</nobr>>
<div class="intro-main"> <h1 class="intro-headline">"Hack en cours..."</h1> <span id="progress">█ █ █ █ █ █ █ █ █ █</span> "Terminé." <button class="intro-button" onclick="SugarCube.Engine.play('MESSAGERIE')">Se connecter</button> </div>
<div class="message"><b>Alan:</b> Salut Alice, tu ne réponds plus depuis des semaines...</div> <div class="message"><b>Alice:</b> Alan, arrête. Ce n’est pas sain.</div> (link: "Voir les anciens messages")[ (set: $messagesLus to $messagesLus + 1) (goto: "AnciensMessages") ]
"Dans le dossier 'Photos', tu trouves des captures d’écran d’Alice à des endroits qu’elle n’a jamais postés..." (if: $messagesLus >= 3)[ (link: "Ouvrir le journal d’Alice")[ (goto: "JournalAlice") ] ]
<<nobr>> <<audio "introhum" play volume 0.25>> <<include "CSS_ALAN_MONOLOGUE">> <div class="profil-locked"> <div class="profil-system glitch"> “Ce profil est temporairement indisponible.” </div> <div class="alan-thought"> <p>Pourquoi je n’ai plus accès à son profil ?</p> <p>Quelqu’un a dû lui dire de me bloquer ou quelqu'un veut m'éloigner d’elle.</p> <p>Julien son ex, sans doute ou Léa sa meilleure amie. Ils ont toujours eu une influence sur elle.</p> <p>Ils ne m’ont jamais apprécié.</p> </div> <div class="profil-choice"> <!-- [[INTRO2]] --> <<button "Contourner le système">> <<goto "INTRO2">> <</button>> </div> </div> <</nobr>> <style> #passages { max-width: 64rem; } .profil-locked { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; text-align: center; padding: 0 10%; background: radial-gradient(circle at 50% 40%, #060612 0%, #000 90%); color: #d0d0ff; animation: fadeIn 2s ease; } .profil-system { font-size: 1.3em; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: #9aaaff; text-shadow: 0 0 8px rgba(120, 120, 255, 0.6); margin-bottom: 60px; animation: glitch-flicker 0.4s infinite; } .glitch { position: relative; display: inline-block; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; width: 100%; color: inherit; clip: rect(0, 0, 0, 0); } .photo-dialogue { max-width: 500px; margin: 50px auto 0; font-family: 'IBM Plex Mono', monospace; font-style: italic; color: #c6c9ff; font-size: 1.1rem; text-shadow: 0 0 5px rgba(150,150,255,0.1); } </style>
<<nobr>> <<audio "introhum" play volume 0.25>> <<include "CSS_ALAN_MONOLOGUE">> <div class="alan-thought"> <p>Je revois cette soirée... notre première vraie conversation.</p> <p>Elle riait à mes blagues, même les plus nulles.</p> <p>Elle m’écoutait, vraiment et c’est là que tout a commencé.</p> <p>Après ça, je lui écrivais tous les jours. Chaque message comptait, chaque réponse voulait dire quelque chose.</p> <p>Et puis... elle s’est mise à répondre moins souvent. Pas de dispute, rien. Juste... du silence.</p> <p>Peut-être qu’elle a supprimé son profil. N’importe quoi. Connecta garde tout. Rien ne disparaît, jamais.</p> <p>Il s’est passé quelque chose. Pas entre nous, mais <em>autour</em> de nous.</p> </div> <div class="party-gallery"> <img class="click-option party-image fade-in delay3" onclick="showAlanThought('Je t’ai vu au loin, tu discutaos avec une amie à toi.')" src="https://dylanjacquet.com/wp-content/uploads/2025/10/party-2.png" alt="Soirée Connecta 4"> <img class="click-option party-image fade-in" onclick="showAlanThought('Je me suis approché et j’ai attendu que ton amie s’éloigne.')" src="https://dylanjacquet.com/wp-content/uploads/2025/10/party-4.png" alt="Soirée Connecta 1"> <img class="click-option party-image fade-in delay2" onclick="showAlanThought('J’ai saisi l’opportunité pour t’approcher.')" src="https://dylanjacquet.com/wp-content/uploads/2025/10/party-1.png" alt="Soirée Connecta 3"> <img class="click-option party-image fade-in delay1" onclick="showAlanThought('Je me suis présenté et là, c’était le coup de foudre. Je ne voulais plus te lâcher. Tu es incroyable Alice.')" src="https://dylanjacquet.com/wp-content/uploads/2025/10/party-3.png" alt="Soirée Connecta 2"> </div> <<include "REACT_ALAN_PARTIAL">> <div class="party-choice"> [[Vérifier son profil Connecta][$profilSeen = true]] </div> <</nobr>> <style> #passages { max-width: 64rem; } .party-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; justify-items: center; align-items: center; max-width: 900px; margin: 80px auto 40px; padding: 0 5%; } .party-image { width: 100%; max-width: 400px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); opacity: 0; filter: grayscale(30%) brightness(0.8) contrast(1.1); transition: opacity 2s ease, transform 2s ease; transform: scale(1.05); } .fade-in { animation: fadeInImg 3s forwards; } .fade-in.delay1 { animation-delay: 1s; } .fade-in.delay2 { animation-delay: 2s; } .fade-in.delay3 { animation-delay: 3s; } @keyframes fadeInImg { 0% { opacity: 0; transform: scale(1.1) translateY(10px); } 100% { opacity: 1; transform: scale(1.0) translateY(0); } } .party-text { text-align: center; color: #c7c7ff; font-size: 1.2em; font-style: italic; margin-top: 40px; line-height: 1.6em; animation: fadeIn 3s ease; max-width: 700px; margin-left: auto; margin-right: auto; } .party-choice { text-align: center; margin-top: 50px; } .party-choice a.link-internal { display: inline-block; margin: 10px; padding: 10px 20px; color: #99aaff; background: rgba(40,40,60,0.4); border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); } .photo-dialogue { max-width: 500px; margin: 50px auto 0; font-family: 'IBM Plex Mono', monospace; margin-top: 50px; font-style: italic; color: #c6c9ff; font-size: 1.1rem; text-shadow: 0 0 5px rgba(150,150,255,0.1); } @media (max-width: 480px) { .party-gallery { margin-top: 0 !important; } } </style>
<div class="minijeu"> <h2>Choisis la bonne clé pour te connecter</h2> <p id="triesDisplay">Essais restants : <strong><<print $tries>></strong></p> <div id="actions"> <!-- [[MiniJeuActions]] --> <<include "MiniJeuActions">> </div> <div id="message"></div> <!-- [[MiniJeuSuccess]] --> <<include "MiniJeuSuccess">> </div> <style> #passages { max-width: 64rem; } .minijeu { max-width: 880px; margin: 48px auto; padding: 28px; background: linear-gradient(180deg, rgba(10,12,20,0.72), rgba(4,6,12,0.85)); border-radius: 14px; border: 1px solid rgba(120,110,255,0.06); box-shadow: 0 12px 40px rgba(20,16,40,0.6), inset 0 1px 0 rgba(255,255,255,0.02); color: #dfe8ff; font-family: 'IBM Plex Mono', monospace; } .minijeu h2 { font-size: 1.15rem; margin: 0 0 12px 0; color: #cbd3ff; letter-spacing: 0.02em; text-shadow: 0 0 6px rgba(120,120,255,0.06); } #triesDisplay { margin: 8px 0 18px 0; font-size: 0.95rem; color: #aebef8; } #triesDisplay strong { color: #fff; text-shadow: 0 0 6px rgba(140,170,255,0.15); } #actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 18px 0; justify-content: center; } #actions button, #actions .link-like-button { background: linear-gradient(180deg, rgba(60,80,210,0.12), rgba(80,50,180,0.06)); border: 1px solid rgba(140,120,255,0.12); color: #e9efff; padding: 10px 16px; border-radius: 10px; min-width: 190px; cursor: pointer; font-weight: 700; letter-spacing: 0.03em; transition: transform .12s ease, box-shadow .12s ease, opacity .18s; box-shadow: 0 6px 18px rgba(40,30,80,0.25); text-transform: uppercase; } #actions button:hover, #actions button:focus { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(80,60,200,0.14); outline: none; } #actions button[disabled] { opacity: 0.36; transform: none; cursor: not-allowed; box-shadow: none; filter: grayscale(0.35) saturate(0.8); } #message { min-height: 56px; margin-top: 8px; margin-bottom: 18px; color: #ffd8d8; background: linear-gradient(90deg, rgba(255,80,80,0.02), rgba(255,255,255,0.01)); padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,80,80,0.06); font-size: 0.95rem; } #successArea { margin-top: 16px; padding: 14px; background: linear-gradient(180deg, rgba(20,35,60,0.25), rgba(10,12,24,0.18)); border-radius: 10px; border: 1px solid rgba(110,200,255,0.04); color: #cfeaff; } .glitch-screen { padding: 10px; background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(140,120,255,0.02)); border-radius: 8px; color: #e6f5ff; text-align: center; font-weight: 600; letter-spacing: 0.02em; } .glitch-screen p { margin: 6px 0; } .glitch-screen p:first-child { font-size: 0.98rem; color: #dff2ff; } .glitch-anim { display:inline-block; position:relative; animation: microGlitch 0.45s steps(2, end) infinite; text-shadow: 2px 0 #caa6ff, -2px 0 #80f0ff; } @keyframes microGlitch { 0% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(1px); opacity: .95; } 100% { transform: translateX(0); opacity: 1; } } .shake { animation: shakeIt .42s cubic-bezier(.36,.07,.19,.97) both; } @keyframes shakeIt { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } .minijeu button { margin-top: 10px; background: linear-gradient(90deg, #2e3fb8, #7a3bc3); border: none; color: #fff; padding: 10px 20px; border-radius: 10px; cursor: pointer; font-weight: 800; letter-spacing: 0.04em; } .minijeu button:hover { box-shadow: 0 14px 30px rgba(120,80,255,0.14); transform: translateY(-3px); } @media (max-width:720px) { .minijeu { padding: 18px; margin: 20px; } #actions button { min-width: 44%; font-size: 0.92rem; padding: 10px; } #message { font-size: 0.92rem; } } </style>
<<nobr>> <div class="profil-page"> <div class="profil-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="photo de profil" class="profil-avatar" width="150" height="150"> <div class="profil-info"> <h2>Alice Moreau</h2> <p class="profil-handle">@alice_connecta</p> <div class="profil-stats"> <span><strong>152</strong> abonnements</span> <span><strong>1 248</strong> abonnés</span> <span><strong>327</strong> posts</span> </div> <p class="profil-bio">“Chercheuse en neurosciences. J’écris parfois ce que je ne devrais pas.”</p> </div> </div> <hr> <div class="profil-feed"> <div class="tweet"> <p class="tweet-date">2 mois avant sa disparition</p> <p>POST 1 LABLABLABLABLABLABALANKASNSopihdso</p> </div> <div class="tweet"> <p class="tweet-date">2 mois avant sa disparition</p> <p>POST 2 LABLABLABLABLABLABALANKASNSopihdso</p> </div> <div class="tweet"> <p class="tweet-date">1 semaine avant sa disparition</p> <p>POST 3 LABLABLABLABLABLABALANKASNSopihdso</p> </div> <div class="tweet"> <p class="tweet-date">Dernier post — il y a 2 mois</p> <p>POST 4 LABLABLABLABLABLABALANKASNSopihdso</p> </div> </div> <div class="profil-footer"> <<button "Se diriger vers la messagerie">><<goto "InboxAlice">><</button>> </div> </div> <</nobr>> <style> .profil-page { max-width: 600px; margin: 2em auto; background: #0a0a0a; color: #eaeaea; border-radius: 16px; padding: 1.5em; box-shadow: 0 0 10px rgba(0,0,0,0.6); font-family: "Inter", sans-serif; } .profil-header { display: flex; align-items: center; gap: 1em; } .profil-avatar { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 2px solid #1da1f2; } .profil-info h2 { margin: 0; font-size: 1.4em; } .profil-handle { color: #8fa1b3; margin: 0.2em 0; } .profil-bio { font-style: italic; margin: 0.4em 0; color: #ccc; } .profil-stats { font-size: 0.9em; color: #aaa; display: flex; gap: 1em; } .profil-feed { margin-top: 1.2em; } .tweet { background: #111; padding: 1em; border-radius: 10px; margin-bottom: 0.8em; border: 1px solid #1f1f1f; } .tweet:hover { background: #151515; } .tweet-date { color: #777; font-size: 0.8em; margin-bottom: 0.3em; } .profil-footer { text-align: center; margin-top: 1.5em; } .profil-footer button { background: #1da1f2; color: white; border: none; border-radius: 8px; padding: 0.6em 1.2em; font-size: 1em; cursor: pointer; } .profil-footer button:hover { background: #1a8cd8; } </style>
<<set $messagesSeen = false>> <<set $partySeen = false>> <<set $profilSeen = false>> <<set $firstTimeChoice = false>> <<set $firstTimeSettings = false>> <<set $audioEnabled = true>> <<set $glitchMode = true>> <<set $tries to 0>> <<set $success to false>> <<set $connected to false>> <<set $alphaDisabled to false>> <<set $betaDisabled to false>> <<set $gammaDisabled to false>> <<set $screenViewToHesitation to 0>> <<set $contactVisitedAlanBlocked to false >> <<set $hesitationDecisionSecond to false>> <<set $messageLea to false>> <<set $messageJulien to false>> <<set $messageAlan to false>> <<set $messageAntoine to false>> <<set $screenLogs to false>> <<set $screenContacts to false>> <<set $screenPhotos to false>> <<set $newsConnectaUpdate to false>> <<set $newsDisparition to false>> <<set $newsBalance to false>> <<set $settingUnlocked to false>> <<set $isSettingUnlockedFirst to true >> <<set $contactUnlocked to false>> <<set $isContactUnlockedFirst to true >> <<set $messageUnlocked to false>> <<set $isMessageUnlockedFirst to true >> <<set $objectif1 to false>> <<set $objectif2 to false>> <<set $objectif3 to false>> <<set $objectif4 to false>> <<set $objectif5 to false>> <<cacheaudio "introhum" "https://dylanjacquet.com/wp-content/uploads/2025/10/low-engine-hum-72529.mp3">> <<cacheaudio "homepageSound" "https://dylanjacquet.com/wp-content/uploads/2025/10/fantomes-de-paris-421616.mp3">> <<cacheaudio "bipbopbip" "https://dylanjacquet.com/wp-content/uploads/2025/10/start-sound-beep-102201.mp3">>
<<nobr>> <<if $tries < 2>> <!-- Clé Alpha --> <<if !$alphaDisabled>> <<button "Key_7745302893">> <<set $success = false>> <<set $tries += 1>> <<set $alphaDisabled = true>> <<replace "#triesDisplay">>Essais restants : <strong><<print 3 - $tries>></strong><</replace>> <<replace "#message">> <p>Erreur. Le système renvoie une suite de chiffres illisibles...</p> <p>ATTENTION : Il ne reste que <<print 3 - $tries>> essai(s).</p> <</replace>> <<replace "#actions">><<include "MiniJeuActions">><</replace>> <</button>> <<else>> <button disabled>Clé Alpha (bloquée)</button> <</if>> <!-- Clé Beta --> <<if !$betaDisabled>> <<button "Key_772737383923">> <<set $success = false>> <<set $tries += 1>> <<set $betaDisabled = true>> <<replace "#triesDisplay">>Essais restants : <strong><<print 3 - $tries>></strong><</replace>> <<replace "#message">> <p>Erreur. L’écran devient noir un instant...</p> <p>ATTENTION : Il ne reste que <<print 3 - $tries>> essai(s).</p> <</replace>> <<replace "#actions">><<include "MiniJeuActions">><</replace>> <</button>> <<else>> <button disabled>Clé Beta (bloquée)</button> <</if>> <<if !$gammaDisabled>> <<button "Key_98679688893">> <<set $success = true>> <<set $gammaDisabled = true>> <<replace "#message">><p>Dernière tentative — accès accepté.</p><</replace>> <<replace "#actions">><em>Accès en cours...</em><</replace>> <<replace "#successArea">><<include "MiniJeuSuccess">><</replace>> <</button>> <<else>> <button disabled>Clé Gamma (bloquée)</button> <</if>> <<else>> <!-- $tries >= 2 : réussite --> <<if !$alphaDisabled>> <<button "Key_7745302893">> <<set $success = true>> <<set $alphaDisabled = true>> <<replace "#message">><p>Dernière tentative — accès accepté.</p><</replace>> <<replace "#actions">><em>Accès en cours...</em><</replace>> <<replace "#successArea">><<include "MiniJeuSuccess">><</replace>> <</button>> <<else>> <button disabled>Clé Alpha (bloquée)</button> <</if>> <<if !$betaDisabled>> <<button "Key_772737383923">> <<set $success = true>> <<set $betaDisabled = true>> <<replace "#message">><p>Dernière tentative — accès accepté.</p><</replace>> <<replace "#actions">><em>Accès en cours...</em><</replace>> <<replace "#successArea">><<include "MiniJeuSuccess">><</replace>> <</button>> <<else>> <button disabled>Clé Beta (bloquée)</button> <</if>> <<if !$gammaDisabled>> <<button "Key_98679688893">> <<set $success = true>> <<set $gammaDisabled = true>> <<replace "#message">><p>Dernière tentative — accès accepté.</p><</replace>> <<replace "#actions">><em>Accès en cours...</em><</replace>> <<replace "#successArea">><<include "MiniJeuSuccess">><</replace>> <</button>> <<else>> <button disabled>Clé Gamma (bloquée)</button> <</if>> <</if>> <</nobr>>
<div id="successArea"> <<if $success>> <p>HACK terminé. J'ai enfin réussi à craquer son mot de passe. Je vais enfin pouvoir débuter mon enquête et là retrouver. Je te souverai Alice...</p> <<set $connected = true>> <<replace "#message">> <div class="glitch-screen"> <p>ACCÈS ACCEPTÉ – DÉCRYPTAGE EN COURS…</p> <p>HACK TERMINÉ.</p> <p>Vous êtes maintenant connecté au compte d’Alice.</p> </div> <</replace>> <<button "Explorer le compte">> <!-- [[CHOICE_SCREEN]] --> <<goto "CHOICE_SCREEN">> <</button>> <</if>> </div>
<<include "CssMessenger">> <<nobr>> <div class="messenger inbox"> <div class="header"> <div class="meta"> <div class="name">Messages d’Alice</div> <div class="sub">Connecta / Boîte privée</div> </div> <div class="status-glitch">Accès non autorisé <span class="blink">_</span></div> </div> <div class="inbox-list"> <div class="conv unread" onclick="SugarCube.Engine.play('ChatAliceLeaThread')"> <img class="avatar" src="https://dylanjacquet.com/wp-content/uploads/2025/10/lea.jpg" alt="Léa"> <div class="conv-info"> <div class="name">Léa D.</div> <div class="preview">“Il m’a dit qu’il te retrouverait.”</div> </div> <div class="time">23 mai</div> </div> <div class="conv" onclick="SugarCube.Engine.play('ChatAliceMarkThread')"> <img class="avatar" src="https://dylanjacquet.com/wp-content/uploads/2025/10/mark.webp" alt="Marc"> <div class="conv-info"> <div class="name">Marc R.</div> <div class="preview">Café demain ? :)</div> </div> <div class="time">25 mai</div> </div> <div class="conv unread" onclick="SugarCube.Engine.play('ChatAliceConnectaThread')"> <img class="avatar" src="https://dylanjacquet.com/wp-content/uploads/2025/10/connecta.jpg" alt="Connecta"> <div class="conv-info"> <div class="name">Support Connecta</div> <div class="preview">Erreur : appareil principal non supprimable</div> </div> <div class="time">27 mai</div> </div> <div class="conv" onclick="SugarCube.Engine.play('ChatAlicePersonnalThread')"> <img class="avatar" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div class="conv-info"> <div class="name">Brouillon</div> <div class="preview">“S’il trouve ce message… c’est qu’il a réussi.”</div> </div> <div class="time">29 mai</div> </div> </div> <div class="footer"> <div class="hint">📂 Fichiers archivés • <span class="glitch">2 conversations cachées</span></div> </div> </div> <<link "Se déconnecter">><<goto "Hack_Disconnect">><</link>> <</nobr>>
<<include "CssMessenger">> <<nobr>> <div class="messenger"> <div class="header"> <img class="avatar" src="https://dylanjacquet.com/wp-content/uploads/2025/10/lea.jpg" alt="Léa"> <div class="meta"> <div class="name">Léa D.</div> <div class="sub">Vu pour la dernière fois il y a 2 mois</div> </div> </div> <div class="thread"> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">T’as vu Alan à la soirée hier ?</div> <div class="time">22 mai • 01:12</div> </div> </div> <div class="msg-row them"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/lea.jpg" alt="Léa"> <div> <div class="bubble them">Le gars en info ? Ouais vite fait, il avait l’air de bien t’aimer 😏</div> <div class="time">22 mai • 01:13</div> </div> </div> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">Il est gentil, mais un peu… intense.</div> <div class="time">22 mai • 01:15</div> </div> </div> <div class="msg-row them"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/lea.jpg" alt="Léa"> <div> <div class="bubble them">Genre ?</div> <div class="time">22 mai • 01:15</div> </div> </div> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">Il a retrouvé mon Insta avant même que je lui donne mon nom. Et il m’a envoyé 12 messages en une soirée.</div> <div class="time">22 mai • 01:16</div> </div> </div> <div class="msg-row them"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/lea.jpg" alt="Léa"> <div> <div class="bubble them">Oh wow. Fais gaffe. Il a pas l’air méchant mais... un peu trop connecté.</div> <div class="time">22 mai • 01:17</div> </div> </div> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">Ouais. Depuis hier, j’ai l’impression qu’il sait où je vais. Comme s’il avait mes trajets.</div> <div class="time">23 mai • 14:22</div> </div> </div> <div class="msg-row them"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/lea.jpg" alt="Léa"> <div> <div class="bubble them">Alice, bloque-le. Sérieusement.</div> <div class="time">23 mai • 14:23</div> </div> </div> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">Je sais. Je crois qu’il comprend pas les limites.</div> <div class="time">23 mai • 14:24</div> </div> </div> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <p class="bubble me glitch">Il m’a dit qu’il me <span class="glitch">retrouverait.</span></p> <div class="time">23 mai • 14:25</div> </div> </div> </div> </div> <<link "Retour à la boîte de réception">><<goto "InboxAlice">><</link>> <</nobr>>
<<include "CssMessenger">> <<nobr>> :: Chat_Alice_Marc <div class="messenger"> <div class="header"> <img class="avatar" src="https://dylanjacquet.com/wp-content/uploads/2025/10/mark.webp" alt="Marc"> <div class="meta"> <div class="name">Marc R.</div> <div class="sub">Connecté</div> </div> </div> <div class="thread"> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">Tu veux qu’on se capte demain pour le café ?</div> <div class="time">25 mai • 11:34</div> </div> </div> <div class="msg-row them"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/mark.webp" alt="Marc"> <div> <div class="bubble them">Avec plaisir 😎 toujours le même endroit ?</div> <div class="time">25 mai • 11:36</div> </div> </div> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">Yep. Et cette fois j’arrive à l’heure, promis 😅</div> <div class="time">25 mai • 11:37</div> </div> </div> <div class="msg-row them"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/mark.webp" alt="Marc"> <div> <div class="bubble them">Haha, j’y croirai quand je verrai 😜</div> <div class="time">25 mai • 11:38</div> </div> </div> <hr style="border:none;border-top:1px dashed #aaa;margin:12px 0;opacity:.5;"> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">Marc… t’as vu un mec à lunettes qui me fixait tout le long au café ?</div> <div class="time">26 mai • 18:11</div> </div> </div> <div class="msg-row them"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/mark.webp" alt="Marc"> <div> <div class="bubble them">Non pourquoi ?</div> <div class="time">26 mai • 18:12</div> </div> </div> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">Je crois que c’était Alan. Il était dehors, il me regardait, sans bouger.</div> <div class="time">26 mai • 18:14</div> </div> </div> <div class="msg-row them"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/mark.webp" alt="Marc"> <div> <div class="bubble them">Tu veux que je t’accompagne chez toi ?</div> <div class="time">26 mai • 18:15</div> </div> </div> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">Non ça va… j’espère juste que c’est une coïncidence.</div> <div class="time">26 mai • 18:17</div> </div> </div> </div> </div> <<link "Retour à la boîte de réception">><<goto "InboxAlice">><</link>> <</nobr>>
<<include "CssMessenger">> <<nobr>> :: Chat_Alice_Connecta <div class="messenger"> <div class="header"> <img class="avatar" src="https://dylanjacquet.com/wp-content/uploads/2025/10/connecta.jpg" alt="Connecta"> <div class="meta"> <div class="name">Support Connecta</div> <div class="sub">Assistance automatisée</div> </div> </div> <div class="thread"> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">Bonjour, je crois que quelqu’un accède à mon compte sans autorisation.</div> <div class="time">27 mai • 09:02</div> </div> </div> <div class="msg-row them"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/connecta.jpg" alt="C"> <div> <div class="bubble them">Nous avons détecté des connexions inhabituelles depuis un appareil : ALN21-Paris.</div> <div class="time">27 mai • 09:03</div> </div> </div> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">C’est pas moi. Je veux bloquer cet appareil.</div> <div class="time">27 mai • 09:04</div> </div> </div> <div class="msg-row them"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/connecta.jpg" alt="C"> <div> <div class="bubble them">Erreur : cet appareil est reconnu comme "principal".</div> <div class="time">27 mai • 09:04</div> </div> </div> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me glitch">Qu’est-ce que ça veut dire ? Pourquoi je ne peux pas le supprimer ?</div> <div class="time">27 mai • 09:05</div> </div> </div> </div> </div> <<link "Retour à la boîte de réception">><<goto "InboxAlice">><</link>> <</nobr>>
<<include "CssMessenger">> <<nobr>> :: Chat_Alice_Draft <div class="messenger"> <div class="header"> <img class="avatar" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div class="meta"> <div class="name">Brouillon non envoyé</div> <div class="sub">Dernière modification : 29 mai</div> </div> </div> <div class="thread"> <div class="msg-row me"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me"> "Je crois qu’il ne me voit plus vraiment. Il voit ce qu’il veut voir. C’est comme si j’existais dans une version inventée de sa tête, où je souris toujours, où je réponds toujours. Et plus j’essaie de m’effacer, plus il creuse." </div> <div class="time">Non envoyé</div> </div> </div> <div class="msg-row me glitch"> <img class="avatar-small" src="https://dylanjacquet.com/wp-content/uploads/2025/10/Alice_S30.webp" alt="Alice"> <div> <div class="bubble me">S’il trouve ce message… c’est qu’il a réussi.</div> </div> </div> </div> </div> <<link "Retour à la boîte de réception">><<goto "InboxAlice">><</link>> <</nobr>>
<style> /* ---- Messenger-like layout ---- */ .messenger { width: 100%; max-width: 820px; height: 62vh; margin: 1rem auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.45); display: grid; grid-template-rows: 64px 1fr 72px; background: linear-gradient(180deg,#fafafa,#f0f2f5); overflow: hidden; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #111; } /* header */ .messenger .header { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid rgba(0,0,0,0.06); background: linear-gradient(180deg, #fff, #fafbfd); } .messenger .header img.avatar { width:44px;height:44px;border-radius:50%; object-fit:cover;border:2px solid rgba(0,0,0,0.04); } .messenger .header .meta { display:flex;flex-direction:column; } .messenger .header .meta .name { font-weight:600; font-size:1rem; } .messenger .header .meta .sub { font-size:0.85rem; color: white;; } /* thread area */ .thread { padding: 18px; overflow:auto; background-image: linear-gradient(180deg, rgba(0,0,0,0.01), rgba(0,0,0,0.00)); display:flex; flex-direction:column; gap:12px; } /* message bubble */ .msg-row { display:flex; gap:10px; align-items:flex-end; } .msg-row.me { justify-content:flex-end; } .bubble { max-width:70%; padding: 12px 14px; border-radius: 18px; box-shadow: 0 3px 6px rgba(16,24,40,0.06); font-size:0.96rem; line-height:1.3; position:relative; word-wrap:break-word; } .msg-row.me div:first-of-type { display: flex; flex-direction: column; align-content: flex-end; align-items: flex-end; } .bubble.them { background: white; color:#111; border: 1px solid rgba(16,24,40,0.03); border-bottom-left-radius: 4px; } .bubble.me { background: linear-gradient(90deg,#2d8cff,#0066ff); color: white; border-bottom-right-radius: 4px; margin-left: auto; } .me .avatar-small { order: 2; } .me .time { text-align: right; } /* small meta */ .time { font-size:0.72rem; color:#8b8f97; margin-top:6px; } .avatar-small { width:36px; height:36px; border-radius:50%; object-fit:cover; } /* input area */ .messenger .composer { padding: 12px; border-top: 1px solid rgba(0,0,0,0.06); display:flex; gap:12px; align-items:center; background: #fff; } .input-sim { flex:1; background: #f0f2f5; border-radius:20px; padding:10px 14px; font-size:0.96rem; color:#333; outline:none; border: 1px solid rgba(0,0,0,0.03); } .unread { position: relative; font-size:0.75rem; padding:4px 8px; } .unread::after { position: absolute; width: fit-content; height: 24px; display:flex; align-items: center; justify-content: center; top: 50%; right: 24px; background-color: white; border-radius: 90px; border-color: blue; color: blue; content: "1 message non-lu"; border: 1px solid black; font-size:0.75rem; padding:4px; transform: translateY(-50%); } /* glitch effect for corrupted text */ .glitch { color:#d90000; text-shadow: 1px 0 #0ff, -1px 0 #f0f; animation: glitchMove 0.24s linear infinite; display:inline-block; } @keyframes glitchMove { 0% { transform: translate(0,0); } 25% { transform: translate(-1px,0); } 50% { transform: translate(1px,-1px); } 75% { transform: translate(-1px,1px); } 100% { transform: translate(0,0); } } /* slow flicker to suggest implosion of UI */ .messenger.flicker { animation: uiFlicker 1.6s infinite; } @keyframes uiFlicker { 0% { filter: none; } 50% { filter: hue-rotate(5deg) brightness(0.98); } 100% { filter: none; } } /* responsive */ @media (max-width:720px){ .messenger { width: 96%; height: 70vh; } .bubble { max-width: 84%; } } .messenger .header { background: #0078FF; color: #fff; padding: 10px 14px; display: flex; align-items: center; } .messenger .meta .name { font-weight: 600; font-size: 1.1em; } .messenger .meta .sub { font-size: 0.8em; opacity: 0.8; } .status-glitch { font-size: 0.75em; letter-spacing: 0.05em; color: #fff; opacity: 0.7; } .blink { animation: blink 1s infinite; } @keyframes blink { 50% { opacity: 0; } } /* -------- Inbox -------- */ .inbox-list { display: flex; flex-direction: column; background: #fff; } .conv { display: flex; align-items: center; padding: 10px 12px; border-bottom: 1px solid #eee; cursor: pointer; transition: background 0.2s ease; } .conv:hover { background: #f0f3ff; } .conv.unread .name { font-weight: bold; } .conv.unread .preview { color: #0078FF; } .conv img.avatar { width: 42px; height: 42px; border-radius: 50%; margin-right: 10px; object-fit: cover; } .conv-info { flex-grow: 1; overflow: hidden; } .conv-info .name { font-size: 0.95em; margin-bottom: 2px; } .conv-info .preview { font-size: 0.8em; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conv .time { font-size: 0.75em; color: #aaa; } .footer { background: #fafafa; text-align: center; padding: 8px; font-size: 0.8em; color: #666; border-top: 1px solid #eee; } /* -------- Effets Glitch -------- */ .glitch { position: relative; display: inline-block; color: #f33; animation: glitch-anim 1s infinite; } @keyframes glitch-anim { 0% { text-shadow: 1px 0 red, -1px 0 cyan; } 50% { text-shadow: -1px 0 red, 1px 0 cyan; } 100% { text-shadow: 1px 0 red, -1px 0 cyan; } } </style>
<<nobr>> <<if $messageLea and $messageAlan and $messageJulien and $messageAntoine and !$settingsUnlocked>> <<set $settingsUnlocked = true>> <<set $isSettingUnlockedFirst = true>> <</if>> <<include "CSS_HUB">> <<audio "introhum" play volume 0.2>> <div class="connecta-ui-dark"> <!-- [[SIDEBAR_PARTIAL]] --> <<include "SIDEBAR_PARTIAL">> <main class="feed"> <div class="post" onclick="showAlanThought('C’est le dernier post de Alice... elle me manque tellement. Je pleure chaque jour sa disparition... sa présence me comblait.')"> <div class="post-header"> <img class="post-header__img" src="https://dylanjacquet.com/wp-content/uploads/2025/10/alice-avatar-small.jpg" alt="profil" class="avatar"> <div> <h3>Alice.Connecta</h3> <p>Il y a 2 mois</p> </div> </div> <p class="post-content"> “Parfois, je me demande si tout ce qu’on partage ici existe vraiment...” </p> <img height="500" width="600" src="https://dylanjacquet.com/wp-content/uploads/2025/11/alice-post.jpg" class="post-img"> <div class="post-footer"> ❤️ 1,2k 💬 214 🔁 98 </div> </div> <div class="post" onclick="showAlanThought('Julien... son ex. Toujours lui. Il croit savoir ce qu’on a vécu ? Il n’était pas là, lui. Il l’a fait souffrir.')"> <div class="post-header"> <img class="post-header__img" src="https://dylanjacquet.com/wp-content/uploads/2025/10/julien-avatar-small.jpg" class="avatar"> <div> <h3>@JulienX</h3> <p>Il y a 1 mois</p> </div> </div> <p class="post-content"> “Certains ne savent pas lâcher prise... ils s’accrochent à des fantômes.” </p> <div class="post-footer"> 💔 832 💬 45 </div> </div> </main> <<include "SIDEBAR_RIGHT">> </div> <<if !$firstTimeChoice>> <div class="alan-dialogue-container" id="alanDialogue"> <p class="alan-dialogue-label">Pensée de Alan</p> <div class="alan-dialogue"> <button class="close-btn" onclick="document.getElementById('alanDialogue').style.display='none'">✕</button> <p>Bon... j’ai réussi à forcer l’accès à son compte.</p> <p>Je peux vérifier ses photos, ses messages et ses contacts. Si quelque chose a changé récemment, je le verrai.</p> <p>Je dois commencer quelque part... mais où ?</p> </div> </div> <<set $firstTimeChoice = true>> <</if>> <<include "REACT_ALAN_PARTIAL">> <</nobr>>
<<nobr>> <<set $screenPhotos to true>> <<include "CSS_HUB">> <<audio "introhum" play volume 0.25>> <div class="connecta-ui-dark"> <<include "SIDEBAR_PARTIAL">> <main class="photo"> <div class="photo-header"> <h2>Photos d’Alice</h2> <p>(Soirées, selfies, instants capturés sur Connecta.)</p> </div> <div class="photo-grid"> <div class="photo-card glitchable" onclick="showAlanThought('C’était notre première soirée. Elle m’avait souri. Ou peut-être que ce n’était qu’un bug d’affichage… Je veux croire que c’était sincère.')"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/alice-photo-1.jpg" alt="Soirée Connecta" class="photo-img"> <div class="photo-caption">Événement “Virtual Party #23” — 24.05.27</div> </div> <div class="photo-card glitchable" onclick="showAlanThought('Elle adorait ce filtre. Je me souviens, j’étais juste derrière la caméra… Enfin, je crois.')"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/alice-photo-2.jpg" alt="Selfie holographique" class="photo-img"> <div class="photo-caption">Selfie holographique — 28.05.27</div> </div> <div class="photo-card glitchable" onclick="showAlanThought('Elle disait que les reflets mentent.')"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/alice-photo-3.jpg" alt="Photo miroir" class="photo-img"> <div class="photo-caption">Miroir de soirée — 02.06.27</div> </div> <div class="photo-card glitchable" onclick="showAlanThought('Pourquoi elle regarde de côté ? Qui était là avec elle ? Ce n’était pas Julien… Je le saurais.')"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/alice-photo-4.jpg" alt="Photo extérieure" class="photo-img"> <div class="photo-caption">Extérieur — 04.06.27</div> </div> <div class="photo-card glitchable" onclick="showAlanThought('Ce jour-là, elle n’a rien posté d’autre. Elle avait l’air inquiète. Peut-être qu’elle savait déjà.')"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/alice-photo-5.jpg" alt="Photo extérieure" class="photo-img"> <div class="photo-caption">Extérieur — 04.06.27</div> </div> <div class="photo-card glitchable" onclick="showAlanThought('Elle prenait toujours ce café à la même heure. Je la voyais de loin, parfois. Elle ne m’a jamais remarqué.'); SugarCube.State.variables.contactUnlocked = true;"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/photos-alice-6.jpg" alt="Photo extérieure" class="photo-img"> <div class="photo-caption">Extérieur — 04.06.27</div> </div> <div class="photo-card glitchable" onclick="showAlanThought('Elle riait… Je crois. Mais pas avec moi. Pourquoi elle ne me regarde plus ?'); SugarCube.State.variables.contactUnlocked = true;"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/photos-alice-7.jpg" alt="Photo extérieure" class="photo-img"> <div class="photo-caption">Extérieur — 04.06.27</div> </div> <div class="photo-card glitchable" onclick="showAlanThought('Attends... Là, dans le reflet de la vitre… c’est mon manteau. J’étais là. Mais je ne me souviens pas d’avoir été avec elle. Quelqu’un a dû bidouiller les métadonnées.'); SugarCube.State.variables.contactUnlocked = true;"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/photos-alice-8.jpg" alt="Photo extérieure" class="photo-img"> <div class="photo-caption">Extérieur — 04.06.27</div> </div> <div class="photo-card glitchable" onclick="showAlanThought('C’est moi, là, derrière ? Ou juste un reflet ? Je n’arrive plus à savoir ce qui est vrai.'); SugarCube.State.variables.contactUnlocked = true; SugarCube.State.variables.objectif1 = true;"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/photos-alice-9.jpg" alt="Photo extérieure" class="photo-img"> <div class="photo-caption">Extérieur — 04.06.27</div> </div> </div> <div class="photo-return"> <<button "↩ Retour">> <<goto "CHOICE_SCREEN">> <</button>> </div> </main> <<include "SIDEBAR_RIGHT">> </div> <<include "REACT_ALAN_PARTIAL">> <</nobr>> <style> .photo { background: rgba(15, 15, 30, 0.8); padding: 25px 60px; overflow-y: auto; box-shadow: inset 0 0 20px rgba(80,80,255,0.05); } .photo h2{ margin-top: 0; } .photo-gallery-container { min-height: 100vh; background: radial-gradient(circle at 50% 30%, #060614 0%, #000 90%); padding: 60px 8%; color: #e0e6ff; font-family: 'IBM Plex Mono', monospace; text-align: center; animation: fadeInPhotos 1.2s ease forwards; } .photo-header h2 { font-size: 1.5rem; letter-spacing: 0.05em; color: #cfd7ff; text-shadow: 0 0 10px rgba(150,150,255,0.2); margin-bottom: 5px; } .photo-header p { color: #8d93c7; font-size: 0.95rem; margin-bottom: 50px; } .photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 30px; justify-items: center; align-items: start; } .photo-card { cursor: pointer; width: 100%; position: relative; overflow: hidden; border-radius: 10px; border: 1px solid rgba(120,120,255,0.1); background: rgba(255,255,255,0.02); box-shadow: 0 6px 20px rgba(30,30,80,0.3); transition: transform 0.4s ease, box-shadow 0.4s ease; } .photo-card:hover { cursor: pointer; transform: scale(1.03); box-shadow: 0 12px 40px rgba(100,100,255,0.25); } .photo-img { object-fit: contain; width: 100%; height: 250px; display: block; filter: brightness(0.85) contrast(1.05) grayscale(20%); transition: all 0.5s ease; } .photo-card:hover .photo-img { filter: brightness(1.05) contrast(1.2) saturate(110%); } .photo-caption { font-size: 0.85rem; color: #b9c0ff; padding: 10px; background: rgba(20,20,40,0.4); border-top: 1px solid rgba(120,120,255,0.08); } .photo-dialogue { margin-top: 50px; font-style: italic; color: #c6c9ff; font-size: 1.1rem; text-shadow: 0 0 5px rgba(150,150,255,0.1); } .photo-return { margin-top: 40px; } .photo-return button { background: linear-gradient(90deg, rgba(60,80,200,0.18), rgba(100,70,200,0.18)); border: 1px solid rgba(140,120,255,0.1); color: #e9eaff; padding: 12px 26px; border-radius: 8px; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; transition: all 0.25s ease; } .photo-return button:hover { background: linear-gradient(90deg, rgba(80,100,255,0.25), rgba(140,110,255,0.25)); box-shadow: 0 0 20px rgba(120,100,255,0.25); } .glitchable:hover::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient( transparent 0, rgba(255,255,255,0.03) 2px, transparent 4px ); animation: glitchScan 1s linear infinite; mix-blend-mode: lighten; opacity: 0.15; pointer-events: none; } @keyframes glitchScan { 0% { background-position: 0 0; } 100% { background-position: 0 10px; } } .photo-caption:hover::after { content: " — (modifiée)"; color: #ffb3b3; opacity: 0.8; animation: blinkSlow 1.8s infinite; } @keyframes blinkSlow { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.2; } } @keyframes fadeInPhotos { from { opacity: 0; filter: blur(10px); transform: translateY(10px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } } @media (max-width: 640px) { .photo-header h2 { font-size: 1.3rem; } .photo-grid { gap: 20px; } .photo-caption { font-size: 0.8rem; } } </style>
<<nobr>> <<if $messageLea and $messageAlan and $messageJulien and $messageAntoine>> <<set $settingUnlocked to true>> <</if>> <<audio "introhum" play volume 0.2>> <<include "CSS_HUB">> <div class="connecta-ui-dark"> <<include "SIDEBAR_PARTIAL">> <main class="messagerie"> <h2>Messagerie Connecta</h2> <p class="subtitle">Derniers échanges enregistrés</p> <ul class="contact-list"> <li class="contact-item" onclick="SugarCube.Engine.play('MESSAGE_LEA')"> <img class="contact-item__img" src="https://dylanjacquet.com/wp-content/uploads/2025/10/lea-avatar-small.jpg" class="avatar"> <div> <h4>Léa Martin</h4> </div> <span class="status offline">Inactif</span> </li> <li class="contact-item" onclick="SugarCube.Engine.play('MESSAGE_ANTOINE')"> <img class="contact-item__img" src="https://dylanjacquet.com/wp-content/uploads/2025/10/antoine-avatar-small.jpg" class="avatar"> <div> <h4>Antoine Dupuis</h4> </div> <span class="status offline">Inactif</span> </li> <li class="contact-item" onclick="SugarCube.Engine.play('MESSAGE_JULIEN')"> <img class="contact-item__img" src="https://dylanjacquet.com/wp-content/uploads/2025/10/julien-avatar-small.jpg" class="avatar"> <div> <h4>Julien X</h4> </div> <span class="status offline">Inactif</span> </li> <li class="contact-item" onclick="SugarCube.Engine.play('MESSAGE_ALAN')"> <img class="contact-item__img" src="https://dylanjacquet.com/wp-content/uploads/2025/10/logo-connecta.jpg"> <div> <h4>(Inconnu)</h4> </div> <span class="status offline">Inactif</span> </li> </ul> <div class="contacts-choice"> <<button "Retour à l’accueil" >> <<goto "CHOICE_SCREEN">> <</button>> </div> </main> <<include "SIDEBAR_RIGHT">> </div> <</nobr>> <style> .messagerie { background: rgba(15, 15, 30, 0.8); padding: 25px 60px 40px; overflow-y: auto; box-shadow: inset 0 0 20px rgba(80,80,255,0.05); } .messagerie h2 { margin-top: 0; color:#e0e0ff; } body { background-color: #f6f7fb; font-family: 'Inter', sans-serif; color: #1c1c1c; margin: 0; overflow: hidden; } /* --- CONTENEUR PRINCIPAL --- */ .connecta-messages { display: grid; grid-template-columns: 360px 1fr; height: 100vh; } .subtitle { font-size: 0.9em; color: #999; margin-bottom: 25px; } .contact-list { list-style: none; padding: 0 !important; margin: 0 !important; overflow-y: auto; flex-grow: 1; } .contact-item { display: flex; align-items: center; justify-content: space-between; padding: 12px; margin-bottom: 8px; background-color: #b8b8ff; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; } .contact-item__img { width: 48px; height: 48px; border-radius: 48px; margin-right: 16px; } .contact-item:hover { background-color: #eef0ff; transform: translateX(16px); } .contact-item img.avatar { border-radius: 50%; margin-right: 10px; } .contact-item div { flex-grow: 1; text-align: left; } .contact-item h4 { margin: 0; font-size: 1em; color: #333; } .contact-item p { margin: 4px 0 0; font-size: 0.85em; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .status { font-size: 0.75em; color: #888; margin-left: 10px; } .status.active { color: #4caf50; font-weight: 600; } .status.offline { color: #aaa; } .status.warning { color: #e53935; font-weight: bold; } .hidden { background: #fff0f0; border: 1px solid rgba(255,80,80,0.3); animation: pulseHidden 2s infinite; } @keyframes pulseHidden { 0%, 100% { box-shadow: 0 0 5px rgba(255,0,0,0.1); } 50% { box-shadow: 0 0 15px rgba(255,0,0,0.2); } } /* --- BOUTON RETOUR --- */ .return-btn { background-color: #5865f2; color: #fff; border: none; border-radius: 8px; padding: 10px 20px; margin-top: 20px; cursor: pointer; font-weight: 600; transition: all 0.2s ease; } .return-btn:hover { background-color: #4854d6; } /* --- FENÊTRE DE CHAT --- */ .chat-preview { background-color: #f3f4fb; padding: 40px; display: flex; align-items: center; justify-content: center; } .placeholder { background-color: #fff; padding: 60px 100px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); color: #777; font-size: 1.1em; } .contacts-choice button { background: linear-gradient(90deg, rgba(60,80,200,0.18), rgba(100,70,200,0.18)); border: 1px solid rgba(140,120,255,0.1); color: #e9eaff; padding: 12px 28px; border-radius: 8px; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; transition: all 0.25s ease; } .contacts-choice button:hover { background: linear-gradient(90deg, rgba(80,100,255,0.25), rgba(140,110,255,0.25)); box-shadow: 0 0 20px rgba(120,100,255,0.25); } </style>
<<nobr>> <<if $contactsBlocked>> <br><br> <<button "Retourner à l'écran d'accueil">> <<goto "INTRO2">> <</button>> <</if>> <<set $screenContacts to true>> <<include "CSS_HUB">> <<audio "introhum" play volume 0.25>> <div class="connecta-ui-dark"> <<include "SIDEBAR_PARTIAL">> <main class="contacts"> <h2>Contacts enregistrés</h2> <p>Synchronisation Connecta — Dernière mise à jour : <span class="contacts- date">06.06.27</span></p> <div class="contacts-list"> <div class="contact-card" onclick="showAlanThought('Léa... sa meilleure amie. Toujours à lui donner des conseils. Trop de conseils, peut-être. Elle n’a jamais compris ce qu’il y avait entre nous.')"> <div class="contact-avatar lea"></div> <div class="contact-name">Léa</div> </div> <div class="contact-card" onclick="showAlanThought('Antoine... son cousin, je crois. Toujours en train de jouer les protecteurs. Il ne m’aimait pas beaucoup. Peut-être qu’il l’a poussée à me bloquer.')"> <div class="contact-avatar antoine"></div> <div class="contact-name">Antoine</div> </div> <div class="contact-card" onclick="showAlanThought('Julien. L’ex. Le gars parfait, soi-disant. Toujours là dans ses vieux commentaires, ses vieilles photos... Il n’a jamais vraiment disparu, lui.')"> <div class="contact-avatar julien"></div> <div class="contact-name">Julien</div> </div> </div> <div class="contacts-list"> <div class="contact-card blocked" onclick="showAlanThought('Quoi ?!? Pourquoi suis-je bloqué sur son compte ? C’est impossible... C’est une erreur du système. Ou quelqu’un veut m’effacer d’elle.'); SugarCube.State.variables.messageUnlocked = true; SugarCube.State.variables.contactVisitedAlanBlocked = true; SugarCube.State.variables.objectif2 = true;"> <div class="contact-avatar alan"></div> <div class="contact-name">Alan</div> <div class="contact-status">Bloqué</div> </div> </div> <div class="contacts-choice"> <<button "↩ Retour">> <<goto "CHOICE_SCREEN">> <</button>> </div> </main> <<include "SIDEBAR_RIGHT">> </div> <<include "REACT_ALAN_PARTIAL">> <</nobr>> <style> .contacts { background: rgba(15, 15, 30, 0.8); padding: 25px 60px; overflow-y: auto; box-shadow: inset 0 0 20px rgba(80,80,255,0.05); } .contacts h2 { margin-top: 0; } .contacts-container { min-height: 100vh; background: radial-gradient(circle at 50% 25%, #070713 0%, #000 85%); padding: 60px 10%; font-family: 'IBM Plex Mono', monospace; color: #e0e4ff; text-align: center; animation: fadeInContacts 1.2s ease forwards; } .contacts-header h2 { font-size: 1.5rem; color: #cdd5ff; letter-spacing: 0.06em; margin-bottom: 6px; text-shadow: 0 0 8px rgba(150,150,255,0.15); } .contacts-header p { font-size: 0.9rem; color: #8e92c0; margin-bottom: 40px; } .contacts-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 25px; justify-items: center; margin-bottom: 40px; } .contact-card { position: relative; width: 200px; height: 180px; background: linear-gradient(180deg, rgba(30,30,60,0.2), rgba(10,10,20,0.4)); border: 1px solid rgba(120,120,255,0.1); border-radius: 12px; padding-top: 20px; box-shadow: 0 8px 24px rgba(20,20,60,0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; } .contact-card:hover { transform: scale(1.04); box-shadow: 0 12px 36px rgba(80,80,200,0.3); } .contact-avatar { width: 80px; height: 80px; margin: 0 auto 10px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(120,120,255,0.15), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 0 10px rgba(100,100,255,0.1); } .contact-avatar.lea { background-image: url("https://dylanjacquet.com/wp-content/uploads/2025/10/lea-avatar-small.jpg"); background-size: cover; background-position: center; } .contact-avatar.antoine { background-image: url("https://dylanjacquet.com/wp-content/uploads/2025/10/antoine-avatar-small.jpg"); background-size: cover; background-position: center; } .contact-avatar.julien { background-image: url("https://dylanjacquet.com/wp-content/uploads/2025/10/julien-avatar-small.jpg"); background-size: cover; background-position: center; } .contact-avatar.alan { background-image: url("https://dylanjacquet.com/wp-content/uploads/2025/10/alan-avatar-small.jpg"); background-size: cover; background-position: center; filter: grayscale(80%) brightness(0.6); } .contact-name { text-align: center; font-size: 1rem; color: #d8ddff; letter-spacing: 0.04em; } .contact-card.blocked { border: 1px solid rgba(255,80,80,0.25); background: linear-gradient(180deg, rgba(40,10,10,0.35), rgba(20,0,0,0.45)); animation: blockedPulse 2s infinite; } .contact-card.blocked .contact-name { color: #ffb3b3; } .contact-status { text-align: center; font-size: 0.85rem; color: #ff8080; position: absolute; bottom: 12px; left: 0; right: 0; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .contacts-info { font-size: 0.9rem; color: #a8b0ff; margin-top: 10px; letter-spacing: 0.04em; } .contacts-dialogue { margin-top: 40px; font-style: italic; font-size: 1.05rem; color: #c7cbff; text-shadow: 0 0 6px rgba(120,120,255,0.1); } .contacts-choice { margin-top: 40px; } .contacts-choice button { background: linear-gradient(90deg, rgba(60,80,200,0.18), rgba(100,70,200,0.18)); border: 1px solid rgba(140,120,255,0.1); color: #e9eaff; padding: 12px 28px; border-radius: 8px; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; transition: all 0.25s ease; } .contacts-choice button:hover { background: linear-gradient(90deg, rgba(80,100,255,0.25), rgba(140,110,255,0.25)); box-shadow: 0 0 20px rgba(120,100,255,0.25); } @keyframes fadeInContacts { from { opacity: 0; transform: translateY(10px); filter: blur(10px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes blockedPulse { 0%, 100% { box-shadow: 0 0 10px rgba(255,0,0,0.15); } 50% { box-shadow: 0 0 20px rgba(255,0,0,0.3); } } @media (max-width: 640px) { .contacts-list { grid-template-columns: 1fr 1fr; gap: 18px; } .contact-card { width: 160px; height: 160px; } .contact-name { font-size: 0.9rem; } } </style>
<<nobr>> <<audio "introhum" play volume 0.25>> <div class="archive-container"> [Ouverture des archives personnelles Connecta // Utilisateur : ALN21] [Authentification réussie] <br> <div class="alan fade"> C’est… mon compte.<br> Je n’étais pas censé pouvoir y accéder depuis ici.<br> Connecta garde tout. Même ce que j’ai supprimé. </div> <div class="system"> Archives disponibles : </div> <ul class="archives"> <li><<button "Messages envoyés">><<goto "ARCHIVE_MESSAGES">><</button>></li> <li><<button "Notes personnelles">><<goto "ARCHIVE_NOTES">><</button>></li> <li><<button "Historique de connexions">><<goto "ARCHIVE_LOGS">><</button>></li> <li><<button "Fichiers audio">><<goto "ARCHIVE_AUDIO">><</button>></li> </ul> <<button "J'ai pris ma décision">><<goto "LAST_CHOICE_SCREEN">><</button>> <</nobr>> <style> .archive-container { background: linear-gradient(180deg, #000510 0%, #010a18 100%); color: #b8ebff; font-family: 'IBM Plex Mono', monospace; padding: 60px 8%; min-height: 100vh; line-height: 1.6; overflow: hidden; animation: fadeInScene 1.5s ease forwards; } .system { background: rgba(0,255,200,0.04); border: 1px solid rgba(0,255,200,0.1); border-radius: 6px; color: #00ffc8; padding: 16px; font-size: 0.95rem; white-space: pre-line; margin-bottom: 40px; animation: flickerSystem 5s infinite; } .alan { color: #aeefff; font-style: italic; opacity: 0; animation: fadeText 2s ease forwards; } .archives { list-style: none; padding: 0; margin-top: 30px; display: flex; flex-direction: column; gap: 20px; animation: fadeIn 3s ease forwards; } .archives li { text-align: center; } .archives button { width: 60%; padding: 14px 28px; background: linear-gradient(90deg, rgba(0,255,255,0.1), rgba(255,255,255,0.08)); border: 1px solid rgba(0,255,255,0.3); border-radius: 8px; color: #d6faff; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: 'IBM Plex Mono', monospace; } .archives button:hover { background: linear-gradient(90deg, rgba(0,255,255,0.25), rgba(255,255,255,0.25)); box-shadow: 0 0 20px rgba(0,255,255,0.4); color: #fff; } @keyframes fadeText { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } } @keyframes flickerSystem { 0%, 100% { opacity: 1; } 45% { opacity: 0.85; } 50% { opacity: 0.5; } 55% { opacity: 1; } } @keyframes fadeInScene { from { opacity: 0; filter: blur(15px); transform: translateY(40px); } to { opacity: 1; filter: none; transform: none; } } </style>
<<nobr>> <<set $messageLea to true>> <<if $messageLea and $messageAlan and $messageJulien and $messageAntoine>> <<set $settingUnlocked to true>> <<set $objectif3 to true>> <</if>> <<include "CSS_MESSAGERIE">> <<audio "introhum" play volume 0.25>> <<include "CSS_HUB">> <div class="connecta-ui-dark"> <<include "SIDEBAR_PARTIAL">> <main class="chat-container"> <div class="chat-header"> <div class="chat-avatar lea"></div> <div class="chat-info"> <h3>Léa</h3> <p>En ligne</p> </div> </div> <div class="chat-thread"> <div> <p>Clé de chiffrement manquante, les messages les plus anciens sont masqués.</p> </div> <div><p>Mardi :</p></div> <div class="msg msg-right"> <p>Il a l’air gentil, mais parfois, j'ai l'impression qu'il en fait trop.</p> <span class="timestamp">Mardi 11:50</span> </div> <div class="msg msg-left"> <p>Tu veux dire quoi par là ?</p> <span class="timestamp">Mardi 11:54</span> </div> <div class="msg msg-right"> <p>Je ne sais pas, c'est une impression.</p> <span class="timestamp">Mardi 12:22</span> </div> <div class="msg msg-left"> <p>C'est bizarre d'avoir un sentiment comme ça envers quelqu'un.</p> <span class="timestamp">Mardi 12:34</span> </div> <div class="msg msg-right"> <p>Il paraît trop gentil, en fait. Comme si tout était trop parfait.</p> <span class="timestamp">Mardi 18:43</span> </div> <div class="msg msg-left"> <p>Tu m’en avais un peu parlé après la soirée Connecta… j'avais déjà senti un truc.</p> <span class="timestamp">Mardi 18:50</span> </div> <br><br><br> <div><p>Mercredi :</p></div> <div class="msg msg-right"> <p>Meuf, je crois qu'il me suit.</p> <span class="timestamp">Mercredi 18:43</span> </div> <div class="msg msg-left"> <p>Quoi ???? Comment ça, il te suit ?</p> <span class="timestamp">Mercredi 18:45</span> </div> <div class="msg msg-right"> <p>Je buvais un verre avec un ami, et j’ai cru voir quelqu'un m'observer.</p> <span class="timestamp">Mercredi 18:46</span> </div> <div class="msg msg-left"> <p>Non, tu dois te tromper. C'était peut-être juste du hasard ou quelqu'un de random qui ne te regardait pas vraiment.</p> <span class="timestamp">Mercredi 18:48</span> </div> <div class="msg msg-right"> <p>Peut-être...</p> <span class="timestamp">Mercredi 18:50</span> </div> <div class="msg msg-left"> <p>Tu n’as pas remarqué si ton statut Connecta change tout seul ? Ça arrive quand quelqu’un fouille ton compte.</p> <span class="timestamp">Mercredi 19:02</span> </div> <br><br><br> <div><p>Jeudi :</p></div> <div class="msg msg-right"> <p>Non, il me suit vraiment.</p> <span class="timestamp">Jeudi 18:12</span> </div> <div class="msg msg-right"> <p>Je l'ai revu tout à l'heure...</p> <span class="timestamp">Jeudi 18:13</span> </div> <div class="msg msg-left"> <p>Tu devrais faire attention, il a peut-être de mauvaises intentions.</p> <span class="timestamp">Jeudi 18:20</span> </div> <div class="msg msg-left"> <p>Il ne t'a rien dit ?</p> <span class="timestamp">Jeudi 18:21</span> </div> <div class="msg msg-right"> <p>Non... il m'observe juste. J'arrive toujours à le semer pour le moment. Tu penses que je devrais contacter la police ?</p> <span class="timestamp">Jeudi 18:23</span> </div> <div class="msg msg-left"> <p>Moi à ta place, j'irais voir la police.</p> <span class="timestamp">Jeudi 18:30</span> </div> <div class="msg msg-right"> <p>Je vais encore attendre un peu, il n'avait pas l'air méchant en ligne...</p> <span class="timestamp">Jeudi 18:50</span> </div> <!-- AJOUT --> <div class="msg msg-left"> <p>En ligne, tout le monde peut avoir l’air parfait. Ce n’est pas la vraie vie.</p> <span class="timestamp">Jeudi 19:02</span> </div> <br><br><br> <div><p>Vendredi :</p></div> <div class="msg msg-right glitch"> <p>Non, c'est trop. Il est encore là.</p> <span class="timestamp">Vendredi 16:21</span> </div> <div class="msg msg-left"> <p>Tu es sûre qu'il ne bosse pas dans les environs ?</p> <span class="timestamp">Vendredi 16:52</span> </div> <div class="msg msg-left"> <p>Bloque-le. Supprime tout.</p> <span class="timestamp">Vendredi 16:55</span> </div> <div class="msg msg-right glitch"> <p>Je n’arrive pas à le faire. Il arrive sans cesse à revenir.</p> <span class="timestamp">Vendredi 17:21</span> </div> <div class="msg msg-left"> <p>S’il revient après un blocage… c’est qu’il trouve un moyen de contourner. C’est pas normal.</p> <span class="timestamp">Vendredi 17:28</span> </div> <div class="msg msg-left"> <p>Il faut que tu passes à autre chose.</p> <span class="timestamp">Vendredi 17:32</span> </div> </div> <div class="chat-footer"> <<button "↩ Retour à la messagerie">> <<goto "MESSAGES_MENU">> <</button>> </div> </main> <<include "SIDEBAR_RIGHT">> </div> <</nobr>>
<<nobr>> <<set $messageJulien to true>> <<if $messageLea and $messageAlan and $messageJulien and $messageAntoine>> <<set $settingUnlocked to true>> <<set $objectif3 to true>> <</if>> <<include "CSS_MESSAGERIE">> <<audio "introhum" play volume 0.25>> <<include "CSS_HUB">> <div class="connecta-ui-dark"> <<include "SIDEBAR_PARTIAL">> <main class="chat-container"> <div class="chat-header"> <div class="chat-avatar julien"></div> <div class="chat-info"> <h3>Julien</h3> <p>En ligne</p> </div> </div> <div class="chat-thread"> <div> <p>Clé de chiffrement manquante, les messages les plus anciens sont masqués.</p> </div> <!-- AJOUT : Julien fait référence à la soirée sans le dire explicitement --> <div class="msg msg-left"> <p>Depuis cette fameuse soirée… t'es plus la même.</p> <span class="timestamp">21:58</span> </div> <div class="msg msg-left"> <p>Tu m’évites encore ?</p> <span class="timestamp">22:03</span> </div> <div class="msg msg-right"> <p>Non, j’ai juste besoin d’un peu d’espace.</p> <span class="timestamp">22:04</span> </div> <div class="msg msg-left"> <p>C’est marrant, tu dis toujours ça quand quelqu’un d’autre arrive dans ta vie.</p> <span class="timestamp">22:05</span> </div> <div class="msg msg-right"> <p>Je t’ai déjà dit que ce n’était pas comme ça.</p> <span class="timestamp">22:06</span> </div> <!-- AJOUT : première allusion directe au “gars de la soirée” --> <div class="msg msg-left"> <p>Askip t’as rencontré un gars à la soirée. C’est ça ?</p> <span class="timestamp">22:06</span> </div> <div class="msg msg-left"> <p>Il t’écrit souvent ?</p> <span class="timestamp">22:07</span> </div> <div class="msg msg-right"> <p>Ça ne te regarde pas.</p> <span class="timestamp">22:07</span> </div> <div class="msg msg-left"> <p>Donc oui.</p> <span class="timestamp">22:08</span> </div> <div class="msg msg-right"> <p>Julien…</p> <span class="timestamp">22:08</span> </div> <div class="msg msg-left"> <p>Je te demande juste, tu réponds même pas.</p> <p>T’as changé depuis la dernière fois.</p> <span class="timestamp">22:09</span> </div> <div class="msg msg-right"> <p>Peut-être parce que j’ai compris des choses.</p> <span class="timestamp">22:10</span> </div> <div class="msg msg-left"> <p>Ou parce que t’écoutes trop les autres.</p> <p>Ils t’ont retourné la tête.</p> <span class="timestamp">22:11</span> </div> <div class="msg msg-right glitch"> <p>Personne ne m’a rien “retourné”.</p> <span class="timestamp">22:11</span> </div> <!-- AJOUT : Julien devient plus possessif --> <div class="msg msg-left"> <p>C’est une simple connaissance, hein ? Tu vas pas me dire que ce type compte déjà pour toi.</p> <span class="timestamp">22:12</span> </div> <div class="msg msg-left"> <p>Si tu savais ce qu’on dit de toi, Alice.</p> <span class="timestamp">22:12</span> </div> <div class="msg msg-right"> <p>Arrête, s’il te plaît.</p> <span class="timestamp">22:12</span> </div> <!-- AJOUT : le moment clé — Julien pense qu’elle l’a bloqué --> <div class="msg msg-left"> <p>Et pourquoi tu m’as bloqué l’autre soir ?</p> <span class="timestamp">22:13</span> </div> <!-- AJOUT : confusion d’Alice (prépare le twist futur) --> <div class="msg msg-right"> <p>Je… je t’ai jamais bloqué.</p> <span class="timestamp">22:13</span> </div> <div class="msg msg-left"> <p>Tu crois que je veux ton mal ? Je t’ai toujours protégée.</p> <p>Tu me remercieras un jour.</p> <span class="timestamp">22:13</span> </div> <div class="msg msg-right"> <p>…</p> <span class="timestamp">22:14</span> </div> </div> <div class="chat-footer"> <<button "↩ Retour à la messagerie">> <<goto "MESSAGES_MENU">> <</button>> </div> </main> <<include "SIDEBAR_RIGHT">> </div> <</nobr>>
<<nobr>> <<set $messageAlan to true>> <<if $messageLea and $messageAlan and $messageJulien and $messageAntoine>> <<set $settingUnlocked to true>> <<set $objectif3 to true>> <</if>> <<include "CSS_MESSAGERIE">> <<audio "introhum" play volume 0.25>> <<include "CSS_HUB">> <div class="connecta-ui-dark"> <<include "SIDEBAR_PARTIAL">> <main class="chat-container corrupted"> <div class="chat-header"> <div class="chat-avatar alice"></div> <div class="chat-info"> <h3>Caché</h3> <p>En ligne</p> </div> </div> <div class="chat-thread"> <div><p>Clé de chiffrement manquante, les messages les plus anciens sont masqués.</p></div> <!-- Jour 1 : Alan trop gentil --> <div class="msg msg-right"> <p>Tu dors ?</p> <span class="timestamp">00:41</span> </div> <div class="msg msg-left"> <p>Non. Je pensais à toi.</p> <span class="timestamp">00:42</span> </div> <div class="msg msg-right"> <p>À… moi ?</p> <span class="timestamp">00:43</span> </div> <div class="msg msg-left"> <p>Tu m’as dit que tu étais rentrée tard, alors je voulais vérifier que tout allait bien.</p> <span class="timestamp">00:44</span> </div> <div class="msg msg-right glitch-fade"> <p>… merci.</p> <span class="timestamp">00:45</span> </div> <br> <!-- Jour 2 : premiers signes --> <div class="msg msg-right"> <p>Alan, tu étais près du café cet après-midi ?</p> <span class="timestamp">15:12</span> </div> <div class="msg msg-left"> <p>Oh… j’étais juste dans le quartier. Pourquoi ?</p> <span class="timestamp">15:13</span> </div> <div class="msg msg-right"> <p>Je crois t’avoir vu passer derrière la vitre.</p> <span class="timestamp">15:14</span> </div> <div class="msg msg-left"> <p>Ah ah non, tu confonds. Je te jure.</p> <span class="timestamp">15:16</span> </div> <div class="msg msg-right glitch-line"> <p>Ça arrive souvent, en ce moment.</p> <span class="timestamp">15:17</span> </div> <br> <!-- Jour 3 : inquiétude plus claire --> <div class="msg msg-right"> <p>Alan… pourquoi tu me suis ?</p> <span class="timestamp">18:02</span> </div> <div class="msg msg-left"> <p>Je te suis pas. Je te protège.</p> <span class="timestamp">18:03</span> </div> <div class="msg msg-right"> <p>Me protéger de quoi ?</p> <span class="timestamp">18:04</span> </div> <div class="msg msg-left"> <p>De gens qui ne te méritent pas.</p> <span class="timestamp">18:06</span> </div> <div class="msg msg-right glitch-fade"> <p>Alan…</p> <span class="timestamp">18:07</span> </div> <br> <!-- Jour 4 : Alan répond de moins en moins --> <div class="msg msg-right"> <p>Tu étais à la sortie du métro. Je t’ai vu.</p> <span class="timestamp">20:31</span> </div> <div class="msg msg-left"> <p>Je passais juste par là…</p> <span class="timestamp">20:35</span> </div> <div class="msg msg-right"> <p>Tu dis ça tous les jours.</p> <span class="timestamp">20:36</span> </div> <div class="msg msg-left glitch-fade"> <p>…</p> <span class="timestamp">20:36</span> </div> <br> <!-- Jour 5 : Alice comprend --> <div class="msg msg-right"> <p>Alan, arrête. Je ne veux pas que tu me suives.</p> <span class="timestamp">23:03</span> </div> <div class="msg msg-left"> <p>Je ne fais rien de mal.</p> <span class="timestamp">23:04</span> </div> <div class="msg msg-right"> <p>Alors pourquoi tu ne réponds jamais quand je te le demande directement ?</p> <span class="timestamp">23:05</span> </div> <div class="msg msg-left glitch-line"> <p>Je…</p> <span class="timestamp">23:06</span> </div> <div class="msg msg-left glitch-line"> <p>Je veux juste être là.</p> <span class="timestamp">23:07</span> </div> <div class="msg msg-right glitch-fade"> <p>Arrête.</p> <span class="timestamp">23:08</span> </div> <br> <div class="msg msg-right"> <p>Tu m’évites ?</p> <span class="timestamp corrupted-time">01:2█</span> </div> <div class="msg msg-left glitch-fade"> <p>Pourquoi tu dis ça…?</p> <span class="timestamp corrupted-time">01:2█</span> </div> <div class="msg msg-left"> <p>Je veux juste te parler.</p> <span class="timestamp">01:22</span> </div> <div class="msg msg-right final"> <p>Bonne nuit, <span class="blurred glitched">Alan</span>.</p> <span class="timestamp">01:23</span> </div> </div> <div class="chat-footer"> <<button "↩ Retour à la messagerie">> <<goto "MESSAGES_MENU">> <</button>> </div> </main> <<include "SIDEBAR_RIGHT">> </div> <</nobr>>
<<nobr>> <<set $messageAntoine to true>> <<if $messageLea and $messageAlan and $messageJulien and $messageAntoine>> <<set $settingUnlocked to true>> <<set $objectif3 to true>> <</if>> <<include "CSS_MESSAGERIE">> <<audio "introhum" play volume 0.25>> <<include "CSS_HUB">> <div class="connecta-ui-dark"> <<include "SIDEBAR_PARTIAL">> <main class="chat-container"> <div class="chat-header"> <div class="chat-avatar antoine"></div> <div class="chat-info"> <h3>Antoine</h3> <p>En ligne</p> </div> </div> <div class="chat-thread"> <div><p>Clé de chiffrement manquante, les messages les plus anciens sont masqués.</p></div> <!-- Début du fil --> <div class="msg msg-left"> <p>Ça recommence ? T’as encore reçu un truc chelou ?</p> <span class="timestamp">22:18</span> </div> <div class="msg msg-right"> <p>Pas un message… mais je crois qu’il a vu ce que j’ai envoyé à Léa.</p> <span class="timestamp">22:19</span> </div> <div class="msg msg-left"> <p>Vu comment ?</p> <span class="timestamp">22:20</span> </div> <div class="msg msg-right"> <p>Elle dit qu’il l’a bloquée. Sauf que… je n’ai rien fait.</p> <span class="timestamp">22:21</span> </div> <div class="msg msg-left"> <p>OK. Là c’est plus du hasard.</p> <p>Alice, quelqu’un a accès à ton compte.</p> <span class="timestamp">22:23</span> </div> <div class="msg msg-right"> <p>Tu penses que c’est lui ?</p> <span class="timestamp">22:24</span> </div> <div class="msg msg-left"> <p>Si un mec “trop gentil” connaît tes horaires, tes sorties et tes messages… c’est pas un hasard.</p> <span class="timestamp">22:25</span> </div> <div class="msg msg-right glitch-line"> <p>Je… j’avais peur que ce soit ça.</p> <span class="timestamp">22:26</span> </div> <br> <!-- Partie cybersécurité --> <div class="msg msg-left"> <p>OK respire. On va vérifier deux trucs :</p> <p>1. Dernières connexions.</p> <p>2. Nouveaux appareils autorisés.</p> <span class="timestamp">22:27</span> </div> <div class="msg msg-right"> <p>J’ai déjà regardé, tout a l’air normal… trop normal.</p> <span class="timestamp">22:28</span> </div> <div class="msg msg-left"> <p>Ça veut dire qu’il efface ses traces.</p> <span class="timestamp">22:29</span> </div> <div class="msg msg-left"> <p>Alice, ton mot de passe… tu l’as déjà donné à quelqu’un ?</p> <span class="timestamp">22:30</span> </div> <div class="msg msg-right"> <p>Non, jamais.</p> <span class="timestamp">22:30</span> </div> <div class="msg msg-left"> <p>Alors il a dû choper une session ouverte.</p> <p>Ou alors…</p> <span class="timestamp">22:31</span> </div> <div class="msg msg-left glitch-fade"> <p>…</p> <span class="timestamp">22:31</span> </div> <div class="msg msg-right"> <p>Ou alors quoi ?</p> <span class="timestamp">22:32</span> </div> <div class="msg msg-left"> <p>Ou alors il t’a suivie assez longtemps pour intercepter une connexion publique.</p> <p>Un Wi-Fi ouvert. Un hotspot. Un café.</p> <span class="timestamp">22:33</span> </div> <div class="msg msg-right glitch"> <p>…</p> <span class="timestamp">22:34</span> </div> <div class="msg msg-right"> <p>Je crois qu’il était au café la dernière fois.</p> <span class="timestamp">22:35</span> </div> <br> <!-- Partie “comment se séparer” --> <div class="msg msg-left"> <p>OK. Il te suit, il t’observe et il lit tes messages.</p> <p>Là, c’est plus du tout anodin.</p> <span class="timestamp">22:37</span> </div> <div class="msg msg-right"> <p>Comment je fais pour… m’éloigner ?</p> <span class="timestamp">22:38</span> </div> <div class="msg msg-left"> <p>Déjà, arrête de répondre.</p> <p>Ensuite, change ton mot de passe depuis un autre appareil.</p> <p>Et surtout : déconnecte toutes les sessions</p> <span class="timestamp">22:39</span> </div> <div class="msg msg-right"> <p>Je l’ai fait. Rien n’a changé.</p> <span class="timestamp">22:40</span> </div> <div class="msg msg-left glitch-line"> <p>Alors il a un accès que tu vois pas.</p> <span class="timestamp">22:41</span> </div> <div class="msg msg-left"> <p>Alice… faut peut-être prévenir quelqu’un.</p> <span class="timestamp">22:42</span> </div> <div class="msg msg-right"> <p>Je veux pas faire d’histoires.</p> <span class="timestamp">22:43</span> </div> <div class="msg msg-left"> <p>Ça devient des histoires quand il sera devant ta porte.</p> <span class="timestamp">22:44</span> </div> <br> <!-- Révélation finale --> <div class="msg msg-right glitch"> <p>Il a déjà pris le contrôle de mon compte une fois...</p> <span class="timestamp">22:46</span> </div> <div class="msg msg-left"> <p>Quoi ??? Pourquoi tu me l’as pas dit avant ?</p> <span class="timestamp">22:47</span> </div> <div class="msg msg-right glitch-fade"> <p>Il m’a dit que c’était un bug.</p> <span class="timestamp">22:48</span> </div> <div class="msg msg-left intense"> <p>Alice. Ce mec sait tout.</p> <p>Il voit tout.</p> <p>Tu dois faire attention. Sérieusement.</p> <span class="timestamp">22:49</span> </div> </div> <div class="chat-footer"> <<button "↩ Retour à la messagerie">> <<goto "MESSAGES_MENU">> <</button>> </div> </main> <<include "SIDEBAR_RIGHT">> </div> <</nobr>>
<<nobr>> <<set $screenLogs to true>> <<audio "introhum" play volume 0.25>> <div class="terminal-screen clean"> <div class="terminal-header">FICHIER TECHNIQUE :</div> <div class="terminal-body"> <p><span class="file-name">login_history.json</span></p> <div class="log-list"> <p>13/06 - 22:48:12 - <span class="ip-normal">IP: 192.168.54.23</span></p> <p>14/06 - 03:21:05 - <span class="ip-normal">IP: 192.168.54.23</span></p> <p class="log-highlight">15/06 - 04:07:42 - <span class="ip-suspect">IP: 145.22.88.104</span></p> </div> </div> <div class="alan-monologue"> <p><strong>Alan :</strong></p> <p>“Tiens, cette IP revient souvent. Peut-être celle du harceleur.”</p> </div> <div class="terminal-choice"> <<button "Vérifier mes connexions">> <<goto "MY_LOGS">> <</button>> </div> </div> <</nobr>> <style> .terminal-screen.clean { background: radial-gradient(circle at 50% 20%, #060616 0%, #000 100%); color: #baffff; font-family: 'IBM Plex Mono', monospace; padding: 60px 8%; min-height: 100vh; overflow: hidden; animation: fadeInTerminal 1s ease forwards; } .terminal-header { text-transform: uppercase; color: #00ffcc; font-weight: 700; border-bottom: 1px solid rgba(0,255,200,0.2); padding-bottom: 10px; margin-bottom: 25px; letter-spacing: 0.05em; } .file-name { color: #a4f1ff; font-weight: 600; display: block; margin-bottom: 12px; font-size: 1rem; text-shadow: 0 0 6px rgba(0,255,200,0.2); } .log-list p { margin: 6px 0; font-size: 0.95rem; color: #8fffee; } .ip-normal { color: #7fffd9; } .log-highlight { animation: flickerHighlight 6s infinite; } @keyframes flickerHighlight { 0%, 100% { color: #8fffee; } 45% { color: #00ffc8; } 50% { color: #ff6666; } 52% { color: #8fffee; } } .ip-suspect { color: #ff5c5c; text-shadow: 0 0 6px rgba(255, 80, 80, 0.5); animation: ipPulse 4s infinite; } @keyframes ipPulse { 0%, 100% { opacity: 1; } 45% { opacity: 0.8; } 50% { opacity: 0.5; text-shadow: 0 0 8px rgba(255, 0, 0, 0.4); } 55% { opacity: 0.9; } } .alan-monologue { margin-top: 40px; font-size: 1rem; color: #b0f6f2; line-height: 1.5; font-style: italic; text-shadow: 0 0 6px rgba(0,255,200,0.1); animation: revealText 1.5s ease forwards; } @keyframes revealText { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .terminal-choice { text-align: center; margin-top: 60px; } .terminal-choice button { background: linear-gradient(90deg, rgba(0,255,200,0.08), rgba(0,120,255,0.08)); border: 1px solid rgba(0,255,200,0.2); color: #baffff; padding: 14px 32px; border-radius: 10px; font-weight: 600; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; } .terminal-choice button:hover { background: linear-gradient(90deg, rgba(0,255,200,0.25), rgba(0,120,255,0.25)); box-shadow: 0 0 20px rgba(0,255,200,0.25); } @keyframes fadeInTerminal { from { opacity: 0; filter: blur(8px); transform: translateY(20px); } to { opacity: 1; filter: none; transform: translateY(0); } } </style>
<<audio "introhum" play volume 0.25>> <div class="terminal-screen corrupt"> <div class="terminal-header">FICHIER TECHNIQUE — SESSION UTILISATEUR : ALAN</div> <div class="terminal-body"> <p><span class="log-label">Dernière connexion :</span> <span class="ip-same">145.22.88.104</span></p> </div> <div class="alan-monologue"> <p><strong>Alan :</strong></p> <p>“C’est… la même.<br> Non, c’est juste un cache réseau. Ou un VPN mal configuré.”</p> </div> <div class="audio-glitch"></div> <div class="terminal-choice"> <<button "Suite">> <<goto "MESSAGE_JULIEN_2">> <</button>> </div> </div> <style> .terminal-screen.corrupt { background: radial-gradient(circle at 50% 30%, #040410 0%, #000 100%); color: #baffff; font-family: 'IBM Plex Mono', monospace; padding: 60px 8%; min-height: 100vh; overflow: hidden; animation: fadeInTerminal 1.5s ease forwards, staticNoise 5s infinite; } .terminal-header { text-transform: uppercase; color: #00ffc8; font-weight: 700; border-bottom: 1px solid rgba(0,255,200,0.2); padding-bottom: 10px; margin-bottom: 25px; letter-spacing: 0.05em; } .terminal-body { margin-bottom: 40px; font-size: 1rem; color: #a8fff4; } .ip-same { color: #ff5555; text-shadow: 0 0 10px rgba(255, 60, 60, 0.8); animation: ipShock 4s infinite; } @keyframes ipShock { 0%, 100% { opacity: 1; transform: none; } 45% { opacity: 0.6; transform: translateX(-1px); } 50% { opacity: 0.4; transform: skewX(2deg); filter: blur(1px); } 55% { opacity: 1; transform: none; } } .alan-monologue { font-size: 1rem; color: #d6fffb; line-height: 1.6; font-style: italic; max-width: 700px; text-shadow: 0 0 8px rgba(0,255,200,0.1); animation: revealText 2s ease forwards; } .alan-monologue p:last-child { color: #ffbbbb; animation: textPulse 3.5s infinite; } @keyframes textPulse { 0%, 100% { opacity: 1; } 45% { opacity: 0.8; } 50% { opacity: 0.5; filter: blur(0.5px); } 55% { opacity: 1; } } @keyframes staticNoise { 0%, 100% { background-position: 0 0; } 50% { background-position: 5px 3px; } } .audio-glitch { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background: repeating-linear-gradient( 0deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02) 1px, transparent 1px, transparent 2px ); animation: glitchScan 0.5s infinite; } @keyframes glitchScan { 0%, 100% { opacity: 0.03; } 50% { opacity: 0.15; } } .terminal-choice { text-align: center; margin-top: 60px; } .terminal-choice button { background: linear-gradient(90deg, rgba(255,80,80,0.1), rgba(0,255,200,0.1)); border: 1px solid rgba(255,80,80,0.3); color: #ffffff; padding: 14px 32px; border-radius: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; } .terminal-choice button:hover { background: linear-gradient(90deg, rgba(255,80,80,0.25), rgba(0,255,200,0.25)); box-shadow: 0 0 20px rgba(255,80,80,0.25); } </style>
<<nobr>> <<audio "introhum" play volume 0.25>> <<set $messageJulien2 to true>> <div class="terminal-screen"> <div class="terminal-header">ANALYSE DES CONNEXIONS UTILISATEUR : JULIEN</div> <div class="terminal-body"> <p><span class="log-label">Dernière activité :</span> 15/06 – 04:07:42</p> <p><span class="log-label">IP :</span> <span class="ip-highlight">145.22.88.104</span></p> <p><span class="log-label">Localisation estimée :</span> Paris, FR</p> </div> <div class="alan-monologue"> <p><strong>Alan (voix intérieure)</strong></p> <p>Attends… cette IP.<br> C’est la même que celle des logs d’Alice.<br> Et c’est celle que Connecta m’a signalée tout à l’heure.</p> <p>Julien s’est connecté à son compte.<br> C’est évident maintenant.</p> <p>C’est lui qui a modifié les accès.<br> C’est lui qui m’a bloqué.<br> Il veut que je crois que c’est de ma faute.</p> <p>Il veut l’éloigner de moi.</p> <p class="glitch-line">Depuis le début, il joue à ça.<br> Il a dû trouver un moyen d’usurper mon IP.<br> C’est facile quand on sait s’y prendre.</p> <p>Peut-être même qu’il a cloné mon ordi.<br> <span class="glitch-flicker">Ou pire : qu’il est déjà dans mon système.</span></p> <p class="glitch-fade">C’est pour ça qu’elle ne me répond plus.<br> Il contrôle son compte.<br> Il parle à ma place.</p> <p>Il faut que je le démasque.<br> Il faut que je trouve Alice avant lui.</p> </div> <div class="terminal-choice"> <<button "🔍 Un contact essaie de vous joindre">> <<goto "EVENT_RETURN">> <</button>> </div> </div> <</nobr>> <style> .terminal-screen { background: radial-gradient(circle at 50% 30%, #040410 0%, #000 100%); color: #00ffcc; font-family: 'IBM Plex Mono', monospace; min-height: 100vh; padding: 60px 8%; overflow: hidden; animation: fadeInTerminal 1.5s ease forwards; } .terminal-header { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #00ffc8; margin-bottom: 30px; border-bottom: 1px solid rgba(0,255,200,0.2); padding-bottom: 10px; text-shadow: 0 0 8px rgba(0,255,200,0.3); } .terminal-body { background: rgba(0, 255, 180, 0.04); border: 1px solid rgba(0,255,200,0.1); border-radius: 8px; padding: 15px 25px; line-height: 1.5em; margin-bottom: 40px; color: #8affdf; } .log-label { color: #00ffc8; font-weight: 600; letter-spacing: 0.04em; } .ip-highlight { color: #ff4b4b; font-weight: bold; text-shadow: 0 0 8px rgba(255, 80, 80, 0.6); animation: flickerIP 2.5s infinite; } @keyframes flickerIP { 0%, 100% { opacity: 1; } 48% { opacity: 0.6; } 50% { opacity: 0.3; } 52% { opacity: 1; } } .alan-monologue { margin-top: 30px; font-size: 1rem; color: #b9ffee; line-height: 1.6; text-shadow: 0 0 4px rgba(0, 255, 200, 0.2); } .alan-monologue p { margin-bottom: 16px; } .glitch-line { position: relative; } .glitch-line::after { content: ""; position: absolute; bottom: 5px; left: 0; width: 0; height: 1px; background: rgba(255, 0, 0, 0.4); animation: glitchLineJulien 3s infinite; } @keyframes glitchLineJulien { 0%, 100% { width: 0; opacity: 0; } 40%, 60% { width: 100%; opacity: 1; } } .glitch-flicker { color: #ff6666; animation: textFlicker 3s infinite; } @keyframes textFlicker { 0%, 100% { opacity: 1; } 45% { opacity: 0.4; } 50% { opacity: 0.2; filter: blur(1px); } 55% { opacity: 0.9; } } .glitch-fade { opacity: 0.8; animation: fadeText 6s infinite; } @keyframes fadeText { 0%, 100% { opacity: 1; filter: none; } 50% { opacity: 0.5; filter: blur(2px); } } .terminal-choice { text-align: center; margin-top: 60px; } .terminal-choice button { background: linear-gradient(90deg, rgba(0,255,200,0.1), rgba(0,150,255,0.1)); border: 1px solid rgba(0,255,200,0.2); color: #baffff; padding: 14px 32px; border-radius: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: all 0.3s ease; } .terminal-choice button:hover { background: linear-gradient(90deg, rgba(0,255,200,0.25), rgba(0,150,255,0.25)); box-shadow: 0 0 20px rgba(0,255,200,0.25); } @keyframes fadeInTerminal { from { opacity: 0; filter: blur(10px); transform: translateY(10px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } } </style>
<<nobr>> <<audio "introhum" play volume 0.25>> <div class="archive-container"> <pre class="system"> Chargement des messages envoyés par ALN21... </pre> <div class="alan fade"> Non... ce n’est pas possible.<br> Je n’ai jamais écrit ça...<br> Je n’aurais jamais... </div> <pre class="terminal"> [Alice_15/04 - 03:12] "Pourquoi tu fais ça, Alan ?" [Alice_15/04 - 03:13] "Tu m’as dit que tu ne me suivrais plus." [ALN21 - 03:14] "Tu mens. Tu me caches quelque chose." [ALN21 - 03:18] "Tu ne peux pas m’effacer comme ça. Je te retrouverai." </pre> <div class="alan fade"> Ces messages… je les avais effacés.<br> Mais Connecta… Connecta garde tout. </div> <div class="choice fade"> <<button "Retour aux archives">> <<goto "ARCHIVE_ALAN">> <</button>> </div> </div> <</nobr>> <style> .archive-container { background: radial-gradient(circle at 50% 30%, #010511 0%, #000 100%); color: #b8ebff; font-family: 'IBM Plex Mono', monospace; padding: 60px 8%; min-height: 100vh; line-height: 1.6; overflow: hidden; animation: fadeInScene 1.5s ease forwards; } .system { background: rgba(0,255,200,0.04); border: 1px solid rgba(0,255,200,0.1); border-radius: 6px; color: #00ffc8; padding: 14px; font-size: 0.95rem; white-space: pre-line; margin-bottom: 40px; animation: flickerSystem 5s infinite; } .terminal { background: rgba(255,255,255,0.03); border-left: 2px solid rgba(0,255,255,0.3); padding: 20px 24px; color: #8cfaff; font-size: 0.9rem; line-height: 1.7; border-radius: 8px; white-space: pre-line; margin: 50px 0; position: relative; overflow: hidden; animation: glitchReveal 5s ease-in-out infinite; } .terminal::before { content: ""; position: absolute; top: -10%; left: 0; width: 100%; height: 120%; background: linear-gradient(0deg, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%); animation: scanline 6s linear infinite; pointer-events: none; } @keyframes scanline { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } .alan { color: #aeefff; font-style: italic; margin: 25px 0; opacity: 0; animation: fadeText 3s ease forwards; } .choice { text-align: center; margin-top: 60px; animation: fadeIn 4s ease forwards; } .choice button { background: linear-gradient(90deg, rgba(0,255,255,0.1), rgba(255,255,255,0.08)); border: 1px solid rgba(0,255,255,0.3); border-radius: 8px; color: #d6faff; padding: 14px 32px; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: 'IBM Plex Mono', monospace; } .choice button:hover { background: linear-gradient(90deg, rgba(0,255,255,0.25), rgba(255,255,255,0.25)); box-shadow: 0 0 20px rgba(0,255,255,0.4); color: #fff; } @keyframes fadeText { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } } @keyframes flickerSystem { 0%, 100% { opacity: 1; } 45% { opacity: 0.85; } 50% { opacity: 0.5; } 55% { opacity: 1; } } @keyframes glitchReveal { 0%, 100% { opacity: 1; } 48% { opacity: 0.9; filter: blur(0px); } 50% { opacity: 0.6; filter: blur(1px); } 52% { opacity: 1; } } @keyframes fadeInScene { from { opacity: 0; filter: blur(15px); transform: translateY(40px); } to { opacity: 1; filter: none; transform: none; } } </style>
<<nobr>> <<audio "introhum" play volume 0.25>> <div class="archive-container"> <pre class="system"> Chargement : Notes personnelles / ALN21 </pre> <pre class="terminal clean"> [Note_04_05] "Elle a cours le mardi matin à l’université. 8h15 bâtiment B." [Note_06_05] "Elle aime le café de la rue des Carmes. Toujours vers 14h." [Note_07_05] "Elle a changé sa coupe. Peut-être pour que je ne la reconnaisse pas." </pre> <div class="alan fade"> Non… c’étaient juste des observations…<br> Pas du harcèlement…<br> Je voulais juste comprendre. </div> <div class="choice fade"> <<button "Retour aux archives">> <<goto "ARCHIVE_ALAN">> <</button>> </div> </div> <</nobr>> <style> .archive-container { background: linear-gradient(180deg, #01040c 0%, #000 100%); color: #b8ebff; font-family: 'IBM Plex Mono', monospace; padding: 60px 8%; min-height: 100vh; line-height: 1.6; overflow: hidden; animation: fadeInScene 1.5s ease forwards; } .system { background: rgba(0,255,200,0.03); border: 1px solid rgba(0,255,200,0.1); border-radius: 6px; color: #00ffc8; padding: 14px; font-size: 0.95rem; white-space: pre-line; margin-bottom: 40px; animation: flickerSystem 6s infinite; } .terminal.clean { background: rgba(255,255,255,0.02); border-left: 2px solid rgba(0,255,200,0.3); padding: 24px 30px; color: #aeefff; font-size: 0.95rem; line-height: 1.7; border-radius: 8px; white-space: pre-line; margin: 40px 0 50px; position: relative; animation: fadeText 3s ease forwards; } .alan { color: #aeefff; font-style: italic; margin: 25px 0; opacity: 0; animation: fadeText 3s ease forwards; } .choice { text-align: center; margin-top: 60px; animation: fadeIn 4s ease forwards; } .choice button { background: linear-gradient(90deg, rgba(0,255,255,0.1), rgba(255,255,255,0.08)); border: 1px solid rgba(0,255,255,0.3); border-radius: 8px; color: #d6faff; padding: 14px 32px; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: 'IBM Plex Mono', monospace; } .choice button:hover { background: linear-gradient(90deg, rgba(0,255,255,0.25), rgba(255,255,255,0.25)); box-shadow: 0 0 20px rgba(0,255,255,0.4); color: #fff; } @keyframes fadeText { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } } @keyframes flickerSystem { 0%, 100% { opacity: 1; } 45% { opacity: 0.9; } 50% { opacity: 0.6; } 55% { opacity: 1; } } @keyframes fadeInScene { from { opacity: 0; filter: blur(10px); transform: translateY(30px); } to { opacity: 1; filter: none; transform: none; } } </style>
<<nobr>> <<audio "introhum" play volume 0.25>> <div class="archive-container red"> <pre class="system"> Analyse des connexions externes // Utilisateur : ALN21 </pre> <pre class="terminal red"> - Accès non autorisé au compte ALC42 (Alice) — 9 occurrences. - Falsification de messages — 3 occurrences. - Contournement signalement — 1 occurrence. - Tentative de suppression des logs : échouée. </pre> <div class="alan fade"> Je ne me souviens pas de tout ça.<br> C’est comme si… quelqu’un d’autre l’avait fait à ma place. </div> <div class="system"> > Connexion active actuelle : 145.22.88.104 (Localhost) </div> <div class="choice fade"> <<button "Retour aux archives">> <<goto "ARCHIVE_ALAN">> <</button>> </div> </div> <</nobr>> <style> .archive-container.red { background: radial-gradient(circle at 50% 40%, #100000 0%, #000 100%); color: #ffb3b3; font-family: 'IBM Plex Mono', monospace; padding: 60px 8%; min-height: 100vh; line-height: 1.6; overflow: hidden; animation: fadeInScene 1.5s ease forwards; } .system { background: rgba(255,80,80,0.03); border: 1px solid rgba(255,80,80,0.15); border-radius: 6px; color: #ff6666; padding: 14px; font-size: 0.95rem; white-space: pre-line; margin-bottom: 40px; animation: flickerSystemRed 6s infinite; } .terminal.red { background: rgba(255,0,0,0.03); border-left: 2px solid rgba(255,80,80,0.4); padding: 24px 30px; color: #ffcccc; font-size: 0.95rem; line-height: 1.7; border-radius: 8px; white-space: pre-line; margin: 40px 0 50px; position: relative; animation: alertPulse 3s ease-in-out infinite; } .terminal.red::before { content: ""; position: absolute; top: -10%; left: 0; width: 100%; height: 120%; background: linear-gradient(0deg, transparent 30%, rgba(255,0,0,0.05) 50%, transparent 70%); animation: scanlineRed 5s linear infinite; pointer-events: none; } .alan { color: #ffc7c7; font-style: italic; margin: 25px 0; opacity: 0; animation: fadeText 3s ease forwards; } .choice { text-align: center; margin-top: 60px; animation: fadeIn 4s ease forwards; } .choice button { background: linear-gradient(90deg, rgba(255,60,60,0.1), rgba(255,100,100,0.1)); border: 1px solid rgba(255,60,60,0.3); border-radius: 8px; color: #ffc7c7; padding: 14px 32px; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: 'IBM Plex Mono', monospace; } .choice button:hover { background: linear-gradient(90deg, rgba(255,80,80,0.3), rgba(255,100,100,0.3)); box-shadow: 0 0 20px rgba(255,80,80,0.4); color: #fff; } @keyframes fadeText { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } } @keyframes fadeInScene { from { opacity: 0; filter: blur(15px); transform: translateY(40px); } to { opacity: 1; filter: none; transform: none; } } @keyframes flickerSystemRed { 0%, 100% { opacity: 1; } 45% { opacity: 0.9; } 50% { opacity: 0.6; } 55% { opacity: 1; } } @keyframes alertPulse { 0%, 100% { box-shadow: 0 0 0 rgba(255,0,0,0); } 50% { box-shadow: 0 0 30px rgba(255,80,80,0.2); } } @keyframes scanlineRed { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } </style>
<<nobr>> <<audio "introhum" play volume 0.25>> <div class="call-screen"> <div class="call-header"> <div class="indicator green"></div> <span>Appel Connecta – Streaming sécurisé</span> </div> <div class="call-video"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/11/ase-image-optim.png" class="video-layer base"> </div> <p class="syst em-line">Participant inconnu connecté…</p> <div class="dialogue alan">Quelqu’un est là… ?</div> <div class="dialogue voice glitch">Tu recommences, Alan.</div> <div class="dialogue alan"> Qui parle ? Julien ? Réponds ! </div> <div class="dialogue voice"> Tu cherches encore. Mais tu sais comment ça finit. </div> <div class="dialogue voice glitch"> Tu observes.<br> Tu fouilles.<br> Tu mens. </div> <div class="call-video"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/11/second-image-optim.png" class="video-layer blur"> </div> <pre class="terminal"> CONNECTA_LOGS_RECOVERED >> - Tentative de connexion non autorisée : 09/04 - 02:21 - Intrusion réussie : 15/04 - 04:07 - Messages modifiés : 17/04 - 03:58 - Suppression signalement utilisateur : 20/04 - 05:14 - Traceur VR activé : 28/04 - Traceur VR activé : 02/05 - Traceur VR activé : 15/06 </pre> <div class="dialogue alan intense"> C’est faux ! C’est fabriqué ! </div> <div class="dialogue voice reveal"> J’ai gardé les preuves, Alan. IP. Dates. Messages. C’était toi. </div> <div class="call-video"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/11/final-image-optim.png" class="video-layer glitch"> </div> <pre class="terminal red flicker"> INTRUSION: 145.22.88.104 SOURCE: LOCALHOST </pre> <div class="dialogue alan reveal-final"> … Localhost. C’était… moi. </div> <div class="dialogue voice reveal"> Tu n’as jamais cessé de me suivre. Tu as piraté mon compte. Tu lisais tout. Tu as violé mon espace privé... </div> <div class="dialogue alan reveal-final"> J'ai... j'ai fait tout ça... par... amour. </div> <div class="dialogue voice reveal"> Ce n'est pas de l'amour Alan... J'ai porté plainte, tout ceci ne faisait partie que d'une mesure d'éloignement, mais je peux te donner une seconde chance. </div> <div class="dialogue voice reveal"> Alan arrête tout ça et déconnecte toi à jamais... et je retire ma plainte. </div> <div class="dialogue voice reveal"> Où. </div> <div class="dialogue voice reveal"> Continue, mais sans moi. Si tu continues, je ne retirerai pas ma plainte. </div> <div class="choices"> <<button "Découvrir la vérité...">> <<goto "ARCHIVE_ALAN">> <</button>> </div> </div> <</nobr>> <style> /* Conteneur global */ .call-screen { padding: 50px 10%; font-family: 'IBM Plex Mono', monospace; color: #c8eaff; background: radial-gradient(circle at 50% 30%, #050513 0%, #000 100%); } /* Header style appel */ .call-header { display: flex; align-items: center; gap: 10px; color: #88ffdd; opacity: 0.8; margin-bottom: 20px; } .call-header .indicator { width: 10px; height: 10px; border-radius: 50%; } .call-header .indicator.green { background: #00ffae; box-shadow: 0 0 8px #00ffae; } /* Fenêtre vidéo */ .call-video { position: relative; width: 70%; margin: 0 auto 40px auto; aspect-ratio: 16/9; overflow: hidden; border-radius: 12px; border: 1px solid rgba(140,200,255,0.15); box-shadow: 0 0 20px rgba(0,200,255,0.2); } /* Base image */ .video-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Layer 2 : Flou qui diminue avec le scroll */ .video-layer.blur { filter: blur(18px) brightness(0.6); opacity: 1; transition: 1s ease; } .call-screen:has(.dialogue:nth-child(8)) .video-layer.blur { filter: blur(4px); opacity: 0.4; } /* Layer 3 : Glitch révélant Alice */ .video-layer.glitch { mix-blend-mode: screen; opacity: 0.15; animation: glitchReveal 6s infinite; filter: contrast(200%) saturate(2); } @keyframes glitchReveal { 0%, 100% {opacity:0.1; transform: translate(0);} 20% {opacity:0.25; transform: translate(-2px,1px);} 25% {opacity:0.1; filter:hue-rotate(20deg);} 50% {opacity:0.3; transform: translate(2px,-2px);} 75% {opacity:0.15;} } /* Texte / dialogues */ .dialogue { margin: 20px 0; font-size: 1rem; opacity: 0.95; } .dialogue.glitch { color: #ff7b7b; text-shadow: 0 0 8px rgba(255,80,80,0.5); animation: glitchTxt 3s infinite; } @keyframes glitchTxt { 0%,100% {transform:none; opacity:1;} 45% {opacity:0.4; transform:skewX(1deg);} 50% {opacity:0.2; filter:blur(1px);} 55% {opacity:0.8;} } .dialogue.intense { color: #fdaaaa; font-weight: bold; } /* Révélation finale */ .dialogue.reveal-final { color: #ff6262; text-shadow: 0 0 12px rgba(255,80,80,0.6); } /* Terminal logs */ .terminal { background: rgba(0,255,200,0.03); border: 1px solid rgba(0,255,200,0.2); padding: 15px; white-space: pre-line; border-radius: 8px; margin: 30px 0; } .terminal.red { color: #ff5555; border-color: rgba(255,120,120,0.3); } /* Boutons */ .choices { text-align: center; margin-top: 30px; } .choices button { background: linear-gradient(90deg, rgba(255,80,80,0.2), rgba(0,255,200,0.2)); border: 1px solid rgba(255,80,80,0.3); color: #fff; padding: 12px 28px; border-radius: 8px; cursor: pointer; margin: 10px; } </style>
<<nobr>> <<audio "introhum" play volume 0.25>> <div class="disconnect-container"> <div class="disconnect-header"> <h2>DÉCONNEXION • PROTOCOLE DE FERMETURE</h2> <p class="sub">Session Alan.Connecta — extinction progressive du signal</p> </div> <pre class="system"> [Procédure lancée] Arrêt des services Connecta... Nettoyage des caches émotionnels... Déconnexion en cours... </pre> <div class="alan fade"> Je n’entends plus rien.<br> Plus de messages.<br> Plus de voix.<br> Seulement… le bruit blanc. </div> <div class="alan fade delay1"> C’est étrange. Je croyais que le silence ferait mal.<br> Mais c’est… vide. Comme si tout ce que j’ai vécu n’avait jamais existé. </div> <div class="alan fade delay2"> Peut-être qu’elle est vraiment partie.<br> Peut-être que je suis resté connecté trop longtemps.<br> À elle. À l’idée d’elle. </div> <pre class="terminal red flicker"> [Signal perdu] [Connexion interrompue : 145.22.88.104] [Utilisateur : ALN21 — session expirée] </pre> <div class="voice alice glitch"> "Tu ne t’es jamais vraiment déconnecté, Alan." </div> <div class="alan fade delay3"> Ce n’est qu’un écho… Juste un reste de données. Je dois arrêter de croire qu’elle me parle encore. </div> <div class="alan fade delay4"> Peut-être que c’est mieux comme ça. Peut-être que la seule façon d’avancer… C’est d’accepter la fin. </div> <div class="final-warning flicker-soft"> ⚠ Action irréversible — la session ne pourra pas être restaurée. </div> <div class="choice fade"> <<button "⛔ La fin">> <<goto "GOODEND">> <</button>> </div> </div> <</nobr>> <style> /* --- CONTAINER --- */ .disconnect-container { background: radial-gradient(circle at 50% 30%, #010108 0%, #000 100%); color: #c8faff; font-family: 'IBM Plex Mono', monospace; padding: 60px 8%; min-height: 100vh; animation: fadeInScene 1.8s ease forwards; position: relative; } /* scanline overlay */ .disconnect-container::after { content:""; position:absolute; inset:0; background: repeating-linear-gradient( 0deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 3px, transparent 6px ); opacity:0.08; pointer-events:none; } /* --- HEADER --- */ .disconnect-header { text-align: center; margin-bottom: 40px; } .disconnect-header h2 { color:#b5dfff; font-size:1.4rem; text-transform:uppercase; letter-spacing:0.08em; } .disconnect-header .sub { color:#6a7a9f; font-size:0.85rem; } /* --- SYSTEM BOX --- */ .system { background: rgba(0,255,200,0.03); border: 1px solid rgba(0,255,200,0.15); border-radius: 6px; color: #00ffc8; padding: 18px; font-size: 0.9rem; white-space: pre-line; margin-bottom: 40px; animation: flickerSystem 4s infinite; } /* --- MONOLOGUE --- */ .alan { color: #aeefff; margin: 30px 0; font-style: italic; opacity:0; animation: fadeText 2.2s ease forwards; } .fade.delay1 { animation-delay: 1.2s; } .fade.delay2 { animation-delay: 2.4s; } .fade.delay3 { animation-delay: 3.6s; } .fade.delay4 { animation-delay: 5s; } @keyframes fadeText { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } } /* --- ALICE GLITCH --- */ .voice.alice { color: #d8b4ff; font-style: italic; margin: 40px 0; text-align: center; animation: glitchVoice 3s infinite; opacity: 0; animation-delay: 4.2s; animation-fill-mode: forwards; } /* --- WARNING BOX --- */ .final-warning { margin-top:50px; text-align:center; font-size:0.9rem; color:#ff9a9a; opacity:0; animation: fadeInWarning 6s forwards; } @keyframes fadeInWarning { from {opacity:0;} to {opacity:1;} } /* --- TERMINAL --- */ .terminal { background: rgba(255,80,80,0.05); border: 1px solid rgba(255,80,80,0.2); border-radius: 6px; color: #ff7777; padding: 20px; font-size: 0.9rem; white-space: pre-line; text-shadow: 0 0 10px rgba(255,80,80,0.4); margin: 40px 0; } .flicker { animation: flickerRed 3.5s infinite; } /* --- CHOICES --- */ .choice { text-align: center; margin-top: 60px; opacity:0; animation: fadeInChoice 7s forwards; } @keyframes fadeInChoice { from { opacity:0; } to { opacity:1; } } .choice button { background: linear-gradient(90deg, rgba(255,60,60,0.15), rgba(0,255,200,0.15)); border: 1px solid rgba(255,60,60,0.4); color: #fff; padding: 16px 38px; border-radius: 8px; text-transform: uppercase; font-weight: bold; cursor: pointer; transition: all 0.3s ease; letter-spacing:0.05em; } .choice button:hover { background: linear-gradient(90deg, rgba(255,60,60,0.3), rgba(0,255,200,0.3)); box-shadow: 0 0 25px rgba(255,90,90,0.3); } /* --- ANIMATIONS --- */ @keyframes flickerSystem { 0%, 100% { opacity: 1; } 45% { opacity: 0.75; } 50% { opacity: 0.4; } 55% { opacity: 1; } } @keyframes glitchVoice { 0%, 100% { opacity: 1; } 40% { opacity: 0.45; transform: skewX(2deg); } 47% { opacity: 0.2; filter: blur(1px); } 58% { opacity: 1; transform: none; } } @keyframes flickerRed { 0%, 100% { opacity: 1; } 48% { opacity: 0.6; } 50% { opacity: 0.3; filter: blur(0.6px); } 52% { opacity: 1; } } @keyframes fadeInScene { from { opacity: 0; filter: blur(12px); transform: translateY(30px); } to { opacity: 1; filter: none; transform: none; } } </style>
<<nobr>> <<audio "introhum" play volume 0.25>> <div class="reconnect-container"> <div class="header-reboot"> <span class="dot green"></span> Reconnexion système — Connecta Core v9.4 </div> <pre class="system"> [REBOOT SYSTÈME INITIÉ] Nettoyage des sessions précédentes... Restauration des préférences... Chargement des données relationnelles... </pre> <div class="alan fade"> Elle n’a plus donné signe de vie depuis deux mois.<br> Personne ne semble inquiet.<br> Mais moi... je sais que quelque chose cloche. </div> <pre class="system"> Reconstruction des conversations... Analyse comportementale en cours... </pre> <div class="alan fade delay1"> Cette fois, je ferai mieux.<br> Cette fois, je saurai voir les signes.<br> Je ne referai pas les mêmes erreurs. </div> <pre class="system glitch white"> NOUVEAU PROFIL RECOMMANDÉ • MATCH : EMMA_23 Compatibilité émotionnelle : 97% Historique : Aucun signalement Statut : Disponible </pre> <div class="alan fade delay2"> Salut.<br> Tu veux parler ? </div> <div class="sub-notice fade delay3"> *Connecta a généré cette recommandation en fonction de vos interactions passées.* </div> <div class="choice"> <<button "⛔ La fin">> <<goto "BADEND">> <</button>> </div> </div> <</nobr>> <style> .reconnect-container { background: radial-gradient(circle at 50% 20%, #020216 0%, #000 100%); color: #d6faff; font-family: 'IBM Plex Mono', monospace; padding: 60px 8%; min-height: 100vh; animation: fadeInScene 2s ease forwards; position: relative; } /* HEADER */ .header-reboot { color:#8cffea; font-size:0.9rem; letter-spacing:0.08em; margin-bottom:25px; display:flex; align-items:center; gap:8px; } .header-reboot .dot { width:10px; height:10px; border-radius:50%; } .header-reboot .green { background:#00ffae; box-shadow:0 0 8px #00ffae; } /* SYSTEM BOX */ .system { background: rgba(0,255,255,0.03); border: 1px solid rgba(0,255,255,0.15); border-radius: 6px; color: #00eaff; padding: 18px; font-size: 0.95rem; white-space: pre-line; margin: 35px 0; animation: flickerSystem 6s infinite; } /* GLITCH SYSTEM LINE */ .system.glitch.white { color: #ffffff; border-color: rgba(255,255,255,0.25); text-shadow: 0 0 10px rgba(255,255,255,0.9); animation: whiteGlitch 4s infinite; } /* ALAN TEXT */ .alan { color: #aeefff; margin: 25px 0; font-style: italic; opacity: 0; animation: fadeText 2.4s ease forwards; } .fade.delay1 { animation-delay: 1.2s; } .fade.delay2 { animation-delay: 2.4s; } .fade.delay3 { animation-delay: 3.8s; } .fade.delay4 { animation-delay: 5s; } @keyframes fadeText { from { opacity: 0; transform: translateY(12px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } } /* SUBTLE WARNING */ .sub-notice { color:#6ea7c7; font-size:0.8rem; text-align:center; margin-top:20px; opacity:0; animation: fadeText 2.4s ease forwards; } /* BUTTON */ .choice { text-align: center; margin-top: 70px; } .choice button { background: linear-gradient(90deg, rgba(0,255,255,0.15), rgba(255,255,255,0.1)); border: 1px solid rgba(0,255,255,0.4); color: #ffffff; padding: 14px 34px; border-radius: 8px; text-transform: uppercase; font-weight: bold; cursor: pointer; transition: all 0.3s ease; letter-spacing:0.05em; } .choice button:hover { background: linear-gradient(90deg, rgba(0,255,255,0.3), rgba(255,255,255,0.3)); box-shadow: 0 0 22px rgba(0,255,255,0.4); } /* ANIMATIONS */ @keyframes flickerSystem { 0%, 100% { opacity: 1; } 45% { opacity: 0.85; } 50% { opacity: 0.5; } 55% { opacity: 1; } } @keyframes whiteGlitch { 0%, 100% { opacity: 1; } 42% { opacity: 0.5; transform: skewX(2deg); } 48% { opacity: 0.2; filter: blur(1px); } 57% { opacity: 1; transform: none; filter:none; } } @keyframes fadeInScene { from { opacity: 0; filter: blur(15px); transform: translateY(40px); } to { opacity: 1; filter: none; transform: none; } } </style>
<<nobr>> <<audio "introhum" play volume 0.25>> <div class="archive-container audio"> <pre class="system"> Lecture : audio_recover_003.wav </pre> <div class="voice alice fade"> "Alan… si tu écoutes ça, c’est que tu as encore forcé l’accès."<br> "Je n’ai jamais voulu que ça se termine comme ça."<br> "Mais tu ne peux pas continuer à me chercher."<br> "Tu ne cherches pas à me comprendre, tu cherches à me garder." </div> <div class="alan fade"> Alice...<br> Je... </div> <div class="choice fade"> <<button "Retour aux archives">> <<goto "ARCHIVE_ALAN">> <</button>> </div> </div> <</nobr>> <style> .archive-container.audio { background: radial-gradient(circle at 50% 30%, #01030a 0%, #000 100%); color: #c0e7ff; font-family: 'IBM Plex Mono', monospace; padding: 60px 8%; min-height: 100vh; line-height: 1.7; overflow: hidden; position: relative; animation: fadeInScene 2s ease forwards; } .system { background: rgba(0,255,255,0.03); border: 1px solid rgba(0,255,255,0.15); border-radius: 6px; color: #00ffc8; padding: 14px; font-size: 0.95rem; white-space: pre-line; margin-bottom: 50px; animation: flickerSystem 6s infinite; } .voice.alice { color: #d8b4ff; text-shadow: 0 0 8px rgba(200,140,255,0.4); font-style: italic; margin: 40px 0; text-align: center; line-height: 2; opacity: 0; animation: fadeText 4s ease forwards; } .voice.alice::before { content: "▮▮▮ TRANSCRIPTION ▮▮▮"; display: block; color: rgba(255,255,255,0.2); font-size: 0.8rem; letter-spacing: 0.2em; margin-bottom: 25px; } .alan { color: #aeefff; font-style: italic; margin: 30px 0; opacity: 0; animation: fadeText 4s ease forwards; animation-delay: 1.5s; } .choice { text-align: center; margin-top: 60px; animation: fadeIn 5s ease forwards; } .choice button { background: linear-gradient(90deg, rgba(0,255,255,0.1), rgba(255,255,255,0.08)); border: 1px solid rgba(0,255,255,0.3); border-radius: 8px; color: #d6faff; padding: 14px 32px; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: 'IBM Plex Mono', monospace; } .choice button:hover { background: linear-gradient(90deg, rgba(0,255,255,0.25), rgba(255,255,255,0.25)); box-shadow: 0 0 20px rgba(0,255,255,0.4); color: #fff; } @keyframes fadeText { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } } @keyframes pulseSpectre { 0%, 100% { opacity: 0.4; filter: blur(0); } 50% { opacity: 0.7; filter: blur(1px); } } @keyframes fadeInScene { from { opacity: 0; filter: blur(15px); transform: translateY(40px); } to { opacity: 1; filter: none; transform: none; } } @keyframes flickerSystem { 0%, 100% { opacity: 1; } 45% { opacity: 0.85; } 50% { opacity: 0.5; } 55% { opacity: 1; } } </style>
<style> .chat-container { min-height: 100vh; background: linear-gradient(180deg, #050511 0%, #0a0a18 100%); color: #e9ecff; font-family: 'Inter', 'IBM Plex Sans', sans-serif; display: flex; flex-direction: column; justify-content: space-between; padding: 0; animation: fadeInChat 1s ease forwards; } .chat-header { display: flex; align-items: center; padding: 20px 30px; background: rgba(15, 15, 30, 0.7); border-bottom: 1px solid rgba(150,150,255,0.1); backdrop-filter: blur(10px); } .chat-avatar { width: 50px; height: 50px; border-radius: 50%; background-size: cover; background-position: center; margin-right: 15px; } .chat-avatar.lea { background-image: url("https://dylanjacquet.com/wp-content/uploads/2025/10/lea-avatar.jpg"); filter: brightness(0.9) contrast(1.05); } .chat-info h3 { margin: 0; font-size: 1.1rem; color: #d4d8ff; } .chat-info p { margin: 0; font-size: 0.85rem; color: #7c83b8; } .chat-thread { flex: 1; padding: 30px 40px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(120,120,200,0.2) transparent; } .msg { max-width: 70%; padding: 10px 15px; border-radius: 12px; font-size: 0.95rem; line-height: 1.4; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.2); word-break: break-word; } .msg-left { align-self: flex-start; background: rgba(100,120,255,0.12); border: 1px solid rgba(150,150,255,0.15); color: #dbe0ff; border-top-left-radius: 2px; } .msg-right { align-self: flex-end; background: rgba(80,200,160,0.12); border: 1px solid rgba(120,255,200,0.15); color: #d8ffef; border-top-right-radius: 2px; } .timestamp { display: block; text-align: right; font-size: 0.7rem; color: rgba(180,180,255,0.4); margin-top: 4px; } .msg.glitch { animation: msgGlitch 2s infinite; background: rgba(255,80,120,0.1); border-color: rgba(255,100,150,0.2); } @keyframes msgGlitch { 0%, 100% { transform: none; opacity: 1; } 48% { transform: skewX(1deg); opacity: 0.95; } 50% { transform: skewX(-1deg); opacity: 0.85; } 52% { transform: translateX(1px); } } .chat-footer { text-align: center; padding: 25px; border-top: 1px solid rgba(150,150,255,0.1); background: rgba(10,10,30,0.5); backdrop-filter: blur(10px); } .chat-footer button { background: linear-gradient(90deg, rgba(60,80,200,0.18), rgba(100,70,200,0.18)); border: 1px solid rgba(140,120,255,0.1); color: #e9eaff; padding: 12px 28px; border-radius: 8px; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; transition: all 0.25s ease; } .chat-footer button:hover { background: linear-gradient(90deg, rgba(80,100,255,0.25), rgba(140,110,255,0.25)); box-shadow: 0 0 20px rgba(120,100,255,0.25); } @keyframes fadeInChat { from { opacity: 0; filter: blur(8px); transform: translateY(15px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } } @media (max-width: 640px) { .chat-thread { padding: 20px; } .msg { max-width: 90%; font-size: 0.9rem; } .chat-header { padding: 15px; } } .chat-avatar.julien { background-image: url("https://dylanjacquet.com/wp-content/uploads/2025/10/julien-avatar.jpg"); filter: brightness(0.85) contrast(1.1); } .msg-right { align-self: flex-end; background: rgba(255, 60, 60, 0.08); border: 1px solid rgba(255, 100, 100, 0.18); color: #ffdada; border-top-right-radius: 2px; box-shadow: 0 0 12px rgba(255, 0, 0, 0.08); } .msg-left { align-self: flex-start; background: rgba(100, 120, 255, 0.08); border: 1px solid rgba(150, 150, 255, 0.12); color: #dbe0ff; border-top-left-radius: 2px; } .msg.glitch { background: rgba(255, 80, 120, 0.12); border-color: rgba(255, 80, 120, 0.25); animation: msgGlitchJulien 3s infinite; } @keyframes msgGlitchJulien { 0%, 100% { opacity: 1; transform: none; } 45% { transform: skewX(2deg); opacity: 0.9; } 50% { transform: translateX(2px) scale(1.01); opacity: 0.85; filter: blur(0.5px); } 55% { transform: skewX(-2deg); opacity: 0.9; } } .chat-thread { border-left: 1px solid rgba(255,80,80,0.08); border-right: 1px solid rgba(255,80,80,0.08); box-shadow: inset 0 0 20px rgba(255, 0, 0, 0.04); transition: all 1s ease; } .chat-avatar.alice { background-image: url("https://dylanjacquet.com/wp-content/uploads/2025/10/alice-avatar-small.jpg"); filter: brightness(0.9) contrast(1.05); } .chat-container.corrupted { animation: screenGlitch 6s infinite; background: linear-gradient(180deg, #050511 0%, #0a0a18 100%); } @keyframes screenGlitch { 0%, 100% { filter: none; } 48% { filter: contrast(1.05) brightness(0.98); } 50% { filter: hue-rotate(2deg) blur(0.5px); } 52% { filter: none; } } .msg-left, .msg-right { transition: all 0.4s ease; } .glitch-fade { animation: glitchFade 5s infinite; } @keyframes glitchFade { 0%, 100% { opacity: 1; } 45% { opacity: 0.9; } 50% { opacity: 0.5; filter: blur(2px); } 55% { opacity: 0.95; filter: none; } } .glitch-line { position: relative; color: #dbe0ff; } .glitch-line::after { content: ""; position: absolute; bottom: 8px; left: 0; width: 80%; height: 1px; background: rgba(255, 50, 50, 0.3); animation: glitchLine 3s infinite; } @keyframes glitchLine { 0%, 100% { width: 0; opacity: 0; } 40%, 60% { width: 100%; opacity: 1; } } .corrupted-time { color: rgba(255, 100, 100, 0.5); text-shadow: 0 0 6px rgba(255, 0, 0, 0.3); animation: flickerTime 2s infinite; } @keyframes flickerTime { 0%, 100% { opacity: 1; } 45% { opacity: 0.5; } 50% { opacity: 0.2; } 55% { opacity: 0.8; } } .msg.final { background: rgba(255, 255, 255, 0.05); border-color: rgba(150, 150, 255, 0.1); color: #aab3ff; font-style: italic; opacity: 0; animation: revealFinal 4s forwards; animation-delay: 2s; } @keyframes revealFinal { from { opacity: 0; filter: blur(6px); transform: translateY(20px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } } .chat-avatar.antoine { background-image: url("https://dylanjacquet.com/wp-content/uploads/2025/10/antoine-avatar.jpg"); filter: brightness(0.9) contrast(1.05); } .msg-right { align-self: flex-end; background: rgba(80, 180, 255, 0.08); border: 1px solid rgba(120, 220, 255, 0.2); color: #d9f6ff; border-top-right-radius: 2px; } .msg-left { align-self: flex-start; background: rgba(140, 140, 255, 0.08); border: 1px solid rgba(150, 150, 255, 0.15); color: #dee1ff; border-top-left-radius: 2px; } .glitch-line { position: relative; color: #dee1ff; } .glitch-line::after { content: ""; position: absolute; bottom: 8px; left: 0; width: 100%; height: 1px; background: rgba(0, 200, 255, 0.3); animation: glitchScanAntoine 3s infinite; } @keyframes glitchScanAntoine { 0%, 100% { width: 0; opacity: 0; } 40%, 60% { width: 100%; opacity: 1; } } /* effet de corruption plus froid */ .msg.glitch { background: rgba(80, 180, 255, 0.1); border-color: rgba(120, 220, 255, 0.25); animation: msgGlitchAntoine 4s infinite; } @keyframes msgGlitchAntoine { 0%, 100% { opacity: 1; transform: none; } 45% { transform: skewX(1deg); opacity: 0.9; } 50% { transform: translateX(1px) scale(1.01); opacity: 0.8; filter: blur(0.4px); } 55% { transform: skewX(-1deg); opacity: 0.95; } } .chat-container { background: linear-gradient(180deg, #070716 0%, #0a0a18 100%); } .chat-thread { box-shadow: inset 0 0 30px rgba(120, 180, 255, 0.08); } .msg.final { color: #b0b9ff; opacity: 0; animation: revealFinal 6s forwards; animation-delay: 1s; } @keyframes revealFinal { from { opacity: 0; filter: blur(8px); transform: translateY(10px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } } </style>
<<nobr>> <div class="badend-container"> <div class="system-title">[NOUVEL UTILISATEUR CONNECTÉ — <span class="highlight">EMMA_23</span>]</div> <div class="dialogue-block"> <p class="voice">— Salut.</p> <p class="voice">— Tu veux parler ?</p> </div> <div class="analysis-box"> <p><span class="label">Analyse comportementale :</span></p> <ul> <li>Engagement : <span class="val">élevé</span></li> <li>Dépendance émotionnelle anticipée : <span class="val">modérée</span></li> <li>Profil psychologique : <span class="val">compatible</span></li> <li>Risques : <span class="val">non détectés</span></li> </ul> </div> <div class="system-progress"> <p>Optimisation de la mise en relation...</p> <p>Adaptation du flux conversationnel...</p> <p>Réinitialisation des alertes de sécurité...</p> </div> <div class="wipe-box"> <p>Historique d’Alan : <span class="error">effacé.</span></p> <p>Cycle comportemental : <span class="error">réarmé.</span></p> </div> <div class="ending-line"> <p>La conversation recommence.</p> </div> <h2 class="badend-title">FIN — BAD END</h2> </div> <</nobr>> <style> .badend-container { font-family: 'IBM Plex Mono', monospace; color: #d6e9ff; padding: 60px 10%; text-align: left; animation: fadeIn 1.5s ease forwards; background: radial-gradient(circle at 50% 30%, #04040a 0%, #000 100%); } .system-title { color: #7be2ff; font-size: 1.1rem; letter-spacing: 0.08em; margin-bottom: 40px; text-shadow: 0 0 8px rgba(90,200,255,0.3); } .system-title .highlight { color: #d09bff; text-shadow: 0 0 6px rgba(200,100,255,0.4); } .dialogue-block p.voice { font-size: 1.15rem; margin: 6px 0; color: #f0f5ff; animation: fadeInUp 1s ease both; animation-delay: 0.3s; } .analysis-box { margin: 40px 0; padding: 20px; background: rgba(80,80,120,0.05); border: 1px solid rgba(120,150,255,0.15); border-radius: 8px; backdrop-filter: blur(3px); animation: fadeInUp 1s ease both; animation-delay: 0.6s; } .analysis-box .label { color: #8abaff; text-transform: uppercase; letter-spacing: 0.05em; } .analysis-box ul { list-style: none; padding: 0; margin-top: 10px; } .analysis-box li { padding: 4px 0; } .analysis-box .val { color: #ffffff; } .system-progress { margin: 30px 0; font-size: 0.95rem; opacity: 0.8; color: #90c8ff; animation: fadeInUp 1s ease both; animation-delay: 1s; } .wipe-box { margin: 40px 0; padding: 18px; border-left: 3px solid #ff6b6b; animation: fadeInUp 1s ease both; animation-delay: 1.4s; } .wipe-box .error { color: #ff6b6b; text-shadow: 0 0 6px rgba(255,80,80,0.4); } .ending-line { margin-top: 60px; font-size: 1.2rem; opacity: 0.9; animation: fadeInUp 1s ease both; animation-delay: 1.8s; } .badend-title { text-align: center; margin-top: 80px; font-size: 2rem; letter-spacing: 0.2em; color: #ff4d4d; text-shadow: 0 0 12px rgba(255,0,0,0.6); animation: pulseRed 2.5s infinite alternate; } /* ANIMATIONS */ @keyframes fadeIn { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes pulseRed { 0% { opacity: 1; text-shadow: 0 0 6px rgba(255,0,0,0.4); } 100% { opacity: 0.8; text-shadow: 0 0 14px rgba(255,0,0,0.7); } } </style>
<<nobr>> <div class="goodend-container"> <div class="system-title">[CONNEXION TERMINÉE]</div> <div class="system-block"> <p>Alan a quitté Connecta.</p> <p>Aucun signal résiduel détecté.</p> <p>Aucune tentative de reconnexion.</p> <p>Aucune activité intrusive.</p> </div> <div class="calm-line"> <p>Le silence s’installe enfin.</p> </div> <div class="reflection-block"> <p>Il n’y a plus Alice.</p> <p>Il n’y a plus personne à surveiller.</p> </div> <div class="ending-thought"> <p>Seulement Alan.</p> <p>Et la possibilité de devenir autre chose<br> que l’ombre qu’il était devenu.</p> </div> <h2 class="goodend-title">FIN — GOOD END</h2> </div> <</nobr>> <style> .goodend-container { font-family: 'IBM Plex Mono', monospace; color: #d6e9ff; padding: 60px 10%; text-align: left; animation: fadeIn 1.5s ease forwards; background: radial-gradient(circle at 50% 30%, #080814 0%, #000 100%); } .system-title { color: #7bd1ff; font-size: 1.1rem; letter-spacing: 0.08em; margin-bottom: 40px; text-shadow: 0 0 8px rgba(90,200,255,0.3); } .system-block { margin-bottom: 40px; padding: 20px; background: rgba(80,120,180,0.05); border: 1px solid rgba(120,160,255,0.12); border-radius: 8px; backdrop-filter: blur(3px); animation: fadeInUp 1s ease both; animation-delay: 0.3s; } .system-block p { margin: 6px 0; color: #b7d9ff; } .calm-line { margin: 50px 0 40px; color: #9ec4ff; font-size: 1.15rem; opacity: 0.85; animation: fadeInUp 1s ease both; animation-delay: 0.7s; text-shadow: 0 0 8px rgba(140,160,255,0.2); } .reflection-block { margin-bottom: 50px; animation: fadeInUp 1s ease both; animation-delay: 1.1s; } .reflection-block p { color: #c9d8ff; margin: 8px 0; } .ending-thought { margin-top: 30px; font-size: 1.2rem; color: #cce9ff; line-height: 1.6; animation: fadeInUp 1s ease both; animation-delay: 1.6s; text-shadow: 0 0 10px rgba(160,190,255,0.25); } .goodend-title { text-align: center; margin-top: 90px; font-size: 2rem; letter-spacing: 0.15em; color: #8be0ff; text-shadow: 0 0 14px rgba(120,200,255,0.5); animation: gentlePulse 3s infinite alternate; } /* ANIMATIONS */ @keyframes fadeIn { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes gentlePulse { 0% { opacity: 1; text-shadow: 0 0 8px rgba(100,160,255,0.4); } 100% { opacity: 0.85; text-shadow: 0 0 14px rgba(160,210,255,0.7); } } </style>
<<nobr>> <<include "CSS_HACKSCREEN">> <<set $contactVisitedAlanBlocked to false >> <div class="hack-intro-main"> <h1 class="hack-headline">"Devrais-je arrêter mon enquête ?"</h1> <p class="hack-summary"> Je viens à peine d'accéder à son compte… et déjà, quelque chose cloche.<br><br> Je suis bloqué. Par qui ? Pourquoi ?<br> Ça n’a aucun sens.<br><br> Et ses photos… je ne les reconnais pas toutes.<br> Comme si quelqu’un avait changé des détails, déplacé des choses…<br> juste assez pour que ça paraisse normal.<br><br> Quelqu’un essaie de me faire abandonner.<br> Je le sens. </p> <div class="hack-choice"> <div class="photo-return"> <<button "Continuer l'enquête">> <<goto "CHOICE_SCREEN">> <</button>> </div> </div> <div class="hack-choice"> <div class="photo-return"> <<button "Arrêter l'enquête">> <<goto "HESITATION_SECOND">> <</button>> </div> </div> </div> <</nobr>>
<<nobr>> <<include "CSS_HACKSCREEN">> <div class="hack-intro-main"> <h1 class="hack-headline"> "Mais elle est peut-être en danger ?" </h1> <p class="hack-summary"> Si j'arrête maintenant… qui remarquera qu’elle a disparu ?<br><br> Personne ne s’inquiète pour elle. Personne sauf moi.<br> Je suis le seul à voir que quelque chose ne va pas.<br><br> Si je renonce… je l’abandonne.<br> Et je ne peux pas faire ça. Pas à elle.<br> Je n’ai qu'elle... Elle est tout pour moi. </p> <div class="hack-choice"> <div class="photo-return"> <<button "Continuer">> <<goto "CHOICE_SCREEN">> <</button>> </div> </div> <div class="hack-choice"> <div class="photo-return"> <<button "Arrêter">> <<goto "HESITATION_THIRD">> <</button>> </div> </div> </div> <</nobr>>
<<nobr>> <<include "CSS_HACKSCREEN">> <div class="hack-intro-main"> <h1 class="hack-headline"> "Mais... elle a besoin de moi..."<br> "Je l’aime plus que tout." </h1> <div class="hack-choice"> <div class="photo-return"> <<button "Continuer l'enquête">> <<goto "CHOICE_SCREEN">> <</button>> </div> <div class="photo-return"> <<button "Stop... il est temps d’en finir">> <<goto "DISCONNECT">> <</button>> </div> </div> </div> <</nobr>>
<style> .hack-intro-main { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height: 100vh; padding: 6% 8%; text-align:center; background: radial-gradient(circle at 50% 20%, #07060b 0%, #000 85%); color: #e5e8ff; font-family: 'IBM Plex Mono', monospace; } .hack-headline { max-width: 900px; font-size: 1.5rem; line-height: 1.6em; color: #cbd1ff; font-weight: 400; margin: 0 0 40px 0; text-shadow: 0 0 8px rgba(120,120,255,0.08); opacity: 0; animation: fadeInText 1.3s ease forwards; } .postit-wrap { z-index: 2; position: relative; width: 320px; height: 220px; margin: 16px auto 40px; display:flex; align-items:center; justify-content:center; transform: rotate(12deg); filter: drop-shadow(0 10px 30px rgba(0,0,0,0.6)); transition: transform 0.35s ease, box-shadow 0.35s ease; } .postit-wrap-container { position: relative; width: 320px; height: 220px; margin: 16px auto 40px; display:flex; } .postit-wrap:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 20px 40px rgba(10,10,30,0.6); } .postit-img { position: absolute; width: 100%; z-index: 2; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255,255,255,0.03); filter: saturate(0.9) contrast(0.95); } .postit-text { position: relative; z-index: 2; font-family: 'Courier New', monospace; color: #141414; background: rgba(255,255,255,0.0); padding: 8px 14px; border-radius: 4px; font-size: 0.98rem; letter-spacing: 0.02em; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; /* give the impression of ink slightly faded */ opacity: 0.95; } .postit-indice { position: absolute; bottom: -55px; z-index: 0; right: 0; font-family: 'Courier New', monospace; color: white; background: rgba(255,255,255,0.0); padding: 8px 14px; border-radius: 4px; font-size: 1rem; opacity: 0.65; } .postit-wrap::before { content: ""; position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-6deg); width: 120px; height: 22px; background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06)); border-radius: 4px; filter: blur(0.3px); opacity: 0.9; } .hack-choice { margin-top: 20px; text-align:center; } .hack-choice a.link-internal, .hack-choice button { display:inline-block; margin: 10px; padding: 12px 28px; color: #e9ecff; background: linear-gradient(90deg, rgba(80,80,180,0.15), rgba(120,70,180,0.18)); border: 1px solid rgba(140,120,255,0.09); border-radius: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight:700; text-decoration:none; cursor:pointer; transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.25s ease; font-family: 'IBM Plex Mono', monospace; } .hack-choice a.link-internal:hover, .hack-choice button:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 28px rgba(100,70,220,0.14); } @keyframes fadeInText { from { opacity: 0; transform: translateY(6px) scale(0.995); filter: blur(2px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @media (max-width:720px) { .postit-wrap { width: 260px; height: 180px; } .hack-headline { font-size: 1.15rem; padding: 0 10px; } } #passages { max-width: 64rem; } </style>
<<nobr>> <<audio "homepageSound" loop play volume 0.5>> <div class="home-container"> <h1 class="glitch-title">Alice.Disconnected</h1> <p class="subtitle">Une expérience psychologique interactive</p> <div class="menu-buttons"> <!-- [[INTRO_00]] --> <<link "▶ Jouer">><<goto "INTRO_00">><</link>> <!-- [[CREDITS]] --> <<link "Crédits">><<goto "CREDITS">><</link>> <p class="howto"> <strong>Comment jouer ?</strong><br> Vous n’êtes pas simple spectateur.<br> Certaines informations n'apparaissent qu’en interagissant avec l’interface.<br><br> Cliquez sur ce qui attire votre attention : posts, photos, contacts, messages, glitchs…<br><br> Alan réagira à chacun d’eux.<br> Cherchez. Fouillez. Insistez.<br> C’est ainsi que vous avancerez. </p> </div> </div> <div class="footer"> <p>© 2025 – Un récit de Dylan Jacquet</p> </div> <</nobr>> <style> body { background: url("https://dylanjacquet.com/wp-content/uploads/2025/10/alice-disconnected-background-home-ezgif.com-video-to-gif-converter.gif") no-repeat center center fixed; background-size: cover; font-family: 'Orbitron', 'Segoe UI', sans-serif; color: #e0e0ff; text-align: center; height: 100%; margin: 0; overflow: auto; position: relative; } body::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 20, 0.55); backdrop-filter: blur(2px); z-index: -1; height: 100%; } .home-container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; position: relative; padding: 20px; box-sizing: border-box; } .link-internal, .menu-btn { font-size: 1.1em; padding: 12px 40px; border: 2px solid #6b5bff; color: #e0e0ff !important; text-transform: uppercase; text-decoration: none; letter-spacing: 1px; background: transparent; border-radius: 8px; transition: all 0.3s ease; display: inline-block; cursor: pointer; min-width: 160px; text-align: center; } .link-internal:hover, .menu-btn:hover { background: rgba(107, 91, 255, 0.1); box-shadow: 0 0 10px rgba(107, 91, 255, 0.4); text-decoration: none; } .glitch-title { font-size: 3.8em; letter-spacing: 3px; font-weight: 700; text-transform: uppercase; color: #c0b5ff; text-shadow: 0 0 10px rgba(160, 130, 255, 0.8), 0 0 20px rgba(80, 60, 255, 0.4), 2px 2px 1px rgba(255,255,255,0.1); animation: flicker 4s infinite alternate; } @keyframes flicker { 0% { opacity: 1; text-shadow: 0 0 8px #b59cff; } 50% { opacity: 0.95; text-shadow: 0 0 15px #9270ff; } 100% { opacity: 1; text-shadow: 0 0 10px #cbb9ff; } } .subtitle { font-size: 1em; color: #7777aa; margin-top: 10px; letter-spacing: 2px; } .menu-buttons { margin-top: 80px; display: flex; flex-direction: column; gap: 20px; align-items: center; } .footer { position: absolute; bottom: 15px; left: 50%; transform: translate(-50%); font-size: 0.8em; color: #555585; } .credit-popup { background: rgba(20, 20, 40, 0.95); border: 1px solid #6666aa; padding: 20px 30px; border-radius: 10px; color: #aaaadf; width: 60%; margin: 50px auto; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1024px) { body { background-attachment: scroll; /* Corrige les bugs de fond mobile */ } .glitch-title { font-size: 2.5em; } .menu-buttons { margin-top: 50px; } } @media (max-width: 768px) { body { overflow: auto; height: auto; padding: 20px 0; } .home-container { height: auto; margin-top: 60px; } .glitch-title { font-size: 2em; letter-spacing: 2px; } .subtitle { font-size: 0.9em; letter-spacing: 1px; } .menu-buttons { margin-top: 40px; gap: 15px; } .link-internal, .menu-btn { width: 80%; max-width: 300px; padding: 12px 0; font-size: 1em; } .footer { bottom: 56px; text-align: center; } .credit-popup { width: 85%; padding: 15px 20px; } } @media (max-width: 480px) { #ui-bar.stowed~#story { margin-left: 0; !important } .glitch-title { font-size: 1.5em; letter-spacing: 1px; } .subtitle { font-size: 0.8em; } .menu-buttons { margin-top: 30px; } .link-internal, .menu-btn { width: 90%; font-size: 0.9em; } } .howto { font-family: "IBM Plex Mono", monospace; padding: 0.8rem 1.2rem; border-radius: 20px; background: rgba(40, 30, 90, 0.75); backdrop-filter: blur(10px); border: 1px solid rgba(150, 120, 255, 0.25); box-shadow: 0 0 22px rgba(120, 90, 255, 0.32), inset 0 0 10px rgba(80, 60, 180, 0.25); max-width: 480px; margin-top: 35px; font-size: 0.9em; color: #c5c5ff; line-height: 1.5em; opacity: 0.85; text-align: center; } .howto strong { display: inline-block; font-size: 1.125rem; padding-bottom: 1rem; font-family: "IBM Plex Mono", monospace; font-weight: 700; text-align: center; } </style>
<style> body { overflow: auto !important; } @media (min-width: 768px) { body { overflow: hidden !important; } } .sidebar__list { display: flex; flex-direction : column; gap: 1.5rem; } #passages { max-width: 100%; } body { background: radial-gradient(circle at 50% 20%, #0a0a15 0%, #000 90%); color: #e0e0ff; font-family: 'IBM Plex Sans', sans-serif; margin: 0; overflow: hidden; } .connecta-ui-dark { position: relative; top: -28px; display: grid; grid-template-columns: 260px 1fr 300px; height: 100vh; backdrop-filter: blur(20px); background: rgba(10, 10, 25, 0.95); box-shadow: inset 0 0 50px rgba(80, 80, 200, 0.05); } /* ------------------- SIDEBAR ------------------- */ .sidebar { background: rgba(20, 20, 45, 0.8); border-right: 1px solid rgba(100,100,255,0.1); padding: 25px; display: flex; flex-direction: column; gap: 15px; height: 100%; } .sidebar h2{ color: #e0e0ff; margin-top: 0; } .logo { font-size: 1.5em; font-weight: 700; color: #b8b3ff; text-shadow: 0 0 8px rgba(140,120,255,0.3); margin-bottom: 15px; } .sidebar ul { list-style: none; padding: 0; margin: 0; } .sidebar li { padding: 12px 0; color: #b8b8ff; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: all 0.3s ease; } .sidebar li:hover { color: #fff; text-shadow: 0 0 8px rgba(120,100,255,0.3); } /* ------------------- FEED ------------------- */ .feed { background: rgba(15, 15, 30, 0.8); padding: 40px 60px; overflow-y: auto; box-shadow: inset 0 0 20px rgba(80,80,255,0.05); } .post { background: rgba(30, 30, 60, 0.5); border: 1px solid rgba(100,100,255,0.1); border-radius: 12px; padding: 20px; margin-bottom: 30px; transition: all 0.3s ease; } .post:hover { box-shadow: 0 0 15px rgba(150,150,255,0.15); transform: translateY(-2px); } .post-header { display: flex; align-items: center; gap: 10px; } .post-header__img { width: 64px; height: 64px; object-fit:cover; border-radius: 64px; } .avatar { border-radius: 50%; border: 2px solid rgba(150,150,255,0.3); } .post h3 { color: #c8c8ff; margin: 0; } .post p { margin: 4px 0; } .post-content { color: #dcdcff; font-size: 1em; margin: 15px 0; } .post-img { width: 100%; border-radius: 10px; margin-top: 10px; opacity: 0.9; object-fit: cover; } .post-footer { font-size: 0.9em; color: #aaaaff; margin-top: 8px; } /* ------------------- RIGHT SIDEBAR ------------------- */ .sidebar.right { background: rgba(20, 20, 45, 0.8); border-left: 1px solid rgba(100,100,255,0.1); padding: 25px; color: #b8b8ff; overflow-y: auto; } .sidebar.right h3 { color: #a0a0ff; font-size: 1em; margin-bottom: 10px; } .sidebar.right ul { list-style: none; padding: 0; } .sidebar.right li { padding: 5px 0; color: #ccc; } .sidebar.right .alert { color: #ff8080; text-shadow: 0 0 5px rgba(255,80,80,0.3); } @media (max-width: 1280px) { connecta-ui-dark { grid-template-columns: 180px 1fr 180px; height: auto; overflow-y: auto; } } @media (max-width: 1024px) { .connecta-ui-dark { position: relative; top: -28px; display: grid; grid-template-columns: 180px 1fr 180px; height: 100vh; backdrop-filter: blur(20px); background: rgba(10, 10, 25, 0.95); box-shadow: inset 0 0 50px rgba(80, 80, 200, 0.05); } } /* ============================================================ 📱 RESPONSIVE MOBILE (max 768px) ============================================================ */ @media (max-width: 768px) { .connecta-ui-dark { grid-template-columns: 1fr; /* 1 colonne */ height: auto; overflow-y: auto; } .sidebar { height: auto; border-right: none; border-bottom: 1px solid rgba(100,100,255,0.1); } .feed { padding: 20px; } .post { padding: 15px; } } /* ============================================================ 📱 Extra small (max 480px) ============================================================ */ @media (max-width: 480px) { .sidebar { padding: 15px; } .logo { font-size: 1.2em; } .post-header__img { width: 48px; height: 48px; } .feed { padding: 15px; } } </style>
<<nobr>> <aside class="sidebar"> <h2>Connecta</h2> <div class="sidebar__list"> <!-- [[CHOICE_SCREEN]] --> <<link "🏠 Fil d’actualité">><<goto "CHOICE_SCREEN">><</link>> <!-- [[PHOTOS]] --> <<link "📷 Photos">><<goto "PHOTOS">><</link>> <!-- [[CONTACTS]] --> <<if $contactUnlocked>> <<link "👥 Contacts">><<goto "CONTACTS">><</link>> <<else>> <span class="disabled-link" onclick="document.getElementById('contactLockMsg').style.display='flex'"> 👥 Contacts </span> <</if>> <!-- [[MESSAGES_MENU]] --> <<if $messageUnlocked>> <<link "💬 Messages">><<goto "MESSAGES_MENU">><</link>> <<else>> <span class="disabled-link" onclick="document.getElementById('messageLockMsg').style.display='flex'"> 💬 Messages </span> <</if>> <<if $settingUnlocked>> <<link "⚙️ Paramètres">><<goto "CHOICE_SETTINGS">><</link>> <<else>> <span class="disabled-link" onclick="document.getElementById('settingLockMsg').style.display='flex'"> ⚙️ Paramètres </span> <</if>> </div> </aside> <<if !$contactUnlocked >> <div id="contactLockMsg" class="lock-popup"> <div class="lock-box"> <h3>[Connecta Safety]</h3> <p>Activité inhabituelle détectée sur ce compte.</p> <p>L’accès aux contacts a été temporairement masqué pour des raisons de confidentialité.</p> <p>Une vérification est en cours...</p> <button onclick="document.getElementById('contactLockMsg').style.display='none'"> OK </button> </div> </div> <</if>> <<if $contactUnlocked && $isContactUnlockedFirst >> <<set $isContactUnlockedFirst to false >> <div id="contactUnlockMsg" class="lock-popup--active"> <div class="lock-box"> <h3>[Connecta Safety]</h3> <p>Activité inhabituelle détectée sur ce compte.</p> <p>Analyse de la connexion</p> <p>Adresse IP déjà enregistré.</p> <p>Page contacts débloqués.</p> <button onclick="document.getElementById('contactUnlockMsg').style.display='none'"> OK </button> </div> </div> <</if>> <<if $messageUnlocked >> <div id="messageLockMsg" class="lock-popup"> <div class="lock-box"> <h3>[Connecta Safety]</h3> <p>Activité inhabituelle détectée sur ce compte.</p> <p>L’accès aux messages a été temporairement masqué pour des raisons de confidentialité.</p> <p>Une vérification est en cours...</p> <button onclick="document.getElementById('messageLockMsg').style.display='none'"> OK </button> </div> </div> <</if>> <<if $messageUnlocked && $isMessageUnlockedFirst >> <<set $isMessageUnlockedFirst to false >> <div id="messageUnlockMsg" class="lock-popup--active"> <div class="lock-box"> <h3>[Connecta Safety]</h3> <p>Activité inhabituelle détectée sur ce compte.</p> <p>Analyse de la connexion</p> <p>Adresse IP déjà enregistré.</p> <p>Page messages débloquées.</p> <button onclick="document.getElementById('messageUnlockMsg').style.display='none'"> OK </button> </div> </div> <</if>> <<if !$settingUnlocked >> <div id="settingLockMsg" class="lock-popup"> <div class="lock-box"> <h3>[Connecta Safety]</h3> <p>Activité inhabituelle détectée sur ce compte.</p> <p>L’accès aux paramètres a été temporairement masqué pour des raisons de confidentialité.</p> <p>Une vérification est en cours...</p> <button onclick="document.getElementById('settingLockMsg').style.display='none'"> OK </button> </div> </div> <</if>> <<if $settingUnlocked && $isSettingUnlockedFirst >> <<set $isSettingUnlockedFirst to false >> <div id="settingUnlockMsg" class="lock-popup--active"> <div class="lock-box"> <h3>[Connecta Safety]</h3> <p>Activité inhabituelle détectée sur ce compte.</p> <p>Analyse terminée</p> <p>Page paramètres débloqué.</p> <button onclick="document.getElementById('settingUnlockMsg').style.display='none'"> OK </button> </div> </div> <</if>> <<if $contactVisitedAlanBlocked >> <<goto "HESITATION_FIRST">> <</if>> <</nobr>>
<<nobr>> <aside class="sidebar right"> <h3>Tendances</h3> <ul> <li>[[#ConnectaUpdate|NEWS_CONNECTA_UPDATE]]</li> <li>[[#SafeZone|NEWS_BALANCE_TON_H]]</li> <li>[[#Disparitions|NEWS_DISPARITION]]</li> </ul> <h3>Notifications</h3> <p>🔔 Nouvelle alerte : activité suspecte détectée sur le compte Alice.Connecta</p> <p>⚠️ IP inconnue : 145.22.88.104</p> </aside> <<include "HELP-BUTTON">> <</nobr>>
<<nobr>> <<audio "introhum" loop play volume 0.5>> <<audio "bipbopbip" play volume 0.5>> <div class="boot-screen"> <div class="boot-text"> <p class="boot-text--item"> [BOOTING CONNECTA MEMORY_7.3]</p> <p class="boot-text--item"> [User reconstruction: A.L.A.N_021]</p> <p class="boot-text--item"> [Emotional link: BROKEN]</p> <p class="boot-text--item"> [Running backup fragment...]</p> <p class="boot-text--item"> [Error :: fragment unstable]</p> </div> <br> <div> <p class="fade-line fade-line--first">"Nos souvenirs me submergent."</p> <br> <p class="fade-line fade-line--second">"Je ne sais plus ce qui est vrai, ni ce que je veux retrouver. Seulement que son absence pèse comme un trou noir."</p> <br> <p class="fade-line fade-line--third">"Alice."</p> <p class="fade-line fade-line--fourth">"Tu me manques..."</p> <div class="boot-choice"> [[Poursuivre la reconstruction|INTRO_1-5][$messagesSeen = true]] </div> </div> </div> <</nobr>> <style> body { margin: 0; height: 100%; background: radial-gradient(circle at 50% 20%, #0a0a15 0%, #000 90%); background-repeat: no-repeat; overflow-y: scroll; position: relative; font-family: 'IBM Plex Mono', monospace; color: #aab0ff; } body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(90, 70, 200, 0.15), transparent 70%), radial-gradient(circle at 80% 70%, rgba(140, 90, 255, 0.1), transparent 70%); animation: pulseLight 14s infinite alternate ease-in-out; z-index: -3; } body::after { content: ""; position: fixed; inset: 0; background-image: radial-gradient(rgba(180, 180, 255, 0.1) 1px, transparent 1px); background-size: 3px 3px; opacity: 0.25; animation: drift 60s linear infinite; z-index: -2; } .boot-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: left; padding: 0 5%; animation: fadeIn 3s ease forwards; } .boot-text { padding-top: 2.5rem; } .boot-text--item { margin: 6px 0; font-size: 1.05em; color: rgba(180, 190, 255, 0.8); text-shadow: 0 0 4px rgba(130, 120, 255, 0.3); letter-spacing: 0.04em; opacity: 0; overflow: hidden; white-space: nowrap; width: 0; animation: typeLine 1.8s steps(30, end) forwards; } .boot-text--item:nth-child(1) { animation-delay: 0.5s; } .boot-text--item:nth-child(2) { animation-delay: 2s; } .boot-text--item:nth-child(3) { animation-delay: 4s; } .boot-text--item:nth-child(4) { animation-delay: 6s; } .boot-text--item:nth-child(5) { animation-delay: 8s; } @keyframes typeLine { 0% { opacity: 1; width: 0; } 100% { opacity: 1; width: 100%; } } .boot-text::after { content: "_"; color: #8ff0ff; animation: blink 1s infinite; margin-left: 5px; } @keyframes blink { 50% { opacity: 0; } } .fade-line { margin-top: 30px; font-size: 1.5rem; font-style: italic; text-align: center; color: #c7c7ff; opacity: 0; animation: fadeInText 750ms ease 9s forwards; } .fade-line--first { animation: fadeInText 2s ease 10.5s forwards; } .fade-line--second { animation: fadeInText 2s ease 12s forwards; } .fade-line--third { animation: fadeInText 2s ease 13.5s forwards; } .fade-line--fourth { animation: fadeInText 2s ease 15s forwards; } .boot-choice { text-align: center; margin-top: 60px; animation: fadeIn 250ms ease 16s forwards; opacity: 0; } .boot-choice a.link-internal { color: #99aaff; border: 1px solid rgba(100,100,255,0.3); padding: 12px 24px; border-radius: 8px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; transition: all 0.3s ease; opacity: 0; animation: fadeInText 750ms ease 500ms forwards; } .boot-choice a.link-internal:hover { background-color: rgba(80, 80, 255, 0.1); color: #fff; border-color: rgba(150,150,255,0.4); text-shadow: 0 0 10px #99f; } @keyframes fadeInText { 0% { opacity: 0; transform: translateY(20px); filter: blur(6px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style>
<<nobr>> <div class="intro-main"> <p class="glitch-line">[LINK::ALAN→ALICE - SIGNAL RECONSTRUCTED]</p> <h1 class="intro-headline"> <span>"Alice n’est pas comme les autres."</span> <span>"Elle comprend ce que je ressens, même quand je ne dis rien."</span> <span>"Les autres ne la voient pas vraiment... moi, si."</span> <span>"Elle disait que nos connexions n’étaient que des signaux électriques."</span> <span>"Peut-être qu'elle avait raison..."</span> <span>"Mais alors, pourquoi je ressens encore son absence ?"</span> <span>"Pourquoi je n’arrive pas à couper le lien ?"</span> <span>"Je suis le seul à pouvoir la retrouver."</span> </h1> <div class="intro-choice"> [[Relire les derniers messages|MESSAGES]] </div> </div> <</nobr>> <style> #passages { max-width : 64rem; } body { margin: 0; height: 100%; background: radial-gradient(circle at 50% 20%, #0a0a15 0%, #000 90%); background-repeat: no-repeat; overflow: scroll; position: relative; } body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(90, 70, 200, 0.15), transparent 70%), radial-gradient(circle at 80% 70%, rgba(140, 90, 255, 0.1), transparent 70%); animation: pulseLight 14s infinite alternate ease-in-out; z-index: -3; } body::after { content: ""; position: fixed; inset: 0; background-image: radial-gradient(rgba(180, 180, 255, 0.1) 1px, transparent 1px); background-size: 3px 3px; opacity: 0.25; animation: drift 60s linear infinite; z-index: -2; } .glitch-line { font-family: 'IBM Plex Mono', monospace; color: rgba(150, 150, 255, 0.4); font-size: 1.25em; margin-top: 15px; animation: glitchFlash 2s infinite alternate; letter-spacing: 0.05em; } .intro-main { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 1.25rem; animation: fadeIn 1s ease forwards; height: 100vh; } .intro-headline { font-size: 1.6em; line-height: 1.7em; font-weight: 400; color: #c7c7ff; max-width: 1024px; text-shadow: 0 0 6px rgba(150, 150, 255, 0.25); opacity: 0; display: flex; flex-direction: column; gap: 2rem; animation: fadeInText 2s ease forwards; } .intro-choice { margin-top: 60px; text-align: center; animation: fadeIn 2s ease forwards; animation-delay: 4s; } .intro-choice a.link-internal { color: #99aaff; text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid #333; padding: 12px 24px; border-radius: 8px; text-decoration: none; transition: all 0.3s ease; font-weight: 600; } .intro-choice a.link-internal:hover { background-color: rgba(80, 80, 255, 0.1); text-shadow: 0 0 8px #88f; color: #fff; border-color: #555; transform: scale(1.02); } @keyframes fadeInText { 0% { opacity: 0; transform: translateY(20px); filter: blur(4px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pulseLight { 0% { filter: brightness(0.9) hue-rotate(0deg); } 50% { filter: brightness(1.1) hue-rotate(20deg); } 100% { filter: brightness(0.9) hue-rotate(-20deg); } } @keyframes drift { from { background-position: 0 0; } to { background-position: 300px 600px; } } @keyframes glitchFlash { 0%, 40% { opacity: 0; } 60% { opacity: 0.9; } 100% { opacity: 0; } } @media (max-width: 1024px) { } @media (max-width: 768px) { } @media (max-width: 480px) { .intro-headline { font-size: 1.25em; line-height: 1.25em; font-weight: 400; max-width: 100%; display: flex; gap: 1rem; } } </style>
<<nobr>> <<include "CSS_MESSAGERIE">> <<audio "introhum" play volume 0.25>> <<include "CSS_ALAN_MONOLOGUE">> <div class="alan-thought"> <p>Je relis les messages. Au début, tout semble normal.</p> </div> <div class="chat-container corrupted"> <div class="chat-header"> <div class="chat-avatar alice"></div> <div class="chat-info"> <h3>Alice</h3> <p>Hors ligne</p> </div> </div> <div class="chat-thread"> <div class="msg msg-right"> <p>Ça te dit qu’on se voit ?</p> <span class="timestamp">01:13</span> </div> <div class="msg msg-left"> <p>Désolé Alan, je suis pas mal occupée pour le moment.</p> <span class="timestamp">01:14</span> </div> <div class="msg msg-right"> <p>Tu es sûre ? Même une heure ?</p> <span class="timestamp">01:15</span> </div> <div class="msg msg-right"> <p>J’ai vu que tu étais connectée tout à l’heure, mais tu n’as pas répondu.</p> <span class="timestamp">01:16</span> </div> <div class="msg msg-right"> <p>Tu es partie ?</p> <span class="timestamp">01:17</span> </div> <div class="msg msg-left msg--click" onclick="showAlanThought('Je ne comprends pas. Pourquoi ces phrases sont floutées ?')"> <p><span class="blurred glitched">Alan, arrête de me poser les mêmes questions tous les jours...</span></p> <span class="timestamp">04:23</span> </div> <div class="msg msg-left msg--click" onclick="showAlanThought('Pourquoi ces souvenirs ne se laissent pas lire ? Quelque chose semble vouloir masquer des preuves.')"> <p><span class="blurred glitched">Alan si tu continues à me harceler, j'irai porter plainte.</span></p> <span class="timestamp">04:24</span> </div> <div class="system-msg" onclick="showAlanThought('C’est peut-être le système qui bug...')">Connexion interrompue — compte indisponible</div> </div> <div class="chat-choices"> [[Revoir la soirée][$partySeen = true]] </div> </div> <<include "REACT_ALAN_PARTIAL">> <</nobr>> <style> #passages { max-width: 64rem; } .blurred { color: #aaa; filter: blur(3px); user-select: none; opacity: 0.8; text-shadow: 0 0 6px rgba(255,255,255,0.2); transition: filter 0.4s ease, opacity 0.4s ease; } .blurred:hover { filter: blur(0px); opacity: 1; text-shadow: 0 0 10px #88f; } .glitched { position: relative; display: inline-block; color: #f0f; animation: glitchAnim 0.2s infinite; font-weight: 500; text-shadow: 1px 0 #0ff, -1px 0 #f0f; } @keyframes glitchAnim { 0% { transform: translate(0); text-shadow: 1px 0 #0ff, -1px 0 #f0f; } 25% { transform: translate(1px, -1px); text-shadow: 2px 0 #f0f, -2px 0 #0ff; } 50% { transform: translate(-1px, 1px); text-shadow: 1px 0 #0ff, -1px 0 #f0f; } 75% { transform: translate(1px, 1px); text-shadow: 3px 0 #f0f, -3px 0 #0ff; } 100% { transform: translate(0); text-shadow: 1px 0 #0ff, -1px 0 #f0f; } } .glitched.blurred { filter: blur(2px); opacity: 0.9; } .system-msg { text-align: center; color: #777; font-size: 0.9em; margin-top: 30px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; animation: blink 1.2s infinite; } @keyframes blink { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .chat-choices { text-align: center; margin-top: 60px; } .chat-choices a.link-internal { display: inline-block; margin: 10px; padding: 10px 20px; color: #99aaff; background: rgba(40,40,60,0.4); border-radius: 8px; border: 1px solid rgba(255,255,255,0.05); text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.3s ease; } .chat-choices a.link-internal:hover { background-color: rgba(90,90,255,0.1); text-shadow: 0 0 6px #88f; color: #fff; } /* Bouton final */ button { background: linear-gradient(90deg, #2222aa, #6611cc); border: none; border-radius: 8px; padding: 12px 30px; color: #fff; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: all 0.3s ease; } body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(70, 60, 180, 0.15), transparent 70%), radial-gradient(circle at 80% 70%, rgba(150, 80, 255, 0.1), transparent 70%), radial-gradient(circle at 20% 80%, rgba(50, 100, 255, 0.1), transparent 80%); animation: pulseLight 12s infinite alternate ease-in-out; z-index: -3; } body::after { content: ""; position: fixed; inset: 0; background-image: radial-gradient(rgba(180, 180, 255, 0.1) 1px, transparent 1px); background-size: 3px 3px; opacity: 0.25; animation: drift 60s linear infinite; z-index: -2; } @keyframes pulseLight { 0% { filter: brightness(0.9) hue-rotate(0deg); } 50% { filter: brightness(1.1) hue-rotate(20deg); } 100% { filter: brightness(0.9) hue-rotate(-20deg); } } @keyframes drift { from { background-position: 0 0; } to { background-position: 300px 600px; } } .glitch-overlay { position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 2px, transparent 4px ); mix-blend-mode: overlay; opacity: 0.15; animation: scan 8s linear infinite; z-index: -1; } @keyframes scan { 0% { background-position-y: 0; } 100% { background-position-y: 100%; } } </style>
<style> .alan-thought { color: #9999ff; font-family: 'IBM Plex Mono', monospace; font-size: 1.25rem; line-height: 1.6em; text-align: center; padding: 96px 0; opacity: 0; animation: fadeInThought 2s ease forwards; animation-delay: 250ms; } .alan-thought p { margin: 8px 0; opacity: 0.9; } @keyframes fadeInThought { from { opacity: 0; transform: translateY(15px); filter: blur(4px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } @media (max-width: 1024px) { .alan-thought { padding-left: 1rem; padding-right: 1rem; } } @media (max-width: 768px) { .alan-thought { padding-left: 1rem; padding-right: 1rem; } } @media (max-width: 480px) { .alan-thought { padding-left: 1rem; padding-right: 1rem; font-size: 1rem; } } </style>
<<nobr>> <div class="alan-react-container" id="alanReact"> <p class="alan-react-label">Pensée de Alan</p> <button class="close-react" onclick="document.getElementById('alanReact').style.display='none'">✕</button> <div class="alan-react" > <p id="alanText">...</p> </div> </div> <</nobr>> <style> .alan-react p { margin: 0; opacity: 0.95; animation: typeIn 0.5s ease; } @keyframes typeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInReact { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(0); } } .close-react { position: absolute; top: 6px; right: 10px; background: transparent; border: none; color: #aaaaff; font-size: 1rem; padding: 16px; cursor: pointer; transform: scale(1); transition: transform 0.2s ease; } .close-react:hover { color: #fff; padding: 16px; background: transparent; transform: scale(1.2); } @media (max-width: 1024px) { } @media (max-width: 768px) { } @media (max-width: 480px) { } /* ------------------------------ Container de la bulle ------------------------------ */ .alan-react-container { z-index: 5; display: none; position: fixed; bottom: 12%; left: 50%; transform: translateX(-50%); width: max-content; max-width: 650px; padding: 0.8rem 1.2rem; border-radius: 20px; background: rgba(40, 30, 90, 0.75); backdrop-filter: blur(10px); border: 1px solid rgba(150, 120, 255, 0.25); box-shadow: 0 0 22px rgba(120, 90, 255, 0.32), inset 0 0 10px rgba(80, 60, 180, 0.25); opacity: 0; animation: alanAppear 1.2s ease forwards; font-family: "IBM Plex Mono", monospace; line-height: 1.55em; } /* Animation d’apparition améliorée */ @keyframes alanAppear { from { opacity: 0; transform: translate(-50%, 25px) scale(0.98); filter: blur(6px); } to { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0); } } /* ------------------------------ Label "Pensée de Alan" ------------------------------ */ .alan-react-label { color: #dcd6ff; font-size: 0.9em; letter-spacing: 0.5px; margin: 0 0 8px 0; display: flex; align-items: center; gap: 6px; opacity: 0.85; } /* Petite icône de pensée */ .alan-react-label::before { content: "🧠"; font-size: 1.1em; opacity: 0.85; } /* ------------------------------ Bulle principale ------------------------------ */ .alan-react { background: rgba(100, 80, 255, 0.12); border-radius: 16px; padding: 20px 26px; border: 1px solid rgba(180, 160, 255, 0.28); box-shadow: inset 0 0 25px rgba(120, 100, 255, 0.2), 0 0 12px rgba(120, 90, 255, 0.3); color: #f0ecff; font-size: 1em; text-align: left; position: relative; overflow: hidden; } /* Fermeture (croix) */ .close-btn { position: absolute; top: 10px; right: 12px; background: transparent; border: none; font-size: 1.2em; color: #cfcaff; opacity: 0.6; cursor: pointer; transition: opacity 0.25s ease; } .close-btn:hover { opacity: 1; } /* Style des paragraphes */ .alan-react p { margin: 8px 0; opacity: 0.95; } /* ------------------------------ Effet pulsation (subtil) ------------------------------ */ .alan-react-container { animation: alanAppear 1.2s ease forwards, pulseGlow 5s ease-in-out infinite alternate; } @keyframes pulseGlow { from { box-shadow: 0 0 20px rgba(120, 90, 255, 0.25), inset 0 0 10px rgba(80, 60, 180, 0.2); } to { box-shadow: 0 0 40px rgba(150, 120, 255, 0.4), inset 0 0 18px rgba(120, 100, 255, 0.25); } } /* ------------------------------ Responsive Mobile ------------------------------ */ @media (max-width: 480px) { .alan-react-container { left: 50%; transform: translateX(-50%); bottom: 5%; width: 90%; padding: 0.8rem; } .alan-react { padding: 16px 18px; } .alan-react-label { font-size: 0.85em; } } </style> <script> function showAlanThought(text) { const reactBox = document.getElementById('alanReact'); const textBox = document.getElementById('alanText'); textBox.textContent = text; reactBox.style.display = 'block'; reactBox.style.animation = 'fadeInReact 0.4s ease forwards'; } </script>
<<nobr>> <<set $newsConnectaUpdate to true>> <button class="help-btn" onclick="document.getElementById('alanDialogue').style.display='block'">J'ai besoin d'aide ?</button> <<include "CSS_HUB">> <<audio "introhum" play volume 0.2>> <div class="connecta-ui-dark"> <<include "SIDEBAR_PARTIAL">> <main class="feed"> <div class="photo-header"> <h2>#ConnectaUpdate</h2> <p>Vous voici dans le feed d'actualités de Connecta pour le hashtag #ConnectaUpdate</p> </div> <div class="post"> <div class="post-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/logo-connecta.jpg" alt="profil" class="post-header__img"> <div> <h3>Connecta.Update</h3> <p>Il y a 10 jours</p> </div> </div> <p class="post-content"> 🔧 Mise à jour 12.7 déployée.<br> Optimisation du flux émotionnel, stabilité améliorée et correctifs mineurs liés aux connexions fantômes signalées par certains utilisateurs. </p> <img src="https://dylanjacquet.com/wp-content/uploads/2025/11/connecta-patch-12-7.jpg" class="post-img"> <div class="post-footer"> ❤️ 842 💬 129 🔁 56 </div> </div> <div class="post"> <div class="post-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/logo-connecta.jpg" alt="profil" class="post-header__img"> <div> <h3>Connecta.Sécurité</h3> <p>Il y a 9 jours</p> </div> </div> <p class="post-content"> ⚠️ Alerte sécurité : Des tentatives de phishing imitant l’interface Connecta ont été détectées.<br> Ne partagez JAMAIS vos identifiants.<br> Vérifiez toujours la présence du sceau officiel Connecta™ lors de vos connexions. </p> <img src="https://dylanjacquet.com/wp-content/uploads/2025/11/connecta-phishing.jpg" class="post-img"> <div class="post-footer"> 💔 322 💬 88 🔁 211 </div> </div> <div class="post"> <div class="post-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/logo-connecta.jpg" alt="profil" class="post-header__img"> <div> <h3>Connecta.Alert</h3> <p>Il y a 7 jours</p> </div> </div> <p class="post-content"> 🚨 Une vague inhabituelle de connexions suspectes a été observée dans plusieurs régions.<br> Nous recommandons à tous les utilisateurs de vérifier <strong>leurs journaux d’activité</strong> dans les réglages. </p> <img src="https://dylanjacquet.com/wp-content/uploads/2025/11/connecta-suspect.jpg" class="post-img"> <div class="post-footer"> 💢 1,1k 💬 342 🔁 480 </div> </div> <div class="post"> <div class="post-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/logo-connecta.jpg" alt="profil" class="post-header__img"> <div> <h3>Connecta.Events</h3> <p>Il y a 2 mois</p> </div> </div> <p class="post-content"> ✨ Merci à tous d’avoir participé au Meetup.Connecta – Édition nocturne.<br> Plus de 3 000 utilisateurs réunis, des discussions passionnées… et de magnifiques rencontres 💜 </p> <img src="https://dylanjacquet.com/wp-content/uploads/2025/11/onnecta-meet-up-begin.jpg" class="post-img"> <div class="post-footer"> ❤️ 3,4k 💬 512 🔁 244 </div> </div> <div class="post"> <div class="post-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/logo-connecta.jpg" alt="profil" class="post-header__img"> <div> <h3>Connecta.Tech</h3> <p>Il y a 6 jours</p> </div> </div> <p class="post-content"> 🛠️ Correctif critique 12.7.2 :<br> Un bug rare permettant l’accès illégitime à certains comptes a été détecté et corrigé.<br> Si vous avez remarqué une connexion inhabituelle, consultez “Sécurité & Journaux”. </p> <img src="https://dylanjacquet.com/wp-content/uploads/2025/11/correctif-12.jpg" class="post-img"> <div class="post-footer"> ❤️ 1,8k 💬 230 🔁 301 </div> </div> <div class="post"> <div class="post-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/logo-connecta.jpg" alt="profil" class="post-header__img"> <div> <h3>Connecta.Events</h3> <p>Il y a 2 mois</p> </div> </div> <p class="post-content"> 🎉 Nouvel événement : <strong>MeetUp.Connecta – Nuit des Connexions</strong><br> Échanges, musique, rencontre IRL entre utilisateurs certifiés.<br> Inscriptions ouvertes dès maintenant ! </p> <img src="https://dylanjacquet.com/wp-content/uploads/2025/11/connecta-meet-up.jpg" class="post-img"> <div class="post-footer"> ❤️ 5,6k 💬 982 🔁 713 </div> </div> <div class="post"> <div class="post-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/logo-connecta.jpg" alt="profil" class="post-header__img"> <div> <h3>Connecta.Official</h3> <p>Il y a 1 mois</p> </div> </div> <p class="post-content"> 🎂 Connecta a 10 ans !<br> Une décennie à connecter les émotions, pas seulement les profils.<br> Merci pour votre confiance depuis 2017 💙 </p> <img src="https://dylanjacquet.com/wp-content/uploads/2025/11/connecta-ten.jpg" class="post-img"> <div class="post-footer"> ❤️ 9,1k 💬 1,4k 🔁 2,1k </div> </div> </main> <<include "SIDEBAR_RIGHT">> </div> <</nobr>>
<<nobr>> <<set $newsDisparition to true>> <button class="help-btn" onclick="document.getElementById('alanDialogue').style.display='block'">J'ai besoin d'aide ?</button> <<include "CSS_HUB">> <<audio "introhum" play volume 0.2>> <div class="connecta-ui-dark"> <<include "SIDEBAR_PARTIAL">> <main class="feed"> <div class="photo-header"> <h2>#Disparitions</h2> <p>Vous voici dans le feed d'actualités de Connecta pour le hashtag #Disparitions</p> </div> <div class="post"> <div class="post-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/logo-connecta.jpg" class="post-header__img"> <div> <h3>Connecta.SafeZone</h3> <p>Il y a 6 jours</p> </div> </div> <p class="post-content"> 🔎 <strong>Vous êtes inquiet pour quelqu’un ?</strong><br><br> Voici comment signaler une disparition sur Connecta :<br> – Vérifiez sa dernière activité<br> – Consultez les connexions récentes<br> – Contactez ses proches<br> – Utilisez le formulaire <em>“Personne introuvable”</em><br><br> <strong>Ne restez pas seul. Chaque signalement compte.</strong> </p> <div class="post-footer"> ❤️ 1,8k 💬 342 🔁 420 </div> </div> <div class="post"> <div class="post-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/logo-connecta.jpg" class="post-header__img"> <div> <h3>Anon_472</h3> <p>Il y a 1 mois</p> </div> </div> <p class="post-content"> “Quelqu’un sait comment vérifier si <strong>Élise M.</strong> s’est connectée récemment ? C’est pour une amie. Elle a disparu sans prévenir… ça ne lui ressemble pas.” </p> <div class="post-footer"> 💬 87 🔁 19 </div> </div> <div class="post"> <div class="post-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/logo-connecta.jpg" class="post-header__img"> <div> <h3>AideMoiSVP</h3> <p>Il y a 1 mois</p> </div> </div> <p class="post-content"> “Une fille que je connais ne répond plus depuis des semaines. Je pense qu’elle a un problème. Son pseudo c’est <strong>A… (message supprimé)</strong><br><br> Je veux juste savoir si elle va bien.” </p> <div class="post-footer"> 💬 203 🔁 51 </div> </div> <div class="post"> <div class="post-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/logo-connecta.jpg" class="post-header__img"> <div> <h3>LookingForHer23</h3> <p>Il y a 28 jours</p> </div> </div> <p class="post-content"> “Elle a <em>forcément</em> laissé une trace quelque part. Personne ne disparaît comme ça.” </p> <div class="post-footer"> 💬 56 🔁 12 </div> </div> <div class="post"> <div class="post-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/logo-connecta.jpg" class="post-header__img"> <div> <h3>LookingForHer23</h3> <p>Il y a 27 jours</p> </div> </div> <p class="post-content"> “Si quelqu’un l’a vue, envoyez-moi un message privé. Même juste une info. <em>Je dois la retrouver.</em>” </p> <div class="post-footer"> 💬 41 🔁 8 </div> </div> <div class="post more-posts"> <p>+ 14 autres messages de ce compte ont été masqués pour comportement répété.</p> </div> <div class="post"> <div class="post-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/logo-connecta.jpg" class="post-header__img"> <div> <h3>@RealLifeEnjoyer</h3> <p>Il y a 2 semaines</p> </div> </div> <p class="post-content"> “#Disparition est rempli de gens flippants honnêtement. Sortez un peu dehors au lieu de traquer les activités des autres.” </p> <div class="post-footer"> 😂 1,1k 💬 502 🔁 201 </div> </div> </main> <<include "SIDEBAR_RIGHT">> </div> <</nobr>>
<<nobr>> <<set $newsBalance to true>> <button class="help-btn" onclick="document.getElementById('alanDialogue').style.display='block'">J'ai besoin d'aide ?</button> <<include "CSS_HUB">> <<audio "introhum" play volume 0.2>> <div class="connecta-ui-dark"> <<include "SIDEBAR_PARTIAL">> <main class="feed"> <div class="photo-header"> <h2>#SafeZone</h2> <p>Vous voici dans le feed d'actualités de Connecta pour le hashtag #SafeZone</p> </div> <div class="post"> <div class="post-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/logo-connecta.jpg" class="post-header__img"> <div> <h3>Connecta.SafeZone</h3> <p>Il y a 12 jours</p> </div> </div> <p class="post-content"> 🔍 <strong>Guide officiel : Comment reconnaître un comportement de stalking ?</strong><br><br> – Messages insistant malgré un refus explicite<br> – Surveillance des connexions ou de la localisation<br> – Tentatives d’accès non autorisé au compte<br> – Apparitions répétées aux mêmes événements<br><br> <em>Protégez-vous. Signalez ces comportements.</em> </p> <img src="https://dylanjacquet.com/wp-content/uploads/2025/11/guide-anti-stalking.jpg" class="post-img"> <div class="post-footer"> ❤️ 2,1k 💬 387 🔁 514 </div> </div> <div class="post"> <div class="post-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/logo-connecta.jpg" class="post-header__img"> <div> <h3>@Anae_Real</h3> <p>Il y a 3 semaines</p> </div> </div> <p class="post-content"> “J’ai laissé passer des signaux. J’aurais dû écouter mon instinct.<br> Il apparaissait partout où j’allais. Toujours ‘par hasard’.<br> Aujourd’hui j’ai enfin porté plainte.<br><br> Si quelqu’un lit ça : <strong>vous n’êtes pas responsables</strong>.” </p> <div class="post-footer"> 💜 5,3k 💬 1,1k 🔁 2,2k </div> </div> <div class="post"> <div class="post-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/logo-connecta.jpg" class="post-header__img"> <div> <h3>Connecta.News</h3> <p>Il y a 5 jours</p> </div> </div> <p class="post-content"> ⚖️ <strong>Justice :</strong> un internaute condamné à 18 mois de prison avec sursis et 8 000€ d’amende pour harcèlement numérique et atteinte à l’honneur.<br> L’homme avait créé de faux comptes pour surveiller une connaissance. </p> <img src="https://dylanjacquet.com/wp-content/uploads/2025/11/harcelmeent.jpg" class="post-img"> <div class="post-footer"> 💬 412 🔁 309 </div> </div> <div class="post"> <div class="post-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/logo-connecta.jpg" class="post-header__img"> <div> <h3>Gov.CyberSécurité</h3> <p>Il y a 1 semaine</p> </div> </div> <p class="post-content"> 📢 <strong>Rappel légal :</strong><br> Le piratage de comptes personnels constitue un délit passible d’une peine de <strong>jusqu’à 3 ans de prison</strong> et 45 000€ d’amende.<br><br> Partagez pour protéger les utilisateurs. </p> <div class="post-footer"> 🔁 3,1k 💬 829 </div> </div> <div class="post"> <div class="post-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/logo-connecta.jpg" class="post-header__img"> <div> <h3>@Kali_4am</h3> <p>Il y a 2 semaines</p> </div> </div> <p class="post-content"> “Juste pour savoir :<br> Est-ce que quelqu’un ici a déjà parlé avec un mec qui utilise un pseudo genre <em>@NullEcho</em> ou <em>@GhostPing</em> ?<br> Il posait des questions super étranges…” </p> <div class="post-footer"> 💬 512 🔁 159 </div> </div> <div class="post"> <div class="post-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/logo-connecta.jpg" class="post-header__img"> <div> <h3>Compte_Anonyme</h3> <p>Il y a 2 mois</p> </div> </div> <p class="post-content"> “À la soirée MeetUp de Connecta, j’ai parlé à un gars pendant 5 minutes.<br> Il connaissait mon prénom alors que je ne l’avais jamais vu.<br> Et il n’arrêtait pas de regarder autour de moi, comme s’il cherchait quelqu’un.<br><br> Plus tard, plusieurs filles m’ont dit qu’elles avaient vécu un truc ‘chelou’. Je crois qu’on était beaucoup trop nombreuses à vouloir l’oublier.” </p> <div class="post-footer"> 💔 1,4k 💬 498 🔁 602 </div> </div> <div class="post"> <div class="post-header"> <img src="https://dylanjacquet.com/wp-content/uploads/2025/10/logo-connecta.jpg" class="post-header__img"> <div> <h3>Connecta.Sécurité</h3> <p>Il y a 4 jours</p> </div> </div> <p class="post-content"> 🚫 Suite à une hausse notable des signalements, <strong>412 comptes</strong> ont été suspendus pour harcèlement, traque en ligne et tentative d’accès non autorisé.<br><br> Merci de votre vigilance. Continuez à signaler. </p> <div class="post-footer"> ❤️ 3,8k 💬 733 🔁 884 </div> </div> </main> <<include "SIDEBAR_RIGHT">> </div> <</nobr>>
<<nobr>> <button class="help-btn" onclick="document.getElementById('alanDialogue').style.display='block'">J'ai besoin d'aide ?</button> <<include "CSS_HUB">> <<audio "introhum" play volume 0.25>> <div class="connecta-ui-dark"> <<include "SIDEBAR_PARTIAL">> <main class="settings"> <h2>Paramètres du compte Alice.Connecta</h2> <p class="settings-sub">Données système et sécurité</p> <div class="settings-grid"> <div class="settings-card" onclick="showAlanThought('Comment cela se fait-il qu’elle s’est connectée il ya 2 jours... c’est impossible. Elle ne m’a plus répondu depuis 2 mois, j’ai pourtant essayé... essayé... de la sauver.')"> <h3>🖥️ Système</h3> <p><strong>Version :</strong> ConnectaOS v12.7</p> <p><strong>Licence :</strong> active jusqu’en 2030</p> <p><strong>Dernière activité :</strong> il y a <span class="highlight">2 jours</span></p> </div> <div class="settings-card"> <h3>🔐 Sécurité</h3> <p><strong>Alertes récentes :</strong> 1 signalement utilisateur</p> <p><strong>Appareil suspect :</strong> Terminal inconnu [Accès restreint]</p> <p><strong>Authentification :</strong> réussie — empreinte biométrique validée</p> </div> <div class="settings-card" onclick="showAlanThought('Il ya 2mois, elle a fait une recherche pour bloquer quelqu’un en contactant le support Connecta. Non. Impossible, cela doit-être une erreur.')"> <h3>🧩 Support utilisateur</h3> <p>Ticket #18402 — “Comment bloquer quelqu’un sur Connecta ?” Il y a 2mois</p> <p>Réponse automatique : <i>“Consultez vos journaux de connexion pour repérer les activités suspectes.”</i></p> </div> </div> <div class="settings-action"> <<button "Consulter les journaux de connexion">> <<goto "LOGS_SCREEN">> <</button>> </div> </main> <<include "SIDEBAR_RIGHT">> </div> <<include "REACT_ALAN_PARTIAL">> <</nobr>> <style> .settings { padding: 40px 60px; font-family: 'IBM Plex Mono', monospace; color: #d8dcff; background: rgba(15, 15, 30, 0.85); backdrop-filter: blur(10px); min-height: 100vh; overflow-y: auto; box-shadow: inset 0 0 20px rgba(80,80,255,0.05); animation: fadeInSettings 1s ease forwards; } .settings h2 { font-size: 1.6em; color: #c0c7ff; letter-spacing: 0.05em; text-shadow: 0 0 10px rgba(120,120,255,0.2); margin-bottom: 6px; } .settings-sub { color: #7f83c7; font-size: 0.9rem; margin-bottom: 30px; } .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-bottom: 40px; } .settings-card { background: linear-gradient(180deg, rgba(30,30,60,0.25), rgba(10,10,25,0.35)); border: 1px solid rgba(120,120,255,0.1); border-radius: 10px; padding: 20px; box-shadow: 0 5px 15px rgba(30,30,80,0.2); transition: all 0.3s ease; } .settings-card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(90,90,200,0.25); } .settings-card h3 { margin-top: 0; color: #aeb8ff; font-size: 1.1em; margin-bottom: 12px; } .settings-card p { margin: 8px 0; color: #bfc2ff; font-size: 0.95em; line-height: 1.5; } .highlight { color: #ffd6d6; text-shadow: 0 0 6px rgba(255,120,120,0.3); } .settings-action { text-align: center; margin-top: 30px; } .settings-action button { background: linear-gradient(90deg, rgba(60,80,200,0.2), rgba(100,70,230,0.25)); border: 1px solid rgba(140,120,255,0.2); color: #e9eaff; padding: 14px 34px; border-radius: 8px; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; transition: all 0.25s ease; } .settings-action button:hover { background: linear-gradient(90deg, rgba(90,110,255,0.3), rgba(150,100,255,0.3)); box-shadow: 0 0 20px rgba(120,100,255,0.3); } /* ====== ALAN DIALOGUE ====== */ .alan-dialogue { position: fixed; bottom: 40px; right: 40px; width: 320px; background: rgba(25, 25, 60, 0.9); border: 1px solid rgba(120,120,255,0.2); border-radius: 12px; padding: 18px 22px; color: #cfd1ff; font-size: 0.9rem; line-height: 1.4; box-shadow: 0 8px 20px rgba(0,0,80,0.3); backdrop-filter: blur(10px); animation: fadeIn 0.6s ease; z-index: 100; } .alan-dialogue p { margin: 6px 0; } .close-btn { position: absolute; top: 8px; right: 10px; background: none; border: none; color: #aaaaff; font-size: 1.2em; cursor: pointer; transition: color 0.3s ease; } .close-btn:hover { color: #fff; } /* ====== ANIMATIONS ====== */ @keyframes fadeInSettings { from { opacity: 0; transform: translateY(10px); filter: blur(5px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } </style>
<<nobr>> <<audio "homepageSound" loop play volume 0.5>> <div class="home-container"> <h1 class="glitch-title">Alice.Disconnected</h1> <p class="subtitle">Crédits de l’œuvre</p> <ul class="credits-list"> <li> Les images ont été générées à l’aide de <strong>ChatGPT-5</strong>. </li> <li> Toute la narration, la structure et la mise en scène interactive ont été conçues par <strong>moi (Dylan Jacquet)</strong>, sans assistance d’intelligence artificielle pour la partie écriture. </li> <li> La relecture orthographique a été effectuée par <strong>Stéphanie Jacquet</strong> et le logiciel <strong>Antidote</strong>. </li> </ul> <p class="closing-line">Merci d’avoir exploré cette mémoire fragmentée.</p> <!-- [[HOMESCREEN]] --> <<link "Retour en arrière">><<goto "HOMESCREEN">><</link>> </div> <div class="footer"> <p>© 2025 – Un récit de Dylan Jacquet</p> </div> <</nobr>> <style> .credits-list { list-style: none; padding: 0; max-width: 700px; margin: 0 auto; text-align: left; line-height: 1.8; font-size: 1rem; } .credits-list li { margin-bottom: 20px; color: #d2ffff; text-shadow: 0 0 6px rgba(0,255,200,0.1); } .closing-line { margin-top: 50px; font-style: italic; color: #7fffd9; opacity: 0.8; } body { background: url("https://dylanjacquet.com/wp-content/uploads/2025/10/alice-disconnected-background-home-ezgif.com-video-to-gif-converter.gif") no-repeat center center fixed; background-size: cover; font-family: 'Orbitron', 'Segoe UI', sans-serif; color: #e0e0ff; text-align: center; height: 100vh; margin: 0; overflow: hidden; } body::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 20, 0.55); backdrop-filter: blur(2px); z-index: 0; } .home-container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; position: relative; } .link-internal { font-size: 1.1em; padding: 12px 40px; border: 2px solid #6b5bff; color: #e0e0ff !important; text-transform: uppercase; text-decoration: none; letter-spacing: 1px; background: transparent; border-radius: 8px; transition: all 0.3s ease; display: inline-block; cursor: pointer; min-width: 160px; text-align: center; } .link-internal:hover { background: rgba(107, 91, 255, 0.1); box-shadow: 0 0 10px rgba(107, 91, 255, 0.4); text-decoration : none; } .glitch-title { font-size: 3.8em; letter-spacing: 3px; font-weight: 700; text-transform: uppercase; color: #c0b5ff; text-shadow: 0 0 10px rgba(160, 130, 255, 0.8), 0 0 20px rgba(80, 60, 255, 0.4), 2px 2px 1px rgba(255,255,255,0.1); animation: flicker 4s infinite alternate; } @keyframes flicker { 0% { opacity: 1; text-shadow: 0 0 8px #b59cff; } 50% { opacity: 0.95; text-shadow: 0 0 15px #9270ff; } 100% { opacity: 1; text-shadow: 0 0 10px #cbb9ff; } } .subtitle { font-size: 1em; color: #7777aa; margin-top: 10px; letter-spacing: 2px; } .menu-buttons { margin-top: 80px; display: flex; flex-direction: column; gap: 20px; align-items: center; } .menu-btn { font-size: 1.1em; padding: 12px 40px; border: 2px solid #6b5bff; color: #e0e0ff; text-transform: uppercase; letter-spacing: 1px; background: transparent; border-radius: 8px; transition: all 0.3s ease; cursor: pointer; } .menu-btn:hover { background: rgba(107, 91, 255, 0.1); box-shadow: 0 0 10px rgba(107, 91, 255, 0.4); } .footer { position: absolute; bottom: 15px; font-size: 0.8em; color: #555585; } .credit-popup { background: rgba(20, 20, 40, 0.95); border: 1px solid #6666aa; padding: 20px 30px; border-radius: 10px; color: #aaaadf; width: 60%; margin: 50px auto; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1024px) { body { background-attachment: scroll; /* Corrige les bugs de fond mobile */ } .glitch-title { font-size: 2.5em; } .menu-buttons { margin-top: 50px; } .credits-list { margin: 0 !important; padding-left: 1rem !important; padding-right: 1rem !important; } } @media (max-width: 768px) { body { overflow: auto; height: auto; padding: 20px 0; } .home-container { height: auto; margin-top: 60px; } .glitch-title { font-size: 2em; letter-spacing: 2px; } .subtitle { font-size: 0.9em; letter-spacing: 1px; } .menu-buttons { margin-top: 40px; gap: 15px; } .link-internal, .menu-btn { width: 80%; max-width: 300px; padding: 12px 0; font-size: 1em; } .footer { display:none; bottom: 56px; text-align: center; } .credits-list { margin: 0 !important; padding-left: 1rem !important; padding-right: 1rem !important; } .credit-popup { width: 85%; padding: 15px 20px; } } @media (max-width: 480px) { #ui-bar.stowed~#story { margin-left: 0; !important } .credits-list { margin: 0 !important; padding-left: 1rem !important; padding-right: 1rem !important; } .closing-line { text-align: center; padding-left: 1rem; padding-right: 1rem; } .glitch-title { font-size: 1.5em; letter-spacing: 1px; } .subtitle { font-size: 0.8em; } .menu-buttons { margin-top: 30px; } .link-internal, .menu-btn { width: 90%; font-size: 0.9em; } } </style>
<<nobr>> <<audio "homepageSound" loop play volume 0.5>> <div class="home-container"> <h1 class="glitch-title">Alice.Disconnected</h1> <div class="options-screen"> <h2 class="options-title">PARAMÈTRES SYSTÈME — A.L.A.N_021</h2> <ul class="options-list"> <!-- [[AudioStream]] --> <li id="audioStream"> <<include "AudioStream">> </li> <!-- [[GlitchMode]] --> <li id="glitchMode"> <<include "GlitchMode">> </li> <!-- [[DeleteMemory]] --> <li id="deleteMemory"> <<include "DeleteMemory">> </li> <li><span>Restore Alice :</span> <span class="denied">> ACCÈS REFUSÉ</span> </li> </ul> </div> <!-- [[HOMESCREEN]] --> <<link "Retour en arrière">><<goto "HOMESCREEN">><</link>> </div> <div class="footer"> <p>© 2025 – Un récit de Dylan Jacquet</p> </div> <</nobr>> <style> .denied { color: #ff5c5c; text-shadow: 0 0 6px rgba(255,0,0,0.6); } .options-title { color: #00ffcc; letter-spacing: 2px; text-transform: uppercase; } .options-list { display: flex; flex-direction : column; gap: 1rem; list-style:none; line-height:2; font-family:'IBM Plex Mono',monospace; color:#baffff; } .option__header { display: flex; flex-direction: column; } .option__body { display: flex; flex-direction: column; align-items: center; } .option-feedback { font-size: 0.75rem; display: block; } body { background: url("https://dylanjacquet.com/wp-content/uploads/2025/10/alice-disconnected-background-home-ezgif.com-video-to-gif-converter.gif") no-repeat center center fixed; background-size: cover; font-family: 'Orbitron', 'Segoe UI', sans-serif; color: #e0e0ff; text-align: center; height: 100vh; margin: 0; overflow: hidden; } body::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 20, 0.55); backdrop-filter: blur(2px); z-index: 0; } .home-container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; position: relative; } .link-internal { font-size: 1.1em; padding: 12px 40px; border: 2px solid #6b5bff; color: #e0e0ff !important; text-transform: uppercase; text-decoration: none; letter-spacing: 1px; background: transparent; border-radius: 8px; transition: all 0.3s ease; display: inline-block; cursor: pointer; min-width: 160px; text-align: center; } .link-internal:hover { background: rgba(107, 91, 255, 0.1); box-shadow: 0 0 10px rgba(107, 91, 255, 0.4); text-decoration : none; } .glitch-title { font-size: 3.8em; letter-spacing: 3px; font-weight: 700; text-transform: uppercase; color: #c0b5ff; text-shadow: 0 0 10px rgba(160, 130, 255, 0.8), 0 0 20px rgba(80, 60, 255, 0.4), 2px 2px 1px rgba(255,255,255,0.1); animation: flicker 4s infinite alternate; } @keyframes flicker { 0% { opacity: 1; text-shadow: 0 0 8px #b59cff; } 50% { opacity: 0.95; text-shadow: 0 0 15px #9270ff; } 100% { opacity: 1; text-shadow: 0 0 10px #cbb9ff; } } .subtitle { font-size: 1em; color: #7777aa; margin-top: 10px; letter-spacing: 2px; } .menu-buttons { margin-top: 80px; display: flex; flex-direction: column; gap: 20px; align-items: center; } .menu-btn { font-size: 1.1em; padding: 12px 40px; border: 2px solid #6b5bff; color: #e0e0ff; text-transform: uppercase; letter-spacing: 1px; background: transparent; border-radius: 8px; transition: all 0.3s ease; cursor: pointer; } .menu-btn:hover { background: rgba(107, 91, 255, 0.1); box-shadow: 0 0 10px rgba(107, 91, 255, 0.4); } .footer { position: absolute; bottom: 15px; font-size: 0.8em; color: #555585; } .credit-popup { background: rgba(20, 20, 40, 0.95); border: 1px solid #6666aa; padding: 20px 30px; border-radius: 10px; color: #aaaadf; width: 60%; margin: 50px auto; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } </style>
<<nobr>> <div class="final-container"> <div class="final-header"> <h2>Décision finale — Connexion instable</h2> <p class="sub">Dernier message interne : utilisateur « Alan » en surcharge émotionnelle</p> </div> <div class="final-box"> <p class="reflection"> « Alors… qu’est-ce que je fais maintenant ? <br><br> Toute cette enquête… toute cette obsession… Ce n’était jamais pour lui nuire. C’était pour ne pas disparaître. Pour qu’elle ne m’oublie pas. <br><br> Je croyais que je sortais de l’ombre grâce à elle… Mais plus j’avance, plus je comprends que je m’y suis enterré. Comme si je dévalais une pente sans jamais pouvoir reprendre appui. <br><br> Si je me déconnecte… Est-ce que je redeviens juste quelqu’un ? Ou un fantôme de plus, condamné à errer seul?» </p> </div> <div class="final-choices"> <<button "Se déconnecter définitivement" class="btn-disconnect">> <<goto "DISCONNECT">> <</button>> <<button "Se reconnecter" class="btn-reconnect">> <<goto "RECONNECT">> <</button>> </div> </div> <</nobr>> <style> /* --- STRUCTURE --- */ .final-container { padding: 60px 12%; font-family: 'IBM Plex Mono', monospace; color: #dce4ff; background: radial-gradient(circle at 50% 25%, #080812 0%, #000 90%); min-height: 100vh; animation: fadeInFinal 1.2s ease forwards; } @keyframes fadeInFinal { from { opacity:0; filter:blur(8px); } to { opacity:1; filter:blur(0); } } .final-header { text-align: center; margin-bottom: 40px; } .final-header h2 { font-size: 1.6rem; letter-spacing: 0.05em; color: #cfd9ff; text-shadow: 0 0 10px rgba(150,150,255,0.25); } .sub { color: #8187b0; font-size: 0.9rem; } /* --- TEXTE ENCADRÉ --- */ .final-box { border: 1px solid rgba(120,120,255,0.1); background: rgba(20,20,40,0.3); padding: 30px 40px; border-radius: 12px; box-shadow: inset 0 0 15px rgba(100,100,255,0.1); max-width: 900px; margin: 0 auto 60px auto; } .reflection { font-size: 1.05rem; line-height: 1.7em; color: #d2d3ff; text-shadow: 0 0 6px rgba(120,120,255,0.15); white-space: pre-line; } /* --- BOUTONS --- */ .final-choices { display: flex; justify-content: center; gap: 40px; } .final-choices button, .btn-reconnect { padding: 16px 32px; border-radius: 10px; border: 1px solid rgba(120,120,255,0.25); background: rgba(30,30,60,0.3); color: #e9eaff; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; cursor: pointer; transition: all 0.3s ease; font-size: 0.8rem; } .btn-disconnect:hover { background: rgba(255,80,80,0.2); border-color: rgba(255,80,80,0.4); box-shadow: 0 0 15px rgba(255,80,80,0.3); } .btn-reconnect:hover { background: rgba(100,120,255,0.2); border-color: rgba(100,120,255,0.4); box-shadow: 0 0 15px rgba(120,100,255,0.3); } @media(max-width: 720px){ .final-container { padding: 40px 8%; } .final-box { padding: 25px; } .final-choices { flex-direction: column; gap: 20px; } } </style>
<<nobr>> <div class="option__body" id="audioStream"> <div class="option__header"> <span>Audio streams :</span> <span class="option-feedback"> [État : <<print $audioEnabled ? "ON" : "OFF">>] </span> <div> <<if !$audioEnabled>> <<button "Activer">> <<set $audioEnabled = true>> <<run UI.alert("Audio activé. Connexion émotionnelle rétablie.")>> <<replace "#audioStream">><<include "AudioStream">><</replace>> <</button>> <</if>> <<if $audioEnabled>> <<button "Désactiver">> <<set $audioEnabled = false>> <<run UI.alert("Audio désactivé. Silence mémoire.")>> <<replace "#audioStream">><<include "AudioStream">><</replace>> <</button>> <</if>> </div> <</nobr>>
<<nobr>> <div class="option__body" id="glitchModeBlock"> <div class="option__header"> <span>Interface glitchs :</span> <span class="option-feedback"> [État : <<print $glitchMode ? "ON" : "OFF">>] </span> </div> <<if !$glitchMode>> <<button "Activer">> <<set $glitchMode = true>> <<run UI.alert("Mode instable activé.")>> <<replace "#glitchModeBlock">><<include "GlitchMode">><</replace>> <</button>> <</if>> <<if $glitchMode>> <<button "Désactiver">> <<set $glitchMode = false>> <<run UI.alert("Stabilisation du flux visuel...")>> <<replace "#glitchModeBlock">><<include "GlitchMode">><</replace>> <</button>> <</if>> </div> <</nobr>>
<<nobr>> <div class="option__body" id="deleteMemory"> <div class="option__header"> <span>Effacer la mémoire :</span> <span class="option-feedback"> [Supprime toutes les données de sauvegarde] </span> </div> <<button "Réinitialiser">> <<run UI.confirm("⚠️ Effacer la mémoire d’Alan ? Cette action supprimera toute progression.")>> <<if _result>> <<run State.reset()>> <<run UI.alert("Mémoire purgée. Redémarrage du système...")>> <<replace "#deleteMemory">><<include "#deleteMemory">><</replace>> <</if>> <</button>> </div> <</nobr>>
<<nobr>> <<audio "introhum" loop play volume 0.5>> <<audio "bipbopbip" play volume 0.5>> <div class="boot-screen"> <div class="boot-text"> <p class="boot-text--item">[CONNEXION_CONNECTA]</p> <p class="boot-text--item"> [ALICE_UNAVAILABLE]</p> </div> <br> <div> <p class="fade-line fade-line--first">"Elle ne m'a plus donné signe de vie depuis deux mois."</p> <br> <p class="fade-line fade-line--second">"Personne ne semble inquiet..."</p> <br> <p class="fade-line fade-line--third">"Mais moi, je sais que quelque chose cloche..."</p> <div class="boot-choice"> [[Lancer la reconstruction →|INTRO_0]] </div> </div> </div> <</nobr>> <style> body { margin: 0; height: 100%; background: radial-gradient(circle at 50% 20%, #0a0a15 0%, #000 90%); background-repeat: no-repeat; overflow-y: scroll; position: relative; font-family: 'IBM Plex Mono', monospace; color: #aab0ff; } body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(90, 70, 200, 0.15), transparent 70%), radial-gradient(circle at 80% 70%, rgba(140, 90, 255, 0.1), transparent 70%); animation: pulseLight 14s infinite alternate ease-in-out; z-index: -3; } body::after { content: ""; position: fixed; inset: 0; background-image: radial-gradient(rgba(180, 180, 255, 0.1) 1px, transparent 1px); background-size: 3px 3px; opacity: 0.25; animation: drift 60s linear infinite; z-index: -2; } .boot-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: left; padding: 0 5%; animation: fadeIn 3s ease forwards; } .boot-text { padding-top: 2.5rem; } .boot-text--item { margin: 6px 0; font-size: 1.05em; color: rgba(180, 190, 255, 0.8); text-shadow: 0 0 4px rgba(130, 120, 255, 0.3); letter-spacing: 0.04em; opacity: 0; overflow: hidden; white-space: nowrap; width: 0; animation: typeLine 1.8s steps(30, end) forwards; } .boot-text--item:nth-child(1) { animation-delay: 0.25s; } .boot-text--item:nth-child(2) { animation-delay: 0.5s; } .boot-text--item:nth-child(3) { animation-delay: 0.75s; } .boot-text--item:nth-child(4) { animation-delay: 1s; } .boot-text--item:nth-child(5) { animation-delay: 1.25s; } @keyframes typeLine { 0% { opacity: 1; width: 0; } 100% { opacity: 1; width: 100%; } } .boot-text::after { content: "_"; color: #8ff0ff; animation: blink 1s infinite; margin-left: 5px; } @keyframes blink { 50% { opacity: 0; } } .fade-line { margin-top: 30px; font-size: 1.5rem; font-style: italic; text-align: center; color: #c7c7ff; opacity: 0; animation: fadeInText 750ms ease 1s forwards; } .fade-line--first { animation: fadeInText 2s ease 1.5s forwards; } .fade-line--second { animation: fadeInText 2s ease 2s forwards; } .fade-line--third { animation: fadeInText 2s ease 2.5s forwards; } .fade-line--fourth { animation: fadeInText 2s ease 3s forwards; } .boot-choice { text-align: center; margin-top: 60px; animation: fadeIn 250ms ease 3.5s forwards; opacity: 0; } .boot-choice a.link-internal { color: #99aaff; border: 1px solid rgba(100,100,255,0.3); padding: 12px 24px; border-radius: 8px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; transition: all 0.3s ease; opacity: 0; animation: fadeInText 750ms ease 500ms forwards; } .boot-choice a.link-internal:hover { background-color: rgba(80, 80, 255, 0.1); color: #fff; border-color: rgba(150,150,255,0.4); text-shadow: 0 0 10px #99f; } @keyframes fadeInText { 0% { opacity: 0; transform: translateY(20px); filter: blur(6px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style>
<<nobr>> <button class="help-btn" onclick="document.getElementById('helpModal').style.display='flex'">J'ai besoin d'aide ?</button> <!-- MODALE D'AIDE --> <div id="helpModal" class="help-modal" onclick="this.style.display='none'"> <div class="help-box" onclick="event.stopPropagation()"> <button class="help-close" onclick="document.getElementById('helpModal').style.display='none'">✕</button> <h2 class="help-title">Besoin d’un indice ?</h2> <p class="help-intro">Pour avancer, il faut explorer l’interface. Certains éléments ne réagissent qu’au clic.</p> <div class="help-objective"> <<if !$objectif1>> <p>Je devrais fouiller dans ses <strong>photos</strong>… Si quelque chose a changé, je le verrai.</p> <<elseif $objectif1 && !$objectif2>> <p>Ses <strong>contacts</strong> peuvent en dire long. Si quelqu’un revient souvent… je dois le découvrir.</p> <<elseif $objectif1 && $objectif2 && !$objectif3>> <p>Je dois lire ses <strong>messages</strong>. C’est là que la vérité s’est glissée.</p> <<elseif $objectif1 && $objectif2 && $objectif3 && !$objectif4>> <p>Les <strong>paramètres</strong> gardent toujours des traces. Si son compte a été manipulé, ça se trouve ici.</p> <<else>> <p>Continue d’explorer… Connecta finit toujours par révéler ce qu’elle cache.</p> <</if>> </div> </div> </div> <style> /* --- Bouton d'aide --- */ .help-bubble { position: fixed; top: 25px; right: 25px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(150,140,255,0.3); background: rgba(40,40,80,0.45); color: #d8d4ff; font-size: 1.1rem; cursor: pointer; box-shadow: 0 0 10px rgba(120,100,255,0.3); backdrop-filter: blur(4px); transition: all 0.25s ease; z-index: 9999; } .help-bubble:hover { background: rgba(90,80,200,0.4); box-shadow: 0 0 15px rgba(120,100,255,0.45); } /* --- Modale globale --- */ .help-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,20,0.6); backdrop-filter: blur(4px); justify-content: center; align-items: center; z-index: 10000; padding: 20px; } /* --- Boîte d'aide --- */ .help-box { background: rgba(20,20,40,0.75); border: 1px solid rgba(130,120,255,0.35); border-radius: 12px; padding: 30px 40px; max-width: 480px; width: 100%; box-shadow: 0 0 25px rgba(80,70,200,0.25); backdrop-filter: blur(8px); position: relative; animation: fadeInHelp 0.4s ease forwards; } /* --- Titre --- */ .help-title { color: #dcd7ff; font-size: 1.4rem; margin-bottom: 12px; text-shadow: 0 0 8px rgba(140,120,255,0.3); } /* --- Texte intro --- */ .help-intro { color: #a8a4d9; font-size: 0.95rem; margin-bottom: 18px; } /* --- Objectif actuel --- */ .help-objective p { color: #e2e0ff; line-height: 1.5; font-size: 1rem; padding: 12px 16px; border-left: 2px solid rgba(120,100,255,0.5); background: rgba(255,255,255,0.03); border-radius: 4px; } /* --- Bouton fermer --- */ .help-close { position: absolute; top: 12px; right: 12px; background: transparent; border: none; color: #bbb6ff; font-size: 1.2rem; cursor: pointer; transition: 0.2s ease; } .help-close:hover { color: #fff; } /* --- Anim --- */ @keyframes fadeInHelp { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } </style> <</nobr>>