:root{--bg-main:#f8f9fa;--bg-card:#fff;--bg-card-hover:#f1f3f5;--text-main:#202122;--text-muted:#54595d;--border:#a2a9b1;--border-light:#eaecf0;--accent-blue:#36c;--accent-blue-hover:#47d;--accent-blue-active:#249;--accent-orange:#d33d33;--accent-yellow:#f8eaba;--font-serif:"Linux Libertine", "Georgia", "Times New Roman", Times, serif;--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Lato, Helvetica, Arial, sans-serif}@media (prefers-color-scheme:dark){:root{--bg-main:#101418;--bg-card:#1f242d;--bg-card-hover:#29303c;--text-main:#e1e3e6;--text-muted:#9aa0a6;--border:#3c424b;--border-light:#2d333b;--accent-blue:#69f;--accent-blue-hover:#8af;--accent-blue-active:#47c;--accent-orange:#f66;--accent-yellow:#2d2615}}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--text-main);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;padding-bottom:80px;line-height:1.6}.container{width:100%;max-width:900px;margin:0 auto;padding:1.5rem 1rem}.app-header{background-color:var(--bg-card);border-bottom:1px solid var(--border);z-index:50;padding:.75rem 0;position:sticky;top:0}.app-header-inner{justify-content:space-between;align-items:center;max-width:900px;margin:0 auto;padding:0 1rem;display:flex}.logo{color:var(--text-main);flex-direction:column;text-decoration:none;display:flex}.logo-title{font-family:var(--font-serif);font-size:1.6rem;font-weight:400;line-height:1.1}.logo-subtitle{color:var(--text-muted);letter-spacing:.5px;font-size:.75rem}.welcome-banner{background-color:var(--bg-card);border:1px solid var(--border);text-align:left;margin-bottom:2rem;padding:1.5rem}.welcome-banner h1{font-family:var(--font-serif);color:var(--text-main);border-bottom:none;margin-bottom:.5rem;font-size:1.8rem;font-weight:400}.card-brutal{background-color:var(--bg-card);border:1px solid var(--border);border-radius:2px;margin-bottom:1.25rem;padding:1.25rem}.card-brutal h3{font-family:var(--font-serif);color:var(--accent-blue);text-transform:none;margin-bottom:.4rem;font-size:1.2rem;font-weight:400}.card-brutal h3:hover{text-decoration:underline}.btn-brutal{background-color:var(--bg-main);color:var(--accent-blue);border:1px solid var(--border);cursor:pointer;border-radius:2px;justify-content:center;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.9rem;font-weight:600;transition:background-color .1s,border-color .1s;display:inline-flex}.btn-brutal:hover{background-color:var(--bg-card-hover);border-color:var(--accent-blue)}.btn-brutal:active{background-color:var(--border-light)}.btn-secondary{background-color:var(--bg-card);color:var(--text-main)}.btn-orange{background-color:var(--accent-blue);color:#fff;border-color:var(--accent-blue)}.btn-orange:hover{background-color:var(--accent-blue-hover);border-color:var(--accent-blue-hover);color:#fff}.badge-brutal{border:1px solid var(--border);text-transform:none;background-color:var(--bg-main);color:var(--text-muted);border-radius:2px;margin-right:.5rem;padding:.2rem .5rem;font-size:.75rem;font-weight:600;display:inline-block}.badge-mint{background-color:var(--bg-main);border-color:var(--accent-blue);color:var(--accent-blue)}.badge-orange{background-color:var(--accent-yellow);border-color:var(--border);color:var(--text-main)}.badge-yellow{background-color:var(--bg-main);border-color:var(--border);color:var(--text-muted)}.tab-bar{background-color:var(--bg-card);border-top:1px solid var(--border);z-index:100;justify-content:space-around;align-items:center;height:60px;display:flex;position:fixed;bottom:0;left:0;right:0}.tab-item{color:var(--text-muted);text-transform:none;cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.2rem;height:100%;font-size:.75rem;font-weight:600;transition:color .1s;display:flex}.tab-item:hover{color:var(--text-main)}.tab-item.active{color:var(--accent-blue);border-top:2px solid var(--accent-blue)}h1{font-family:var(--font-serif);border-bottom:1px solid var(--border);margin-bottom:.8rem;padding-bottom:.25rem;font-size:1.85rem;font-weight:400;line-height:1.2}h2{font-family:var(--font-serif);border-bottom:1px solid var(--border);margin-top:1.5rem;margin-bottom:.8rem;padding-bottom:.2rem;font-size:1.45rem;font-weight:400}h3{font-family:var(--font-serif);margin-bottom:.4rem;font-size:1.15rem;font-weight:400}p{color:var(--text-main);margin-bottom:.8rem;font-size:.95rem}.form-group{margin-bottom:1.25rem}.form-label{margin-bottom:.35rem;font-size:.9rem;font-weight:600;display:block}.form-input,.form-textarea,.form-select{background-color:var(--bg-card);border:1px solid var(--border);width:100%;color:var(--text-main);font-family:var(--font-sans);border-radius:2px;padding:.5rem .75rem;font-size:.95rem}.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--accent-blue);box-shadow:0 0 0 1px var(--accent-blue);outline:none}.search-container{flex-direction:column;gap:.75rem;margin-bottom:1.5rem;display:flex}.search-wrapper{gap:.5rem;display:flex}.search-input{flex:1}.filter-chips{flex-wrap:wrap;gap:.4rem;display:flex}.filter-chip{background:var(--bg-card);border:1px solid var(--border);cursor:pointer;color:var(--text-main);border-radius:2px;padding:.35rem .75rem;font-size:.8rem;font-weight:600;transition:all .1s}.filter-chip:hover{background:var(--bg-main);border-color:var(--accent-blue)}.filter-chip.active{background:var(--accent-blue);color:#fff;border-color:var(--accent-blue)}.step-list{flex-direction:column;gap:.5rem;margin:1.5rem 0;display:flex}.step-item{background-color:var(--bg-card);border:1px solid var(--border-light);cursor:pointer;border-radius:2px;gap:1rem;padding:.85rem 1rem;transition:background-color .1s;display:flex}.step-item:hover{background-color:var(--bg-main)}.step-checkbox-wrapper{align-items:center;display:flex}.step-checkbox{border:1px solid var(--border);background-color:var(--bg-card);width:20px;height:20px;color:var(--accent-blue);border-radius:2px;justify-content:center;align-items:center;font-size:.85rem;font-weight:700;display:flex}.step-item.checked{background-color:var(--bg-main);border-color:var(--border-light)}.step-item.checked .step-checkbox{background-color:var(--accent-blue);border-color:var(--accent-blue);color:#fff}.step-item.checked .step-title{color:var(--text-muted);text-decoration:line-through}.step-number{font-family:var(--font-serif);color:var(--text-muted);min-width:20px;font-size:1.1rem}.step-details{flex-direction:column;gap:.15rem;display:flex}.step-title{color:var(--text-main);font-size:.95rem;font-weight:600}.step-body{color:var(--text-muted);font-size:.9rem}.progress-container{margin:1.25rem 0}.progress-header{justify-content:space-between;margin-bottom:.25rem;font-size:.85rem;font-weight:600;display:flex}.progress-track{background-color:var(--border-light);border:1px solid var(--border);border-radius:2px;height:10px;overflow:hidden}.progress-bar-fill{background-color:var(--accent-blue);height:100%;transition:width .2s ease-out}.sommaire-box{background-color:var(--bg-main);border:1px solid var(--border);border-radius:2px;min-width:250px;margin:1rem 0;padding:.75rem 1rem;display:inline-block}.sommaire-title{text-align:center;border-bottom:1px solid var(--border-light);margin-bottom:.5rem;padding-bottom:.2rem;font-size:.9rem;font-weight:700}.sommaire-list{font-size:.85rem;list-style:none}.sommaire-list li{margin-bottom:.25rem}.sommaire-list a{color:var(--accent-blue);text-decoration:none}.sommaire-list a:hover{text-decoration:underline}.callout-brutal{border:1px solid var(--border);border-left:5px solid var(--accent-blue);background-color:var(--bg-main);border-radius:2px;margin:1rem 0;padding:.85rem 1rem}.callout-brutal:before{content:"";text-transform:none;background-color:#0000;margin-bottom:.25rem;padding:0;font-size:.8rem;font-weight:700;display:block;position:static}.callout-tip{border-left-color:var(--accent-blue);background-color:var(--bg-main)}.callout-tip:before{content:"💡 Note de la communauté :";color:var(--accent-blue)}.callout-warning{border-left-color:var(--accent-orange);background-color:var(--accent-yellow)}.callout-warning:before{content:"⚠️ Attention (Belek !) :";color:var(--accent-orange)}.contrast-container{border:1px solid var(--border);border-radius:2px;grid-template-columns:1fr;margin:1.25rem 0;display:grid;overflow:hidden}@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:1px solid var(--border);background-color:var(--accent-yellow)}@media (width>=550px){.contrast-panel:first-child{border-bottom:none;border-right:1px solid var(--border)}}.contrast-panel:last-child{background-color:var(--bg-main)}.contrast-title{text-transform:uppercase;letter-spacing:.5px;font-size:.8rem;font-weight:700}.contrast-panel:first-child .contrast-title{color:var(--accent-orange)}.contrast-panel:last-child .contrast-title{color:var(--accent-blue)}.ingredients-list{grid-template-columns:1fr;gap:.5rem;margin:1rem 0;display:grid}@media (width>=500px){.ingredients-list{grid-template-columns:1fr 1fr}}.ingredient-card{background-color:var(--bg-card);border:1px solid var(--border-light);border-radius:2px;align-items:center;gap:.75rem;padding:.6rem .8rem;display:flex}.ingredient-icon-box{background-color:var(--bg-main);border:1px solid var(--border);width:32px;height:32px;color:var(--accent-blue);border-radius:2px;place-items:center;display:grid}.ingredient-info{flex-direction:column;display:flex}.ingredient-name{text-transform:none;font-size:.9rem;font-weight:600}.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(--bg-main);color:var(--text-main);border:1px solid var(--border);border-left:5px solid var(--accent-blue);text-align:left;border-radius:2px;margin:1.5rem 0;padding:1.5rem}.victory-box h2{font-family:var(--font-serif);color:var(--accent-blue);border-bottom:none;margin-top:0;margin-bottom:.5rem}.victory-box p{color:var(--text-main);margin-bottom:1rem;font-weight:500}.text-accent-mint{color:var(--accent-blue)}.text-accent-orange{color:var(--accent-orange)}.mt-2{margin-top:2rem}.mb-2{margin-bottom:2rem}.divider-brutal{border:none;border-top:1px solid var(--border);margin:1.5rem 0}
