/*
=============================================================================
  OWLI — assets/css/responsive.css
  Styles responsive globaux — mobile first
=============================================================================

  CE FICHIER EST INCLUS DANS TOUTES LES PAGES.
  Il gère :
    - La navbar mobile avec menu hamburger (landing + pages app)
    - La sidebar mobile (drawer latéral)
    - Les grilles responsive
    - Les ajustements typographiques mobile
    - Les modales et overlays sur mobile

  POINTS DE RUPTURE :
    480px  → très petit mobile (iPhone SE)
    640px  → mobile standard
    768px  → tablette portrait
    900px  → tablette paysage / petit desktop
    1100px → desktop moyen

=============================================================================
*/

/* =========================================================================
   NAVBAR MOBILE — hamburger + drawer
   ========================================================================= */

/*
  Le bouton hamburger est injecté par mobile.js dans toutes les pages.
  Il est masqué par défaut sur desktop.
*/
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    transition: background .15s;
    flex-shrink: 0;
}
.hamburger:hover { background: rgba(0,0,0,.06); }
.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--dark, #0e1a13);
    border-radius: 2px;
    transition: transform .25s, opacity .2s;
}
/* Animation hamburger → croix */
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Overlay sombre derrière le menu mobile */
.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(14,26,19,.5);
    z-index: 150;
    opacity: 0;
    transition: opacity .25s;
}
.mobile-overlay.open {
    display: block;
    opacity: 1;
}

/* =========================================================================
   SIDEBAR MOBILE — drawer
   La sidebar (.sidebar) est transformée en drawer sur mobile.
   Elle sort de la gauche au tap du hamburger.
   ========================================================================= */

@media (max-width: 900px) {

    /* Sidebar devient un drawer fixe */
    .sidebar {
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.4,0,.2,1);
        z-index: 200;
        /* Elle reste visible en position fixe, juste hors écran */
        box-shadow: none;
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(14,26,19,.25);
    }

    /* Le contenu principal reprend toute la largeur */
    .main {
        margin-left: 0 !important;
        max-width: 100vw !important;
        padding: 1.25rem !important;
    }

    /* Topbar admin aussi */
    .admin-topbar {
        left: 0 !important;
    }
    .admin-main {
        margin-left: 0 !important;
        max-width: 100vw !important;
        padding: 1.25rem !important;
        margin-top: var(--topbar-h, 58px) !important;
    }
}

/* =========================================================================
   LANDING PAGE — navbar mobile
   ========================================================================= */

