/* ============================================
   Saxho.net — Responsive (Mobile-first)
   ============================================ */

/* --- Tres petit ecran (< 360px) --- */
@media (max-width: 360px) {
    .btn {
        white-space: normal;
        text-align: center;
    }

    .btn--lg {
        padding: var(--sp-sm) var(--sp-lg);
        font-size: var(--fs-small);
    }

    .hero__title {
        font-size: clamp(1.5rem, 8vw, 2rem);
    }
}

/* --- Mobile (< 768px) --- */
@media (max-width: 767px) {
    :root {
        --container-padding: var(--sp-md);
        --section-padding: var(--sp-2xl) 0;
    }

    /* Header */
    .header__burger {
        display: flex;
    }

    .header__nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--c-dark);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--sp-xl);
        transform: translateX(100%);
        transition: transform var(--transition-normal);
        z-index: 1;
        padding: var(--sp-4xl) var(--sp-lg) var(--sp-3xl);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .header__nav.is-open {
        transform: translateX(0);
    }

    .nav__list {
        flex-direction: column;
        gap: var(--sp-lg);
        text-align: center;
    }

    .nav__link {
        font-size: var(--fs-h3);
        color: rgba(255, 255, 255, 0.8);
    }

    .nav__link:hover,
    .nav__link--active {
        color: var(--c-white);
    }

    /* Cacher lang/auth dans header__actions sur mobile */
    .lang-switcher,
    .user-menu,
    .header__auth-buttons {
        display: none;
    }

    /* Quand menu ouvert : afficher lang + auth en bas de l'overlay */
    .header__nav.is-open ~ .header__actions {
        position: fixed;
        bottom: var(--sp-2xl);
        left: 0;
        right: 0;
        z-index: 2;
        flex-direction: column;
        align-items: center;
        gap: var(--sp-md);
    }

    .header__nav.is-open ~ .header__actions .lang-switcher {
        display: flex;
    }

    .header__nav.is-open ~ .header__actions .lang-switcher__link {
        color: rgba(255, 255, 255, 0.6);
        font-size: var(--fs-small);
    }

    .header__nav.is-open ~ .header__actions .lang-switcher__link:hover,
    .header__nav.is-open ~ .header__actions .lang-switcher__link--active {
        color: var(--c-white);
    }

    .header__nav.is-open ~ .header__actions .lang-switcher__sep {
        color: rgba(255, 255, 255, 0.3);
    }

    .header__nav.is-open ~ .header__actions .header__auth-buttons {
        display: flex;
        gap: var(--sp-sm);
    }

    /* User menu : afficher avatar + dropdown inline dans l'overlay mobile */
    .header__nav.is-open ~ .header__actions .user-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp-sm);
    }

    /* Sur mobile overlay, le dropdown est toujours visible (pas de toggle) */
    .header__nav.is-open ~ .header__actions .user-menu__dropdown {
        display: block;
        position: static;
        min-width: 0;
        width: 220px;
        animation: none;
    }

    .header__nav.is-open ~ .header__actions .user-menu__trigger {
        border-color: rgba(255, 255, 255, 0.4);
    }

    .header__nav.is-open ~ .header__actions .user-menu__name {
        color: var(--c-dark);
    }

    /* Burger en haut a droite au-dessus de l'overlay */
    .header__burger {
        z-index: 3;
    }

    /* Page Hero (inner pages) */
    .page-hero {
        min-height: 30vh;
        padding: var(--sp-3xl) 0 var(--sp-2xl);
    }

    .page-hero__title {
        font-size: var(--fs-h2);
    }

    /* Hero */
    .hero {
        min-height: 90vh;
        padding: var(--sp-2xl) 0;
    }

    .hero__title {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
        min-height: auto;
    }

    .hero__subtitle {
        font-size: var(--fs-body);
    }

    .scroll-indicator {
        display: none;
    }

    /* Paradox */
    .paradox {
        padding: var(--sp-2xl) 0;
    }

    .paradox__title {
        font-size: var(--fs-h3);
        margin-bottom: var(--sp-xl);
    }

    .paradox__grid {
        grid-template-columns: 1fr;
        gap: var(--sp-md);
    }

    .paradox__card {
        padding: var(--sp-lg);
    }

    .paradox__card-title {
        font-size: var(--fs-body-lg);
    }

    /* Resolution */
    .resolution {
        padding: var(--sp-2xl) 0;
    }

    .resolution__title {
        font-size: var(--fs-h2);
    }

    .resolution__subtitle {
        font-size: var(--fs-body);
    }

    /* Resolution masonry — mobile : grille 1 colonne */
    .masonry {
        grid-template-columns: 1fr;
        gap: var(--sp-md);
        margin-bottom: var(--sp-xl);
    }

    .masonry .service-card {
        display: flex;
        align-items: center;
        text-align: left;
        padding: var(--sp-lg);
        gap: var(--sp-lg);
    }

    .masonry .service-card__icon {
        margin: 0;
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .masonry .service-card__title {
        font-size: var(--fs-body);
    }

    .resolution__cta {
        margin-top: var(--sp-md);
    }

    .btn--lg {
        padding: var(--sp-sm) var(--sp-xl);
    }

    /* Portfolio preview */
    .portfolio-preview {
        padding: var(--sp-2xl) 0;
    }

    .portfolio-preview__grid {
        grid-template-columns: 1fr;
        gap: var(--sp-md);
    }

    .project-card--blurred {
        min-height: 200px;
    }

    /* Ecosystem */
    .ecosystem {
        padding: var(--sp-xl) 0;
    }

    .ecosystem__inner {
        flex-direction: column;
        gap: var(--sp-lg);
    }

    .ecosystem__text {
        font-size: var(--fs-small);
    }

    /* Final CTA */
    .final-cta {
        padding: var(--sp-2xl) 0;
    }

    .final-cta__title {
        font-size: var(--fs-h3);
        margin-bottom: var(--sp-lg);
    }

    /* Footer */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--sp-xl);
    }

    .footer__bottom {
        flex-direction: column;
        gap: var(--sp-md);
        text-align: center;
    }

    .footer__legal {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Grid utilities */
    .grid--2,
    .grid--3,
    .grid--4,
    .grid--5 {
        grid-template-columns: 1fr;
    }
}

