diff --git a/static/style(2).css b/static/style(2).css deleted file mode 100644 index 6976a19..0000000 --- a/static/style(2).css +++ /dev/null @@ -1,991 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - min-height: 100vh; - padding: 20px; -} - -.container { - max-width: 1200px; - margin: 0 auto; - background: white; - border-radius: 15px; - padding: 30px; - box-shadow: 0 10px 30px rgba(0,0,0,0.2); -} - -/* Navigation supérieure */ -.top-nav { - display: flex; - justify-content: space-between; - margin-bottom: 20px; - gap: 10px; - align-items: center; -} - -h1 { - color: #333; - margin-bottom: 30px; - text-align: center; -} - -/* 🔔 MESSAGES FLASH */ -.alert { - padding: 15px 20px; - margin: 20px 0; - border-radius: 8px; - border-left: 4px solid; - font-size: 15px; -} - -.alert-success { - background: #d4edda; - border-color: #28a745; - color: #155724; -} - -.alert-error { - background: #f8d7da; - border-color: #dc3545; - color: #721c24; -} - -.alert-info { - background: #d1ecf1; - border-color: #17a2b8; - color: #0c5460; -} - -.alert-info ul { - margin: 10px 0 0 20px; -} - -/* 🔍 BARRE DE RECHERCHE */ -.search-form { - display: flex; - gap: 10px; - margin: 25px 0; - align-items: center; -} - -.search-form input[type="text"] { - flex: 1; - padding: 12px 16px; - border: 2px solid #ddd; - border-radius: 8px; - font-size: 16px; - transition: all 0.3s ease; -} - -.search-form input[type="text"]:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - -.search-form button { - padding: 12px 24px; - white-space: nowrap; -} - -.btn-clear { - padding: 12px 20px; - background: #dc3545; - color: white; - text-decoration: none; - border-radius: 8px; - font-size: 16px; - white-space: nowrap; - transition: background 0.3s; - border: none; - cursor: pointer; -} - -.btn-clear:hover { - background: #c82333; -} - -.search-info { - color: #555; - font-style: italic; - margin: 15px 0; - padding: 12px 16px; - background: #f8f9fa; - border-left: 4px solid #667eea; - border-radius: 4px; -} - -.search-info strong { - color: #667eea; - font-weight: 600; -} - -/* Navigation semaine */ -.week-nav { - display: flex; - justify-content: center; - align-items: center; - gap: 20px; - margin-bottom: 30px; -} - -.week-nav button { - background: #667eea; - color: white; - border: none; - padding: 10px 20px; - border-radius: 8px; - cursor: pointer; - font-size: 16px; -} - -.week-nav button:hover { - background: #5568d3; -} - -/* ✅ GRILLE MENU - LARGEUR MAXIMALE */ -.menu-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* ✅ Augmenté de 250px à 280px */ - gap: 20px; - margin-bottom: 30px; -} - -/* ✅ CARTE JOURNALIÈRE - PLUS D'ESPACE */ -.day-card { - background: #f8f9fa; - border-radius: 10px; - padding: 20px; /* ✅ Augmenté de 15px à 20px */ - box-shadow: 0 2px 8px rgba(0,0,0,0.1); -} - -.day-card h3 { - color: #667eea; - margin-bottom: 5px; -} - -.date { - font-size: 14px; - color: #666; - margin-bottom: 15px; -} - -/* ✅ SECTION REPAS (MIDI/SOIR) - PLEINE LARGEUR */ -.meal-slot { - margin-bottom: 20px; /* ✅ Augmenté de 15px à 20px */ - width: 100%; /* ✅ IMPORTANT : prend toute la largeur */ -} - -.meal-slot h4 { - font-size: 15px; /* ✅ Légèrement plus grand */ - margin-bottom: 10px; - color: #555; - font-weight: 600; -} - -/* ✅ CARTE RECETTE - PLEINE LARGEUR */ -.recipe-card { - background: white; - padding: 16px; /* ✅ Espace équilibré */ - border-radius: 8px; - border-left: 4px solid #667eea; - width: 100%; /* ✅ IMPORTANT : prend toute la largeur */ - box-sizing: border-box; /* ✅ Inclut padding et border dans la largeur */ - margin-bottom: 12px; -} - -.recipe-info { - width: 100%; /* ✅ IMPORTANT */ -} - -/* 🔗 NOM DE LA RECETTE CLIQUABLE */ -.recipe-name { - margin-bottom: 10px; -} - -.recipe-name a { - display: block; - font-weight: bold; - font-size: 1.05rem; /* ✅ Légèrement plus grand */ - color: #2c3e50; - text-decoration: none; - transition: color 0.2s; -} - -.recipe-name a:hover { - color: #3498db; - text-decoration: underline; -} - -.recipe-name .print-only { - display: none; - font-weight: bold; - color: #2c3e50; -} - -.recipe-title-link { - color: #2c3e50; - text-decoration: none; - transition: color 0.2s; -} - -.recipe-title-link:hover { - color: #3498db; - text-decoration: underline; -} - -/* ✅ INGRÉDIENTS - PLUS LISIBLES */ -.ingredients-details { - margin-top: 10px; - width: 100%; /* ✅ IMPORTANT */ -} - -.ingredients-details summary { - cursor: pointer; - color: #667eea; - font-size: 14px; - margin-bottom: 8px; - font-weight: 500; -} - -.ingredients-details pre { - background: #f8f9fa; - padding: 12px; /* ✅ Plus d'espace */ - border-radius: 6px; - font-size: 13px; /* ✅ Légèrement plus grand */ - margin-top: 8px; - white-space: pre-wrap; - line-height: 1.5; /* ✅ Meilleure lisibilité */ - width: 100%; /* ✅ IMPORTANT */ - box-sizing: border-box; -} - -.recipe-link { - margin-top: 10px; -} - -.recipe-link a { - color: #667eea; - text-decoration: none; - font-size: 13px; -} - -.recipe-link a:hover { - text-decoration: underline; -} - -.delete-btn { - background: #dc3545; - color: white; - border: none; - padding: 6px 12px; - border-radius: 5px; - cursor: pointer; - font-size: 12px; - margin-top: 8px; -} - -.delete-btn:hover { - background: #c82333; -} - -select { - width: 100%; - padding: 10px; /* ✅ Plus d'espace */ - border: 1px solid #ddd; - border-radius: 6px; - font-size: 14px; -} - -/* 🔍 AUTOCOMPLETE RECETTES */ -.recipe-search-form { - position: relative; -} - -.recipe-autocomplete { - width: 100%; - padding: 10px 12px; - border: 2px solid #ddd; - border-radius: 8px; - font-size: 14px; - transition: all 0.3s ease; -} - -.recipe-autocomplete:focus { - outline: none; - border-color: #667eea; - box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); -} - -.autocomplete-results { - position: absolute; - top: 100%; - left: 0; - right: 0; - background: white; - border: 2px solid #667eea; - border-top: none; - border-radius: 0 0 8px 8px; - max-height: 200px; - overflow-y: auto; - z-index: 100; - display: none; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); -} - -.autocomplete-results.active { - display: block; -} - -.autocomplete-item { - padding: 10px 12px; - cursor: pointer; - transition: background 0.2s; - border-bottom: 1px solid #f0f0f0; -} - -.autocomplete-item:last-child { - border-bottom: none; -} - -.autocomplete-item:hover, -.autocomplete-item.selected { - background: #f0f4ff; - color: #667eea; -} - -.autocomplete-no-results { - padding: 10px 12px; - color: #999; - font-style: italic; - text-align: center; -} - -/* Liste recettes */ -.recettes-list { - display: grid; - gap: 20px; - margin-bottom: 30px; -} - -.recette-card { - background: #f8f9fa; - padding: 20px; - border-radius: 10px; - border-left: 4px solid #667eea; -} - -.recette-card h3 { - color: #333; - margin-bottom: 15px; -} - -.ingredients, .instructions { - margin-bottom: 15px; -} - -.ingredients strong, .instructions strong { - color: #667eea; - display: block; - margin-bottom: 5px; -} - -.ingredients pre, .instructions pre { - background: white; - padding: 10px; - border-radius: 5px; - white-space: pre-wrap; - font-family: inherit; -} - -.actions { - display: flex; - gap: 10px; - margin-top: 15px; -} - -/* Formulaires */ -.recipe-form { - max-width: 600px; - margin: 0 auto; -} - -.form-group { - margin-bottom: 20px; -} - -.form-group label, -.form-label { - display: block; - margin-bottom: 8px; - color: #333; - font-weight: 500; -} - -.form-group input, -.form-group textarea, -.file-input { - width: 100%; - padding: 10px; - border: 1px solid #ddd; - border-radius: 5px; - font-size: 16px; - font-family: inherit; -} - -.form-group textarea { - resize: vertical; -} - -.file-input { - cursor: pointer; -} - -.form-actions { - display: flex; - gap: 10px; - justify-content: center; - margin-top: 30px; -} - -/* Boutons */ -.btn { - display: inline-block; - background: #667eea; - color: white; - padding: 12px 24px; - border-radius: 8px; - text-decoration: none; - border: none; - cursor: pointer; - font-size: 16px; - text-align: center; - transition: background 0.3s; -} - -.btn:hover { - background: #5568d3; -} - -.btn-secondary { - background: #6c757d; -} - -.btn-secondary:hover { - background: #5a6268; -} - -.btn-primary { - background: #667eea; -} - -.btn-primary:hover { - background: #5568d3; -} - -.btn-success { - background: #28a745; -} - -.btn-success:hover { - background: #218838; -} - -.btn-info { - background: #17a2b8; -} - -.btn-info:hover { - background: #138496; -} - -.btn-print { - background: #28a745; -} - -.btn-print:hover { - background: #218838; -} - -.btn-edit { - background: #28a745; - color: white; - padding: 8px 16px; - border-radius: 5px; - text-decoration: none; - font-size: 14px; -} - -.btn-edit:hover { - background: #218838; -} - -.btn-delete { - background: #dc3545; - color: white; - padding: 8px 16px; - border-radius: 5px; - border: none; - cursor: pointer; - font-size: 14px; -} - -.btn-delete:hover { - background: #c82333; -} - -.btn-link { - color: #667eea; - text-decoration: none; - font-size: 14px; -} - -.btn-link:hover { - text-decoration: underline; -} - -/* 📤 MODAL IMPORT */ -.modal { - display: none; - position: fixed; - z-index: 1000; - left: 0; - top: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.5); - align-items: center; - justify-content: center; -} - -.modal-content { - background: white; - border-radius: 12px; - width: 90%; - max-width: 500px; - box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); - animation: modalSlideIn 0.3s ease; -} - -@keyframes modalSlideIn { - from { - opacity: 0; - transform: translateY(-50px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.modal-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 20px; - border-bottom: 1px solid #ddd; -} - -.modal-header h2 { - margin: 0; - color: #333; - font-size: 20px; -} - -.close-btn { - background: none; - border: none; - font-size: 28px; - cursor: pointer; - color: #666; - line-height: 1; - padding: 0; - width: 30px; - height: 30px; -} - -.close-btn:hover { - color: #dc3545; -} - -.modal-body { - padding: 20px; -} - -.modal-footer { - display: flex; - justify-content: flex-end; - gap: 10px; - padding: 20px; - border-top: 1px solid #ddd; -} - -/* ========== ✅ ACCOMPAGNEMENTS - PLEINE LARGEUR ========== */ -.recipe-accompagnements { - margin: 15px 0; - padding: 14px; - background-color: #f0f8ff; - border-left: 4px solid #4CAF50; - border-radius: 6px; - width: 100%; /* ✅ IMPORTANT */ - box-sizing: border-box; -} - -.recipe-accompagnements strong { - color: #2c5f2d; - font-size: 0.95em; - display: block; - margin-bottom: 8px; -} - -.recipe-accompagnements ul { - margin: 10px 0; - padding-left: 0; - list-style-type: none; - width: 100%; /* ✅ IMPORTANT */ -} - -.recipe-accompagnements li { - font-size: 0.9em; - color: #555; - margin: 8px 0; - padding: 8px 12px; /* ✅ Plus d'espace */ - background: white; - border-radius: 4px; - display: flex; - align-items: center; - gap: 10px; - width: 100%; /* ✅ IMPORTANT */ - box-sizing: border-box; -} - -.recipe-accompagnements li strong { - color: #333; - font-weight: 600; - display: inline; - margin: 0; -} - -.acc-descriptif { - color: #666; - font-size: 0.85em; - display: block; - margin-left: 0; - padding-left: 0; -} - -.inline-form { - display: inline; - margin: 0; - margin-left: auto; -} - -.delete-acc-btn { - background: none; - border: none; - cursor: pointer; - font-size: 0.9em; - padding: 2px 4px; - color: #d32f2f; - transition: transform 0.2s; -} - -.delete-acc-btn:hover { - transform: scale(1.2); -} - -/* ✅ FORMULAIRE AJOUT ACCOMPAGNEMENT - PLEINE LARGEUR */ -.add-acc-form { - margin-top: 10px; - width: 100%; /* ✅ IMPORTANT */ -} - -.add-acc-form select { - width: 100%; /* ✅ IMPORTANT */ - padding: 10px; /* ✅ Plus d'espace */ - border: 1px solid #ddd; - border-radius: 6px; - font-size: 0.9em; - background-color: white; - cursor: pointer; - box-sizing: border-box; -} - -.add-acc-form select:hover { - border-color: #4CAF50; -} - -.add-acc-form select:focus { - outline: none; - border-color: #4CAF50; - box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2); -} - -/* Responsive pour mobile */ -@media (max-width: 768px) { - .search-form { - flex-direction: column; - } - - .search-form input[type="text"], - .search-form button, - .btn-clear { - width: 100%; - } - - .top-nav { - flex-direction: column; - } - - .top-nav > div { - width: 100%; - display: flex; - flex-wrap: wrap; - gap: 10px; - } - - .menu-grid { - grid-template-columns: 1fr; - } - - .modal-content { - width: 95%; - margin: 10px; - } - - /* 📱 AUTOCOMPLETE MOBILE */ - .recipe-autocomplete { - font-size: 16px; - padding: 12px 14px; - -webkit-appearance: none; - } - - .autocomplete-results { - max-height: 250px; - border-radius: 0 0 12px 12px; - box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); - } - - .autocomplete-item { - padding: 14px 16px; - font-size: 15px; - min-height: 48px; - display: flex; - align-items: center; - } - - .autocomplete-no-results { - padding: 16px; - font-size: 15px; - } - - .autocomplete-results { - -webkit-overflow-scrolling: touch; - overscroll-behavior: contain; - } -} - -/* ======================================== - IMPRESSION - A4 PAYSAGE OPTIMISÉ - ======================================== */ - -.print-only { - display: none; -} - -@page { - size: A4 landscape; - margin: 8mm; -} - -@media print { - .no-print, - .week-nav, - .top-nav, - form, - button, - select, - .delete-btn, - .search-form, - .search-info, - .alert, - .autocomplete-results, - details summary::-webkit-details-marker { - display: none !important; - } - - .print-only { - display: block !important; - } - - .recipe-name .print-only { - display: block !important; - } - - .recipe-name a { - display: none !important; - } - - details, - details[open], - .ingredients-details { - display: block !important; - } - - details summary ~ * { - display: block !important; - } - - body { - margin: 0; - padding: 5mm; - font-size: 8pt; - line-height: 1.2; - background: white !important; - } - - .container { - max-width: 100%; - padding: 0; - box-shadow: none; - border-radius: 0; - } - - h1 { - font-size: 16pt; - margin: 0 0 5mm 0; - text-align: center; - border-bottom: 2px solid #333; - padding-bottom: 3mm; - color: #333 !important; - } - - .menu-grid { - display: grid !important; - grid-template-columns: repeat(7, 1fr) !important; - gap: 3mm !important; - page-break-inside: avoid; - margin-bottom: 0; - } - - .day-card { - border: 1px solid #333 !important; - padding: 2mm !important; - background: white !important; - page-break-inside: avoid; - border-radius: 0 !important; - box-shadow: none !important; - } - - .day-card h3 { - font-size: 10pt !important; - margin: -2mm -2mm 2mm -2mm !important; - text-align: center; - background: #3498db !important; - color: white !important; - padding: 2mm !important; - border-radius: 0 !important; - } - - .day-card .date { - font-size: 7pt !important; - text-align: center; - color: #666 !important; - margin: 0 0 2mm 0 !important; - } - - .meal-slot { - margin-bottom: 3mm !important; - border-bottom: 1px solid #ddd; - padding-bottom: 2mm; - } - - .meal-slot:last-child { - border-bottom: none; - margin-bottom: 0 !important; - } - - .meal-slot h4 { - font-size: 8pt !important; - margin: 0 0 1mm 0 !important; - color: #2c3e50 !important; - font-weight: bold; - } - - .recipe-card { - background: #f9f9f9 !important; - padding: 2mm !important; - border-left: 2px solid #3498db !important; - border-radius: 0 !important; - display: block !important; - } - - .recipe-info { - width: 100%; - } - - .ingredients-details { - margin-top: 1mm !important; - display: block !important; - } - - .ingredients-details summary { - display: none !important; - } - - .ingredients-details pre { - display: block !important; - font-size: 6.5pt !important; - line-height: 1.3 !important; - margin: 0 !important; - white-space: pre-wrap !important; - word-wrap: break-word !important; - background: white !important; - padding: 1mm !important; - border-left: 1px solid #ddd !important; - border-radius: 0 !important; - } - - .recipe-link { - display: none !important; - } - - * { - -webkit-print-color-adjust: exact !important; - print-color-adjust: exact !important; - color-adjust: exact !important; - } - - .day-card, - .recipe-card, - .meal-slot { - page-break-inside: avoid; - break-inside: avoid; - } - - .recipe-accompagnements { - background: #f9f9f9 !important; - border-left: 2px solid #999 !important; - page-break-inside: avoid; - } - - .recipe-accompagnements strong { - color: #333 !important; - } - - .delete-acc-btn, - .add-acc-form { - display: none !important; - } - - .acc-descriptif { - display: inline; - margin-left: 4px; - } -}