/* Police et fond */
body { font-family: 'Inter', sans-serif; background: #fff; margin: 0; color: #000; }

/* Mise en page Hero */
.container-hero { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; max-width: 1300px; margin: 0 auto; padding: 40px; align-items: center; }

/* Image Logo */
.container-hero img { max-height: 350px; width: auto; object-fit: contain; }

/* Éléments Pro */
.bg-red-600 { background-color: #dc2626 !important; }
.text-red-600 { color: #dc2626 !important; }

/* Ajustement mobile */
@media (max-width: 1024px) { 
    .container-hero { grid-template-columns: 1fr; text-align: center; } 
    .container-hero img { max-height: 250px; margin: 0 auto; }
}

/* Fix menu mobile */
@media (min-width: 768px) { button[onclick*="mobile-menu"] { display: none !important; } }

/* Bannière de navigation (Suite) */
#navigation-banner { display: none; }
#nav-icon { min-width: 30px; }

/* --- BASE APP PRO --- */
:root {
    --app-bg: #0f172a;
    --app-red: #ef4444;
}

/* Supprime les rebonds de défilement sur iOS */
    overflow-x: hidden;
    overflow: hidden; 
    min-height: 100%;
    height: 100%; 
    /* Gère l'espace de l'encoche iPhone */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* --- BANNIÈRE NAVIGATION (STYLE UBER) --- */
#navigation-banner {
    background: rgba(15, 23, 42, 0.9) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    border-radius: 0 0 1.5rem 1.5rem;
    padding-top: calc(env(safe-area-inset-top) + 10px) !important;
}

#nav-icon-container {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- PANEL LIVREUR --- */
.driver-panel {
    background: var(--app-bg) !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 -10px 25px rgba(0,0,0,0.5);
}

/* Animation du pulse pour le bouton accepter */
@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.btn-accept { animation: pulse-red 2s infinite; }