@charset "UTF-8";.logo-link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;line-height:1}.logo-bird{animation:birdHop 2s ease-in-out infinite;transform-origin:bottom center}@keyframes birdHop{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-8px) rotate(-5deg)}50%{transform:translateY(0) rotate(0)}75%{transform:translateY(-4px) rotate(3deg)}}.grid-bg{background-image:linear-gradient(rgba(7,11,14,.01) 1px,transparent 1px),linear-gradient(90deg,rgba(7,11,14,.03) 1px,transparent 1px);background-size:40px 40px}.grid-bg-white{background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:40px 40px}.no-copy{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important}@media print{.no-copy,.obfuscated,#address-protected,.obfuscated-address{display:none!important;visibility:hidden!important}.bg-[f5f5f5]:after{content:"Adresse masquée pour des raisons de sécurité lors de l'impression.";font-style:italic;color:red}}.components-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:10px;margin-bottom:80px}.component-item{padding:32px 28px;display:flex;align-items:flex-start;gap:20px;transition:all .3s ease;position:relative;overflow:hidden;border-radius:16px;border:2px solid var(--theme-mirage);min-width:0}.component-item:hover{border-color:var(--theme-peach)}.component-item:hover:before{opacity:1}.component-item:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(var(--theme-peach-rgb, 255, 167, 138),.1) 0% 100%);opacity:0;transition:opacity .3s ease}.component-number{font-size:32px;font-weight:700;background:linear-gradient(135deg,var(--theme-peach) 0%,var(--theme-peach) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;min-width:50px;position:relative;z-index:1}.component-content{flex:1;position:relative;z-index:1;min-width:0;width:100%}.component-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}.component-icon{font-size:24px}.component-title{font-size:20px;font-weight:700}.component-description{font-size:15px;color:#888;line-height:1.6;margin-bottom:12px}.component-manager{display:inline-block;font-size:11px;font-weight:600;background:#070b0e26;padding:5px 10px;border-radius:6px;letter-spacing:.5px}.code-example{background-color:var(--theme-mirage);border-radius:20px;padding:2.5rem 5rem 2.5rem 2.5rem;margin-top:2rem;border:2px solid var(--theme-peach);position:relative;box-shadow:0 10px 40px #070b0e4d;transition:all .3s ease;max-width:100%;overflow:hidden}.code-example pre{margin:0;background:transparent!important;padding:0;overflow-x:auto;overflow-y:hidden;max-width:100%}.code-example pre::-webkit-scrollbar{height:10px}.code-example pre::-webkit-scrollbar-track{background:#ffffff0d;border-radius:5px}.code-example pre::-webkit-scrollbar-thumb{background:var(--theme-peach);border-radius:5px}.code-example pre::-webkit-scrollbar-thumb:hover{background:#ff9d7a}.code-example pre code{font-family:Monaco,Courier New,monospace;font-size:.95rem;line-height:1.8;text-shadow:none!important;display:block;white-space:pre;padding:0}.code-example .hljs{background:transparent!important;color:#f8f8f2}.code-example .hljs-tag,.code-example .hljs-name{color:#ff79c6!important}.code-example .hljs-attr{color:#8be9fd!important}.code-example .hljs-string{color:var(--theme-peach)!important}.code-example .hljs-punctuation{color:#f8f8f2!important}.code-example .hljs-comment{color:#7280ad!important}.copy-button{position:absolute;top:1.5rem;right:1.5rem;background:transparent;border:1px solid #fff;color:#fff;padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-size:.85rem;font-weight:500;transition:all .3s ease;display:flex;align-items:center;gap:.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10}.copy-button:hover{background:var(--theme-peach);border-color:var(--theme-peach);color:var(--theme-mirage);transform:translateY(-2px);box-shadow:0 4px 12px #ffbf994d}.copy-button.copied{background:#4ade80;border-color:#4ade80;color:#fff}.playground .panel{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;overflow:hidden;box-shadow:0 1px 3px #0000000d;transition:all .3s cubic-bezier(.4,0,.2,1)}.playground .panel:hover{box-shadow:0 4px 20px #00000014}.playground .panel-header{background:#f9fafb;padding:.75rem 1.5rem;border-bottom:1px solid rgba(0,0,0,.08);display:flex;align-items:center;gap:.75rem}.playground .panel-header:before{content:"";width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#ff6b35,#8b5cf6);animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.playground .panel-title{color:#6b7280;font-size:.875rem;font-weight:600;letter-spacing:-.01em}.playground .panel-content{padding:1.5rem}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.playground .code-panel{background:#0a0a0a;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 20px #0000004d}.playground .code-header{background:#1a1a1a;padding:.75rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:.75rem}.playground .code-dots{display:flex;gap:.5rem}.playground .code-dot{width:12px;height:12px;border-radius:50%}.playground .code-dot:nth-child(1){background:#ff5f56}.playground .code-dot:nth-child(2){background:#ffbd2e}.playground .code-dot:nth-child(3){background:#27c93f}.playground .code-title{color:#fff9;font-size:.875rem;font-weight:500}.playground>textarea{width:100%;min-height:500px;background:#0a0a0a;color:#d4d4d4;border:none;padding:2rem 1.5rem;font-family:SF Mono,Monaco,Courier New,monospace;font-size:.95rem;resize:vertical;line-height:1.8;transition:all .3s ease;tab-size:2}.playground>textarea:focus{outline:none}.playground>textarea::placeholder{color:#ffffff4d}.playground>textarea::selection{background:#ffbf994d}.playground .code-content{background:#0a0a0a;position:relative}.playground .btn-template{background:#fff;color:#0a0a0a;padding:.5rem 1rem;font-size:.75rem;border:1px solid rgba(0,0,0,.08);border-radius:6px;font-weight:500}.playground .btn-template:hover{background:#f9fafb;border-color:#ff6b35;color:#ff6b35;transform:translateY(-1px)}.playground .btn-template:before{display:none}.playground .templates{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;margin:1rem 0}.playground .reference{font-size:.875rem;color:#6b7280}.playground .ref-item{margin-bottom:1.5rem;padding:1rem;background:#f9fafb;border-radius:10px;border:1px solid rgba(0,0,0,.08);transition:all .2s ease}.playground .ref-item:hover{background:#fff;border-color:#ffb399}.playground .ref-item:last-child{margin-bottom:0}.playground .ref-class{background:#0a0a0a;color:#ff6b35;padding:.5rem 1rem;border-radius:6px;font-family:SF Mono,Monaco,Courier New,monospace;display:inline-block;margin-bottom:.5rem;font-size:.75rem;font-weight:600}.playground .ref-desc{color:#6b7280;font-size:.875rem;display:block}.playground .css-output{background:#0a0a0a;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:1.5rem;font-family:SF Mono,Monaco,Courier New,monospace;font-size:.75rem;max-height:400px;overflow-y:auto;color:#e4e4e7;margin-top:1rem;line-height:1.8}.playground .css-output pre{margin:0;white-space:pre-wrap;word-wrap:break-word}.playground .tips{background:linear-gradient(135deg,#f9fafb,#fff);border-left:3px solid #ff6b35;padding:1.5rem;border-radius:10px;margin-top:1.5rem;font-size:.875rem;box-shadow:0 1px 3px #0000000d}.playground .tips ul{list-style:none;padding:0;margin:1rem 0 0;color:#6b7280}.playground .tips li{margin-bottom:.75rem;line-height:1.6;padding-left:1.5rem;position:relative}.playground .tips li:before{content:"✓";position:absolute;left:0;color:#22c55e;font-weight:700}.playground .tips code{background:#0a0a0a;color:#ff6b35;padding:2px 8px;border-radius:6px;font-size:.75rem;font-weight:600}.playground .tips strong{color:#0a0a0a;display:block;margin-bottom:.75rem;font-size:1rem}.playground .error{background:linear-gradient(135deg,#fee2e2,#fef2f2);color:#991b1b;padding:1.5rem;border-radius:10px;border:1px solid #fecaca;font-size:.875rem;display:flex;align-items:center;gap:.75rem}.playground .error:before{content:"⚠";font-size:1.25rem;flex-shrink:0}.playground .css-output::-webkit-scrollbar{width:6px;height:6px}.playground .css-output::-webkit-scrollbar-track{background:#ffffff0d;border-radius:10px}.playground .css-output::-webkit-scrollbar-thumb{background:#ffbf994d;border-radius:10px}.playground .css-output::-webkit-scrollbar-thumb:hover{background:#ffbf9980}.playground .playground-hero{background:linear-gradient(135deg,#fafafa,#fff);padding:3rem 0;text-align:center;position:relative;overflow:hidden}.playground .playground-hero:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,107,53,.03) 0%,transparent 70%);animation:rotate 20s linear infinite}.playground .playground-hero h1{font-size:2rem;font-weight:700;margin-bottom:1rem;color:#0a0a0a;letter-spacing:-.02em;position:relative}.playground .playground-hero p{font-size:1.125rem;color:#6b7280;max-width:700px;margin:0 auto;line-height:1.6;position:relative}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.playground .state-indicator{margin-top:2rem;text-align:center;padding:1rem;background:#f9fafb;border-radius:10px;color:#6b7280;border:1px solid rgba(0,0,0,.08);font-size:.875rem}.playground .state-indicator strong{color:#ff6b35;font-weight:600}@media(max-width:768px){.playground .panel-content{padding:1rem}.playground button{padding:.75rem 1.25rem;font-size:.75rem}.playground .playground-hero{padding:2rem 0}.playground .playground-hero h1{font-size:1.25rem}.playground .playground-hero p{font-size:1rem}.playground textarea{min-height:300px;padding:1rem}.playground .templates{grid-template-columns:1fr}}.playground #code-input::-webkit-scrollbar{width:12px;height:12px}.playground #code-input::-webkit-scrollbar-track{background:#ffffff0d}.playground #code-input::-webkit-scrollbar-thumb{background:#ffbf994d;border-radius:6px}.playground #code-input::-webkit-scrollbar-thumb:hover{background:#ffbf9980}.code-panel{background:#0a0a0a;border-radius:15px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 20px #0000004d}.code-header{background:#1a1a1a;padding:.75rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:.75rem}.code-dots{display:flex;gap:.5rem}.code-dot{width:12px;height:12px;border-radius:50%}.code-dot:nth-child(1){background:#ff5f56}.code-dot:nth-child(2){background:#ffbd2e}.code-dot:nth-child(3){background:#27c93f}.code-title{color:#fff9;font-size:.85rem;font-weight:500}.code-content{padding:2rem 1.5rem;font-family:Monaco,Courier New,monospace;font-size:.9rem;line-height:1.8;color:#e4e4e7}.code-line{display:block;transition:all .3s ease}.token-tag{color:#8b8b8b}.token-attr{color:#a8daff}.token-class{color:#fbbf24;background:#fbbf241a;padding:2px 6px;border-radius:3px;cursor:pointer;transition:all .3s ease;border:1px solid transparent}.token-class:hover{background:#fbbf2426;border-color:#fbbf244d}.token-text{color:#a3e635}#demoButton{transition:all .4s cubic-bezier(.4,0,.2,1);cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;border:none;outline:none;position:relative;z-index:1}#demoButton:hover{transform:translateY(-2px)!important}@keyframes highlight{0%,to{background:#fbbf241a;border-color:transparent}50%{background:#fbbf2440;border-color:#fbbf2466}}.highlight-class{animation:highlight .6s ease}.blog-content p{margin-bottom:1.5rem}.blog-content h2:not(:first-child){margin-top:3.5rem}.blog-content h2{margin-bottom:1.2rem;font-size:2rem;font-weight:800;color:#1e293b;line-height:1.2;letter-spacing:-.02em}.blog-content h3{margin-top:2.5rem;margin-bottom:1rem;font-size:1.5rem;font-weight:700;color:#334155;line-height:1.3}.blog-content h4{margin-top:2rem;margin-bottom:.8rem;font-size:1.25rem;font-weight:600;color:#475569}.blog-content table{width:100%;border-collapse:collapse;margin:2.5rem 0;font-size:15px;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #0000000d}.blog-content table thead{background:linear-gradient(180deg,#f8fafc,#f1f5f9)}.blog-content table th{padding:16px 20px;text-align:left;font-weight:700;color:#1e293b;border-bottom:2px solid #cbd5e1;font-size:14px;text-transform:uppercase;letter-spacing:.5px}.blog-content table td{padding:14px 20px;border-bottom:1px solid #f1f5f9;color:#475569;vertical-align:top}.blog-content table tbody tr{transition:background-color .2s}.blog-content table tbody tr:hover{background:#f8fafc}.blog-content table tbody tr:last-child td{border-bottom:none}.blog-content table tbody tr:nth-child(2n){background:#fafafa}@media(max-width:768px){.blog-content table{font-size:13px;display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}.blog-content table th,.blog-content table td{padding:10px 12px}}.blog-content pre{background:#1e293b;padding:1.5rem;border-radius:12px;overflow-x:auto;margin:2rem 0;border:1px solid #334155;box-shadow:0 4px 12px #0000001a}.blog-content pre code{font-family:Fira Code,JetBrains Mono,Courier New,monospace;font-size:14px;line-height:1.6;background:transparent;color:#e2e8f0}.blog-content code:not(pre code){background:#f1f5f9;padding:3px 8px;border-radius:4px;font-family:Fira Code,monospace;font-size:.9em;color:#d41212;border:1px solid #e2e8f0}.blog-content ul,.blog-content ol{margin:1.5rem 0;padding-left:2rem}.blog-content ul li,.blog-content ol li{margin-bottom:.8rem;line-height:1.8}.blog-content ul li{list-style-type:disc}.blog-content ol li{list-style-type:decimal}.blog-content blockquote{border-left:4px solid #ff9966;padding:1rem 1.5rem;margin:2rem 0;background:#fff9f5;border-radius:0 8px 8px 0;font-style:italic;color:#5d6879}.blog-content a{color:#f96;text-decoration:underline;transition:color .3s}.blog-content a:hover{color:#1e293b}.blog-content img{max-width:100%;height:auto;border-radius:8px;margin:2rem 0;box-shadow:0 4px 12px #0000001a}.blog-content strong{font-weight:700;color:#1e293b}.blog-content em{font-style:italic}.blog-content hr{border:none;border-top:2px solid #e2e8f0;margin:3rem 0}