body{position:relative;z-index:1;margin:0;padding:0;font-family:Georgia,sans-serif;background-color:#E3DCD2;text-align:center;overflow-x:hidden}html{scroll-behavior:smooth}.navbar{position:fixed;top:20px;left:50%;transform:translateX(-50%);width:85%;background-color:#e8e8e8;align-items:center;border-radius:15px;box-shadow:0 4px 6px rgba(0,0,0,.1);z-index:1000;transition:width .3s ease}.navbar,.navbar-container{display:flex;justify-content:space-around}.navbar-container{width:100%}.navbar-button{background:none;border:none;cursor:pointer;padding:10px;border-radius:50%;transition:background-color .3s ease}.navbar-button:hover{background-color:rgba(0,0,0,.1)}.navbar img{display:block}.navbar{width:50%;height:50px;border-radius:10px}.navbar img{width:24px;height:24px}#about,#competences,#contact,#experience,#presentation{margin-top:70px;text-align:center;padding:20px}.img-container{position:relative;width:400px;height:400px;margin:20px auto}#bottom-presentation{padding-top:30px}.img-container .main-img{width:100%;height:100%;object-fit:cover;border-radius:50%}.img-container .overlay{position:absolute;width:50px;height:50px}.img-container .top-left{top:10px;left:-30px}.img-container .top-right{top:10px;right:-30px}.img-container .bottom-right{bottom:10px;right:-30px}.download{position:relative;display:block;margin:20px auto;width:230px;height:60px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.09),inset 0 1px 0 rgba(255,255,255,.04),0 0 1px rgba(0,0,0,.3),0 0 10px rgba(0,0,0,.1);border-radius:100px;color:black;line-height:60px;text-align:center;letter-spacing:5px;overflow:hidden;transition:all .3s cubic-bezier(.67,.13,.1,.81),transform .15s cubic-bezier(.67,.13,.1,.81)}.download:hover{width:400px}.download:active{transform:translateY(3px)}.download:after,.download:before{position:absolute;top:0;left:0;width:100%;height:100%;opacity:1;transition:all .3s cubic-bezier(.67,.13,.1,.81)}.download:before{content:"Mon CV"}.download:after{content:"Cliquez pour voir mon CV";top:-60px;opacity:0}.download:hover:after{top:0;opacity:1}.download:hover:before{top:60px;opacity:0}#icons{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;justify-content:center}#avion,#painture,#velo{background-color:#BFBEBE;padding:20px;text-align:center;border-radius:20px}#titre{padding:30px;text-align:center}#about,#titre{align-items:center}#about{display:flex;flex-direction:row;justify-content:space-between;text-align:left;padding:50px 20px;gap:20px;width:80%;max-width:1000px;margin:0 auto;border-radius:15px}#text{flex:1;max-width:600px}#text>div{display:flex;flex-direction:row;align-items:center;gap:10px;margin-bottom:20px}#text>div img{width:auto;height:50px}#text>div p{font-weight:700;color:#333}#text p,#text>div p{font-size:1rem;text-align:center}#text p{color:#666;margin-top:20px;line-height:1.6}#photo{flex:1;display:flex;justify-content:center;align-items:center}#photo img{width:450px;height:auto;object-fit:cover;border-radius:25px}#competences{display:flex;flex-wrap:wrap;justify-content:space-between;align-content:center;flex-direction:column}#general{background:#d2d2d2;display:grid;grid-template-columns:repeat(2,1fr);margin:20px;width:50%}#general,#skill1{align-items:center;justify-content:center;gap:10px;padding:20px;border-radius:15px}#skill1{flex-direction:row-reverse;background-color:#D9D9D9;display:flex;flex-direction:row;justify-content:space-evenly;background-color:#d9d9d9;flex-wrap:wrap;width:85%}#skill1 img{width:auto;height:50px}#compete{display:flex;align-items:center;justify-content:center;gap:10px;flex-direction:column}#competences .frontend,#competences .langues,.backend,.outil{width:100%;max-width:150px}.progress-bar{width:100%;max-width:75px;height:10px;background-color:#e0e0e0;border-radius:5px;overflow:hidden;border:1px solid gray}.progress{height:100%;background:linear-gradient(90deg,#4caf50,#81c784);transition:width .5s ease-in-out}.portfolio{text-align:center;padding:40px;width:80%}#experience{display:flex;min-height:100vh;margin:50px 0;width:100%}#experience,.filters{justify-content:center;align-items:center}.filters{display:grid;gap:20px;margin-bottom:20px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));grid-template-rows:repeat(2,auto)}.filters button{padding:10px 20px;background-color:#f0f0f0;border:none;border-radius:25px;cursor:pointer;font-size:16px;transition:all .3s;box-shadow:0 4px 6px rgba(0,0,0,.1)}.category-btn.active{background-color:#4CAF50}.year-btn.active{background-color:#FF5722}.projects{display:grid;gap:70px;grid-template-columns:repeat(2,1fr);justify-content:center;justify-items:center;align-items:center;margin:20px}.project-card{padding:20px;border-radius:15px;width:100%;max-width:700px;text-align:left;background:#d3d3d3;transition:transform .3s ease,box-shadow .3s ease;font-size:22px}.project-card:hover{transform:scale(1.05);box-shadow:0 4px 6px rgba(0,0,0,.15)}.project-card h3{margin-bottom:10px;font-size:22px}.project-card p{font-size:17px}.tech{display:flex;align-items:center;gap:10px;margin-top:10px}.tech img{width:auto;height:30px}.project-media{display:flex;align-items:center;justify-content:center;margin:0 auto;width:100%;max-width:100%}.project-media video{display:block;margin:0 auto;width:100%;height:auto;object-fit:contain}.contact-section{padding:20px}.contact-form label{display:inline-block;white-space:nowrap;margin:5px}.contact-container{display:grid;grid-template-rows:1fr 1fr;grid-template-columns:250px auto;gap:70px;margin-top:20px;justify-content:center}.contact-card{background-color:#d3d3d3;padding:20px;border-radius:20px;text-align:center;width:250px}.contact-card a{text-decoration:none;color:black}.contact-card img{width:30px;margin-right:10px;vertical-align:middle}.contact-form{background-color:#d3d3d3;padding:20px;border-radius:20px;width:300px;text-align:left;grid-row:1/span 2;grid-column:2;display:flex;flex-direction:column;justify-content:center;align-items:center}.contact-form .form-group{display:flex;justify-content:space-between}#linkedincontact,#mailcontact{height:auto;width:80px}#home-icon-bas{padding:20px;align-items:center;display:flex}#home-icon-bas .maison{padding:20px}input,textarea{width:100%;margin-bottom:10px;padding:5px;border:1px solid #ccc;border-radius:5px}button.submit{background-color:#BFBEBE;border:none;padding:10px;width:100%;cursor:pointer;border-radius:5px}.footer{background-color:#d3d3d3;text-align:center;padding:20px 0;position:relative;border-top-left-radius:500px;border-top-right-radius:500px;width:100%;bottom:0}.author,.copyright{font-style:italic;margin:5px 0}#container{max-width:1920px;margin:0 auto;padding:0 20px}@media screen and (max-width:1400px){#general{width:85%}}@media screen and (max-width:768px){.navbar{width:50%;height:60px}.navbar-button img{width:24px;height:24px}.img-container{position:relative;width:300px;height:300px;margin:20px auto}#about{display:flex;flex-wrap:wrap;justify-content:space-between;align-content:center;flex-direction:column}#text>div img{width:auto;height:40px}#text>div p{font-size:1rem}#general{background:#d2d2d2;display:grid;grid-template-columns:1fr;align-items:center;justify-content:center;gap:10px;padding:20px;border-radius:15px;margin:20px;width:75%}.progress-bar{width:100%;max-width:75px;height:10px;background-color:#e0e0e0;border-radius:5px;overflow:hidden;border:1px solid gray}#competences .frontend,#competences .langues,.backend,.outil{width:30%;max-width:150px}#skill1 img{width:auto;height:100px}#skill1{column-gap:30px}.contact-container{grid-template-columns:1fr;grid-template-rows:auto;justify-items:center}.contact-form{grid-row:auto;grid-column:1;width:50%}.projects{display:grid;gap:70px;grid-template-columns:1fr;justify-content:center;justify-items:center;align-items:center;margin:20px}.filters{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width:425px){.navbar{width:90%;height:60px}.navbar-button img{width:24px;height:24px}.img-container{width:300px;height:300px}.img-container .overlay{position:absolute;width:40px;height:40px}#about{display:flex;flex-wrap:wrap;justify-content:space-between;align-content:center;flex-direction:column}#photo img{width:300px;height:auto}.progress-bar{width:100%;max-width:50px;height:10px;background-color:#e0e0e0;border-radius:5px;overflow:hidden;border:1px solid gray}#competences .frontend,#competences .langues,.backend,.outil{width:30%;max-width:150px}#skill1 img{width:auto;height:50px}.filters{grid-template-columns:1fr}}@media screen and (max-width:375px){.navbar{width:90%;height:60px}.navbar-button img{width:24px;height:24px}.img-container{width:250px;height:250px}.img-container .overlay{position:absolute;width:35px;height:35px}#about{display:flex;flex-wrap:wrap;justify-content:space-between;align-content:center;flex-direction:column}#photo img{width:250px;height:auto;border-radius:25px}#text>div img{width:auto;height:35px}#text>div p{font-size:.9rem}.progress-bar{width:100%;max-width:40px;height:10px;background-color:#e0e0e0;border-radius:5px;overflow:hidden;border:1px solid gray}#competences .frontend,#competences .langues,.backend,.outil{width:30%;max-width:150px}#skill1 img{width:auto;height:50px}}@media screen and (max-width:320px){.navbar{width:90%;height:60px}.navbar-button img{width:24px;height:24px}.img-container{width:200px;height:200px}.img-container .overlay{position:absolute;width:30px;height:30px}#about{display:flex;flex-wrap:wrap;justify-content:space-between;align-content:center;flex-direction:column}#photo img{width:250px;height:auto;border-radius:25px}#text>div img{width:auto;height:25px}#text>div p{font-size:.8rem}.progress-bar{width:100%;max-width:40px;height:10px;background-color:#e0e0e0;border-radius:5px;overflow:hidden;border:1px solid gray}#competences .frontend,#competences .langues,.backend,.outil{width:30%;max-width:150px}#skill1 img{width:auto;height:50px}}.popup{left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #333;background:#fff;padding:20px;z-index:1000;box-shadow:0 0 10px rgba(0,0,0,.1);max-width:80vw;max-height:80vh;overflow:auto}.popup,.popup-overlay{display:none;position:fixed}.popup-overlay{left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:999}.popup-overlay.show,.popup.show{display:block}body.dark-mode{background-color:#121212;color:#ffffff;overflow-x:hidden}.dark-mode .navbar{background-color:#333}.dark-mode .download{color:white}.dark-mode #avion,.dark-mode #painture,.dark-mode #velo{background:#333333}.dark-mode #text p{color:white}.dark-mode #general{background:#333333}.dark-mode #skill1{background:#444444}.dark-mode .project-card{background:#333333}.dark-mode .contact-card,.dark-mode .contact-form,.dark-mode .footer{background-color:#333333}.dark-mode .contact-card a{color:white}@keyframes fadeIn{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.animate{animation:fadeIn 1s ease-out forwards}#experience{opacity:0;transition:opacity 1s ease}#experience.visible{opacity:1}