/* ============================================
   ABSOLUTE MOBILE-FIRST RESPONSIVE FIX
   Ensures 100% fluidity from 320px to 1920px
   Fixes overflows, touch targets, and grid wraps
   ============================================ */

/* 1. Reset Overflows globally */
html,
body {
    overflow-x: hidden !important;
    width: 100%;
}

* {
    box-sizing: border-box;
}

/* 2. Fluid Typography (Clamp) */
:root {
    /* Fluid Titles */
    --title-h1: clamp(1.8rem, 5vw, 4rem);
    --title-h2: clamp(1.4rem, 4vw, 2.5rem);
    --title-h3: clamp(1.2rem, 3vw, 1.8rem);

    /* Fluid Spacing */
    --space-hero: clamp(40px, 10vh, 120px);
    --space-section: clamp(40px, 8vw, 80px);

    /* Container Padding */
    --container-pad: clamp(16px, 4vw, 24px);
}

h1,
.hero-title {
    font-size: var(--title-h1) !important;
    line-height: 1.2 !important;
}

h2,
.section-title {
    font-size: var(--title-h2) !important;
    line-height: 1.3 !important;
}

h3,
.card-title {
    font-size: var(--title-h3) !important;
    line-height: 1.3 !important;
}

.container {
    padding-left: var(--container-pad) !important;
    padding-right: var(--container-pad) !important;
    max-width: 100vw !important;
    /* Prevent horizontal scroll */
}

