/**
 * Mobile Landscape – iOS & Android
 * Adaptation dynamique du layout et des images selon les dimensions réelles.
 */

:root {
    --landscape-min-touch: 44px;
    --landscape-safe-top: env(safe-area-inset-top, 0);
    --landscape-safe-bottom: env(safe-area-inset-bottom, 0);
    --landscape-safe-left: env(safe-area-inset-left, 0);
    --landscape-safe-right: env(safe-area-inset-right, 0);
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1024px) and (hover: none) and (pointer: coarse) {    html {
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }
    body {
        min-height: 100dvh;
        min-height: 100svh;
        overflow-x: hidden;
        padding-left: var(--landscape-safe-left);
        padding-right: var(--landscape-safe-right);
    }
    main { min-height: 0; flex-shrink: 0; overflow-x: hidden; }
    .container {
        padding-left: max(0.75rem, var(--landscape-safe-left));
        padding-right: max(0.75rem, var(--landscape-safe-right));
        width: 100%;
        max-width: 100%;
    }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) and (hover: none) and (pointer: coarse) {    .py-5 { padding-top: max(0.75rem, 2vh) !important; padding-bottom: max(0.75rem, 2vh) !important; }
    .py-4 { padding-top: max(0.5rem, 1.5vh) !important; padding-bottom: max(0.5rem, 1.5vh) !important; }
    section { padding-top: max(0.75rem, 2vh); padding-bottom: max(0.75rem, 2vh); }
    .display-5, .display-6 { font-size: clamp(1.15rem, 1.2rem + 0.5vh, 1.35rem) !important; }
    .lead { font-size: clamp(0.85rem, 0.9rem + 0.3vh, 0.95rem) !important; }
    .card-body { padding: max(0.5rem, 1.5vh) max(0.75rem, 2vw) !important; }
    .btn-lg { padding: max(0.4rem, 1vh) max(1rem, 2.5vw); font-size: clamp(0.85rem, 0.9rem + 0.2vh, 0.95rem); }
    .mb-5 { margin-bottom: max(1rem, 3vh) !important; }
    .mt-3 { margin-top: max(0.5rem, 1.5vh) !important; }
}

@media (orientation: landscape) and (max-height: 430px) and (max-width: 1024px) and (hover: none) and (pointer: coarse) {    .py-5 { padding-top: max(0.5rem, 1.5vh) !important; padding-bottom: max(0.5rem, 1.5vh) !important; }
    section { padding-top: max(0.5rem, 1.5vh); padding-bottom: max(0.5rem, 1.5vh); }
    .display-5, .display-6 { font-size: clamp(1rem, 1.05rem + 0.4vh, 1.2rem) !important; }
    .lead { font-size: clamp(0.8rem, 0.85rem + 0.2vh, 0.9rem) !important; }
    .card-title, h5 { font-size: clamp(0.9rem, 0.95rem + 0.2vh, 1rem) !important; }
    .card-text, .text-muted, p { font-size: clamp(0.75rem, 0.8rem + 0.15vh, 0.85rem) !important; }
}

