/* Styles responsifs pour Maison Cerëe de Sens */

/* Grands écrans */
@media screen and (min-width: 1200px) {
    .home-title h1 {
        font-size: 4rem;
    }
    
    .location {
        font-size: 1.2rem;
    }
    
    .page-container {
        padding: 100px 40px 60px;
    }
}

/* Tablettes et petits écrans */
@media screen and (max-width: 992px) {
    body.la-cuvee{
        overflow: auto;
        overflow-x: hidden;

    }

    .home-title h1 {
        font-size: 2.5rem;
    }
    
    .menu-items a {
        font-size: 1.3rem;
    }
    
    .page-content {
        padding: 30px;
    }
    
    .wine-details {
        flex-direction: column;
    }
    
    .inspiration-gallery {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* Mobiles */
@media screen and (max-width: 576px) {

}

/* Orientation paysage sur mobile */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .home-content {
        padding-top: 60px;
    }
    
    .home-title h1 {
        font-size: 1.8rem;
    }
    
    .main-menu {
        padding: 30px 20px;
    }
    
    .menu-items li {
        margin-bottom: 10px;
    }
    
    .social-links {
        position: relative;
        bottom: auto;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .bg-video::-webkit-media-controls {
        display: none !important;
    }
    .bg-video {
    pointer-events: none;
    }
    header,
    #mainHeader {
    height: 60px; /* Taille fixe */

    
    }

    #mainHeader.scrolled {
    padding: 5px 0;
    height: 60px; /* Taille fixe */

    }
    body:not(.index) .menu-icon{
        top: 20%;
    }

    /* Header */
    .header-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .header-text {
        font-size: 1.2rem;
    }
    
    .header-logo {
        height: 50px;
    }
    
    /* Menu */
    .main-menu {
        width: 100%;
        padding: 40px 10%;
        -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
        mask-image: linear-gradient(to right, black 50%, transparent 100%);
    }
    body:not(.index) .main-menu::before {
        content: "";
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
      
        background: rgba(255, 255, 255, 0.4);
        opacity: 50%;
      
        /* Masque en dégradé vers la droite */
        -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
        mask-image: linear-gradient(to right, black 70%, transparent 100%);
      
        z-index: -1;
        pointer-events: none;
      }
      
    
    .menu-items {
        padding-top: 30%;
    }
    
    .menu-items a {
        font-size: 1.2rem;
    }
    
    .social-links {
        gap: 15px;
    }
    
    /* Layout général */
    .page-container {
        padding: 100px 20px 40px;
    }
    
    /* Section verticale en colonne */
    .la-cuvee_product-container,
    .maison-histoire {
        display: flex;
        flex-direction: column;
        padding: 0 20px;
    }

    
    .la-cuvee_product-left,
    .la-cuvee_product-right {
        position: static;
        transform: none;
        max-width: 100%;
        padding: 20px 0;
        text-align: center;
    }

    
    .la-cuvee_vertical-gallery {
        flex-direction: row;
        overflow-x: auto;
        gap: 20px;
        padding-bottom: 20px;
        width: 100%;
    }
    
    .la-cuvee_vertical-gallery img {
        width: auto;
        height: 300px;
        flex-shrink: 0;
    }
    
    .la-cuvee_btn {
        width: 100%;
        margin-bottom: 30px;
    }
    .la-cuvee_arrow{
        font-size: 0.8rem;
    }
    
    /* Maison gallery */
    .maison-gallery-grid {
        padding: 20px;
    }
    
    /* Texte Maison */
    .maison-histoire .text p {
        font-size: 0.9rem;
        text-align: justify;
    }
    
    .maison-histoire img {
        max-width: 100%;
        height: auto;
    }
    
    .maison-histoire .noms {
        text-align: left;
    }
    .maison-histoire .text{
        padding-top: 10%;
    }
    .maison-histoire .noms:nth-of-type(3) {
        order: 3;
        display: flex;
        justify-content: space-between;
        padding-top: 10px;
    }
    .maison-histoire .noms:nth-of-type(3) h3{
        font-size: 0.9rem;
    }

    .maison-histoire img:nth-of-type(2) {
        order: 2;
    }

    .maison-histoire .noms:nth-of-type(2) {
        order: 1;
        display: flex;
        justify-content: space-between;
    }

    .maison-histoire img:nth-of-type(3) {
        order: 4;
    }
    .maison-histoire .maison-subtitle {
        order: 5;
        padding-top: 10%;
        padding-bottom: 10%;
    }
        
    /* Musique */
    .music_body{
        overflow-y: hidden;
    }
    .music-widget-container {
        flex-direction: column;
        width: auto;
        padding-top: 2%;
        margin-top: 0%;
    }
    .music_body .today {
        padding-top: 0%;
    }
    .music_body .text{
        width: auto;
    }

    .music-control {
        display: none;
    }
    .music-widget-title{
        padding-bottom: 16px;

    }
    .music-play-btn {
        margin: 0 auto;
    }
    

    .la-cuvee_product-left,
    .la-cuvee_product-right {
        position: static;
        transform: none;
        max-width: 100%;
        width: 100%;
        text-align: left;
        padding: 10px 0;
    }

    .la-cuvee_product-left h2,
    .la-cuvee_product-left h3,
    .la-cuvee_product-left p {
        text-align: left;
    }

    .la-cuvee_vertical-gallery {
        flex-direction: row;
        overflow-x: auto;
        gap: 20px;
        padding: 20px 0;
        scroll-snap-type: x mandatory;
        max-width: 100vw;
    }

    .la-cuvee_vertical-gallery img {
        flex-shrink: 0;
        width: 80vw;
        max-width: 80vw;
        height: auto;
        scroll-snap-align: center;
        object-fit: cover;
        border-radius: 8px;
    }

    .la-cuvee_btn {
        margin-top: 30px;
        width: 100%;
        justify-content: center;
        align-items: center;
        font-size: 1rem;
    }

    .la-cuvee_dropdown-content {
        position: static;
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }
    body.la-cuvee{
        overflow: auto;
    }

    .home-title h1 {
        font-size: 2rem;
    }
    
    .location {
        font-size: 0.9rem;
    }
    
    .menu-header h2 {
        font-size: 1.5rem;
    }
    
    .menu-items a {
        font-size: 1.1rem;
        width: 50%;
    }
    
    .social-links {
        flex-direction: column;
        align-items: left;
        gap: 10px;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .page-content {
        padding: 20px;
    }
    
    .wine-description h3 {
        font-size: 1.5rem;
    }
    
    .inspiration-gallery {
        grid-template-columns: 1fr;
    }
    
    .playlist-header {
        flex-direction: column;
        text-align: center;
    }
    
    .playlist-cover {
        margin-right: 0;
        margin-bottom: 15px;
    }
    .maison-grid {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .maison-fiches {
        order: 1;
    }

    .maison-history {
        order: 2;
    }

    .maison-image {
        order: 3;
        text-align: center;
    }

    .maison-image img {
        width: 100% !important;
        height: auto;
        transform: none !important;
    }

    .philosophy-grid {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .philosophy-image img {
        width: 100%;
        height: auto;
        transform: none !important;
        border-radius: 4px;
    }

    .philosophy-title, .philosophy-word, .maison-title {
        font-size: 2rem;
    }

    .philosophy-body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }


    .philosophy-text {
        font-size: 1rem;
        line-height: 1.6;
    }

    .page-title {
        font-size: 1.8rem;
        text-align: center;
        padding: 0 15px;
    }

    .maison-section h3 {
        font-size: 1.1rem;
    }

    .maison-fiches p,
    .maison-history p,
    .philosophy-text p {
        padding: 0 10px;
        text-align: left;
    }
    .br-desktop {
        display: none;
      }
    
    .contact_raisin{
        width: 30%;
    }

  }