:root{--bg-main:#090a0f;--bg-card:#12151c;--bg-card-hover:#1a1e27;--text-main:#fff;--text-muted:#8c96a8;--border:#fff;--accent-mint:#0fc;--accent-orange:#ff6b35;--accent-yellow:#ffd000;--border-width:3px;--shadow-offset:4px;--font-system:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--text-main);font-family:var(--font-system);-webkit-font-smoothing:antialiased;padding-bottom:80px;line-height:1.5}.container{width:100%;max-width:800px;margin:0 auto;padding:1.5rem 1rem}.app-header{background-color:var(--bg-card);border-bottom:var(--border-width) solid var(--border);z-index:50;padding:1rem 0;position:sticky;top:0}.app-header-inner{justify-content:space-between;align-items:center;max-width:800px;margin:0 auto;padding:0 1rem;display:flex}.logo{letter-spacing:-1px;text-transform:uppercase;color:var(--text-main);align-items:center;gap:.5rem;font-size:1.5rem;font-weight:900;display:flex}.logo span{color:var(--accent-mint)}.card-brutal{background-color:var(--bg-card);border:var(--border-width) solid var(--border);box-shadow:var(--shadow-offset) var(--shadow-offset) 0px 0px var(--border);margin-bottom:1.25rem;padding:1.25rem;transition:transform .1s,box-shadow .1s;position:relative}.card-brutal:hover{box-shadow:calc(var(--shadow-offset) + 2px) calc(var(--shadow-offset) + 2px) 0px 0px var(--border);transform:translate(-2px,-2px)}.btn-brutal{background-color:var(--accent-mint);color:#000;border:var(--border-width) solid var(--border);text-transform:uppercase;cursor:pointer;box-shadow:var(--shadow-offset) var(--shadow-offset) 0px 0px var(--border);justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-size:.9rem;font-weight:800;transition:transform 50ms,box-shadow 50ms;display:inline-flex}.btn-brutal:active{transform:translate(var(--shadow-offset), var(--shadow-offset));box-shadow:0px 0px 0px 0px var(--border)}.btn-secondary{background-color:var(--bg-main);color:var(--text-main)}.btn-orange{background-color:var(--accent-orange);color:#fff}.badge-brutal{border:2px solid var(--border);text-transform:uppercase;background-color:var(--bg-main);margin-right:.5rem;padding:.25rem .5rem;font-size:.75rem;font-weight:800;display:inline-block}.badge-mint{background-color:var(--accent-mint);color:#000}.badge-orange{background-color:var(--accent-orange);color:#fff}.badge-yellow{background-color:var(--accent-yellow);color:#000}.tab-bar{background-color:var(--bg-card);border-top:var(--border-width) solid var(--border);z-index:100;justify-content:space-around;align-items:center;height:64px;display:flex;position:fixed;bottom:0;left:0;right:0}.tab-item{color:var(--text-muted);text-transform:uppercase;cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.25rem;height:100%;font-size:.7rem;font-weight:700;display:flex}.tab-item.active{color:var(--accent-mint)}h1{letter-spacing:-.04em;text-transform:uppercase;margin-bottom:1rem;font-size:2rem;font-weight:900;line-height:1.1}h2{letter-spacing:-.03em;text-transform:uppercase;margin-bottom:.75rem;font-size:1.5rem;font-weight:900}h3{text-transform:uppercase;margin-bottom:.5rem;font-size:1.15rem;font-weight:800}p{color:var(--text-muted);margin-bottom:.75rem;font-size:.95rem}.form-group{margin-bottom:1.25rem}.form-label{text-transform:uppercase;margin-bottom:.35rem;font-size:.85rem;font-weight:800;display:block}.form-input,.form-textarea,.form-select{background-color:var(--bg-main);border:var(--border-width) solid var(--border);width:100%;color:var(--text-main);font-family:var(--font-system);padding:.75rem;font-size:1rem}.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--accent-mint);outline:none}.search-container{flex-direction:column;gap:1rem;margin-bottom:1.5rem;display:flex}.search-wrapper{gap:.5rem;display:flex}.search-input{flex:1}.filter-chips{flex-wrap:wrap;gap:.5rem;display:flex}.filter-chip{background:var(--bg-card);border:2px solid var(--border);cursor:pointer;padding:.4rem .8rem;font-size:.8rem;font-weight:700}.filter-chip.active{background:var(--accent-mint);color:#000}.step-list{flex-direction:column;gap:1rem;margin:1.5rem 0;display:flex}.step-item{background-color:var(--bg-card);border:var(--border-width) solid var(--border);cursor:pointer;gap:1rem;padding:1rem;transition:transform 50ms;display:flex;position:relative}.step-item:active{transform:translate(1px,1px)}.step-checkbox-wrapper{align-items:center;display:flex}.step-checkbox{border:var(--border-width) solid var(--border);background-color:var(--bg-main);color:#000;justify-content:center;align-items:center;width:24px;height:24px;font-weight:900;display:flex}.step-item.checked{border-color:var(--accent-mint)}.step-item.checked .step-checkbox{background-color:var(--accent-mint)}.step-item.checked .step-title{color:var(--text-muted);text-decoration:line-through}.step-number{color:var(--accent-mint);min-width:24px;font-size:1.25rem;font-weight:900}.step-details{flex-direction:column;gap:.25rem;display:flex}.step-title{text-transform:uppercase;font-size:1rem;font-weight:800}.step-body{color:var(--text-muted);font-size:.9rem}.progress-container{margin:1.25rem 0}.progress-header{text-transform:uppercase;justify-content:space-between;margin-bottom:.35rem;font-size:.85rem;font-weight:800;display:flex}.progress-track{background-color:var(--bg-card);border:var(--border-width) solid var(--border);height:16px;position:relative}.progress-bar-fill{background-color:var(--accent-mint);height:100%;transition:width .2s ease-out}.callout-brutal{border:var(--border-width) solid var(--border);margin:1rem 0;padding:1rem;position:relative}.callout-brutal:before{content:"";text-transform:uppercase;background-color:var(--bg-main);padding:0 4px;font-size:.75rem;font-weight:900;position:absolute;top:-8px;left:12px}.callout-tip{border-color:var(--accent-mint);background-color:#00ffcc0d}.callout-tip:before{content:"Astuce Barlou";color:var(--accent-mint)}.callout-warning{border-color:var(--accent-orange);background-color:#ff6b350d}.callout-warning:before{content:"Belek ! (Attention)";color:var(--accent-orange)}.contrast-container{border:var(--border-width) solid var(--border);grid-template-columns:1fr;margin:1.25rem 0;display:grid}@media (width>=550px){.contrast-container{grid-template-columns:1fr 1fr}}.contrast-panel{flex-direction:column;gap:.25rem;padding:1rem;display:flex}.contrast-panel:first-child{border-bottom:var(--border-width) solid var(--border);background-color:#ff6b350d}@media (width>=550px){.contrast-panel:first-child{border-bottom:none;border-right:var(--border-width) solid var(--border)}}.contrast-panel:last-child{background-color:#00ffcc0d}.contrast-title{text-transform:uppercase;letter-spacing:1px;font-size:.75rem;font-weight:900}.contrast-panel:first-child .contrast-title{color:var(--accent-orange)}.contrast-panel:last-child .contrast-title{color:var(--accent-mint)}.ingredients-list{grid-template-columns:1fr;gap:.75rem;margin:1rem 0;display:grid}@media (width>=500px){.ingredients-list{grid-template-columns:1fr 1fr}}.ingredient-card{background-color:var(--bg-card);border:2px solid var(--border);align-items:center;gap:.75rem;padding:.75rem;display:flex}.ingredient-icon-box{background-color:var(--bg-main);border:2px solid var(--border);width:40px;height:40px;color:var(--accent-mint);place-items:center;display:grid}.ingredient-info{flex-direction:column;display:flex}.ingredient-name{text-transform:uppercase;font-size:.9rem;font-weight:800}.ingredient-amount{color:var(--text-muted);font-size:.8rem}.ingredient-note{color:var(--accent-orange);margin-top:.1rem;font-size:.75rem}.victory-box{background-color:var(--accent-mint);color:#000;border:var(--border-width) solid var(--border);text-align:center;box-shadow:var(--shadow-offset) var(--shadow-offset) 0px 0px var(--border);margin:1.5rem 0;padding:1.5rem}.victory-box h2{color:#000;margin-bottom:.5rem}.victory-box p{color:#000;margin-bottom:1rem;font-weight:600}.text-accent-mint{color:var(--accent-mint)}.text-accent-orange{color:var(--accent-orange)}.mt-2{margin-top:2rem}.mb-2{margin-bottom:2rem}.divider-brutal{border:none;border-top:var(--border-width) solid var(--border);margin:1.5rem 0}