1525 lines
67 KiB
HTML
1525 lines
67 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" class="">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Légumes rôtis au four - Cook</title>
|
||
<link rel="icon" type="image/x-icon" href="../static/favicon.ico">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="../static/favicon-32x32.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="../static/favicon-16x16.png">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="../static/apple-touch-icon.png">
|
||
<link rel="manifest" href="../static/site.webmanifest">
|
||
<link href="../static/css/output.css" rel="stylesheet">
|
||
<link href="../static/css/custom-styles.css" rel="stylesheet">
|
||
<script>
|
||
// Check for saved theme preference, or check for prefers-color-scheme, or default to light
|
||
const theme = localStorage.getItem('theme')
|
||
|| (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
||
document.documentElement.classList.toggle('dark', theme === 'dark');
|
||
</script>
|
||
<style>
|
||
.viewport {
|
||
width: 100%;
|
||
max-width: 72rem;
|
||
margin: 2rem auto;
|
||
padding: 0 1rem;
|
||
}
|
||
|
||
/* Dark mode styles */
|
||
.dark {
|
||
color-scheme: dark;
|
||
}
|
||
|
||
.dark body {
|
||
background-color: #111827;
|
||
}
|
||
|
||
.dark .bg-gray-50 {
|
||
background-color: #111827;
|
||
}
|
||
|
||
.dark .bg-white {
|
||
background-color: #1f2937;
|
||
}
|
||
|
||
.dark .text-gray-900 {
|
||
color: #f9fafb;
|
||
}
|
||
|
||
.dark .text-gray-800 {
|
||
color: #e5e7eb;
|
||
}
|
||
|
||
.dark .text-gray-700 {
|
||
color: #d1d5db;
|
||
}
|
||
|
||
.dark .text-gray-600 {
|
||
color: #9ca3af;
|
||
}
|
||
|
||
.dark .text-gray-500 {
|
||
color: #6b7280;
|
||
}
|
||
|
||
.dark .text-gray-400 {
|
||
color: #9ca3af;
|
||
}
|
||
|
||
.dark .border-gray-300 {
|
||
border-color: #4b5563;
|
||
}
|
||
|
||
.dark .border-gray-200 {
|
||
border-color: #374151;
|
||
}
|
||
|
||
.dark .border-purple-200 {
|
||
border-color: #7c3aed;
|
||
}
|
||
|
||
.dark .hover\:text-gray-900:hover {
|
||
color: #f9fafb;
|
||
}
|
||
|
||
.dark .hover\:text-gray-800:hover {
|
||
color: #e5e7eb;
|
||
}
|
||
|
||
.dark .hover\:bg-gray-50:hover {
|
||
background-color: #374151;
|
||
}
|
||
|
||
.dark .hover\:bg-gray-100:hover {
|
||
background-color: #374151;
|
||
}
|
||
|
||
.dark .bg-gradient-to-r.from-orange-50.to-yellow-50 {
|
||
background: linear-gradient(to right, #1f2937, #111827);
|
||
border: 1px solid #374151;
|
||
}
|
||
|
||
.dark .bg-gradient-to-r.from-gray-50.to-orange-50 {
|
||
background: linear-gradient(to right, #1f2937, #111827);
|
||
border: 1px solid #374151;
|
||
}
|
||
|
||
.dark .bg-gradient-to-r.from-green-50.to-blue-50 {
|
||
background: linear-gradient(to right, #1f2937, #111827);
|
||
border: 1px solid #374151;
|
||
}
|
||
|
||
.dark .bg-gradient-to-r.from-blue-50.to-purple-50 {
|
||
background: linear-gradient(to right, #1f2937, #111827);
|
||
border: 1px solid #374151;
|
||
}
|
||
|
||
/* Shopping list specific dark styles */
|
||
.dark .bg-gradient-to-r.from-purple-50.to-pink-50 {
|
||
background: linear-gradient(to right, #1f2937, #111827);
|
||
border: 1px solid #374151;
|
||
}
|
||
|
||
.dark .bg-gradient-to-r.from-green-50.to-emerald-50 {
|
||
background: linear-gradient(to right, #1f2937, #111827);
|
||
border: 1px solid #374151;
|
||
}
|
||
|
||
/* Plan cards in the shopping list use an indigo/purple gradient */
|
||
.dark .bg-gradient-to-r.from-indigo-50.to-purple-50 {
|
||
background: linear-gradient(to right, #1f2937, #111827);
|
||
border: 1px solid #374151;
|
||
}
|
||
|
||
.dark .border-indigo-200 {
|
||
border-color: #4c1d95;
|
||
}
|
||
|
||
.dark .border-purple-200 {
|
||
border-color: #4c1d95;
|
||
}
|
||
|
||
.dark .border-green-200 {
|
||
border-color: #065f46;
|
||
}
|
||
|
||
.dark .border-orange-200 {
|
||
border-color: #7c2d12;
|
||
}
|
||
|
||
.dark .border-blue-400 {
|
||
border-color: #1e3a8a;
|
||
}
|
||
|
||
/* Dark mode hover states */
|
||
.dark .hover\:bg-gradient-to-r:hover {
|
||
background: #374151 !important;
|
||
}
|
||
|
||
.dark .hover\:from-purple-50:hover,
|
||
.dark .hover\:to-pink-50:hover {
|
||
background: #374151 !important;
|
||
}
|
||
|
||
.dark .hover\:from-orange-100:hover,
|
||
.dark .hover\:to-amber-100:hover {
|
||
background: #374151 !important;
|
||
}
|
||
|
||
.dark .hover\:from-purple-100:hover,
|
||
.dark .hover\:to-pink-100:hover {
|
||
background: #374151 !important;
|
||
}
|
||
|
||
.dark a.hover\:bg-gradient-to-r:hover {
|
||
background: #374151 !important;
|
||
color: #e5e7eb !important;
|
||
}
|
||
|
||
/* Fix for navigation pill hover states */
|
||
.dark a[href="../"].hover\:bg-gradient-to-r:hover {
|
||
background: #374151 !important;
|
||
}
|
||
|
||
.dark .hover\:text-orange-700:hover {
|
||
color: #fb923c !important;
|
||
}
|
||
|
||
.dark .hover\:text-purple-700:hover {
|
||
color: #a78bfa !important;
|
||
}
|
||
|
||
/* Nav pill dark mode */
|
||
.dark .nav-pill {
|
||
color: #9ca3af;
|
||
}
|
||
|
||
.dark .nav-pill:hover {
|
||
background: #374151;
|
||
color: #fb923c;
|
||
}
|
||
|
||
.dark .nav-pill.active {
|
||
background: linear-gradient(135deg, #ff6b35, #f97316);
|
||
color: white;
|
||
}
|
||
|
||
/* Button dark mode styles */
|
||
.dark .bg-gray-200 {
|
||
background-color: #4b5563;
|
||
}
|
||
|
||
.dark .hover\:bg-gray-300:hover {
|
||
background-color: #6b7280;
|
||
}
|
||
|
||
.dark .bg-gray-200.text-gray-700 {
|
||
color: #e5e7eb;
|
||
}
|
||
|
||
/* Text colors in various contexts */
|
||
.dark .text-purple-600 {
|
||
color: #c084fc;
|
||
}
|
||
|
||
.dark .text-red-500 {
|
||
color: #ef4444;
|
||
}
|
||
|
||
.dark .hover\:text-red-700:hover {
|
||
color: #dc2626;
|
||
}
|
||
|
||
.dark .text-green-600 {
|
||
color: #34d399;
|
||
}
|
||
|
||
.dark .shadow-lg, .dark .shadow-md, .dark .shadow-xl {
|
||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
/* Dark mode tag and badge styles */
|
||
.dark .bg-gradient-to-r.from-yellow-100.to-orange-100 {
|
||
background: linear-gradient(to right, #374151, #4b5563);
|
||
}
|
||
|
||
.dark .text-orange-700 {
|
||
color: #fb923c;
|
||
}
|
||
|
||
.dark .text-orange-600 {
|
||
color: #fb923c;
|
||
}
|
||
|
||
.dark .bg-gradient-to-r.from-purple-100.to-pink-100 {
|
||
background: linear-gradient(to right, #374151, #4b5563);
|
||
}
|
||
|
||
.dark .text-purple-700 {
|
||
color: #a78bfa;
|
||
}
|
||
|
||
.dark .bg-gray-100 {
|
||
background-color: #374151;
|
||
}
|
||
|
||
/* Recipe card specific dark styles */
|
||
.dark .recipe-card {
|
||
background-color: #1f2937;
|
||
border: 1px solid #374151;
|
||
}
|
||
|
||
/* Search result keyboard selection */
|
||
#search-results a.search-selected {
|
||
background: linear-gradient(to right, #f3e8ff, #fce7f3) !important;
|
||
}
|
||
|
||
/* Search results dark mode */
|
||
.dark #search-results {
|
||
background-color: #1f2937;
|
||
border-color: #7c3aed;
|
||
}
|
||
|
||
.dark #search-results a {
|
||
color: #e5e7eb;
|
||
}
|
||
|
||
.dark #search-results a:hover,
|
||
.dark #search-results a.search-selected {
|
||
background-color: #374151 !important;
|
||
}
|
||
|
||
.dark #search-results .text-gray-800 {
|
||
color: #e5e7eb;
|
||
}
|
||
|
||
.dark #search-results .text-gray-500 {
|
||
color: #9ca3af;
|
||
}
|
||
|
||
/* Override inline hover styles in search results */
|
||
.dark #search-results a.hover\:bg-gradient-to-r:hover {
|
||
background: #374151 !important;
|
||
}
|
||
|
||
.dark #search-results .border-gray-100 {
|
||
border-color: #374151;
|
||
}
|
||
|
||
.dark #search-input {
|
||
background-color: #374151;
|
||
border-color: #7c3aed;
|
||
color: #e5e7eb;
|
||
}
|
||
|
||
.dark #search-input::placeholder {
|
||
color: #6b7280;
|
||
}
|
||
|
||
.dark #search-input:focus {
|
||
border-color: #a78bfa;
|
||
}
|
||
|
||
/* Theme toggle button styles */
|
||
.theme-toggle {
|
||
position: relative;
|
||
width: 50px;
|
||
height: 24px;
|
||
background-color: #9ca3af;
|
||
border-radius: 12px;
|
||
padding: 2px;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
.theme-toggle.dark {
|
||
background-color: #7c3aed;
|
||
}
|
||
|
||
.theme-toggle-handle {
|
||
position: absolute;
|
||
top: 2px;
|
||
left: 2px;
|
||
width: 20px;
|
||
height: 20px;
|
||
background-color: white;
|
||
border-radius: 50%;
|
||
transition: transform 0.3s;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.theme-toggle.dark .theme-toggle-handle {
|
||
transform: translateX(26px);
|
||
}
|
||
|
||
@media print {
|
||
/* Reset color-scheme so browser default text color is dark, not
|
||
light. Without this, elements without an explicit text color
|
||
(e.g. ingredient/cookware names) inherit the dark-mode default
|
||
white text and become invisible on the forced white background. */
|
||
html, html.dark {
|
||
color-scheme: light !important;
|
||
}
|
||
|
||
/* Default text color for dark mode when printing */
|
||
.dark,
|
||
.dark body {
|
||
color: #111827 !important;
|
||
}
|
||
|
||
/* Force light mode for printing */
|
||
.dark body,
|
||
.dark .bg-gray-50,
|
||
.dark .bg-white,
|
||
.dark .bg-gray-100 {
|
||
background-color: white !important;
|
||
}
|
||
|
||
.dark .text-gray-900, .dark h1, .dark h2, .dark h3 {
|
||
color: #111827 !important;
|
||
}
|
||
|
||
.dark .text-gray-800 {
|
||
color: #1f2937 !important;
|
||
}
|
||
|
||
.dark .text-gray-700,
|
||
.dark .text-gray-600 {
|
||
color: #374151 !important;
|
||
}
|
||
|
||
.dark .text-orange-600, .dark .text-orange-700 {
|
||
color: #c2410c !important;
|
||
}
|
||
|
||
.dark .text-green-600 {
|
||
color: #16a34a !important;
|
||
}
|
||
|
||
.dark .text-purple-600 {
|
||
color: #9333ea !important;
|
||
}
|
||
|
||
.dark .text-red-500 {
|
||
color: #ef4444 !important;
|
||
}
|
||
|
||
.dark .border-gray-200, .dark .border-gray-300 {
|
||
border-color: #e5e7eb !important;
|
||
}
|
||
|
||
.dark .shadow-lg, .dark .shadow-md, .dark .shadow-xl {
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.dark .bg-gradient-to-r {
|
||
background: transparent !important;
|
||
border-color: #e5e7eb !important;
|
||
}
|
||
|
||
.dark .recipe-card {
|
||
background-color: white !important;
|
||
border-color: #e5e7eb !important;
|
||
}
|
||
|
||
/* Dark mode badges must be readable when printed */
|
||
.dark .ingredient-badge {
|
||
background: #fef3c7 !important;
|
||
color: #9a3412 !important;
|
||
border-color: #fb923c !important;
|
||
}
|
||
|
||
.dark .cookware-badge {
|
||
background: #dcfce7 !important;
|
||
color: #14532d !important;
|
||
border-color: #4ade80 !important;
|
||
}
|
||
|
||
.dark .timer-badge {
|
||
background: #fee2e2 !important;
|
||
color: #7f1d1d !important;
|
||
border-color: #f87171 !important;
|
||
}
|
||
|
||
.dark .step-number {
|
||
background: #f97316 !important;
|
||
color: white !important;
|
||
}
|
||
|
||
.dark .tag {
|
||
background: linear-gradient(135deg, #fbbf24, #fb923c) !important;
|
||
color: white !important;
|
||
}
|
||
|
||
.dark .metadata-pill {
|
||
background: white !important;
|
||
color: #374151 !important;
|
||
}
|
||
|
||
/* Global print styles */
|
||
* {
|
||
print-color-adjust: exact;
|
||
-webkit-print-color-adjust: exact;
|
||
}
|
||
|
||
body {
|
||
background: white !important;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.viewport {
|
||
max-width: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* Hide navigation and non-essential elements */
|
||
nav, #search-container, #search-input, #search-results, .print\:hidden, .breadcrumb {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Hide entire navigation bar and its contents */
|
||
.bg-white.shadow-lg.rounded-2xl.mb-8 {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Hide all navigation links */
|
||
a[href="../"] {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Recipe layout for print */
|
||
.grid {
|
||
display: block !important;
|
||
}
|
||
|
||
/* Remove shadows and borders for cleaner print */
|
||
.shadow-lg, .shadow-md, .shadow-xl {
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.rounded-2xl, .rounded-xl, .rounded-lg {
|
||
border-radius: 0 !important;
|
||
}
|
||
|
||
/* Optimize colors for print */
|
||
.bg-gradient-to-r {
|
||
background: transparent !important;
|
||
}
|
||
|
||
.text-orange-600, .text-orange-700 {
|
||
color: #000 !important;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.text-green-600 {
|
||
color: #000 !important;
|
||
}
|
||
|
||
/* Page breaks */
|
||
.md\:col-span-1, .md\:col-span-2 {
|
||
page-break-inside: avoid;
|
||
width: 100% !important;
|
||
}
|
||
|
||
/* Ingredient and step styling */
|
||
.bg-gradient-to-r.from-orange-50,
|
||
.bg-gradient-to-r.from-green-50,
|
||
.bg-gradient-to-r.from-gray-50,
|
||
.bg-gradient-to-r.from-blue-50,
|
||
.dark .bg-gradient-to-r.from-orange-50,
|
||
.dark .bg-gradient-to-r.from-green-50,
|
||
.dark .bg-gradient-to-r.from-gray-50,
|
||
.dark .bg-gradient-to-r.from-blue-50 {
|
||
background: #f9f9f9 !important;
|
||
border: 1px solid #ddd !important;
|
||
}
|
||
|
||
/* Step numbers */
|
||
.step-number {
|
||
background: #000 !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
/* Images */
|
||
img {
|
||
max-height: 300px !important;
|
||
max-width: 100% !important;
|
||
height: auto !important;
|
||
object-fit: contain !important;
|
||
page-break-inside: avoid;
|
||
page-break-after: avoid;
|
||
}
|
||
|
||
/* Recipe sections on same page if possible */
|
||
h2, h3 {
|
||
page-break-after: avoid;
|
||
}
|
||
|
||
ol, ul {
|
||
page-break-inside: avoid;
|
||
}
|
||
|
||
/* Compact spacing */
|
||
.mb-8, .mb-6, .mb-4 {
|
||
margin-bottom: 0.5rem !important;
|
||
}
|
||
|
||
.p-6 {
|
||
padding: 0.5rem !important;
|
||
}
|
||
|
||
/* Recipe header */
|
||
h1 {
|
||
color: #000 !important;
|
||
font-size: 1.5rem !important;
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
/* Print-specific flexbox utilities */
|
||
.print\:flex-row {
|
||
flex-direction: row !important;
|
||
}
|
||
|
||
.print\:items-center {
|
||
align-items: center !important;
|
||
}
|
||
|
||
.print\:block {
|
||
display: block !important;
|
||
}
|
||
|
||
.print\:text-2xl {
|
||
font-size: 1.5rem !important;
|
||
}
|
||
|
||
/* Ensure ingredients and instructions stay together */
|
||
.bg-white {
|
||
background: white !important;
|
||
border: none !important;
|
||
}
|
||
|
||
/* Remove truncation in print so text is fully visible */
|
||
.truncate {
|
||
overflow: visible !important;
|
||
text-overflow: unset !important;
|
||
white-space: normal !important;
|
||
max-width: none !important;
|
||
display: inline !important;
|
||
}
|
||
|
||
/* Shopping list print styles */
|
||
.lg\:w-2\/5, .xl\:w-1\/3 {
|
||
display: none !important;
|
||
}
|
||
|
||
/* Only apply flex override to top-level shopping list layout */
|
||
#shopping-list-results ~ .flex-1,
|
||
.flex.min-h-screen > .flex-1 {
|
||
width: 100% !important;
|
||
flex: none !important;
|
||
}
|
||
|
||
#shopping-list-results {
|
||
font-size: 11pt !important;
|
||
line-height: 1.2 !important;
|
||
}
|
||
|
||
#shopping-list-results input[type="checkbox"] {
|
||
display: none !important;
|
||
}
|
||
|
||
#shopping-list-results li .flex-1 {
|
||
width: auto !important;
|
||
flex: 1 1 0% !important;
|
||
}
|
||
|
||
#shopping-list-results label {
|
||
cursor: default !important;
|
||
}
|
||
|
||
#shopping-list-results h2 {
|
||
font-size: 14pt !important;
|
||
margin-bottom: 0.1rem !important;
|
||
}
|
||
|
||
#shopping-list-results h3 {
|
||
font-size: 11pt !important;
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
#shopping-list-results .space-y-2,
|
||
#shopping-list-results ul {
|
||
gap: 0 !important;
|
||
--tw-space-y-reverse: 0 !important;
|
||
}
|
||
|
||
#shopping-list-results .space-y-2 > * + *,
|
||
#shopping-list-results ul > * + * {
|
||
margin-top: 0 !important;
|
||
}
|
||
|
||
#shopping-list-results li {
|
||
padding: 0 !important;
|
||
line-height: 1.3 !important;
|
||
border-bottom: 1px dotted #ccc;
|
||
}
|
||
|
||
#shopping-list-results .mb-6 {
|
||
margin-bottom: 0.15rem !important;
|
||
}
|
||
|
||
#shopping-list-results .mb-4,
|
||
#shopping-list-results .mb-3 {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
#shopping-list-results .p-4,
|
||
#shopping-list-results .p-3,
|
||
#shopping-list-results .px-3 {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
#shopping-list-results .gap-6 {
|
||
gap: 0 !important;
|
||
}
|
||
|
||
#shopping-list-results .rounded-lg {
|
||
border: none !important;
|
||
}
|
||
|
||
/* Menu print styles */
|
||
#menu-content {
|
||
font-size: 10pt !important;
|
||
line-height: 1.4 !important;
|
||
}
|
||
|
||
#menu-content h1 {
|
||
font-size: 14pt !important;
|
||
margin-bottom: 0.25rem !important;
|
||
color: #000 !important;
|
||
-webkit-text-fill-color: #000 !important;
|
||
}
|
||
|
||
#menu-content .space-y-6 > * + * {
|
||
margin-top: 0.3rem !important;
|
||
}
|
||
|
||
#menu-content .menu-section {
|
||
border: 1px solid #ccc !important;
|
||
border-radius: 0 !important;
|
||
page-break-inside: avoid;
|
||
}
|
||
|
||
#menu-content .menu-section-header {
|
||
background: #eee !important;
|
||
color: #000 !important;
|
||
padding: 0.15rem 0.5rem !important;
|
||
}
|
||
|
||
#menu-content .menu-section-header h2 {
|
||
font-size: 11pt !important;
|
||
color: #000 !important;
|
||
}
|
||
|
||
#menu-content .menu-section-body {
|
||
padding: 0.25rem 0.5rem !important;
|
||
}
|
||
|
||
#menu-content .menu-section-body .space-y-2 > * + *,
|
||
#menu-content .menu-section-body > * + * {
|
||
margin-top: 0.05rem !important;
|
||
}
|
||
|
||
#menu-content .menu-section-body h3 {
|
||
font-size: 10pt !important;
|
||
margin-top: 0.2rem !important;
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
#menu-content .menu-section-body .pl-6 {
|
||
padding-left: 1rem !important;
|
||
}
|
||
|
||
/* Preserve word spacing in flex lines */
|
||
#menu-content .menu-section-body .flex {
|
||
gap: 0.25em !important;
|
||
}
|
||
|
||
#menu-content .ingredient-badge {
|
||
background: transparent !important;
|
||
border: none !important;
|
||
padding: 0 !important;
|
||
font-weight: bold !important;
|
||
color: #000 !important;
|
||
}
|
||
|
||
#menu-content a {
|
||
color: #000 !important;
|
||
text-decoration: none !important;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-50">
|
||
<div class="viewport">
|
||
<nav class="bg-white shadow-lg rounded-2xl mb-8 relative">
|
||
<div class="px-3 lg:px-6 py-4 relative">
|
||
<div class="flex items-center justify-between flex-wrap gap-y-3">
|
||
<a href="../index.html" class="order-1 hidden md:flex items-center space-x-2">
|
||
<img src="../static/android-chrome-192x192.png" alt="Cook" class="h-8 w-8 rounded-md dark:bg-gray-200 dark:p-0.5" width="32" height="32">
|
||
</a>
|
||
|
||
<div class="relative z-50 order-2 flex-1 md:ml-2 md:mr-4" id="search-container">
|
||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||
<svg class="h-5 w-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||
</svg>
|
||
</div>
|
||
<input type="text"
|
||
id="search-input"
|
||
placeholder="Rechercher des recettes..."
|
||
class="w-full pl-10 pr-4 py-2.5 bg-white border-2 border-purple-200 rounded-xl text-gray-900 placeholder-gray-500 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 focus:outline-hidden transition-all shadow-md hover:shadow-lg">
|
||
<div id="search-results"
|
||
class="absolute top-full mt-2 w-full bg-white border-2 border-purple-200 rounded-xl shadow-xl hidden max-h-96 overflow-y-auto"
|
||
style="z-index: 9999;">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="order-3 w-full md:w-auto flex items-center gap-1 lg:gap-2">
|
||
|
||
<div class="hidden md:flex items-center gap-1 mr-2 lg:mr-4">
|
||
<a href="../index.html"
|
||
class="nav-pill active">
|
||
Recettes
|
||
</a>
|
||
|
||
|
||
</div>
|
||
|
||
<!-- Inline buttons on md+ screens -->
|
||
|
||
<button onclick="showShortcutsHelp()" class="hidden md:inline-flex ml-2 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors print:hidden" aria-label="Keyboard shortcuts" title="Keyboard shortcuts (?)">
|
||
<svg class="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||
</svg>
|
||
</button>
|
||
<button onclick="toggleTheme()" class="hidden md:inline-flex ml-2 p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors print:hidden" aria-label="Toggle theme">
|
||
<svg class="w-5 h-5 hidden dark:block text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
|
||
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path>
|
||
</svg>
|
||
<svg class="w-5 h-5 block dark:hidden text-gray-700" fill="currentColor" viewBox="0 0 20 20">
|
||
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
|
||
</svg>
|
||
</button>
|
||
<!-- Overflow menu for small screens -->
|
||
<div class="relative md:hidden ml-auto" id="more-menu-container">
|
||
<button onclick="document.getElementById('more-dropdown').classList.toggle('hidden')" class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors" aria-label="More options">
|
||
<svg class="w-5 h-5 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
|
||
</svg>
|
||
</button>
|
||
<div id="more-dropdown" class="hidden absolute right-0 mt-2 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl z-50 py-1">
|
||
|
||
<a href="../index.html" class="flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors font-semibold text-orange-600">
|
||
<span>🍳</span> <span>Recettes</span>
|
||
</a>
|
||
|
||
|
||
<div class="border-t border-gray-100 dark:border-gray-700 my-1"></div>
|
||
|
||
|
||
<button onclick="showShortcutsHelp(); document.getElementById('more-dropdown').classList.add('hidden');" class="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||
<span>Keyboard Shortcuts</span>
|
||
</button>
|
||
<button onclick="toggleTheme(); document.getElementById('more-dropdown').classList.add('hidden');" class="flex items-center gap-3 w-full px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
||
<svg class="w-4 h-4 hidden dark:block text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path></svg>
|
||
<svg class="w-4 h-4 block dark:hidden" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
|
||
<span>Toggle Theme</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<main>
|
||
|
||
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Recipe","cookTime":"PT1H","description":"Bords caramélisés, cœur fondant. Une grande plaque pour la semaine.","keywords":"batch, four, légumes","name":"Légumes rôtis au four","prepTime":"PT10M","recipeCategory":"accompagnement","recipeIngredient":["1 tête ail (gousses entières, en chemise)","betterave","carottes","chou-fleur","courge","huile d'olive","oignons rouges","panais","patate douce","poivre","pommes de terre","sel","épices (cumin, paprika, curry, herbes de Provence, romarin)"],"recipeInstructions":[{"@type":"HowToStep","text":"Préchauffer le four à 200°C."},{"@type":"HowToStep","text":"Couper en gros morceaux réguliers de 3-4 cm les légumes qui tiennent : pommes de terre, patate douce, carottes, panais, courge, betterave, chou-fleur, oignons rouges. Réguliers = tout cuit à la même vitesse."},{"@type":"HowToStep","text":"Mélanger dans un saladier avec beaucoup d'huile d'olive, sel, poivre, les épices et l'ail. Chaque morceau doit être luisant."},{"@type":"HowToStep","text":"Étaler en une seule couche sur une plaque, sans que ça se chevauche."},{"@type":"HowToStep","text":"Enfourner 45 minutes à 1 h, en remuant une fois à mi-cuisson. Fini quand les bords sont dorés et qu'un couteau traverse sans résistance."}],"recipeYield":"6"}</script>
|
||
|
||
<div>
|
||
<nav class="mb-4 breadcrumb print:hidden">
|
||
<ol class="flex items-center space-x-2 text-sm text-gray-600">
|
||
<li><a href="../index.html" class="hover:text-gray-900">Recettes</a></li>
|
||
|
||
<li class="flex items-center">
|
||
<span class="mx-2 text-gray-400">/</span>
|
||
|
||
<span class="text-gray-900">legumes_rotis</span>
|
||
|
||
</li>
|
||
|
||
</ol>
|
||
</nav>
|
||
|
||
<div class="mb-8">
|
||
<!-- Recipe image if available -->
|
||
|
||
|
||
|
||
<!-- Title bar with scale and shopping list button -->
|
||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6 print:flex-row print:items-center">
|
||
<h1 class="text-3xl md:text-4xl font-bold bg-gradient-to-r from-orange-600 to-yellow-600 bg-clip-text text-transparent print:text-2xl">
|
||
Légumes rôtis au four
|
||
</h1>
|
||
|
||
<div class="flex flex-wrap items-center gap-2 lg:gap-3 print:hidden">
|
||
|
||
<button id="start-cooking-btn"
|
||
onclick="startCookingMode()"
|
||
class="px-3 lg:px-4 py-2 text-sm lg:text-base bg-gradient-to-r from-green-500 to-emerald-500 text-white rounded-lg hover:from-green-600 hover:to-emerald-600 transition-all shadow-md flex items-center gap-1.5 lg:gap-2 whitespace-nowrap print:hidden"
|
||
title="Start Cooking">
|
||
<svg class="w-4 h-4 lg:w-5 lg:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||
</svg>
|
||
<span class="hidden lg:inline">Cook</span>
|
||
</button>
|
||
|
||
<a href="../recipe/legumes_rotis.cook"
|
||
download
|
||
class="px-3 lg:px-4 py-2 text-sm lg:text-base bg-gradient-to-r from-gray-600 to-gray-700 text-white rounded-lg hover:from-gray-700 hover:to-gray-800 transition-all shadow-md flex items-center gap-1.5 lg:gap-2 whitespace-nowrap"
|
||
title="Download .cook source">
|
||
<svg class="w-4 h-4 lg:w-5 lg:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"></path>
|
||
</svg>
|
||
<span class="hidden lg:inline">.cook</span>
|
||
</a>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Recipe info section -->
|
||
<div class="space-y-4">
|
||
<!-- Tags row -->
|
||
|
||
<div class="flex flex-wrap gap-2">
|
||
|
||
<span class="tag">#batch</span>
|
||
|
||
<span class="tag">#four</span>
|
||
|
||
<span class="tag">#légumes</span>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<!-- Description if present -->
|
||
|
||
<div class="bg-gradient-to-r from-orange-50 to-yellow-50 p-4 rounded-xl border border-orange-200">
|
||
<p class="text-gray-700 italic">Bords caramélisés, cœur fondant. Une grande plaque pour la semaine.</p>
|
||
</div>
|
||
|
||
|
||
<!-- Metadata row -->
|
||
<div id="metadata-container" class="flex flex-wrap gap-3">
|
||
<!-- Display all metadata items -->
|
||
|
||
|
||
<span class="metadata-pill metadata-servings">👥 6 portions</span>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<span class="metadata-pill metadata-course">🍽️ accompagnement</span>
|
||
|
||
|
||
|
||
<span class="metadata-pill metadata-prep">⏱️ Temps de Préparation: 10 minutes</span>
|
||
|
||
|
||
|
||
<span class="metadata-pill metadata-cook">🔥 Temps de Cuisson: 1 hour</span>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<!-- Custom metadata -->
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-3 gap-8 mb-8">
|
||
<div class="md:col-span-1">
|
||
<div class="bg-white rounded-2xl shadow-lg p-6">
|
||
<h2 class="text-xl font-bold mb-4 text-orange-600">🥘 Ingrédients</h2>
|
||
|
||
|
||
<!-- Display ingredients grouped by section -->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<ul class="space-y-3 mb-4">
|
||
|
||
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
||
<div class="flex-1 flex items-center">
|
||
|
||
<span class="font-medium">ail</span>
|
||
|
||
|
||
<span class="text-sm text-gray-600 italic ml-1 break-words" aria-label="préparation: gousses entières, en chemise">(gousses entières, en chemise)</span>
|
||
|
||
</div>
|
||
<span class="text-orange-700 font-semibold ml-2">
|
||
1 tête
|
||
|
||
</span>
|
||
</li>
|
||
|
||
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
||
<div class="flex-1 flex items-center">
|
||
|
||
<span class="font-medium">betterave</span>
|
||
|
||
|
||
|
||
</div>
|
||
<span class="text-orange-700 font-semibold ml-2">
|
||
|
||
|
||
</span>
|
||
</li>
|
||
|
||
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
||
<div class="flex-1 flex items-center">
|
||
|
||
<span class="font-medium">carottes</span>
|
||
|
||
|
||
|
||
</div>
|
||
<span class="text-orange-700 font-semibold ml-2">
|
||
|
||
|
||
</span>
|
||
</li>
|
||
|
||
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
||
<div class="flex-1 flex items-center">
|
||
|
||
<span class="font-medium">chou-fleur</span>
|
||
|
||
|
||
|
||
</div>
|
||
<span class="text-orange-700 font-semibold ml-2">
|
||
|
||
|
||
</span>
|
||
</li>
|
||
|
||
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
||
<div class="flex-1 flex items-center">
|
||
|
||
<span class="font-medium">courge</span>
|
||
|
||
|
||
|
||
</div>
|
||
<span class="text-orange-700 font-semibold ml-2">
|
||
|
||
|
||
</span>
|
||
</li>
|
||
|
||
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
||
<div class="flex-1 flex items-center">
|
||
|
||
<span class="font-medium">huile d'olive</span>
|
||
|
||
|
||
|
||
</div>
|
||
<span class="text-orange-700 font-semibold ml-2">
|
||
|
||
|
||
</span>
|
||
</li>
|
||
|
||
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
||
<div class="flex-1 flex items-center">
|
||
|
||
<span class="font-medium">oignons rouges</span>
|
||
|
||
|
||
|
||
</div>
|
||
<span class="text-orange-700 font-semibold ml-2">
|
||
|
||
|
||
</span>
|
||
</li>
|
||
|
||
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
||
<div class="flex-1 flex items-center">
|
||
|
||
<span class="font-medium">panais</span>
|
||
|
||
|
||
|
||
</div>
|
||
<span class="text-orange-700 font-semibold ml-2">
|
||
|
||
|
||
</span>
|
||
</li>
|
||
|
||
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
||
<div class="flex-1 flex items-center">
|
||
|
||
<span class="font-medium">patate douce</span>
|
||
|
||
|
||
|
||
</div>
|
||
<span class="text-orange-700 font-semibold ml-2">
|
||
|
||
|
||
</span>
|
||
</li>
|
||
|
||
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
||
<div class="flex-1 flex items-center">
|
||
|
||
<span class="font-medium">poivre</span>
|
||
|
||
|
||
|
||
</div>
|
||
<span class="text-orange-700 font-semibold ml-2">
|
||
|
||
|
||
</span>
|
||
</li>
|
||
|
||
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
||
<div class="flex-1 flex items-center">
|
||
|
||
<span class="font-medium">pommes de terre</span>
|
||
|
||
|
||
|
||
</div>
|
||
<span class="text-orange-700 font-semibold ml-2">
|
||
|
||
|
||
</span>
|
||
</li>
|
||
|
||
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
||
<div class="flex-1 flex items-center">
|
||
|
||
<span class="font-medium">sel</span>
|
||
|
||
|
||
|
||
</div>
|
||
<span class="text-orange-700 font-semibold ml-2">
|
||
|
||
|
||
</span>
|
||
</li>
|
||
|
||
<li class="flex justify-between items-center bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg px-3 py-2">
|
||
<div class="flex-1 flex items-center">
|
||
|
||
<span class="font-medium">épices</span>
|
||
|
||
|
||
<span class="text-sm text-gray-600 italic ml-1 break-words" aria-label="préparation: cumin, paprika, curry, herbes de Provence, romarin">(cumin, paprika, curry, herbes de Provence, romarin)</span>
|
||
|
||
</div>
|
||
<span class="text-orange-700 font-semibold ml-2">
|
||
|
||
|
||
</span>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<h2 class="text-xl font-bold mt-6 mb-4 text-green-600">🍳 Ustensiles</h2>
|
||
<ul class="cookware-list space-y-2">
|
||
|
||
<li class="bg-gradient-to-r from-green-50 to-blue-50 rounded-lg px-3 py-2">
|
||
<span class="font-medium">four</span>
|
||
</li>
|
||
|
||
<li class="bg-gradient-to-r from-green-50 to-blue-50 rounded-lg px-3 py-2">
|
||
<span class="font-medium">saladier</span>
|
||
</li>
|
||
|
||
<li class="bg-gradient-to-r from-green-50 to-blue-50 rounded-lg px-3 py-2">
|
||
<span class="font-medium">plaque</span>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="md:col-span-2">
|
||
<div class="bg-white rounded-2xl shadow-lg p-6">
|
||
|
||
|
||
|
||
|
||
<ol class="space-y-4 ">
|
||
|
||
|
||
<li class="bg-gradient-to-r from-gray-50 to-orange-50 rounded-xl p-4">
|
||
<div class="flex flex-col gap-4">
|
||
|
||
|
||
<div class="flex gap-4">
|
||
<div class="step-number">1</div>
|
||
<div class="flex-1">
|
||
<div class="text-gray-700 mb-2 leading-8">
|
||
|
||
Préchauffer le
|
||
<span class="cookware-badge">four</span>
|
||
à 200°C.
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="bg-gradient-to-r from-gray-50 to-orange-50 rounded-xl p-4">
|
||
<div class="flex flex-col gap-4">
|
||
|
||
|
||
<div class="flex gap-4">
|
||
<div class="step-number">2</div>
|
||
<div class="flex-1">
|
||
<div class="text-gray-700 mb-2 leading-8">
|
||
|
||
Couper en gros morceaux réguliers de 3-4 cm les légumes qui tiennent :
|
||
<span class="ingredient-badge">pommes de terre</span>
|
||
,
|
||
<span class="ingredient-badge">patate douce</span>
|
||
,
|
||
<span class="ingredient-badge">carottes</span>
|
||
,
|
||
<span class="ingredient-badge">panais</span>
|
||
,
|
||
<span class="ingredient-badge">courge</span>
|
||
,
|
||
<span class="ingredient-badge">betterave</span>
|
||
,
|
||
<span class="ingredient-badge">chou-fleur</span>
|
||
,
|
||
<span class="ingredient-badge">oignons rouges</span>
|
||
. Réguliers = tout cuit à la même vitesse.
|
||
</div>
|
||
|
||
<div class="text-sm text-gray-600 mt-2 pl-4 border-l-2 border-orange-300">
|
||
|
||
<span class="inline-block mr-3">
|
||
pommes de terre,
|
||
</span>
|
||
|
||
<span class="inline-block mr-3">
|
||
patate douce,
|
||
</span>
|
||
|
||
<span class="inline-block mr-3">
|
||
carottes,
|
||
</span>
|
||
|
||
<span class="inline-block mr-3">
|
||
panais,
|
||
</span>
|
||
|
||
<span class="inline-block mr-3">
|
||
courge,
|
||
</span>
|
||
|
||
<span class="inline-block mr-3">
|
||
betterave,
|
||
</span>
|
||
|
||
<span class="inline-block mr-3">
|
||
chou-fleur,
|
||
</span>
|
||
|
||
<span class="inline-block mr-3">
|
||
oignons rouges
|
||
</span>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="bg-gradient-to-r from-gray-50 to-orange-50 rounded-xl p-4">
|
||
<div class="flex flex-col gap-4">
|
||
|
||
|
||
<div class="flex gap-4">
|
||
<div class="step-number">3</div>
|
||
<div class="flex-1">
|
||
<div class="text-gray-700 mb-2 leading-8">
|
||
|
||
Mélanger dans un
|
||
<span class="cookware-badge">saladier</span>
|
||
avec beaucoup d'
|
||
<span class="ingredient-badge">huile d'olive</span>
|
||
,
|
||
<span class="ingredient-badge">sel</span>
|
||
,
|
||
<span class="ingredient-badge">poivre</span>
|
||
, les
|
||
<span class="ingredient-badge">épices</span>
|
||
et l'
|
||
<span class="ingredient-badge">ail</span>
|
||
. Chaque morceau doit être luisant.
|
||
</div>
|
||
|
||
<div class="text-sm text-gray-600 mt-2 pl-4 border-l-2 border-orange-300">
|
||
|
||
<span class="inline-block mr-3">
|
||
huile d'olive,
|
||
</span>
|
||
|
||
<span class="inline-block mr-3">
|
||
sel,
|
||
</span>
|
||
|
||
<span class="inline-block mr-3">
|
||
poivre,
|
||
</span>
|
||
|
||
<span class="inline-block mr-3">
|
||
épices <span class="italic text-gray-600 break-words" aria-label="préparation: cumin, paprika, curry, herbes de Provence, romarin">(cumin, paprika, curry, herbes de Provence, romarin)</span>,
|
||
</span>
|
||
|
||
<span class="inline-block mr-3">
|
||
ail: 1 tête <span class="italic text-gray-600 break-words" aria-label="préparation: gousses entières, en chemise">(gousses entières, en chemise)</span>
|
||
</span>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="bg-gradient-to-r from-gray-50 to-orange-50 rounded-xl p-4">
|
||
<div class="flex flex-col gap-4">
|
||
|
||
|
||
<div class="flex gap-4">
|
||
<div class="step-number">4</div>
|
||
<div class="flex-1">
|
||
<div class="text-gray-700 mb-2 leading-8">
|
||
|
||
Étaler en une seule couche sur une
|
||
<span class="cookware-badge">plaque</span>
|
||
, sans que ça se chevauche.
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="bg-gradient-to-r from-gray-50 to-orange-50 rounded-xl p-4">
|
||
<div class="flex flex-col gap-4">
|
||
|
||
|
||
<div class="flex gap-4">
|
||
<div class="step-number">5</div>
|
||
<div class="flex-1">
|
||
<div class="text-gray-700 mb-2 leading-8">
|
||
|
||
Enfourner
|
||
<span class="timer-badge">⏱️ 45 minutes</span>
|
||
à 1 h, en remuant une fois à mi-cuisson. Fini quand les bords sont dorés et qu'un couteau traverse sans résistance.
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
</ol>
|
||
|
||
|
||
<h3 class="text-xl font-semibold mt-6 mb-4 text-orange-700 border-b-2 border-orange-200 pb-2">Notes</h3>
|
||
|
||
|
||
<ol class="space-y-4 mt-4">
|
||
|
||
|
||
<li class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-4 mb-3 border-l-4 border-blue-400">
|
||
<div class="flex items-start gap-2">
|
||
<span class="text-blue-600">📝</span>
|
||
<p class="text-gray-700 italic" style="white-space: pre-line">Le seul vrai piège : la plaque surchargée. Les légumes rendent leur eau, ça cuit à la vapeur et ça ne dore jamais. Deux plaques plutôt qu'une trop pleine.</p>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-4 mb-3 border-l-4 border-blue-400">
|
||
<div class="flex items-start gap-2">
|
||
<span class="text-blue-600">📝</span>
|
||
<p class="text-gray-700 italic" style="white-space: pre-line">Les tendres (courgette, brocoli, poivron, tomates cerises) cuisent 2× plus vite : les ajouter 20-25 min avant la fin.</p>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-4 mb-3 border-l-4 border-blue-400">
|
||
<div class="flex items-start gap-2">
|
||
<span class="text-blue-600">📝</span>
|
||
<p class="text-gray-700 italic" style="white-space: pre-line">Bon chaud, bon froid en salade avec une vinaigrette ou du yaourt-citron.</p>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-4 mb-3 border-l-4 border-blue-400">
|
||
<div class="flex items-start gap-2">
|
||
<span class="text-blue-600">📝</span>
|
||
<p class="text-gray-700 italic" style="white-space: pre-line">Sur la même plaque que des cuisses de poulet, ça marche aussi, mais compter 150°C et 2 h.</p>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
|
||
<li class="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-4 mb-3 border-l-4 border-blue-400">
|
||
<div class="flex items-start gap-2">
|
||
<span class="text-blue-600">📝</span>
|
||
<p class="text-gray-700 italic" style="white-space: pre-line">4-5 jours au frigo. Se congèle mal (ça devient mou).</p>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
</ol>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script id="cooking-mode-data" type="application/json">
|
||
{"image":null,"name":"Légumes rôtis au four","scale":1.0,"sections":[{"ingredients":[{"name":"ail","note":"gousses entières, en chemise","quantity":"1","unit":"tête"},{"name":"betterave","note":null,"quantity":null,"unit":null},{"name":"carottes","note":null,"quantity":null,"unit":null},{"name":"chou-fleur","note":null,"quantity":null,"unit":null},{"name":"courge","note":null,"quantity":null,"unit":null},{"name":"oignons rouges","note":null,"quantity":null,"unit":null},{"name":"panais","note":null,"quantity":null,"unit":null},{"name":"patate douce","note":null,"quantity":null,"unit":null},{"name":"pommes de terre","note":null,"quantity":null,"unit":null},{"name":"épices","note":"cumin, paprika, curry, herbes de Provence, romarin","quantity":null,"unit":null},{"name":"poivre","note":null,"quantity":null,"unit":null},{"name":"sel","note":null,"quantity":null,"unit":null},{"name":"huile d'olive","note":null,"quantity":null,"unit":null}],"name":null,"stepOffset":0,"steps":[{"globalNumber":1,"image":null,"ingredients":[],"number":1,"type":"step"},{"globalNumber":2,"image":null,"ingredients":[{"name":"pommes de terre","note":null,"quantity":null,"unit":null},{"name":"patate douce","note":null,"quantity":null,"unit":null},{"name":"carottes","note":null,"quantity":null,"unit":null},{"name":"panais","note":null,"quantity":null,"unit":null},{"name":"courge","note":null,"quantity":null,"unit":null},{"name":"betterave","note":null,"quantity":null,"unit":null},{"name":"chou-fleur","note":null,"quantity":null,"unit":null},{"name":"oignons rouges","note":null,"quantity":null,"unit":null}],"number":2,"type":"step"},{"globalNumber":3,"image":null,"ingredients":[{"name":"huile d'olive","note":null,"quantity":null,"unit":null},{"name":"sel","note":null,"quantity":null,"unit":null},{"name":"poivre","note":null,"quantity":null,"unit":null},{"name":"épices","note":"cumin, paprika, curry, herbes de Provence, romarin","quantity":null,"unit":null},{"name":"ail","note":"gousses entières, en chemise","quantity":"1","unit":"tête"}],"number":3,"type":"step"},{"globalNumber":4,"image":null,"ingredients":[],"number":4,"type":"step"},{"globalNumber":5,"image":null,"ingredients":[],"number":5,"type":"step"}]},{"ingredients":[],"name":"Notes","stepOffset":5,"steps":[]}]}
|
||
</script>
|
||
|
||
|
||
|
||
</main>
|
||
|
||
|
||
<footer class="mt-12 mb-6 text-center text-sm text-gray-500 print:hidden">
|
||
Built with
|
||
<a href="https://cooklang.org/cli/" class="text-orange-600 hover:text-orange-700 hover:underline" target="_blank" rel="noopener">CookCLI</a>
|
||
|
||
·
|
||
<a href="https://git.sqrt.fr/vincent/recipes" class="text-orange-600 hover:text-orange-700 hover:underline" target="_blank" rel="noopener">View source</a>
|
||
|
||
</footer>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
// Theme toggle function
|
||
function toggleTheme() {
|
||
const html = document.documentElement;
|
||
const currentTheme = html.classList.contains('dark') ? 'dark' : 'light';
|
||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||
|
||
html.classList.toggle('dark');
|
||
localStorage.setItem('theme', newTheme);
|
||
}
|
||
</script>
|
||
|
||
|
||
<script>window.__PREFIX__ = "..";</script>
|
||
<script src="../static/js/search.js"></script>
|
||
|
||
|
||
<!-- URL prefix for JavaScript -->
|
||
<script>
|
||
window.__PREFIX__ = "..";
|
||
window.__STATIC_MODE__ = true;
|
||
</script>
|
||
|
||
<!-- Keyboard shortcuts -->
|
||
<script src="../static/js/keyboard-shortcuts.js"></script>
|
||
<!-- Expose showShortcutsHelp globally for the help button -->
|
||
<script>
|
||
// showShortcutsHelp is defined in keyboard-shortcuts.js
|
||
// This ensures it's available for the onclick handler
|
||
if (typeof showShortcutsHelp === 'undefined') {
|
||
window.showShortcutsHelp = function() {
|
||
console.warn('Keyboard shortcuts not loaded');
|
||
};
|
||
}
|
||
</script>
|
||
|
||
|
||
<link rel="stylesheet" href="../static/css/cooking-mode.css">
|
||
<script src="../static/js/cooking-mode.js"></script>
|
||
|
||
</body>
|
||
</html> |