/* Mobile styles - s'applique sur écrans < 768px */
@media (max-width: 768px) {
    
    /* Navigation mobile */
    .nav-container {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }
    
    nav h1 {
        font-size: 1.5rem;
    }
    
    nav ul {
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    nav a {
        padding: 0.3rem 0.8rem;
        font-size: 0.9rem;
    }

    /* Hero mobile */
    .hero {
        padding: 2rem 1rem;
    }
    
    .hero h2 {
        font-size: 1.8rem;
    }
    
    .hero p {
        font-size: 1rem;
    }

    /* Container mobile */
    .container {
        padding: 1rem;
    }

    /* Features mobile */
    .features {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .feature {
        padding: 1.5rem;
    }

    /* Gallery mobile */
    .photo-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .photo-placeholder {
        height: 150px;
    }

    /* Pricing mobile */
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .price-card {
        padding: 1.5rem;
    }
    
    .price-card .price {
        font-size: 2rem;
    }

    /* Contact mobile */
    .contact-methods {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .contact-method {
        padding: 1rem;
    }

    /* Activities mobile */
    .activity-list {
        grid-template-columns: 1fr;
    }
    
    .activity-item {
        padding: 1rem;
    }
    
    .activity-item:hover {
        transform: none;
    }

    /* Local highlights mobile */
    .local-highlights {
        margin: 1rem;
        padding: 1.5rem;
    }

    /* Info grids mobile */
    .info-grid,
    .seasons-grid,
    .tips-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .info-card,
    .season-card,
    .tip-card {
        padding: 1rem;
    }

    /* Calendar mobile */
    .calendar-container {
        padding: 0.5rem;
    }
    
    .calendar-container iframe {
        height: 400px;
    }

    /* Typography mobile */
    h3 {
        font-size: 1.3rem;
    }
    
    h4 {
        font-size: 1.1rem;
    }
    
    p {
        font-size: 0.9rem;
    }

    /* Spacing mobile */
    .description,
    .gallery,
    .pricing-section,
    .calendar-section,
    .contact-section,
    .activities {
        padding: 2rem 0;
    }
    
    .practical-info,
    .seasonal-info {
        margin-top: 2rem;
        padding: 1rem 0;
    }
    
    .tips-section {
        margin-top: 2rem;
        padding: 1rem;
    }

    /* Footer mobile */
    footer {
        padding: 1rem;
        font-size: 0.9rem;
    }
}

/* Très petits écrans */
@media (max-width: 480px) {
    
    /* Navigation très petits écrans */
    nav h1 {
        font-size: 1.3rem;
    }
    
    nav ul {
        flex-direction: column;
        gap: 0.3rem;
        width: 100%;
    }
    
    nav a {
        text-align: center;
        padding: 0.5rem;
        width: 100%;
    }

    /* Hero très petits écrans */
    .hero {
        padding: 1.5rem 0.5rem;
    }
    
    .hero h2 {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    .hero p {
        font-size: 0.9rem;
    }

    /* Container très petits écrans */
    .container {
        padding: 0.5rem;
    }

    /* Cards très petits écrans */
    .feature,
    .price-card,
    .activity-item,
    .info-card,
    .season-card,
    .tip-card {
        padding: 1rem;
        margin-bottom: 0.5rem;
    }

    /* Local highlights très petits écrans */
    .local-highlights {
        margin: 0.5rem;
        padding: 1rem;
    }

    /* Typography très petits écrans */
    h3 {
        font-size: 1.2rem;
    }
    
    h4 {
        font-size: 1rem;
    }
    
    p, li {
        font-size: 0.85rem;
        line-height: 1.4;
    }

    /* Price cards très petits écrans */
    .price-card .price {
        font-size: 1.8rem;
    }

    /* Calendar très petits écrans */
    .calendar-container iframe {
        height: 300px;
    }

    /* Distance tags très petits écrans */
    .distance {
        font-size: 0.8rem;
        display: block;
        margin-top: 0.5rem;
    }

    /* Sections spacing très petits écrans */
    .description,
    .gallery,
    .pricing-section,
    .calendar-section,
    .contact-section,
    .activities {
        padding: 1.5rem 0;
    }

    /* Footer très petits écrans */
    footer {
        padding: 1rem 0.5rem;
        font-size: 0.8rem;
    }
}

/* Landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
    
    .hero {
        padding: 2rem 1rem;
    }
    
    .hero h2 {
        font-size: 2rem;
    }
    
    .nav-container {
        flex-direction: row;
        justify-content: space-between;
    }
    
    nav ul {
        flex-direction: row;
        gap: 1rem;
    }
    
    .features,
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .activity-list {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .info-grid,
    .seasons-grid,
    .tips-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablettes */
@media (min-width: 769px) and (max-width: 1024px) {
    
    .features {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .photo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .activity-list {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .seasons-grid,
    .tips-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contact-methods {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Animations et transitions pour mobile */
@media (max-width: 768px) {
    
    .activity-item,
    .feature,
    .price-card {
        transition: none;
    }
    
    .photo-placeholder:hover {
        transform: none;
    }
    
    .price-card:hover {
        transform: none;
    }
}

/* Accessibilité mobile */
@media (max-width: 768px) {
    
    /* Taille minimale des zones tactiles */
    nav a,
    .price-card,
    .activity-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Espacement pour les doigts */
    nav ul {
        gap: 0.5rem;
    }
    
    /* Contraste amélioré sur mobile */
    .hero {
        background: linear-gradient(135deg, #5a6fd8 0%, #6b4d96 100%);
    }
}