:root{
 
 --primary-color:#3498db;
 --primary-dark:#2980b9;
 --primary-light:#5dade2;
 --secondary-color:#34495e;
 --secondary-dark:#2c3e50;
 --accent-color:#e74c3c;
 --success-color:#27ae60;
 --warning-color:#f39c12;
 
 
 --text-primary:#2c3e50;
 --text-secondary:#5e6c6d;
 --text-light:#bdc3c7;
 --background-primary:#ffffff;
 --background-secondary:#f8f9fa;
 --background-dark:#2c3e50;
 --border-color:#e9ecef;
 
 
 --font-primary:'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
 --font-secondary:'JetBrains Mono', 'Fira Code', monospace;
 --font-size-xs:0.75rem;
 --font-size-sm:0.875rem;
 --font-size-base:1rem;
 --font-size-lg:1.125rem;
 --font-size-xl:1.25rem;
 --font-size-2xl:1.5rem;
 --font-size-3xl:1.875rem;
 --font-size-4xl:2.25rem;
 
 
 --spacing-xs:0.25rem;
 --spacing-sm:0.5rem;
 --spacing-md:1rem;
 --spacing-lg:1.5rem;
 --spacing-xl:2rem;
 --spacing-2xl:3rem;
 --spacing-3xl:4rem;
 
 
 --border-radius-sm:0.375rem;
 --border-radius-md:0.5rem;
 --border-radius-lg:0.75rem;
 --border-radius-xl:1rem;
 --border-radius-full:9999px;
 
 
 --shadow-sm:0 1px 2px 0 rgba(0, 0, 0, 0.05);
 --shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 --shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 --shadow-xl:0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 
 
 --transition-fast:150ms ease-in-out;
 --transition-base:250ms ease-in-out;
 --transition-slow:400ms ease-in-out;
 
 
 --z-dropdown:1000;
 --z-sticky:1020;
 --z-fixed:1030;
 --z-modal:1040;
 --z-popover:1050;
 --z-tooltip:1060;
}
*,
*::before,
*::after{
 box-sizing:border-box;
 margin:0;
 padding:0;
}
html{
 scroll-behavior:smooth;
 font-size:16px;
}
body{
 font-family:var(--font-primary);
 font-size:var(--font-size-base);
 line-height:1.6;
 color:var(--text-primary);
 background-color:var(--background-primary);
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
}
.container{
 width:100%;
 max-width:1200px;
 margin:0 auto;
 padding:0 var(--spacing-md);
}
.container-fluid{
 width:100%;
 padding:0 var(--spacing-md);
}
.grid{
 display:grid;
 gap:var(--spacing-lg);
}
.grid-cols-1{grid-template-columns:repeat(1, 1fr);}
.grid-cols-2{grid-template-columns:repeat(2, 1fr);}
.grid-cols-3{grid-template-columns:repeat(3, 1fr);}
.grid-cols-4{grid-template-columns:repeat(4, 1fr);}
.flex{display:flex;}
.flex-col{flex-direction:column;}
.flex-wrap{flex-wrap:wrap;}
.items-center{align-items:center;}
.items-start{align-items:flex-start;}
.items-end{align-items:flex-end;}
.justify-center{justify-content:center;}
.justify-between{justify-content:space-between;}
.justify-around{justify-content:space-around;}
.navbar{
 position:fixed;
 top:0;
 left:0;
 right:0;
 background:rgba(255, 255, 255, 0.85);
 backdrop-filter:blur(15px);
 border-bottom:1px solid rgba(0, 0, 0, 0.1);
 padding:var(--spacing-md) 0;
 z-index:var(--z-fixed);
 transition:all var(--transition-base);
}
.navbar.scrolled{
 background:rgba(255, 255, 255, 0.98);
 box-shadow:0 2px 20px rgba(0, 0, 0, 0.15);
 border-bottom:1px solid rgba(0, 0, 0, 0.12);
}
.navbar-content{
 display:flex;
 align-items:center;
 justify-content:space-between;
 max-width:1200px;
 margin:0 auto;
 padding:0 var(--spacing-md);
}
.navbar-brand{
 font-size:var(--font-size-xl);
 font-weight:700;
 color:var(--primary-color);
 text-decoration:none;
 transition:color var(--transition-fast);
}
.navbar-brand:hover{
 color:var(--primary-dark);
}
.navbar-menu{
 display:flex;
 list-style:none;
 gap:0;
 align-items:center;
 margin:0;
 padding:0;
}
.navbar-menu li{
 margin:0;
 padding:0;
}
.navbar-menu a{
 display:block;
 text-decoration:none;
 color:#2c3e50;
 font-weight:600;
 padding:var(--spacing-sm) var(--spacing-md);
 margin:0 2px;
 border-radius:var(--border-radius-md);
 transition:all var(--transition-fast);
 position:relative;
 white-space:nowrap;
 font-size:0.9rem;
 line-height:1.2;
}
.navbar-menu a:hover,
.navbar-menu a.active{
 color:var(--primary-color);
 background-color:rgba(52, 152, 219, 0.15);
 transform:translateY(-1px);
}
.navbar-menu a::after{
 content:'';
 position:absolute;
 bottom:-2px;
 left:50%;
 width:0;
 height:2px;
 background-color:var(--primary-color);
 transform:translateX(-50%);
 transition:width var(--transition-base);
}
.navbar-menu a:hover::after,
.navbar-menu a.active::after{
 width:80%;
}
.menu-toggle{
 display:none;
 flex-direction:column;
 gap:4px;
 cursor:pointer;
 padding:var(--spacing-md);
 border-radius:var(--border-radius-md);
 transition:all var(--transition-fast);
 background:none;
 border:none;
 position:relative;
 min-width:48px;
 min-height:48px;
 align-items:center;
 justify-content:center;
 z-index:1001;
}
.menu-toggle:hover{
 background-color:rgba(52, 152, 219, 0.1);
}
.menu-toggle .menu-icon{
 display:flex;
 flex-direction:column;
 gap:4px;
}
.menu-toggle .menu-icon span{
 width:26px;
 height:3px;
 background-color:#2c3e50;
 border-radius:2px;
 transition:all var(--transition-base);
 display:block;
 transform-origin:center;
}
.menu-toggle.active .menu-icon span:nth-child(1){
 transform:rotate(45deg) translate(6px, 6px);
}
.menu-toggle.active .menu-icon span:nth-child(2){
 opacity:0;
 transform:scale(0);
}
.menu-toggle.active .menu-icon span:nth-child(3){
 transform:rotate(-45deg) translate(6px, -6px);
}
.hero-section{
 min-height:100vh;
 display:flex;
 align-items:center;
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color:white;
 position:relative;
 overflow:hidden;
}
.hero-section::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="rgba(255,255,255,0.1)" points="0,1000 1000,0 1000,1000"/></svg>');
 background-size:cover;
}
.hero-content{
 position:relative;
 z-index:1;
 text-align:center;
}
.hero-title{
 font-size:clamp(2.5rem, 5vw, 4rem);
 font-weight:700;
 margin-bottom:var(--spacing-lg);
 opacity:0;
 animation:slideInUp 1s ease-out 0.5s forwards;
}
.hero-subtitle{
 font-size:clamp(1.125rem, 2.5vw, 1.5rem);
 margin-bottom:var(--spacing-xl);
 opacity:0;
 animation:slideInUp 1s ease-out 0.7s forwards;
}
.hero-description{
 font-size:var(--font-size-lg);
 max-width:600px;
 margin:0 auto var(--spacing-2xl);
 opacity:0;
 animation:slideInUp 1s ease-out 0.9s forwards;
}
.btn{
 display:inline-flex;
 align-items:center;
 gap:var(--spacing-sm);
 padding:var(--spacing-md) var(--spacing-xl);
 font-size:var(--font-size-base);
 font-weight:600;
 text-decoration:none;
 border:none;
 border-radius:var(--border-radius-lg);
 cursor:pointer;
 transition:all var(--transition-base);
 position:relative;
 overflow:hidden;
}
.btn-primary{
 background-color:var(--primary-color);
 color:white;
}
.btn-primary:hover{
 background-color:var(--primary-dark);
 transform:translateY(-2px);
 box-shadow:var(--shadow-lg);
}
.btn-secondary{
 background-color:transparent;
 color:white;
 border:2px solid white;
}
.btn-secondary:hover{
 background-color:white;
 color:var(--primary-color);
}
.btn-outline{
 background-color:transparent;
 color:var(--primary-color);
 border:2px solid var(--primary-color);
}
.btn-outline:hover{
 background-color:var(--primary-color);
 color:white;
 transform:translateY(-2px);
 box-shadow:var(--shadow-lg);
}
.btn-group{
 display:flex;
 gap:var(--spacing-md);
 flex-wrap:wrap;
 justify-content:center;
 opacity:0;
 animation:slideInUp 1s ease-out 1.1s forwards;
}
.profile-image{
 width:200px;
 height:200px;
 border-radius:var(--border-radius-full);
 border:4px solid white;
 box-shadow:var(--shadow-xl);
 object-fit:cover;
 margin-bottom:var(--spacing-xl);
 opacity:0;
 animation:scaleIn 1s ease-out 0.3s forwards;
}
.section{
 padding:var(--spacing-3xl) 0;
}
.section-title{
 font-size:var(--font-size-3xl);
 font-weight:700;
 text-align:center;
 margin-bottom:var(--spacing-2xl);
 color:var(--text-primary);
 position:relative;
}
.section-title::after{
 content:'';
 position:absolute;
 bottom:-var(--spacing-md);
 left:50%;
 width:60px;
 height:4px;
 background:linear-gradient(90deg, var(--primary-color), var(--primary-light));
 border-radius:var(--border-radius-full);
 transform:translateX(-50%);
}
.card{
 background:var(--background-primary);
 border-radius:var(--border-radius-xl);
 padding:var(--spacing-xl);
 box-shadow:var(--shadow-md);
 transition:all var(--transition-base);
 border:1px solid var(--border-color);
}
.card:hover{
 transform:translateY(-8px);
 box-shadow:var(--shadow-xl);
}
.card-title{
 font-size:var(--font-size-xl);
 font-weight:600;
 margin-bottom:var(--spacing-md);
 color:var(--text-primary);
}
.card-text{
 color:var(--text-secondary);
 line-height:1.6;
}
@keyframes slideInUp{
 from{
 opacity:0;
 transform:translateY(30px);
}
 to{
 opacity:1;
 transform:translateY(0);
}
}
@keyframes scaleIn{
 from{
 opacity:0;
 transform:scale(0.8);
}
 to{
 opacity:1;
 transform:scale(1);
}
}
@keyframes fadeIn{
 from{opacity:0;}
 to{opacity:1;}
}
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:var(--spacing-xs);}
.mb-2{margin-bottom:var(--spacing-sm);}
.mb-3{margin-bottom:var(--spacing-md);}
.mb-4{margin-bottom:var(--spacing-lg);}
.mb-5{margin-bottom:var(--spacing-xl);}
.mt-0{margin-top:0;}
.mt-1{margin-top:var(--spacing-xs);}
.mt-2{margin-top:var(--spacing-sm);}
.mt-3{margin-top:var(--spacing-md);}
.mt-4{margin-top:var(--spacing-lg);}
.mt-5{margin-top:var(--spacing-xl);}
@media (prefers-color-scheme:dark){
:root{
 --text-primary:#e9ecef;
 --text-secondary:#adb5bd;
 --background-primary:#1a1a1a;
 --background-secondary:#2d3748;
 --border-color:#4a5568;
}
 
 .navbar{
 background:rgba(26, 26, 26, 0.95);
 border-bottom:1px solid rgba(255, 255, 255, 0.1);
 backdrop-filter:blur(15px);
}
 
 .navbar.scrolled{
 background:rgba(26, 26, 26, 0.98);
 box-shadow:0 2px 20px rgba(0, 0, 0, 0.3);
 border-bottom:1px solid rgba(255, 255, 255, 0.15);
}
 
 .navbar-menu a{
 color:#f8f9fa;
 font-weight:600;
}
 
 .navbar-menu a:hover,
 .navbar-menu a.active{
 color:var(--primary-color);
 background-color:rgba(52, 152, 219, 0.2);
}
 
 .menu-toggle span{
 background-color:#f8f9fa;
}
 
 .navbar-brand{
 color:var(--primary-color);
}
 
 .card{
 background:var(--background-secondary);
 border-color:var(--border-color);
}
}
@media (prefers-color-scheme:dark) and (max-width:768px){
 .navbar-menu{
 background:rgba(26, 26, 26, 0.98) !important;
 border-top:1px solid rgba(255, 255, 255, 0.1) !important;
 box-shadow:0 4px 30px rgba(0, 0, 0, 0.5) !important;
}
 
 .navbar-menu a{
 color:#f8f9fa !important;
 border-bottom:1px solid rgba(255, 255, 255, 0.1) !important;
}
 
 .navbar-menu a:hover{
 background-color:rgba(52, 152, 219, 0.2) !important;
 color:var(--primary-color) !important;
}
}
@media (max-width:1300px){
 .navbar-menu a{
 padding:6px 8px;
 font-size:0.85rem;
 margin:0 1px;
}
}
@media (max-width:1100px){
 .navbar-menu a{
 padding:4px 6px;
 font-size:0.8rem;
 margin:0;
}
 
 .navbar-menu a i{
 display:none;
}
}
@media (max-width:950px){
 
 .navbar-menu{
 display:none !important;
 position:fixed !important;
 top:70px !important;
 left:0 !important;
 right:0 !important;
 background:rgba(255, 255, 255, 0.98) !important;
 backdrop-filter:blur(20px) !important;
 flex-direction:column !important;
 padding:var(--spacing-lg) !important;
 box-shadow:0 4px 30px rgba(0, 0, 0, 0.2) !important;
 border-top:1px solid rgba(0, 0, 0, 0.1) !important;
 transform:translateY(-100%) !important;
 opacity:0 !important;
 visibility:hidden !important;
 transition:all var(--transition-base) !important;
 z-index:var(--z-dropdown) !important;
 width:100% !important;
 max-height:calc(100vh - 70px) !important;
 overflow-y:auto !important;
}
 
 .menu-toggle{
 display:flex !important;
}
 
 .navbar-menu.active{
 display:flex !important;
 transform:translateY(0) !important;
 opacity:1 !important;
 visibility:visible !important;
}
 
 .navbar-menu a{
 padding:var(--spacing-lg) var(--spacing-md) !important;
 text-align:center !important;
 border-bottom:1px solid rgba(0, 0, 0, 0.1) !important;
 font-size:var(--font-size-lg) !important;
 color:#2c3e50 !important;
 font-weight:600 !important;
 width:100% !important;
 display:flex !important;
 align-items:center !important;
 justify-content:center !important;
 gap:var(--spacing-sm) !important;
 box-sizing:border-box !important;
 min-height:54px !important;
 border-radius:var(--border-radius-md) !important;
 margin:var(--spacing-xs) 0 !important;
 transition:all var(--transition-fast) !important;
}
 
 .navbar-menu a i{
 display:inline !important;
 font-size:1.2em !important;
 color:var(--primary-color) !important;
}
 
 .navbar-menu a:hover,
 .navbar-menu a:focus{
 background-color:rgba(52, 152, 219, 0.15) !important;
 color:var(--primary-color) !important;
 transform:translateX(4px) !important;
 border-left:4px solid var(--primary-color) !important;
}
 
 .navbar-menu a:last-child{
 border-bottom:none !important;
 margin-bottom:var(--spacing-md) !important;
}
 
 .menu-toggle{
 display:flex;
}
 
 .grid-cols-2,
 .grid-cols-3,
 .grid-cols-4{
 grid-template-columns:1fr;
}
 
 .btn-group{
 flex-direction:column;
 align-items:center;
}
 
 .hero-section{
 padding:var(--spacing-2xl) 0;
 margin-top:70px;
}
 
 
 html, body{
 overflow-x:hidden !important;
 -webkit-text-size-adjust:100% !important;
 -ms-text-size-adjust:100% !important;
}
 
 .container{
 overflow-x:hidden !important;
 width:100% !important;
 padding:0 var(--spacing-md) !important;
 box-sizing:border-box !important;
}
 
 
 *{
 -webkit-overflow-scrolling:touch !important;
}
 
 
 input, 
 textarea, 
 select{
 font-size:16px !important;
}
}
.animate-on-scroll{
 opacity:0;
 transform:translateY(30px);
 transition:all 0.6s ease-out;
}
.animate-on-scroll.animated{
 opacity:1;
 transform:translateY(0);
}
.loading-overlay{
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-color:rgba(255, 255, 255, 0.9);
 display:flex;
 align-items:center;
 justify-content:center;
 z-index:10000;
 opacity:1;
 visibility:visible;
 transition:opacity 0.3s ease, visibility 0.3s ease;
}
.loading-overlay.hidden{
 opacity:0;
 visibility:hidden;
}
.loading-spinner{
 width:40px;
 height:40px;
 border:4px solid var(--border-color);
 border-left-color:var(--primary-color);
 border-radius:50%;
 animation:spin 1s linear infinite;
}
@keyframes spin{
 to{transform:rotate(360deg);}
}
.sr-only{
 position:absolute;
 width:1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0, 0, 0, 0);
 white-space:nowrap;
 border:0;
}
.btn:focus-visible,
.navbar-menu a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.tutorial-card:focus-visible,
.project-card:focus-visible{
 outline:2px solid var(--primary-color);
 outline-offset:2px;
 box-shadow:0 0 0 4px rgba(52, 152, 219, 0.2);
}
@font-face{
 font-family:'Inter';
 font-display:swap;
 src:url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
}
.timeline{
 position:relative;
 max-width:800px;
 margin:0 auto;
}
.timeline-item{
 margin-bottom:var(--spacing-xl);
}
.timeline-date{
 font-weight:600;
 color:var(--primary-color);
 margin-bottom:var(--spacing-sm);
}
.education-skills{
 display:flex;
 flex-wrap:wrap;
 gap:var(--spacing-sm);
 margin-top:var(--spacing-md);
}
.skill-badge{
 display:inline-block;
 background:linear-gradient(135deg, var(--primary-color), var(--primary-light));
 color:white;
 padding:var(--spacing-xs) var(--spacing-sm);
 border-radius:var(--border-radius-full);
 font-size:var(--font-size-xs);
 font-weight:500;
 text-align:center;
 box-shadow:var(--shadow-sm);
 transition:all var(--transition-fast);
}
.skill-badge:hover{
 transform:translateY(-2px);
 box-shadow:var(--shadow-md);
}
.timeline-item h3{
 color:var(--text-primary);
 margin-bottom:var(--spacing-sm);
 font-size:var(--font-size-xl);
 display:flex;
 align-items:center;
 gap:var(--spacing-sm);
}
.timeline-item h3 i{
 color:var(--primary-color);
 font-size:1.2em;
}
.timeline-item h4{
 color:var(--text-secondary);
 margin-bottom:var(--spacing-xs);
 font-size:var(--font-size-lg);
 font-weight:500;
 font-style:italic;
}
.timeline-item h5{
 color:var(--primary-color);
 margin-bottom:var(--spacing-md);
 font-size:var(--font-size-base);
 font-weight:600;
}
.timeline-item:nth-child(1) .card{
 border-left:4px solid #e74c3c;
}
.timeline-item:nth-child(2) .card{
 border-left:4px solid #f39c12;
}
.timeline-item:nth-child(3) .card{
 border-left:4px solid var(--primary-color);
}
.timeline-item:nth-child(4) .card{
 border-left:4px solid #27ae60;
}
.timeline-item:nth-child(5) .card{
 border-left:4px solid #9b59b6;
}
.skill-category{
 text-align:center;
}
.skill-category h3{
 color:var(--text-primary);
 margin-bottom:var(--spacing-lg);
 font-size:var(--font-size-xl);
}
.skill-category ul{
 list-style:none;
 padding:0;
}
.skill-category li{
 padding:var(--spacing-sm) 0;
 color:var(--text-secondary);
 border-bottom:1px solid var(--border-color);
}
.skill-category li:last-child{
 border-bottom:none;
}
.project-card{
 height:100%;
}
.project-content{
 padding:var(--spacing-lg);
}
.project-tech{
 display:flex;
 flex-wrap:wrap;
 gap:var(--spacing-sm);
 margin-top:var(--spacing-md);
}
.tech-tag{
 background-color:var(--primary-color);
 color:white;
 padding:var(--spacing-xs) var(--spacing-sm);
 border-radius:var(--border-radius-sm);
 font-size:var(--font-size-sm);
 font-weight:500;
}
.tutorial-card{
 text-align:center;
 padding:var(--spacing-lg);
}
.tutorial-icon{
 font-size:3rem;
 color:var(--primary-color);
 margin-bottom:var(--spacing-md);
}
.tutorial-card h4{
 margin-bottom:var(--spacing-sm);
 color:var(--text-primary);
}
.contact-info h3{
 color:var(--text-primary);
 margin-bottom:var(--spacing-lg);
}
.contact-methods{
 display:flex;
 flex-direction:column;
 gap:var(--spacing-lg);
}
.contact-method{
 display:flex;
 align-items:center;
 gap:var(--spacing-md);
}
.contact-icon{
 width:50px;
 height:50px;
 background-color:var(--primary-color);
 color:white;
 border-radius:var(--border-radius-full);
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:var(--font-size-lg);
}
.contact-method h4{
 margin-bottom:var(--spacing-xs);
 color:var(--text-primary);
}
.contact-method a{
 color:var(--primary-color);
 text-decoration:none;
}
.contact-method a:hover{
 text-decoration:underline;
}
.contact-form{
 background:white;
 padding:var(--spacing-xl);
 border-radius:var(--border-radius-lg);
 box-shadow:var(--shadow-md);
}
.form-group{
 margin-bottom:var(--spacing-lg);
}
.form-group label{
 display:block;
 margin-bottom:var(--spacing-sm);
 font-weight:500;
 color:var(--text-primary);
}
.form-group input,
.form-group textarea{
 width:100%;
 padding:var(--spacing-md);
 border:1px solid var(--border-color);
 border-radius:var(--border-radius-md);
 font-size:var(--font-size-base);
 transition:border-color var(--transition-fast);
}
.form-group input:focus,
.form-group textarea:focus{
 outline:none;
 border-color:var(--primary-color);
 box-shadow:0 0 0 2px rgba(52, 152, 219, 0.2);
}
.error-message{
 color:var(--accent-color);
 font-size:var(--font-size-sm);
 display:block;
 min-height:1.2em;
 margin-top:var(--spacing-xs);
}
.form-group input[aria-invalid="true"],
.form-group textarea[aria-invalid="true"]{
 border-color:var(--accent-color);
}
.form-group input[aria-invalid="true"]:focus,
.form-group textarea[aria-invalid="true"]:focus{
 box-shadow:0 0 0 2px rgba(231, 76, 60, 0.2);
}
.footer{
 background-color:var(--background-dark);
 color:white;
 padding:var(--spacing-3xl) 0 var(--spacing-xl);
}
.footer-content{
 display:grid;
 grid-template-columns:repeat(4, 1fr);
 gap:var(--spacing-xl);
 margin-bottom:var(--spacing-xl);
}
.footer-section h4{
 margin-bottom:var(--spacing-lg);
 color:white;
}
.footer-section ul{
 list-style:none;
 padding:0;
}
.footer-section li{
 margin-bottom:var(--spacing-sm);
}
.footer-section a{
 color:var(--text-light);
 text-decoration:none;
 transition:color var(--transition-fast);
}
.footer-section a:hover{
 color:white;
}
.social-links{
 display:flex;
 gap:var(--spacing-md);
 margin-top:var(--spacing-md);
}
.social-links a{
 width:40px;
 height:40px;
 background-color:var(--primary-color);
 color:white;
 border-radius:var(--border-radius-full);
 display:flex;
 align-items:center;
 justify-content:center;
 transition:background-color var(--transition-fast);
}
.social-links a:hover{
 background-color:var(--primary-dark);
}
.footer-bottom{
 border-top:1px solid var(--border-color);
 padding-top:var(--spacing-lg);
 text-align:center;
 color:var(--text-light);
}
.text-gradient{
 background:linear-gradient(135deg, var(--primary-color), var(--primary-light));
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
}
.text-lg{
 font-size:var(--font-size-lg);
}
@media (max-width:1024px){
 .footer-content{
 grid-template-columns:repeat(2, 1fr);
}
}
@media (max-width:768px){
 .footer-content{
 grid-template-columns:1fr;
 text-align:center;
}
 
 .contact-methods{
 align-items:center;
}
 
 .social-links{
 justify-content:center;
}
}
@media print{
 .navbar,
 .btn,
 .menu-toggle{
 display:none !important;
}
 
 .hero-section{
 background:none !important;
 color:black !important;
}
 
 .section{
 page-break-inside:avoid;
}
}
/* ==========================================================================
 Accessibilité
 ========================================================================== */