@media (orientation: landscape) and (max-height: 360px) and (max-width: 1024px) and (hover: none) and (pointer: coarse) {    .py-5 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
    section { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .display-5, .display-6 { font-size: clamp(0.95rem, 1rem + 0.3vh, 1.1rem) !important; }
    .card-title, h5 { font-size: 0.9rem !important; }
    .card-text, .text-muted, p { font-size: 0.8rem !important; }
    .badge { font-size: 0.65rem; padding: 0.2rem 0.4rem; }
}

/* Navbar */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1024px) and (hover: none) and (pointer: coarse) {    .navbar {
        padding-top: max(0.25rem, var(--landscape-safe-top));
        padding-bottom: max(0.25rem, 0.5vh);
        min-height: auto;
    }
    .navbar-brand .logo-img { max-height: min(40px, 10vh); height: auto; }
    .navbar-collapse {
        max-height: min(70dvh, 70svh, 320px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    header.sticky-top { position: sticky; top: 0; z-index: 1030; }
}

/* ========== Hero / Carousel – conteneur augmenté en paysage pour bien voir l’image ========== */
/* Hauteurs adaptées aux différents iPhone et Android en mode paysage */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1024px) and (hover: none) and (pointer: coarse) {    #heroCarousel .carousel-inner,
    .hero-section-responsive .carousel-inner {
        height: 100svh !important;
        height: 100dvh !important;
        min-height: 100svh !important;
        min-height: 100dvh !important;
    }
    #heroCarousel .carousel-item,
    .hero-section-responsive .carousel-item,
    .hero-section.hero-section-responsive .carousel-item {
        height: 100svh !important;
        height: 100dvh !important;
        min-height: 100svh !important;
        min-height: 100dvh !important;
    }
    .hero-section-responsive .hero-slide-media,
    #heroCarousel .hero-slide-media {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        background: #1a1a2e;
    }
    /* Image : prend la forme du conteneur (remplit tout) + infos visibles (centrage) */
    .hero-section-responsive .hero-slide-img,
    #heroCarousel .hero-slide-img {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
    .hero-section-responsive .hero-slide-picture,
    #heroCarousel .hero-slide-picture {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }
    .hero-section-responsive .hero-slide-default {
        min-height: 100% !important;
        height: 100% !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
    .hero-section-responsive .hero-title {
        font-size: clamp(0.9rem, 2vw + 0.5rem, 1.3rem) !important;
        line-height: 1.2;
    }
    .hero-section-responsive .hero-description {
        font-size: clamp(0.7rem, 1.2vw + 0.3rem, 0.9rem) !important;
        line-height: 1.3;
    }
    .hero-section-responsive .hero-cta {
        padding: max(0.35rem, 1vh) max(0.85rem, 2vw);
        font-size: clamp(0.75rem, 0.8rem + 0.2vh, 0.9rem);
    }
    .hero-mobile-safe .carousel-control-prev,
    .hero-mobile-safe .carousel-control-next {
        width: min(40px, 10vw);
        height: min(40px, 10vh);
        min-width: var(--landscape-min-touch);
        min-height: var(--landscape-min-touch);
    }
    .hero-mobile-safe .carousel-indicators {
        padding-bottom: max(6px, var(--landscape-safe-bottom));
    }
}

@media (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) and (hover: none) and (pointer: coarse) {    #heroCarousel .carousel-inner,
    .hero-section-responsive .carousel-inner {
        height: 100svh !important;
        height: 100dvh !important;
        min-height: 100svh !important;
        min-height: 100dvh !important;
    }
    #heroCarousel .carousel-item,
    .hero-section-responsive .carousel-item {
        height: 100svh !important;
        height: 100dvh !important;
        min-height: 100svh !important;
        min-height: 100dvh !important;
    }
    .hero-section-responsive .hero-description {
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (orientation: landscape) and (max-height: 430px) and (max-width: 1024px) and (hover: none) and (pointer: coarse) {    #heroCarousel .carousel-inner,
    .hero-section-responsive .carousel-inner {
        height: 100svh !important;
        height: 100dvh !important;
        min-height: 100svh !important;
        min-height: 100dvh !important;
    }
    #heroCarousel .carousel-item,
    .hero-section-responsive .carousel-item {
        height: 100svh !important;
        height: 100dvh !important;
        min-height: 100svh !important;
        min-height: 100dvh !important;
    }
    .hero-section-responsive .hero-title { font-size: 0.9rem !important; }
    .hero-section-responsive .hero-description {
        -webkit-line-clamp: 1;
        font-size: 0.75rem !important;
    }
    .hero-section-responsive .hero-cta {
        padding: 0.3rem 0.75rem;
        font-size: 0.75rem;
    }
}

@media (orientation: landscape) and (max-height: 360px) and (max-width: 1024px) and (hover: none) and (pointer: coarse) {    #heroCarousel .carousel-inner,
    .hero-section-responsive .carousel-inner {
        height: 100svh !important;
        height: 100dvh !important;
        min-height: 100svh !important;
        min-height: 100dvh !important;
    }
    #heroCarousel .carousel-item,
    .hero-section-responsive .carousel-item {
        height: 100svh !important;
        height: 100dvh !important;
        min-height: 100svh !important;
        min-height: 100dvh !important;
    }
    .hero-section-responsive .hero-description { display: none; }
    .hero-section-responsive .hero-title { font-size: 0.85rem !important; }
}

/* Grilles et cartes */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1024px) and (hover: none) and (pointer: coarse) {    .row.g-3, .row.g-4 { gap: max(0.5rem, 1.5vh) !important; }
    .level-card .card-body,
    .stat-card-animated .card-body {
        padding: max(0.5rem, 1.5vh) max(0.5rem, 1.5vw) !important;
    }
    .level-card .card-title,
    .stat-card-animated .stat-number + p {
        font-size: clamp(0.8rem, 0.85rem + 0.2vh, 0.95rem) !important;
    }
    .level-card .position-relative { padding-top: min(50%, 45vh) !important; }
    .stat-card-animated .stat-number {
        font-size: clamp(1rem, 1rem + 0.5vh, 1.25rem) !important;
    }
}

/* Boutons flottants */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1024px) and (hover: none) and (pointer: coarse) {    .whatsapp-float, .forum-float {
        bottom: max(0.5rem, var(--landscape-safe-bottom));
        right: max(0.5rem, var(--landscape-safe-right));
    }
    .scroll-top {
        bottom: max(0.5rem, var(--landscape-safe-bottom));
        left: max(0.5rem, var(--landscape-safe-left));
    }
    .scroll-top button, .whatsapp-float a, .forum-float a {
        width: min(44px, 10vw);
        height: min(44px, 10vh);
        min-width: var(--landscape-min-touch);
        min-height: var(--landscape-min-touch);
        padding: 0.35rem;
    }
}

/* Footer */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1024px) and (hover: none) and (pointer: coarse) {    footer .py-4, footer .py-5 {
        padding-top: max(0.5rem, 1.5vh) !important;
        padding-bottom: max(0.5rem, var(--landscape-safe-bottom)) !important;
    }
    footer small, footer .text-muted {
        font-size: clamp(0.7rem, 0.75rem + 0.2vh, 0.8rem);
    }
}

