﻿/* ============================================
   ESCALE A PORTSALL - Responsive v2
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {
    .lodgings { grid-template-columns: 1fr; gap: var(--space-2xl); }
    .lodging-card__image { height: 280px; }
    .advantages-grid { grid-template-columns: repeat(3, 1fr); }
    .how-to-come { grid-template-columns: 1fr; }
    .how-to-come__map { position: static; }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
    .lodging-info { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .contact-grid { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: repeat(2, 1fr); }
    .gallery__item--large { grid-column: span 2; grid-row: span 1; }
    .presentation { grid-template-columns: 1fr; gap: var(--space-2xl); }
    .presentation__image img { height: 350px; }
    .airbnb-rating__details { grid-template-columns: 1fr; }
    .hero__ratings { gap: var(--space-xl); }
    .tide-spotlight { grid-template-columns: 1fr; }
    .tide-spotlight__visual { min-height: 360px; }
    .activities-grid { grid-template-columns: repeat(2, 1fr); }
    .experience-wall { grid-template-columns: 1fr 1fr; }
    .availability-board__header { flex-direction: column; }
    .availability-board__controls,
    .availability-board__select { min-width: 100%; }
    .availability-board__weekdays,
    .availability-board__grid { grid-template-columns: repeat(7, minmax(80px, 1fr)); }
    .lodging-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile */
@media (max-width: 768px) {
    :root { --navbar-height: 64px; --navbar-offset: 8px; }
    .section { padding: var(--space-3xl) 0; }
    .container { padding: 0 var(--space-lg); }
    .navbar {
        width: calc(100% - 1rem);
        height: 56px;
        border-radius: 22px;
    }
    .navbar__overlay { inset: 0; }
    .navbar__inner { padding: 0 0.35rem; }
    .navbar__menu {
        position: fixed;
        top: 0.5rem;
        bottom: 0.5rem;
        left: 0.5rem;
        right: 0.5rem;
        background: rgba(255,255,255,0.98);
        backdrop-filter: blur(12px);
        flex-direction: column;
        justify-content: flex-start;
        padding: 4.75rem 1.2rem 1.2rem;
        gap: 0.2rem;
        margin: 0;
        border: 1px solid rgba(12,45,72,0.08);
        border-radius: var(--radius-xl);
        max-height: none;
        overflow-y: auto;
        align-items: stretch;
        transform: translateY(-1rem) scale(0.98);
        opacity: 0;
        pointer-events: none;
        transition: all var(--transition-base);
        box-shadow: var(--shadow-lg);
    }
    .navbar__menu--open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
    }
    .navbar__menu > li { width: 100%; }
    .navbar__menu .navbar__link {
        width: 100%;
        justify-content: flex-start;
        color: var(--color-primary);
        font-size: 1rem;
        padding: 0.95rem 0;
        border-bottom: 1px solid rgba(12,45,72,0.08);
    }
    .navbar__menu .navbar__link::after { display: none; }
    .navbar__menu .btn {
        width: 100%;
        margin-top: 0.9rem;
    }
    .navbar__item--secondary { display: none; }
    .navbar__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 1px solid rgba(12,45,72,0.1);
        background: rgba(12,45,72,0.04);
    }
    .navbar__logo {
        gap: 0.45rem;
        font-size: 0;
    }
    .navbar__logo::after {
        content: 'Portsall';
        font-size: 0.96rem;
        font-weight: 600;
        color: var(--color-primary);
    }
    .navbar__logo-icon { font-size: 1.15rem; }
    .section__header { margin-bottom: var(--space-2xl); }
    .section__overtitle { letter-spacing: 2px; gap: var(--space-sm); }
    .section__overtitle::before, .section__overtitle::after { width: 18px; }
    .advantages-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
    .advantage {
        padding: var(--space-lg) var(--space-md);
        text-align: left;
    }
    .advantage__icon { display: none; }
    .hero {
        min-height: 78vh;
        align-items: flex-end;
        text-align: left;
    }
    .hero__video { display: none; }
    .hero__title { font-size: clamp(2rem, 9vw, 3.2rem); }
    .hero__tagline { display: none; }
    .hero__content {
        max-width: 28rem;
        width: 100%;
        padding: 0 var(--space-lg) 3.25rem;
    }
    .hero__subtitle { margin-bottom: var(--space-md); letter-spacing: 4px; }
    .hero__description {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: var(--space-lg);
        font-size: 0.96rem;
        line-height: 1.65;
    }
    .hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .hero__actions .btn { width: 100%; }
    .hero__ratings { display: none; }
    .hero__scroll { display: none; }
    .wave-divider { display: none; }
    .presentation__image img { height: 220px; }
    .presentation__text {
        font-size: 0.98rem;
        line-height: 1.7;
    }
    .presentation__text:nth-of-type(n + 2) { display: none; }
    .presentation__features { display: none; }
    .lodging-card__image { height: 255px; }
    .lodging-card__actions { flex-direction: column; }
    .lodging-card__body { padding: var(--space-lg); }
    .lodging-card__badge { top: var(--space-md); left: var(--space-md); }
    .badge--coeur { display: none; }
    .lodging-card__title { font-size: 1.25rem; }
    .lodging-card__subtitle {
        margin-bottom: 0.7rem;
        font-size: 0.92rem;
    }
    .lodging-card__meta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem 0.9rem;
        margin-bottom: 0.85rem;
        padding: 0;
        border: none;
    }
    .lodging-card__meta-item:nth-child(n + 3) { display: none; }
    .lodging-card__rating {
        margin-bottom: var(--space-md);
        gap: 0.4rem;
    }
    .lodging-card__rating-count { display: none; }
    .gallery { grid-template-columns: repeat(2, 1fr); }
    .gallery__item--large { grid-column: span 2; }
    .footer__grid { grid-template-columns: 1fr; }
    .form__row { grid-template-columns: 1fr; }
    .form-pricing__total-row { flex-direction: column; align-items: flex-start; }
    .testimonial__text { font-size: 1.15rem; }
    .testimonial { padding: var(--space-lg); }
    .equipment-grid { grid-template-columns: 1fr; }
    .lodging-hero { height: 40vh; min-height: 300px; }
    .lodging-hero__title { font-size: 1.75rem; }
    .lodging-hero__content { padding: var(--space-lg); }
    .coup-de-coeur i,
    .lodging-summary__item i,
    .sidebar__list i,
    .activity-card__icon,
    .transport__icon,
    .presentation__feature i { display: none; }
    .description-section p:nth-of-type(n + 3) { display: none; }
    .lodging-summary { grid-template-columns: 1fr; gap: var(--space-sm); padding: var(--space-lg); }
    .host-card { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
    .host-card__avatar { width: 52px; height: 52px; font-size: 1.25rem; }
    .airbnb-rating { flex-direction: column; align-items: stretch; gap: var(--space-md); }
    .airbnb-rating__score { align-items: flex-start; min-width: 0; }
    .airbnb-rating__details { display: none; }
    .review-card { padding: var(--space-lg); }
    .review-card__header { align-items: flex-start; }
    .reviews-list .review-card:nth-child(n + 3) { display: none; }
    .equipment-grid .equipment-item:nth-child(n + 7) { display: none; }
    .presentation__image img { height: 220px; }
    .separator-landscape { height: 120px; }
    .lightbox__nav { width: 40px; height: 40px; }
    .lightbox__nav--prev { left: var(--space-sm); }
    .lightbox__nav--next { right: var(--space-sm); }
    .activities-grid { grid-template-columns: 1fr; }
    .experience-wall { grid-template-columns: 1fr; }
    #avantages .advantage:nth-child(n + 5),
    #activites .activity-card:nth-child(n + 5),
    #venir .transport:nth-child(n + 4),
    #faq .faq-item:nth-child(n + 5) { display: none; }
    #activites .experience-wall,
    #activites .tide-chip-row,
    #temoignages .section__description { display: none; }
    .tide-list li:nth-child(n + 3) { display: none; }
    .tide-spotlight__visual { min-height: 300px; }
    .tide-spotlight__overlay { padding: var(--space-lg); }
    .tide-spotlight__text { display: none; }
    .maison-chambres-grid { grid-template-columns: 1fr; }
    .availability-board { padding: var(--space-lg); }
    .availability-board__month { min-width: auto; font-size: 1.1rem; }
    .availability-board__nav { gap: var(--space-sm); }
    .availability-board__scroller {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--space-xs);
    }
    .availability-board__weekdays,
    .availability-board__grid {
        min-width: 560px;
        grid-template-columns: repeat(7, minmax(72px, 1fr));
    }
    .availability-day { min-height: 62px; padding: 0.55rem; font-size: 0.82rem; }
    .availability-board__legend { gap: var(--space-xs); flex-wrap: wrap; justify-content: flex-start; }
    .contact-info-card__title { font-size: 1.25rem; }
    .activity-card .btn { width: 100%; }
    .guide-card-actions { flex-direction: column; }
}

