/* ─── Portail Traiteur Lagunes ─── */
/* Direction "Élégance Verte" — mêmes classes/IDs que traiteur_wizard.js
   (ne pas renommer : .traiteur-type-card, #traiteur-steps, .niveau-card,
   #recap-content... sont lus par le widget JS). Seule l'habillage change.
   Police Fraunces/Inter chargée via <link> dans le template (pas d'@import
   ici, cf. traiteur_style.css pour l'explication). */

:root {
    --traiteur-primary: #1f4d38;
    --traiteur-primary-mid: #2f6b4d;
    --traiteur-accent: #c9a227;
    --traiteur-cream: #f8f4ea;
    --traiteur-ink: #173a2b;
    --traiteur-soft: #7c8574;
    --traiteur-border: #e9e4d6;
    --traiteur-bg: #f8f4ea;
    --radius-xl: 1.5rem;
}

body { font-family: 'Inter', sans-serif; }

/* Transitions globales */
.transition-hover {
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.transition-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}

/* Carte du formulaire */
#traiteur_form .card { border-radius: 28px !important; background: #fff; }
#traiteur_form .card-footer { background: #fff !important; }
#traiteur_form h3.fw-bold { font-family: 'Fraunces', serif; font-weight: 600; color: var(--traiteur-ink); }

/* Wizard Progress Bar */
#traiteur-steps { background: var(--traiteur-cream) !important; }
#traiteur-steps .nav-link {
    color: var(--traiteur-soft);
    font-family: 'Inter', sans-serif;
    border: none;
    transition: all 0.3s ease;
}
#traiteur-steps .nav-link.bg-light {
    background: #e8f0ea !important; color: var(--traiteur-primary-mid) !important;
}
#traiteur-steps .nav-link.active {
    background-color: var(--traiteur-primary) !important;
    color: white !important;
    box-shadow: 0 8px 15px rgba(31, 77, 56, 0.2);
}

/* Radio Cards (Step 1) */
.traiteur-type-card {
    border: 1.5px solid var(--traiteur-border) !important;
    background: var(--traiteur-cream);
    color: var(--traiteur-ink) !important;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 18px !important;
}
.btn-check:checked + .traiteur-type-card {
    border-color: var(--traiteur-primary) !important;
    background-color: #eef3ec !important;
    color: var(--traiteur-ink) !important;
    box-shadow: 0 0 0 3px rgba(31, 77, 56, 0.1);
}
.btn-check:checked + .traiteur-type-card .h5,
.btn-check:checked + .traiteur-type-card .small,
.btn-check:checked + .traiteur-type-card i {
    color: var(--traiteur-primary) !important;
}
.traiteur-type-card i {
    color: var(--traiteur-primary);
}
.traiteur-type-card .h5 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px; }

/* Formules (niveaux), étape 2 */
.niveau-card .btn-outline-primary {
    border: 1.5px solid var(--traiteur-border) !important; color: var(--traiteur-ink) !important;
    background: var(--traiteur-cream) !important; border-radius: 16px !important;
}
.niveau-card input:checked + .btn-outline-primary {
    border-color: var(--traiteur-primary) !important; background: #eef3ec !important;
}
.niveau-card .h5 { font-family: 'Fraunces', serif; font-weight: 600; color: var(--traiteur-ink); }

/* Options / logistique, étape 4 */
#step-4 .card { border-color: var(--traiteur-border) !important; border-radius: 16px !important; }
#step-4 .bg-primary-subtle { background: #eef3ec !important; }
#step-4 .text-primary { color: var(--traiteur-primary) !important; }

/* Form Inputs */
.form-control, .form-select {
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--traiteur-border);
    background-color: var(--traiteur-cream);
}
.form-control:focus, .form-select:focus {
    border-color: var(--traiteur-primary-mid);
    box-shadow: none;
    background-color: white;
}
.form-label.fw-bold { font-family: 'Inter', sans-serif; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--traiteur-soft); }

/* Toggle durée (1 jour / plusieurs jours) */
#date_mode_single + label, #date_mode_range + label {
    border: 1.5px solid var(--traiteur-border) !important; color: var(--traiteur-soft) !important;
    border-radius: 12px !important; background: var(--traiteur-cream) !important;
}
#date_mode_single:checked + label, #date_mode_range:checked + label {
    border-color: var(--traiteur-primary) !important; color: var(--traiteur-primary) !important; background: #eef3ec !important;
}

/* Buttons — le fond au clic (:active/.active) est fixe par Bootstrap via un
   selecteur plus precis que ".btn-primary" seul (ex: ".btn:first-child:active"),
   qui regagne sur une simple redefinition de variable CSS. On cible ces memes
   selecteurs avec !important pour garantir que le vert l'emporte dans tous les
   etats (repos/survol/actif/focus), pas seulement au repos. */