/* Layout élève */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 991.98px) and (hover: none) and (pointer: coarse) {    body.bg-light.vh-100 {
        min-height: 100dvh;
        min-height: 100svh;
        height: auto;
    }
    .student-sidebar {
        width: clamp(12rem, 28vw, 14rem);
        max-height: 100dvh;
        max-height: 100svh;
        overflow-y: auto;
    }
    .student-sidebar-header {
        min-height: clamp(3.5rem, 8vh, 4rem);
        padding-top: max(0.5rem, var(--landscape-safe-top));
        padding-bottom: 0.5rem;
    }
    .student-avatar-wrap {
        width: clamp(2.25rem, 5vw, 2.5rem);
        height: clamp(2.25rem, 5vw, 2.5rem);
    }
    .student-header-name { font-size: clamp(0.8rem, 0.85rem + 0.2vh, 0.9rem); }
    .student-sidebar-nav {
        height: calc(100dvh - clamp(3.5rem, 8vh, 4rem));
        height: calc(100svh - clamp(3.5rem, 8vh, 4rem));
        padding-bottom: max(0.5rem, var(--landscape-safe-bottom));
    }
    .student-sidebar-nav a {
        padding: max(0.4rem, 1vh) 0.75rem !important;
        font-size: clamp(0.8rem, 0.85rem + 0.2vh, 0.9rem);
    }
    .student-main-content {
        min-height: 0;
        overflow-y: auto;
        padding-bottom: max(1rem, var(--landscape-safe-bottom));
    }
}

@media (orientation: landscape) and (max-height: 430px) and (max-width: 991.98px) and (hover: none) and (pointer: coarse) {    .student-sidebar-header { min-height: 3.25rem; }
    .student-sidebar-nav {
        height: calc(100dvh - 3.25rem);
        height: calc(100svh - 3.25rem);
    }
    .student-sidebar-nav a { padding: 0.35rem 0.75rem !important; }
}