/* ==========================================================================
   1. VARIABLES & CONFIGURATION
   ========================================================================== */
:root {
    --primary: #ffffff;
    --secondary: #64b5f6;
    --accent: #2e7d32;
    --danger: #d32f2f;
    --light-bg: #e3f2fd;
    --border: #1565c0;

/* Couleurs des Plans - Version Saturée */
    --eco-main: #27ae60;    /* Vert plus franc */
    --eco-soft: #e8f5e9;    /* Fond vert plus visible */
    
    --std-main: #2980b9;    /* Bleu plus soutenu (au lieu de l'orange std actuel) */
    --std-soft: #e3f2fd;    /* Fond bleu plus visible */
    
    --gold-main: #d4af37;   /* Vrai Or (Gold métallique) */
    --gold-soft: #fff9e6;   /* Fond doré plus chaud */

    --text-dark: #2c3e50;

    --radius: 8px;
    --shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    --font-main: 'Inter', 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-main);
    background-color: var(--light-bg);
    color: var(--text-dark); 
    line-height: 1.6;
    font-size: 16px;
    padding: 20px 0;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    background: #ffffff;
    color: var(--text-dark);
    padding: 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid #bbdefb;
}

h1 {
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 2rem;
    color: var(--text-dark);
}

h2 {
    font-size: 1.4rem;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 10px;
    display: inline-block;
    color: #1b5e20;
}

.light { font-weight: 300; }
.section-title { margin: 30px 0 20px; }
a { color: #1e88e5; text-decoration: none; transition: 0.3s; }



/* ==========================================================================
   3. STRUCTURE ET MISE EN PAGE (LAYOUT)
   ========================================================================== */
.row-dates, .row-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.col-4-12 { flex: 1 1 30%; min-width: 200px; }
.col-6-12 { flex: 1 1 48%; min-width: 220px; }

.divider-text, .menu-separator {
    text-align: center;
    margin: 30px 0;
    font-weight: bold;
    color: #999;
}

#hebergement-details {
    margin-top: 20px;
    border: 1px solid #bbdefb;
    padding: 20px;
    border-radius: var(--radius);
    background: #fcfcfc;
}

/* ==========================================================================
   4. FORMULAIRE (INPUTS, LABELS, CHECKBOX)
   ========================================================================== */
.form-group { margin-bottom: 25px; }

label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--accent);
}

.iti { width: 100%; display: block; }

input[type="text"], input[type="number"], input[type="email"],
input[type="tel"], input[type="date"], select, textarea {
    width: 100%;
    padding: 14px;
    background-color: #f5f5f5;
    border: 1px solid #90caf9;
    color: var(--text-dark);
    border-radius: var(--radius);
    font-size: 1rem;
    transition: all 0.3s;
    display: block;
}

input:focus, select:focus, textarea:focus {
    background-color: #ffffff;
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem rgba(46, 125, 50, 0.25);
    outline: none;
}

input[type="radio"] {
    accent-color: var(--accent);
    transform: scale(1.4);
    cursor: pointer;
}

input.is-invalid, textarea.is-invalid, select.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 0.2rem rgba(211, 47, 47, 0.25);
}

.required { color: var(--danger); margin-left: 2px; font-weight: bold; }
.input-wrapper { position: relative; display: inline-block; width: 100%; }

.clear-cross {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--danger);
    font-weight: bold;
    font-size: 1.2rem;
    transition: color 0.2s;
}

.rgpd-container {
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.rgpd-container input[type="checkbox"] { width: auto !important; margin-top: 5px; }

/* ==========================================================================
   5. COMPTEURS UNIVERSELS (Groupe, Repas, Pic-nics)
   ========================================================================== */

/* Le conteneur "Pilule" */
.counter-group, .picnic-counter-group {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background: #bbdefb; /* Bleu clair uniforme */
    border-radius: 30px;
    padding: 3px;
    width: 125px; 
    height: 40px;
    box-sizing: border-box;
    vertical-align: middle;
}

/* Les boutons ronds blancs */
.btn-qty, .btn-picnic-qty {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    background: #ffffff;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    color: #1565c0;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 0;
    margin: 0;
    transition: transform 0.1s ease, background 0.2s;
}

.btn-qty:active, .btn-picnic-qty:active {
    transform: scale(0.9);
}

.btn-qty:hover, .btn-picnic-qty:hover {
    background: #f8f9fa;
}

/* L'input au milieu */
.counter-group input[type="number"], 
.picnic-counter-group input[type="number"] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: #0d47a1;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    height: 34px;
    padding: 0;
    margin: 0;
    -moz-appearance: textfield;
    pointer-events: none; /* On ne tape pas au clavier, on utilise les boutons */
}

