@import"https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Orbitron:wght@400;500;700&display=swap";:root{--wii-blue: #0095DD;--wii-blue-dark: #004080;--wii-blue-light: #4DB8FF;--wii-gray-light: #F8F8F8;--wii-gray-medium: #E8E8E8;--wii-gray-dark: #8C8C8C;--wii-border: #CCCCCC;--wii-shadow: rgba(0, 0, 0, .2);--wii-glow: rgba(0, 149, 221, .3)}.wii-cursor{position:fixed;width:24px;height:24px;pointer-events:none;z-index:10000;transform:translate(-50%,-50%);transition:transform .1s ease-out;filter:drop-shadow(2px 2px 3px rgba(0,0,0,.3))}.wii-cursor-dot{position:absolute;width:8px;height:8px;background:var(--wii-blue);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #fff;animation:cursorPulse 1.5s ease-in-out infinite}.wii-cursor-ring{position:absolute;width:24px;height:24px;border:2px solid var(--wii-blue);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.6;animation:cursorRing 2s linear infinite}@keyframes cursorPulse{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.2)}}@keyframes cursorRing{0%{transform:translate(-50%,-50%) rotate(0) scale(1);opacity:.6}to{transform:translate(-50%,-50%) rotate(360deg) scale(1.2);opacity:0}}.wii-system{position:fixed;top:0;left:0;width:100vw;height:100vh;font-family:Source Sans Pro,Nintendo DS BIOS,Segoe UI,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:manipulation;cursor:none!important}.wii-background{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--wii-gray-light) 0%,#F0F0F0 25%,var(--wii-gray-medium) 50%,#F0F0F0 75%,var(--wii-gray-light) 100%);z-index:-1;overflow:hidden}.wii-background:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle at 20% 80%,rgba(0,149,221,.03) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(0,64,128,.03) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(255,255,255,.05) 0%,transparent 50%);animation:backgroundFloat 30s ease-in-out infinite}.wii-background:after{content:"";position:absolute;top:0;left:0;width:100%;height:200%;background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,.015) 1px,rgba(0,0,0,.015) 2px);animation:scanLines 20s linear infinite;pointer-events:none}@keyframes backgroundFloat{0%,to{transform:translate(0) scale(1)}33%{transform:translate(-1%,1%) scale(1.01)}66%{transform:translate(1%,-1%) scale(.99)}}@keyframes scanLines{0%{transform:translateY(0)}to{transform:translateY(-50%)}}.wii-header{position:absolute;top:max(15px,3vh);left:0;width:100%;display:flex;justify-content:space-between;padding:0 max(20px,5vw);color:#333;font-size:clamp(14px,4vw,18px);font-weight:600;text-shadow:1px 1px 2px rgba(255,255,255,.9);z-index:10;animation:headerSlideDown .8s ease-out;background:#ffffff1a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:12px max(20px,5vw);border-radius:0 0 15px 15px}@keyframes headerSlideDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.wii-date{font-size:clamp(12px,3.5vw,16px);opacity:.9;font-weight:500;position:relative;padding-left:20px}.wii-date:before{content:"📅";position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:14px;opacity:.7}.wii-clock{font-size:clamp(14px,4vw,18px);font-weight:700;color:var(--wii-blue-dark);position:relative;padding-right:20px}.wii-clock:after{content:"🕒";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:14px;opacity:.7;animation:clockPulse 2s ease-in-out infinite}@keyframes clockPulse{0%,to{opacity:.7}50%{opacity:1}}.wii-channels-grid{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:clamp(15px,3vw,28px);padding:clamp(20px,5vw,40px);width:95%;max-width:900px;height:70vh;align-items:center;justify-items:center;animation:gridAppear 1s ease-out;perspective:1000px}@keyframes gridAppear{0%{opacity:0;transform:translate(-50%,-50%) scale(.9) rotateX(10deg)}to{opacity:1;transform:translate(-50%,-50%) scale(1) rotateX(0)}}.wii-channel{position:relative;width:clamp(100px,25vw,180px);height:clamp(70px,18vw,120px);background:linear-gradient(145deg,#fff,#f8f8f8,#f0f0f0);border:2px solid var(--wii-gray-dark);border-radius:14px;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:none;transition:all .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 4px 8px #0000001a,inset 0 1px #ffffffe6,inset 0 -1px #0000000d;overflow:hidden;-webkit-tap-highlight-color:transparent;transform-style:preserve-3d;animation:channelFloat 3s ease-in-out infinite;animation-delay:calc(var(--channel-index) * .1s)}@keyframes channelFloat{0%,to{transform:translateY(0) rotateX(0)}50%{transform:translateY(-5px) rotateX(5deg)}}.wii-channel:before{content:"";position:absolute;top:0;left:0;right:0;height:40%;background:linear-gradient(135deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.2) 50%,transparent 100%);border-radius:12px 12px 0 0;transition:all .3s ease}.wii-channel:after{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;background:radial-gradient(circle at center,var(--wii-glow) 0%,transparent 70%);transform:translate(-50%,-50%) scale(0);opacity:0;transition:transform .3s ease,opacity .3s ease;z-index:-1}.wii-channel:hover{border-color:var(--wii-blue);transform:translateY(-8px) scale(1.05) rotateX(5deg);box-shadow:0 8px 20px #0095dd40,0 0 0 3px #0095dd1a,inset 0 1px #fffffff2}.wii-channel:hover:before{height:50%;background:linear-gradient(135deg,#fffc,#ffffff4d)}.wii-channel:hover:after{transform:translate(-50%,-50%) scale(1);opacity:1}.wii-channel.selected{border-color:var(--wii-blue);background:linear-gradient(145deg,#fff,#e8f4ff,#d0e9ff);box-shadow:0 0 0 4px #0095dd33,0 12px 24px #0095dd4d,inset 0 1px #fffffff2;animation:selectedPulse 1.5s ease-in-out infinite}@keyframes selectedPulse{0%,to{box-shadow:0 0 0 4px #0095dd33,0 12px 24px #0095dd4d,inset 0 1px #fffffff2}50%{box-shadow:0 0 0 6px #0095dd4d,0 16px 32px #0095dd66,inset 0 1px #fff}}.channel-icon{font-size:clamp(26px,7vw,40px);margin-bottom:clamp(4px,1vw,8px);filter:drop-shadow(2px 2px 3px rgba(0,0,0,.15));transition:all .3s ease;position:relative;z-index:2}.wii-channel:hover .channel-icon{transform:scale(1.1) rotate(5deg);filter:drop-shadow(3px 3px 4px rgba(0,0,0,.2))}.wii-channel.selected .channel-icon{animation:iconFloat 2s ease-in-out infinite}@keyframes iconFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.channel-label{font-size:clamp(11px,3vw,14px);font-weight:700;color:var(--wii-blue-dark);text-align:center;text-shadow:1px 1px 2px rgba(255,255,255,.9);padding:0 clamp(4px,1.5vw,8px);line-height:1.3;letter-spacing:.3px;word-wrap:break-word;max-width:90%;transition:all .3s ease;position:relative;z-index:2}.wii-channel:hover .channel-label{color:var(--wii-blue);transform:translateY(2px);text-shadow:2px 2px 3px rgba(255,255,255,.95)}.channel-link{text-decoration:none;display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:relative;z-index:1}.wii-footer{position:absolute;bottom:0;left:0;width:100%;padding:clamp(12px,3vh,18px) 0;background:linear-gradient(to top,rgba(0,0,0,.1) 0%,transparent 100%);border-top:1px solid rgba(0,0,0,.15);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:footerSlideUp .8s ease-out .2s both}@keyframes footerSlideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.wii-controls{display:flex;justify-content:space-between;align-items:center;padding:0 clamp(25px,6vw,50px);color:#666}.wii-speakers{display:flex;gap:6px;animation:speakerPulse 2s ease-in-out infinite}@keyframes speakerPulse{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}.speaker{width:3px;height:clamp(14px,4vh,20px);background:linear-gradient(to top,var(--wii-blue) 0%,var(--wii-blue-light) 50%,var(--wii-blue) 100%);border-radius:2px;box-shadow:0 0 3px #0095dd4d;animation:speakerSound 1.5s ease-in-out infinite;animation-delay:calc(var(--speaker-index) * .2s)}@keyframes speakerSound{0%,to{height:clamp(14px,4vh,20px)}50%{height:clamp(18px,5vh,26px)}}.wii-battery{font-size:clamp(11px,3vw,14px);color:var(--wii-blue);letter-spacing:2px;font-weight:700;position:relative;padding:6px 12px;background:#ffffff1a;border-radius:20px;border:1px solid rgba(0,149,221,.2);animation:batteryCharge 4s ease-in-out infinite}.wii-battery:before{content:"🔋 ";margin-right:4px;animation:batteryIcon 3s ease-in-out infinite}@keyframes batteryCharge{0%,to{opacity:.8}50%{opacity:1}}@keyframes batteryIcon{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.wii-instructions{position:absolute;bottom:clamp(45px,9vh,60px);left:50%;transform:translate(-50%);color:var(--wii-blue-dark);font-size:clamp(11px,2.8vw,13px);text-align:center;text-shadow:1px 1px 2px rgba(255,255,255,.9);padding:10px 20px;background:#ffffff26;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:20px;border:1px solid rgba(0,149,221,.2);animation:instructionsFloat 4s ease-in-out infinite,fadeIn 1s ease-out .5s both;white-space:nowrap;max-width:90%;overflow:hidden}@keyframes instructionsFloat{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-5px)}}.wii-instructions:before{content:"🎮 ";margin-right:6px;animation:controllerPulse 2s ease-in-out infinite}@keyframes controllerPulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.selection-glow{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(0,149,221,.3) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:1}.wii-channel:hover .selection-glow{opacity:1}@media (max-width: 768px){.wii-channels-grid{grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,18px)}.wii-channel{width:clamp(95px,23vw,160px);height:clamp(65px,17vw,110px)}.wii-instructions{white-space:normal;padding:8px 16px}}@media (max-width: 480px){.wii-channels-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr);gap:clamp(10px,3vw,15px);padding:15px}.wii-channel{width:clamp(90px,42vw,150px);height:clamp(65px,28vw,105px)}.wii-header{flex-direction:column;gap:6px;text-align:center;padding:10px max(15px,4vw)}.wii-instructions{font-size:10px;bottom:40px;padding:6px 12px}}@media (orientation: landscape) and (max-height: 500px){.wii-channels-grid{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);height:60vh;gap:10px}.wii-channel{width:clamp(75px,19vw,130px);height:clamp(55px,15vw,90px)}.wii-instructions{bottom:30px;font-size:10px}}@media (prefers-color-scheme: dark){:root{--wii-gray-light: #2A2A2A;--wii-gray-medium: #333;--wii-gray-dark: #555}.wii-background{background:linear-gradient(135deg,var(--wii-gray-light) 0%,#333 25%,#3A3A3A 50%,#333 75%,var(--wii-gray-light) 100%)}.wii-channel{background:linear-gradient(145deg,#3a3a3a,#333,#2a2a2a);border-color:#555}.channel-label,.wii-header{color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.wii-instructions{color:#ddd;background:#0000004d}}:root{--wii-blue: #0095dd;--wii-blue-dark: #004080;--wii-blue-light: #b0dcff;--wii-gray: #f0f0f0;--wii-border: #cccccc;--wii-shadow: rgba(0, 149, 221, .15);--transition-fast: .2s ease;--transition-medium: .3s ease;--transition-slow: .5s ease;--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 20px;--border-radius-xl: 30px}html,body,#root{height:100%;margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,var(--wii-blue) 0%,var(--wii-blue-dark) 100%);color:#333;overflow-x:hidden;scroll-behavior:smooth}.portfolio-container{width:100vw;min-height:100vh;margin:0;padding:0;background:#fff;border-radius:0;box-shadow:none;position:relative;overflow:hidden}.portfolio-container:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 80%,rgba(0,149,221,.05) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(0,64,128,.05) 0%,transparent 50%);z-index:-1;pointer-events:none}.portfolio-header{padding:40px 20px 20px;background:linear-gradient(135deg,var(--wii-blue) 0%,var(--wii-blue-dark) 100%);margin-bottom:40px;position:relative;overflow:hidden}.portfolio-header:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%)}.profile-card{display:flex;align-items:center;gap:30px;max-width:1200px;margin:0 auto;color:#fff;position:relative;z-index:2}.avatar-placeholder{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,#ffffff4d,#ffffff1a);display:flex;align-items:center;justify-content:center;font-size:3rem;border:4px solid white;box-shadow:0 8px 25px #0003;transition:all var(--transition-medium);cursor:pointer;animation:float 3s ease-in-out infinite}.avatar-placeholder:hover{transform:scale(1.05) rotate(5deg);box-shadow:0 12px 35px #0000004d}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.profile-info{flex:1;animation:slideInRight .8s ease-out}@keyframes slideInRight{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}.main-title{font-size:clamp(2rem,5vw,2.5rem);margin:0 0 10px;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.2);position:relative;display:inline-block}.main-title:after{content:"";position:absolute;bottom:-5px;left:0;width:0;height:2px;background:#fff;transition:width var(--transition-medium)}.profile-info:hover .main-title:after{width:100%}.subtitle{font-size:clamp(1.1rem,3vw,1.3rem);margin:0 0 20px;opacity:.9;animation:fadeIn 1s ease-out .3s both}@keyframes fadeIn{0%{opacity:0}to{opacity:.9}}.badges{display:flex;gap:10px;flex-wrap:wrap;animation:fadeIn 1s ease-out .5s both}.badge{background:linear-gradient(135deg,#fff3,#ffffff1a);padding:8px 16px;border-radius:var(--border-radius-lg);font-size:.9rem;border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all var(--transition-fast);cursor:pointer;position:relative;overflow:hidden}.badge:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left var(--transition-medium)}.badge:hover{transform:translateY(-2px);box-shadow:0 5px 15px #0003}.badge:hover:before{left:100%}.portfolio-content{display:flex;flex-direction:column;gap:50px;max-width:1200px;margin:0 auto;padding:0 20px 40px;position:relative}.portfolio-section{opacity:0;transform:translateY(30px);animation:fadeInSlide .8s forwards;transition:transform var(--transition-medium)}.portfolio-section:hover{transform:translateY(-5px)}.section-title{font-size:clamp(1.5rem,4vw,1.8rem);display:flex;align-items:center;gap:12px;margin-bottom:25px;color:var(--wii-blue-dark);border-bottom:3px solid var(--wii-blue);padding-bottom:10px;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.section-title:before{content:"";position:absolute;bottom:-3px;left:0;width:0;height:3px;background:var(--wii-blue-light);transition:width var(--transition-medium)}.section-title:hover:before{width:100%}.section-icon{font-size:2rem;transition:transform var(--transition-fast)}.section-title:hover .section-icon{transform:scale(1.1) rotate(5deg)}.presentation-text{font-size:clamp(1.1rem,3vw,1.3rem);color:var(--wii-blue-dark);font-weight:600;margin-bottom:20px;padding:10px;border-left:4px solid var(--wii-blue);background:linear-gradient(90deg,rgba(0,149,221,.05) 0%,transparent 100%);border-radius:0 var(--border-radius-md) var(--border-radius-md) 0}.details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px}.detail-item{background:linear-gradient(135deg,var(--wii-gray) 0%,#f8f8f8 100%);padding:15px;border-radius:var(--border-radius-md);border-left:4px solid var(--wii-blue);opacity:0;transform:translate(-20px);animation:fadeInSlide .8s forwards;transition:all var(--transition-medium);cursor:pointer;position:relative;overflow:hidden}.detail-item:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,149,221,.1),transparent);transition:left var(--transition-medium)}.detail-item:hover{transform:translate(-15px) scale(1.02);box-shadow:0 10px 20px var(--wii-shadow)}.detail-item:hover:before{left:100%}.skills-container{display:flex;flex-direction:column;gap:25px}.skill-category{background:linear-gradient(135deg,var(--wii-gray) 0%,#f8f8f8 100%);padding:20px;border-radius:var(--border-radius-lg);transition:all var(--transition-medium);position:relative;overflow:hidden}.skill-category:hover{transform:translateY(-5px);box-shadow:0 15px 30px var(--wii-shadow)}.skill-category:after{content:"";position:absolute;top:0;left:0;width:4px;height:0;background:var(--wii-blue);transition:height var(--transition-medium)}.skill-category:hover:after{height:100%}.category-title{color:var(--wii-blue-dark);margin-bottom:15px;font-size:1.3rem;position:relative;display:inline-block}.category-title:after{content:"";position:absolute;bottom:-3px;left:0;width:0;height:2px;background:var(--wii-blue);transition:width var(--transition-medium)}.skill-category:hover .category-title:after{width:100%}.skills-list{display:flex;flex-wrap:wrap;gap:10px}.skill-tag{background:linear-gradient(135deg,var(--wii-blue) 0%,#0080cc 100%);color:#fff;padding:8px 16px;border-radius:var(--border-radius-lg);font-size:.9rem;transition:all var(--transition-fast);cursor:pointer;position:relative;overflow:hidden;border:none}.skill-tag:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left var(--transition-medium)}.skill-tag:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 20px #0095dd4d}.skill-tag:hover:before{left:100%}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.project-card{background:#fff;border:2px solid var(--wii-border);border-radius:var(--border-radius-lg);padding:20px;transition:all var(--transition-medium);opacity:0;transform:translateY(20px);animation:fadeInSlide .8s forwards;position:relative;overflow:hidden;cursor:pointer}.project-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,var(--wii-blue),var(--wii-blue-light));transform:scaleX(0);transform-origin:left;transition:transform var(--transition-medium)}.project-card:hover{border-color:var(--wii-blue);transform:translateY(-10px) scale(1.02);box-shadow:0 20px 40px var(--wii-shadow)}.project-card:hover:before{transform:scaleX(1)}.project-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px;gap:10px}.project-name{flex:1;margin:0;color:var(--wii-blue-dark);font-size:clamp(1.1rem,3vw,1.3rem);transition:color var(--transition-fast)}.project-card:hover .project-name{color:var(--wii-blue)}.project-status{padding:6px 14px;border-radius:var(--border-radius-lg);font-size:.8rem;font-weight:600;white-space:nowrap;transition:all var(--transition-fast)}.project-status.terminé{background:linear-gradient(135deg,#e8f5e8,#d0e6d0);color:#2e7d32}.project-status.en-cours{background:linear-gradient(135deg,#fff3e0,#ffe0b2);color:#f57c00}.project-status.en-maintenance{background:linear-gradient(135deg,#e3f2fd,#bbdefb);color:#1565c0}.project-status.à-venir{background:linear-gradient(135deg,#f3e5f5,#e1bee7);color:#7b1fa2}.project-card:hover .project-status{transform:scale(1.1)}.project-entreprise{color:#666;margin:5px 0 10px;font-size:.9rem;font-weight:500;transition:color var(--transition-fast)}.project-card:hover .project-entreprise{color:var(--wii-blue)}.project-description{color:#666;margin-bottom:15px;line-height:1.5;font-size:clamp(.9rem,2vw,1rem);transition:color var(--transition-fast)}.project-card:hover .project-description{color:#333}.project-date{color:#888;margin-bottom:10px;font-size:.85rem;transition:color var(--transition-fast)}.project-card:hover .project-date{color:var(--wii-blue)}.project-technologies{display:flex;flex-wrap:wrap;gap:8px}.tech-tag{background:linear-gradient(135deg,var(--wii-gray) 0%,#e8e8e8 100%);padding:4px 12px;border-radius:var(--border-radius-md);font-size:.8rem;color:var(--wii-blue-dark);transition:all var(--transition-fast)}.project-card:hover .tech-tag{background:linear-gradient(135deg,var(--wii-blue-light) 0%,#a0d0ff 100%);transform:translateY(-2px)}.timeline{position:relative;padding-left:30px}.timeline:before{content:"";position:absolute;left:15px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--wii-blue) 0%,transparent 100%);animation:timelineGrow 2s ease-out}@keyframes timelineGrow{0%{height:0}to{height:100%}}.timeline-item{position:relative;margin-bottom:30px;opacity:0;transform:translate(-20px);animation:fadeInSlide .8s forwards;cursor:pointer}.timeline-item:hover .timeline-year{transform:scale(1.1) rotate(5deg);box-shadow:0 8px 20px #0095dd4d}.timeline-marker{position:absolute;left:-30px;top:0;z-index:2}.timeline-year{background:linear-gradient(135deg,var(--wii-blue) 0%,#0080cc 100%);color:#fff;padding:8px 12px;border-radius:var(--border-radius-lg);font-weight:600;font-size:.9rem;white-space:nowrap;transition:all var(--transition-medium);box-shadow:0 4px 15px #0095dd33}.timeline-content{background:linear-gradient(135deg,var(--wii-gray) 0%,#f8f8f8 100%);padding:20px;border-radius:var(--border-radius-md);margin-left:20px;transition:all var(--transition-medium);position:relative;overflow:hidden}.timeline-content:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,149,221,.1),transparent);transition:left var(--transition-medium)}.timeline-item:hover .timeline-content{transform:translate(10px);box-shadow:0 10px 25px var(--wii-shadow)}.timeline-item:hover .timeline-content:before{left:100%}.timeline-title{margin:0 0 5px;color:var(--wii-blue-dark);font-size:clamp(1.1rem,3vw,1.3rem);transition:color var(--transition-fast)}.timeline-item:hover .timeline-title{color:var(--wii-blue)}.timeline-subtitle{margin:0 0 10px;font-weight:600;color:#666;transition:color var(--transition-fast)}.timeline-item:hover .timeline-subtitle{color:#333}.timeline-description{margin:0;color:#666;line-height:1.5;transition:color var(--transition-fast)}.timeline-item:hover .timeline-description{color:#444}.veille-container{display:flex;flex-direction:column;gap:20px}.veille-topic{background:linear-gradient(135deg,var(--wii-gray) 0%,#f8f8f8 100%);padding:20px;border-radius:var(--border-radius-md);border-left:4px solid var(--wii-blue);opacity:0;transform:translate(-20px);animation:fadeInSlide .8s forwards;transition:all var(--transition-medium);cursor:pointer;position:relative;overflow:hidden}.veille-topic:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,149,221,.1),transparent);transition:left var(--transition-medium)}.veille-topic:hover{transform:translate(-10px) translateY(-5px);box-shadow:0 15px 30px var(--wii-shadow)}.veille-topic:hover:before{left:100%}.topic-title{margin:0 0 10px;color:var(--wii-blue-dark);font-size:clamp(1.1rem,3vw,1.3rem);transition:color var(--transition-fast)}.veille-topic:hover .topic-title{color:var(--wii-blue)}.topic-description{margin:0 0 10px;color:#666;line-height:1.5;transition:color var(--transition-fast)}.veille-topic:hover .topic-description{color:#333}.ressources-list{font-size:.9rem;color:#666;transition:color var(--transition-fast)}.veille-topic:hover .ressources-list{color:#444}.contact-content{text-align:center;position:relative;padding:30px;background:linear-gradient(135deg,#f0f0f0cc,#ffffffe6);border-radius:var(--border-radius-lg);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(0,149,221,.1)}.contact-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:25px}.contact-item{background:linear-gradient(135deg,#fff,#fafafa);padding:15px;border-radius:var(--border-radius-md);font-weight:500;text-align:center;transition:all var(--transition-medium);cursor:pointer;position:relative;overflow:hidden;border:1px solid rgba(0,149,221,.1)}.contact-item:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,149,221,.1),transparent);transition:left var(--transition-medium)}.contact-item:hover{transform:translateY(-5px);box-shadow:0 10px 25px var(--wii-shadow);border-color:var(--wii-blue)}.contact-item:hover:before{left:100%}.contact-cta{font-size:clamp(1rem,3vw,1.1rem);color:var(--wii-blue-dark);margin-bottom:25px;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.contact-buttons{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.cta-button{background:linear-gradient(135deg,var(--wii-blue) 0%,#0080cc 100%);color:#fff;padding:12px 24px;border-radius:var(--border-radius-xl);text-decoration:none;font-weight:600;transition:all var(--transition-medium);border:2px solid transparent;font-size:clamp(.9rem,2vw,1rem);position:relative;overflow:hidden;box-shadow:0 5px 20px #0095dd4d}.cta-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left var(--transition-medium)}.cta-button:hover{background:#fff;color:var(--wii-blue);transform:translateY(-5px) scale(1.05);box-shadow:0 15px 30px #0095dd66;border-color:var(--wii-blue)}.cta-button:hover:before{left:100%}.cta-button.secondary{background:linear-gradient(135deg,#fff,#fafafa);color:var(--wii-blue);border:2px solid var(--wii-blue)}.cta-button.secondary:hover{background:linear-gradient(135deg,var(--wii-blue) 0%,#0080cc 100%);color:#fff;border-color:transparent}.portfolio-footer{text-align:center;margin-top:50px;padding:20px;border-top:2px solid var(--wii-gray);color:#666;font-size:.9rem;background:linear-gradient(135deg,var(--wii-gray) 0%,#e8e8e8 100%);position:relative;overflow:hidden}.portfolio-footer:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--wii-blue),transparent);animation:slideIn 3s infinite linear}@keyframes slideIn{0%{left:-100%}to{left:100%}}@keyframes fadeInSlide{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.menu-button-container{text-align:center;margin-top:20px;animation:fadeIn 1s ease-out .7s both}.menu-button{background:linear-gradient(135deg,var(--wii-blue) 0%,var(--wii-blue-dark) 100%);color:#fff;border:none;border-radius:var(--border-radius-xl);padding:12px 20px;font-size:1rem;font-weight:600;cursor:pointer;box-shadow:0 4px 20px #0095dd4d;transition:all var(--transition-medium);position:relative;overflow:hidden;text-decoration:none;display:inline-block}.menu-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left var(--transition-medium)}.menu-button:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 10px 30px #0095dd80}.menu-button:hover:before{left:100%}.scroll-indicator{position:fixed;bottom:20px;right:20px;width:50px;height:50px;background:var(--wii-blue);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;cursor:pointer;opacity:0;transform:translateY(20px);transition:all var(--transition-medium);z-index:1000;box-shadow:0 5px 15px #0095dd4d}.scroll-indicator.visible{opacity:1;transform:translateY(0)}.scroll-indicator:hover{transform:translateY(-5px) scale(1.1);box-shadow:0 10px 25px #0095dd80}@media (max-width: 768px){.portfolio-header{padding:30px 15px 15px}.profile-card{flex-direction:column;text-align:center;gap:20px}.portfolio-content{padding:0 15px 30px;gap:40px}.projects-grid{grid-template-columns:1fr}.contact-buttons{flex-direction:column;align-items:center}.cta-button{width:100%;max-width:250px}.timeline:before{left:10px}.timeline-marker{left:-25px}.details-grid{grid-template-columns:1fr}.skills-list{justify-content:center}}@media (max-width: 480px){.portfolio-header{padding:20px 10px 10px}.portfolio-content{padding:0 10px 20px;gap:30px}.avatar-placeholder{width:100px;height:100px;font-size:2.5rem}.section-title{font-size:1.3rem}.project-card,.skill-category,.veille-topic,.contact-item{padding:15px}.timeline{padding-left:20px}.timeline-marker{left:-20px}}@media (hover: none) and (pointer: coarse){.project-card:hover,.skill-tag:hover,.cta-button:hover,.detail-item:hover,.timeline-item:hover .timeline-content,.contact-item:hover{transform:none}}.about-container{width:100vw;min-height:100vh;margin:0;padding:2rem 1rem;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:none;position:relative}.about-container:before{content:"";position:absolute;inset:0;background:#fffffff2;z-index:0}.about-content{position:relative;z-index:1;max-width:1200px;margin:0 auto}.about-title{text-align:center;margin-bottom:3rem;color:#2c3e50;font-size:clamp(2rem,5vw,3.5rem);text-shadow:1px 1px 2px rgba(0,0,0,.1);padding:0 1rem}.faq-section{display:grid;grid-template-columns:1fr;gap:1rem;padding:0 1rem}@media (min-width: 768px){.faq-section{grid-template-columns:repeat(2,1fr);gap:2rem}}.faq-item{background:#fff;border-radius:16px;padding:0;margin-bottom:0;border:none;box-shadow:0 4px 15px #0000001a;transition:transform .3s ease,box-shadow .3s ease;overflow:hidden}.faq-item:hover{transform:translateY(-5px);box-shadow:0 8px 25px #00000026}.faq-question{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:none;font-size:clamp(1.1rem,3vw,1.4rem);font-weight:600;cursor:pointer;width:100%;text-align:left;padding:1.5rem;transition:all .3s ease;color:#2c3e50;display:flex;justify-content:between;align-items:center;position:relative}.faq-question:after{content:"+";font-size:1.5rem;font-weight:300;color:#3498db;transition:transform .3s ease}.faq-question.active:after{content:"−";transform:rotate(0)}.faq-question:hover{background:linear-gradient(135deg,#e9ecef,#dee2e6);color:#3498db;transform:none}.faq-answer{padding:0;max-height:0;overflow:hidden;transition:all .4s ease-in-out;background:#fff}.faq-answer.open{padding:1.5rem;max-height:500px}.faq-answer-content{color:#34495e;font-size:clamp(1rem,2.5vw,1.2rem);line-height:1.7;animation:fadeIn .4s ease-in-out}@media (max-width: 767px){.about-container{padding:1rem .5rem}.faq-section{grid-template-columns:1fr;gap:1rem;padding:0 .5rem}.faq-question{padding:1.2rem 1rem;font-size:1.1rem}.faq-answer.open{padding:1rem}.faq-answer-content{font-size:1rem;line-height:1.6}}@media (min-width: 768px) and (max-width: 1024px){.about-container{padding:1.5rem}.faq-section{grid-template-columns:1fr;gap:1.5rem}.faq-question,.faq-answer.open{padding:1.3rem 1.5rem}}@media (min-width: 1200px){.about-container{padding:3rem 2rem}.faq-section{grid-template-columns:repeat(2,1fr);gap:2.5rem}}@media (prefers-reduced-motion: reduce){.faq-item,.faq-question,.faq-answer{transition:none;animation:none}}@media (hover: none) and (pointer: coarse){.faq-question:hover{background:linear-gradient(135deg,#f8f9fa,#e9ecef);color:#2c3e50}.faq-item:hover{transform:none}.faq-question{padding:1.5rem;min-height:60px;display:flex;align-items:center}}.cuillere-bot{max-width:600px;margin:2rem auto;padding:1rem;background:#f0f8ff;border-radius:10px;font-family:Segoe UI,sans-serif;box-shadow:0 0 10px #0000001a}.chat-box{max-height:400px;overflow-y:auto;margin-bottom:1rem}.message{margin:.5rem 0}.message.user{text-align:right;color:#0078d7}.message.assistant{text-align:left;color:#333}.chat-input{display:flex;gap:.5rem}.chat-input input{flex:1;padding:.5rem;border-radius:5px;border:1px solid #ccc}.chat-input button{padding:.5rem 1rem;background-color:#0078d7;color:#fff;border:none;border-radius:5px;cursor:pointer}:root{--pokemon-fire: #F08030;--pokemon-water: #6890F0;--pokemon-grass: #78C850;--pokemon-electric: #F8D030;--pokemon-ice: #98D8D8;--pokemon-ground: #E0C068;--pokemon-flying: #A890F0;--pokemon-fighting: #C03028;--pokemon-psychic: #F85888;--pokemon-dark: #705848;--pokemon-fairy: #EE99AC;--pokemon-rock: #B8A038;--pokemon-bug: #A8B820;--pokemon-steel: #B8B8D0;--pokemon-ghost: #705898;--pokemon-poison: #A040A0;--pokemon-dragon: #7038F8;--pokemon-normal: #A8A878;--transition-fast: .2s ease;--transition-medium: .3s ease;--transition-slow: .5s ease}.pokemon-types-container{width:100vw;min-height:100vh;text-align:center;padding:clamp(1rem,3vw,2rem);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;animation:fadeIn 1s ease-in-out;font-family:Segoe UI,sans-serif;margin:0;position:relative;overflow:hidden}.pokemon-types-container:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 20% 80%,rgba(255,255,255,.9) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,255,255,.7) 0%,transparent 50%),linear-gradient(135deg,#e9f3ff,#f9fbff);z-index:-2;pointer-events:none}.pokemon-types-container:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="%23F08030" opacity="0.1"/><circle cx="80" cy="30" r="1.5" fill="%236890F0" opacity="0.1"/><circle cx="40" cy="70" r="1.8" fill="%2378C850" opacity="0.1"/><circle cx="60" cy="50" r="1.2" fill="%23F8D030" opacity="0.1"/><circle cx="10" cy="90" r="2.2" fill="%23705898" opacity="0.1"/><circle cx="90" cy="80" r="1.7" fill="%23EE99AC" opacity="0.1"/></svg>');background-size:200px 200px;animation:floatParticles 40s linear infinite;z-index:-1;pointer-events:none;opacity:.5}@keyframes floatParticles{0%{transform:translate(0)}to{transform:translate(-100px,100px)}}.pokemon-types-container h1{font-size:clamp(1.8rem,6vw,2.5rem);color:#2c3e50;margin-bottom:1rem;text-shadow:2px 2px 4px rgba(0,0,0,.1);padding:0 clamp(.5rem,2vw,1rem);position:relative;display:inline-block;animation:titleGlow 3s ease-in-out infinite}@keyframes titleGlow{0%,to{text-shadow:2px 2px 4px rgba(0,0,0,.1),0 0 0px rgba(66,153,225,0)}50%{text-shadow:2px 2px 4px rgba(0,0,0,.1),0 0 15px rgba(66,153,225,.5)}}.pokemon-types-container h1:after{content:"";position:absolute;bottom:-5px;left:50%;transform:translate(-50%);width:60px;height:3px;background:linear-gradient(90deg,var(--pokemon-fire),var(--pokemon-water),var(--pokemon-electric));border-radius:2px;animation:rainbowLine 4s linear infinite}@keyframes rainbowLine{0%{background-position:0% 50%}to{background-position:100% 50%}}.pokemon-types-container p{color:#34495e;font-size:clamp(1rem,3.5vw,1.2rem);margin-bottom:2rem;padding:0 clamp(.5rem,2vw,1rem);line-height:1.6;max-width:600px;animation:fadeInUp .8s ease-out .3s both}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.types-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:clamp(.8rem,2.5vw,1.2rem);margin:clamp(1.5rem,5vw,3rem) 0;width:100%;max-width:min(95%,900px);padding:0 clamp(.5rem,2vw,1rem);justify-items:center}.type-btn{color:#fff;border:none;padding:clamp(.8rem,2.5vw,1.2rem) clamp(.8rem,2.5vw,1.2rem);border-radius:16px;cursor:pointer;font-weight:700;font-size:clamp(.85rem,2.8vw,1.1rem);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all var(--transition-medium);min-height:70px;width:100%;max-width:160px;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;text-shadow:1px 1px 2px rgba(0,0,0,.3);box-shadow:0 4px 15px #0003,inset 0 1px #ffffff4d,inset 0 -1px #0000001a;transform-style:preserve-3d;perspective:500px;word-wrap:break-word;white-space:normal;line-height:1.2}.type-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left var(--transition-medium)}.type-btn:hover{transform:translateY(-8px) scale(1.05);box-shadow:0 12px 30px #0000004d,inset 0 1px #fff6,inset 0 -1px #0003}.type-btn:hover:before{left:100%}.type-btn:active{transform:translateY(-4px) scale(1.02);transition:transform var(--transition-fast)}.type-btn.selected{animation:typePulse 2s ease-in-out infinite;box-shadow:0 0 0 4px #fff6,0 8px 25px #0006,inset 0 1px #ffffff80}@keyframes typePulse{0%,to{box-shadow:0 0 0 4px #fff6,0 8px 25px #0006,inset 0 1px #ffffff80}50%{box-shadow:0 0 0 6px #fff9,0 12px 35px #00000080,inset 0 1px #ffffffb3}}.type-info{background:linear-gradient(135deg,#fffffff2,#fffffffa);border-radius:24px;box-shadow:0 15px 40px #00000026,0 0 0 1px #ffffff80;padding:clamp(1.5rem,5vw,2.5rem);width:min(95%,800px);margin-top:clamp(1.5rem,5vw,3rem);animation:slideUp .8s cubic-bezier(.175,.885,.32,1.275) forwards;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);text-align:left;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.8)}.type-info:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--current-color-start),var(--current-color-end));animation:shine 2s ease-in-out infinite}@keyframes shine{0%{transform:translate(-100%)}to{transform:translate(100%)}}.type-info h2{font-size:clamp(1.6rem,5vw,2.2rem);margin-bottom:2rem;text-align:center;font-weight:700;position:relative;display:inline-block;left:50%;transform:translate(-50%);padding:0 2rem}.type-info h2:after{content:"";position:absolute;bottom:-8px;left:0;width:100%;height:3px;background:currentColor;border-radius:2px;opacity:.5}.type-description{text-align:center;margin-bottom:2rem;padding:1rem;background:linear-gradient(135deg,#ffffff4d,#ffffff1a);border-radius:12px;font-style:italic;color:#555;border-left:3px solid currentColor;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.2);animation:fadeInUp .6s ease-out .2s both}.pokemon-images{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,3vw,1.5rem);margin-bottom:2.5rem;padding:0 clamp(.5rem,2vw,1rem)}.pokemon-card{display:flex;flex-direction:column;align-items:center;gap:.8rem;padding:clamp(.8rem,2.5vw,1.2rem);background:linear-gradient(135deg,#f8f9fae6,#fffffff2);border-radius:16px;transition:all var(--transition-medium);box-shadow:0 5px 15px #00000014,inset 0 1px #fff9;position:relative;overflow:hidden;cursor:pointer}.pokemon-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,rgba(255,255,255,.8),transparent)}.pokemon-card:hover{transform:translateY(-10px) scale(1.05);box-shadow:0 15px 30px #00000026,inset 0 1px #fffc}.pokemon-card img{width:clamp(60px,18vw,100px);height:clamp(60px,18vw,100px);object-fit:contain;border-radius:12px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));transition:all var(--transition-medium)}.pokemon-card:hover img{transform:scale(1.1) rotate(5deg);filter:drop-shadow(0 6px 12px rgba(0,0,0,.3))}.pokemon-card span{font-size:clamp(.8rem,2.8vw,1rem);font-weight:700;color:#2c3e50;text-align:center;transition:color var(--transition-fast)}.pokemon-card:hover span{color:#1a2530}.type-section{margin-bottom:clamp(1.5rem,4vw,2rem);padding:1rem;background:#f8f9fa99;border-radius:16px;border-left:4px solid currentColor;transition:all var(--transition-medium)}.type-section:hover{background:#f8f9fae6;transform:translate(5px)}.type-section p{margin:0 0 1rem;font-size:clamp(1rem,3.2vw,1.1rem);color:#2c3e50;font-weight:700;display:flex;align-items:center;gap:.5rem}.badges{display:flex;flex-wrap:wrap;gap:clamp(.5rem,1.5vw,.8rem);margin:.8rem 0}.type-badge{padding:clamp(.5rem,1.8vw,.7rem) clamp(1rem,2.5vw,1.5rem);border-radius:14px;color:#fff;font-weight:700;font-size:clamp(.8rem,2.2vw,.95rem);box-shadow:0 4px 12px #00000040,inset 0 1px #ffffff4d;transition:all var(--transition-medium);text-align:center;min-width:70px;position:relative;overflow:hidden;cursor:pointer;text-transform:uppercase;letter-spacing:.5px}.type-badge:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left var(--transition-medium)}.type-badge:hover{transform:translateY(-4px) scale(1.08);box-shadow:0 8px 20px #00000059,inset 0 1px #fff6}.type-badge:hover:before{left:100%}.no-effect{color:#6c757d;font-style:italic;font-size:clamp(.85rem,2.8vw,1rem);padding:.5rem;display:inline-block}@keyframes fadeIn{0%{opacity:0;transform:scale(.98) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 480px){.types-grid{grid-template-columns:repeat(3,1fr);gap:.6rem}.type-btn{min-height:60px;font-size:.85rem;border-radius:12px;padding:.6rem .4rem;max-width:none}.pokemon-images{grid-template-columns:repeat(3,1fr);gap:.6rem}.pokemon-card{padding:.6rem;border-radius:12px}.pokemon-card img{width:50px;height:50px}.pokemon-card span{font-size:.75rem}.type-info{padding:1.2rem;border-radius:16px}.type-section{padding:.8rem}.type-badge{padding:.4rem .8rem;font-size:.75rem;min-width:60px;border-radius:10px}}@media (min-width: 768px){.types-grid{grid-template-columns:repeat(4,1fr)}.type-btn{min-height:75px}.pokemon-images{gap:1.2rem}.pokemon-card img{width:85px;height:85px}}@media (min-width: 1024px){.types-grid{grid-template-columns:repeat(6,1fr)}}@media (max-width: 360px){.types-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 900px) and (orientation: landscape){.pokemon-types-container{padding:1rem}.types-grid{grid-template-columns:repeat(5,1fr);gap:.6rem;margin:1rem 0}.pokemon-images{grid-template-columns:repeat(3,1fr);gap:.8rem}}@media (hover: none) and (pointer: coarse){.type-btn:hover,.type-badge:hover,.pokemon-card:hover{transform:none}.type-btn:active,.type-badge:active,.pokemon-card:active{transform:scale(.95)}}@media (prefers-reduced-motion: reduce){.pokemon-types-container,.type-info,.type-btn,.type-badge,.pokemon-card{animation:none!important;transition:none!important}}.type-btn:focus-visible,.type-badge:focus-visible{outline:3px solid #2c3e50;outline-offset:3px}.type-btn,.type-badge,.pokemon-card{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%230095DD' opacity='0.8'/%3E%3Ccircle cx='16' cy='16' r='6' fill='white'/%3E%3C/svg%3E") 16 16,pointer}.type-btn{position:relative}.type-btn:after{content:"";position:absolute;inset:-2px;border-radius:18px;background:inherit;filter:blur(10px);opacity:0;z-index:-1;transition:opacity var(--transition-medium)}.type-btn:hover:after{opacity:.6}.pokemon-types-container{transition:background-position var(--transition-slow)}.memory-game-container{width:100vw;min-height:100vh;height:100%;text-align:center;font-family:Segoe UI,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:20px;position:relative;overflow-y:auto}.memory-game-container:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 20% 50%,rgba(255,215,0,.15) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(77,166,255,.1) 0%,transparent 50%),radial-gradient(circle at 40% 80%,rgba(255,107,107,.08) 0%,transparent 50%);z-index:0}.memory-game-container h1{font-size:clamp(2rem,5vw,3rem);margin:20px 0;color:#fff;text-shadow:3px 3px 0 rgba(0,0,0,.3);position:relative;z-index:1;background:linear-gradient(45deg,gold,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.game-info{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:1200px;padding:20px;margin:20px 0;background:#fffffff2;border-radius:20px;box-shadow:0 10px 30px #0003;position:relative;z-index:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3)}.level-select{display:flex;align-items:center;gap:15px;font-size:1.1rem;font-weight:700}.level-select label{color:#2c3e50}.level-select select{padding:10px 20px;border:2px solid #4DA6FF;border-radius:15px;background:#fff;font-weight:700;cursor:pointer;transition:all .3s;min-width:180px;font-size:1rem}.level-select select:hover{border-color:gold;transform:translateY(-2px);box-shadow:0 5px 15px #4da6ff4d}.stats{display:flex;gap:30px;font-size:1.2rem;font-weight:700}.moves,.timer{background:linear-gradient(135deg,#4da6ff,#1e90ff);color:#fff;padding:12px 24px;border-radius:15px;box-shadow:0 5px 15px #4da6ff66;display:flex;align-items:center;gap:10px;min-width:150px;justify-content:center}.instructions{font-size:1.3rem;color:#fff;margin:10px 0 30px;text-shadow:1px 1px 2px rgba(0,0,0,.5);position:relative;z-index:1;padding:10px 20px;background:#0003;border-radius:15px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.streak-celebration{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;animation:streakPopup .8s ease-out}@keyframes streakPopup{0%{transform:translate(-50%,-50%) scale(0);opacity:0}70%{transform:translate(-50%,-50%) scale(1.2);opacity:1}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.streak-text{font-size:2rem;font-weight:700;background:linear-gradient(45deg,red,#ff7f00,#ff0);-webkit-background-clip:text;background-clip:text;color:transparent;padding:20px 40px;background:#ffffffe6;border-radius:20px;box-shadow:0 10px 30px #0000004d}.cards-grid{display:grid;gap:15px;width:100%;max-width:1200px;margin:0 auto 30px;flex:1;position:relative;z-index:1;padding:20px;box-sizing:border-box}.cards-grid.difficile{grid-template-columns:repeat(6,1fr);max-width:1200px}.card{width:100%;aspect-ratio:2/3;position:relative;cursor:pointer;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1);border-radius:15px;box-shadow:0 8px 20px #0000004d;-webkit-user-select:none;user-select:none}.card.flipped{transform:rotateY(180deg)}.card.matched{cursor:default;transform:rotateY(180deg);animation:matchedGlow 2s infinite alternate}@keyframes matchedGlow{0%{box-shadow:0 8px 20px #0000004d,0 0 15px #27ae6080}to{box-shadow:0 8px 20px #0000004d,0 0 25px #27ae60cc}}.card-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .6s;border-radius:13px}.card-front,.card-back{position:absolute;width:100%;height:100%;border-radius:13px;backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:15px;overflow:hidden}.card-back{background:linear-gradient(135deg,#4da6ff,#1e8cff);border:4px solid white;color:#fff;transform:rotateY(0)}.card-back span{font-size:3rem;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.card-front{background:linear-gradient(135deg,#fff,#f8f9fa);border:4px solid #4DA6FF;transform:rotateY(180deg);gap:10px}.card-front img{width:70%;height:70%;object-fit:contain;border-radius:10px;transition:transform .3s}.card-front p{font-size:1rem;font-weight:700;margin:0;color:#2c3e50;text-align:center}.pokemon-type{background:#4da6ff;color:#fff;padding:4px 12px;border-radius:20px;font-size:.7rem;font-weight:700}.card-front.shiny{background:linear-gradient(135deg,#fff9c4,#fff176);border-color:gold;animation:shinyGlow 2s infinite alternate}@keyframes shinyGlow{0%{box-shadow:0 0 20px #ffd70080}to{box-shadow:0 0 30px #ffd700cc}}.game-over{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:40px;border-radius:30px;box-shadow:0 20px 60px #0006;z-index:1000;max-width:90%;width:600px;text-align:center;animation:gameOverAppear .5s ease-out}@keyframes gameOverAppear{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.game-over h2{color:#4da6ff;margin-bottom:20px;font-size:2.5rem}.final-stats{background:#f8f9fa;padding:25px;border-radius:20px;margin:25px 0}.final-stats p{margin:15px 0;font-size:1.2rem;display:flex;justify-content:space-between}.final-stats strong{color:#4da6ff}.new-record{background:linear-gradient(45deg,gold,orange);color:#2c3e50;padding:15px;border-radius:15px;font-weight:700;margin:20px 0;animation:recordFlash 1s infinite}@keyframes recordFlash{0%,to{opacity:1}50%{opacity:.7}}.game-over-actions{display:flex;gap:20px;justify-content:center;margin-top:30px}.restart-btn,.level-btn,.start-btn{padding:15px 30px;border:none;border-radius:15px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s;display:inline-flex;align-items:center;gap:10px}.restart-btn{background:linear-gradient(135deg,#4da6ff,#1e8cff);color:#fff}.level-btn{background:linear-gradient(135deg,#9b59b6,#8e44ad);color:#fff}.start-btn{background:linear-gradient(135deg,#ff6b6b,#ff4757);color:#fff;font-size:1.3rem;padding:20px 40px}.restart-btn:hover,.level-btn:hover,.start-btn:hover{transform:translateY(-5px);box-shadow:0 15px 30px #0000004d}.overlay{position:fixed;inset:0;background:#000000b3;z-index:999;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}@media (max-width: 1024px){.cards-grid{gap:12px;padding:15px}.cards-grid.facile{grid-template-columns:repeat(3,1fr);max-width:500px}.cards-grid.moyen{grid-template-columns:repeat(4,1fr);max-width:700px}.cards-grid.difficile{grid-template-columns:repeat(5,1fr);max-width:900px}}@media (max-width: 768px){.memory-game-container{padding:15px}.game-info{flex-direction:column;gap:20px;padding:15px}.stats{width:100%;justify-content:space-around}.moves,.timer{min-width:120px;padding:10px 15px;font-size:1rem}.cards-grid{gap:10px;padding:10px}.cards-grid.facile{grid-template-columns:repeat(3,1fr);max-width:400px}.cards-grid.moyen{grid-template-columns:repeat(3,1fr);max-width:450px}.cards-grid.difficile{grid-template-columns:repeat(4,1fr);max-width:500px}.card-back span{font-size:2.5rem}.card-front p{font-size:.9rem}}@media (max-width: 480px){.memory-game-container{padding:10px}.cards-grid{gap:8px;padding:10px}.cards-grid.facile{grid-template-columns:repeat(2,1fr);max-width:300px}.cards-grid.moyen{grid-template-columns:repeat(3,1fr);max-width:320px}.cards-grid.difficile{grid-template-columns:repeat(4,1fr);max-width:340px}.card-back span{font-size:2rem}.card-front p{font-size:.8rem}.level-select{flex-direction:column;width:100%}.level-select select{width:100%}.game-over{padding:25px;width:95%}.game-over h2{font-size:1.8rem}}.cards-grid.facile{grid-template-columns:repeat(3,1fr);max-width:600px}.cards-grid.moyen{grid-template-columns:repeat(4,1fr);max-width:800px}.cards-grid.difficile{grid-template-columns:repeat(6,1fr);max-width:1000px}.cards-grid.facile .card{aspect-ratio:2/3;height:auto;min-height:140px}.cards-grid.moyen .card{aspect-ratio:2/3;height:auto;min-height:130px}.cards-grid.difficile .card{aspect-ratio:2/3;height:auto;min-height:120px}.cards-grid.difficile .card-front img{width:60%;height:60%}.cards-grid.difficile .card-front p{font-size:.9rem}@media (max-width: 1024px){.cards-grid.facile{grid-template-columns:repeat(3,1fr);max-width:500px}.cards-grid.moyen{grid-template-columns:repeat(4,1fr);max-width:600px}.cards-grid.difficile{grid-template-columns:repeat(5,1fr);max-width:700px}}@media (max-width: 768px){.cards-grid.facile{grid-template-columns:repeat(3,1fr);max-width:400px}.cards-grid.moyen{grid-template-columns:repeat(3,1fr);max-width:450px}.cards-grid.difficile{grid-template-columns:repeat(4,1fr);max-width:500px}}@media (max-width: 480px){.cards-grid.facile{grid-template-columns:repeat(2,1fr);max-width:300px}.cards-grid.moyen{grid-template-columns:repeat(3,1fr);max-width:320px}.cards-grid.difficile{grid-template-columns:repeat(3,1fr);max-width:340px}}.cards-grid.facile,.cards-grid.moyen,.cards-grid.difficile{grid-template-columns:repeat(4,1fr);max-width:600px}.cards-grid.expert{grid-template-columns:repeat(5,1fr);max-width:700px}.cards-grid.maitre{grid-template-columns:repeat(6,1fr);max-width:800px}.cards-grid .card{aspect-ratio:2/3;height:auto;min-height:140px}.cards-grid.difficile .card-front img,.cards-grid.expert .card-front img,.cards-grid.maitre .card-front img{width:60%;height:60%}.cards-grid.difficile .card-front p,.cards-grid.expert .card-front p,.cards-grid.maitre .card-front p{font-size:.9rem}@media (max-width: 1024px){.cards-grid.facile,.cards-grid.moyen,.cards-grid.difficile,.cards-grid.expert{grid-template-columns:repeat(4,1fr);max-width:500px}.cards-grid.maitre{grid-template-columns:repeat(5,1fr);max-width:550px}}@media (max-width: 768px){.cards-grid.facile,.cards-grid.moyen{grid-template-columns:repeat(3,1fr);max-width:400px}.cards-grid.difficile,.cards-grid.expert,.cards-grid.maitre{grid-template-columns:repeat(4,1fr);max-width:450px}}@media (max-width: 480px){.cards-grid.facile{grid-template-columns:repeat(2,1fr);max-width:300px}.cards-grid.moyen,.cards-grid.difficile{grid-template-columns:repeat(3,1fr);max-width:320px}.cards-grid.expert,.cards-grid.maitre{grid-template-columns:repeat(4,1fr);max-width:340px}}.app-de-gestion-wrapper{width:100vw;min-height:100vh;margin:0;padding:2rem 1rem;background:linear-gradient(135deg,#667eea,#764ba2);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;position:relative}.app-de-gestion-content{position:relative;z-index:1;max-width:1200px;margin:0 auto}.app-header{background:#fffffffa;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:clamp(.5rem,2vw,1rem) clamp(1rem,4vw,2rem);display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 30px #00000026;border-radius:16px;margin-bottom:2rem;gap:clamp(1rem,3vw,2rem);flex-direction:column}@media (min-width: 768px){.app-header{flex-direction:row}}.app-header h1{margin:0;color:#2c3e50;font-size:clamp(1.1rem,2.5vw,1.8rem);font-weight:700;text-align:center}@media (min-width: 768px){.app-header h1{text-align:left;flex:1}}.back-button{color:#2c3e50;text-decoration:none;padding:clamp(.6rem,1.5vw,.75rem) clamp(1rem,2vw,1.5rem);border:2px solid #3498db;border-radius:8px;font-weight:600;transition:all .3s ease;display:inline-flex;align-items:center;gap:.5rem;font-size:clamp(.85rem,1.2vw,.95rem);-webkit-tap-highlight-color:transparent;min-height:44px;white-space:nowrap;width:100%;justify-content:center}@media (min-width: 768px){.back-button{width:auto}}.back-button:hover{background:#3498db;color:#fff;transform:translateY(-1px)}.back-button:active{transform:scale(.98)}.app-container{display:grid;grid-template-columns:1fr;gap:1rem;width:100%}@media (min-width: 768px){.app-container{grid-template-columns:280px 1fr;gap:2rem}}.sidebar{background:#2c3e50fa;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;padding:1.5rem 0;border-radius:16px;overflow:hidden;transition:transform .3s ease;-webkit-overflow-scrolling:touch;display:none}@media (min-width: 768px){.sidebar{display:block}}.sidebar-header{padding:0 1.5rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:1rem}.sidebar-header h2{margin:0;font-size:clamp(1rem,2vw,1.2rem);font-weight:700}.sidebar-nav{padding:0 .5rem}.nav-item{display:flex;align-items:center;gap:.8rem;padding:.8rem 1.2rem;color:#bdc3c7;text-decoration:none;border-radius:8px;margin-bottom:.4rem;transition:all .3s ease;border-left:4px solid transparent;font-size:clamp(.8rem,1.5vw,.9rem);-webkit-tap-highlight-color:transparent}.nav-item:hover{background:#34495ecc;color:#fff;transform:translate(5px)}.nav-item.active{background:#349adb33;color:#fff;border-left-color:#3498db}.nav-item:active{background:#34495ee6}.main-content{background:#f8f9fa;border-radius:16px;overflow:hidden;-webkit-overflow-scrolling:touch;min-width:0}.dashboard{width:100%;max-width:none;padding:1.5rem}.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #e9ecef;flex-direction:column;gap:1rem}@media (min-width: 768px){.page-header{flex-direction:row;gap:2rem}}.page-header h1{color:#2c3e50;font-size:clamp(1.2rem,2.5vw,2rem);font-weight:700;margin:0;text-align:center}@media (min-width: 768px){.page-header h1{text-align:left}}.stats-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:1.5rem}@media (min-width: 480px){.stats-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 768px){.stats-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.2rem}}.stat-card{background:#fff;padding:1.5rem;border-radius:10px;box-shadow:0 4px 15px #00000014;text-align:center;border-left:5px solid;transition:all .3s ease;min-height:120px;display:flex;flex-direction:column;justify-content:center}.stat-card:hover{transform:translateY(-3px);box-shadow:0 6px 20px #0000001f}.stat-card .stat-icon{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:.8rem}.stat-card h3{color:#7f8c8d;font-size:clamp(.7rem,1.5vw,.8rem);margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.5px}.stat-card .number{font-size:clamp(1.2rem,3vw,1.8rem);font-weight:800;color:#2c3e50;margin:.3rem 0}.data-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.5rem}@media (min-width: 480px){.data-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}@media (min-width: 768px){.data-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.2rem}}.data-card{background:#fff;border-radius:10px;box-shadow:0 4px 15px #00000014;overflow:hidden;min-height:250px}.card-header{padding:1.2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.card-header h2{margin:0;font-size:clamp(.9rem,2vw,1.1rem);font-weight:600}.card-content{padding:1.2rem;height:calc(100% - 70px);overflow-y:auto;font-size:clamp(.8rem,1.5vw,.9rem)}.table-container{background:#fff;border-radius:10px;box-shadow:0 4px 15px #00000014;overflow:hidden;margin-bottom:1.5rem;width:100%}.table-header{padding:1.2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;flex-direction:column}@media (min-width: 768px){.table-header{flex-direction:row}}.table-header h2{margin:0;font-size:clamp(1rem,2vw,1.2rem);font-weight:600}.table-actions{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;justify-content:center;width:100%}@media (min-width: 768px){.table-actions{justify-content:flex-end;width:auto}}.table-content{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}.data-table{width:100%;border-collapse:collapse;min-width:700px;font-size:clamp(.75rem,1.5vw,.85rem)}.data-table th{background:#f8f9fa;padding:1rem .8rem;text-align:left;font-weight:600;color:#2c3e50;border-bottom:2px solid #e9ecef;white-space:nowrap;font-size:clamp(.7rem,1.5vw,.8rem)}.data-table td{padding:1rem .8rem;border-bottom:1px solid #e9ecef;vertical-align:middle;font-size:clamp(.75rem,1.5vw,.85rem)}.btn{padding:.6rem 1.2rem;border:none;border-radius:6px;cursor:pointer;font-size:clamp(.75rem,1.5vw,.85rem);font-weight:600;transition:all .3s ease;display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;-webkit-tap-highlight-color:transparent;min-height:40px;justify-content:center;width:100%}@media (min-width: 480px){.btn{width:auto}}.btn-primary{background:linear-gradient(135deg,#3498db,#2980b9);color:#fff}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 3px 10px #3498db4d}.btn-sm{padding:.4rem .8rem;font-size:clamp(.65rem,1.2vw,.75rem);min-height:32px}.form-group{margin-bottom:1.2rem}.form-label{display:block;margin-bottom:.4rem;font-weight:600;color:#2c3e50;font-size:clamp(.8rem,1.5vw,.9rem)}.form-control{width:100%;padding:.6rem .8rem;border:2px solid #e9ecef;border-radius:6px;font-size:clamp(.8rem,1.5vw,.9rem);transition:all .3s ease;min-height:40px}.form-control:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 2px #3498db1a}.mobile-menu-btn{display:flex;background:none;border:2px solid #2c3e50;border-radius:6px;font-size:1.2rem;color:#2c3e50;cursor:pointer;padding:.4rem;min-width:40px;min-height:40px;align-items:center;justify-content:center;margin-bottom:1rem}@media (min-width: 768px){.mobile-menu-btn{display:none}}.mobile-overlay{display:none;position:fixed;inset:0;background:#00000080;z-index:9999}.mobile-sidebar{display:block;position:fixed;top:0;left:-280px;width:280px;height:100%;background:#2c3e50fa;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;padding:1.5rem 0;transition:left .3s ease;z-index:10000;overflow-y:auto}.mobile-sidebar.active{left:0}@media (min-width: 768px){.mobile-sidebar{display:none}}.stat-card.students{border-left-color:#3498db}.stat-card.teachers{border-left-color:#e74c3c}.stat-card.classes{border-left-color:#2ecc71}.stat-card.average{border-left-color:#f39c12}@media (max-width: 767px){.app-de-gestion-wrapper{padding:1rem .5rem}.dashboard{padding:1rem}.stats-grid,.data-grid{grid-template-columns:1fr;gap:1rem}.table-header,.card-content{padding:1rem}.stat-card{padding:1.2rem 1rem}}@media (min-width: 768px) and (max-width: 1024px){.app-de-gestion-wrapper{padding:1.5rem}.stats-grid,.data-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}.table-header,.card-content{padding:1.3rem 1.5rem}}@media (min-width: 1200px){.app-de-gestion-wrapper{padding:3rem 2rem}.stats-grid{grid-template-columns:repeat(4,1fr);gap:2rem}.data-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem}}@media (prefers-reduced-motion: reduce){.stat-card,.nav-item,.btn,.data-card{transition:none}.stat-card:hover,.nav-item:hover{transform:none}}@media (hover: none) and (pointer: coarse){.stat-card:hover{transform:none}.nav-item:hover{transform:none;background:#34495e99}.btn:hover{transform:none}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.stat-card,.data-card,.table-container{animation:fadeIn .4s ease-in-out}.dashboard{padding:0}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid #e9ecef}.page-header h1{color:#2c3e50;font-size:2rem;font-weight:700;margin:0}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-bottom:2rem}.stat-card{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 4px 20px #00000014;text-align:center;border-left:6px solid;transition:all .3s ease;position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)}.stat-card:hover{transform:translateY(-5px);box-shadow:0 8px 30px #0000001f}.stat-card .stat-icon{font-size:3rem;margin-bottom:1rem}.stat-card h3{color:#7f8c8d;font-size:.9rem;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:1px}.stat-card .number{font-size:2.5rem;font-weight:800;color:#2c3e50;margin:.5rem 0}.stat-card .trend{font-size:.85rem;font-weight:600}.trend.positive{color:#27ae60}.trend.negative{color:#e74c3c}.data-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:1.5rem;margin-top:2rem}.data-card{background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000014;overflow:hidden}.card-header{padding:1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.card-header h2{margin:0;font-size:1.3rem;font-weight:600}.card-content{padding:1.5rem}.data-table{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000000d}.data-table th{background:#f8f9fa;padding:1rem;text-align:left;font-weight:600;color:#2c3e50;border-bottom:2px solid #e9ecef}.data-table td{padding:1rem;border-bottom:1px solid #e9ecef}@media (max-width: 768px){.stats-grid{grid-template-columns:1fr;gap:1rem}.data-grid{grid-template-columns:1fr}.page-header{flex-direction:column;align-items:flex-start;gap:1rem}.data-table{font-size:.9rem}.data-table th,.data-table td{padding:.75rem .5rem}}.table-container{background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000014;overflow:hidden}.table-header{padding:1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.table-header h2{margin:0;font-size:1.5rem;font-weight:600}.table-actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.table-content{overflow-x:auto}.data-table{width:100%;border-collapse:collapse;min-width:800px}.data-table th{background:#f8f9fa;padding:1.25rem 1rem;text-align:left;font-weight:600;color:#2c3e50;border-bottom:2px solid #e9ecef;white-space:nowrap}.data-table td{padding:1.25rem 1rem;border-bottom:1px solid #e9ecef;vertical-align:middle}.data-table tr:last-child td{border-bottom:none}.data-table tr:hover{background:#f8f9fa}.table-actions-cell{display:flex;gap:.5rem;flex-wrap:wrap}.empty-state{text-align:center;padding:4rem 2rem;color:#7f8c8d}.empty-state .empty-icon{font-size:4rem;margin-bottom:1rem;opacity:.5}.pagination{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-top:1px solid #e9ecef;background:#f8f9fa}.pagination-info{color:#7f8c8d;font-size:.9rem}.pagination-controls{display:flex;gap:.5rem}.pagination-btn{padding:.5rem 1rem;border:1px solid #e9ecef;background:#fff;border-radius:6px;cursor:pointer;transition:all .3s ease}.pagination-btn:hover:not(:disabled){background:#3498db;color:#fff;border-color:#3498db}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-btn.active{background:#3498db;color:#fff;border-color:#3498db}.filters-section{background:#f8f9fa;padding:1.5rem;border-bottom:1px solid #e9ecef}.filter-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;align-items:end}@media (max-width: 768px){.table-header{flex-direction:column;align-items:stretch}.table-actions{justify-content:center}.data-table{font-size:.8rem}.data-table th,.data-table td{padding:.75rem .5rem}.table-actions-cell{flex-direction:column}.pagination{flex-direction:column;gap:1rem;text-align:center}}.react-course-container{width:100vw;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;padding:0;margin:0;-webkit-overflow-scrolling:touch}.course-header{background:#fffffffa;padding:clamp(1rem,3vh,1.5rem);text-align:center;box-shadow:0 2px 15px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100}.course-header h1{font-size:clamp(1.5rem,6vw,2rem);color:#2c3e50;margin-bottom:.3rem;font-weight:700;line-height:1.2}.course-header p{font-size:clamp(.9rem,3.5vw,1.1rem);color:#5d6d7e;margin:0;line-height:1.3}.course-content{display:flex;flex-direction:column;min-height:calc(100vh - 120px)}.lesson-sidebar{background:#fffffff2;padding:1rem;border-bottom:2px solid #e0e0e0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow-x:auto;-webkit-overflow-scrolling:touch}.lesson-sidebar h3{color:#2c3e50;margin-bottom:1rem;font-size:clamp(1.1rem,4vw,1.3rem);font-weight:600;text-align:center}.lesson-list{display:flex;gap:.8rem;overflow-x:auto;padding:.5rem 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}.lesson-list::-webkit-scrollbar{display:none}.lesson-item{display:flex;align-items:center;gap:.8rem;padding:clamp(.8rem,3vw,1rem);background:#fff;border:2px solid #e9ecef;border-radius:12px;cursor:pointer;transition:all .2s ease;text-align:left;font-size:clamp(.8rem,3vw,.9rem);color:#495057;min-width:200px;flex-shrink:0;-webkit-tap-highlight-color:transparent}.lesson-item:active{background:#f8f9fa}.lesson-item.active{border-color:#667eea;background:#667eea;color:#fff;box-shadow:0 3px 10px #667eea4d}.lesson-number{background:#667eea;color:#fff;width:clamp(25px,8vw,30px);height:clamp(25px,8vw,30px);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:clamp(.7rem,3vw,.8rem);flex-shrink:0}.lesson-item.active .lesson-number{background:#fff;color:#667eea}.lesson-main{flex:1;padding:clamp(1rem,3vw,1.5rem);background:#f9fafbf2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow-y:auto;-webkit-overflow-scrolling:touch}.lesson-card{background:#fff;border-radius:16px;padding:clamp(1.5rem,4vw,2rem);box-shadow:0 4px 20px #00000014;margin:0 auto;max-width:100%}.lesson-card h2{color:#2c3e50;font-size:clamp(1.4rem,5vw,1.8rem);margin-bottom:1rem;font-weight:700;line-height:1.3}.lesson-content{line-height:1.6;color:#4a5568;margin-bottom:2rem;font-size:clamp(.95rem,3.5vw,1.05rem)}.lesson-content p{margin-bottom:1rem}.lesson-content h3{color:#2c3e50;font-size:clamp(1.1rem,4vw,1.3rem);margin:1.5rem 0 .8rem;font-weight:600}.lesson-content h4{color:#4a5568;font-size:clamp(1rem,3.5vw,1.1rem);margin:1.2rem 0 .6rem;font-weight:600}.lesson-content ul{margin:1rem 0;padding-left:1.5rem}.lesson-content li{margin-bottom:.5rem;line-height:1.5}.exercise-section{background:#f8f9fa;border-radius:12px;padding:clamp(1.5rem,4vw,2rem);margin:1.5rem 0;border-left:4px solid #667eea}.exercise-section h3{color:#2c3e50;margin-bottom:1rem;font-size:clamp(1.2rem,4vw,1.4rem);font-weight:600}.exercise-description{color:#5d6d7e;margin-bottom:1.5rem;font-size:clamp(.95rem,3.5vw,1rem);line-height:1.5}.exercise-description h3,.exercise-description h4{color:#2c3e50;margin:1.2rem 0 .8rem}.exercise-description ul{margin:.8rem 0;padding-left:1.2rem}.exercise-description li{margin-bottom:.4rem}.code-editor{background:#1e1e1e;border-radius:8px;overflow:hidden;margin:1.5rem 0;box-shadow:0 3px 12px #0003}.editor-header{background:#2d2d2d;padding:.8rem 1rem;display:flex;justify-content:space-between;align-items:center;color:#ccc;font-family:Monaco,Consolas,monospace;font-size:clamp(.8rem,3vw,.9rem)}.reset-btn{background:#495057;color:#fff;border:none;padding:.5rem .8rem;border-radius:6px;cursor:pointer;font-size:clamp(.75rem,3vw,.8rem);transition:background .2s ease;-webkit-tap-highlight-color:transparent}.reset-btn:active{background:#6c757d}.code-input{width:100%;min-height:clamp(120px,30vh,200px);background:#1e1e1e;color:#d4d4d4;border:none;padding:1rem;font-family:Monaco,Consolas,monospace;font-size:clamp(.85rem,3vw,.95rem);line-height:1.5;resize:none;outline:none;-webkit-overflow-scrolling:touch}.code-input:focus{background:#1e1e1e}.editor-controls{display:flex;flex-direction:column;gap:1rem;align-items:stretch}.run-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:clamp(.8rem,3vw,1rem) clamp(1.2rem,4vw,1.5rem);border-radius:8px;cursor:pointer;font-weight:600;font-size:clamp(.9rem,3.5vw,1rem);transition:all .2s ease;box-shadow:0 3px 12px #667eea4d;-webkit-tap-highlight-color:transparent;min-height:50px;display:flex;align-items:center;justify-content:center}.run-btn:active{transform:scale(.98);box-shadow:0 2px 8px #667eea66}.output{padding:1rem;border-radius:8px;font-family:Monaco,Consolas,monospace;font-size:clamp(.8rem,3vw,.9rem);width:100%;box-sizing:border-box;line-height:1.4}.output.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.output.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.navigation-buttons{display:flex;flex-direction:column;gap:.8rem;margin-top:2rem}.nav-btn{padding:clamp(.8rem,3vw,1rem) clamp(1.2rem,4vw,1.5rem);border:2px solid #667eea;border-radius:8px;background:#fff;color:#667eea;cursor:pointer;font-weight:600;transition:all .2s ease;font-size:clamp(.9rem,3.5vw,1rem);-webkit-tap-highlight-color:transparent;min-height:50px;display:flex;align-items:center;justify-content:center;text-align:center}.nav-btn:active:not(:disabled){background:#667eea;color:#fff;transform:scale(.98)}.nav-btn:disabled{opacity:.5;cursor:not-allowed;border-color:#ccc;color:#ccc}.progress-indicator{background:#fffffff2;padding:clamp(1rem,3vw,1.5rem);display:flex;flex-direction:column;gap:.8rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid #e0e0e0;position:sticky;bottom:0;z-index:100}.progress-bar{width:100%;background:#e9ecef;height:6px;border-radius:3px;overflow:hidden}.progress-fill{background:linear-gradient(135deg,#667eea,#764ba2);height:100%;transition:width .5s ease}.progress-indicator span{color:#495057;font-weight:600;text-align:center;font-size:clamp(.9rem,3.5vw,1rem)}@media (max-width: 768px){.lesson-content,.exercise-description{text-align:justify;-webkit-hyphens:auto;hyphens:auto}.code-input{font-size:14px}}@media (orientation: landscape) and (max-height: 500px){.course-content{min-height:calc(100vh - 100px)}.lesson-sidebar{max-height:120px}.code-input{min-height:100px}.course-header{padding:.8rem}.course-header h1{font-size:1.3rem;margin-bottom:.2rem}.course-header p{font-size:.9rem}}@media (max-width: 360px){.lesson-item{min-width:180px;padding:.7rem;gap:.6rem}.lesson-number{width:22px;height:22px;font-size:.7rem}.lesson-card,.exercise-section{padding:1.2rem}}@media (hover: none) and (pointer: coarse){.lesson-item:hover,.run-btn:hover{transform:none}.nav-btn:hover:not(:disabled){transform:none}.lesson-item:active{background:#f1f3f4}.lesson-item.active:active{background:#5a6fd8}}@media (prefers-reduced-motion: reduce){.lesson-item,.run-btn,.nav-btn,.progress-fill{transition:none}}@media (prefers-color-scheme: dark){.lesson-card,.exercise-section,.lesson-sidebar{background:#2d3748;color:#e2e8f0}.lesson-sidebar{background:#2d3748f2}.lesson-card h2,.exercise-section h3{color:#e2e8f0}.lesson-content,.exercise-section p,.exercise-description{color:#cbd5e0}.lesson-item{background:#4a5568;color:#e2e8f0;border-color:#718096}.lesson-item:active{background:#5a6fd8}}@media (max-width: 768px){.code-input,input,textarea{font-size:16px}}.lesson-main,.lesson-sidebar{-webkit-overflow-scrolling:touch}:root{--blood-red: #ff3b3b;--water-blue: #36a2eb;--thunder-yellow: #ffd700;--flame-orange: #ff6b35;--beast-green: #2ecc71;--moon-purple: #9b59b6;--insect-pink: #e84393;--love-coral: #ff7675;--sound-cyan: #00cec9;--stone-gray: #636e72;--wind-teal: #00b894;--snake-emerald: #00b09b;--bg-primary: #0a0a14;--bg-secondary: #141426;--bg-card: rgba(20, 20, 38, .8);--bg-glass: rgba(255, 255, 255, .05);--border-glass: rgba(255, 255, 255, .1);--text-primary: #ffffff;--text-secondary: #b0b0d0;--text-accent: #ff6b6b;--shadow-color: rgba(0, 0, 0, .5);--transition-smooth: all .4s cubic-bezier(.175, .885, .32, 1.1);--transition-bounce: all .6s cubic-bezier(.68, -.55, .265, 1.55)}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow-x:hidden}body{background:var(--bg-primary);color:var(--text-primary);font-family:Poppins,sans-serif;line-height:1.6;position:relative;min-height:100vh;overflow-y:auto}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(5deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes glow{0%,to{box-shadow:0 0 20px var(--blood-red)}50%{box-shadow:0 0 40px var(--blood-red)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes gradientFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}@keyframes kanjiGlow{0%,to{text-shadow:0 0 10px currentColor,0 0 20px currentColor;transform:scale(1)}50%{text-shadow:0 0 20px currentColor,0 0 40px currentColor;transform:scale(1.05)}}.animated-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-2;background:radial-gradient(circle at 20% 50%,rgba(255,59,59,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(54,162,235,.1) 0%,transparent 50%),radial-gradient(circle at 40% 80%,rgba(155,89,182,.1) 0%,transparent 50%),linear-gradient(45deg,var(--bg-primary) 0%,#1a1a2e 100%);animation:gradientFlow 15s ease infinite;background-size:400% 400%}.particle{position:absolute;background:var(--blood-red);border-radius:50%;animation:float 15s infinite linear;opacity:.1}.particle:nth-child(1){width:100px;height:100px;top:10%;left:10%;animation-duration:20s;background:var(--water-blue)}.particle:nth-child(2){width:150px;height:150px;top:60%;left:80%;animation-duration:25s;background:var(--thunder-yellow)}.particle:nth-child(3){width:200px;height:200px;top:80%;left:20%;animation-duration:30s;background:var(--flame-orange)}.demon-slayer-encyclopedia{width:100%;min-height:100vh;position:relative;overflow-x:hidden;padding:0;margin:0}.hero-header{position:relative;width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:linear-gradient(135deg,#0a0a14e6,#141426cc,#0a0a14e6);overflow:hidden}.hero-content{position:relative;z-index:2;text-align:center;max-width:1200px;width:100%;animation:slideInUp 1s ease-out}.hero-title{font-family:Orbitron,sans-serif;font-size:clamp(3rem,8vw,6rem);font-weight:900;margin-bottom:1.5rem;background:linear-gradient(45deg,var(--blood-red),var(--water-blue),var(--thunder-yellow),var(--flame-orange));background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientFlow 8s ease infinite;text-shadow:0 10px 30px rgba(0,0,0,.5)}.hero-subtitle{font-size:clamp(1.2rem,3vw,1.8rem);color:var(--text-secondary);margin-bottom:3rem;max-width:800px;margin-left:auto;margin-right:auto;line-height:1.6}.japanese-title{font-family:MS Mincho,Hiragino Mincho Pro,serif;font-size:clamp(1.5rem,4vw,2.5rem);color:var(--text-accent);margin-bottom:2rem;animation:kanjiGlow 3s ease-in-out infinite}.main-nav{position:sticky;top:0;z-index:1000;background:var(--bg-secondary);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:2px solid var(--border-glass);padding:1rem 2rem;animation:slideInUp .8s ease-out .2s both}.nav-container{max-width:1400px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}@media (min-width: 768px){.nav-container{flex-direction:row;justify-content:space-between;align-items:center}}.nav-logo{display:flex;align-items:center;gap:1rem;font-family:Orbitron,sans-serif;font-size:1.5rem;font-weight:700;color:var(--text-primary)}.logo-icon{font-size:2rem;animation:float 3s ease-in-out infinite}.search-container{position:relative;flex:1;max-width:500px}.search-input{width:100%;padding:1rem 3rem 1rem 1.5rem;background:var(--bg-glass);border:2px solid var(--border-glass);border-radius:50px;color:var(--text-primary);font-size:1rem;transition:var(--transition-smooth)}.search-input:focus{outline:none;border-color:var(--blood-red);box-shadow:0 0 20px #ff3b3b4d;transform:scale(1.02)}.search-icon{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);color:var(--text-secondary)}.nav-tabs{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.nav-tab{padding:.8rem 1.5rem;background:var(--bg-glass);border:2px solid transparent;border-radius:25px;color:var(--text-secondary);font-family:Orbitron,sans-serif;font-size:.9rem;font-weight:500;cursor:pointer;transition:var(--transition-bounce);display:flex;align-items:center;gap:.5rem;position:relative;overflow:hidden}.nav-tab:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:.5s}.nav-tab:hover:before{left:100%}.nav-tab:hover{transform:translateY(-5px);color:var(--text-primary);border-color:var(--blood-red);box-shadow:0 10px 20px #ff3b3b33}.nav-tab.active{background:linear-gradient(135deg,var(--blood-red),var(--flame-orange));color:#fff;border-color:transparent;box-shadow:0 10px 30px #ff3b3b66;transform:translateY(-5px)}.tab-icon{font-size:1.2rem}.stats-section{padding:4rem 2rem;position:relative}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;max-width:1400px;margin:0 auto}.stat-card{background:linear-gradient(145deg,var(--bg-card),rgba(20,20,38,.5));border-radius:20px;padding:2.5rem;border:1px solid var(--border-glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden;transition:var(--transition-bounce);animation:slideInUp .6s ease-out}.stat-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.03) 50%,transparent 70%);background-size:200% 200%;animation:shimmer 3s infinite linear}.stat-card:hover{transform:translateY(-15px) scale(1.05);border-color:var(--blood-red);box-shadow:0 20px 40px #0000004d,0 0 30px #ff3b3b33}.stat-content{position:relative;z-index:2;text-align:center}.stat-number{font-family:Orbitron,sans-serif;font-size:4rem;font-weight:800;background:linear-gradient(45deg,var(--blood-red),var(--water-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;line-height:1}.stat-label{font-size:1.3rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:1px}.stat-description{font-size:.9rem;color:var(--text-secondary);line-height:1.5}.main-content{padding:2rem;max-width:1400px;margin:0 auto;width:100%}.characters-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:2.5rem;margin:3rem 0}@media (max-width: 768px){.characters-grid{grid-template-columns:1fr}}.character-card{background:var(--bg-card);border-radius:25px;overflow:hidden;border:1px solid var(--border-glass);position:relative;transition:var(--transition-bounce);transform-style:preserve-3d;perspective:1000px;cursor:pointer}.character-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:5px;background:linear-gradient(90deg,var(--blood-red),var(--water-blue))}.character-card:hover{transform:translateY(-20px) rotateX(5deg) rotateY(5deg);border-color:var(--blood-red);box-shadow:0 30px 60px #0006,0 0 50px #ff3b3b33}.card-image{position:relative;height:250px;overflow:hidden}.card-image img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.175,.885,.32,1.275)}.character-card:hover .card-image img{transform:scale(1.1) rotate(2deg)}.type-badge{position:absolute;top:1rem;right:1rem;padding:.5rem 1.5rem;background:var(--blood-red);color:#fff;font-size:.8rem;font-weight:600;border-radius:20px;text-transform:uppercase;letter-spacing:1px;animation:pulse 2s infinite}.rank-badge{position:absolute;top:1rem;left:1rem;width:40px;height:40px;background:var(--thunder-yellow);color:#000;display:flex;align-items:center;justify-content:center;border-radius:50%;font-family:Orbitron,sans-serif;font-weight:700;font-size:1.2rem}.card-content{padding:2rem}.card-title{font-family:Orbitron,sans-serif;font-size:1.8rem;font-weight:700;margin-bottom:.5rem;background:linear-gradient(45deg,var(--blood-red),var(--water-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.card-role{font-size:1rem;color:var(--text-secondary);margin-bottom:1rem;text-transform:uppercase;letter-spacing:2px}.card-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.5rem}.stat-item{display:flex;flex-direction:column;gap:.25rem}.stat-label-small{font-size:.8rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px}.stat-value{font-size:1.1rem;font-weight:600;color:var(--text-primary)}.breath-tag{display:inline-block;padding:.5rem 1rem;background:#36a2eb33;border:1px solid var(--water-blue);border-radius:15px;font-size:.9rem;color:var(--water-blue);margin-top:1rem}.breaths-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem}.breath-card{background:var(--bg-card);border-radius:25px;padding:2.5rem;border:2px solid transparent;transition:var(--transition-bounce);position:relative;overflow:hidden}.breath-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:conic-gradient(from 0deg at 50% 50%,var(--water-blue) 0deg,var(--blood-red) 90deg,var(--thunder-yellow) 180deg,var(--flame-orange) 270deg,var(--water-blue) 360deg);opacity:.1;z-index:-1}.breath-card:hover{transform:translateY(-15px) rotate(2deg);border-color:var(--blood-red);box-shadow:0 25px 50px #ff3b3b33}.breath-icon-large{font-size:4rem;margin-bottom:1.5rem;animation:float 4s ease-in-out infinite}.breath-name{font-family:Orbitron,sans-serif;font-size:2rem;font-weight:700;margin-bottom:.5rem;background:linear-gradient(45deg,var(--blood-red),var(--flame-orange));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.moons-hierarchy{display:flex;flex-direction:column;gap:3rem;margin:3rem 0}.hierarchy-level{position:relative;padding:2rem;background:var(--bg-card);border-radius:20px;border:1px solid var(--border-glass);transition:var(--transition-smooth)}.hierarchy-level:hover{border-color:var(--moon-purple);box-shadow:0 0 40px #9b59b633}.level-title{font-family:Orbitron,sans-serif;font-size:2rem;font-weight:700;color:var(--moon-purple);margin-bottom:2rem;text-align:center;text-shadow:0 0 20px rgba(155,89,182,.5)}.moon-cards{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center}.moon-card{background:#9b59b61a;border-radius:15px;padding:1.5rem;border:2px solid var(--moon-purple);transition:var(--transition-bounce);min-width:200px;text-align:center}.moon-card:hover{transform:translateY(-10px) scale(1.05);box-shadow:0 20px 40px #9b59b64d}.character-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:2000;display:flex;align-items:center;justify-content:center;padding:2rem;animation:fadeIn .3s ease-out}.overlay-background{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000e6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.overlay-content{position:relative;width:100%;max-width:1200px;max-height:90vh;background:var(--bg-card);border-radius:30px;overflow:hidden;border:2px solid var(--blood-red);box-shadow:0 0 100px #ff3b3b4d;animation:slideInUp .5s cubic-bezier(.175,.885,.32,1.275)}.close-overlay{position:absolute;top:1.5rem;right:1.5rem;width:50px;height:50px;background:var(--blood-red);border:none;border-radius:50%;color:#fff;font-size:1.5rem;cursor:pointer;z-index:10;transition:var(--transition-bounce);display:flex;align-items:center;justify-content:center}.close-overlay:hover{transform:rotate(90deg) scale(1.1);background:var(--flame-orange);box-shadow:0 0 30px #ff3b3b80}.main-footer{background:var(--bg-secondary);border-top:2px solid var(--border-glass);padding:4rem 2rem 2rem;margin-top:4rem}.footer-content{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:3rem;margin-bottom:3rem}.footer-section h3{font-family:Orbitron,sans-serif;font-size:1.5rem;margin-bottom:1.5rem;background:linear-gradient(45deg,var(--blood-red),var(--water-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.footer-stats{display:flex;gap:2rem;justify-content:center;padding-top:2rem;border-top:1px solid var(--border-glass)}.footer-stat{text-align:center}.footer-stat .number{display:block;font-family:Orbitron,sans-serif;font-size:2.5rem;font-weight:700;color:var(--blood-red);margin-bottom:.5rem}.footer-stat .label{font-size:.9rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px}@media (max-width: 768px){.hero-header{min-height:80vh}.hero-title{font-size:3rem}.nav-tabs{gap:.25rem}.nav-tab{padding:.6rem 1rem;font-size:.8rem}.stat-card{padding:1.5rem}.stat-number{font-size:3rem}.characters-grid{grid-template-columns:1fr}.overlay-content{max-height:85vh}}@media (max-width: 480px){.hero-header{padding:1rem}.hero-title{font-size:2.5rem}.nav-container{flex-direction:column;gap:1rem}.stats-grid,.footer-content{grid-template-columns:1fr}}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;gap:2rem}.loading-spinner{width:80px;height:80px;border:8px solid transparent;border-top:8px solid var(--blood-red);border-right:8px solid var(--water-blue);border-bottom:8px solid var(--thunder-yellow);border-left:8px solid var(--flame-orange);border-radius:50%;animation:spin 1.5s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:10px}::-webkit-scrollbar-thumb{background:linear-gradient(45deg,var(--blood-red),var(--water-blue));border-radius:10px;border:2px solid var(--bg-secondary)}::-webkit-scrollbar-thumb:hover{background:linear-gradient(45deg,var(--flame-orange),var(--thunder-yellow))}.blood-effect{position:relative}.blood-effect:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,transparent 30%,rgba(255,59,59,.1) 100%);pointer-events:none}.water-effect{position:relative;overflow:hidden}.water-effect:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(54,162,235,.1) 50%,transparent 70%);animation:shimmer 4s infinite linear;pointer-events:none}.inazuma-container{--inazuma-bg: #0a192f;--inazuma-card: #112240;--inazuma-border: rgba(46, 204, 113, .3);--inazuma-text: #ffffff;--inazuma-secondary: #8892b0;--soccer-green: #2ecc71;--soccer-blue: #3498db;--fire-red: #e74c3c;--thunder-yellow: #f1c40f;--wind-teal: #1abc9c;all:initial;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:var(--inazuma-bg);color:var(--inazuma-text);min-height:100vh;width:100%;margin:0;padding:0;box-sizing:border-box;position:relative}.inazuma-container *,.inazuma-container *:before,.inazuma-container *:after{box-sizing:border-box;margin:0;padding:0;font-family:inherit}.inazuma-header{text-align:center;padding:2rem 1rem;background:linear-gradient(135deg,#0a192fe6,#112240e6);border-bottom:3px solid var(--soccer-green)}.game-title{font-size:clamp(2rem,5vw,3rem);background:linear-gradient(45deg,var(--soccer-green),var(--soccer-blue));-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 .5rem;display:flex;align-items:center;justify-content:center;gap:1rem}.soccer-ball{animation:bounce 2s infinite;font-size:2rem}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.game-subtitle{color:var(--inazuma-secondary);font-size:1.2rem;margin:0}.alert-message{background:#2ecc7133;border:2px solid var(--soccer-green);color:var(--soccer-green);padding:1rem;margin:1rem auto;max-width:600px;border-radius:10px;text-align:center;animation:slideIn .3s ease;font-weight:700}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.lobby-screen{max-width:1200px;margin:2rem auto;padding:1rem}.lobby-content{background:#112240cc;border-radius:20px;padding:2rem;border:2px solid var(--inazuma-border);text-align:center}.lobby-content h2{font-size:2.5rem;margin-bottom:2rem;color:var(--soccer-green)}.teams-overview{display:flex;justify-content:center;align-items:center;gap:3rem;margin:3rem 0;flex-wrap:wrap}.team-preview{background:#ffffff1a;border-radius:15px;padding:2rem;min-width:200px;border:3px solid}.team-blue{border-color:var(--soccer-blue)}.team-red{border-color:var(--fire-red)}.team-preview h3{font-size:1.5rem;margin-bottom:1rem}.team-count,.team-power{font-size:1.1rem;margin:.5rem 0}.vs-circle{width:60px;height:60px;background:var(--fire-red);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.lobby-controls{margin-top:2rem}.btn-start,.btn-reset,.btn-skip,.btn-end-draft,.btn-rematch,.btn-lobby{padding:1rem 2rem;border:none;border-radius:10px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease;margin:.5rem;text-transform:uppercase;letter-spacing:1px}.btn-start,.btn-end-draft,.btn-rematch{background:linear-gradient(45deg,var(--soccer-green),var(--soccer-blue));color:#fff}.btn-start:hover,.btn-end-draft:hover,.btn-rematch:hover{transform:translateY(-3px);box-shadow:0 10px 20px #2ecc714d}.btn-reset,.btn-lobby{background:transparent;border:2px solid var(--inazuma-secondary);color:var(--inazuma-secondary)}.btn-reset:hover,.btn-lobby:hover{border-color:var(--fire-red);color:var(--fire-red)}.btn-skip{background:#f1c40fe6;color:#000}.btn-skip:hover{background:#f39c12e6}.btn-end-draft:disabled{opacity:.5;cursor:not-allowed}.draft-screen{max-width:1400px;margin:1rem auto;padding:1rem}.draft-header{display:flex;justify-content:space-between;align-items:center;background:#112240e6;padding:1rem 2rem;border-radius:15px;margin-bottom:2rem;border:2px solid var(--inazuma-border)}.round-info,.timer,.turn-info{font-size:1.2rem;font-weight:700;padding:.5rem 1rem;border-radius:10px}.round-info{background:#3498db33;color:var(--soccer-blue)}.timer{background:#f1c40f33;color:var(--thunder-yellow);animation:pulse 1s infinite}.turn-info{background:#2ecc7133;color:var(--soccer-green)}.draft-arena{display:grid;grid-template-columns:1fr 2fr 1fr;gap:1rem;margin-bottom:2rem}@media (max-width: 1024px){.draft-arena{grid-template-columns:1fr}}.team-section{background:#112240e6;border-radius:15px;padding:1rem;border:3px solid}.team-section h3{font-size:1.3rem;margin-bottom:1rem;text-align:center}.team-players{min-height:300px}.team-player{background:#ffffff0d;border-radius:8px;padding:.8rem;margin-bottom:.5rem;font-size:.9rem}.team-total{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--inazuma-border);text-align:center;font-weight:700;font-size:1.2rem;color:var(--thunder-yellow)}.draft-pool{background:#0a192fe6;border-radius:15px;padding:1rem;border:3px solid var(--soccer-green)}.draft-pool h3{text-align:center;font-size:1.5rem;margin-bottom:1rem;color:var(--soccer-green)}.available-players{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:1rem}.player-card{background:linear-gradient(145deg,#112240e6,#0a192fe6);border-radius:12px;padding:1rem;border:2px solid var(--inazuma-border);cursor:pointer;transition:all .3s ease;text-align:center}.player-card.available:hover{transform:translateY(-5px);border-color:var(--soccer-green);box-shadow:0 10px 20px #2ecc7133}.player-card.drafted{opacity:.7;cursor:default}.player-header{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.5rem}.player-element{font-size:1.5rem}.player-name{font-weight:700;font-size:1.1rem}.player-info{display:flex;justify-content:space-between;font-size:.9rem;color:var(--inazuma-secondary);margin-bottom:.5rem}.player-power{font-size:1rem;color:var(--thunder-yellow);margin:.5rem 0}.draft-action{font-size:.8rem;color:var(--soccer-green);margin-top:.5rem;font-weight:500}.pool-info{text-align:center;color:var(--inazuma-secondary);font-size:.9rem}.draft-controls{display:flex;justify-content:center;gap:1rem;margin-top:2rem}.match-screen{max-width:1200px;margin:2rem auto;padding:1rem}.match-screen h2{text-align:center;font-size:2.5rem;margin-bottom:2rem;background:linear-gradient(45deg,var(--fire-red),var(--thunder-yellow));-webkit-background-clip:text;background-clip:text;color:transparent}.match-arena{display:flex;justify-content:center;align-items:flex-start;gap:2rem;margin:2rem 0;flex-wrap:wrap}.match-team{background:#112240e6;border-radius:15px;padding:1.5rem;border:3px solid;min-width:250px;text-align:center}.match-team h3{font-size:1.8rem;margin-bottom:1rem}.match-power{font-size:2rem;font-weight:700;margin:1rem 0;color:var(--thunder-yellow)}.match-center{display:flex;flex-direction:column;align-items:center;justify-content:center}.score-display{font-size:3rem;font-weight:700;color:var(--soccer-green);margin-bottom:1rem}.vs-label{font-size:2rem;color:var(--fire-red);font-weight:700}.match-player{background:#ffffff0d;border-radius:8px;padding:.8rem;margin:.5rem 0;display:flex;align-items:center;justify-content:center;gap:.5rem}.player-emoji{font-size:1.2rem}.match-result{background:#112240e6;border-radius:15px;padding:2rem;text-align:center;margin:2rem 0;border:2px solid var(--soccer-green)}.winner-badge,.draw-badge{font-size:3rem;margin-bottom:1rem}.winner{font-size:2rem;color:var(--thunder-yellow);margin-bottom:1rem}.draw{font-size:2rem;color:var(--soccer-blue);margin-bottom:1rem}.match-techniques{background:#112240e6;border-radius:15px;padding:1.5rem;margin:2rem 0}.match-techniques h4{font-size:1.3rem;margin-bottom:1rem;color:var(--soccer-green);text-align:center}.techniques-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.technique{background:#2ecc711a;border-radius:10px;padding:1rem;display:flex;justify-content:space-between;align-items:center}.tech-name{font-weight:500}.tech-power{background:#e74c3c33;padding:.3rem .8rem;border-radius:5px;font-weight:700}.match-controls{display:flex;justify-content:center;gap:1rem;margin-top:2rem}.inazuma-footer{margin-top:3rem;padding:2rem;background:#0a192fe6;border-top:2px solid var(--soccer-green)}.instructions{max-width:600px;margin:0 auto;text-align:center}.instructions p{margin:.5rem 0;color:var(--inazuma-secondary)}@media (max-width: 768px){.game-title{font-size:2rem}.teams-overview{flex-direction:column;gap:1.5rem}.draft-arena{gap:1rem}.available-players{grid-template-columns:1fr}.match-arena{flex-direction:column;align-items:center}.match-team{width:100%;max-width:300px}}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}