@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Syne:wght@600;700;800&display=swap";
:root{--bg-deep:#050505;--bg-surface:#0a0a0b;--text-main:#fff;--text-muted:#ffffff80;--accent:#00f3ff;--accent-glow:#00f3ff33;--border:#ffffff14;--glass:#ffffff0a;--cat-tutoriel:var(--accent);--cat-actualite:#a855f7;--cat-comparatif:#f97316;--cat-cas-client:#22c55e}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-deep);color:var(--text-main);font-family:Inter,sans-serif;line-height:1.6;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:Syne,sans-serif;font-weight:700;line-height:1.2}a{color:inherit;text-decoration:none}.neural-background{z-index:-1;background-color:var(--bg-deep);perspective:1000px;width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden}.neural-pulse{background:radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);opacity:.5;filter:blur(80px);width:80vw;height:80vw;animation:10s ease-in-out infinite alternate pulse-glow;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.neural-grid{background-image:linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px);background-size:50px 50px;width:200%;height:200%;animation:20s linear infinite grid-flow;position:absolute;bottom:-50%;left:-50%;transform:rotateX(60deg)translateY(0);-webkit-mask-image:linear-gradient(#0000 0%,#000 100%);mask-image:linear-gradient(#0000 0%,#000 100%)}@keyframes grid-flow{0%{transform:rotateX(60deg)translateY(0)}to{transform:rotateX(60deg)translateY(50px)}}@keyframes pulse-glow{0%{opacity:.3;transform:translate(-50%,-50%)scale(.8)}to{opacity:.7;transform:translate(-50%,-50%)scale(1.1)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.main-container{max-width:1200px;min-height:100vh;margin:0 auto;padding:100px 20px 40px}.blog-header{background:var(--glass);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);z-index:100;justify-content:space-between;align-items:center;height:70px;padding:0 5%;display:flex;position:fixed;top:0;left:0;right:0}.blog-header-logo{letter-spacing:-.5px;align-items:center;gap:10px;font-family:Syne,sans-serif;font-size:1.2rem;font-weight:800;display:flex}.blog-header-logo span{color:var(--accent)}.blog-header-subtitle{color:var(--text-muted);border-left:1px solid var(--border);padding-left:10px;font-family:Inter,sans-serif;font-size:.9rem;font-weight:500}.blog-header-nav{gap:20px;display:flex}.blog-header-nav button{color:var(--text-muted);cursor:pointer;background:0 0;border:none;font-family:Inter,sans-serif;font-size:.95rem;font-weight:500;transition:color .2s}.blog-header-nav button:hover,.blog-header-nav button.active{color:var(--text-main)}.blog-header-actions{align-items:center;gap:15px;display:flex}.lang-switcher button{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:4px;padding:4px 8px;transition:all .2s}.lang-switcher button.active{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}.burger-menu{color:var(--text-main);cursor:pointer;background:0 0;border:none;font-size:1.5rem;display:none}.article-grid{grid-template-columns:repeat(3,1fr);gap:30px;margin-top:40px;display:grid}.article-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;flex-direction:column;transition:transform .3s,border-color .3s,box-shadow .3s;animation:.6s backwards fadeInUp;display:flex;overflow:hidden}.article-card:hover{border-color:var(--accent);transform:translateY(-5px);box-shadow:0 10px 30px #00f3ff1a}.article-card-image{aspect-ratio:16/9;background:linear-gradient(45deg,#1a1a1a,#0d0d0d);width:100%;position:relative;overflow:hidden}.article-card-image img{object-fit:cover;transition:transform .5s}.article-card:hover .article-card-image img{transform:scale(1.05)}.article-card-content{flex-direction:column;flex-grow:1;padding:24px;display:flex}.category-badge{text-transform:uppercase;letter-spacing:.5px;border-radius:20px;align-self:flex-start;margin-bottom:12px;padding:4px 10px;font-size:.75rem;font-weight:600}.category-badge.tutoriel{color:var(--cat-tutoriel);border:1px solid var(--cat-tutoriel);background:#00f3ff1a}.category-badge.actualite{color:var(--cat-actualite);border:1px solid var(--cat-actualite);background:#a855f71a}.category-badge.comparatif{color:var(--cat-comparatif);border:1px solid var(--cat-comparatif);background:#f973161a}.category-badge.cas-client{color:var(--cat-cas-client);border:1px solid var(--cat-cas-client);background:#22c55e1a}.article-card-title{color:var(--text-main);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:10px;font-size:1.25rem;display:-webkit-box;overflow:hidden}.article-card-excerpt{color:var(--text-muted);-webkit-line-clamp:3;-webkit-box-orient:vertical;flex-grow:1;margin-bottom:20px;font-size:.9rem;display:-webkit-box;overflow:hidden}.article-card-meta{color:var(--text-muted);justify-content:space-between;align-items:center;margin-bottom:16px;font-size:.8rem;display:flex}.read-more-btn{color:var(--accent);border-top:1px solid var(--border);text-align:center;padding:10px 0;font-size:.9rem;font-weight:600;transition:color .2s,background .2s;display:inline-block}.article-card:hover .read-more-btn{background:var(--accent-glow)}.blog-hero{text-align:center;padding:60px 0 40px;animation:.8s backwards fadeInUp}.blog-hero h1{margin-bottom:16px;font-size:3.5rem}.blog-hero p{color:var(--text-muted);max-width:600px;margin:0 auto;font-size:1.2rem}.article-page-header{text-align:center;max-width:800px;margin:0 auto 40px}.article-page-title{margin:20px 0;font-size:3rem}.article-page-meta{color:var(--text-muted);justify-content:center;gap:20px;font-size:.9rem;display:flex}.article-page-cover{aspect-ratio:16/9;border:1px solid var(--border);border-radius:16px;width:100%;max-width:1000px;margin:0 auto 40px;position:relative;overflow:hidden}.article-layout{gap:40px;max-width:1100px;margin:0 auto;display:flex}.article-sidebar{flex-shrink:0;align-self:flex-start;width:250px;position:sticky;top:100px}.toc-title{color:var(--text-main);border-bottom:1px solid var(--border);margin-bottom:16px;padding-bottom:8px;font-family:Syne,sans-serif;font-size:1.1rem}.toc-list{font-size:.9rem;list-style:none}.toc-list li{margin-bottom:10px}.toc-list a{color:var(--text-muted);transition:color .2s}.toc-list a:hover{color:var(--accent)}.toc-list .toc-h3{padding-left:15px;font-size:.85rem}.share-buttons{border-top:1px solid var(--border);margin-top:30px;padding-top:20px}.share-btn{background:var(--glass);border:1px solid var(--border);color:var(--text-main);cursor:pointer;border-radius:8px;align-items:center;gap:8px;padding:8px 16px;font-size:.9rem;transition:all .2s;display:flex}.share-btn:hover{border-color:var(--accent);background:var(--accent-glow)}.article-content{color:#e5e5e5;flex-grow:1;max-width:750px;font-size:1.1rem;line-height:1.8}.article-content h2{color:var(--text-main);margin:40px 0 20px;font-size:2rem}.article-content h3{color:var(--text-main);margin:30px 0 15px;font-size:1.5rem}.article-content p{margin-bottom:20px}.article-content ul,.article-content ol{margin:0 0 20px 20px;padding-left:20px}.article-content li{margin-bottom:10px}.article-content blockquote{border-left:4px solid var(--accent);background:var(--glass);color:var(--text-muted);border-radius:0 8px 8px 0;margin:20px 0;padding:10px 20px;font-style:italic}.article-content pre{border:1px solid var(--border);background:#111;border-radius:8px;margin:20px 0;padding:20px;overflow-x:auto}.article-content code{color:var(--accent);font-family:Menlo,Monaco,Courier New,monospace;font-size:.9em}.article-content pre code{color:#e5e5e5}.article-content img{border:1px solid var(--border);border-radius:8px;max-width:100%;height:auto;margin:30px 0}@media (max-width:992px){.article-grid{grid-template-columns:repeat(2,1fr)}.article-layout{flex-direction:column}.article-sidebar{order:2;width:100%;margin-top:40px;position:static}.article-content{order:1;max-width:100%}}@media (max-width:768px){.article-grid{grid-template-columns:1fr}.blog-header-nav{display:none}.blog-header-nav.open{background:var(--bg-surface);border-bottom:1px solid var(--border);flex-direction:column;width:100%;padding:20px;display:flex;position:absolute;top:70px;left:0}.burger-menu{display:block}.blog-hero h1{font-size:2.5rem}.article-page-title{font-size:2rem}}
