* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --tg-accent: #B75317;
    --tg-accent-hover: #CA6221;
    --tg-accent-soft: #FCEFE8;
    --tg-cta: #FF7F0A;
    --tg-cta-hover: #E67309;
    --tg-ink: #1A202C;
    --tg-border: #E2E8F0;
}

body {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: #F8FAFC;
    color: var(--tg-ink);
    line-height: 1.6;
}

/* Tuiles thème (admin Organisation) : survol = couleur hover dédiée */
.org-theme-tile:hover {
    background: var(--tile-hover) !important;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.navbar {
    background-color: #2c3e50;
    color: white;
    padding: 1rem 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand h1 {
    font-size: 1.5rem;
}

.nav-menu {
    display: flex;
    gap: 1.5rem;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.nav-menu a:hover {
    background-color: #34495e;
}

.main-content {
    margin-top: 2rem;
    min-height: calc(100vh - 100px);
}

.section {
    display: none;
}

.section.active {
    display: block;
}

.login-container {
    max-width: 400px;
    margin: 2rem auto;
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.form-group {
    margin-bottom: 1rem;
    width: 100%;
    display: block;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-group label[style*="display: flex"] {
    margin-left: 0 !important;
    padding-left: 0 !important;
    align-items: center;
    width: 100% !important;
    max-width: 100% !important;
}

.form-group input,
.form-group select,
.form-control {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.75rem;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box !important;
}

.form-group input[type="checkbox"],
.form-group input[type="radio"] {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0;
}

.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0.25rem;
}

.checkbox-list label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: normal;
    margin: 0;
}

.checkbox-list input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s;
}

.btn-primary {
    background-color: var(--tg-cta);
    color: #FFFFFF;
}

.btn-primary:hover {
    background-color: var(--tg-cta-hover);
}

.btn-secondary {
    background-color: #E0E0E0;
    color: var(--tg-accent);
}

.btn-secondary:hover {
    background-color: #D5D5D5;
}

.btn-danger {
    background-color: #e74c3c;
    color: white;
}

.btn-danger:hover {
    background-color: #c0392b;
}

.dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.dashboard-card {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.dashboard-card h3 {
    margin-bottom: 1rem;
    color: var(--tg-accent);
}

.view-toggle-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.view-toggle-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.month-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 2rem 0;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.view-toggle-btn {
    padding: 0.3rem 0.5rem;
    background-color: #e0e0e0;
    color: #666;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-toggle-btn:hover {
    background-color: #d0d0d0;
    transform: scale(1.05);
}

.view-toggle-btn.active {
    background-color: var(--tg-accent);
    color: white;
    box-shadow: 0 2px 4px rgba(59, 167, 240, 0.3);
}

.view-toggle-btn:active {
    transform: scale(0.98);
}

.month-selector button {
    padding: 0.5rem 1rem;
    background-color: var(--tg-accent);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.month-selector button:hover {
    background-color: var(--tg-accent-hover);
}

.calendar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}

.calendar-day {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    min-height: 150px;
}

.calendar-day h4 {
    margin-bottom: 0.5rem;
    color: #2c3e50;
}

.meal-item {
    background-color: var(--tg-accent-soft);
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    font-size: 0.9rem;
}

.table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.table th,
.table td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid #E0E0E0;
}

.table th {
    background-color: var(--tg-accent);
    color: white;
    font-weight: 600;
}

.table tr:hover {
    background-color: #f5f5f5;
}

.alert {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.loading {
    text-align: center;
    padding: 2rem;
    color: #7f8c8d;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
}

.modal.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box !important;
    min-width: 0;
}

.modal-content.modal-large {
    max-width: 700px !important;
}

/* Force all form elements to use full width - très spécifique pour override Tailwind */
.modal-content form {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.modal-content form .form-group {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.modal-content form input[type="text"],
.modal-content form input[type="email"],
.modal-content form input[type="time"],
.modal-content form input[type="number"],
.modal-content form textarea,
.modal-content form select {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.modal-content form label {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Checkboxes dans les sous-divs d'un form-group (indications alimentaires, jours semaine)
   Ciblage par structure DOM : form-group > div > label — indépendant du nom de classe */
.modal-content form .form-group > div > label,
.modal-content form .checkbox-list label,
.modal-content form .jours-checkboxes label {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    width: auto !important;
    max-width: none !important;
    gap: 0.5rem !important;
    font-weight: normal !important;
    cursor: pointer;
    margin: 0 !important;
    padding: 0 !important;
}

.modal-content form .form-group > div > label input[type="checkbox"],
.modal-content form .form-group > div > label input[type="radio"],
.modal-content form .checkbox-list input[type="checkbox"],
.modal-content form .jours-checkboxes input[type="checkbox"] {
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    vertical-align: middle;
}

.modal-content form small {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

.modal-content input,
.modal-content textarea,
.modal-content select,
.modal-content label,
.modal-content .form-group {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.modal-content.modal-large {
    max-width: 700px;
}

.modal-content form {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

.modal-content .form-group {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.modal-content .form-group input,
.modal-content .form-group textarea,
.modal-content .form-group select {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* Les checkboxes/radios dans les modales ne doivent pas hériter du style pleine largeur */
.modal-content form .form-group input[type="checkbox"],
.modal-content form .form-group input[type="radio"] {
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Ligne nom + prix dans le modal variantes (sinon min-width:100% sur chaque input fait déborder le modal) */
.modal-content .form-group .variant-inline-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.modal-content .form-group .variant-inline-row .edit-variant-name,
.modal-content .form-group .variant-inline-row .edit-subgroup-variant-name {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
}

.modal-content .form-group .variant-inline-row .edit-variant-price,
.modal-content .form-group .variant-inline-row .edit-subgroup-variant-price {
    flex: 0 0 6.5rem !important;
    width: 6.5rem !important;
    min-width: 5rem !important;
    max-width: 40% !important;
}

.modal-content .form-group .variant-inline-row .btn {
    flex-shrink: 0;
}

.modal-content .form-group label {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Labels de checkbox dans un sous-div (indications alimentaires, jours) — spécificité supérieure */
.modal-content .form-group > div > label {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    width: auto !important;
    max-width: none !important;
    gap: 0.5rem !important;
    font-weight: normal !important;
    cursor: pointer;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

.modal-content .form-group > div > label input[type="checkbox"],
.modal-content .form-group > div > label input[type="radio"] {
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.modal-content .form-group label[style*="display: flex"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    align-items: center;
    box-sizing: border-box !important;
}

.modal-content .form-group label[style*="display: flex"] span {
    flex: 1;
    min-width: 0;
    display: block;
}

.modal-content small {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.modal-content button {
    box-sizing: border-box;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.close-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #7f8c8d;
}

.close-modal:hover {
    color: #2c3e50;
}

.admin-container {
    display: flex;
    gap: 2rem;
    min-height: calc(100vh - 200px);
    margin-top: 2rem;
    padding-top: 1rem;
}

.admin-sidebar {
    width: 250px;
    flex-shrink: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 1.5rem 0;
}

.admin-sidebar-title {
    padding: 0 1.5rem 1.5rem 1.5rem;
    margin: 0 0 1rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
    border-bottom: 2px solid #eee;
}

.admin-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0 0.5rem;
}

.admin-tab {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    font-size: 1rem;
    color: #666;
    text-align: left;
    transition: all 0.3s;
    border-radius: 4px;
}

.admin-tab:hover {
    color: #2c3e50;
    background-color: #f5f5f5;
}

.admin-tab.active {
    color: var(--tg-accent);
    border-left-color: var(--tg-accent);
    background-color: var(--tg-accent-soft);
    font-weight: 600;
}

.admin-content-wrapper {
    flex: 1;
    min-width: 0;
}

/* Styles pour les sous-onglets de Paramètres dans la sidebar */
.admin-parametres-subtabs-wrapper,
.admin-cartes-repas-subtabs-wrapper,
.admin-commandes-subtabs-wrapper,
.admin-produits-subtabs-wrapper,
.admin-ecoles-subtabs-wrapper,
.admin-utilisateurs-subtabs-wrapper,
.admin-super-admin-subtabs-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0 0.5rem 1.5rem;
    margin-top: 0.25rem;
    border-left: 2px solid #e0e0e0;
}

.admin-parametres-subtab,
.admin-cartes-repas-subtab,
.admin-commandes-subtab,
.admin-produits-subtab,
.admin-ecoles-subtab,
.admin-utilisateurs-subtab,
.admin-super-admin-subtab {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    font-size: 0.95rem;
    color: #666;
    text-align: left;
    transition: all 0.3s;
    border-radius: 4px;
    margin-left: 0.5rem;
}

.admin-parametres-subtab:hover,
.admin-cartes-repas-subtab:hover,
.admin-commandes-subtab:hover,
.admin-produits-subtab:hover,
.admin-ecoles-subtab:hover,
.admin-utilisateurs-subtab:hover,
.admin-super-admin-subtab:hover {
    color: #2c3e50;
    background-color: #f5f5f5;
}

.admin-parametres-subtab.active,
.admin-cartes-repas-subtab.active,
.admin-commandes-subtab.active,
.admin-produits-subtab.active,
.admin-ecoles-subtab.active,
.admin-utilisateurs-subtab.active,
.admin-super-admin-subtab.active {
    color: var(--tg-accent);
    border-left-color: var(--tg-accent);
    background-color: var(--tg-accent-soft);
    font-weight: 600;
}

.admin-parametres-content,
.admin-cartes-repas-content,
.admin-commandes-content {
    width: 100%;
}

/* Boutons d’action admin : toujours sur une même ligne (réf. Types de cartes) */
.admin-actions-inline {
    display: inline-flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    vertical-align: middle;
}

.admin-actions-inline--center {
    justify-content: center;
}

.admin-actions-inline .btn {
    width: auto !important;
    min-width: 0;
    max-width: none !important;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0.35rem 0.5rem !important;
    font-size: 0.875rem;
    line-height: 1.2;
    box-sizing: border-box;
}

.admin-actions-inline .btn svg {
    display: block;
}

.table td.admin-table-actions {
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
}

.table td.admin-table-actions--center {
    text-align: center;
}

/* Variantes : titre et boutons modif / suppr. sur une seule ligne */
.admin-variant-block-header {
    display: flex !important;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 15px;
}

.admin-variant-block-header h4 {
    margin: 0 !important;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-variant-block-header .admin-actions-inline {
    flex: 0 0 auto;
}

.admin-variant-subblock-header {
    display: flex !important;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.admin-variant-subblock-header strong {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-variant-subblock-header .admin-actions-inline {
    flex: 0 0 auto;
}

/* Responsive pour la section admin */
@media (max-width: 768px) {
    .admin-container {
        flex-direction: column;
        gap: 1rem;
        margin-top: 1rem;
        padding-top: 0.5rem;
    }
    
    .admin-sidebar {
        width: 100%;
        padding: 1rem 0;
    }
    
    .admin-sidebar-title {
        padding: 0 1rem 1rem 1rem;
        font-size: 1.25rem;
    }
    
    .admin-tabs {
        flex-direction: row;
        overflow-x: auto;
        padding: 0 0.5rem;
        gap: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }
    
    .admin-tab {
        padding: 0.5rem 1rem;
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
        flex-shrink: 0;
    }
    
    .admin-tab.active {
        border-left: none;
        border-bottom-color: var(--tg-accent);
    }
    
    .admin-parametres-subtabs-wrapper,
    .admin-cartes-repas-subtabs-wrapper,
    .admin-commandes-subtabs-wrapper,
    .admin-produits-subtabs-wrapper,
    .admin-ecoles-subtabs-wrapper,
    .admin-utilisateurs-subtabs-wrapper,
    .admin-super-admin-subtabs-wrapper {
        padding-left: 1rem;
        margin-left: 0.5rem;
    }
    
    .admin-parametres-subtab,
    .admin-cartes-repas-subtab,
    .admin-commandes-subtab,
    .admin-produits-subtab,
    .admin-ecoles-subtab,
    .admin-utilisateurs-subtab,
    .admin-super-admin-subtab {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* Boutons d'action icônes (liste Parents) */
.admin-parent-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: #f0f0f0;
    color: #555;
    transition: background 0.2s, color 0.2s;
}
.admin-parent-action-btn:hover {
    background: #e0e0e0;
    color: #333;
}
.admin-parent-action-btn.btn-primary {
    background: var(--tg-accent);
    color: white;
}
.admin-parent-action-btn.btn-primary:hover {
    background: var(--tg-accent-hover);
    color: white;
}
.admin-parent-action-btn.btn-danger {
    background: #e74c3c;
    color: #fff;
}
.admin-parent-action-btn.btn-danger:hover {
    background: #c0392b;
    color: #fff;
}
.admin-parent-action-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.admin-parent-actions-cell {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

/* Mini calendrier - Commandes du jour */
.mini-calendrier-commandes-wrap {
    display: inline-block;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.mini-calendrier-commandes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 12px;
}
.mini-cal-nav {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f5f5f5;
    color: #333;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
.mini-cal-nav:hover {
    background: #e8e8e8;
    border-color: var(--tg-accent);
    color: var(--tg-accent);
}
.mini-calendrier-month {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
}
.mini-calendrier-table {
    border-collapse: collapse;
    font-size: 13px;
}
.mini-calendrier-table th {
    padding: 4px 6px;
    text-align: center;
    font-weight: 600;
    color: #666;
    border: none;
}
.mini-calendrier-table td {
    padding: 2px;
    border: none;
    text-align: center;
}
.mini-cal-empty {
    background: transparent;
}
.mini-cal-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #333;
    cursor: pointer;
    font-size: 13px;
    line-height: 28px;
}
.mini-cal-btn:hover {
    background: var(--tg-accent-soft);
    color: var(--tg-accent);
}
.mini-cal-day.mini-cal-selected .mini-cal-btn {
    background: var(--tg-accent);
    color: white;
    font-weight: 600;
}
.mini-cal-day.mini-cal-selected .mini-cal-btn:hover {
    background: var(--tg-accent-hover);
    color: white;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* Page Journées pédagogiques (Pédago) - look professionnel */
.pedago-page {
    max-width: 960px;
}
.pedago-page .admin-header {
    margin-bottom: 1.75rem;
}
.pedago-page .admin-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.02em;
}
.pedago-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
    border: 1px solid #e2e8f0;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
}
.pedago-card-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}
.pedago-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-end;
}
.pedago-form-row-dates {
    margin-bottom: 0;
}
.pedago-ecoles-block {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f1f5f9;
}
.pedago-ecoles-field-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
}
.pedago-ecole-tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}
@media (max-width: 520px) {
    .pedago-ecole-tiles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 360px) {
    .pedago-ecole-tiles-grid {
        grid-template-columns: 1fr;
    }
}
.pedago-ecole-tile {
    position: relative;
    text-align: left;
    padding: 14px 44px 14px 16px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: var(--tile-base);
    cursor: pointer;
    font-family: Inter, system-ui, sans-serif;
    min-height: 64px;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.pedago-ecole-tile__name {
    display: block;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.35;
}
.pedago-ecole-tile--selected {
    border-color: #15803d !important;
    border-width: 4px !important;
    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.42),
        0 8px 22px rgba(22, 101, 52, 0.2);
    transform: translateY(-1px);
}
.pedago-ecole-tile--selected::after {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(145deg, #34d399, #15803d);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 28px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(22, 101, 52, 0.4);
    pointer-events: none;
}
.pedago-ecole-tile--selected.org-theme-tile:hover {
    border-color: #15803d !important;
    border-width: 4px !important;
    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.42),
        0 8px 22px rgba(22, 101, 52, 0.2) !important;
}
.pedago-ecole-tile:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.pedago-ecole-tile:disabled:hover {
    background: var(--tile-base) !important;
}
.pedago-ecole-tile:focus-visible {
    outline: 2px solid var(--tg-accent);
    outline-offset: 2px;
}
.pedago-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.pedago-form-group label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
}
.pedago-form-group .pedago-hint {
    font-size: 0.75rem;
    font-weight: 400;
    color: #64748b;
    margin-top: 0.125rem;
}
.pedago-form-group input[type="date"],
.pedago-form-group input[type="text"],
.pedago-form-group select {
    min-height: 42px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.9375rem;
    color: #1e293b;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.pedago-form-group input[type="date"]:focus,
.pedago-form-group input[type="text"]:focus,
.pedago-form-group select:focus {
    outline: none;
    border-color: var(--tg-accent);
    box-shadow: 0 0 0 3px rgba(59, 167, 240, 0.15);
}
.pedago-form-group .pedago-checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.pedago-form-group .pedago-checkbox-wrap input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--tg-accent);
}
.pedago-form-group .pedago-checkbox-wrap label {
    font-weight: 500;
    color: #475569;
    cursor: pointer;
}
.pedago-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-shrink: 0;
}
.pedago-actions .btn {
    min-height: 42px;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 8px;
    transition: background-color 0.2s, transform 0.05s;
}
.pedago-actions .btn:active {
    transform: scale(0.98);
}
.pedago-empty-state {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
}
.pedago-empty-state-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    background: #e2e8f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #64748b;
}
.pedago-month-scope-hint {
    font-size: 0.8125rem;
    color: #64748b;
    margin: -0.25rem 0 1rem 0;
    line-height: 1.45;
}
.pedago-empty-state p {
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0;
}
.pedago-table-wrap {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.pedago-table-wrap .table {
    margin: 0;
    box-shadow: none;
    border-radius: 0;
}
.pedago-table-wrap .table th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}
.pedago-table-wrap .table td {
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.pedago-table-wrap .table tr:last-child td {
    border-bottom: none;
}
.pedago-table-wrap .table tr:hover td {
    background: #f8fafc;
}
.pedago-table-wrap .table .pedago-date-cell {
    font-weight: 500;
    color: #1e293b;
}
.pedago-table-wrap .table .pedago-school-cell {
    color: #475569;
}
.pedago-table-wrap .table .pedago-school-code {
    font-size: 0.8125rem;
    color: #94a3b8;
    font-weight: 400;
}
.pedago-table-wrap .table .pedago-actions-cell {
    text-align: right;
    white-space: nowrap;
}
.pedago-table-wrap .table .pedago-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    font-size: 1rem;
    margin-left: 0.25rem;
}
.pedago-table-wrap .table .pedago-btn-icon:hover {
    transform: none;
}
.pedago-table-wrap .table .pedago-btn-edit {
    background: #e0f2fe;
    color: #0369a1;
}
.pedago-table-wrap .table .pedago-btn-edit:hover {
    background: #bae6fd;
    color: #0284c7;
}
.pedago-table-wrap .table .pedago-btn-delete {
    background: #fee2e2;
    color: #b91c1c;
}
.pedago-table-wrap .table .pedago-btn-delete:hover {
    background: #fecaca;
    color: #dc2626;
}
.pedago-table-wrap .table .pedago-btn-eye {
    background: #f1f5f9;
    color: #475569;
}
.pedago-table-wrap .table .pedago-btn-eye:hover {
    background: #e2e8f0;
    color: #334155;
}
@media (max-width: 768px) {
    .pedago-form-row {
        flex-direction: column;
        align-items: stretch;
    }
    .pedago-actions {
        justify-content: flex-start;
    }
}

textarea {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box !important;
}

small {
    display: block;
    margin-top: 0.25rem;
    color: #666;
    font-size: 0.875rem;
}

.jours-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

.jours-checkboxes label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: normal;
}

.jours-checkboxes input[type="checkbox"] {
    width: auto;
    margin: 0;
}

input[type="file"] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

#imagePreview img,
#editImagePreview img {
    border: 2px solid #ddd;
    padding: 5px;
}

/* Styles pour le menu mensuel en grille */
.menu-calendar-grid {
    margin-top: 1rem;
}

.calendar-week-header-menu {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.calendar-day-header-menu {
    padding: 1rem;
    background-color: var(--tg-accent);
    color: white;
    text-align: center;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
}

.calendar-week-grid-menu {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}

.calendar-day-cell-menu {
    background: white;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 1rem;
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

.calendar-day-cell-menu.empty {
    background: transparent;
    box-shadow: none;
    border: none;
}

.day-number-menu {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.day-name-menu {
    font-size: 0.9rem;
    color: #666;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.day-meals-menu {
    flex: 1;
    /* Laisse les cartes grandir en fonction du texte, évite le rognage interne */
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
}

/* Alignement des blocs de repas pour que tous les sandwichs soient alignés */
.day-meals-menu .meal-card-full:first-child {
    flex-shrink: 0;
}

.day-meals-menu .meal-card-full {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    /* Taille basée sur le contenu pour ne pas couper le texte */
    flex: 0 0 auto;
}

.day-meals-menu .meal-card-image-full {
    height: 150px;
}

.day-meals-menu .meal-card-content-full {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    /* Occupe l'espace restant dans la carte pour pousser le bouton en bas */
    flex: 1 0 auto;
}

.day-meals-menu .meal-card-date {
    font-size: 0.9rem;
}

.day-meals-menu .meal-card-type {
    font-size: 0.8rem;
}

.day-meals-menu .meal-card-variants-full {
    font-size: 0.85rem;
}

.day-meals-menu .accompaniment-item {
    font-size: 0.8rem;
}

.day-meals-menu .meal-card-details-full {
    flex: 1;
    min-height: 0;
}

.day-meals-menu .btn-select-full {
    padding: 0.5rem;
    font-size: 0.85rem;
    margin-top: auto;
    flex-shrink: 0;
}

/* Repas spécial — mise en avant fixe (or / ambre), indépendante du thème du site */
.meal-card--repas-special {
    position: relative;
    overflow: visible;
    border: 2px solid #c9a227 !important;
    box-shadow:
        0 4px 22px rgba(201, 162, 39, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.06) !important;
    background: linear-gradient(165deg, #fffdf6 0%, #ffffff 45%, #fffef8 100%) !important;
}

.meal-special-ribbon {
    position: absolute;
    top: 10px;
    right: 0;
    z-index: 3;
    max-width: calc(100% - 8px);
    background: linear-gradient(135deg, #8a6910 0%, #c9a227 45%, #ddb82e 100%);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 6px 12px 6px 14px;
    border-radius: 4px 0 0 4px;
    box-shadow: -2px 3px 12px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

.meal-special-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
    margin-bottom: 4px;
    padding: 3px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4a3d08;
    background: linear-gradient(180deg, #fffbf0 0%, #ffe9a8 100%);
    border: 1px solid #c9a227;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(201, 162, 39, 0.35);
    vertical-align: middle;
}

.meal-special-badge__icon {
    font-size: 0.78rem;
    color: #b8860b;
    line-height: 1;
}

.meal-card-accordion.meal-card--repas-special {
    border: 2px solid #c9a227 !important;
    box-shadow: 0 3px 16px rgba(201, 162, 39, 0.18) !important;
    background: linear-gradient(165deg, #fffdf6 0%, #ffffff 100%) !important;
}

.meal-card-accordion.meal-card--repas-special .meal-accordion-header {
    border-bottom-color: rgba(201, 162, 39, 0.35);
}

.meal-card--repas-special .btn-select-full {
    border-color: #a88615;
    color: #4a3d08;
    background: linear-gradient(180deg, #fffef9 0%, #fff3d6 100%);
}

.meal-card--repas-special .btn-select-full:hover:not(:disabled) {
    background: linear-gradient(180deg, #d4af37 0%, #b8941c 100%);
    color: #fff;
    border-color: #8a7210;
}

.no-meals-day {
    color: #999;
    font-size: 0.9rem;
    font-style: italic;
    padding: 1rem;
    text-align: center;
}

/* Responsive pour le calendrier menu */
@media (max-width: 1200px) {
    .calendar-week-header-menu,
    .calendar-week-grid-menu {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.75rem;
    }
    
    .calendar-day-cell-menu {
        min-height: 350px;
        padding: 0.75rem;
    }
}

@media (max-width: 768px) {
    .calendar-week-header-menu,
    .calendar-week-grid-menu {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .calendar-day-cell-menu {
        min-height: auto;
    }
}

/* Styles pour le calendrier simple (commandes uniquement) */
.calendar-simple {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.calendar-day-simple {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.calendar-day-simple h4 {
    margin-bottom: 0.75rem;
    color: #2c3e50;
    font-size: 1.1rem;
}

.commande-item {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    background-color: var(--tg-accent-soft);
    border-left: 3px solid var(--tg-accent);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.commande-enfant {
    font-weight: 600;
    color: #2c3e50;
}

.commande-repas {
    font-size: 0.9rem;
    color: #666;
}

.no-commandes {
    color: #999;
    font-size: 0.9rem;
    font-style: italic;
    padding: 0.5rem;
}

/* Styles pour les cartes de repas complètes dans le calendrier */
.meals-list-container {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.meal-card-full {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Journée pédagogique : une seule image remplace le menu du jour */
.meal-card-pedago-only__imgwrap {
    width: 100%;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}
.meal-card-pedago-only__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
}
.meal-card-pedago-only__caption {
    padding: 0.75rem 1rem 0;
    font-weight: 600;
    color: #444;
    font-size: 0.95rem;
}
.meal-card-pedago-only .meal-card-pedago-only__btn {
    background: #e8a598;
    color: #fff;
    border: none;
    cursor: not-allowed;
}

.meal-card-image-full {
    width: 100%;
    height: 250px;
    overflow: hidden;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.meal-card-image-full img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.meal-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    color: #6c757d;
    font-size: 0.9rem;
}

.meal-card-content-full {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.meal-card-header-full {
    margin-bottom: 1rem;
}

.meal-card-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.meal-card-date-subtitle {
    font-size: 0.85rem;
    color: #666;
    font-weight: 500;
}

.meal-card-date {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
    line-height: 1.3;
}

.meal-card-details-full {
    flex: 1;
    margin-bottom: 1.5rem;
    min-height: 0;
}

.meal-card-type {
    font-size: 0.9rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.meal-card-variants-full {
    font-size: 0.95rem;
    font-weight: 600;
    color: #3498db;
    margin-bottom: 0.75rem;
}

.meal-card-description {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin-top: 0.5rem;
}

.meal-card-description strong,
.meal-card-description b {
    font-weight: 700;
}

.meal-card-description em,
.meal-card-description i {
    font-style: italic;
}

.meal-card-description span[style*="font-size"] {
    display: inline-block;
}

.meal-card-accompaniments {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.accompaniment-item {
    font-size: 0.9rem;
    color: #2c3e50;
    line-height: 1.4;
}

.meal-card-loading {
    font-size: 0.85rem;
    color: #999;
    font-style: italic;
}

.btn-select-full {
    width: 100%;
    padding: 0.75rem;
    background-color: white;
    color: #2c3e50;
    border: 1px solid #2c3e50;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: auto;
}

.btn-select-full:hover {
    background-color: #2c3e50;
    color: white;
}

/* Responsive pour les cartes complètes */
@media (max-width: 768px) {
    .meal-card-image-full {
        height: 200px;
    }
    
    .meal-card-content-full {
        padding: 1rem;
    }
}

.calendar-meals {
    margin-top: 10px;
}

.meals-ordered,
.meals-available {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.meals-ordered strong,
.meals-available strong {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
    color: #2c3e50;
}

.meal-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    margin-bottom: 5px;
    border-radius: 4px;
    font-size: 0.9rem;
}

.meal-item.ordered {
    background-color: var(--tg-accent-soft);
    border-left: 3px solid var(--tg-accent);
}

.meal-item.available {
    background-color: var(--tg-accent-soft);
    border-left: 3px solid #2196f3;
    justify-content: space-between;
}

.meal-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.meal-price {
    font-size: 0.85rem;
    color: #666;
    font-weight: 600;
}

.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Calendrier mensuel en grille */
.calendar-grid {
    width: 100%;
    margin-top: 1rem;
}

.calendar-week-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 5px;
    font-weight: bold;
}

.calendar-day-header {
    padding: 0.75rem;
    background-color: var(--tg-accent);
    color: white;
    text-align: center;
    border-radius: 4px;
    font-size: 0.9rem;
}

.calendar-week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.calendar-day-cell {
    min-height: 150px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.5rem;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
}

.calendar-day-cell.empty {
    background-color: #f5f5f5;
    border: none;
}

.day-number {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: #2c3e50;
}

.day-meals {
    flex: 1;
    overflow-y: auto;
    max-height: 120px;
}

.meal-item-compact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 5px;
    margin-bottom: 5px;
    background-color: white;
    border-radius: 4px;
    font-size: 0.8rem;
}

.meal-image-small {
    width: 100%;
    max-width: 60px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    margin: 0 auto;
}

.meal-info-compact {
    text-align: center;
}

.meal-name-small {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.meal-price-small {
    display: block;
    font-size: 0.7rem;
    color: #666;
    font-weight: 600;
}

.no-meals {
    font-size: 0.75rem;
    color: #999;
    text-align: center;
    margin: 0.5rem 0;
    font-style: italic;
}

/* Responsive pour petits écrans */
@media (max-width: 768px) {
    .calendar-week-header,
    .calendar-week-grid {
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
    }
    
    .calendar-day-header {
        padding: 0.5rem 0.25rem;
        font-size: 0.7rem;
    }
    
    .calendar-day-cell {
        min-height: 120px;
        padding: 0.25rem;
    }
    
    .meal-name-small {
        font-size: 0.65rem;
    }
    
    .btn-xs {
        padding: 0.2rem 0.4rem;
        font-size: 0.65rem;
    }
}

/* Styles pour la section compte */
.compte-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Masquer le titre de page placé en tête de section (ex. Menu Mensuel) */
.section > h2:first-child {
    display: none !important;
}

.compte-section {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.compte-section h3 {
    margin-bottom: 1.5rem;
    color: #2c3e50;
    border-bottom: 2px solid var(--tg-accent);
    padding-bottom: 0.5rem;
}

/* Accordéon Mon compte (pas de h3 dans <button> : contenu phrasing uniquement) */
.compte-accordion-panel .compte-accordion-header {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: 0 0 0.5rem 0;
    margin: 0 0 1.5rem 0;
    border-bottom: 2px solid var(--tg-accent);
    font: inherit;
    color: inherit;
}
.compte-accordion-panel:not(.is-open) .compte-accordion-header {
    margin-bottom: 0;
    border-bottom-color: #e2e8f0;
}
.compte-accordion-panel .compte-accordion-header:hover {
    opacity: 0.92;
}
.compte-accordion-panel .compte-accordion-header .compte-accordion-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    border-bottom: none;
    padding-bottom: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: #2c3e50;
}
.compte-accordion-chevron {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tg-accent, #B75317);
    user-select: none;
    pointer-events: none;
}
.compte-accordion-chevron-svg {
    display: block;
    transition: transform 0.2s ease;
    transform: rotate(-90deg);
}
.compte-accordion-panel.is-open .compte-accordion-chevron-svg {
    transform: rotate(0deg);
}
/* Tailwind (important: true) peut écraser display:none ; l’attribut hidden + ce sélecteur assure le repli */
#compteContent .compte-accordion-body[hidden] {
    display: none !important;
}
.compte-accordion-panel:not(.is-open) .compte-accordion-body {
    display: none !important;
}
.compte-accordion-panel.is-open .compte-accordion-body:not([hidden]) {
    display: block !important;
}

.compte-section h4 {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    color: #34495e;
}

.required {
    color: #e74c3c;
}

/* Styles pour la liste des enfants */
#enfantsListCompte {
    margin-bottom: 2rem;
}

.enfant-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    margin-bottom: 0.75rem;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.enfant-item:hover {
    background-color: #e9ecef;
    border-color: #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.enfant-info {
    flex: 1;
}

.enfant-info strong {
    display: block;
    font-size: 1.1rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.enfant-details {
    display: flex;
    gap: 1.5rem;
    font-size: 0.9rem;
    color: #6c757d;
}

.enfant-details span {
    display: flex;
    align-items: center;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-danger {
    background-color: #e74c3c;
    color: white;
}

.btn-danger:hover {
    background-color: #c0392b;
}

/* Responsive pour la section compte */
@media (max-width: 768px) {
    .compte-section {
        padding: 1rem;
    }
    
    .enfant-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .enfant-details {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Styles pour le panier latéral */
.panier-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
}

.panier-sidebar.open {
    right: 0;
}

.panier-sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--tg-slate);
    color: white;
}

.panier-sidebar-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.panier-close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.panier-close-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.panier-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.panier-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
    font-size: 1.1rem;
}

.panier-item {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0.5rem;
}

.panier-item-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 0.5rem;
}

.panier-item-name {
    font-weight: 600;
    color: var(--tg-ink);
    flex: 1;
}

.panier-item-remove {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0.25rem;
    transition: color 0.2s;
}

.panier-item-remove:hover {
    color: #dc2626;
}

.panier-item-details {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.panier-item-details div {
    margin-bottom: 0.25rem;
}

.panier-item-price {
    font-weight: 600;
    color: var(--tg-accent);
    text-align: right;
}

.panier-sidebar-footer {
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.panier-total {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    text-align: right;
    color: var(--tg-ink);
}

.panier-checkout-btn {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
}

.panier-checkout-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.panier-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.panier-overlay.active {
    display: block;
    opacity: 1;
}

@media (max-width: 768px) {
    .panier-sidebar {
        width: 100%;
        right: -100%;
    }
}

/* Styles pour l'éditeur de texte enrichi */
.rich-text-editor {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.rich-text-toolbar {
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    padding: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.rich-text-toolbar button {
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

.rich-text-toolbar button:hover {
    background: #f0f0f0;
}

.rich-text-toolbar button.active {
    background: #e0e0e0;
    border-color: #999;
}

.rich-text-toolbar select {
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: white;
    cursor: pointer;
}

.rich-text-toolbar input[type="color"] {
    width: 40px;
    height: 32px;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    padding: 0;
}

.rich-text-editor-content {
    min-height: 150px;
    padding: 12px;
    outline: none;
    background: white;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
}

.rich-text-editor-content:focus {
    outline: none;
}

.rich-text-editor-content p {
    margin: 0 0 8px 0;
}

.rich-text-editor-content p:last-child {
    margin-bottom: 0;
}

.menu-message-container {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.5;
}

.menu-message-container:empty {
    display: none;
}

.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.popup-container {
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.3);
    padding: 24px 28px;
    max-height: 80vh;
    overflow-y: auto;
    color: #0f172a;
    background-size: cover;
    background-position: center;
}

.popup-bg-tint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 12px;
}

.popup-size-small {
    width: 320px;
}

.popup-size-medium {
    width: 480px;
}

.popup-size-large {
    width: 800px;
    max-width: 95vw;
}

.popup-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    border: none;
    background: rgba(15, 23, 42, 0.8);
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
}

.popup-close-btn:hover {
    background: rgba(15, 23, 42, 1);
}

.popup-content-inner {
    position: relative;
    z-index: 1;
    font-size: 14px;
    line-height: 1.6;
}

/* Styles pour le calendrier de la page d'accueil */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    font-size: 11px;
}

.calendar-day {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px;
    min-height: 80px;
    background: #f9fafb;
    transition: all 0.2s ease;
}

.calendar-day:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.calendar-day-empty {
    min-height: 80px;
    background: transparent;
}

@media (max-width: 768px) {
    .calendar-grid {
        font-size: 9px;
        gap: 2px;
    }
    
    .calendar-day {
        padding: 4px;
        min-height: 60px;
    }
}

/* ================================
   Styles pour les différents layouts de menu mensuel
   ================================ */

/* Layout en grille pour 1, 2 ou 3 colonnes */
.meal-grid-one-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.meal-grid-two-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.meal-grid-three-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Ajustements pour mobile */
@media (max-width: 768px) {
    .meal-grid-two-columns,
    .meal-grid-three-columns {
        grid-template-columns: 1fr;
    }
}

/* Tailles de cartes */
.meal-card-small .meal-card-image-full {
    height: 100px;
}

.meal-card-small .meal-card-name {
    font-size: 0.9rem;
}

.meal-card-small .meal-card-description {
    font-size: 0.75rem;
}

.meal-card-small .btn-select-full {
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
}

.meal-card-medium .meal-card-image-full {
    height: 150px;
}

.meal-card-medium .meal-card-name {
    font-size: 1rem;
}

.meal-card-medium .meal-card-description {
    font-size: 0.85rem;
}

.meal-card-medium .btn-select-full {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.meal-card-large .meal-card-image-full {
    height: 200px;
}

.meal-card-large .meal-card-name {
    font-size: 1.1rem;
}

.meal-card-large .meal-card-description {
    font-size: 0.95rem;
}

.meal-card-large .btn-select-full {
    padding: 0.6rem 1.2rem;
    font-size: 0.95rem;
}

/* Carte sans image - ajustements spéciaux */
.meal-card-full.no-image {
    flex-direction: row;
}

.meal-card-full.no-image .meal-card-content-full {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.meal-card-full.no-image .meal-card-header-full {
    margin-bottom: 0.5rem;
}

.meal-card-full.no-image .meal-card-details-full {
    margin-bottom: 0.75rem;
}

.meal-card-full.no-image .btn-select-full {
    width: auto;
    align-self: flex-start;
}

/* Ajustements pour les cartes sans image en mode 2 colonnes */
@media (min-width: 769px) {
    .meal-grid-two-columns .meal-card-full.no-image {
        flex-direction: column;
    }
    
    .meal-grid-two-columns .meal-card-full.no-image .btn-select-full {
        width: 100%;
    }
}

/* ================================
   Styles pour l'accordéon (style liste simple)
   ================================ */

.meal-card-accordion {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.meal-card-accordion:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.meal-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.meal-accordion-header:hover {
    background-color: #f8f9fa;
}

.meal-accordion-header:active {
    background-color: #e9ecef;
}

.meal-card-title-with-diet {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.meal-accordion-header .meal-card-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    flex: 0 1 auto;
}

.meal-diet-icons {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.meal-diet-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border-radius: 50%;
    line-height: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}
.meal-diet-icon .meal-diet-icon-svg {
    display: block;
    width: 11px;
    height: 11px;
}
.meal-diet-icon .meal-diet-icon-svg--fill {
    width: 12px;
    height: 12px;
}
.menu-diet-legend .meal-diet-icon {
    width: 1.45rem;
    height: 1.45rem;
}
.menu-diet-legend .meal-diet-icon .meal-diet-icon-svg,
.menu-diet-legend .meal-diet-icon .meal-diet-icon-svg--fill {
    width: 12px;
    height: 12px;
}

/* Infobulle au survol des pastilles */
.meal-diet-icon[data-tip] {
    position: relative;
    cursor: help;
}
.meal-diet-icon[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    border-radius: 8px;
    background: #1f2d3b;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 80;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}
.meal-diet-icon[data-tip]:hover::after,
.meal-diet-icon[data-tip]:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

/* Légende des icônes (entre navigation et calendrier) */
.menu-diet-legend {
    margin: 0 0 1rem;
    padding: 0.65rem 1rem;
    background: #f8faf9;
    border: 1px solid #e4ebe8;
    border-radius: 12px;
}
.menu-diet-legend__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem 1.25rem;
}
.menu-diet-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #455065;
}
.menu-diet-legend__label {
    line-height: 1.2;
}
.menu-diet-legend__sep {
    width: 1px;
    height: 1.35rem;
    background: #c5d0cb;
    flex-shrink: 0;
    margin: 0 0.15rem;
}
@media (max-width: 640px) {
    .menu-diet-legend__inner {
        justify-content: flex-start;
        gap: 0.5rem 0.85rem;
    }
    .menu-diet-legend__item {
        font-size: 0.75rem;
    }
}

.meal-diet-vegetarian {
    background: #e8f5e9;
    color: #1b5e20;
    border-color: #a5d6a7;
}

.meal-diet-gluten-free {
    background: #fff8e1;
    color: #e65100;
    border-color: #ffcc80;
}

.meal-diet-halal {
    background: #e3f2fd;
    color: #0d47a1;
    border-color: #90caf9;
}

.meal-diet-hot {
    background: #ffebee;
    color: #b71c1c;
    border-color: #ef9a9a;
}

.meal-diet-cold {
    background: #e0f7fa;
    color: #006064;
    border-color: #80deea;
}

.meal-allergen-arachides {
    background: #efebe9;
    color: #5d4037;
    border-color: #bcaaa4;
}
.meal-allergen-gluten {
    background: #fff3e0;
    color: #e65100;
    border-color: #ffcc80;
}
.meal-allergen-oeufs {
    background: #fffde7;
    color: #f57f17;
    border-color: #fff59d;
}
.meal-allergen-fruits-mer {
    background: #e0f2f1;
    color: #00695c;
    border-color: #80cbc4;
}
.meal-allergen-lactose {
    background: #ede7f6;
    color: #5e35b1;
    border-color: #b39ddb;
}

.meal-card-header-full .meal-card-title-with-diet {
    width: 100%;
}

.meal-accordion-arrow {
    flex-shrink: 0;
    color: var(--tg-accent);
    transition: transform 0.3s ease;
    margin-left: 1rem;
}

.meal-accordion-content {
    transition: max-height 0.3s ease-out;
    background-color: #fafafa;
}

.meal-accordion-inner {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.meal-card-image-accordion {
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
}

.meal-card-image-accordion img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
    display: block;
}

.meal-card-description-accordion {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #555;
}

.meal-card-variants-accordion {
    font-size: 0.85rem;
    padding: 0.75rem;
    background: white;
    border-radius: 6px;
    border-left: 3px solid var(--tg-accent);
}

.meal-card-variants-accordion strong {
    color: var(--tg-accent);
}

/* Ajustements pour les petites cartes en mode accordéon */
.meal-card-accordion.meal-card-small .meal-accordion-header {
    padding: 0.75rem 1rem;
}

.meal-card-accordion.meal-card-small .meal-card-name {
    font-size: 0.9rem;
}

.meal-card-accordion.meal-card-small .meal-accordion-arrow {
    width: 16px;
    height: 16px;
}

.meal-card-accordion.meal-card-small .meal-accordion-inner {
    padding: 0.75rem 1rem;
}

.meal-card-accordion.meal-card-small .meal-card-image-accordion img {
    max-height: 150px;
}

/* Ajustements pour les grandes cartes en mode accordéon */
.meal-card-accordion.meal-card-large .meal-accordion-header {
    padding: 1.25rem 1.5rem;
}

.meal-card-accordion.meal-card-large .meal-card-name {
    font-size: 1.1rem;
}

.meal-card-accordion.meal-card-large .meal-accordion-arrow {
    width: 24px;
    height: 24px;
}

.meal-card-accordion.meal-card-large .meal-accordion-inner {
    padding: 1.25rem 1.5rem;
}

.meal-card-accordion.meal-card-large .meal-card-image-accordion img {
    max-height: 250px;
}

/* Animation smooth pour mobile */
@media (max-width: 768px) {
    .meal-accordion-header {
        padding: 0.875rem 1rem;
    }
    
    .meal-accordion-inner {
        padding: 0.875rem 1rem;
    }
    
    .meal-card-image-accordion img {
        max-height: 180px;
    }
}

/* ================================
   Layout spécial large pour semaine (2 colonnes)
   ================================ */

.menu-calendar-wide-week {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

.wide-week-row {
    display: grid;
    gap: 1.5rem;
    width: 100%;
}

/* Première ligne : 3 colonnes (Lun, Mar, Mer) */
.wide-week-row-three {
    grid-template-columns: repeat(3, 1fr);
}

/* Deuxième ligne : 2 colonnes (Jeu, Ven) - centrées */
.wide-week-row-two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 66.66%;
    margin: 0 auto;
}

/* Cellules de jour en mode large */
.calendar-day-cell-wide {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.3s ease;
}

.calendar-day-cell-wide:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.calendar-day-cell-wide .day-number-menu {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tg-accent);
    line-height: 1;
}

.calendar-day-cell-wide .day-name-menu {
    font-size: 1rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 0.5rem;
}

.calendar-day-cell-wide .day-meals-menu {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Ajustements pour les cartes dans le layout large */
.calendar-day-cell-wide .meal-card-full {
    height: 100%;
}

.calendar-day-cell-wide .meal-grid-two-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    height: 100%;
}

/* Cartes de repas en 2 colonnes - plus compactes */
.calendar-day-cell-wide .meal-grid-two-columns .meal-card-full {
    display: flex;
    flex-direction: column;
}

/* Images réduites dans le layout large pour optimiser l'espace */
.calendar-day-cell-wide .meal-card-image-full {
    height: 120px;
}

.calendar-day-cell-wide .meal-card-large .meal-card-image-full {
    height: 140px;
}

.calendar-day-cell-wide .meal-card-small .meal-card-image-full {
    height: 100px;
}

/* Ajustement du texte pour les cartes en 2 colonnes dans layout large */
.calendar-day-cell-wide .meal-grid-two-columns .meal-card-name {
    font-size: 0.95rem;
}

.calendar-day-cell-wide .meal-grid-two-columns .meal-card-description {
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Responsive pour le layout large */
@media (max-width: 1400px) {
    .calendar-day-cell-wide .meal-card-image-full {
        height: 110px;
    }
}

@media (max-width: 1200px) {
    .wide-week-row-three {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .wide-week-row-two {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    
    .calendar-day-cell-wide .meal-card-image-full {
        height: 100px;
    }
}

@media (max-width: 900px) {
    /* Passer en 1 colonne de repas par jour sur tablette */
    .calendar-day-cell-wide .meal-grid-two-columns {
        grid-template-columns: 1fr;
    }
    
    .calendar-day-cell-wide .meal-card-image-full {
        height: 140px;
    }
}

@media (max-width: 768px) {
    .wide-week-row-three,
    .wide-week-row-two {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    
    .menu-calendar-wide-week {
        gap: 1rem;
    }
    
    .wide-week-row {
        gap: 1rem;
    }
    
    .calendar-day-cell-wide {
        padding: 1rem;
    }
    
    .calendar-day-cell-wide .day-number-menu {
        font-size: 1.5rem;
    }
    
    .calendar-day-cell-wide .meal-card-image-full {
        height: 150px;
    }
    
    .calendar-day-cell-wide .meal-grid-two-columns {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   THÈME VERT SAPIN — Améliorations visuelles professionnelles
   Toutes les règles sont portées par [data-tg-theme="vert_sapin"].
   Aucun autre thème n'est affecté.
   ================================================================ */

/* --- Typographie & texte --- */
[data-tg-theme="vert_sapin"] h1,
[data-tg-theme="vert_sapin"] h2,
[data-tg-theme="vert_sapin"] h3 {
    font-family: 'Nunito', 'Open Sans', system-ui, -apple-system, sans-serif;
    letter-spacing: -0.01em;
}

/* --- Connexion : titre vert profond --- */
[data-tg-theme="vert_sapin"] #login-section h2,
[data-tg-theme="vert_sapin"] #register-section h2,
[data-tg-theme="vert_sapin"] #forgot-password-section h2,
[data-tg-theme="vert_sapin"] #reset-password-section h2 {
    color: #006B5F !important;
    font-weight: 700;
}

/* --- Cartes / panneaux auth (connexion, inscription, reset) --- */
[data-tg-theme="vert_sapin"] #login-section > div,
[data-tg-theme="vert_sapin"] #register-section > div,
[data-tg-theme="vert_sapin"] #forgot-password-section > div,
[data-tg-theme="vert_sapin"] #reset-password-section > div {
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(0, 107, 95, 0.10), 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

/* --- Inputs dans les sections auth (bordure verte douce, focus vert) --- */
[data-tg-theme="vert_sapin"] #login-section input,
[data-tg-theme="vert_sapin"] #register-section input,
[data-tg-theme="vert_sapin"] #forgot-password-section input,
[data-tg-theme="vert_sapin"] #reset-password-section input {
    border-color: #D7E2DD !important;
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* --- Boutons primaires : jaune accentué, texte sombre --- */
[data-tg-theme="vert_sapin"] .btn-primary {
    background-color: #F4B400 !important;
    color: #1F2937 !important;
    border: none !important;
    border-radius: 14px;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

[data-tg-theme="vert_sapin"] .btn-primary:hover {
    background-color: #E0A300 !important;
    color: #1F2937 !important;
}

[data-tg-theme="vert_sapin"] .btn-primary:active {
    transform: scale(0.98);
}

/* Formulaires auth : bouton Se connecter / S'inscrire / Envoyer */
[data-tg-theme="vert_sapin"] #loginForm button[type="submit"],
[data-tg-theme="vert_sapin"] #registerForm button[type="submit"],
[data-tg-theme="vert_sapin"] #forgotPasswordForm button[type="submit"],
[data-tg-theme="vert_sapin"] #resetPasswordForm button[type="submit"] {
    background-color: #F4B400 !important;
    color: #1F2937 !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
}

[data-tg-theme="vert_sapin"] #loginForm button[type="submit"]:hover,
[data-tg-theme="vert_sapin"] #registerForm button[type="submit"]:hover,
[data-tg-theme="vert_sapin"] #forgotPasswordForm button[type="submit"]:hover,
[data-tg-theme="vert_sapin"] #resetPasswordForm button[type="submit"]:hover {
    background-color: #E0A300 !important;
    color: #1F2937 !important;
}

/* --- Boutons secondaires : transparent, bordure verte --- */
[data-tg-theme="vert_sapin"] .btn-secondary {
    background-color: transparent !important;
    color: #006B5F !important;
    border: 2px solid #006B5F !important;
    border-radius: 14px;
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

[data-tg-theme="vert_sapin"] .btn-secondary:hover {
    background-color: #E8F2ED !important;
    border-color: #00564D !important;
    color: #00564D !important;
}

/* --- Cartes dashboard --- */
[data-tg-theme="vert_sapin"] .dashboard-card {
    border-radius: 18px !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.07) !important;
    border: 1px solid #E8F2ED;
}

[data-tg-theme="vert_sapin"] .dashboard-card h3 {
    color: #006B5F !important;
    font-weight: 700;
}

/* --- Section compte --- */
[data-tg-theme="vert_sapin"] .compte-section {
    border-radius: 18px !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.07) !important;
    border: 1px solid #E8F2ED;
}

[data-tg-theme="vert_sapin"] .compte-section h3 {
    color: #006B5F !important;
    border-bottom-color: #006B5F !important;
}

/* --- Sidebar admin --- */
[data-tg-theme="vert_sapin"] .admin-sidebar {
    border-radius: 18px !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.07) !important;
    border: 1px solid #E8F2ED;
}

[data-tg-theme="vert_sapin"] .admin-sidebar-title {
    color: #006B5F !important;
}

/* --- Formulaires généraux : inputs, selects --- */
[data-tg-theme="vert_sapin"] .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
[data-tg-theme="vert_sapin"] .form-group select,
[data-tg-theme="vert_sapin"] .form-control:not([type="checkbox"]):not([type="radio"]) {
    border-color: #D7E2DD !important;
    border-radius: 10px;
    color: #1F2937;
    background: #FFFFFF;
}

[data-tg-theme="vert_sapin"] .form-group input:not([type="checkbox"]):not([type="radio"]):focus,
[data-tg-theme="vert_sapin"] .form-group select:focus,
[data-tg-theme="vert_sapin"] .form-control:not([type="checkbox"]):not([type="radio"]):focus {
    border-color: #006B5F !important;
    box-shadow: 0 0 0 3px rgba(0, 107, 95, 0.15) !important;
    outline: none !important;
}

[data-tg-theme="vert_sapin"] textarea {
    border-color: #D7E2DD !important;
    border-radius: 10px;
    color: #1F2937;
}

[data-tg-theme="vert_sapin"] textarea:focus {
    border-color: #006B5F !important;
    box-shadow: 0 0 0 3px rgba(0, 107, 95, 0.15) !important;
    outline: none !important;
}

/* --- Tableaux --- */
[data-tg-theme="vert_sapin"] .table tr:hover {
    background-color: #F0F7F5 !important;
}

[data-tg-theme="vert_sapin"] .table th {
    background-color: #006B5F !important;
    color: #FFFFFF !important;
}

/* --- Sélecteur de mois (calendrier) --- */
[data-tg-theme="vert_sapin"] .month-selector {
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

/* --- Modales --- */
[data-tg-theme="vert_sapin"] .modal-content {
    border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14) !important;
}

/* --- Panier sidebar header --- */
[data-tg-theme="vert_sapin"] .panier-sidebar-header {
    background: #006B5F !important;
}

/* --- Jour numéro accent (layout large) --- */
[data-tg-theme="vert_sapin"] .calendar-day-cell-wide .day-number-menu {
    color: #006B5F !important;
}

/* --- Selects Tailwind inline (accueil, absence) --- */
[data-tg-theme="vert_sapin"] select.rounded-xl {
    border-color: #D7E2DD !important;
}

/* --- Focus outline global accessible --- */
[data-tg-theme="vert_sapin"] *:focus-visible {
    outline: 2px solid #006B5F;
    outline-offset: 2px;
}

/* --- Repas prépayés : compte des repas disponibles --- */
[data-tg-theme="vert_sapin"] #repasDisponibles {
    color: #006B5F !important;
}

/* ================================================================
   FIN des styles Vert Sapin
   ================================================================ */

/* ================================================================
   Catégories d'affichage du menu (Plats principaux, Breuvages, ...)
   ================================================================ */
.menu-category-section + .menu-category-section {
    margin-top: 12px;
}
.menu-category-heading {
    grid-column: 1 / -1;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #006B5F;
    margin: 14px 0 6px;
    padding-bottom: 4px;
    border-bottom: 2px solid rgba(0, 107, 95, 0.25);
}
.menu-category-heading:first-child {
    margin-top: 2px;
}

/* Compositeur de menu (admin) */
.menu-composer .mc-section {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 12px;
    margin: 10px 0;
    background: #fafafa;
}
.mc-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.mc-section-title {
    font-weight: 700;
    color: #006B5F;
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}
.mc-item {
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
    background: #fff;
}
.mc-item-top {
    display: flex;
    gap: 8px;
    align-items: center;
}
.mc-item-top .mc-nom {
    flex: 1;
}
.mc-item-remove {
    border: none;
    background: #dc3545;
    color: #fff;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}
.mc-item .mc-desc {
    width: 100%;
    margin-top: 6px;
}
.mc-item-img {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.mc-item-img .mc-thumb {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
}
.mc-item-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
    font-size: 0.85rem;
}
.mc-flags-label {
    font-weight: 600;
    color: #555;
}

/* Affichage menu: items en liste + popup au survol */
.menu-item-line {
    position: relative;
    padding: 4px 0;
    color: #c0392b;
    font-weight: 600;
    cursor: default;
}
.menu-item-line.has-popup {
    cursor: pointer;
}
.menu-item-line .menu-item-name {
    display: block;
}
.menu-item-line .menu-item-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px;
    align-items: center;
}
.menu-item-line .menu-item-hoverpop {
    display: none;
    position: absolute;
    z-index: 60;
    left: 0;
    top: 100%;
    width: 240px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    padding: 10px;
    color: #333;
    font-weight: 400;
}
.menu-item-line.has-popup:hover .menu-item-hoverpop {
    display: block;
}

/* ===================== Modal de commande de repas (meal-order-modal) ===================== */
.meal-order-modal-overlay {
    padding: 24px;
    background: rgba(31, 45, 59, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Réinitialisation isolée pour éviter tout débordement horizontal */
.meal-order-modal,
.meal-order-modal * {
    box-sizing: border-box;
    min-width: 0;
}
.meal-order-modal-overlay .meal-order-modal {
    --ink: #1f2d3b;
    --ink-soft: #5c6774;
    --green-card: #e8f4ec;
    --cream-card: #fbf3e1;
    --divider: #ecedef;
    --field-border: #e4e7eb;
    --teal: #0f7c66;
    --orange: #e79a1c;
    --blue: #2f6fe0;
    --purple: #9a3fa6;
    --green-btn: #1f8060;
    --yellow1: #f4ad05;
    --yellow2: #eda100;
    --chip-fork: #f3efe8;
    --chip-child: #d9edec;
    --chip-cloche: #fbe9d2;
    --chip-bev: #dbe7fb;
    --chip-dess: #eedcef;
    position: relative;
    width: 900px;
    max-width: calc(100vw - 48px);
    max-height: 92vh;
    background: #ffffff;
    border-radius: 30px;
    box-shadow: 0 30px 80px -20px rgba(31, 45, 59, 0.45);
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    color: var(--ink);
    font-family: 'Poppins', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    animation: momPop 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes momPop {
    from { transform: translateY(14px) scale(0.97); }
    to   { transform: translateY(0) scale(1); }
}
.meal-order-modal img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Bouton fermer */
.meal-order-modal .meal-order-modal__close {
    flex: 0 0 auto;
    align-self: flex-start;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--field-border);
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, background 0.15s ease;
}
.meal-order-modal .meal-order-modal__close img { width: 18px; height: 18px; }
.meal-order-modal .meal-order-modal__close:hover { background: #f5f6f8; transform: rotate(90deg); }

/* En-tête (collant) */
.meal-order-modal .meal-order-modal__header {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 30px 40px 16px;
    background: #fff;
}
.meal-order-modal .meal-order-modal__header-text { flex: 1 1 auto; min-width: 0; }
.meal-order-modal .meal-order-modal__header-icon {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--chip-fork);
    display: flex;
    align-items: center;
    justify-content: center;
}
.meal-order-modal .meal-order-modal__header-icon img { width: 34px; height: 34px; }
.meal-order-modal .meal-order-modal__title {
    margin: 0 0 4px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--ink);
    line-height: 1.15;
}
.meal-order-modal .meal-order-modal__subtitle {
    margin: 0;
    color: var(--ink-soft);
    font-size: 17px;
    font-weight: 400;
}

/* Corps */
.meal-order-modal .meal-order-modal__body {
    padding: 22px 40px 24px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* Carte date */
.meal-order-modal .meal-order-modal__date-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--green-card);
    border-radius: 20px;
    padding: 22px 30px;
    min-height: 118px;
    overflow: visible;
}
.meal-order-modal .meal-order-modal__date-icon {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.meal-order-modal .meal-order-modal__date-icon img { width: 28px; height: 28px; }
.meal-order-modal .meal-order-modal__date-text { flex: 1; padding-left: 18px; }
.meal-order-modal .meal-order-modal__date-label {
    color: var(--teal);
    font-weight: 600;
    font-size: 19px;
    margin-bottom: 4px;
}
.meal-order-modal .meal-order-modal__date-value {
    font-weight: 700;
    color: var(--ink);
    font-size: 22px;
    text-transform: capitalize;
}
.meal-order-modal .meal-order-modal__date-lunchbox {
    flex: 0 0 auto;
    width: 210px;
    max-width: 38%;
    max-height: 150px;
    object-fit: contain;
    transform: translateY(-16px);
    filter: drop-shadow(0 12px 18px rgba(31, 45, 59, 0.18));
    pointer-events: none;
}

/* Sections (libellé + champ) */
.meal-order-modal .meal-order-modal__section + .meal-order-modal__section { margin-top: 24px; }
.meal-order-modal .meal-order-modal__label-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.meal-order-modal .meal-order-modal__chip {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.meal-order-modal .meal-order-modal__chip img { width: 22px; height: 22px; }
.meal-order-modal .meal-order-modal__chip--child { background: var(--chip-child); }
.meal-order-modal .meal-order-modal__chip--cloche { background: var(--chip-cloche); }
.meal-order-modal .meal-order-modal__label {
    font-weight: 600;
    font-size: 19px;
    line-height: 1;
}
.meal-order-modal .meal-order-modal__label--child { color: var(--teal); }
.meal-order-modal .meal-order-modal__label--repas { color: var(--orange); }

/* Champs */
.meal-order-modal .meal-order-modal__field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
}
.meal-order-modal .meal-order-modal__field--repas { display: block; position: relative; }
.meal-order-modal .meal-order-modal__select-wrap { position: relative; min-width: 0; }

.meal-order-modal .meal-order-modal__select,
.meal-order-modal .meal-order-modal__section--variante select,
.meal-order-modal .meal-order-modal__section--variante input[type="text"] {
    width: 100%;
    height: 62px;
    padding: 0 52px 0 20px;
    border: 1.5px solid var(--field-border);
    border-radius: 14px;
    background: #fff;
    font-family: inherit;
    font-size: 19px;
    font-weight: 500;
    color: var(--ink);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.meal-order-modal .meal-order-modal__select--repas { padding-left: 64px; }

/* Chevron custom (enfant / repas) */
.meal-order-modal .meal-order-modal__chevron {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    pointer-events: none;
    transition: transform 0.2s ease;
}
.meal-order-modal .meal-order-modal__chevron img { width: 20px; height: 20px; }
.meal-order-modal .meal-order-modal__select:focus ~ .meal-order-modal__chevron {
    transform: translateY(-50%) rotate(180deg);
}

/* Chevron natif (variante) */
.meal-order-modal .meal-order-modal__section--variante select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239AA4B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
}
.meal-order-modal .meal-order-modal__section--variante input[type="text"][disabled] {
    cursor: default;
    background: #f5f6f8;
    color: var(--ink-soft);
}

/* Vignette ronde du repas */
.meal-order-modal .meal-order-modal__vignette {
    position: absolute;
    top: 50%;
    left: 11px;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--field-border);
    pointer-events: none;
    z-index: 1;
}
.meal-order-modal .meal-order-modal__vignette img { width: 100%; height: 100%; object-fit: cover; }

.meal-order-modal .meal-order-modal__select:focus,
.meal-order-modal select:focus,
.meal-order-modal input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(15, 124, 102, 0.12);
}
.meal-order-modal .meal-order-modal__section--variante .form-group { margin: 0 0 12px; }
.meal-order-modal .meal-order-modal__section--variante .form-group:last-child { margin-bottom: 0; }
.meal-order-modal .meal-order-modal__section--variante .form-group label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 19px;
    margin-bottom: 12px;
    color: var(--orange);
}
.meal-order-modal .meal-order-modal__section--variante .form-group:first-child label::before {
    content: "";
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--chip-cloche) url("assets/icons/cloche.svg") center / 22px 22px no-repeat;
}

/* Bouton ajouter un enfant */
.meal-order-modal .meal-order-modal__add-enfant {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 54px;
    padding: 0 18px 0 0;
    background: transparent;
    color: var(--teal);
    border: none;
    font-family: inherit;
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s ease;
}
.meal-order-modal .meal-order-modal__add-enfant:hover { transform: translateY(-1px); }
.meal-order-modal .meal-order-modal__add-plus {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--green-btn);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px -8px rgba(31, 128, 96, 0.7);
}
.meal-order-modal .meal-order-modal__add-plus img { width: 22px; height: 22px; }
.meal-order-modal .meal-order-modal__remove-enfant {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    border: 1px solid #f1cccc;
    background: #fdecec;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.meal-order-modal .meal-order-modal__remove-enfant img { width: 18px; height: 18px; }
.meal-order-modal .meal-order-modal__remove-enfant:hover { background: #f9dada; }

/* Encadré crème des items inclus */
.meal-order-modal .meal-order-modal__included-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--cream-card);
    border-radius: 20px;
    padding: 26px 32px;
    min-height: 195px;
}
.meal-order-modal .meal-order-modal__incl-col { padding: 0 8px; }
.meal-order-modal .meal-order-modal__incl-col--dessert {
    border-left: 1px solid #ecdcbf;
    padding-left: 32px;
}
.meal-order-modal .meal-order-modal__incl-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.meal-order-modal .meal-order-modal__incl-chip {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.meal-order-modal .meal-order-modal__incl-chip img { width: 22px; height: 22px; }
.meal-order-modal .meal-order-modal__incl-col--drink .meal-order-modal__incl-chip { background: var(--chip-bev); }
.meal-order-modal .meal-order-modal__incl-col--dessert .meal-order-modal__incl-chip { background: var(--chip-dess); }
.meal-order-modal .meal-order-modal__incl-title {
    font-weight: 700;
    font-size: 19px;
}
.meal-order-modal .meal-order-modal__incl-col--drink .meal-order-modal__incl-title { color: var(--blue); }
.meal-order-modal .meal-order-modal__incl-col--dessert .meal-order-modal__incl-title { color: var(--purple); }
.meal-order-modal .meal-order-modal__incl-tag { font-weight: 500; }
.meal-order-modal .meal-order-modal__incl-body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
}
.meal-order-modal .meal-order-modal__incl-items { flex: 1; min-width: 0; }
.meal-order-modal .meal-order-modal__incl-item {
    color: var(--ink-soft);
    font-size: 17px;
    font-weight: 500;
    padding: 6px 0;
}
.meal-order-modal .meal-order-modal__incl-photo {
    flex: 0 0 auto;
    width: 170px;
    max-width: 46%;
    max-height: 120px;
    object-fit: contain;
}
.meal-order-modal .meal-order-modal__incl-col--dessert .meal-order-modal__incl-photo {
    width: 205px;
    max-width: 52%;
}

/* Pied du modal (collant) */
.meal-order-modal .meal-order-modal__footer {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding: 20px 40px 26px;
    border-top: 1px solid var(--divider);
    background: #fff;
}
.meal-order-modal .meal-order-modal__btn-cancel {
    min-width: 150px;
    height: 56px;
    padding: 0 26px;
    border-radius: 14px;
    border: 1px solid var(--field-border);
    background: #fff;
    color: var(--ink);
    font-family: inherit;
    font-weight: 600;
    font-size: 17px;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}
.meal-order-modal .meal-order-modal__btn-cancel:hover { background: #f6f7f9; transform: translateY(-1px); }
.meal-order-modal .meal-order-modal__btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 300px;
    max-width: 100%;
    height: 56px;
    padding: 0 30px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(180deg, var(--yellow1), var(--yellow2));
    color: #ffffff;
    font-family: inherit;
    font-weight: 700;
    font-size: 17px;
    cursor: pointer;
    box-shadow: 0 12px 22px -10px rgba(231, 154, 28, 0.75);
    transition: transform 0.15s ease, filter 0.15s ease;
}
.meal-order-modal .meal-order-modal__btn-submit:hover { filter: brightness(0.97); transform: translateY(-1px); }
.meal-order-modal .meal-order-modal__btn-submit img { width: 26px; height: 26px; }

@media (max-width: 820px) {
    .meal-order-modal-overlay { padding: 12px; }
    .meal-order-modal-overlay .meal-order-modal { max-width: calc(100vw - 24px); border-radius: 24px; }
    .meal-order-modal .meal-order-modal__header { padding: 22px 22px 14px; gap: 14px; }
    .meal-order-modal .meal-order-modal__header-icon { width: 52px; height: 52px; }
    .meal-order-modal .meal-order-modal__header-icon img { width: 28px; height: 28px; }
    .meal-order-modal .meal-order-modal__title { font-size: 22px; }
    .meal-order-modal .meal-order-modal__subtitle { font-size: 14px; }
    .meal-order-modal .meal-order-modal__body { padding: 18px 22px 18px; gap: 22px; }
    .meal-order-modal .meal-order-modal__date-value { font-size: 19px; }
    .meal-order-modal .meal-order-modal__date-lunchbox { width: 130px; max-height: 104px; }
    .meal-order-modal .meal-order-modal__field--enfant {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .meal-order-modal .meal-order-modal__add-enfant { width: 100%; justify-content: flex-start; }
    .meal-order-modal .meal-order-modal__included-card {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px 22px;
    }
    .meal-order-modal .meal-order-modal__incl-col { padding: 0; }
    .meal-order-modal .meal-order-modal__incl-col--dessert {
        border-left: none;
        border-top: 1px solid #ecdcbf;
        padding-left: 0;
        padding-top: 24px;
    }
    .meal-order-modal .meal-order-modal__footer {
        flex-direction: column-reverse;
        gap: 12px;
        padding: 16px 22px 20px;
    }
    .meal-order-modal .meal-order-modal__btn-cancel,
    .meal-order-modal .meal-order-modal__btn-submit { width: 100%; }
}
.menu-item-hoverpop img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 6px;
}
.menu-item-hoverpop .menu-item-hoverpop-desc {
    font-size: 0.85rem;
    line-height: 1.3;
}