@charset "UTF-8";.overlay[data-v-3093be99]{position:absolute;top:0;right:0;bottom:0;left:0;z-index:9999;background:linear-gradient(135deg,#2c3e50,#3498db);color:#fff;display:flex;align-items:center;justify-content:center}.container[data-v-3093be99]{padding:2rem;background-color:#0006;border-radius:1rem;box-shadow:0 4px 20px #0000004d;text-align:center}h1[data-v-3093be99]{font-size:2.5rem;margin-bottom:1rem}p[data-v-3093be99]{font-size:1.2rem;max-width:500px;margin:auto}a[data-v-3093be99]{color:#ccc;text-decoration:none;font-size:20px}a[data-v-3093be99]:hover{text-decoration:underline;cursor:pointer;color:#fecccc;font-size:21px}button[data-v-3093be99]{margin-top:1rem;background-color:#ecf0f1;color:#2c3e50;padding:.5rem 1rem;border:none;border-radius:8px;cursor:pointer}button[data-v-3093be99]:hover{background-color:#bdc3c7}footer[data-v-3093be99]{margin-top:2rem;font-size:.9rem;color:#ccc}:root{--color-primary: #2563EB;--color-bg: #F9FAFB;--color-text: #111827;--color-secondary: #FBBF24;--color-border: #E5E7EB}.dark{--color-primary: #3B82F6;--color-bg: #0F172A;--color-text: #F8FAFC;--color-secondary: #64748B;--color-border: #1E293B}:root{--minitel-black: #000000;--minitel-white: #FFFFFF;--minitel-red: #FF0000;--minitel-green: #00FF00;--minitel-yellow: #FFFF00;--minitel-blue: #0000FF;--minitel-magenta: #FF00FF;--minitel-cyan: #00FFFF}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:Inter,Segoe UI,sans-serif;background-color:var(--color-bg);color:var(--color-text);line-height:1.6;scroll-behavior:smooth}#app{width:100%}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%;height:auto;display:block}ul,ol{list-style:none;padding:0}button{border:none;cursor:pointer;font:inherit;background:none}input,textarea,select{font:inherit;border:none;outline:none}.container{width:90%;max-width:1200px;margin:0 auto;padding:1rem}@media (max-width: 768px){.hidden-mobile{display:none}}.card-projet{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;padding:20px}.cardProduct{display:flex;flex-direction:column;justify-content:space-between;background-color:var(--color-primary);border:1px solid #ccc;border-radius:12px;box-shadow:0 4px 8px #0000001a;padding:16px;height:100%;width:300px;transition:transform .3s ease}.cardProduct:hover{transform:translateY(-5px)}.cardProduct img{width:100%;height:150px;object-fit:cover;border-radius:8px}.cardProduct h3{margin:12px 0 8px;font-size:1.2rem;text-align:center;color:#333}.cardProduct p{flex-grow:1;font-size:.95rem;color:#555;margin-bottom:10px}.cardProduct a{display:block;text-align:center;background-color:#007bff;color:#fff;padding:8px 12px;border-radius:6px;text-decoration:none;transition:background-color .2s ease}.cardProduct a:hover{background-color:#0056b3}header{position:relative;height:40vh;width:100%;background:var(--color-bg);display:flex;justify-content:center;align-items:center;padding:0 2rem;border-bottom:1px solid var(--color-border);flex-direction:column;overflow:hidden}header .wave-background{position:absolute;top:0;left:0;width:200%;height:100%;z-index:0}header .wave-background svg{width:100%;height:100%;animation:waveMove 10s linear infinite}header .header-title{z-index:1;width:100%;display:flex;flex-direction:column;align-items:center}@keyframes waveMove{0%{transform:translate(0)}to{transform:translate(-50%)}}header .scroll-down-link{width:100%;display:flex;padding-top:50px;z-index:1}header .navbar{display:none}header p.tagline{font-size:.875rem;color:var(--color-text);font-family:Montserrat,sans-serif}header h1{font-family:Poppins,sans-serif;font-weight:700;font-size:1.5rem;color:var(--color-text)}header button{padding:.1rem 1rem;margin-top:5%;border-radius:100px;font-size:.875rem;transition:background-color .3s ease}header button:hover{background-color:#134cca}.dark header button{background-color:#3b82f6}.dark header button:hover{background-color:#6ca1f8}header .scroll-down{width:30px;height:30px;border-bottom:3px solid #fff;border-right:3px solid #fff;transform:rotate(45deg);animation:bounce 2s infinite;margin:2rem auto}@keyframes bounce{0%,20%,50%,80%,to{transform:rotate(45deg) translateY(0)}40%{transform:rotate(45deg) translateY(10px)}60%{transform:rotate(45deg) translateY(5px)}}.checkbox{display:none}.button{position:fixed;top:2vh;right:5vw;z-index:2000;width:4rem;height:4rem;border-radius:50%;background-color:var(--color-primary);box-shadow:0 1rem 3rem #000;cursor:pointer}.background{position:fixed;top:2vh;right:5vw;height:4rem;width:4rem;border-radius:50%;background-image:radial-gradient(#3b82f6,#000);z-index:1000;transition:transform .8s cubic-bezier(.86,0,.07,1)}.navbar{position:fixed;top:0;right:-60vw;z-index:1500;opacity:0;width:0;transition:all .8s}.checkbox:checked~.background{transform:scale(80)}.checkbox:checked~.navbar{opacity:1;width:100%;right:0}.list{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);list-style:none;text-align:center;width:100%;margin-top:100%}.item{margin:1rem;font-size:36px}.link{display:inline-block;font-size:1.3rem;font-weight:300;padding:1rem 2rem;color:var(--color-border);text-decoration:none;text-transform:uppercase;background-image:linear-gradient(120deg,transparent 0%,transparent 50%,white 50%);background-size:220%;transition:all .4s}.link:hover{color:var(--color-primary)}.icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.icon,.icon:before,.icon:after{width:2rem;height:2px;background-color:var(--color-border);display:inline-block}.icon:before,.icon:after{content:"";position:absolute;left:0;transition:all .2s}.icon:before{top:-.8rem}.icon:after{top:.8rem}.checkbox:checked+.button .icon{background-color:transparent}.checkbox:checked+.button .icon:before{top:0;transform:rotate(135deg)}.checkbox:checked+.button .icon:after{top:0;transform:rotate(-135deg)}@media (min-width: 768px){.checkbox,.button,.background{display:none}.navbar{position:fixed;top:0;left:0;width:100%;height:50px;display:flex;gap:1rem;padding:1rem;transition:all .5s ease;justify-content:space-around;align-items:center;flex-direction:row;z-index:10}.navbar ul{display:flex;width:80%;justify-content:space-around;list-style:none;margin:0;padding:0}.navbar.at-top{top:400px;left:0;width:100%;height:50px;flex-direction:row}.navbar.slide-right{top:400px;right:0;left:auto;width:60px;height:auto;flex-direction:column}.navbar.fixed-mid{position:fixed;top:50%;right:0;left:auto;width:60px;height:auto;transform:translateY(-50%);flex-direction:column}.vertical-word{display:inline-flex;flex-direction:column;align-items:center;transform:rotate(90deg);transform-origin:left center}.rotated-letter{display:block;transform:rotate(-90deg);margin:0;line-height:1}.navbar.slide-right,.navbar.fixed-mid{width:60px;padding:.5rem 0}.navbar.slide-right .nav-link,.navbar.fixed-mid .nav-link{margin:1rem 0}}#welcome-view{padding:1rem;background-color:var(--color-bg);color:var(--color-text);font-family:Inter,sans-serif;display:flex;flex-direction:column}#welcome-view h1{font-family:Poppins,sans-serif;font-size:2rem;text-align:center}#welcome-view .presentation{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;justify-content:flex-start;height:auto;min-height:300px;margin-top:2rem}#welcome-view .presentation h2{font-family:Poppins,sans-serif;font-size:1rem;margin-bottom:2rem}#welcome-view .presentation p{font-size:1rem;color:var(--color-secondary)}#welcome-view .projets-actifs{display:flex;flex-direction:column;align-items:center;width:100%}#welcome-view .projets-actifs h2{font-family:Poppins,sans-serif;font-size:1.5rem;margin-bottom:1rem;color:var(--color-primary)}#welcome-view .projets-actifs ul{width:100%;display:flex;flex-direction:column;gap:1.5rem}#welcome-view .projets-actifs ul li{background-color:var(--color-bg);color:var(--color-text);border-radius:1rem;padding:1rem;box-shadow:0 2px 8px #0000000d;transition:transform .2s ease;display:flex;justify-content:center}#welcome-view .projets-actifs ul li img{border-radius:.5rem;margin-bottom:1rem}#welcome-view .projets-actifs ul li a{display:inline-block;font-weight:500;background-color:var(--color-primary);color:#fff;padding:.5rem 1rem;border-radius:.5rem;transition:background-color .3s ease}#welcome-view .projets-actifs ul li a:hover{background-color:#134cca}#welcome-view .presentation-perso{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}#welcome-view .presentation-perso h2{font-family:Poppins,sans-serif;font-size:1.5rem;margin-bottom:1rem}#welcome-view .presentation-perso p{font-size:1rem;max-width:600px}#welcome-view .checkbox{display:none}#welcome-view .button{position:relative;background-color:#fff;height:5rem;width:5rem;border-radius:50%;position:fixed;top:5vh;right:5vw;z-index:2000;box-shadow:0 1rem 3rem #000;text-align:center;cursor:pointer}#welcome-view .background{height:4rem;width:4rem;border-radius:50%;position:fixed;top:5.5vh;right:5.5vw;background-image:radial-gradient(green,#000);z-index:1000;transition:transform .8s cubic-bezier(.86,0,.07,1)}#welcome-view .nav{height:100vh;position:fixed;top:0;right:-60vw;z-index:1500;opacity:0;width:0;transition:all .8s}#welcome-view .list{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);list-style:none;text-align:center;width:100%}#welcome-view .item{margin:1rem;font-size:36px}#welcome-view .link:link,#welcome-view .link:visited{display:inline-block;font-size:3rem;font-weight:300;padding:1rem 2rem;color:#fff;text-decoration:none;text-transform:uppercase;background-image:linear-gradient(120deg,transparent 0%,transparent 50%,white 50%);background-size:220%;transition:all .4s}#welcome-view .link:hover,#welcome-view .link:active{color:#90ee90;cursor:pointer}#welcome-view .checkbox:checked~.background{transform:scale(80)}#welcome-view .checkbox:checked~.nav{opacity:1;width:100%;right:0}#welcome-view .icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#welcome-view .icon,#welcome-view .icon:before,#welcome-view .icon:after{width:3rem;height:2px;background-color:gray;display:inline-block}#welcome-view .icon:before,#welcome-view .icon:after{content:"";position:absolute;left:0;transition:all .2s}#welcome-view .icon:before{top:-.8rem}#welcome-view .icon:after{top:.8rem}#welcome-view .button:hover icon:before{top:-1rem}#welcome-view .button:hover icon:after{top:1rem}#welcome-view .checkbox:checked+.button .icon{background-color:transparent}#welcome-view .checkbox:checked+.button .icon:before{top:0;transform:rotate(135deg)}#welcome-view .checkbox:checked+.button .icon:after{top:0;transform:rotate(-135deg)}#welcome-view .chat-style{display:flex;flex-direction:column;gap:.5rem;padding:1rem}#welcome-view .chat-style .message{max-width:75%;padding:.8rem 1.2rem;border-radius:1.2rem;font-size:1rem;line-height:1.4;box-shadow:0 2px 5px #0000000d;opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease;will-change:transform,opacity}#welcome-view .chat-style .message.visible{opacity:1;transform:translateY(0)}#welcome-view .chat-style .message-question{background-color:var(--color-primary);color:var(--color-border);align-self:flex-start;border-bottom-left-radius:0}#welcome-view .chat-style .message-reponse{background-color:var(--color-secondary);color:var(--color-text);align-self:flex-end;border-bottom-right-radius:0}@media (max-width: 600px){#welcome-view .chat-style .message{font-size:.95rem}}@media (min-width: 768px){#welcome-view #welcome-view{align-items:center}#welcome-view .presentation,#welcome-view .chat-style,#welcome-view .presentation-perso{width:80%;max-width:700px;margin:0 auto;padding:2rem;border-radius:1rem;background-color:var(--color-border);box-shadow:0 4px 10px #0000000d}#welcome-view .chat-style{border:2px dashed var(--color-primary)}#welcome-view .projets-actifs{align-items:center;width:100%;padding:2rem}#welcome-view .projets-actifs ul{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}#welcome-view .projets-actifs ul li{width:45%;max-width:400px;margin:0 auto;transition:transform .3s ease}#welcome-view .projets-actifs ul li:hover{transform:scale(1.03)}}@media (min-width: 1024px){#welcome-view .presentation,#welcome-view .chat-style,#welcome-view .presentation-perso{width:60%;max-width:900px;margin-top:2rem}#welcome-view .projets-actifs ul{flex-direction:row}#welcome-view .projets-actifs ul li{width:30%}#welcome-view .home-link-project{font-size:.5rem;padding:1.5rem 3rem}}#container-projet{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:30px 0}#container-projet h2{font-size:2rem;margin-bottom:20px}#container-projet li{list-style:none;margin-bottom:20px}#conteneur-chat{position:relative;z-index:1;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:40px 0;background-color:var(--minitel-black);color:var(--minitel-green);font-family:VT323,Courier New,monospace}#conteneur-chat:before{content:'import { ref, onMounted } from "vue";\aimport Fuse from "fuse.js";\a¬onst chat = ref(null);¬onst inputValue = ref(\'\');\a\alet brain = {\a  questions: {},\a  blagues: [],\a  anecdotes: [],\a  cssTips: [],\a  faits: []\a};\a¯unction addMessage(text, sender) {\a  if (!chat.value) return;\a  const div = document.createElement("div");\a  div.className = `message ${sender}`;\a  div.textContent = (sender === "user" ? "🧑‍💻 " : "🤖 " ) + text;\a  chat.value.appendChild(div);\a  chat.value.scrollTop = chat.value.scrollHeight;\a}\aªsync function loadBrain() {\a  try {\a    const response = await fetch("/patrick_brain.json");\a    if (!response.ok) throw new Error("Fichier introuvable");\a    const data = await response.json();\a\a    if (!data.questions || typeof data.questions !== "object") {\a      throw new Error("Structure JSON invalide : questions manquantes");\a    }\a\a    brain = data;\a    console.log("🤖 Brain chargé :", brain);\a  } catch (error) {\a    console.error("Erreur de chargement du brain JSON :", error);\a    addMessage("Impossible de charger patrick_brain.json.", "bot");\a  }\a}\a¯unction respondTo(question) {\a  const key = question.trim().toLowerCase();\a\a  if (key.includes("blague")) {\a    const list = brain.blagues;\a    addMessage(list.length ? list[Math.floor(Math.random() * list.length)] : "Pas de blagues dispo 😢", "bot");\a    return;\a  }\a\a  if (key.includes("anecdote")) {\a    const list = brain.anecdotes;\a    addMessage(list.length ? list[Math.floor(Math.random() * list.length)] : "Aucune anecdote à raconter 😢", "bot");\a    return;\a  }\a\a  if (key.includes("faits")) {\a    const list = brain.faits;\a    addMessage(list.length ? list[Math.floor(Math.random() * list.length)] : "Aucun fait dispo 😢", "bot");\a    return;\a  }\a\a  if (key.includes("css")) {\a    const list = brain.cssTips;\a    addMessage(list.length ? list[Math.floor(Math.random() * list.length)] : "Pas de tips CSS disponibles 😢", "bot");\a    return;\a  }\a\a  const fuse = new Fuse(Object.keys(brain.questions), { includeScore: true, threshold: 0.4 });\a  const results = fuse.search(key);\a\a  if (results.length > 0) {\a    const bestMatch = results[0].item;\a    addMessage(brain.questions[bestMatch], "bot");\a  } else {\a    addMessage("Je ne sais pas encore... Pose une autre question !", "bot");\a  }\a}\a¬onst handleSend = () => {\a  const message = inputValue.value.trim();\a  if (!message) return;\a  addMessage(message, "user");\a  respondTo(message);\a  inputValue.value = \'\';\a}\a\anonMounted(() => {\a  loadBrain();\a});';position:absolute;top:100%;left:0;width:100%;height:300%;white-space:pre;font-family:VT323,Courier New,monospace;font-size:.875rem;line-height:1.4;color:#00ff0080;pointer-events:none;z-index:0;animation:scroll-code 25s linear infinite}@keyframes scroll-code{0%{transform:translateY(0)}to{transform:translateY(-100%)}}#conteneur-chat .chat-window{position:relative;z-index:1;display:flex;flex-direction:column;gap:.5rem;height:400px;overflow-y:auto;padding:.5rem;border:2px dashed var(--minitel-green);border-radius:8px;margin-bottom:1rem;background-color:var(--minitel-black);font-family:VT323,Courier New,monospace;font-size:1.125rem;color:var(--minitel-green);width:90%}#conteneur-chat .message{padding:.6rem 1rem;border-radius:6px;line-height:1.4;word-wrap:break-word;max-width:100%;font-weight:700;background-color:transparent;border-left:3px solid var(--minitel-blue);color:var(--minitel-green)}#conteneur-chat .message.bot{border-left-color:var(--minitel-magenta)}#conteneur-chat .message.user{align-self:flex-end;text-align:right;border-left-color:var(--minitel-cyan);color:var(--minitel-yellow)}#conteneur-chat #intro-ia{display:flex;align-items:center;gap:1rem}#conteneur-chat #intro-ia p{margin:0;font-family:VT323,Courier New,monospace;font-size:1rem;color:var(--minitel-green)}#conteneur-chat #portrait-ia{border-radius:4px;width:48px;height:48px;border:2px solid var(--minitel-yellow)}#conteneur-chat #input-container-chat-ia{position:relative;z-index:1;display:flex;justify-content:center;padding:.5rem;background-color:var(--minitel-black);border-top:1px dashed var(--minitel-green)}#conteneur-chat #input-container-chat-ia input{flex:1;max-width:100%;padding:.75rem 1rem;font-size:1.125rem;background-color:var(--minitel-black);color:var(--minitel-green);border:2px dashed var(--minitel-green);border-radius:6px;font-family:VT323,Courier New,monospace}#conteneur-chat #input-container-chat-ia input:focus{outline:none;border-color:var(--minitel-yellow)}@media screen and (min-width: 768px){#conteneur-chat .chat-window{height:500px;padding:1rem}#conteneur-chat .message{font-size:1.5rem}#conteneur-chat #input-container-chat-ia input{max-width:600px;font-size:1.5rem}#conteneur-chat #portrait-ia{width:60px;height:60px}}.contact-form{background-color:var(--color-bg);color:var(--color-text);font-family:Inter,sans-serif;padding:2rem 1rem;border-radius:1rem;box-shadow:0 2px 10px #0000000d;max-width:100%;margin:auto}.contact-form h2{font-size:1.5rem;font-weight:600;font-family:Poppins,sans-serif;margin-bottom:1.5rem;text-align:center;color:var(--color-primary)}.contact-form form{display:flex;flex-direction:column;gap:1rem}.contact-form form input,.contact-form form textarea{padding:.75rem 1rem;border:1px solid var(--color-border);border-radius:.5rem;background-color:#fff;font-size:1rem;font-family:Inter,sans-serif;color:var(--color-text);transition:border-color .2s ease}.contact-form form input:focus,.contact-form form textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #2563eb33}.contact-form form textarea{min-height:120px;resize:vertical}.contact-form form button{background-color:var(--color-primary);color:#fff;padding:.75rem;border:none;border-radius:.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s ease}.contact-form form button:hover{background-color:#1555e2}.contact-form form button:active{transform:scale(.98)}.contact-form p{margin-top:1rem;font-size:.875rem;color:var(--color-secondary);text-align:center}@media screen and (min-width: 768px){.contact-form{max-width:600px;padding:3rem}.contact-form h2{font-size:2rem}.contact-form form{gap:1.5rem}.contact-form form input,.contact-form form textarea,.contact-form form button{font-size:1.125rem}}footer{height:200px;border:2px blue solid}