/*
 * Vue du Château - Mobile Optimization
 * 100% @media queries - Desktop non impacté
 * Version: 1.0.0
 */

/* ============================================
   TABLET (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
    /* Chambres grid 2 colonnes */
    .chambres-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Services 3 colonnes */
    .services-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Footer 2 colonnes */
    .footer-content {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   MOBILE (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {

    /* --- HEADER MOBILE --- */
    .site-header {
        padding: 0 !important;
    }
    .site-header .header-single-line {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 12px !important;
        gap: 6px !important;
        min-height: 50px !important;
    }

    /* Logo plus lisible */
    .site-logo {
        order: 0 !important;
        flex: 0 1 auto !important;
        min-width: unset !important;
    }
    .site-logo a {
        font-size: 18px !important;
        white-space: nowrap !important;
        letter-spacing: 0.5px !important;
    }

    /* Bouton réservation mobile - CTA principal */
    .header-book-btn {
        order: 1 !important;
        padding: 8px 12px !important;
        font-size: 11px !important;
        gap: 4px !important;
        border-radius: 25px !important;
        min-height: 40px !important;
        min-width: 40px !important;
    }
    .header-book-btn .btn-text {
        display: none !important;
    }
    .header-book-btn .btn-badge {
        font-size: 8px !important;
        padding: 3px 5px !important;
    }
    .header-book-btn .btn-icon {
        font-size: 16px !important;
    }

    /* Mon Espace - compact mobile : emoji visible, texte caché */
    .header-myspace-btn {
        font-size: 14px !important;
        padding: 8px 10px !important;
        min-height: 36px !important;
        min-width: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 20px !important;
        margin-left: 2px !important;
    }

    /* Language switcher compact */
    .language-switcher {
        order: 2 !important;
        gap: 2px !important;
    }
    .language-switcher a {
        padding: 5px 6px !important;
        font-size: 9px !important;
        min-height: 30px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Hamburger bien visible */
    .hamburger {
        order: 3 !important;
        min-height: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Menu ouvert - plein écran mobile */
    .site-header ul.main-nav.open,
    .site-header .main-nav.open,
    ul.main-nav.open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 50px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: linear-gradient(180deg, #1e3444 0%, #2a4a5e 100%) !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-top: 20px !important;
        z-index: 10000 !important;
    }
    .site-header .main-nav li a {
        padding: 18px 30px !important;
        font-size: 16px !important;
        letter-spacing: 1px !important;
        text-align: left !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        min-height: 54px !important;
        display: flex !important;
        align-items: center !important;
    }
    .site-header .main-nav li a:active {
        background: rgba(255,255,255,0.15) !important;
    }
    .site-header .main-nav li.current-menu-item a {
        background: rgba(201, 169, 97, 0.15) !important;
        border-left: 3px solid #c9a961 !important;
    }

    /* --- HERO MOBILE --- */
    .hero-section {
        height: 60vh !important;
        min-height: 350px !important;
        background-attachment: scroll !important;
    }
    .hero-content {
        padding: 1.5rem !important;
    }
    .hero-content h1 {
        font-size: 28px !important;
        letter-spacing: 2px !important;
        margin-bottom: 12px !important;
    }
    .hero-content p {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }
    .hero-content .best-rate {
        font-size: 13px !important;
        padding: 6px 16px !important;
    }

    /* --- CHAMBRES CARDS MOBILE --- */
    /* Overlay TOUJOURS visible sur mobile (pas de hover sur tactile) */
    .chambres-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 0 !important;
    }
    .chambre-card {
        height: 220px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    }
    .chambre-card-overlay {
        transform: translateY(0) !important;
        background: linear-gradient(transparent, rgba(30, 52, 68, 0.95)) !important;
        padding: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        height: 100% !important;
    }
    .chambre-card-overlay h3 {
        font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;
        color: #fff !important;
        letter-spacing: 0.5px !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
    }
    .chambre-card-overlay p {
        font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        margin-bottom: 10px !important;
        letter-spacing: 0.3px !important;
    }
    .chambre-card-overlay .btn {
        padding: 10px 20px !important;
        font-size: 13px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: flex-start !important;
        border-radius: 6px !important;
    }

    /* --- SECTIONS MOBILE --- */
    .section {
        padding: 40px 16px !important;
    }
    .section-title {
        margin-bottom: 25px !important;
    }
    .section-title h2 {
        font-size: 22px !important;
    }

    /* --- SERVICES MOBILE --- */
    .services-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }
    .services-v2 {
        padding: 40px 16px !important;
    }
    .services-grid-v2 {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .service-item-v2 {
        padding: 20px !important;
        background: #f8f9fa !important;
        border-radius: 12px !important;
    }
    .service-item-v2 .icon-outline {
        width: 48px !important;
        height: 48px !important;
    }
    .service-item-v2 h3 {
        font-size: 15px !important;
        margin-bottom: 10px !important;
    }
    .service-item-v2 p {
        font-size: 13px !important;
        text-align: left !important;
        line-height: 1.7 !important;
    }

    /* --- PARALLAX MOBILE --- */
    .parallax-section {
        height: 250px !important;
        background-attachment: scroll !important;
    }
    .parallax-content .btn {
        padding: 14px 28px !important;
        font-size: 14px !important;
        min-height: 48px !important;
    }

    /* --- TESTIMONIALS MOBILE --- */
    .testimonials-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .testimonial-item {
        padding: 20px !important;
        background: #f8f9fa !important;
        border-radius: 12px !important;
    }

    /* --- BOOKING BAR FIXE MOBILE --- */
    .booking-fixed {
        top: 50px !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    .booking-fixed span {
        font-size: 12px !important;
    }
    .booking-fixed .btn-sm {
        padding: 10px 16px !important;
        font-size: 12px !important;
        min-height: 40px !important;
    }

    /* --- BOOKING WIDGET MOBILE --- */
    .booking-widget-overlay {
        padding: 0 !important;
        align-items: flex-start !important;
    }
    .booking-widget-container {
        border-radius: 0 !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }
    .booking-widget-container h2 {
        font-size: 18px !important;
        margin-bottom: 16px !important;
    }
    .close-widget {
        min-height: 44px !important;
        min-width: 44px !important;
        font-size: 28px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Dates - full width */
    .date-row {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .date-field {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .date-field input[type="date"] {
        width: 100% !important;
        padding: 14px 12px !important;
        font-size: 16px !important;
        min-height: 48px !important;
        border-radius: 8px !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    /* Compteurs voyageurs - plus gros */
    .travelers-row {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .traveler-field {
        flex: 1 1 100% !important;
    }
    .counter button {
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 20px !important;
        border-radius: 8px !important;
    }
    .counter span {
        font-size: 18px !important;
        min-width: 40px !important;
    }

    /* Lodgings grid mobile */
    .lodgings-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .lodging-item {
        min-height: 70px !important;
        padding: 10px !important;
        border-radius: 10px !important;
    }
    .lodging-name {
        font-size: 12px !important;
    }
    .lodging-capacity {
        font-size: 10px !important;
    }

    /* Gîtes grid mobile */
    .gites-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    .gite-item {
        min-height: 70px !important;
        padding: 10px !important;
    }

    /* Promo code */
    .promo-section input {
        font-size: 16px !important;
        padding: 12px !important;
        min-height: 48px !important;
    }
    .promo-section button {
        min-height: 48px !important;
        padding: 12px 20px !important;
    }

    /* Booking summary */
    .booking-total {
        font-size: 20px !important;
        padding: 16px !important;
    }
    .booking-submit {
        min-height: 54px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
        width: 100% !important;
    }

    /* --- STRIPE MODAL MOBILE --- */
    #stripeModal {
        padding: 0 !important;
        align-items: flex-start !important;
    }
    #stripeModal > div:first-child {
        border-radius: 0 !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        padding: 20px !important;
    }
    #stripeModal input[type="text"],
    #stripeModal input[type="email"],
    #stripeModal input[type="tel"] {
        font-size: 16px !important;
        padding: 14px !important;
        min-height: 48px !important;
    }

    /* --- MY SPACE MODAL MOBILE --- */
    .vdc-modal {
        z-index: 100001 !important;
        padding: 0 !important;
    }
    .vdc-modal.show {
        display: flex !important;
    }
    .vdc-modal .vdc-modal-content {
        border-radius: 0 !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 20px 16px !important;
    }
    .vdc-modal .form-group input {
        cursor: text !important;
        pointer-events: auto !important;
        font-size: 16px !important;
        min-height: 48px !important;
        padding: 12px 15px !important;
    }
    .vdc-modal .btn-passkey,
    .vdc-modal .btn-secondary,
    .vdc-modal .btn-primary {
        cursor: pointer !important;
        pointer-events: auto !important;
        min-height: 50px !important;
        font-size: 15px !important;
    }
    .vdc-modal .btn-passkey:disabled {
        cursor: not-allowed !important;
    }
    .vdc-modal .close-modal {
        min-width: 44px !important;
        min-height: 44px !important;
        cursor: pointer !important;
    }

    /* --- COOKIE BANNER MOBILE --- */
    .cookie-banner {
        padding: 16px !important;
    }
    .cookie-content h3 {
        font-size: 16px !important;
    }
    .cookie-content p {
        font-size: 13px !important;
        margin-bottom: 16px !important;
    }
    .cookie-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .cookie-btn {
        width: 100% !important;
        padding: 14px !important;
        font-size: 14px !important;
        min-height: 48px !important;
    }

    /* --- FOOTER MOBILE --- */
    .site-footer {
        padding: 40px 16px !important;
    }
    .footer-content {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 30px !important;
    }
    .footer-section h4 {
        font-size: 16px !important;
    }
    .social-icons {
        justify-content: center !important;
    }
    .social-icons a {
        width: 48px !important;
        height: 48px !important;
    }
    .footer-bottom {
        font-size: 12px !important;
    }

    /* --- CHAMBRE SINGLE MOBILE --- */
    .chambre-single {
        padding: 20px 16px !important;
    }
    .chambre-single h1 {
        font-size: 24px !important;
    }
    .chambre-gallery img {
        max-height: 300px !important;
    }
    .chambre-specs {
        gap: 8px !important;
    }
    .chambre-specs span {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }
    .chambre-description {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    /* --- GENERAL MOBILE UX --- */
    /* Minimum touch target 44px */
    a, button, [role="button"], input[type="submit"], .btn {
        min-height: 44px;
    }

    /* Prevent zoom on input focus (iOS) */
    input, select, textarea {
        font-size: 16px !important;
    }

    /* Smooth momentum scroll */
    html {
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent horizontal overflow */
    body {
        overflow-x: hidden !important;
    }

    /* Safe area for notched phones */
    .site-header {
        padding-left: env(safe-area-inset-left) !important;
        padding-right: env(safe-area-inset-right) !important;
    }
    .site-footer {
        padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important;
    }
}

/* ============================================
   SMALL MOBILE (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    /* Header ultra compact */
    .site-header .header-single-line {
        padding: 6px 8px !important;
        gap: 4px !important;
    }
    .site-logo a {
        font-size: 16px !important;
    }

    /* Hide language switcher on very small screens, show in menu */
    .language-switcher {
        display: none !important;
    }

    /* Hero compact */
    .hero-section {
        height: 50vh !important;
        min-height: 280px !important;
    }
    .hero-content h1 {
        font-size: 22px !important;
        letter-spacing: 1px !important;
    }
    .hero-content p {
        font-size: 14px !important;
    }

    /* Sections tighter */
    .section {
        padding: 30px 12px !important;
    }
    .section-title h2 {
        font-size: 20px !important;
    }

    /* Chambre cards */
    .chambre-card {
        height: 180px !important;
    }

    /* Services - 1 colonne */
    .services-grid {
        grid-template-columns: 1fr !important;
    }

    /* Booking widget lodging 2 columns tight */
    .lodgings-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    .lodging-item {
        min-height: 60px !important;
    }

    /* Parallax smaller */
    .parallax-section {
        height: 200px !important;
    }

    /* Booking total */
    .booking-total {
        font-size: 18px !important;
    }
}

/* ============================================
   LANDSCAPE MOBILE
   ============================================ */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        height: 80vh !important;
        min-height: 250px !important;
    }
    .hero-content h1 {
        font-size: 24px !important;
    }
    .parallax-section {
        height: 200px !important;
    }
    /* Chambres 2 colonnes en paysage */
    .chambres-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}