/* Suppression des flèches navigateur */
.counter-group input::-webkit-outer-spin-button,
.counter-group input::-webkit-inner-spin-button,
.picnic-counter-group input::-webkit-outer-spin-button,
.picnic-counter-group input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* ==========================================================================
   6. BOUTONS ACTION
   ========================================================================== */
.button-group {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
}

/* --- Base Commune --- */
button, .btn-reserve, .btn-next, .btn-prev {
    display: block;
    width: 100%;
    min-height: 54px;
    padding: 14px 28px;
    border: none;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

/* --- Bouton Primaire (Suivant, Valider, Réserver) --- */
button[type="submit"], .btn-reserve, .btn-next {
    background-color: var(--accent);
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button[type="submit"]:hover, .btn-reserve:hover, .btn-next:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transform: translateY(-1px);
}

/* --- Bouton Secondaire (Retour, Précédent) --- */
button.secondary, .btn-prev {
    background-color: #e3f2fd; /* Bleu très clair */
    color: #0d47a1;
    border: 1px solid #90caf9;
}

button.secondary:hover, .btn-prev:hover {
    background-color: #bbdefb;
    border-color: #1565c0;
}

/* --- Cas particulier : Petit bouton modif --- */
.btn-recap-modif {
    display: inline-flex !important;
    width: auto; /* Évite le 100% de la base commune */
    min-height: auto;
    padding: 2px 8px !important;
    background-color: #3498db !important;
    color: #ffffff !important;
    font-size: 11px !important;
    border-radius: 4px !important;
    font-weight: 500;
}

/* --- Spécifique Étape 3 --- */
.btn-groupe {
    flex: 1 !important;
    width: auto !important;
}

.button-group {
    display: flex !important;
    gap: 20px !important;
    justify-content: space-between !important;
    margin-top: 40px !important;
    padding-bottom: 50px !important; /* Espacement en dessous pour la respiration */
}

/* ==========================================================================
   7. COMPOSANTS D'ALERTE ET D'INFORMATION
   ========================================================================== */
.inclusion-box {
    padding: 15px;
    border-radius: var(--radius);
    background: #f8f9fa;
    border-left: 5px solid var(--text-dark);
    color: var(--text-dark) !important;
    margin-bottom: 20px;
}

.msg-info { background: #e3f2fd; color: #0d47a1; border-left: 5px solid #2196f3; padding: 12px; margin: 10px 0; border-radius: 4px; font-size: 0.9rem; }
.msg-success { background: #e8f5e9; color: #1b5e20; border-left: 5px solid #4caf50; padding: 12px; margin: 10px 0; border-radius: 4px; font-size: 0.9rem; }
.msg-warning { background: #fff8e1; color: #856404; border-left: 5px solid #ffc107; padding: 12px; margin: 10px 0; border-radius: 4px; font-size: 0.9rem; }
.msg-danger { background: #ffebee; color: #b71c1c; border-left: 5px solid #f44336; padding: 12px; margin: 10px 0; border-radius: 4px; font-size: 0.9rem; }
.msg-mute { background: #f5f5f5; color: #616161; border-left: 5px solid #bdbdbd; padding: 12px; margin: 10px 0; border-radius: 4px; font-size: 0.9rem; }
.msg-rule { background: #e8eaf6; color: #1a237e; border-left: 5px solid #3f51b5; padding: 12px; margin: 10px 0; border-radius: 4px; font-size: 0.9rem; }
.msg-promo { background: #e0f7fa; color: #006064; border-left: 5px solid #00bcd4; padding: 12px; margin: 10px 0; border-radius: 4px; font-size: 0.9rem; }
.msg-premium { background: #efebe9; color: #4e342e; border-left: 5px solid #8d6e63; padding: 12px; margin: 10px 0; border-radius: 4px; font-size: 0.9rem; }

.pay-icons {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 1.3rem;
}

.alert-important {
    background-color: #f1f9f4;
    color: var(--text-dark);
    border: 2px solid #27ae60;
    border-radius: var(--radius);
    padding: 15px;
    margin-bottom: 25px;
}

.special-offer-label, .clickable-card {
    cursor: pointer;
    display: block;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 5px;
    background: white;
    border: 1px solid #eee;
    transition: background 0.2s;
}

.special-offer-label:hover, .clickable-card:hover { background: #f9f9f9; }
.promo-badge { background-color: #2e7d32; color: white; padding: 5px 10px; border-radius: 4px; display: inline-block; margin-bottom: 10px; }

/* --- BULLES D'ERREUR (Version Pro avec triangle) --- */
.error-bubble {
    position: absolute;
    background: #d32f2f;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    z-index: 99999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.error-bubble::after {
    content: '';
    position: absolute;
    top: 100%; 
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #d32f2f;
}

.error-box, .error-summary {
    background-color: #ffebee;
    color: #c62828;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #ef9a9a;
}

.qty-error { color: var(--danger); font-size: 0.7rem; font-weight: bold; }

.security-note {
    display: block;
    font-size: 0.85rem;
    color: #1565c0;
    background: #e3f2fd;
    padding: 10px 15px;
    border-radius: var(--radius);
    margin-bottom: 12px;
    font-weight: 600;
}

/* ==========================================================================
   8. BARRE DE PROGRESSION
   ========================================================================== */
.progress-container { margin-bottom: 30px; text-align: center; }
.progress-text { display: block; font-weight: 600; color: var(--text-dark); margin-bottom: 8px; }
.progress-bar { width: 100%; height: 12px; background-color: #bbdefb; border-radius: 8px; overflow: hidden; }
.progress-fill { height: 100%; background-color: var(--accent); border-radius: 8px 0 0 8px; transition: width 0.4s; }

/* ==========================================================================
   9. TABLEAUX ET RÉCAPITULATIF
   ========================================================================== */
.table-custom { border-radius: 14px; overflow: hidden; border: 1px solid #1565c0; background: #ffffff; }
.table thead th { padding: 20px; font-weight: 700; color: #ffffff; text-align: center; }

/* Fond des colonnes - On force l'opacité pour que ce ne soit plus fade */
.col-eco { background-color: var(--eco-soft) !important; border-left: 1px solid #c8e6c9; }
.col-std { background-color: var(--std-soft) !important; border-left: 1px solid #bbdefb; }
.col-gold { background-color: var(--gold-soft) !important; border-left: 1px solid #f9f1d7; }

/* En-têtes - Texte en gras blanc sur couleur vive */
.head-eco { background-color: var(--eco-main) !important; color: white !important; }
.head-std { background-color: var(--std-main) !important; color: white !important; }
.head-gold { background-color: var(--gold-main) !important; color: white !important; }

/* Optionnel : accentuer les prix en bas de colonne */
.total-cell .price-display {
    color: var(--text-dark);
    font-size: 1.1rem !important;
}

.config-summary h6 {
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    margin-bottom: 8px !important;
    color: var(--text-dark);
}

.recap-list { list-style: none; padding: 0; text-align: center; }

/* ==========================================================================
   10. UTILITAIRES ET ÉTATS
   ========================================================================== */
.menu-titre { color: #0d47a1 !important; font-weight: bold; text-transform: uppercase; }
.menu-details { font-size: 0.85rem; font-style: italic; color: #546e7a !important; }
.label-categorie-repas { color: #2c3e50 !important; font-weight: 600; font-size: 0.8rem; margin-right: 10px; }
.price-tag { font-size: 1.5rem; color: var(--accent); line-height: 1; }
.text-dark { color: var(--text-dark); }
.text-center { text-align: center; }
.text-muted { color: #666 !important; font-size: 0.9rem; }
.small { font-size: 0.85rem; }

.is-disabled { opacity: 0.4; pointer-events: none !important; }
.is-blocked { cursor: not-allowed; }

.col-centered { display: flex; flex-direction: column; align-items: center; text-align: center; }
.small-title { text-transform: uppercase; font-size: 0.75rem; color: var(--text-dark); margin-bottom: 8px; letter-spacing: 0.5px; }

.full-width-grid { display: flex; flex-wrap: wrap; gap: 20px; width: 100%; }



@media (max-width: 768px) {
    .col-4-12, .col-6-12 { flex: 1 1 100%; }
    .repas-selecteur-zone {
        display: flex;
        gap: 15px;
        flex-wrap: wrap; 
        width: 100%;
    }
}

/* --- Styles isolés pour la page de configuration --- */

.booking-page-container {
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.booking-card-main {
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 40px;
    max-width: 600px;
    width: 100%;
    text-align: center;
}

.booking-btn-start {
    background-color: #0056b3;
    color: white !important;
    padding: 15px 40px;
    font-size: 1.2rem;
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.2s, background-color 0.2s;
    display: inline-block;
    margin-top: 25px;
    border: none;
}

.booking-btn-start:hover {
    background-color: #004494;
    transform: translateY(-2px);
}

.booking-footer-text {
    color: #6c757d;
    margin-top: 20px;
    font-size: 0.9rem;
}

/* --- LE REPARATEUR D'ALIGNEMENT (ÉTAPES 3, 4, 5) --- */

/* On cible le conteneur de chaque ligne */
.menu-item, .picnic-item-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #eee;
}

/* On s'assure que le texte reste à gauche et prend la place libre */
.menu-text, .picnic-info-text {
    flex: 1 !important;
    text-align: left !important;
}

/* On verrouille le bloc compteur à droite */
/* --- LE COMPTEUR "MODERN NATURE" --- */
.counter-group, .picnic-counter-group {
    display: inline-flex !important;
    align-items: center !important;
    background: #ffffff !important; /* Fond blanc pur */
    border: 1.5px solid #d1d9e0 !important; /* Bordure fine grise */
    border-radius: 8px !important; /* Carré adouci plutôt que pilule */
    padding: 2px !important;
    width: 110px !important;
    height: 38px !important;
    overflow: hidden;
    transition: border-color 0.3s;
}

.counter-group:hover, .picnic-counter-group:hover {
    border-color: #2e7d32 !important; /* Devient vert au survol */
}

/* Les Boutons - et + */
.btn-qty, .btn-picnic-qty {
    width: 30px !important;
    height: 30px !important;
    background: #f8f9fa !important;
    color: #37474f !important;
    border: none !important;
    border-radius: 4px !important; /* Petits carrés arrondis */
    cursor: pointer !important;
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    box-shadow: none !important; /* On enlève l'ombre lourde */
}

.btn-qty:hover, .btn-picnic-qty:hover {
    background: #2e7d32 !important; /* Vert forêt au survol */
    color: white !important;
}

/* Le Chiffre */
.counter-group input, .picnic-counter-group input {
    flex: 1 !important;
    width: 30px !important;
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: #2c3e50 !important;
    pointer-events: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* État bloqué (quand la capacité max est atteinte) */
.btn-qty.is-blocked {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    background: #eee !important;
    color: #aaa !important;
}

/* Style par défaut (Mobile First) : une seule colonne */
.recap-columns {
    width: 100%;
}

/* Style pour tablettes et ordinateurs (Largeur > 768px) */
@media (min-width: 768px) {
    .recap-columns {
        column-count: 2;
        column-gap: 20px;
    }
}

.step-section {
    display: inline-block;
    width: 100%;
}

.recap-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.recap-columns {
    column-count: 2;
    column-gap: 20px;
    width: 100%;
}

.step-section {
    display: inline-block; /* Empêche la carte de se couper entre deux colonnes */
    width: 100%;
}

.recap-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 30px; /* Espace vertical entre les cartes */
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
 
        .recap-card p {
            margin: 2px 0;
            font-size: 0.85rem;
            line-height: 1.3;
        }
        .btn-recap-modif {
            align-self: flex-start;
            margin-top: 10px;
            padding: 4px 8px;
            font-size: 0.75rem;
            background: #f8f9fa;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
            color: #333;
        }
        .full-width { grid-column: 1 / -1; }
        .recap-item {
            font-size: 0.8rem;
            background: #f1f7ff;
            padding: 4px 8px;
            border-radius: 3px;
            display: block;
            margin: 4px 0;
            color: #0056b3;
            width: fit-content;
        }
        .recap-sub-item {
            font-size: 0.75rem;
            color: #555;
            margin-left: 15px;
            display: block;
        }
        .menu-title { font-weight: bold; color: #333; display: block; margin-top: 5px; }
        .error-alert { border: 2px solid #ff4444; background: #fff5f5; padding: 15px; border-radius: 8px; margin-bottom: 20px; }