@media (max-width: 768px) {

    /* Affiche le hamburger */
    .hamburger { display: flex; }

    /* Masque les liens de nav sur mobile */
    .nav-links { display: none !important; }

    /* Menu mobile déroulant */
    .mobile-nav-menu {
        display: none;
        position: fixed;
        top: 66px; /* hauteur navbar */
        left: 0;
        right: 0;
        background: white;
        border-bottom: 1px solid var(--border, #dce9e0);
        padding: 1rem 1.5rem 1.5rem;
        z-index: 400;
        box-shadow: 0 8px 24px rgba(14,26,19,.12);
        flex-direction: column;
        gap: .25rem;
    }
    .mobile-nav-menu.open { display: flex; }
    .mobile-nav-menu a {
        display: block;
        padding: .7rem .5rem;
        font-size: .95rem;
        color: var(--text, #2a3d2f);
        font-weight: 400;
        border-bottom: 1px solid var(--border, #dce9e0);
        text-decoration: none;
    }
    .mobile-nav-menu a:last-child { border-bottom: none; }
    .mobile-nav-menu a:hover { color: var(--green, #1a8a5a); }
    .mobile-nav-menu .nav-cta-mobile {
        display: flex;
        gap: .75rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border, #dce9e0);
    }
    .mobile-nav-menu .nav-cta-mobile a {
        flex: 1;
        text-align: center;
        border: none;
        padding: .7rem;
        border-radius: 8px;
    }
    .mobile-nav-menu .btn-primary-mobile {
        background: var(--green, #1a8a5a);
        color: white !important;
    }
    .mobile-nav-menu .btn-ghost-mobile {
        background: var(--green-pale, #eaf6f0);
        color: var(--green, #1a8a5a) !important;
    }

    /* Auth buttons dans navbar : compacte sur mobile */
    .nav-cta .btn { padding: .5rem .9rem; font-size: .82rem; }
}

/* =========================================================================
   LANDING PAGE — sections responsive
   ========================================================================= */

@media (max-width: 900px) {
    .feature-row,
    .feature-row.flip {
        grid-template-columns: 1fr !important;
        direction: ltr !important;
        gap: 2rem !important;
    }
    .feature-visual { min-height: 260px; }
    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; }
    .stats-inner, .stats-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; }
    .steps { grid-template-columns: 1fr !important; }
    .steps::after, .steps::before { display: none !important; }
    .testi-grid, .testimonials { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
    .hero { padding: 6rem 1.25rem 4rem !important; }
    .hero h1 { font-size: clamp(2rem, 8vw, 2.8rem) !important; letter-spacing: -.5px !important; }
    .hero p { font-size: 1rem !important; }
    .hero-actions { flex-direction: column; align-items: center; }
    .hero-actions .btn { width: 100%; max-width: 280px; justify-content: center; }
    .hero-proof { flex-direction: column; gap: .5rem; }
    .section { padding: 3.5rem 1.25rem !important; }
    .pillars-grid { grid-template-columns: 1fr 1fr !important; }
    .footer-grid { grid-template-columns: 1fr !important; }
    .footer__inner, .footer-bottom { flex-direction: column !important; text-align: center; gap: 1rem !important; }
    .cta-actions { flex-direction: column; align-items: center; }
    .cta-actions .btn { width: 100%; max-width: 300px; justify-content: center; }
}

@media (max-width: 400px) {
    .pillars-grid { grid-template-columns: 1fr !important; }
}

/* =========================================================================
   PAGES AUTH (login / register)
   ========================================================================= */

@media (max-width: 768px) {
    /* Cache le panneau gauche décoratif */
    body:has(.panel-left) { grid-template-columns: 1fr !important; }
    .panel-left { display: none !important; }
    .panel-right {
        padding: 2rem 1.25rem !important;
        justify-content: flex-start !important;
        padding-top: 2.5rem !important;
        min-height: 100vh;
    }
    .form-box { max-width: 100% !important; }
}

/* =========================================================================
   DASHBOARD
   ========================================================================= */

@media (max-width: 900px) {
    .dash-header { flex-direction: column; gap: 1rem; align-items: flex-start; }
    .stats-row { grid-template-columns: 1fr 1fr !important; }
    .dash-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 500px) {
    .stats-row { grid-template-columns: 1fr !important; }
    .pillars-grid { grid-template-columns: 1fr !important; }
    .modal-pillars { grid-template-columns: 1fr !important; }
    .recap-grid { grid-template-columns: 1fr 1fr !important; }

    /* Modale plein écran sur très petit mobile */
    .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
    .modal {
        border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
        max-height: 85vh !important;
    }
}

/* =========================================================================
   PAGE PILIER
   ========================================================================= */

@media (max-width: 768px) {
    .pillar-title-row { gap: .75rem; }
    .pillar-big-icon { width: 46px; height: 46px; font-size: 1.3rem; }
    h1.pillar-name { font-size: 1.5rem; }
    .content-grid { grid-template-columns: 1fr !important; }
    .gen-params { grid-template-columns: 1fr !important; }
    .workout-actions { flex-direction: column; }
    .workout-actions button { width: 100%; justify-content: center; }
    .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab { white-space: nowrap; flex-shrink: 0; }
}

/* =========================================================================
   PROFIL
   ========================================================================= */

@media (max-width: 900px) {
    .profile-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
    .profile-header { flex-direction: column; text-align: center; gap: 1rem; }
    .profile-badges { justify-content: center; }
    .stats-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 380px) {
    .stats-grid { grid-template-columns: 1fr !important; }
}

/* =========================================================================
   COMMUNAUTÉ
   ========================================================================= */

@media (max-width: 1050px) {
    .community-grid { grid-template-columns: 1fr !important; }
    .stats-band { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 520px) {
    .stats-band { grid-template-columns: 1fr !important; }
    .waiting-preview { grid-template-columns: 1fr !important; }
}

/* =========================================================================
   ADMIN
   ========================================================================= */

@media (max-width: 900px) {
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.4,0,.2,1);
        z-index: 200;
    }
    .admin-sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(14,26,19,.25);
    }
    .stats-row { grid-template-columns: 1fr 1fr !important; }
    table { font-size: .78rem; }
    table td, table th { padding: .55rem .65rem !important; }
    .form-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 500px) {
    .stats-row { grid-template-columns: 1fr !important; }
}

/* =========================================================================
   UTILITAIRES GLOBAUX MOBILE
   ========================================================================= */

/* Évite le zoom sur les inputs iOS */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important; /* iOS zoome si < 16px */
    }
}

/* Largeur max pour les boutons pleins sur mobile */
@media (max-width: 480px) {
    .btn--block-mobile {
        width: 100%;
        justify-content: center;
    }
}

/* Cards ne débordent pas */
.content-card, .pillar-card, .testi-card {
    word-break: break-word;
}

/* Images responsive */
img { max-width: 100%; height: auto; }

/* Scroll horizontal doux pour les tabs */
.tabs {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
}
.tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari */