/* ==============================================
   CORRECTIONS HAUTEUR - À AJOUTER À style.css
   Résout les problèmes de superposition sur petits écrans
   ============================================== */

/* DÉTECTION DES ÉCRANS AVEC PEU DE HAUTEUR */
/* Si la hauteur est inférieure à 700px, on désactive les hauteurs fixes */
@media (max-height: 700px) {
    
    /* Hero Section */
    .hero-section {
        height: auto !important;
        min-height: 600px !important;
        padding: 100px 0 50px !important;
    }
    
    /* Story Blocks */
    .story-block {
        height: auto !important;
        min-height: auto !important;
        padding: 60px 0 !important;
    }
    
    .story-block-stacked {
        height: auto !important;
        min-height: auto !important;
        padding: 60px 0 !important;
        gap: 30px !important;
    }
    
    .story-block-stacked-200, .story-block-stacked-100 {
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Monument Section */
    .monument-section, .portrait-section {
        height: auto !important;
        min-height: 600px !important;
        flex-direction: column;
    }
    
    .monument-image, .portrait-image {
        height: auto !important;
        min-height: 800px !important;
    }
    
    .monument-text, .monument-text {
        /*height: auto !important;*/
        min-height: 300px !important;
        padding: 40px 20px !important;
    }
    
    /* Wine Section */
    .wine-section {
        height: auto !important;
        min-height: 500px !important;
        padding: 60px 0 !important;
    }
    
    /* Images dans les story blocks */
    .story-image-portrait {
        height: 400px !important;
        max-height: 50vh !important;
    }
    
    .story-image-landscape {
        height: 300px !important;
        max-height: 40vh !important;
    }
        /* Cibler spécifiquement les div avec style inline */
    .story-section .story-block[style*="height:150vh"],
    .story-section .story-block[style*="height: 150vh"],
    .story-section .story-block-stacked[style*="height:150vh"],
    .story-section .story-block-stacked[style*="height: 150vh"] {
        height: auto !important;
        min-height: auto !important;
        padding: 60px 0 !important;
    }
    
    /* Cibler d'autres hauteurs inline possibles */
    .story-section .story-block[style*="height:100vh"],
    .story-section .story-block[style*="height: 100vh"],
    .story-section .story-block[style*="height:200vh"],
    .story-section .story-block[style*="height: 200vh"] {
        height: auto !important;
        min-height: auto !important;
        padding: 60px 0 !important;
    }
}

/* POUR LES TRÈS PETITES HAUTEURS (paysage mobile, etc.) */
@media (max-height: 500px) {
    
    .hero-section {
        min-height: 400px !important;
        padding: 80px 0 30px !important;
    }
    
    .hero-content h1 {
        font-size: 2rem !important;
    }
    
    .hero-content p {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .monument-image, .portrait-image {
        height: 950px !important;
    }
    
    .monument-text, .portrait-text {
        min-height: 200px !important;
        padding: 30px 15px !important;
    }
    
    .story-image-portrait {
        height: 250px !important;
        max-height: 35vh !important;
    }
    
    .story-image-landscape {
        height: 200px !important;
        max-height: 30vh !important;
    }
    
    .story-text {
        padding: 20px !important;
    }
    
    .story-title {
        font-size: 1.5rem !important;
        margin-bottom: 20px !important;
    }
        .story-section .story-block[style*="height"] {
        height: auto !important;
        min-height: auto !important;
        padding: 40px 0 !important;
    }
}

/* OPTION : Désactiver complètement les hauteurs vh sur petits écrans */
@media (max-height: 600px) and (max-width: 768px) {
    
    /* Force tout en hauteur auto sur mobile + petite hauteur */
    .hero-section,
    .story-block,
    .story-block-stacked,
    .story-block-stacked-100,
    .story-block-stacked-200,
    .monument-section,
    .portrait-section,
    .wine-section {
        height: auto !important;
        min-height: auto !important;
        padding: 40px 0 !important;
    }
    
    .monument-image,.portrait-image {
        height: 200px !important;
    }
    
    .monument-text, .portrait-text {
        min-height: 150px !important;
        padding: 20px 15px !important;
    }

}


/* ==============================================
   AMÉLIORATIONS GÉNÉRALES POUR ÉVITER LES SUPERPOSITIONS
   ============================================== */

/* S'assurer que le contenu ne déborde jamais */
.story-text {
    /*max-height: 80vh;*/
    height:auto;
    overflow-y: auto;
}

/* Limiter la taille des images sur tous les écrans */
.story-image {
    /*max-height: 70vh;
    min-height: 600px;*/
}

/* Espacement vertical adaptatif */
.story-block-stacked .row {
    margin-bottom: 20px;
}

/* Texte responsive dans tous les cas */
@media (max-height: 600px) {
    .story-title {
        font-size: 1.8rem;
        line-height: 1.2;
        margin-bottom: 15px;
    }
    
    .story-text p {
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 1rem;
    }
    
    .monument-content h2,.portrait-content h2 {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }
    
    .monument-content p,.portrait-content p {
        font-size: 1rem;
        line-height: 1.6;
    }
}
/* Correction finale forçant la hauteur auto sur tous les mobiles */
/*@media (max-width: 1024px) {
    .story-block,
    .story-block-stacked,
    .story-block-stacked-100,
    .story-block-stacked-200 {
        height: auto !important;
        min-height: auto !important;
        padding: 40px 0 !important;

    }

    .story-block[style],
    .story-block-stacked[style] {
        height: auto !important;
        min-height: auto !important;
    }

    .story-image-landscape,
    .story-image-portrait {
        height: auto !important;
        
  
    }
}*/
@media screen and (max-width: 430px) {
    

    /*.story-image {
        height: auto !important;
        max-height: 5vh !important;
        object-fit: cover;
        width: 100%;
    }*/
    .story-image-landscape{

        height: auto!important;
        max-height:auto!important; 
        min-height:200px!important; 

    }
    /* Confort texte mobile */
    /*.story-text {
        padding: 15px 10px !important;
    } */   
    }