/* ==========================================================================
   MODE PAYSAGE — éléments agrandis (v2)
   S'applique dès que l'écran est en paysage (le portrait n'est jamais modifié).
   Les tailles utilisent max(minimum_px, % de la hauteur d'écran) : elles
   s'adaptent donc aussi aux écrans de voiture / tablettes à haute résolution.
   Pour ajuster : changez les nombres "vh" (ex. 11vh -> 14vh = plus gros).
   ========================================================================== */
@media (orientation: landscape) {

    /* ── 1. Bannière de navigation du haut ───────────────────────────── */
    #close-routes-btn {
        width: 62% !important;
        max-width: none !important;
        font-size: max(20px, 3vh) !important;
        padding: max(12px, 1.3vh) max(22px, 2.4vh) !important;
        border-radius: 999px !important;
        top: 8px !important;
    }
    #close-routes-btn svg {
        width: max(26px, 3.4vh) !important;
        height: max(26px, 3.4vh) !important;
    }
    #close-routes-btn span[title="Afficher un trajet de plus"] {
        width: max(30px, 3.8vh) !important;
        height: max(30px, 3.8vh) !important;
        font-size: max(20px, 2.8vh) !important;
    }
    #close-routes-btn #route-badge-viewport {
        height: 1.4em !important;
    }
    #nav-eta-row {
        font-size: max(17px, 2.5vh) !important;
        padding-top: 6px !important;
    }

    /* ── 2. Boussole (haut droite) ────────────────────────────────────── */
    #compass-widget {
        top: max(96px, 12vh) !important;
        right: 14px !important;
        transform: scale(1.5);
        transform-origin: top right;
    }

    /* ── 3. Bouton Radar (bas droite) ─────────────────────────────────── */
    #radars-report-btn {
        width: max(64px, 8.5vh) !important;
        height: max(64px, 8.5vh) !important;
        right: 16px !important;
        bottom: max(100px, 14vh) !important;
    }
    #radars-report-btn .radars-report-icon {
        width: 52% !important;
        height: 52% !important;
    }

    /* ── 4. Bouton Chat (haut gauche) ─────────────────────────────────── */
    #chat-fab {
        width: max(60px, 8vh) !important;
        height: max(60px, 8vh) !important;
        top: calc(max(96px, 12vh) + env(safe-area-inset-top, 0px)) !important;
    }
    #chat-fab-icon {
        width: 52% !important;
        height: 52% !important;
    }
    #chat-badge {
        min-width: 26px !important;
        height: 26px !important;
        font-size: 14px !important;
    }
    #chat-panel {
        top: calc(max(165px, 22vh) + env(safe-area-inset-top, 0px)) !important;
        height: calc(100vh - max(180px, 24vh)) !important;
    }
}

/* Très grands écrans (écran de voiture) : boussole encore plus grande */
@media (orientation: landscape) and (min-height: 700px) {
    #compass-widget { transform: scale(1.8); }
}

/* ── 5. Pop-up d'alerte radar : agrandie, centrée, SOUS la bannière ────── */
@media (orientation: landscape) {
    #radar-alert {
        top: calc(env(safe-area-inset-top, 0px) + max(112px, 15vh)) !important;
        min-width: max(210px, 26vh) !important;
        max-width: 50% !important;
        padding: max(18px, 2.4vh) max(30px, 3.6vh) !important;
        gap: max(8px, 1vh) !important;
        border-radius: max(28px, 3.6vh) !important;
    }
    #radar-alert-icon {
        width: max(64px, 9vh) !important;
        height: max(64px, 9vh) !important;
        font-size: max(32px, 4.6vh) !important;
    }
    #radar-alert-title {
        font-size: max(20px, 3vh) !important;
    }
    #radar-alert-sub {
        font-size: max(17px, 2.5vh) !important;
        padding: 4px max(16px, 2vh) !important;
        margin-top: 6px !important;
    }

    /* ── 6. Compteur de vitesse (bas gauche) : légèrement plus grand ──── */
    #speed-widget {
        transform: scale(1.25);
        transform-origin: bottom left;
        left: 16px !important;
    }
}
@media (orientation: landscape) and (min-height: 700px) {
    #speed-widget { transform: scale(1.4); }
}