.skip-link{
 position:absolute;
 top:-40px;
 left:0;
 background:var(--primary-color);
 color:white;
 padding:8px;
 z-index:10000;
 transition:top 0.3s ease-in-out;
}
.skip-link:focus{
 top:0;
}
/* ==========================================================================
 Animations
 ========================================================================== */
.animate-on-scroll{
 opacity:0;
 transform:translateY(30px);
 transition:all 0.6s ease-out;
}
.animate-on-scroll.animated{
 opacity:1;
 transform:translateY(0);
}
@keyframes slideInUp{
 from{
 opacity:0;
 transform:translateY(30px);
}
 to{
 opacity:1;
 transform:translateY(0);
}
}
@keyframes scaleIn{
 from{
 opacity:0;
 transform:scale(0.8);
}
 to{
 opacity:1;
 transform:scale(1);
}
}
@keyframes fadeIn{
 from{opacity:0;}
 to{opacity:1;}
}
.loading-overlay{
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-color:rgba(255, 255, 255, 0.9);
 display:flex;
 align-items:center;
 justify-content:center;
 z-index:10000;
 opacity:1;
 visibility:visible;
 transition:opacity 0.3s ease, visibility 0.3s ease;
}
.loading-overlay.hidden{
 opacity:0;
 visibility:hidden;
}
.loading-spinner{
 width:40px;
 height:40px;
 border:4px solid var(--border-color);
 border-left-color:var(--primary-color);
 border-radius:50%;
 animation:spin 1s linear infinite;
}
@keyframes spin{
 to{transform:rotate(360deg);}
}
/* ==========================================================================
 Accessibilité Avancée - Score 100/100
 ========================================================================== */
