@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";:root{--image-pc: url(/PortFolio/fond_portfolio_pc_.JPG);--image-tel: url(/PortFolio/fond_portfolio_tel_.JPG)}.mode-nuit{--image-pc: url(/PortFolio/fond_portfolio_pc_nuit.jpg);--image-tel: url(/PortFolio/fond_portfolio_tel_nuit.jpg)}body{margin:0;min-height:100vh;background-image:var(--image-pc);background-size:100% 100%;background-position:center center;background-repeat:no-repeat;background-attachment:fixed;transition:background-image .5s ease-in-out;font-family:"Press Start 2P",cursive;color:#333}@media(max-width:768px){body{background-image:var(--image-tel);background-position:center top}}.app-container{display:grid;place-items:center;height:100vh;width:100vw;overflow:hidden;position:relative}.fade-out{animation:disparition .5s forwards ease-out}@keyframes disparition{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.5);pointer-events:none}}.fade-in{animation:apparition .8s forwards ease-out}@keyframes apparition{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.start-screen{text-align:center;z-index:10;animation:fadeIn 1s ease-in;padding:0 20px}.pixel-title{font-size:3rem;color:#fff;text-shadow:4px 4px 0px #333,-2px -2px 0 #333;margin-bottom:50px;line-height:1.5}.start-btn{font-family:"Press Start 2P",cursive;font-size:1.5rem;padding:20px 40px;background-color:#c7ceff;color:#333;border:4px solid #e1e4ff;box-shadow:0 8px #a3a8d2,0 15px 20px #0006;cursor:pointer;transition:all .1s;text-transform:uppercase;border-radius:5px}.start-btn:hover{background-color:#b9c1ff;transform:translateY(-2px)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.btn-toggle{position:absolute;top:20px;right:20px;background:transparent;border:4px solid #333;box-shadow:4px 4px #333;border-radius:5px;padding:10px 15px;color:#333;font-family:"Press Start 2P",cursive;font-size:.6rem;text-transform:uppercase;cursor:pointer;transition:all .1s;z-index:1000;display:flex;align-items:center;gap:10px}.btn-toggle:hover{transform:translate(-2px,-2px);box-shadow:6px 6px #333}.pixel-card{background:#f2f2f5;border:4px solid #333;padding:40px;text-align:center;box-shadow:10px 10px #0000004d;max-width:700px;width:90%;position:relative;margin-top:60px}.menu-title{font-size:1.5rem;color:#333;margin-bottom:20px;text-transform:uppercase;border-bottom:4px solid #333;display:inline-block;padding-bottom:10px}.pixel-buttons-grid{display:flex;flex-direction:column;gap:20px;align-items:center;width:100%}.pixel-btn{background:#d5e2ff;border:4px solid #333;padding:15px 20px;width:100%;max-width:400px;border-radius:5px;margin-top:10px;font-family:"Press Start 2P",cursive;font-size:.8rem;color:#333;cursor:pointer;text-transform:uppercase;box-shadow:6px 6px #000;transition:all .1s;text-align:left;display:flex;justify-content:space-between;align-items:center;box-sizing:border-box}.pixel-btn:hover{background-color:#c7ceff;box-shadow:4px 4px #333;transform:translate(-2px,-2px)}.quit-btn{-webkit-appearance:none;appearance:none;border-radius:5px;background-color:#d5e2ff;color:#333;border:4px solid #333;box-shadow:6px 6px #000;padding:15px 25px;width:60%;max-width:300px;margin-top:40px;font-family:"Press Start 2P",cursive;font-size:.6rem;text-transform:uppercase;cursor:pointer;transition:all .1s}.quit-btn:hover{background-color:#c7ceff;box-shadow:4px 4px #333;transform:translate(-2px,-2px)}.back-btn{background:transparent;border:none;color:#333;font-family:"Press Start 2P",cursive;font-size:.8rem;cursor:pointer;margin-bottom:20px;text-align:left;display:block}.pixel-input,.pixel-textarea{width:100%;padding:15px;margin-bottom:15px;background:#fff;border:4px solid #333;font-family:"Press Start 2P",cursive;font-size:.7rem;box-shadow:inset 4px 4px #0000001a;box-sizing:border-box;resize:vertical}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:20px}.project-card{background:#fff;border:4px solid #333;padding:15px;text-align:left;font-size:.6rem;line-height:1.5}.project-card h3{margin-top:0;border-bottom:2px solid #333;padding-bottom:5px;margin-bottom:10px}.pixel-text{font-size:.7rem;line-height:1.8;text-align:justify;font-family:Courier New,Courier,monospace;font-weight:700}.black-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000;opacity:0;pointer-events:none;z-index:9999;transition:opacity .8s ease-in-out}.black-overlay.active{opacity:1;pointer-events:all}.loading-box{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border:4px solid #333;padding:20px 40px;text-align:center;font-family:"Press Start 2P",cursive;font-size:.8rem;color:#333;box-shadow:10px 10px #00000080;z-index:10000;opacity:0;visibility:hidden;transition:opacity .2s;width:200px}.loading-box.visible{opacity:1;visibility:visible}.dots:after{content:"";animation:dot-animation 1.5s infinite step-end}@keyframes dot-animation{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}.skills-inner-content{display:flex;flex-direction:column;gap:15px;height:100%;overflow-y:auto}.skill-category{text-align:left}.skill-category-title{font-size:.6rem;margin-bottom:8px;color:#555;border-bottom:2px solid #C7CEFF;display:inline-block}.skills-grid-mini{display:flex;flex-wrap:wrap;gap:10px}.skill-mini-item{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#f0f0f0;border:2px solid #ddd;border-radius:5px;transition:transform .1s}.skill-mini-item:hover{transform:scale(1.1);border-color:#333}.skill-mini-item img{width:25px;height:25px}.cutin-container{position:fixed;top:0;left:0;width:100vw;height:100vh;overflow:hidden;z-index:99999;display:flex;align-items:flex-end;justify-content:center;background:transparent;pointer-events:all;padding-bottom:5vh;box-sizing:border-box}.cutin-slash-bg{position:absolute;bottom:0;left:-50%;width:200%;height:40vh;background:transparent;border:none;transform-origin:center;transform:translate(-120%) skew(-20deg);opacity:0;z-index:1}.cutin-content-wrapper{position:relative;z-index:10;display:flex;align-items:flex-end;justify-content:center;width:100%;transform:translate(-150%);opacity:0;margin-bottom:20px}.cutin-char-box{z-index:5;margin-right:-40px;margin-bottom:-10px}.cutin-char-img{width:200px;height:auto;image-rendering:pixelated;filter:drop-shadow(5px 5px 0px rgba(0,0,0,.5))}.cutin-dialogue-box{background:#fff;border:6px solid #000000;width:85%;max-width:1000px;min-height:150px;padding:25px 35px;position:relative;transform:skew(-10deg);box-shadow:10px 10px #a3a8d2;opacity:0;cursor:pointer;z-index:20}.cutin-name-tag{position:absolute;top:-25px;left:0;background:#c7ceff;color:#000;border:4px solid #000000;padding:5px 20px;font-weight:700;font-size:.8rem;transform:skew(10deg);box-shadow:4px 4px #000}.cutin-text{transform:skew(10deg);font-family:"Press Start 2P",cursive;font-size:.8rem;line-height:1.6;margin:10px 0 0;color:#000;min-height:3.2em}.cutin-next-arrow{position:absolute;bottom:10px;right:15px;color:#000;animation:bouncePixel .8s infinite steps(2,start);transform:skew(10deg);font-size:1.2rem}@keyframes bouncePixel{0%{transform:skew(10deg) translateY(0)}to{transform:skew(10deg) translateY(5px)}}.click-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:90000}.anim-enter .cutin-slash-bg{animation:slashIn .4s cubic-bezier(.1,.9,.2,1) forwards!important}@keyframes slashIn{to{transform:translate(0) skew(-20deg);opacity:0}}.anim-enter .cutin-content-wrapper{animation:charSlideIn .5s cubic-bezier(.175,.885,.32,1.275) forwards .2s!important}@keyframes charSlideIn{to{transform:translate(0);opacity:1}}.anim-enter .cutin-dialogue-box{animation:dialogPop .3s ease-out forwards .4s!important}@keyframes dialogPop{0%{opacity:0;transform:skew(-10deg) scale(.9) translateY(20px)}to{opacity:1;transform:skew(-10deg) scale(1) translateY(0)}}.anim-exit .cutin-slash-bg,.anim-exit .cutin-content-wrapper{animation:cutinExit .6s ease-in forwards!important}@keyframes cutinExit{to{transform:translate(150%) skew(-20deg);opacity:0}}@media screen and (max-width:768px){.cutin-dialogue-box{width:95%;padding:15px 20px;min-height:130px}.cutin-char-img{width:120px}.cutin-char-box{position:absolute;left:0;bottom:80%;margin-right:0;z-index:25}.cutin-text{font-size:.65rem}.cutin-name-tag{font-size:.6rem;padding:4px 10px;top:-20px}.cutin-slash-bg{height:50vh}}.about-layout{width:98vw!important;max-width:1600px!important;padding:20px!important;box-sizing:border-box;overflow:hidden;background:transparent!important;border:none!important;box-shadow:none!important}.about-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;border-bottom:4px solid #333;padding-bottom:10px}.about-layout .back-btn{margin-bottom:0;background:#fffc;padding:5px 10px;border-radius:5px}.about-title-style{background:#fffc;padding:5px 10px}.horizontal-scroll-container{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:40px;padding:20px 10px;align-items:stretch;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}.horizontal-scroll-container::-webkit-scrollbar{height:12px}.horizontal-scroll-container::-webkit-scrollbar-track{background:#ffffff80;border:2px solid #333}.horizontal-scroll-container::-webkit-scrollbar-thumb{background:#c7ceff;border:2px solid #333}.bento-card.fixed-size{flex:0 0 auto;width:400px;min-width:400px;height:450px;background:#fff;border:4px solid #333;padding:35px;box-sizing:border-box;display:flex;flex-direction:column;box-shadow:10px 10px #0000001a}.bento-title{font-size:.9rem;color:#888;margin-top:0;margin-bottom:25px;text-transform:uppercase;border-bottom:2px dashed #ccc;padding-bottom:8px;width:100%}.photo-section{padding:0!important;overflow:hidden;background:#c7ceff;align-items:center;justify-content:center}.photo-section img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}.pixel-list{list-style:none;padding:0;margin:0;font-size:.8rem;text-align:left;line-height:1.6}.pixel-list li{margin-bottom:20px;padding-left:15px;border-left:4px solid #C7CEFF}.hobbies-icons{display:flex;justify-content:space-around;font-size:3rem;margin-top:auto;margin-bottom:auto}.cv-section{justify-content:space-between}.cv-buttons{display:flex;gap:20px;margin-top:auto}.small-btn{padding:20px!important;font-size:.8rem!important;text-align:center!important;justify-content:center!important;flex:1}.contact-redirect{background:#fff;color:#333;cursor:pointer;justify-content:space-between}.contact-redirect p{margin-top:0;text-align:center;margin-bottom:auto}.contact-bottom{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:100%;margin-top:auto;gap:20px}.arrow-retro-move{font-size:4rem;color:#333;line-height:1;animation:retroBob 1s infinite steps(4)}@keyframes retroBob{0%{transform:translateY(0)}50%{transform:translateY(10px)}to{transform:translateY(0)}}.contact-btn{font-family:"Press Start 2P",cursive;color:#333;background:#d5e2ff;border:4px solid #333;box-shadow:6px 6px #000;transition:all .1s;cursor:pointer;text-transform:uppercase;display:inline-block;padding:15px 25px;font-size:1rem}.contact-btn:hover{background-color:#c7ceff;box-shadow:4px 4px #333;transform:translate(-2px,-2px)}.scroll-indicator{text-align:right;font-size:.7rem;color:#333;margin-top:5px;animation:blink 2s infinite;background:#ffffffb3;padding:5px;display:inline-block;border-radius:5px}@media screen and (max-width:768px){.about-layout{width:100%!important;padding:10px!important}.horizontal-scroll-container{padding:10px 5px;gap:20px}.bento-card.fixed-size{width:85vw;min-width:85vw;flex:0 0 85vw;height:60vh;min-height:400px;padding:20px}}