/* Small mobile */
@media (max-width: 480px) {
    .section { padding: var(--space-2xl) 0; }
    .container { padding: 0 var(--space-md); }
    .navbar {
        width: calc(100% - 0.75rem);
        top: 0.375rem;
    }
    .navbar__logo::after { content: 'Escale'; font-size: 0.9rem; }
    .advantages-grid { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: 1fr; }
    .gallery__item--large { grid-column: span 1; }
    .hero {
        min-height: 74vh;
        background-position: 58% center;
    }
    .hero__subtitle { letter-spacing: 3px; font-size: 0.75rem; }
    .btn--lg { padding: 0.85rem 2rem; font-size: 0.9rem; }
    .testimonials__controls { gap: var(--space-md); }
    .lodging-card__meta { gap: var(--space-sm); }
    .lodging-card__body { padding: var(--space-lg); }
    .hero__content { padding: 0 var(--space-md) 2.6rem; }
    .hero__description { font-size: 0.92rem; }
    .section__description { font-size: 0.94rem; }
    .lodging-card__image { height: 230px; }
    .lodging-card__meta { grid-template-columns: 1fr; }
    .presentation__title,
    .section__title,
    .cta__title { line-height: 1.15; }
    .breadcrumb {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: var(--space-sm);
    }
    .availability-board__weekdays,
    .availability-board__grid {
        min-width: 490px;
        gap: 0.4rem;
    }
    .availability-day { min-height: 58px; padding: 0.45rem; font-size: 0.76rem; }
    .calendar-widget__header { padding: var(--space-md) var(--space-lg); }
    .calendar-widget__grid { padding: var(--space-sm) var(--space-md) var(--space-md); }
    .calendar-day { font-size: 0.78rem; }
    .airbnb-rating__category {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
    .airbnb-rating__category-label { min-width: 0; }
}

/* Print */
@media print {
    .navbar, .hero__scroll, .testimonials__controls, .lightbox, .btn, .hero__overlay, .hero::after { display: none !important; }
    body { color: #000; background: #fff; font-size: 12pt; }
    .hero { min-height: auto; padding: 2cm 0; background: none; color: #000; }
    .hero__title { color: #000; text-shadow: none; }
    .section { padding: 1cm 0; }
    .lodging-card { box-shadow: none; border: 1px solid #ccc; }
    a { color: #000; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
}
