/* ========================
   MOBILE LANDSCAPE STYLES
   For phones in landscape mode (max-height: 700px and landscape orientation)
   Goal: Keep exact same layout as desktop, just smaller sizes
   ======================== */

/* TEST: Si vous voyez une bordure rouge, le CSS est appliqué */
@media screen and (max-height: 700px) and (orientation: landscape) {

    /* FORCE POPPINS FONT - Override WordPress theme fonts */
    .gramond-quiz-fullscreen,
    .gramond-quiz-fullscreen *,
    .gramond-quiz-content,
    .gramond-quiz-content * {
        font-family: 'Poppins', sans-serif !important;
    }

    /* Body and screen containers */
    body.gramond-quiz-fullscreen,
    .screen,
    .screen * {
        font-family: 'Poppins', sans-serif !important;
    }

    /* Override mobile message - hide and make non-blocking */
    .mobile-message {
        display: none !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    /* Afficher SEULEMENT l'écran actif, pas tous les écrans */
    .screen {
        display: none !important;
    }

    .screen.active {
        display: block !important;
    }

    /* Hide decorative elements to save space */
    .landing-book,
    .palais-shadow,
    .doors-shadow {
        display: none !important;
    }

    /* Badge - visible mais réduit */
    .badge-container {
        display: block !important;
        left: 15px !important;
        top: -20px !important;
    }

    .badge-img {
        width: 50px !important;
        margin-left: 100px;
    }

    /* TOP NAV - Reduce height and center content */
    .top-nav {
        height: 30px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
    }

    .marquee-wrapper {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    .marquee-content {
        display: flex !important;
        align-items: center !important;
    }

    .marquee-content span {
        font-size: 9px !important;
        line-height: 1 !important;
    }

    .nav-logo {
        position: absolute !important;
        top: 20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-top: 0 !important;
        z-index: 10 !important;
        pointer-events: none !important;
    }

    .g-logo-img {
        width: 28px !important;
        height: auto !important;
    }

    /* LANDING - Force flex row pour texte à gauche, image à droite */
    .landing-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 5px 20px !important;
        height: calc(100vh - 35px) !important;
        max-width: 100% !important;
        gap: 20px !important;
    }

    .landing-left {
        padding-left: 10px !important;
        max-width: 55% !important;
        flex: 0 0 55% !important;
        position: relative !important;
        z-index: 50 !important;
    }

    /* Bouton cliquable - s'assurer qu'il est au-dessus de tout */
    .landing-left .btn-enter {
        position: relative !important;
        z-index: 100 !important;
        pointer-events: auto !important;
    }

    .landing-right {
        flex: 0 0 40% !important;
        max-width: 40% !important;
    }

    .landing-title {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }

    .landing-subtitle {
        font-size: 10px !important;
        line-height: 1.3 !important;
    }

    .palais-img {
        max-height: 85% !important;
        width: auto !important;
        max-width: 100% !important;
    }

    /* BUTTONS - Smaller */
    .btn-enter {
        padding: 6px 12px !important;
        font-size: 10px !important;
    }

    /* HALL - Keep layout, reduce sizes */
    /* HALL - Keep layout, reduce sizes */
    .hall-content {
        padding: 0 10px 5px !important;
        height: calc(100vh - 30px) !important;
        justify-content: flex-start !important;
        margin-top: 40px !important;
        padding-top: 5px !important;
    }

    .hall-title {
        font-size: 14px !important;
        margin-bottom: 2px !important;
    }

    .hall-subtitle {
        font-size: 8px !important;
        margin-bottom: 3px !important;
    }

    .door-img {
        height: 160px !important;
    }

    .doors-container {
        gap: 8px !important;
        margin-bottom: 3px !important;
    }

    .door-wrapper {
        margin-bottom: 2px !important;
    }

    .door-item .btn-enter {
        padding: 3px 6px !important;
        font-size: 7px !important;
    }

    .score-container {
        font-size: 9px !important;
        margin-top: 3px !important;
    }

    .score-container {
        font-size: 10px !important;
    }

    /* CONTEXT - Keep layout, reduce sizes */
    .context-content {
        padding: 8px 15px !important;
        height: calc(100vh - 30px) !important;
    }

    .context-title {
        font-size: 16px !important;
        margin-bottom: 5px !important;
    }

    .context-text {
        max-width: 100% !important;
    }

    .context-intro,
    .context-detail {
        font-size: 9px !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
    }

    .context-actions {
        margin-top: 8px !important;
    }

    .btn-back-hall {
        font-size: 8px !important;
    }

    /* QUESTIONS - Layout horizontal : bouton retour | contenu centré | image */
    .question-layout {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 5px 10px !important;
        height: calc(100vh - 30px) !important;
        gap: 10px !important;
    }

    /* Bouton retour - petit à gauche */
    .question-left {
        flex: 0 0 auto !important;
        max-width: 40px !important;
        position: absolute !important;
        left: 10px !important;
    }

    /* Contenu question - centré */
    .question-center {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        text-align: center !important;
    }

    /* Image - à droite */
    .question-content-new,
    .question-right {
        flex: 0 0 35% !important;
        max-width: 35% !important;
    }

    .trial-title {
        font-size: 12px !important;
        margin-bottom: 3px !important;
    }

    .question-text-new {
        font-size: 9px !important;
        margin-bottom: 8px !important;
    }

    .answers-container-new {
        gap: 10px !important;
    }

    .answers-container-new .btn-enter {
        padding: 4px 8px !important;
        font-size: 8px !important;
        margin-bottom: 10px !important;
    }

    .louis-img {
        max-height: 200px !important;
        width: auto !important;
    }

    /* CORRECT/WRONG - Layout centré avec image */
    .correct-layout,
    .wrong-layout {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 20px !important;
        height: calc(100vh - 30px) !important;
        gap: 15px !important;
    }

    .correct-title,
    .wrong-title {
        font-size: 16px !important;
        margin-bottom: 5px !important;
    }

    .correct-text {
        font-size: 9px !important;
        margin-bottom: 8px !important;
    }

    /* Cacher les divs vides à gauche */
    .correct-left,
    .wrong-left {
        display: none !important;
    }

    .correct-content,
    .wrong-content {
        flex: 0 0 auto !important;
        max-width: 50% !important;
        text-align: center !important;
    }

    .correct-image,
    .wrong-image {
        flex: 0 0 auto !important;
        max-width: 40% !important;
    }

    .louis-happy-img,
    .louis-angry-img {
        max-height: 180px !important;
        max-width: 100% !important;
        width: auto !important;
        object-fit: contain !important;
    }

    /* Lien "Relire le contexte" - même taille que "Retourner au Hall" */
    .btn-context-link {
        font-size: 10px !important;
        margin-top: 8px !important;
    }

    /* REWARD - Keep layout, reduce sizes */
    .reward-layout {
        padding: 5px 15px !important;
        height: calc(100vh - 30px) !important;
    }

    .reward-content {
        max-width: 300px !important;
    }

    .reward-title {
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }

    .reward-intro,
    .reward-text {
        font-size: 9px !important;
        margin-bottom: 5px !important;
    }

    .book-img {
        max-height: 180px !important;
    }

    #btn-get-bd {
        padding: 5px 10px !important;
        font-size: 9px !important;
    }

    .reglement-link {
        font-size: 7px !important;
    }

    /* EMAIL FORM - Keep layout, reduce sizes */
    .email-screen {
        overflow: auto !important;
    }

    .email-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 10px 15px !important;
        height: auto !important;
        min-height: calc(100vh - 30px) !important;
    }

    .email-title {
        font-size: 14px !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    .email-subtitle {
        font-size: 9px !important;
        margin-bottom: 8px !important;
    }

    /* Formulaire - tous les champs en 2 colonnes */
    .email-form-extended {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        max-width: 400px !important;
        justify-content: center !important;
    }

    .email-form-extended .form-row {
        display: flex !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .email-form-extended .email-input {
        padding: 5px 8px !important;
        font-size: 9px !important;
        flex: 1 !important;
        width: auto !important;
        min-width: 0 !important;
    }

    /* Champs seuls sur toute la largeur */
    .email-form-extended>.email-input {
        width: 100% !important;
        flex: none !important;
    }

    #btn-send-email {
        padding: 6px 12px !important;
        font-size: 9px !important;
        margin-top: 5px !important;
    }

    .email-footer {
        padding-bottom: 3px !important;
        margin-top: 8px !important;
    }

    .email-discover {
        font-size: 8px !important;
        margin-bottom: 0 !important;
    }

    .btn-outline {
        padding: 4px 8px !important;
        font-size: 8px !important;
    }

    /* RGPD - visible et scrollable */
    .rgpd-text {
        font-size: 6px !important;
        max-width: 350px !important;
        margin: 5px auto 0 !important;
        line-height: 1.3 !important;
        max-height: 60px !important;
        overflow-y: auto !important;
        padding: 5px !important;
        background: rgba(0, 0, 0, 0.02) !important;
        border-radius: 4px !important;
    }

    /* CONFIRMATION - titre centré, bouton visible */
    .confirmation-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 15px !important;
        height: calc(100vh - 30px) !important;
    }

    .confirmation-title {
        font-size: 16px !important;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }

    .confirmation-thanks,
    .confirmation-text {
        font-size: 10px !important;
        margin-bottom: 10px !important;
    }

    .confirmation-footer {
        margin-top: 15px !important;
        padding-bottom: 3px !important;
    }

    .confirmation-discover {
        font-size: 8px !important;
        margin-bottom: 8px !important;
    }

    #btn-expertises-confirm {
        padding: 6px 12px !important;
        font-size: 10px !important;
    }
}