/* --- Tablet (768px - 1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Header */
    .header__burger {
        display: flex;
    }

    .header__nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--c-dark);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--sp-xl);
        transform: translateX(100%);
        transition: transform var(--transition-normal);
        z-index: 1;
        padding: var(--sp-4xl) var(--sp-lg) var(--sp-3xl);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .header__nav.is-open {
        transform: translateX(0);
    }

    .nav__list {
        flex-direction: column;
        gap: var(--sp-lg);
        text-align: center;
    }

    .nav__link {
        font-size: var(--fs-h3);
        color: rgba(255, 255, 255, 0.8);
    }

    .nav__link:hover,
    .nav__link--active {
        color: var(--c-white);
    }

    /* Cacher lang/auth par defaut sur tablet */
    .lang-switcher,
    .user-menu,
    .header__auth-buttons {
        display: none;
    }

    /* Quand menu ouvert : afficher lang + auth */
    .header__nav.is-open ~ .header__actions {
        position: fixed;
        bottom: var(--sp-2xl);
        left: 0;
        right: 0;
        z-index: 2;
        flex-direction: column;
        align-items: center;
        gap: var(--sp-md);
    }

    .header__nav.is-open ~ .header__actions .lang-switcher {
        display: flex;
    }

    .header__nav.is-open ~ .header__actions .lang-switcher__link {
        color: rgba(255, 255, 255, 0.6);
        font-size: var(--fs-small);
    }

    .header__nav.is-open ~ .header__actions .lang-switcher__link:hover,
    .header__nav.is-open ~ .header__actions .lang-switcher__link--active {
        color: var(--c-white);
    }

    .header__nav.is-open ~ .header__actions .lang-switcher__sep {
        color: rgba(255, 255, 255, 0.3);
    }

    .header__nav.is-open ~ .header__actions .header__auth-buttons {
        display: flex;
        gap: var(--sp-sm);
    }

    /* User menu : avatar + dropdown inline dans l'overlay tablet */
    .header__nav.is-open ~ .header__actions .user-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp-sm);
    }

    .header__nav.is-open ~ .header__actions .user-menu__dropdown {
        display: block;
        position: static;
        min-width: 0;
        width: 220px;
        animation: none;
    }

    .header__nav.is-open ~ .header__actions .user-menu__trigger {
        border-color: rgba(255, 255, 255, 0.4);
    }

    .header__burger {
        z-index: 3;
    }

    /* Hero */
    .hero__title {
        font-size: clamp(2rem, 5vw, 3rem);
        min-height: auto;
    }

    /* Sections — padding reduit */
    .paradox {
        padding: var(--sp-3xl) 0;
    }

    .resolution {
        padding: var(--sp-3xl) 0;
    }

    .portfolio-preview {
        padding: var(--sp-3xl) 0;
    }

    .final-cta {
        padding: var(--sp-3xl) 0;
    }

    /* Paradox — 3 colonnes cote a cote sur tablet */
    .paradox__grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 100%;
        gap: var(--sp-md);
    }

    .paradox__card-title {
        font-size: var(--fs-body);
    }

    .paradox__card-text {
        font-size: var(--fs-xs);
    }

    /* Masonry : 3 colonnes + 2 en dessous, centrees */
    .masonry {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-md);
    }

    /* Portfolio preview — 2 colonnes */
    .portfolio-preview__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-preview__grid > :last-child {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }

    /* Footer */
    .footer__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Grid utilities */
    .grid--4,
    .grid--5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Desktop small (1024px - 1439px) --- */
@media (min-width: 1024px) and (max-width: 1439px) {
    .paradox {
        padding: var(--sp-4xl) 0;
    }

    /* Masonry : 5 colonnes par defaut sur desktop (via components.css) */
}

/* --- Desktop large (1440px+) --- */
@media (min-width: 1440px) {
    :root {
        --container-padding: var(--sp-xl);
    }
}