/* 3. Touch Target Sizes (Accessibility 48px min) */
button,
.btn,
.theme-toggle,
.header-action-btn,
.footer-socials a,
.scroll-top {
    min-height: 48px;
    min-width: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn {
    padding: 12px 24px;
}

/* ============================================
   BREAKPOINT: 320px - 480px (Ultra Small Mobile)
   iPhone SE, old Androids
   ============================================ */
@media (max-width: 480px) {

    /* Navbar */
    .brand__name {
        font-size: 16px !important;
    }

    .brand__meta {
        font-size: 10px !important;
    }

    .header-actions-pill {
        gap: 8px !important;
    }

    .theme-toggle,
    .header-action-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px;
        min-height: 40px;
    }

    /* Hero Section */
    .hero-section {
        padding-top: calc(72px + 20px) !important;
        gap: 30px !important;
        padding-bottom: 30px !important;
    }

    .hero-visual {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }

    .hero-visual>div {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    .hero-badge {
        font-size: 10px !important;
        padding: 6px 12px !important;
        width: fit-content;
    }

    /* CTAs */
    .hero-content>div[style*="display: flex"] {
        flex-direction: column !important;
        width: 100% !important;
    }

    .btn {
        width: 100% !important;
        /* Full width stack */
        justify-content: center !important;
    }

    /* Tech Stack */
    .tech-stack {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        /* 2 cols exact */
        gap: 8px !important;
    }

    .tech-pill {
        width: 100% !important;
        justify-content: center !important;
        font-size: 11px !important;
        padding: 8px 4px !important;
    }

    /* Bento Grid */
    .bento-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .bento-card,
    .cyber-card {
        width: 100% !important;
        padding: 20px !important;
    }

    /* Footer */
    .premium-footer {
        padding-top: 40px !important;
    }

    .footer-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    .footer-brand,
    .footer-nav,
    .footer-contact {
        align-items: center !important;
        text-align: center !important;
    }

    .contact-list {
        text-align: center !important;
    }

    .contact-list li {
        justify-content: center !important;
    }

    .footer-cta {
        text-align: center !important;
    }
}

/* ============================================
   BREAKPOINT: 481px - 768px (Tablets / Large Phones)
   ============================================ */
@media (min-width: 481px) and (max-width: 768px) {

    .hero-section {
        padding-top: calc(72px + 40px) !important;
    }

    .tech-stack {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .bento-grid {
        grid-template-columns: 1fr 1fr !important;
        /* 2 cols */
    }

    .span-2,
    .span-3,
    .span-4 {
        grid-column: span 2 !important;
        /* Fill row */
    }
}

/* Fixed Backgrounds Overflow */
canvas#particle-canvas,
.mesh-orb {
    max-width: 100vw !important;
    overflow: hidden !important;
}

/* --- MOBILE RESPONSIVE TWEAKS --- */
@media (max-width: 768px) {
    .global-navbar {
        padding: 0 16px;
    }
    .nav-brand {
        font-size: 1.1rem;
    }
    .report-section {
        padding: 20px;
        margin-top: 24px;
        margin-bottom: 24px;
    }
    .report-title {
        font-size: 1.2rem;
    }
    .terminal-body {
        font-size: 0.75rem;
        padding: 12px;
        overflow-x: auto; /* Scroll horizontal sur les commandes longues */
    }
    .bento-card, .cyber-card {
        padding: 24px !important;
    }
    /* Hide custom cursor on touch devices to prevent bugs */
    .custom-cursor, .custom-cursor-dot {
        display: none !important;
    }
}

@media (max-width: 900px) {
  .bento-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  /* Reset inline grid-column spans that override media queries */
  .bento-grid > * { grid-column: 1 !important; }
  .bento-card, .cyber-card { width: 100% !important; }
}

/* --- 2026 responsive refinement --- */
@media (max-width: 1024px) {
    .ap-year-hero__grid,
    .veille-hero,
    .veille-impact,
    .footer-content {
        grid-template-columns: 1fr !important;
    }

    .app-top {
        margin-left: 12px !important;
        margin-right: 12px !important;
        max-width: calc(100% - 24px) !important;
    }
}

@media (max-width: 768px) {
    main.container {
        padding-left: clamp(14px, 4vw, 18px) !important;
        padding-right: clamp(14px, 4vw, 18px) !important;
    }

    .hero-section,
    .page-hero,
    .veille-hero {
        padding-top: calc(72px + 28px) !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        border-radius: 24px !important;
    }

    .hero-actions,
    .veille-hero__actions,
    .footer-socials,
    .contact-actions {
        width: 100%;
        justify-content: stretch;
    }

    .hero-actions .btn,
    .veille-hero__actions .btn,
    .contact-actions .btn {
        flex: 1 1 100%;
        width: 100%;
    }

    .veille-kpis,
    .ap-year-panel__stats,
    .report-image-grid,
    .veille-method {
        grid-template-columns: 1fr !important;
    }

    .bento-card,
    .cyber-card,
    .report-section,
    .veille-panel,
    .veille-step,
    .veille-source,
    .contact-method {
        border-radius: 22px !important;
    }
}

@media (max-width: 540px) {
    .brand__name,
    .footer-logo,
    .nav-brand {
        font-size: 1rem !important;
    }

    .hero-badge,
    .breadcrumbs,
    .veille-hero__eyebrow,
    .ap-year-panel__kicker,
    .ap-year-overview__eyebrow {
        width: fit-content;
        max-width: 100%;
        line-height: 1.35;
    }

    .header-actions-pill,
    .ux-top-actions {
        gap: 6px !important;
    }

    .header-actions-pill .theme-toggle,
    .header-actions-pill .header-action-btn,
    .ux-header-cta,
    #global-theme-toggle {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
    }
}

/* ============================================ 
   AP PAGES - MOBILE NAV & LAYOUT FIX 
   ============================================ */
@media (max-width: 640px) {
    .app-top__bar > div > a.btn-secondary[href="index.html"] {
        display: none !important;
    }
    .app-top__bar > div { gap: 8px !important; }
    .footer-nav { flex-direction: column !important; gap: 10px !important; }
    .footer-nav .nav-pill, .footer-nav .btn { width: 100% !important; justify-content: center !important; text-align: center; }
}
.bento-grid, .premium-download-grid, .report-image-grid, .tech-stack { overflow: hidden; }
@media (max-width: 640px) { .premium-download-grid { grid-template-columns: 1fr !important; } .premium-dl-btn { width: 100%; } }


@media (max-width: 640px) {
    .page-hero div[style*="display: flex"], section > div[style*="display: flex"] { flex-wrap: wrap !important; justify-content: center !important; }
}


/* HOTFIX POUR ÉVITER TOUT DÉBORDEMENT MOBILE SUR LES PAGES AP */
@media (max-width: 640px) {
    .breadcrumbs, .tech-stack, .footer-nav, .premium-download-grid {
        flex-wrap: wrap !important;
    }
    /* Assurer que la grille footer-nav s'empile bien */
    .footer-nav { flex-direction: column !important; gap: 12px; }
    .footer-nav > a { width: 100% !important; justify-content: center !important; }
    /* Fixer le overflow global du main */
    main.container { overflow-x: hidden !important; max-width: 100vw; }
}


/* HOTFIX POUR ÉVITER LE BUG DE COLONNES MULTIPLES DU MAIN.CONTAINER SUR PC */
@media (min-width: 641px) {
    main.container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: var(--container-width, 1200px) !important;
        margin: 0 auto !important;
    }
}