#root{width:100%;margin:0;padding:0}:root{--bg-color:#f4f4f9;--text-color:#040405;--card-bg:white;--title-color:#162636;--bio-color:#040405;--footer-bg:#cdcdcd;--footer-text:#333;--contact-bg:white;--timeline-bg:white;--input-border:#ddd;--label-color:#2c3e50}.dark{--bg-color:#0f1117;--text-color:#e0e0e0;--card-bg:#1e2130;--title-color:#c9d6e3;--bio-color:#e0e0e0;--footer-bg:#090b13;--footer-text:#aaa;--contact-bg:#1e2130;--timeline-bg:#1e2130;--input-border:#3a3f55;--label-color:#c9d6e3}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);width:100%;color:var(--text-color);margin:0;padding:0;transition:background-color .3s,color .3s}html{scroll-behavior:smooth;overflow-x:hidden}.App{flex-direction:column;display:flex}@keyframes shrink{0%{background-color:#1c1f34;padding:20px 5%}to{background-color:#1c1f34f2;padding:10px 1%;box-shadow:0 2px 10px #0000004d}}#header{color:#fff;z-index:1000;box-sizing:border-box;background-color:#1c1f34;justify-content:space-between;align-items:center;width:100%;animation:linear forwards shrink;animation-timeline:scroll(root);animation-range:0 150px;display:flex;position:sticky;top:0;left:0}@keyframes shrink-img{0%{width:80px;height:80px}to{width:50px;height:50px}}.profile-container img{object-fit:cover;object-position:center top;border:2px solid #e89528;border-radius:50%;width:80px;height:80px;animation:linear forwards shrink-img;animation-timeline:scroll(root);animation-range:0 150px}.left-side{align-items:center;gap:20px;display:flex}.info h1{color:#f1b76d;letter-spacing:1px;margin:0;font-size:1.8rem}.filiere{color:#f4f1f0;margin:5px 0 0 25px;font-size:1rem}.navbar{align-items:center;display:flex}.nav-links{gap:30px;margin:0;padding:0;list-style:none;display:flex}.nav-links a{color:#f4f1f0;font-size:.95rem;font-weight:500;text-decoration:none;transition:color .3s;position:relative}.nav-links a:after{content:"";background-color:#e89528;width:0%;height:2px;transition:width .3s;position:absolute;bottom:-4px;left:0}.nav-links a:hover:after{width:100%}.nav-links a:hover{color:#e89528}.theme-toggle{cursor:pointer;background:0 0;border:2px solid #e89528;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;margin-right:20px;font-size:1.1rem;transition:all .3s;display:flex}.theme-toggle:hover{background-color:#e8952826;transform:scale(1.15)}.right-side{align-items:center;gap:10px;display:flex}.list-contact{gap:35px;margin:0;padding:0;list-style:none;display:flex}.list-contact a{color:#f1b76d;font-size:1.5rem;transition:transform .3s,color .3s}.list-contact a:hover{color:#7e82a6;transform:translateY(-3px)}.content{flex-grow:1;width:100%;padding:50px;display:block}section{scroll-margin-top:110px}.section-title{color:var(--title-color);text-align:center;margin-bottom:2rem;padding-bottom:5px;font-size:2rem;transition:color .3s;display:block}.section-title:after{content:"★ ★ ★";text-align:center;color:#e89528;letter-spacing:5px;margin-top:8px;font-size:.8rem;display:block}.container{text-align:center;max-width:800px;margin:0 auto 70px;padding:0 20px}.biographie{text-align:justify;max-width:800px;color:var(--bio-color);margin:0 auto;font-size:18px;line-height:1.7;transition:color .3s}.competences-group{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;display:grid}.skill-icon{object-fit:contain;width:25px;height:25px}.competences-grid{grid-template-columns:repeat(3,1fr);align-items:start;gap:20px;padding:20px 0;display:grid}.competence-card{background:var(--card-bg);cursor:pointer;border-radius:10px;flex-direction:column;align-items:flex-start;gap:15px;margin-bottom:20px;padding:20px;transition:all .3s;display:flex;box-shadow:0 4px 6px #0000000d}.competence-card:hover{border-color:#d4a373;transform:translateY(-10px);box-shadow:0 15px 30px #0003}.competence-card:hover .progress{filter:brightness(1.2);box-shadow:0 0 10px #d4a37380}.competence-name{color:var(--title-color);margin:0;font-weight:700;transition:color .3s;display:block}.progress-bar{background-color:#e0e0e0;border-radius:6px;flex-grow:1;width:100%;height:12px;overflow:hidden}.progress{background-color:#e89528;border-radius:6px;width:0%;height:100%;transition:width 1.5s ease-in-out}.competence-card:hover .stars-container i{transform:scale(1.2)}.competence-card small{color:#606b6c;font-style:italic}.soft-skills-tags{flex-wrap:wrap;gap:8px;margin-bottom:12px;display:flex}.tag{color:#683737;background-color:#e8f4fd;border:1px solid #9fbed3;border-radius:20px;padding:4px 10px;font-size:.8rem;font-weight:700}.timeline{max-width:800px;margin:0 auto;padding:20px 0;position:relative}.timeline:before{content:"";background-color:#e89528;width:3px;height:100%;position:absolute;top:0;left:7px}.timeline-content h3:after{content:" ▾";color:#e89528;font-size:1.7rem}.timeline-item{margin-bottom:40px;padding-left:40px;position:relative}.timeline-cercle{z-index:1;background-color:#ececef;border:4px solid #1c1f34;border-radius:50%;width:18px;height:18px;position:absolute;top:5px;left:0}.timeline-content{background:var(--timeline-bg);border-radius:8px;padding:20px;transition:transform .3s,background .3s;box-shadow:0 4px 12px #00000014}.timeline-content:hover{border-left:5px solid #1c1f34;transform:translate(10px)}.timeline-content .date{color:#1c1f34;margin-bottom:5px;font-size:.9rem;font-weight:700;display:block}.timeline-content h3{color:#859eb7;margin-bottom:5px}.timeline-content h4{color:var(--text-color);margin-bottom:10px;font-size:1rem}.timeline-content p{color:#666;font-size:.95rem;line-height:1.5}.projects-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;max-width:1200px;padding:20px;display:grid}.project-card{background:var(--card-bg);-webkit-backdrop-filter:blur(10px);border:1px solid #ffffff1a;border-radius:20px;transition:all .4s cubic-bezier(.165,.84,.44,1);overflow:hidden;box-shadow:0 8px 32px #0003}.project-card:hover{border-color:#d4a373;transform:translateY(-10px);box-shadow:0 15px 40px #0006}.project-image{color:#d4a373;background:linear-gradient(45deg,#1a1a2e,#2c3e50);justify-content:center;align-items:center;height:120px;font-size:4.5rem;display:flex}.project-info{padding:25px}.project-info h3{color:var(--title-color);letter-spacing:.5px;margin-bottom:15px;font-size:1.3rem}.project-description{color:var(--text-color);height:70px;margin-bottom:20px;font-size:.9rem;line-height:1.5;overflow:hidden}.project-tech{flex-wrap:wrap;gap:8px;margin-bottom:25px;display:flex}.project-tech span{color:#e89528;text-transform:uppercase;background-color:#162636;border:1px solid #d4a3734d;border-radius:50px;padding:6px 14px;font-size:.7rem;font-weight:700}.btn-project{text-align:center;color:#d4a373;background-color:#0000;border:2px solid #d4a373;border-radius:10px;padding:12px;font-size:.9rem;font-weight:700;text-decoration:none;transition:all .3s;display:block}.btn-project:hover{color:#1a1a2e;background-color:#d4a373;box-shadow:0 0 15px #d4a37380}.contact-wrapper{background:var(--contact-bg);border-radius:15px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;padding:40px;transition:background .3s;display:grid;box-shadow:0 5px 20px #0000000d}.contact-details{margin-top:20px;list-style:none}.contact-details li{color:var(--text-color);align-items:center;gap:10px;margin-bottom:15px;display:flex}.contact-details i{color:#d4a373}.form-group{margin-bottom:20px;position:relative}.form-group label{color:var(--label-color);margin-bottom:8px;font-size:.9rem;font-weight:700;transition:color .3s;display:block}.form-group input,.form-group textarea{border:1px solid var(--input-border);background:var(--card-bg);width:100%;color:var(--text-color);border-radius:8px;padding:12px;font-family:inherit;transition:border-color .3s,background .3s}.form-group input:focus,.form-group textarea:focus{border-color:#d4a373;outline:none}.error-msg{color:#e74c3c;margin-top:5px;font-size:.8rem;display:none}.btn-submit{color:#fff;cursor:pointer;background-color:#2c3e50;border:none;border-radius:8px;width:100%;padding:12px 25px;font-weight:700;transition:background .3s}.btn-submit:hover{background-color:#d97511}#form-success{color:#fff;text-align:center;background-color:#2ecc71;border-radius:5px;margin-top:15px;padding:10px;display:none}.contact-form input,.contact-form textarea{border:2px solid #e2e8f0;outline:none;transition:all .3s}.footer{background-color:var(--footer-bg);width:100%;height:6rem;color:var(--footer-text);padding:1rem 0;font-family:Inter,-apple-system,sans-serif;transition:background-color .3s}.footer-name{color:#e89528;letter-spacing:.5px;font-weight:800}.footer-content{margin:1rem;font-weight:600}.reveal{opacity:0;transition:opacity .7s,transform .7s;transform:translateY(40px)}.reveal.visible{opacity:1;transform:translateY(0)}@media (width<=1024px){#header{flex-wrap:wrap;gap:10px;padding:15px 3%}.nav-links{gap:15px}.nav-links a{font-size:.85rem}.competences-grid,.projects-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){#header{flex-direction:column;align-items:center;gap:12px;padding:15px}.left-side{text-align:center;flex-direction:column;gap:10px}.info h1{font-size:1.3rem}.filiere{margin-left:0;font-size:.85rem}.nav-links{flex-wrap:wrap;justify-content:center;gap:12px}.nav-links a{font-size:.8rem}.list-contact{gap:20px}.content{padding:30px 15px}.container{margin-bottom:50px;padding:0 15px}.section-title{font-size:1.5rem}.biographie{font-size:16px}.competences-grid,.competences-group{grid-template-columns:1fr}.timeline{padding:10px 0}.timeline-content:hover{transform:none}.projects-grid{grid-template-columns:1fr;padding:10px}.contact-wrapper{grid-template-columns:1fr;padding:20px}.footer{text-align:center;height:auto;padding:20px 15px}.theme-toggle{margin-right:0}}@media (width<=480px){.profile-container img{width:60px;height:60px}.info h1{font-size:1.1rem}.nav-links{gap:8px}.nav-links a{font-size:.75rem}.section-title{font-size:1.3rem}.biographie{font-size:15px}.competence-card{padding:15px}.project-card{border-radius:12px}.btn-project{padding:10px;font-size:.85rem}}.lightbox{z-index:9999;cursor:pointer;background-color:#000000d9;justify-content:center;align-items:center;width:100%;height:100%;animation:.3s fadeIn;display:flex;position:fixed;top:0;left:0}.lightbox img{object-fit:cover;object-position:center top;border:3px solid #e89528;border-radius:50%;width:350px;height:350px;animation:.3s zoomIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}