.skip-link{
 position:absolute;
 top:-40px;
 left:6px;
 background:var(--primary-color);
 color:white;
 padding:8px 16px;
 z-index:10000;
 transition:top 0.3s ease-in-out;
 border-radius:var(--border-radius-sm);
 font-weight:600;
 text-decoration:none;
 border:2px solid transparent;
}
.skip-link:focus{
 top:6px;
 outline:2px solid white;
 outline-offset:2px;
}
*:focus-visible{
 outline:2px solid var(--primary-color);
 outline-offset:2px;
 border-radius:var(--border-radius-sm);
}
.btn:focus-visible,
.navbar-menu a:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
 outline:2px solid var(--primary-color);
 outline-offset:2px;
 box-shadow:0 0 0 4px rgba(52, 152, 219, 0.2);
}
.card:focus-visible,
.tutorial-card:focus-visible,
.project-card:focus-visible{
 outline:2px solid var(--primary-color);
 outline-offset:2px;
 transform:translateY(-4px);
 box-shadow:var(--shadow-lg), 0 0 0 4px rgba(52, 152, 219, 0.2);
}
@media (prefers-reduced-motion:reduce){
 *,
 *::before,
 *::after{
 animation-duration:0.01ms !important;
 animation-iteration-count:1 !important;
 transition-duration:0.01ms !important;
 scroll-behavior:auto !important;
}
 
 .animate-on-scroll{
 opacity:1 !important;
 transform:none !important;
}
}
@media (prefers-contrast:high){
:root{
 --text-primary:#000000;
 --text-secondary:#000000;
 --background-primary:#ffffff;
 --background-secondary:#ffffff;
 --border-color:#000000;
 --primary-color:#0000ff;
 --accent-color:#ff0000;
}
 
 .btn{
 border:2px solid currentColor;
}
 
 .card{
 border:2px solid var(--border-color);
}
}
@media (prefers-color-scheme:dark){
:root{
 --text-primary:#ffffff;
 --text-secondary:#e0e0e0;
 --text-light:#b0b0b0;
 --background-primary:#1a1a1a;
 --background-secondary:#2d2d2d;
 --background-dark:#0f0f0f;
 --border-color:#404040;
 --primary-color:#4a9eff;
 --primary-light:#6bb2ff;
 --primary-dark:#2e7dd6;
}
 
 .navbar{
 background:rgba(26, 26, 26, 0.85);
 border-bottom:1px solid rgba(255, 255, 255, 0.1);
}
 
 .navbar.scrolled{
 background:rgba(26, 26, 26, 0.98);
 box-shadow:0 2px 20px rgba(0, 0, 0, 0.5);
}
}
.sr-only{
 position:absolute;
 width:1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0, 0, 0, 0);
 white-space:nowrap;
 border:0;
}
.sr-only:focus{
 position:static;
 width:auto;
 height:auto;
 padding:inherit;
 margin:inherit;
 overflow:visible;
 clip:auto;
 white-space:normal;
}
button:disabled,
input:disabled,
textarea:disabled,
select:disabled{
 opacity:0.6;
 cursor:not-allowed;
 pointer-events:none;
}
[aria-expanded="true"] .menu-icon::before{
 transform:rotate(45deg);
}
[aria-expanded="true"] .menu-icon::after{
 transform:rotate(-45deg);
}
a:not(.btn){
 text-decoration-skip-ink:auto;
 text-underline-offset:0.2em;
}
a:not(.btn):hover{
 text-decoration-thickness:2px;
}
@media (max-width:950px){
 button,
 .btn,
 a:not(.navbar-menu a),
 input,
 textarea,
 select{
 min-height:48px !important;
 min-width:48px !important;
 touch-action:manipulation !important;
}
 
 .navbar-menu a{
 min-height:54px !important;
 touch-action:manipulation !important;
 -webkit-tap-highlight-color:rgba(52, 152, 219, 0.2) !important;
}
 
 .menu-toggle{
 min-height:48px !important;
 min-width:48px !important;
 touch-action:manipulation !important;
 -webkit-tap-highlight-color:rgba(52, 152, 219, 0.2) !important;
}
 
 .btn{
 padding:var(--spacing-md) var(--spacing-xl) !important;
 min-height:48px !important;
}
 
 .tutorial-card,
 .project-card,
 .card{
 touch-action:manipulation !important;
 -webkit-tap-highlight-color:rgba(52, 152, 219, 0.1) !important;
}
}
.form-group{
 position:relative;
}
.form-group label{
 font-weight:600;
 color:var(--text-primary);
 margin-bottom:var(--spacing-xs);
 display:block;
}
.form-group input,
.form-group textarea{
 transition:all var(--transition-base);
}
.form-group input:focus,
.form-group textarea:focus{
 outline:none;
 border-color:var(--primary-color);
 box-shadow:0 0 0 3px rgba(52, 152, 219, 0.2);
}
.error-message{
 color:var(--accent-color);
 font-size:var(--font-size-sm);
 display:block;
 min-height:1.2em;
 margin-top:var(--spacing-xs);
 font-weight:500;
}
.form-group input[aria-invalid="true"],
.form-group textarea[aria-invalid="true"]{
 border-color:var(--accent-color);
 background-color:rgba(231, 76, 60, 0.05);
}
.form-group input[aria-invalid="true"]:focus,
.form-group textarea[aria-invalid="true"]:focus{
 box-shadow:0 0 0 3px rgba(231, 76, 60, 0.2);
}
table{
 border-collapse:collapse;
 width:100%;
}
th{
 text-align:left;
 font-weight:600;
 background-color:var(--background-secondary);
}
th, td{
 padding:var(--spacing-sm) var(--spacing-md);
 border:1px solid var(--border-color);
}
ul, ol{
 padding-left:var(--spacing-xl);
}
li{
 margin-bottom:var(--spacing-xs);
}
.tutorial-card:focus,
.project-card:focus,
.skill-card:focus{
 outline:2px solid var(--primary-color);
 outline-offset:2px;
}
[role="tooltip"]{
 background:var(--background-dark);
 color:white;
 padding:var(--spacing-sm);
 border-radius:var(--border-radius-sm);
 font-size:var(--font-size-sm);
 z-index:var(--z-tooltip);
}
::placeholder{
 color:var(--text-secondary);
 opacity:0.8;
}
::selection{
 background-color:var(--primary-color);
 color:white;
}
::-moz-selection{
 background-color:var(--primary-color);
 color:white;
}
@media print{
 .navbar,
 .btn,
 .menu-toggle,
 .skip-link{
 display:none !important;
}
 
 body{
 font-size:12pt;
 line-height:1.4;
 color:black;
 background:white;
}
 
 .hero-section{
 background:none !important;
 color:black !important;
}
 
 .section{
 page-break-inside:avoid;
}
 
 h1, h2, h3, h4, h5, h6{
 page-break-after:avoid;
 color:black;
}
 
 a{
 text-decoration:underline;
 color:black;
}
 
 a[href^="http"]:after{
 content:" (" attr(href) ")";
 font-size:0.8em;
}
}
.stats-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
 gap:var(--spacing-xl);
 margin-top:var(--spacing-2xl);
}
.stat-item{
 text-align:center;
 padding:var(--spacing-lg);
 background:var(--background-primary);
 border-radius:var(--border-radius-lg);
 box-shadow:var(--shadow-sm);
 transition:all var(--transition-base);
}
.stat-item:hover{
 transform:translateY(-4px);
 box-shadow:var(--shadow-md);
}
.stat-number{
 font-size:var(--font-size-3xl);
 font-weight:700;
 color:var(--primary-color);
 margin-bottom:var(--spacing-xs);
}
.stat-label{
 font-size:var(--font-size-sm);
 color:var(--text-secondary);
 font-weight:500;
}
.hero-content{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:var(--spacing-3xl);
 align-items:center;
 min-height:80vh;
}
.hero-text{
 max-width:600px;
}
.hero-image{
 display:flex;
 justify-content:center;
 align-items:center;
}
.image-container{
 position:relative;
 width:400px;
 height:400px;
 border-radius:var(--border-radius-full);
 overflow:hidden;
 box-shadow:var(--shadow-lg);
 border:4px solid var(--primary-color);
}
.image-container img{
 width:100%;
 height:100%;
 object-fit:cover;
}
.hero-buttons{
 display:flex;
 gap:var(--spacing-lg);
 margin-top:var(--spacing-xl);
}
.hero-links{
 margin-top:var(--spacing-xl);
 padding-top:var(--spacing-lg);
 border-top:1px solid rgba(255,255,255,0.2);
}
.internal-links{
 color:rgba(255,255,255,0.9);
 font-size:var(--font-size-sm);
 line-height:1.6;
 margin:0;
 text-align:center;
}
.internal-links strong{
 color:white;
 font-weight:600;
 display:inline-block;
 margin-bottom:0.5rem;
}
.internal-links a{
 color:var(--accent-color, #e74c3c);
 text-decoration:none;
 font-weight:500;
 padding:0.25rem 0.5rem;
 border-radius:var(--border-radius-sm);
 transition:all var(--transition-fast);
 display:inline-block;
 white-space:nowrap;
}
.internal-links a:hover{
 color:white;
 background-color:var(--accent-color, #e74c3c);
 transform:translateY(-1px);
 text-decoration:none;
 box-shadow:var(--shadow-sm);
}
.internal-links a:focus{
 outline:2px solid var(--accent-color, #e74c3c);
 outline-offset:2px;
}
.form-help{
 font-size:var(--font-size-sm);
 color:var(--text-secondary);
 margin-top:var(--spacing-xs);
 font-style:italic;
}
.form-group .form-help{
 margin-bottom:var(--spacing-sm);
}
.skill-bar{
 background-color:var(--background-secondary);
 border-radius:var(--border-radius-full);
 height:8px;
 overflow:hidden;
 margin-top:var(--spacing-xs);
 position:relative;
}
.skill-progress{
 height:100%;
 background:linear-gradient(90deg, var(--primary-color), var(--primary-light));
 border-radius:var(--border-radius-full);
 transition:width 1s ease-in-out;
 position:relative;
}
.skill-progress::after{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
 animation:shimmer 2s infinite;
}
@keyframes shimmer{
 0%{transform:translateX(-100%);}
 100%{transform:translateX(100%);}
}
.section-header{
 text-align:center;
 margin-bottom:var(--spacing-3xl);
}
.section-subtitle{
 font-size:var(--font-size-lg);
 color:var(--text-secondary);
 margin-top:var(--spacing-sm);
 font-weight:400;
}
.contact-methods{
 display:flex;
 flex-direction:column;
 gap:var(--spacing-xl);
}
.contact-method{
 display:flex;
 align-items:center;
 gap:var(--spacing-lg);
 padding:var(--spacing-lg);
 background:var(--background-primary);
 border-radius:var(--border-radius-lg);
 box-shadow:var(--shadow-sm);
 transition:all var(--transition-base);
}
.contact-method:hover{
 transform:translateY(-2px);
 box-shadow:var(--shadow-md);
}
.contact-method i{
 font-size:var(--font-size-xl);
 color:var(--primary-color);
 width:40px;
 text-align:center;
}
.contact-method h3{
 margin-bottom:var(--spacing-xs);
 color:var(--text-primary);
 font-size:var(--font-size-lg);
}
.contact-method p,
.contact-method a{
 color:var(--text-secondary);
 margin:0;
}
.contact-method a:hover{
 color:var(--primary-color);
}
@media (max-width:768px){
 .hero-content{
 grid-template-columns:1fr;
 text-align:center;
 gap:var(--spacing-2xl);
 padding:var(--spacing-xl) var(--spacing-md);
}
 
 .hero-buttons{
 flex-direction:column;
 align-items:center;
 gap:var(--spacing-md);
}
 
 .hero-buttons .btn{
 width:100%;
 max-width:280px;
 justify-content:center;
}
 
 .internal-links{
 font-size:var(--font-size-xs);
 text-align:center;
}
 
 .internal-links strong{
 display:block;
 margin-bottom:0.75rem;
}
 
 .internal-links a{
 display:inline-block;
 margin:0.25rem;
 padding:0.4rem 0.8rem;
 border-radius:var(--border-radius-full);
 background-color:rgba(255,255,255,0.1);
 font-size:var(--font-size-xs);
}
 
 .internal-links a:hover{
 background-color:var(--accent-color);
}
 
 .image-container{
 width:280px;
 height:280px;
 margin:0 auto;
}
 
 .stats-grid{
 grid-template-columns:1fr;
 gap:var(--spacing-lg);
}
 
 .skills-grid{
 grid-template-columns:1fr;
}
 
 .contact-content{
 flex-direction:column;
}
 
 .hero-section{
 min-height:calc(100vh - 70px);
 padding:calc(70px + var(--spacing-xl)) 0 var(--spacing-xl);
 margin-top:0;
}
 
 .hero-title{
 font-size:clamp(2rem, 8vw, 3rem);
 line-height:1.1;
 margin-bottom:var(--spacing-lg);
}
 
 .hero-subtitle{
 font-size:clamp(1rem, 4vw, 1.25rem);
 line-height:1.3;
 margin-bottom:var(--spacing-lg);
}
 
 .hero-description{
 font-size:var(--font-size-base);
 line-height:1.5;
 padding:0 var(--spacing-sm);
 margin-bottom:var(--spacing-xl);
}
}
:root{
 
 --text-color:var(--text-secondary);
 --background-color:var(--background-secondary);
 --highlight-color:var(--background-secondary);
 --transition-speed:var(--transition-normal);
 --border-radius:var(--border-radius-md);
}
@mixin flex-center{
 display:flex;
 align-items:center;
 justify-content:center;
}
body{
 font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 margin:0;
 padding:0;
 line-height:1.6;
 color:var(--text-primary);
 background:var(--background-primary);
 transition:all var(--transition-normal);
}
.container{
 width:90%;
 max-width:1200px;
 margin:0 auto;
 padding:40px 0;
 box-shadow:0 4px 8px rgba(0, 0, 0, 0.1);
 background:var(--background-card);
 border-radius:var(--border-radius);
}
.about-container{
 padding-top:60px;
 padding-bottom:60px;
}
.container-fluid{
 width:100%;
}
.container-card{
 width:90%;
 max-width:1200px;
 margin:0 auto;
 padding:2rem 1rem;
 background:var(--background-card);
 border:1px solid var(--border-color);
 border-radius:var(--radius-lg);
 box-shadow:var(--shadow-sm);
 transition:all var(--transition-normal);
}
h1, h2, h3, h4{
 text-align:center;
 margin-bottom:20px;
 color:var(--text-primary);
}
p{
 text-align:center;
 margin-bottom:20px;
 color:var(--text-secondary);
}
@keyframes fadeIn{
 from{
 opacity:0;
 transform:translateY(20px);
}
 to{
 opacity:1;
 transform:translateY(0);
}
}
.section-accueil{
 background:url('/assets/images/background.jpg') no-repeat center center/cover;
 color:var(--text-inverse);
 height:100vh;
 @include flex-center;
 flex-direction:column;
 text-align:center;
 padding-top:60px;
}
.section-accueil h1{
 font-size:3em;
 margin-bottom:20px;
}
.section-accueil p{
 font-size:1.2em;
 max-width:600px;
}
.section-projets{
 padding:50px 0;
 background:var(--background-secondary);
 animation:fadeIn 2s;
}
.projets-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
 gap:20px;
}
.projet{
 background-color:var(--background-card);
 border:1px solid var(--border-color);
 padding:20px;
 border-radius:var(--radius-md);
 text-align:center;
 transition:all var(--transition-normal);
}
.projet:hover{
 transform:translateY(-10px);
 box-shadow:var(--shadow-lg);
}
.projet img{
 max-width:100%;
 height:auto;
 border-radius:var(--radius-sm);
 margin-bottom:15px;
}
.projet h3{
 margin-bottom:10px;
 color:var(--text-primary);
}
.projet p{
 color:var(--text-secondary);
 margin-bottom:15px;
}
.btn{
 display:inline-block;
 padding:10px 20px;
 background-color:var(--primary-color);
 color:var(--text-inverse);
 text-decoration:none;
 border-radius:var(--radius-md);
 transition:all var(--transition-normal);
 border:none;
 cursor:pointer;
}
.btn:hover{
 background-color:var(--primary-light);
 transform:translateY(-1px);
 box-shadow:var(--shadow-md);
}
.section-tutoriels{
 padding:50px 0;
 background:var(--background-secondary);
 animation:fadeIn 2s;
}
.tutoriels-list{
 display:flex;
 flex-direction:column;
 gap:20px;
}
.tutoriel{
 background-color:var(--background-card);
 border:1px solid var(--border-color);
 padding:20px;
 border-left:5px solid var(--primary-color);
 border-radius:var(--radius-md);
 transition:all var(--transition-normal);
}
.tutoriel:hover{
 background-color:var(--background-tertiary);
 border-left-color:var(--primary-light);
 transform:translateX(5px);
}
.tutoriel h3{
 margin-bottom:10px;
 color:var(--text-primary);
}
.tutoriel p{
 color:var(--text-secondary);
 margin-bottom:15px;
}
.section-contact{
 padding:50px 0;
 background:var(--background-secondary);
 animation:fadeIn 2s;
}
.section-contact form{
 display:flex;
 flex-direction:column;
 gap:15px;
 max-width:600px;
 margin:0 auto;
}
.form-group{
 display:flex;
 flex-direction:column;
}
.form-group label{
 margin-bottom:5px;
 font-weight:bold;
 color:var(--text-primary);
}
.form-group input,
.form-group textarea{
 padding:10px;
 border:1px solid var(--border-color);
 border-radius:var(--radius-sm);
 background:var(--background-card);
 color:var(--text-primary);
 transition:all var(--transition-normal);
}
.form-group input:focus,
.form-group textarea:focus{
 border-color:var(--primary-color);
 outline:none;
 box-shadow:0 0 0 3px rgba(52, 152, 219, 0.1);
}
.section-contact .btn{
 align-self:center;
 background-color:var(--primary-color);
}
.section-contact .btn:hover{
 background-color:var(--primary-light);
}
.profil-section{
 @include flex-center;
 padding:50px 0;
 background:var(--background-secondary);
}
.profil-image img{
 width:200px;
 border-radius:50%;
 margin-right:30px;
 box-shadow:var(--shadow-md);
 transition:all var(--transition-normal);
}
.profil-image img:hover{
 transform:rotate(5deg) scale(1.1);
 box-shadow:var(--shadow-lg);
}
.competences-section{
 padding:50px 0;
 background:var(--background-secondary);
 animation:fadeIn 2s;
}
.competence-item h4,
.competence-item p{
 font-size:18px;
 margin:5px 0;
 color:var(--text-secondary);
 transition:color var(--transition-normal);
}
.competence-item:hover{
 color:var(--primary-color);
}
.reseaux-section{
 padding:50px 0;
 text-align:center;
 background:var(--background-secondary);
}
.reseaux-section img{
 max-width:40px;
 transition:all var(--transition-normal);
 box-shadow:var(--shadow-sm);
 border-radius:var(--radius-sm);
}
.reseaux-section img:hover{
 opacity:0.7;
 transform:rotate(15deg) scale(1.1);
 box-shadow:var(--shadow-md);
}
footer{
 background:var(--background-secondary);
 border-top:1px solid var(--border-color);
 color:var(--text-primary);
 padding:20px 0;
 box-shadow:var(--shadow-sm);
 text-align:center;
}
.container.footer-container{
 @include flex-center;
 flex-wrap:wrap;
 justify-content:space-between;
}
.footer-section{
 width:100%;
 padding:15px;
 box-sizing:border-box;
}
.footer-section ul{
 list-style:none;
 padding:0;
 text-align:center;
}
.footer-section a{
 text-decoration:none;
 color:var(--text-secondary);
 transition:color var(--transition-normal);
}
.footer-section a:hover{
 color:var(--primary-color);
}
.icon{
 background-color:var(--primary-color);
 color:var(--text-inverse);
 border-radius:50%;
 width:60px;
 height:60px;
 margin-right:15px;
 display:flex;
 align-items:center;
 justify-content:center;
 transition:all var(--transition-normal);
}
.icon:hover{
 transform:rotate(360deg);
 background-color:var(--primary-light);
}
@media (max-width:768px){
 .profil-section{
 flex-direction:column;
}
 .profil-image img{
 margin-right:0;
 margin-bottom:20px;
}
 .competences-section .competence-item{
 text-align:center;
}
 .reseaux-section img{
 margin:0 10px;
}
 footer .footer-section{
 width:100%;
}
}
.menu-toggle{
 display:none;
 font-size:30px;
 color:var(--text-primary);
 cursor:pointer;
}
.menu{
 display:flex;
 list-style:none;
 margin:none;
 padding:none;
}
@media (max-width:768px){
 .menu{
 display:none;
 flex-direction:column;
 position:absolute;
 top:60px;
 left:0;
 width:100%;
 background-color:var(--background-card);
 border:1px solid var(--border-color);
 box-shadow:var(--shadow-md);
}
 .menu.active{
 display:flex;
}
 .menu-toggle{
 display:block;
}
}
.navbar-menu{
 display:flex !important;
 list-style:none !important;
 margin:0 !important;
 padding:0 !important;
 gap:0 !important;
 align-items:center !important;
 flex-wrap:nowrap !important;
}
.navbar-menu li{
 margin:0 !important;
 padding:0 !important;
 flex-shrink:0;
}
.navbar-menu a{
 display:block !important;
 text-decoration:none !important;
 color:var(--text-primary) !important;
 font-weight:500 !important;
 padding:8px 10px !important;
 margin:0 1px !important;
 border-radius:var(--border-radius-md) !important;
 transition:all var(--transition-fast) !important;
 position:relative !important;
 white-space:nowrap !important;
 font-size:0.875rem !important;
 line-height:1.2 !important;
 min-width:fit-content !important;
}
.navbar-menu a i{
 font-size:0.8em !important;
 margin-right:4px !important;
}
.navbar-menu a:hover,
.navbar-menu a.active{
 color:var(--primary-color) !important;
 background-color:rgba(52, 152, 219, 0.1) !important;
 overflow:hidden !important;
}
.navbar-menu a::after{
 content:'' !important;
 position:absolute !important;
 bottom:-2px !important;
 left:50% !important;
 width:0 !important;
 height:2px !important;
 background-color:var(--primary-color) !important;
 transform:translateX(-50%) !important;
 transition:width var(--transition-base) !important;
}
.navbar-menu a:hover::after,
.navbar-menu a.active::after{
 width:80% !important;
}
@media (max-width:1400px){
 .navbar-menu a{
 padding:6px 8px !important;
 font-size:0.85rem !important;
}
}
@media (max-width:1200px){
 .navbar-menu a{
 padding:6px 6px !important;
 font-size:0.8rem !important;
}
}
@media (max-width:1000px){
 .navbar-menu a{
 padding:4px 5px !important;
 font-size:0.75rem !important;
}
 
 .navbar-menu a i{
 display:none !important;
}
}
@media (max-width:900px){
 .navbar-menu{
 display:none !important;
}
 
 .menu-toggle{
 display:flex !important;
}
}
@media (max-width:768px){
 .navbar-menu{
 position:fixed !important;
 top:70px !important;
 left:0 !important;
 right:0 !important;
 background:var(--background-primary) !important;
 flex-direction:column !important;
 padding:var(--spacing-lg) !important;
 box-shadow:var(--shadow-lg) !important;
 border-top:1px solid var(--border-color) !important;
 transform:translateY(-100%) !important;
 opacity:0 !important;
 visibility:hidden !important;
 transition:all var(--transition-base) !important;
 z-index:var(--z-dropdown) !important;
}
 
 .navbar-menu.active{
 display:flex !important;
 transform:translateY(0) !important;
 opacity:1 !important;
 visibility:visible !important;
}
 
 .navbar-menu a{
 padding:var(--spacing-md) !important;
 text-align:center !important;
 border-bottom:1px solid var(--border-color) !important;
 font-size:var(--font-size-base) !important;
 width:100% !important;
}
 
 .navbar-menu a:last-child{
 border-bottom:none !important;
}
 
 .navbar-menu a i{
 display:inline !important;
 margin-right:8px !important;
}
}
html, body{
 overflow-x:hidden !important;
}
.navbar{
 position:fixed !important;
 top:0 !important;
 left:0 !important;
 right:0 !important;
 z-index:1000 !important;
}
.tutorial-container{
 overflow-x:hidden !important;
}
.tutorial-content{
 overflow-x:hidden !important;
 word-wrap:break-word !important;
}
.tutorial-content pre{
 overflow-x:auto !important;
 max-width:100% !important;
}
.tutorial-content pre code{
 overflow-x:auto !important;
}
@media (max-width:768px){
 .tutorial-container{
 grid-template-columns:1fr !important;
 gap:1rem !important;
}
 
 .tutorial-sidebar{
 order:-1 !important;
}
}
.parcours-section{
 background-color:var(--background-secondary);
 padding:var(--spacing-3xl) 0;
}
.parcours-section h1{
 font-size:var(--font-size-3xl);
 margin-bottom:var(--spacing-2xl);
 color:var(--text-primary);
 text-align:center;
 font-weight:700;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:var(--spacing-md);
}
.parcours-section h1 i{
 color:var(--primary-color);
}
.parcours-timeline{
 max-width:960px;
 margin:0 auto;
 position:relative;
}
.parcours-timeline::before{
 content:'';
 position:absolute;
 left:30px;
 top:0;
 bottom:0;
 width:2px;
 background:var(--secondary-color);
 z-index:1;
}
.education-item{
 position:relative;
 margin-bottom:var(--spacing-2xl);
 padding-left:var(--spacing-3xl);
}
.education-item::before{
 content:'';
 position:absolute;
 left:21px;
 top:var(--spacing-lg);
 width:18px;
 height:18px;
 border-radius:var(--border-radius-full);
 border:3px solid var(--background-primary);
 z-index:2;
}
.education-item:nth-child(1)::before{background:#e74c3c;}
.education-item:nth-child(2)::before{background:#f39c12;}
.education-item:nth-child(3)::before{background:var(--primary-color);}
.education-item:nth-child(4)::before{background:#27ae60;}
.education-item:nth-child(5)::before{background:#9b59b6;}
.education-card{
 background:var(--background-primary);
 border-radius:var(--border-radius-lg);
 padding:var(--spacing-xl);
 box-shadow:var(--shadow-md);
 transition:all var(--transition-base);
 border:1px solid var(--border-color);
 position:relative;
}
.education-card:hover{
 transform:translateX(var(--spacing-sm));
 box-shadow:var(--shadow-lg);
}
.education-item:nth-child(1) .education-card{border-left:4px solid #e74c3c;}
.education-item:nth-child(2) .education-card{border-left:4px solid #f39c12;}
.education-item:nth-child(3) .education-card{border-left:4px solid var(--primary-color);}
.education-item:nth-child(4) .education-card{border-left:4px solid #27ae60;}
.education-item:nth-child(5) .education-card{border-left:4px solid #9b59b6;}
.education-period{
 display:inline-block;
 background:var(--secondary-color);
 color:white;
 padding:var(--spacing-xs) var(--spacing-md);
 border-radius:var(--border-radius-full);
 font-size:var(--font-size-sm);
 font-weight:600;
 margin-bottom:var(--spacing-md);
}
.education-card h2{
 font-size:var(--font-size-xl);
 margin-bottom:var(--spacing-sm);
 color:var(--text-primary);
 font-weight:600;
 line-height:1.3;
}
.education-card h3{
 font-size:var(--font-size-lg);
 margin-bottom:var(--spacing-md);
 color:var(--primary-color);
 font-weight:600;
}
.education-card p{
 margin-bottom:var(--spacing-md);
 color:var(--text-secondary);
 line-height:1.6;
}
.education-skills{
 display:flex;
 flex-wrap:wrap;
 gap:var(--spacing-sm);
 margin-top:var(--spacing-md);
}
.skill-tag{
 display:inline-block;
 background:linear-gradient(135deg, var(--primary-color), var(--primary-light));
 color:white;
 padding:var(--spacing-xs) var(--spacing-sm);
 border-radius:var(--border-radius-full);
 font-size:var(--font-size-xs);
 font-weight:500;
 text-align:center;
 box-shadow:var(--shadow-sm);
 transition:all var(--transition-fast);
}
.skill-tag:hover{
 transform:translateY(-2px);
 box-shadow:var(--shadow-md);
}
@media (max-width:768px){
 .parcours-section h1{
 flex-direction:column;
 gap:var(--spacing-sm);
}
 
 .parcours-timeline::before{
 left:15px;
}
 
 .education-item{
 padding-left:var(--spacing-2xl);
}
 
 .education-item::before{
 left:6px;
 width:16px;
 height:16px;
}
 
 .education-card{
 padding:var(--spacing-lg);
}
 
 .education-card:hover{
 transform:translateY(-4px);
}
}
.competences-section{
 padding:var(--spacing-3xl) 0;
 background:var(--background-secondary);
}
.competences-section h1{
 text-align:center;
 margin-bottom:var(--spacing-2xl);
 color:var(--text-primary);
 font-size:var(--font-size-3xl);
 font-weight:700;
}
.competences-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
 gap:var(--spacing-lg);
 max-width:1000px;
 margin:0 auto;
}
.competence-item{
 display:flex;
 align-items:center;
 background:var(--background-primary);
 border-radius:var(--border-radius-lg);
 padding:var(--spacing-lg);
 box-shadow:var(--shadow-md);
 transition:all var(--transition-base);
 border:1px solid var(--border-color);
}
.competence-item:hover{
 transform:translateY(-4px);
 box-shadow:var(--shadow-lg);
}
.competence-icon{
 background-color:var(--secondary-color);
 color:white;
 border-radius:var(--border-radius-full);
 padding:var(--spacing-md);
 width:60px;
 height:60px;
 margin-right:var(--spacing-md);
 display:flex;
 align-items:center;
 justify-content:center;
 flex-shrink:0;
}
.competence-icon i{
 font-size:1.5rem;
}
.competence-content h2{
 margin:0 0 var(--spacing-xs) 0;
 color:var(--text-primary);
 font-size:var(--font-size-lg);
 font-weight:600;
}
.competence-content p{
 margin:0;
 color:var(--text-secondary);
 line-height:1.5;
}
@media (max-width:768px){
 .competence-item{
 flex-direction:column;
 text-align:center;
}
 
 .competence-icon{
 margin-right:0;
 margin-bottom:var(--spacing-md);
}
}
.experiences-section{
 background-color:var(--background-secondary);
 padding:var(--spacing-3xl) 0;
}
.experiences-section h1{
 font-size:var(--font-size-3xl);
 margin-bottom:var(--spacing-2xl);
 color:var(--text-primary);
 text-align:center;
 font-weight:700;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:var(--spacing-md);
}
.experiences-section h1 i{
 color:var(--primary-color);
}
.experiences-timeline{
 max-width:960px;
 margin:0 auto;
 position:relative;
}
.experiences-timeline::before{
 content:'';
 position:absolute;
 left:30px;
 top:0;
 bottom:0;
 width:2px;
 background:var(--primary-color);
 z-index:1;
}
.experience-item{
 position:relative;
 margin-bottom:var(--spacing-2xl);
 padding-left:var(--spacing-3xl);
}
.experience-item::before{
 content:'';
 position:absolute;
 left:21px;
 top:var(--spacing-lg);
 width:18px;
 height:18px;
 background:var(--primary-color);
 border-radius:var(--border-radius-full);
 border:3px solid var(--background-primary);
 z-index:2;
}
.experience-card{
 background:var(--background-primary);
 border-radius:var(--border-radius-lg);
 padding:var(--spacing-xl);
 box-shadow:var(--shadow-md);
 transition:all var(--transition-base);
 border:1px solid var(--border-color);
 position:relative;
}
.experience-card:hover{
 transform:translateX(var(--spacing-sm));
 box-shadow:var(--shadow-lg);
}
.experience-period{
 display:inline-block;
 background:var(--primary-color);
 color:white;
 padding:var(--spacing-xs) var(--spacing-md);
 border-radius:var(--border-radius-full);
 font-size:var(--font-size-sm);
 font-weight:600;
 margin-bottom:var(--spacing-md);
}
.experience-card h2{
 font-size:var(--font-size-xl);
 margin-bottom:var(--spacing-sm);
 color:var(--text-primary);
 font-weight:600;
 line-height:1.3;
}
.experience-card h3{
 font-size:var(--font-size-lg);
 margin-bottom:var(--spacing-sm);
 color:var(--primary-color);
 font-weight:600;
}
.experience-type{
 color:var(--text-secondary);
 font-style:italic;
 margin-bottom:var(--spacing-md);
 font-weight:500;
}
.experience-card p{
 margin-bottom:var(--spacing-sm);
 color:var(--text-secondary);
 line-height:1.6;
}
.experience-card p:last-child{
 margin-bottom:0;
}
.experience-card strong{
 color:var(--text-primary);
}
@media (max-width:768px){
 .experiences-section h1{
 flex-direction:column;
 gap:var(--spacing-sm);
}
 
 .experiences-timeline::before{
 left:15px;
}
 
 .experience-item{
 padding-left:var(--spacing-2xl);
}
 
 .experience-item::before{
 left:6px;
 width:16px;
 height:16px;
}
 
 .experience-card{
 padding:var(--spacing-lg);
}
 
 .experience-card:hover{
 transform:translateY(-4px);
}
}
.projects-hero{
 background:linear-gradient(135deg, #3a3a3a 0%, #1e1e1e 100%);
 color:white;
 padding:120px 0 60px;
 text-align:center;
}
.projects-hero h1{
 font-size:clamp(2.5rem, 5vw, 4rem);
 font-weight:700;
 margin-bottom:1rem;
 color:white;
}
.projects-hero p{
 font-size:1.25rem;
 max-width:600px;
 margin:0 auto;
 opacity:0.9;
 color:white;
}
.projects-section{
 padding:3rem 1rem;
 background-color:#f8f9fa;
}
.projects-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));
 gap:2rem;
 max-width:1200px;
 margin:0 auto;
}
.project-card{
 background:white;
 border-radius:16px;
 overflow:hidden;
 box-shadow:0 4px 20px rgba(0,0,0,0.08);
 transition:all 0.3s cubic-bezier(.4,0,.2,1);
 display:flex;
 flex-direction:column;
 border:1px solid #e2e8f0;
}
.project-card:hover{
 transform:translateY(-8px);
 box-shadow:0 12px 24px rgba(0,0,0,0.1);
}
.project-image{
 height:220px;
 overflow:hidden;
 background-color:#e9ecef;
}
.project-image img{
 width:100%;
 height:100%;
 object-fit:cover;
 transition:transform 0.3s ease;
}
.project-card:hover .project-image img{
 transform:scale(1.05);
}
.project-content{
 padding:24px;
 display:flex;
 flex-direction:column;
 flex-grow:1;
}
.project-title{
 font-size:1.3rem;
 font-weight:700;
 margin-bottom:8px;
}
.project-description{
 color:#64748b;
 font-size:0.95rem;
 line-height:1.5;
 margin-bottom:16px;
 flex-grow:1;
}
.project-tags{
 margin-bottom:24px;
 display:flex;
 flex-wrap:wrap;
 gap:8px;
}
.tag{
 background-color:#eef2ff;
 color:#4338ca;
 padding:4px 10px;
 border-radius:9999px;
 font-size:0.8rem;
 font-weight:500;
}
.project-links{
 margin-top:auto;
 display:flex;
 gap:12px;
 border-top:1px solid #e9ecef;
 padding-top:16px;
}
.project-link{
 display:inline-flex;
 align-items:center;
 gap:8px;
 text-decoration:none;
 padding:8px 16px;
 border-radius:8px;
 font-weight:600;
 transition:all 0.2s ease;
 flex:1;
 justify-content:center;
}
.project-link.github{
 background-color:#333;
 color:white;
}
.project-link.github:hover{
 background-color:#111;
}
.project-link.live{
 background-color:#3498db;
 color:white;
}
.project-link.live:hover{
 background-color:#2980b9;
}
.project-link.disabled{
 background-color:#bdc3c7;
 color:#7f8c8d;
 cursor:not-allowed;
 opacity:0.8;
}
:root{
 --spacing-xs:0.25rem;
 --spacing-sm:0.5rem;
 --spacing-md:1rem;
 --spacing-lg:1.5rem;
 --spacing-xl:2rem;
 --primary-color:#2563eb;
 --primary-light:#3b82f6;
 --text-primary:#1f2937;
 --text-secondary:#4b5563;
 --text-muted:#6b7280;
 --background-secondary:#f9fafb;
 --border-color:#d1d5db;
 --border-radius-full:50px;
 --transition-base:0.3s ease;
 --shadow-sm:0 2px 4px rgba(0,0,0,0.1);
}
[data-theme="dark"]{
 --text-primary:#f1f5f9;
 --text-secondary:#cbd5e1;
 --text-muted:#94a3b8;
 --background-secondary:#1e293b;
 --border-color:#475569;
}
.tutorials-hero,
.tutorials-section,
.tutorial-card,
.tutorial-content,
.tutorial-title,
.tutorial-description,
.tutorial-meta,
.tutorial-difficulty,
.tutorial-icon{
 box-sizing:border-box;
}
.tutorials-hero{
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%, #f093fb 100%);
 color:white;
 padding:120px 0 80px;
 text-align:center;
 position:relative;
 overflow:hidden;
 margin-top:0;
 box-shadow:0 10px 30px rgba(0,0,0,0.1);
}
.tutorials-hero::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="rgba(255,255,255,0.08)" points="0,1000 1000,0 1000,1000"/></svg>');
 background-size:cover;
}
.tutorials-hero::after{
 content:'';
 position:absolute;
 top:-50%;
 left:-50%;
 width:200%;
 height:200%;
 background:radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
 background-size:50px 50px;
 animation:float 20s ease-in-out infinite;
 opacity:0.3;
}
@keyframes float{
 0%, 100%{transform:translateY(0px) rotate(0deg);}
 50%{transform:translateY(-10px) rotate(2deg);}
}
.tutorials-hero .container{
 position:relative;
 z-index:1;
}
.tutorials-hero h1{
 font-size:clamp(2.5rem, 5vw, 4rem);
 font-weight:700;
 margin-bottom:1.5rem;
 text-shadow:2px 2px 4px rgba(0, 0, 0, 0.3);
 color:white;
}
.tutorials-hero p{
 font-size:1.25rem;
 margin-bottom:2rem;
 opacity:0.9;
 max-width:600px;
 margin-left:auto;
 margin-right:auto;
 color:white;
}
.tutorials-stats{
 display:flex;
 justify-content:center;
 gap:2rem;
 margin-top:2rem;
}
.stat-item{
 text-align:center;
}
.stat-number{
 display:block;
 font-size:2.5rem;
 font-weight:700;
 color:#ffffff;
}
.stat-label{
 font-size:0.9rem;
 opacity:0.8;
 text-transform:uppercase;
 letter-spacing:1px;
}
.tutorials-section{
 padding:4rem 0;
 background:linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
 position:relative;
}
.tutorials-section::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" opacity="0.03"><circle cx="200" cy="200" r="3" fill="%23667eea"/><circle cx="600" cy="400" r="2" fill="%23764ba2"/><circle cx="800" cy="100" r="2" fill="%238b5cf6"/><circle cx="300" cy="600" r="3" fill="%23667eea"/><circle cx="900" cy="700" r="2" fill="%23764ba2"/></svg>');
 background-size:300px 300px;
 animation:float 30s ease-in-out infinite;
}
@keyframes float{
 0%, 100%{transform:translateY(0px);}
 50%{transform:translateY(-10px);}
}
.container{
 max-width:1200px;
 margin:0 auto;
 padding:0 1rem;
}
.tutorials-filters{
 margin-bottom:var(--spacing-xl);
 display:flex;
 flex-wrap:wrap;
 gap:var(--spacing-lg);
 align-items:center;
}
.search-box{
 position:relative;
 flex-grow:1;
 min-width:250px;
}
.sr-only{
 position:absolute;
 width:1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0, 0, 0, 0);
 white-space:nowrap;
 border-width:0;
}
.search-input{
 width:100%;
 padding:1.25rem 1.25rem 1.25rem 55px;
 border:2px solid var(--border-color);
 border-radius:25px;
 font-size:1rem;
 transition:all 0.4s ease;
 background:rgba(255,255,255,0.95);
 color:var(--text-primary);
 backdrop-filter:blur(10px);
 box-shadow:0 4px 15px rgba(0,0,0,0.08);
}
.search-input::placeholder{
 color:var(--text-muted);
 font-weight:500;
}
.search-input:focus{
 outline:none;
 border-color:var(--primary-color);
 box-shadow:0 0 0 4px rgba(37, 99, 235, 0.15), 0 8px 25px rgba(0,0,0,0.1);
 transform:translateY(-2px);
 background:white;
}
.search-icon{
 position:absolute;
 top:50%;
 left:15px;
 transform:translateY(-50%);
 color:var(--text-secondary);
 font-size:1.1rem;
}
.filter-tags{
 display:flex;
 flex-wrap:wrap;
 gap:var(--spacing-sm);
}
.filter-tag{
 background-color:rgba(255,255,255,0.95);
 color:var(--text-secondary);
 padding:12px 20px;
 border-radius:30px;
 cursor:pointer;
 transition:all 0.4s cubic-bezier(.4,0,.2,1);
 font-weight:700;
 border:2px solid var(--border-color);
 appearance:none;
 font-size:0.9rem;
 backdrop-filter:blur(10px);
 box-shadow:0 4px 15px rgba(0,0,0,0.05);
 text-transform:capitalize;
 letter-spacing:0.5px;
}
.filter-tag:hover{
 background-color:var(--primary-color);
 color:white;
 border-color:var(--primary-color);
 transform:translateY(-3px);
 box-shadow:0 8px 25px rgba(37, 99, 235, 0.3);
}
.filter-tag.active,
.filter-tag[aria-pressed="true"]{
 background:linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
 color:white;
 border-color:var(--primary-color);
 box-shadow:0 6px 20px rgba(37, 99, 235, 0.25);
 transform:translateY(-2px);
}
.tutorials-section .tutorials-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));
 gap:2.5rem;
 margin-top:3rem;
 position:relative;
 z-index:1;
}
.tutorials-section .tutorial-card{
 background:linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, #8b5cf6 100%);
 border-radius:20px;
 overflow:hidden;
 box-shadow:0 8px 32px rgba(0,0,0,0.12);
 transition:all 0.4s cubic-bezier(.4,0,.2,1);
 text-decoration:none;
 color:white;
 min-height:480px;
 display:flex;
 flex-direction:column;
 border:1px solid rgba(255,255,255,0.1);
 position:relative;
 backdrop-filter:blur(10px);
}
.tutorials-section .tutorial-card:hover{
 transform:translateY(-15px) scale(1.03);
 box-shadow:0 25px 50px rgba(0,0,0,0.15);
 border-color:rgba(255,255,255,0.3);
}
.tutorials-section .tutorial-card::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
 opacity:0;
 transition:opacity 0.3s ease;
}
.tutorials-section .tutorial-card:hover::before{
 opacity:1;
}
.tutorials-section .tutorial-image{
 height:220px;
 overflow:hidden;
 position:relative;
 display:flex;
 align-items:center;
 justify-content:center;
 background:linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,250,0.9) 100%);
 backdrop-filter:blur(10px);
}
.tutorials-section .tutorial-card .tutorial-image img,
.tutorials-section .tutorial-card .tutorial-image .tutorial-img{
 width:100%;
 height:100%;
 object-fit:cover;
 transition:transform 0.3s ease;
 display:block;
}
.tutorials-section .tutorial-badge{
 position:absolute;
 top:12px;
 right:12px;
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color:white;
 padding:6px 12px;
 border-radius:20px;
 font-size:.7rem;
 font-weight:600;
}
.tutorials-section .tutorial-content{
 padding:20px;
 flex:1;
 display:flex;
 flex-direction:column;
}
.tutorials-section .tutorial-header{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-bottom:12px;
}
.tutorials-section .tutorial-category{
 display:flex;
 align-items:center;
 gap:8px;
 font-size:0.85rem;
 font-weight:700;
 color:white;
 text-transform:capitalize;
 background:rgba(255, 255, 255, 0.25);
 padding:6px 12px;
 border-radius:20px;
 border:1px solid rgba(255, 255, 255, 0.2);
 backdrop-filter:blur(10px);
 text-shadow:0 1px 2px rgba(0,0,0,0.1);
}
.tutorials-section .tutorial-category i{
 font-size:1rem;
}
.tutorials-section .tutorial-footer{
 margin-top:auto;
 padding-top:16px;
 border-top:1px solid rgba(255, 255, 255, 0.2);
}
.tutorials-section .tutorial-link{
 display:inline-flex;
 align-items:center;
 gap:10px;
 color:white;
 text-decoration:none;
 font-weight:700;
 font-size:0.95rem;
 transition:all 0.4s cubic-bezier(.4,0,.2,1);
 padding:12px 20px;
 background:rgba(255, 255, 255, 0.25);
 border-radius:25px;
 border:1px solid rgba(255, 255, 255, 0.3);
 backdrop-filter:blur(15px);
 position:relative;
 overflow:hidden;
 text-shadow:0 1px 2px rgba(0,0,0,0.1);
}
.tutorials-section .tutorial-link:hover{
 color:var(--primary-color);
 background:rgba(255,255,255,0.95);
 border-color:rgba(255,255,255,0.8);
 transform:translateX(6px) translateY(-2px);
 box-shadow:0 8px 20px rgba(0,0,0,0.15);
}
.tutorials-section .tutorial-link::before{
 content:'';
 position:absolute;
 top:0;
 left:-100%;
 width:100%;
 height:100%;
 background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
 transition:left 0.5s ease;
}
.tutorials-section .tutorial-link:hover::before{
 left:100%;
}
.tutorials-section .tutorial-link i{
 transition:transform 0.3s ease;
}
.tutorials-section .tutorial-link:hover i{
 transform:translateX(4px);
}
.tutorials-section .tutorial-title{
 font-size:1.25rem;
 font-weight:700;
 color:white;
 margin-bottom:12px;
 line-height:1.4;
 height:calc(1.4em * 2);
 display:-webkit-box;
 -webkit-line-clamp:2;
 -webkit-box-orient:vertical;
 overflow:hidden;
 text-overflow:ellipsis;
}
.tutorials-section .tutorial-description{
 color:rgba(255, 255, 255, 0.9);
 font-size:1rem;
 line-height:1.6;
 margin-bottom:16px;
 flex-grow:1;
 display:-webkit-box;
 -webkit-line-clamp:3;
 -webkit-box-orient:vertical;
 overflow:hidden;
}
.tutorials-section .tutorial-meta{
 display:flex;
 align-items:center;
 justify-content:space-between;
 font-size:.85rem;
 padding-top:1rem;
 margin-top:auto;
 border-top:1px solid #e9ecef;
}
.tutorials-section .tutorial-difficulty{
 display:flex;
 align-items:center;
 gap:8px;
 font-weight:600;
}
.difficulty-dot{
 width:12px;
 height:12px;
 border-radius:50%;
 background:rgba(255,255,255,0.3);
 transition:all .3s ease;
 border:1px solid rgba(255,255,255,0.4);
}
.difficulty-dot.active{
 background:white;
 transform:scale(1.3);
 box-shadow:0 0 8px rgba(255, 255, 255, 0.7), 0 0 15px rgba(255, 255, 255, 0.4);
 border-color:rgba(255,255,255,0.8);
}
.tutorials-section .tutorial-icon{
 font-size:18px;
 color:#3b82f6;
 background:linear-gradient(135deg, rgba(59,130,246,.1) 0%, rgba(147,51,234,.1) 100%);
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 width:40px;
 height:40px;
 min-width:40px;
}
.tutorial-card:hover .tutorial-icon{
 transform:rotate(5deg) scale(1.1);
 box-shadow:0 4px 12px rgba(59,130,246,.3);
}
.tutorial-card:hover .tutorial-image img{
 transform:scale(1.05);
}
@media (max-width:1024px){
 .tutorials-section .tutorials-grid{
 grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
 gap:2rem;
}
 
 .tutorials-filters{
 flex-direction:column;
 gap:1.5rem;
 align-items:stretch;
}
 
 .filter-tags{
 justify-content:center;
}
}
@media (max-width:768px){
 .tutorials-hero{
 padding:100px 0 50px;
}
 
 .tutorials-hero h1{
 font-size:clamp(2rem, 6vw, 3rem);
}
 
 .tutorials-hero p{
 font-size:1.1rem;
 padding:0 1rem;
}
 .tutorials-stats{
 flex-direction:column;
 gap:1.5rem;
}
 
 .stat-item{
 padding:1rem;
 background:rgba(255,255,255,0.1);
 border-radius:15px;
 backdrop-filter:blur(10px);
}
 .tutorials-section .tutorials-grid{
 grid-template-columns:1fr;
 gap:2rem;
}
 .tutorials-section .tutorial-card{
 min-height:400px;
 margin:0 1rem;
}
 
 .search-input{
 padding:1rem 1rem 1rem 45px;
 font-size:0.95rem;
}
 
 .filter-tags{
 justify-content:flex-start;
 overflow-x:auto;
 padding-bottom:0.5rem;
}
 
 .filter-tag{
 white-space:nowrap;
 flex-shrink:0;
 font-size:0.85rem;
 padding:10px 16px;
}
}
@media (max-width:480px){
 .tutorials-hero{
 padding:80px 0 40px;
}
 
 .tutorials-section{
 padding:2rem 0;
}
 
 .tutorials-section .tutorial-card{
 min-height:380px;
 margin:0 0.5rem;
 border-radius:16px;
}
 
 .tutorials-section .tutorial-content{
 padding:16px;
}
 
 .tutorials-section .tutorial-title{
 font-size:1.1rem;
}
 
 .tutorials-section .tutorial-description{
 font-size:0.9rem;
}
 
 .search-box{
 min-width:200px;
}
 
 .container{
 padding:0 0.75rem;
}
}
/* ==========================================================================
 ACCESSIBILITÉ ET THÈME SOMBRE
 ========================================================================== */
