/* ===== Custom Styles — Livraison 24h ===== */

/* Material Symbols */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

/* Hero floating animation */
@keyframes float {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}
.animate-float { animation: float 3s ease-in-out infinite; }

/* Header scroll shrink */
header.scrolled { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* Step connector line */
.step-line::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(
        to right,
        transparent, transparent 5px,
        #007F5F 5px, #007F5F 10px
    );
    z-index: -1;
}
@media (max-width: 768px) { .step-line::after { display: none; } }

/* FAQ accordion */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; }
.faq-answer.open { max-height: 400px; padding-bottom: 1rem; }

/* Mobile menu */
#mobile-menu { transition: max-height 0.3s ease, opacity 0.3s ease; max-height: 0; opacity: 0; overflow: hidden; }
#mobile-menu.open { max-height: 400px; opacity: 1; }

/* WhatsApp pulse badge */
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.4); }
    70%  { box-shadow: 0 0 0 10px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.whatsapp-pulse { animation: pulse-ring 2s infinite; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Bottom nav safe area (iOS) */
.bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0.75rem); }

/* Card hover lift */
.card-hover { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); }

/* Gradient overlay on hero image */
.img-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.35), transparent);
    pointer-events: none;
}