.btn-primary {
    background-color: var(--traiteur-primary);
    border-color: var(--traiteur-primary);
    font-family: 'Inter', sans-serif; font-weight: 700;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary.active,
.btn-primary:first-child:active,
:not(.btn-check) + .btn-primary:active {
    background-color: var(--traiteur-primary-mid) !important;
    border-color: var(--traiteur-primary-mid) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.btn-outline-primary#prev-step {
    color: var(--traiteur-primary) !important; border-color: var(--traiteur-primary) !important;
}
.btn-outline-primary#prev-step:hover,
.btn-outline-primary#prev-step:focus {
    background: #eef3ec !important; color: var(--traiteur-primary) !important; border-color: var(--traiteur-primary) !important;
    box-shadow: none !important;
}
.btn-outline-primary#prev-step:active,
.btn-outline-primary#prev-step.active,
.btn-outline-primary#prev-step:first-child:active {
    background: var(--traiteur-primary) !important; color: #fff !important; border-color: var(--traiteur-primary) !important;
    box-shadow: none !important;
}

/* ── Modale de validation ─────────────────────────────────────────── */
#errorModal .modal-content { background: var(--traiteur-cream); }
#errorModal .traiteur-alert-icon {
    width: 68px; height: 68px; border-radius: 50%;
    background: linear-gradient(135deg, var(--traiteur-accent), #e0bb4a);
    color: var(--traiteur-ink);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto; font-size: 26px;
    box-shadow: 0 8px 20px rgba(201, 162, 39, .35);
}
#errorModal .traiteur-alert-text {
    color: var(--traiteur-ink); font-size: 15.5px; line-height: 1.6;
    max-width: 34ch; margin: 0 auto; font-family: 'Inter', sans-serif;
}
#errorModal .btn-close { opacity: .45; }
#errorModal .btn-close:hover { opacity: .75; }

/* Step Animations */
.traiteur-step-content {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Custom Checkbox */
.form-check-input:checked {
    background-color: var(--traiteur-primary);
    border-color: var(--traiteur-primary);
}

/* Sticky Recap */
#recap-content .fw-bold {
    color: var(--traiteur-primary);
}
.bg-light.rounded-4.sticky-top { background: var(--traiteur-cream) !important; }
.bg-light.rounded-4.sticky-top h4 { font-family: 'Fraunces', serif; font-weight: 600; color: var(--traiteur-ink); }

/* ── Formule par type (étape 2) ──────────────────────────────────────── */
.niveau-type-group + .niveau-type-group {
    border-top: 1px dashed var(--traiteur-border);
    padding-top: 24px;
}

/* ── Jours personnalisés (étape 2) ───────────────────────────────────── */
.day-override-card {
    background: #fff;
    border-color: var(--traiteur-border) !important;
}
.day-override-card .day-niveau-groups .niveau-type-group {
    border-top: none;
    padding-top: 8px;
}
.day-override-card .day-niveau-groups .niveau-type-group p.fw-bold {
    display: none; /* le nom du type est déjà dans le titre de la carte jour */
}

/* ── Menu réel avec quota (étape 3) ──────────────────────────────────── */
.menu-day-card {
    background: #fff;
    border-color: var(--traiteur-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 10px rgba(23, 58, 43, .05);
}
.menu-day-card h5 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    color: var(--traiteur-ink);
}

.trt-cat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 24px 0 12px;
}
.menu-category:first-of-type .trt-cat-head { margin-top: 4px; }
.trt-cat-title-wrap { display: flex; align-items: center; gap: 10px; }
.trt-cat-ic {
    width: 32px; height: 32px; border-radius: 10px;
    background: #eef3ec; color: var(--traiteur-primary);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.trt-cat-ic svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.trt-cat-title { font-size: 14.5px; font-weight: 800; color: var(--traiteur-ink); }

.quota-badge.trt-quota-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--traiteur-primary);
    background: var(--traiteur-cream);
    border: 1px solid var(--traiteur-border);
    border-radius: 999px;
    padding: 4px 12px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    transition: background .15s, color .15s, border-color .15s;
}
.quota-badge.trt-quota-badge.trt-quota-full {
    background: var(--traiteur-primary);
    color: #fff;
    border-color: var(--traiteur-primary);
}

.trt-plat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}
.trt-plat-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid var(--traiteur-border);
    border-radius: 12px;
    padding: 11px 14px;
    background: var(--traiteur-cream);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s, opacity .15s;
}
.trt-plat-chip:hover { border-color: var(--traiteur-primary-mid); }
.trt-plat-chip.trt-sel {
    border-color: var(--traiteur-primary);
    background: #eef3ec;
    box-shadow: 0 0 0 3px rgba(31, 77, 56, .08);
}
.trt-plat-chip.trt-disabled { opacity: .45; cursor: not-allowed; }
.trt-plat-box {
    width: 18px; height: 18px; border-radius: 6px;
    border: 1.5px solid var(--traiteur-border);
    flex-shrink: 0; background: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.trt-plat-chip.trt-sel .trt-plat-box {
    background: var(--traiteur-primary);
    border-color: var(--traiteur-primary);
}
.trt-plat-box svg { width: 10px; height: 10px; opacity: 0; transition: opacity .15s; }
.trt-plat-chip.trt-sel .trt-plat-box svg { opacity: 1; }
.trt-plat-box path { stroke: #fff; stroke-width: 3; fill: none; }
.trt-plat-name { font-size: 13px; font-weight: 600; color: var(--traiteur-ink); }
.menu-plat-check {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}