@media (prefers-reduced-motion:reduce){
 *,
 *::before,
 *::after{
 animation-duration:0.01ms !important;
 animation-iteration-count:1 !important;
 transition-duration:0.01ms !important;
}
 
 .tutorials-hero::after,
 .tutorials-section::before{
 animation:none !important;
}
}
[data-theme="dark"] .tutorials-hero{
 background:linear-gradient(135deg, #1e293b 0%, #334155 50%, #0f172a 100%);
 box-shadow:0 10px 30px rgba(0,0,0,0.3);
}
[data-theme="dark"] .tutorials-section{
 background:linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}
[data-theme="dark"] .search-input{
 background:rgba(30, 41, 59, 0.9);
 border-color:#475569;
 color:#e2e8f0;
}
[data-theme="dark"] .search-input::placeholder{
 color:#94a3b8;
}
[data-theme="dark"] .search-input:focus{
 background:#1e293b;
 border-color:#3b82f6;
 box-shadow:0 0 0 4px rgba(59, 130, 246, 0.15), 0 8px 25px rgba(0,0,0,0.2);
}
[data-theme="dark"] .filter-tag{
 background:rgba(30, 41, 59, 0.9);
 color:#e2e8f0;
 border-color:#475569;
}
[data-theme="dark"] .filter-tag:hover{
 background:#3b82f6;
 color:white;
 box-shadow:0 8px 25px rgba(59, 130, 246, 0.3);
}
[data-theme="dark"] .tutorials-section .tutorial-card{
 background:linear-gradient(135deg, #1e293b 0%, #334155 50%, #0f172a 100%);
 border-color:rgba(71, 85, 105, 0.3);
}
[data-theme="dark"] .tutorials-section .tutorial-card:hover{
 border-color:rgba(59, 130, 246, 0.5);
 box-shadow:0 25px 50px rgba(0,0,0,0.4);
}
[data-theme="dark"] .no-results{
 color:#94a3b8;
}
[data-theme="dark"] .no-results h3{
 color:#e2e8f0;
}
[data-theme="dark"] .search-loading{
 background:rgba(30, 41, 59, 0.95);
 color:#e2e8f0;
 border-color:#475569;
}
.tutorial-card:focus-visible,
.filter-tag:focus-visible,
.search-input:focus-visible{
 outline:3px solid #3b82f6;
 outline-offset:2px;
 border-radius:8px;
}
@media (prefers-contrast:high){
 .tutorials-section .tutorial-card{
 border:2px solid currentColor;
}
 
 .filter-tag{
 border-width:2px;
}
 
 .search-input{
 border-width:2px;
}
 
 .difficulty-dot{
 border:2px solid currentColor;
}
}/**
 * Styles pour les pages individuelles de tutoriels
 * Système de thèmes intégré avec design moderne et lisibilité optimale
 */
/* ==========================================================================
 BARRE DE PROGRESSION DE LECTURE
 ========================================================================== */
.reading-progress{
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:4px;
 background:rgba(255, 255, 255, 0.1);
 z-index:9999;
 backdrop-filter:blur(10px);
}
.reading-progress .progress-bar{
 height:100%;
 background:linear-gradient(90deg, var(--primary-color), var(--primary-light), #8b5cf6);
 width:0%;
 transition:width 0.3s ease;
 box-shadow:0 0 10px rgba(37, 99, 235, 0.5);
}
/* ==========================================================================
 STYLES GÉNÉRAUX DE LA PAGE TUTORIEL
 ========================================================================== */
.tutorial-page{
 background:var(--background-primary);
 color:var(--text-primary);
 min-height:100vh;
 transition:all var(--transition-normal);
}
.tutorial-header{
 background:linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, #8b5cf6 100%);
 color:var(--text-inverse);
 padding:3rem 0;
 margin-bottom:3rem;
 position:relative;
 overflow:hidden;
 box-shadow:0 10px 40px rgba(0,0,0,0.15);
}
.tutorial-header::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="rgba(255,255,255,0.12)" points="0,1000 1000,0 1000,1000"/></svg>');
 background-size:cover;
}
.tutorial-header::after{
 content:'';
 position:absolute;
 top:-20%;
 right:-20%;
 width:40%;
 height:140%;
 background:radial-gradient(ellipse, rgba(255,255,255,0.08) 0%, transparent 70%);
 animation:pulse 4s ease-in-out infinite alternate;
}
@keyframes pulse{
 0%{opacity:0.5;transform:scale(1);}
 100%{opacity:1;transform:scale(1.05);}
}
.tutorial-header .container{
 position:relative;
 z-index:1;
 max-width:1200px;
 margin:0 auto;
 padding:0 1rem;
}
.tutorial-breadcrumb{
 margin-bottom:1rem;
 font-size:0.9rem;
 opacity:0.9;
}
.tutorial-breadcrumb a{
 color:var(--text-inverse);
 text-decoration:none;
 transition:opacity var(--transition-fast);
}
.tutorial-breadcrumb a:hover{
 opacity:0.8;
 text-decoration:underline;
}
.tutorial-meta-header{
 display:flex;
 align-items:center;
 gap:2rem;
 margin-bottom:1.5rem;
 flex-wrap:wrap;
}
.tutorial-category-badge{
 display:inline-flex;
 align-items:center;
 gap:0.75rem;
 background:rgba(255, 255, 255, 0.25);
 padding:0.75rem 1.5rem;
 border-radius:var(--radius-full);
 font-size:0.9rem;
 font-weight:700;
 backdrop-filter:blur(15px);
 border:1px solid rgba(255, 255, 255, 0.4);
 text-shadow:0 1px 2px rgba(0,0,0,0.1);
 box-shadow:0 4px 15px rgba(0,0,0,0.1);
 transition:all 0.3s ease;
}
.tutorial-category-badge:hover{
 transform:translateY(-2px);
 box-shadow:0 6px 20px rgba(0,0,0,0.15);
 background:rgba(255, 255, 255, 0.3);
}
.tutorial-difficulty{
 display:flex;
 align-items:center;
 gap:0.5rem;
 font-size:0.875rem;
 font-weight:500;
}
.difficulty-dot{
 width:10px;
 height:10px;
 border-radius:50%;
 background:rgba(255, 255, 255, 0.3);
 transition:all var(--transition-fast);
}
.difficulty-dot.active{
 background:var(--text-inverse);
 box-shadow:0 0 8px rgba(255, 255, 255, 0.5);
 transform:scale(1.2);
}
.tutorial-header h1{
 font-size:clamp(1.75rem, 4vw, 3rem);
 font-weight:700;
 margin-bottom:1rem;
 line-height:1.2;
 text-shadow:0 2px 4px rgba(0, 0, 0, 0.2);
}
.tutorial-header p{
 font-size:1.125rem;
 opacity:0.9;
 line-height:1.6;
 max-width:800px;
}
/* ==========================================================================
 CONTENU PRINCIPAL
 ========================================================================== */
.tutorial-main{
 padding:0 0 4rem;
}
.tutorial-container{
 max-width:1200px;
 margin:0 auto;
 padding:0 1rem;
 display:grid;
 grid-template-columns:1fr 300px;
 gap:3rem;
 align-items:start;
}
.back-to-tutorials{
 display:inline-flex;
 align-items:center;
 gap:0.5rem;
 color:var(--text-link);
 text-decoration:none;
 font-weight:500;
 margin-bottom:2rem;
 padding:0.5rem 1rem;
 border-radius:var(--radius-md);
 background:var(--background-secondary);
 border:1px solid var(--border-color);
 transition:all var(--transition-normal);
}
.back-to-tutorials:hover{
 background:var(--primary-color);
 color:var(--text-inverse);
 border-color:var(--primary-color);
 transform:translateX(-2px);
}
.tutorial-content{
 background:var(--background-card);
 border:1px solid var(--border-color);
 border-radius:24px;
 padding:3rem;
 box-shadow:0 8px 32px rgba(0,0,0,0.08);
 transition:all var(--transition-normal);
 backdrop-filter:blur(10px);
 position:relative;
}
.tutorial-content::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:4px;
 background:linear-gradient(90deg, var(--primary-color), var(--primary-light), #8b5cf6);
 border-radius:24px 24px 0 0;
}
.tutorial-content h2{
 color:var(--text-primary);
 font-size:1.75rem;
 font-weight:700;
 margin:2.5rem 0 1.5rem 0;
 padding-bottom:0.75rem;
 border-bottom:3px solid var(--primary-color);
 position:relative;
}
.tutorial-content h2:first-child{
 margin-top:0;
}
.tutorial-content h2::before{
 content:'';
 position:absolute;
 bottom:-3px;
 left:0;
 width:80px;
 height:4px;
 background:linear-gradient(90deg, var(--primary-color), var(--primary-light));
 border-radius:var(--radius-sm);
 box-shadow:0 2px 8px rgba(37, 99, 235, 0.3);
}
.tutorial-content h3{
 color:var(--text-primary);
 font-size:1.375rem;
 font-weight:600;
 margin:2rem 0 1rem 0;
 position:relative;
 padding-left:1rem;
}
.tutorial-content h3::before{
 content:'';
 position:absolute;
 left:0;
 top:0.5rem;
 width:4px;
 height:1.5rem;
 background:var(--primary-color);
 border-radius:var(--radius-sm);
}
.tutorial-content h4{
 color:var(--text-primary);
 font-size:1.125rem;
 font-weight:600;
 margin:1.5rem 0 0.75rem 0;
}
.tutorial-content p{
 color:var(--text-secondary);
 line-height:1.7;
 margin-bottom:1.5rem;
 font-size:1rem;
}
.tutorial-content ul,
.tutorial-content ol{
 margin:1.5rem 0;
 padding-left:2rem;
 color:var(--text-secondary);
}
.tutorial-content li{
 margin-bottom:0.75rem;
 line-height:1.6;
}
.tutorial-content li strong{
 color:var(--text-primary);
 font-weight:600;
}
.tutorial-content pre{
 background:var(--background-tertiary);
 border:1px solid var(--border-color);
 border-radius:var(--radius-md);
 padding:1.5rem;
 margin:1.5rem 0;
 overflow-x:auto;
 position:relative;
 box-shadow:var(--shadow-sm);
}
.tutorial-content pre::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:3px;
 background:var(--gradient-primary);
 border-radius:var(--radius-md) var(--radius-md) 0 0;
}
.tutorial-content code{
 font-family:'Fira Code', 'Monaco', 'Consolas', monospace;
 font-size:0.875rem;
 line-height:1.5;
 color:var(--text-primary);
}
.tutorial-content p code{
 background:var(--background-tertiary);
 padding:0.25rem 0.5rem;
 border-radius:var(--radius-sm);
 border:1px solid var(--border-color);
 font-size:0.875rem;
 color:var(--primary-color);
 font-weight:500;
}
.alert{
 padding:2rem;
 border-radius:16px;
 margin:2.5rem 0;
 border-left:5px solid;
 position:relative;
 backdrop-filter:blur(15px);
 box-shadow:0 4px 20px rgba(0,0,0,0.08);
 transition:all 0.3s ease;
}
.alert:hover{
 transform:translateY(-2px);
 box-shadow:0 8px 30px rgba(0,0,0,0.12);
}
.alert-info{
 background:rgba(52, 152, 219, 0.1);
 border-left-color:#3498db;
 color:var(--text-primary);
}
.alert-success{
 background:rgba(46, 204, 113, 0.1);
 border-left-color:#2ecc71;
 color:var(--text-primary);
}
.alert-warning{
 background:rgba(241, 196, 15, 0.1);
 border-left-color:#f1c40f;
 color:var(--text-primary);
}
.alert-danger{
 background:rgba(231, 76, 60, 0.1);
 border-left-color:#e74c3c;
 color:var(--text-primary);
}
.alert strong{
 font-weight:700;
 display:flex;
 align-items:center;
 gap:0.5rem;
 margin-bottom:0.5rem;
}
.alert i{
 font-size:1.25rem;
}
/* ==========================================================================
 SIDEBAR
 ========================================================================== */
.tutorial-sidebar{
 position:sticky;
 top:2rem;
 height:fit-content;
}
.sidebar-card{
 background:var(--background-card);
 border:1px solid var(--border-color);
 border-radius:20px;
 padding:2rem;
 margin-bottom:2rem;
 box-shadow:0 6px 25px rgba(0,0,0,0.08);
 transition:all var(--transition-normal);
 backdrop-filter:blur(10px);
 position:relative;
}
.sidebar-card::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:3px;
 background:linear-gradient(90deg, var(--primary-color), var(--primary-light));
 border-radius:20px 20px 0 0;
 opacity:0;
 transition:opacity 0.3s ease;
}
.sidebar-card:hover::before{
 opacity:1;
}
.sidebar-card:hover{
 box-shadow:0 10px 40px rgba(0,0,0,0.15);
 transform:translateY(-3px);
}
.sidebar-title{
 display:flex;
 align-items:center;
 gap:0.5rem;
 font-size:1.125rem;
 font-weight:700;
 color:var(--text-primary);
 margin-bottom:1rem;
 padding-bottom:0.75rem;
 border-bottom:2px solid var(--border-color);
}
.sidebar-title i{
 color:var(--primary-color);
 font-size:1.25rem;
}
.table-of-contents ul{
 list-style:none;
 padding:0;
 margin:0;
}
.table-of-contents li{
 margin-bottom:0.5rem;
}
.table-of-contents a{
 color:var(--text-secondary);
 text-decoration:none;
 padding:0.5rem 0;
 display:block;
 border-radius:var(--radius-sm);
 transition:all var(--transition-fast);
 font-size:0.9rem;
 line-height:1.4;
}
.table-of-contents a:hover{
 color:var(--primary-color);
 background:var(--background-tertiary);
 padding-left:0.75rem;
}
.table-of-contents a.active{
 color:var(--primary-color);
 font-weight:600;
 background:rgba(52, 152, 219, 0.1);
 padding-left:0.75rem;
}
.tutorial-tags{
 display:flex;
 flex-wrap:wrap;
 gap:0.5rem;
}
.tag{
 background:var(--background-tertiary);
 color:var(--text-secondary);
 padding:0.375rem 0.75rem;
 border-radius:var(--radius-full);
 font-size:0.8rem;
 font-weight:500;
 border:1px solid var(--border-color);
 transition:all var(--transition-fast);
}
.tag:hover{
 background:var(--primary-color);
 color:var(--text-inverse);
 border-color:var(--primary-color);
 transform:translateY(-1px);
}
.tutorial-info p{
 margin-bottom:0.75rem;
 font-size:0.9rem;
 color:var(--text-secondary);
 display:flex;
 justify-content:space-between;
 align-items:center;
}
.tutorial-info strong{
 color:var(--text-primary);
 font-weight:600;
}
.quick-actions .action-buttons{
 display:flex;
 flex-direction:column;
 gap:0.75rem;
}
.action-btn{
 display:flex;
 align-items:center;
 gap:0.75rem;
 padding:0.75rem 1rem;
 background:var(--background-tertiary);
 border:1px solid var(--border-color);
 border-radius:var(--radius-md);
 color:var(--text-secondary);
 font-size:0.9rem;
 cursor:pointer;
 transition:all var(--transition-fast);
 text-decoration:none;
}
.action-btn:hover{
 background:var(--primary-color);
 color:var(--text-inverse);
 border-color:var(--primary-color);
 transform:translateX(3px);
}
.action-btn i{
 font-size:1rem;
 width:16px;
 text-align:center;
}
.table-of-contents .toc-h2{
 font-weight:600;
 padding:0.6rem 0;
 border-left:3px solid transparent;
 padding-left:0.75rem;
}
.table-of-contents .toc-h3{
 font-size:0.85rem;
 padding:0.4rem 0;
 padding-left:1.5rem;
 opacity:0.8;
 border-left:2px solid transparent;
}
.table-of-contents a.active{
 background:rgba(37, 99, 235, 0.1);
 border-left-color:var(--primary-color);
 border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.tutorial-difficulty{
 display:flex;
 align-items:center;
 gap:0.75rem;
}
.difficulty-label{
 font-size:0.85rem;
 font-weight:500;
 text-transform:capitalize;
 opacity:0.9;
}
/* ==========================================================================
 RESPONSIVE DESIGN
 ========================================================================== */
@media (max-width:1024px){
 .tutorial-container{
 grid-template-columns:1fr;
 gap:2rem;
}
 
 .tutorial-sidebar{
 position:static;
 order:-1;
}
 
 .sidebar-card{
 margin-bottom:1rem;
}
}
@media (max-width:768px){
 .tutorial-header{
 padding:2rem 0;
 margin-bottom:2rem;
}
 
 .tutorial-meta-header{
 flex-direction:column;
 align-items:flex-start;
 gap:1.5rem;
}
 
 .tutorial-category-badge{
 padding:0.6rem 1.2rem;
 font-size:0.85rem;
}
 
 .tutorial-content{
 padding:2rem;
 border-radius:20px;
}
 
 .tutorial-content h2{
 font-size:1.6rem;
 margin:2rem 0 1.2rem 0;
}
 
 .tutorial-content h3{
 font-size:1.3rem;
 margin:1.5rem 0 1rem 0;
}
 
 .tutorial-content pre{
 padding:1.2rem;
 margin:1.5rem 0;
 border-radius:12px;
}
 
 .tutorial-content code{
 font-size:0.85rem;
}
 
 .alert{
 padding:1.5rem;
 margin:2rem 0;
 border-radius:12px;
}
 
 .sidebar-card{
 padding:1.5rem;
 margin-bottom:1.5rem;
 border-radius:16px;
}
}
@media (max-width:480px){
 .reading-progress{
 height:3px;
}
 
 .tutorial-container{
 padding:0 1rem;
}
 
 .tutorial-content{
 padding:1.5rem;
 border-radius:16px;
}
 
 .tutorial-header .container{
 padding:0 1rem;
}
 
 .tutorial-header{
 padding:1.5rem 0;
 margin-top:4px;
}
 
 .tutorial-header h1{
 font-size:clamp(1.5rem, 5vw, 2.5rem);
 margin-bottom:0.8rem;
}
 
 .tutorial-header p{
 font-size:1rem;
}
 
 .tutorial-content h2{
 font-size:1.4rem;
}
 
 .tutorial-content h3{
 font-size:1.2rem;
}
 
 .tutorial-content pre{
 font-size:0.8rem;
 padding:1rem;
 border-radius:10px;
}
 
 .tutorial-content p{
 font-size:0.95rem;
}
 
 .alert{
 padding:1.2rem;
 border-radius:10px;
}
 
 .sidebar-card{
 padding:1.2rem;
 border-radius:12px;
}
 
 .tutorial-category-badge{
 padding:0.5rem 1rem;
 font-size:0.8rem;
}
 
 .action-buttons{
 flex-direction:row;
 flex-wrap:wrap;
}
 
 .action-btn{
 flex:1;
 justify-content:center;
 padding:0.6rem 0.8rem;
 font-size:0.8rem;
}
 
 .action-btn span{
 display:none;
}
}
/* ==========================================================================
 THÈME SOMBRE - AJUSTEMENTS SPÉCIFIQUES
 ========================================================================== */
[data-theme="dark"] .tutorial-content pre{
 background:rgba(0, 0, 0, 0.3);
 border-color:var(--border-color);
}
[data-theme="dark"] .tutorial-content p code{
 background:rgba(0, 0, 0, 0.3);
 color:var(--primary-light);
}
[data-theme="dark"] .alert{
 backdrop-filter:blur(20px);
}
[data-theme="dark"] .alert-info{
 background:rgba(52, 152, 219, 0.15);
}
[data-theme="dark"] .alert-success{
 background:rgba(46, 204, 113, 0.15);
}
[data-theme="dark"] .alert-warning{
 background:rgba(241, 196, 15, 0.15);
}
[data-theme="dark"] .alert-danger{
 background:rgba(231, 76, 60, 0.15);
}
/* ==========================================================================
 ANIMATIONS ET INTERACTIONS
 ========================================================================== */
@keyframes fadeInUp{
 from{
 opacity:0;
 transform:translateY(30px);
}
 to{
 opacity:1;
 transform:translateY(0);
}
}
.tutorial-content{
 animation:fadeInUp 0.6s ease-out;
}
.sidebar-card{
 animation:fadeInUp 0.6s ease-out;
 animation-delay:0.2s;
 animation-fill-mode:both;
}
html{
 scroll-behavior:smooth;
}
.tutorial-content a:focus-visible,
.table-of-contents a:focus-visible,
.back-to-tutorials:focus-visible{
 outline:2px solid var(--primary-color);
 outline-offset:2px;
 border-radius:var(--radius-sm);
}
/* ==========================================================================
 IMPRESSION
 ========================================================================== */
@media print{
 .tutorial-sidebar,
 .back-to-tutorials,
 .theme-toggle{
 display:none !important;
}
 
 .tutorial-container{
 grid-template-columns:1fr;
 gap:0;
}
 
 .tutorial-content{
 box-shadow:none;
 border:none;
 padding:0;
}
 
 .tutorial-header{
 background:none !important;
 color:black !important;
 box-shadow:none;
}
 
 .tutorial-header::before{
 display:none;
}
}/**
 * Lazy Loading CSS Styles
 * Includes skeleton loading animations and transitions
 * Author:Morgann Riu
 * Version:1.0
 */
.lazy-loading{
 opacity:0.7;
 transition:opacity 0.3s ease-in-out;
}
.lazy-loaded{
 opacity:1;
}
.lazy-error{
 opacity:0.5;
 filter:grayscale(100%);
}
.lazy-skeleton{
 background:linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
 background-size:200% 100%;
 animation:skeleton-loading 1.5s infinite;
 border-radius:4px;
}
@keyframes skeleton-loading{
 0%{
 background-position:200% 0;
}
 100%{
 background-position:-200% 0;
}
}
.lazy-skeleton.img-small{
 min-height:100px;
 min-width:100px;
}
.lazy-skeleton.img-medium{
 min-height:200px;
 min-width:200px;
}
.lazy-skeleton.img-large{
 min-height:300px;
 min-width:400px;
}
.lazy-skeleton.img-hero{
 min-height:400px;
 min-width:100%;
}
@media (max-width:768px){
 .lazy-skeleton.img-large,
 .lazy-skeleton.img-hero{
 min-height:200px;
}
}
.lazy-fade-in{
 opacity:0;
 transform:translateY(20px);
 transition:opacity 0.6s ease-out, transform 0.6s ease-out;
}
.lazy-fade-in.lazy-loaded{
 opacity:1;
 transform:translateY(0);
}
.lazy-blur{
 filter:blur(5px);
 transition:filter 0.3s ease-in-out;
}
.lazy-blur.lazy-loaded{
 filter:blur(0);
}
.lazy-scale{
 transform:scale(0.95);
 transition:transform 0.4s ease-out, opacity 0.4s ease-out;
}
.lazy-scale.lazy-loaded{
 transform:scale(1);
}
.lazy-placeholder{
 display:flex;
 align-items:center;
 justify-content:center;
 background-color:#f8f9fa;
 border:1px solid #e9ecef;
 border-radius:4px;
 color:#6c757d;
 font-size:14px;
 min-height:150px;
}
.lazy-placeholder::before{
 content:"📷";
 font-size:24px;
 margin-right:8px;
}
.lazy-error{
 background-color:#f8d7da;
 border:1px solid #f5c6cb;
 color:#721c24;
}
.lazy-error::after{
 content:"⚠️ Image non disponible";
 display:flex;
 align-items:center;
 justify-content:center;
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background-color:rgba(248, 215, 218, 0.9);
 font-size:12px;
}
.lazy-spinner{
 position:relative;
}
.lazy-spinner::before{
 content:"";
 position:absolute;
 top:50%;
 left:50%;
 width:20px;
 height:20px;
 margin:-10px 0 0 -10px;
 border:2px solid #f3f3f3;
 border-top:2px solid #3498db;
 border-radius:50%;
 animation:lazy-spin 1s linear infinite;
 z-index:1;
}
@keyframes lazy-spin{
 0%{transform:rotate(0deg);}
 100%{transform:rotate(360deg);}
}
.webp .lazy-webp-fallback{
 display:none;
}
.no-webp .lazy-webp-primary{
 display:none;
}
.lazy-container{
 position:relative;
 overflow:hidden;
 border-radius:8px;
}
.lazy-container img{
 width:100%;
 height:auto;
 display:block;
}
.lazy-aspect-16-9{
 aspect-ratio:16 / 9;
}
.lazy-aspect-4-3{
 aspect-ratio:4 / 3;
}
.lazy-aspect-1-1{
 aspect-ratio:1 / 1;
}
.lazy-aspect-3-2{
 aspect-ratio:3 / 2;
}
@supports not (aspect-ratio:1){
 .lazy-aspect-16-9{
 padding-bottom:56.25%;
}
 
 .lazy-aspect-4-3{
 padding-bottom:75%;
}
 
 .lazy-aspect-1-1{
 padding-bottom:100%;
}
 
 .lazy-aspect-3-2{
 padding-bottom:66.67%;
}
 
 .lazy-aspect-16-9 img,
 .lazy-aspect-4-3 img,
 .lazy-aspect-1-1 img,
 .lazy-aspect-3-2 img{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 object-fit:cover;
}
}
@media (prefers-color-scheme:dark){
 .lazy-skeleton{
 background:linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
 background-size:200% 100%;
}
 
 .lazy-placeholder{
 background-color:#2a2a2a;
 border-color:#3a3a3a;
 color:#ccc;
}
 
 .lazy-spinner::before{
 border-color:#3a3a3a;
 border-top-color:#3498db;
}
}
@media (prefers-contrast:high){
 .lazy-skeleton{
 background:#000;
 color:#fff;
}
 
 .lazy-placeholder{
 border-width:2px;
 border-color:#000;
}
}
@media (prefers-reduced-motion:reduce){
 .lazy-skeleton{
 animation:none;
 background:#f0f0f0;
}
 
 .lazy-fade-in,
 .lazy-blur,
 .lazy-scale,
 .lazy-loading,
 .lazy-loaded{
 transition:none;
 transform:none;
 filter:none;
 opacity:1;
}
 
 .lazy-spinner::before{
 animation:none;
 display:none;
}
}
@media print{
 .lazy-skeleton,
 .lazy-spinner::before{
 display:none;
}
 
 .lazy-loading,
 .lazy-loaded{
 opacity:1;
}
}/**
 * Système de thèmes avancé avec animations fluides
 * Support complet pour thèmes clair/sombre avec transitions élégantes
 * Optimisé pour l'accessibilité et les performances
 */
/* ==========================================================================
 VARIABLES CSS POUR LES THÈMES
 ========================================================================== */
:root{
 
 --primary-color:#2c3e50;
 --primary-light:#3498db;
 --primary-dark:#1a252f;
 --secondary-color:#e74c3c;
 --accent-color:#f39c12;
 --success-color:#27ae60;
 --warning-color:#f1c40f;
 --danger-color:#e74c3c;
 
 
 --background-primary:#ffffff;
 --background-secondary:#f8f9fa;
 --background-tertiary:#e9ecef;
 --background-card:#ffffff;
 --background-overlay:rgba(0, 0, 0, 0.1);
 --background-modal:rgba(0, 0, 0, 0.5);
 
 
 --text-primary:#2c3e50;
 --text-secondary:#6c757d;
 --text-muted:#adb5bd;
 --text-inverse:#ffffff;
 --text-link:#3498db;
 --text-link-hover:#2980b9;
 
 
 --border-color:#dee2e6;
 --border-light:#e9ecef;
 --border-dark:#adb5bd;
 --divider-color:#e9ecef;
 
 
 --shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
 --shadow-md:0 0.5rem 1rem rgba(0, 0, 0, 0.15);
 --shadow-lg:0 1rem 2rem rgba(0, 0, 0, 0.175);
 --shadow-xl:0 2rem 4rem rgba(0, 0, 0, 0.2);
 --shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.075);
 
 
 --gradient-primary:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 --gradient-secondary:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
 --gradient-success:linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
 
 
 --transition-fast:0.15s ease;
 --transition-normal:0.3s ease;
 --transition-slow:0.5s ease;
 --animation-bounce:cubic-bezier(0.68, -0.55, 0.265, 1.55);
 
 
 --radius-sm:0.375rem;
 --radius-md:0.5rem;
 --radius-lg:0.75rem;
 --radius-xl:1rem;
 --radius-full:50%;
}
[data-theme="dark"]{
 
 --primary-color:#3498db;
 --primary-light:#5dade2;
 --primary-dark:#2980b9;
 --secondary-color:#e74c3c;
 --accent-color:#f39c12;
 --success-color:#2ecc71;
 --warning-color:#f1c40f;
 --danger-color:#e74c3c;
 
 
 --background-primary:#1a1a1a;
 --background-secondary:#2d2d2d;
 --background-tertiary:#404040;
 --background-card:#2d2d2d;
 --background-overlay:rgba(255, 255, 255, 0.1);
 --background-modal:rgba(0, 0, 0, 0.8);
 
 
 --text-primary:#f8f9fa;
 --text-secondary:#adb5bd;
 --text-muted:#6c757d;
 --text-inverse:#1a1a1a;
 --text-link:#5dade2;
 --text-link-hover:#3498db;
 
 
 --border-color:#404040;
 --border-light:#2d2d2d;
 --border-dark:#6c757d;
 --divider-color:#404040;
 
 
 --shadow-sm:0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
 --shadow-md:0 0.5rem 1rem rgba(0, 0, 0, 0.4);
 --shadow-lg:0 1rem 2rem rgba(0, 0, 0, 0.5);
 --shadow-xl:0 2rem 4rem rgba(0, 0, 0, 0.6);
 --shadow-inset:inset 0 1px 2px rgba(0, 0, 0, 0.3);
 
 
 --gradient-primary:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 --gradient-secondary:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
 --gradient-success:linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
/* ==========================================================================
 BOUTON DE BASCULEMENT DE THÈME - VERSION ULTRA-MODERNE
 ========================================================================== */
.theme-toggle{
 position:fixed;
 bottom:2rem;
 right:2rem;
 width:4rem;
 height:4rem;
 border:none;
 border-radius:var(--radius-full);
 background:linear-gradient(145deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
 color:var(--text-inverse);
 cursor:pointer;
 z-index:1000;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:1.5rem;
 box-shadow:
 0 8px 32px rgba(102, 126, 234, 0.4),
 0 4px 16px rgba(118, 75, 162, 0.3),
 inset 0 1px 0 rgba(255, 255, 255, 0.2);
 transition:all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 transform:scale(1);
 backdrop-filter:blur(20px);
 -webkit-backdrop-filter:blur(20px);
 border:2px solid rgba(255, 255, 255, 0.1);
 position:relative;
 overflow:hidden;
}
.theme-toggle::before{
 content:'';
 position:absolute;
 top:-50%;
 left:-50%;
 width:200%;
 height:200%;
 background:linear-gradient(
 45deg,
 transparent,
 rgba(255, 255, 255, 0.1),
 transparent
 );
 transform:rotate(45deg);
 transition:all 0.6s ease;
 opacity:0;
}
.theme-toggle:hover::before{
 animation:shine 0.6s ease-in-out;
}
@keyframes shine{
 0%{
 transform:translateX(-100%) translateY(-100%) rotate(45deg);
 opacity:0;
}
 50%{
 opacity:1;
}
 100%{
 transform:translateX(100%) translateY(100%) rotate(45deg);
 opacity:0;
}
}
.theme-toggle:hover{
 transform:scale(1.15) rotate(5deg);
 box-shadow:
 0 12px 48px rgba(102, 126, 234, 0.6),
 0 8px 24px rgba(118, 75, 162, 0.4),
 inset 0 1px 0 rgba(255, 255, 255, 0.3);
 background:linear-gradient(145deg, #f093fb 0%, #f5576c 50%, #4facfe 100%);
}
.theme-toggle:active{
 transform:scale(1.05) rotate(2deg);
 transition:transform 0.15s ease;
}
.theme-toggle:focus{
 outline:none;
 box-shadow:
 0 12px 48px rgba(102, 126, 234, 0.6),
 0 8px 24px rgba(118, 75, 162, 0.4),
 0 0 0 4px rgba(102, 126, 234, 0.3),
 inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.theme-toggle:focus-visible{
 outline:3px solid rgba(102, 126, 234, 0.5);
 outline-offset:4px;
}
.theme-toggle .theme-icon{
 transition:all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 display:block;
 position:absolute;
 font-size:1.5rem;
 text-shadow:0 2px 4px rgba(0, 0, 0, 0.3);
}
.theme-toggle .theme-icon.hidden{
 opacity:0;
 transform:rotate(180deg) scale(0.3);
 filter:blur(4px);
}
.theme-toggle .theme-icon:not(.hidden){
 opacity:1;
 transform:rotate(0deg) scale(1);
 filter:blur(0px);
}
@keyframes pulse-theme-advanced{
 0%, 100%{
 transform:scale(1);
 box-shadow:
 0 8px 32px rgba(102, 126, 234, 0.4),
 0 4px 16px rgba(118, 75, 162, 0.3);
}
 25%{
 transform:scale(1.05);
 box-shadow:
 0 12px 40px rgba(102, 126, 234, 0.5),
 0 6px 20px rgba(118, 75, 162, 0.4);
}
 50%{
 transform:scale(1.1);
 box-shadow:
 0 16px 48px rgba(102, 126, 234, 0.6),
 0 8px 24px rgba(118, 75, 162, 0.5);
}
 75%{
 transform:scale(1.05);
 box-shadow:
 0 12px 40px rgba(102, 126, 234, 0.5),
 0 6px 20px rgba(118, 75, 162, 0.4);
}
}
.theme-toggle.pulse{
 animation:pulse-theme-advanced 3s infinite ease-in-out;
}
.theme-toggle::after{
 content:'';
 position:absolute;
 width:6px;
 height:6px;
 background:radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent);
 border-radius:50%;
 top:10%;
 right:15%;
 animation:float-particle 4s infinite ease-in-out;
 opacity:0.7;
}
@keyframes float-particle{
 0%, 100%{
 transform:translateY(0px) rotate(0deg);
 opacity:0.7;
}
 25%{
 transform:translateY(-8px) rotate(90deg);
 opacity:1;
}
 50%{
 transform:translateY(-4px) rotate(180deg);
 opacity:0.5;
}
 75%{
 transform:translateY(-12px) rotate(270deg);
 opacity:0.8;
}
}
[data-theme="dark"] .theme-toggle{
 background:linear-gradient(145deg, #2d3748 0%, #4a5568 50%, #667eea 100%);
 border:2px solid rgba(255, 255, 255, 0.15);
 box-shadow:
 0 8px 32px rgba(45, 55, 72, 0.6),
 0 4px 16px rgba(74, 85, 104, 0.4),
 inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .theme-toggle:hover{
 background:linear-gradient(145deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
 box-shadow:
 0 12px 48px rgba(102, 126, 234, 0.4),
 0 8px 24px rgba(118, 75, 162, 0.3),
 inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.theme-toggle[title]:hover::before{
 content:attr(title);
 position:absolute;
 bottom:120%;
 right:50%;
 transform:translateX(50%);
 background:rgba(0, 0, 0, 0.9);
 color:white;
 padding:0.5rem 1rem;
 border-radius:0.5rem;
 font-size:0.875rem;
 white-space:nowrap;
 z-index:1001;
 opacity:0;
 animation:tooltip-appear 0.3s ease forwards;
}
@keyframes tooltip-appear{
 from{
 opacity:0;
 transform:translateX(50%) translateY(5px);
}
 to{
 opacity:1;
 transform:translateX(50%) translateY(0);
}
}
@media (max-width:768px){
 .theme-toggle{
 bottom:1.5rem;
 right:1.5rem;
 width:3.5rem;
 height:3.5rem;
 font-size:1.25rem;
}
}
@media (max-width:480px){
 .theme-toggle{
 bottom:1rem;
 right:1rem;
 width:3rem;
 height:3rem;
 font-size:1rem;
}
}
/* ==========================================================================
 TRANSITIONS GLOBALES
 ========================================================================== */
*,
*::before,
*::after{
 transition:
 background-color var(--transition-normal),
 border-color var(--transition-normal),
 color var(--transition-normal),
 box-shadow var(--transition-normal),
 opacity var(--transition-normal);
}
.no-transition,
.no-transition *,
img,
video,
iframe,
canvas,
svg{
 transition:none !important;
}
/* ==========================================================================
 AMÉLIORATIONS VISUELLES GÉNÉRALES
 ========================================================================== */
body{
 background-color:var(--background-primary);
 color:var(--text-primary);
 transition:all var(--transition-normal);
}
.card,
.project-card,
.skill-category,
.timeline-item .card{
 background-color:var(--background-card);
 border:1px solid var(--border-color);
 box-shadow:var(--shadow-sm);
 transition:all var(--transition-normal);
}
.card:hover,
.project-card:hover{
 box-shadow:var(--shadow-md);
 transform:translateY(-2px);
}
h1, h2, h3, h4, h5, h6{
 color:var(--text-primary);
}
a{
 color:var(--text-link);
 transition:color var(--transition-fast);
}
a:hover{
 color:var(--text-link-hover);
}
.btn{
 transition:all var(--transition-normal);
 border-radius:var(--radius-md);
}
.btn-primary{
 background:var(--gradient-primary);
 border:none;
 color:var(--text-inverse);
 box-shadow:var(--shadow-sm);
}
.btn-primary:hover{
 background:var(--gradient-secondary);
 box-shadow:var(--shadow-md);
 transform:translateY(-1px);
}
.btn-outline{
 background:transparent;
 border:2px solid var(--primary-color);
 color:var(--primary-color);
}
.btn-outline:hover{
 background:var(--primary-color);
 color:var(--text-inverse);
}
input,
textarea,
select{
 background-color:var(--background-card);
 border:1px solid var(--border-color);
 color:var(--text-primary);
 border-radius:var(--radius-sm);
 transition:all var(--transition-fast);
}
input:focus,
textarea:focus,
select:focus{
 outline:none;
 border-color:var(--primary-color);
 box-shadow:0 0 0 3px rgba(52, 152, 219, 0.1);
}
.header,
.navbar{
 background-color:var(--background-card);
 border-bottom:1px solid var(--border-color);
 box-shadow:var(--shadow-sm);
}
.footer{
 background-color:var(--background-secondary);
 border-top:1px solid var(--border-color);
}
/* ==========================================================================
 EFFETS SPÉCIAUX ET ANIMATIONS
 ========================================================================== */
@keyframes theme-switch{
 0%{
 opacity:1;
}
 50%{
 opacity:0.8;
}
 100%{
 opacity:1;
}
}
.theme-switching{
 animation:theme-switch 0.3s ease;
}
.interactive-hover{
 transition:all var(--transition-normal);
}
.interactive-hover:hover{
 transform:translateY(-2px);
 box-shadow:var(--shadow-md);
}
.focus-enhanced:focus{
 outline:none;
 box-shadow:
 var(--shadow-md),
 0 0 0 3px rgba(52, 152, 219, 0.3);
 transform:scale(1.02);
}
.text-gradient{
 background:var(--gradient-primary);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
 background-clip:text;
 font-weight:bold;
}
/* ==========================================================================
 RESPONSIVE ET ACCESSIBILITÉ
 ========================================================================== */
@media (max-width:768px){
 .theme-toggle{
 bottom:1rem;
 right:1rem;
 width:3rem;
 height:3rem;
 font-size:1rem;
}
}
@media (prefers-reduced-motion:reduce){
 *,
 *::before,
 *::after{
 animation-duration:0.01ms !important;
 animation-iteration-count:1 !important;
 transition-duration:0.01ms !important;
}
 
 .theme-toggle:hover{
 transform:none;
}
 
 .theme-toggle.pulse{
 animation:none;
}
}
@media (prefers-contrast:high){
:root{
 --border-color:#000000;
 --text-primary:#000000;
 --background-primary:#ffffff;
}
 
 [data-theme="dark"]{
 --border-color:#ffffff;
 --text-primary:#ffffff;
 --background-primary:#000000;
}
}
@media (prefers-color-scheme:dark){
:root:not([data-theme]){
 --primary-color:#3498db;
 --background-primary:#1a1a1a;
 --background-secondary:#2d2d2d;
 --background-card:#2d2d2d;
 --text-primary:#f8f9fa;
 --text-secondary:#adb5bd;
 --border-color:#404040;
}
}
/* ==========================================================================
 UTILITAIRES ET CLASSES D'AIDE
 ========================================================================== */
.theme-bg-primary{background-color:var(--background-primary);}
.theme-bg-secondary{background-color:var(--background-secondary);}
.theme-bg-card{background-color:var(--background-card);}
.theme-text-primary{color:var(--text-primary);}
.theme-text-secondary{color:var(--text-secondary);}
.theme-text-muted{color:var(--text-muted);}
.theme-border{border-color:var(--border-color);}
.theme-shadow-sm{box-shadow:var(--shadow-sm);}
.theme-shadow-md{box-shadow:var(--shadow-md);}
.theme-indicator{
 position:fixed;
 top:1rem;
 left:1rem;
 padding:0.5rem 1rem;
 background:var(--background-card);
 border:1px solid var(--border-color);
 border-radius:var(--radius-sm);
 font-size:0.75rem;
 opacity:0.7;
 z-index:999;
 display:none;
}
.debug .theme-indicator{
 display:block;
}
/* ==========================================================================
 ANIMATIONS AVANCÉES
 ========================================================================== */
@keyframes fadeInUp{
 from{
 opacity:0;
 transform:translateY(20px);
}
 to{
 opacity:1;
 transform:translateY(0);
}
}
.animate-fade-in-up{
 animation:fadeInUp 0.6s var(--animation-bounce);
}
@keyframes rotate{
 from{
 transform:rotate(0deg);
}
 to{
 transform:rotate(360deg);
}
}
.animate-rotate{
 animation:rotate 2s linear infinite;
}
@keyframes heartbeat{
 0%, 100%{
 transform:scale(1);
}
 50%{
 transform:scale(1.1);
}
}
.animate-heartbeat{
 animation:heartbeat 1.5s ease-in-out infinite;
}
/* ==========================================================================
 PRINT STYLES (pour l'impression)
 ========================================================================== */
@media print{
 .theme-toggle{
 display:none !important;
}
 
 *{
 background:white !important;
 color:black !important;
 box-shadow:none !important;
}
}