/* ============================================
   BENTOUYA - Responsive CSS
   Media Queries & Breakpoints
============================================ */

/* ============================================
   LARGE TABLETS & SMALL DESKTOPS (1200px)
============================================ */
@media (max-width: 1200px) {
    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-content {
        gap: 5rem;
    }

    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .philosophy-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   TABLETS (1024px)
============================================ */
@media (max-width: 1024px) {
    :root {
        --section-padding: 8rem 1.5rem;
    }

    .menu-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
    }

    .about-content {
        grid-template-columns: 1fr;
        gap: 6rem;
    }

    .about-visual {
        order: -1;
    }

    .hanko-wrapper {
        max-width: 500px;
        margin: 0 auto;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-map {
        min-height: 450px;
    }

    .menu-detail-items {
        grid-template-columns: 1fr;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    .philosophy-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

    .quote-banner blockquote {
        font-size: clamp(1.4rem, 3.5vw, 2.2rem);
        padding: 0 1rem;
    }

    .quote-banner blockquote::before {
        font-size: 3.5em;
        left: -0.2em;
    }
}

/* ============================================
   MOBILE LANDSCAPE & SMALL TABLETS (768px)
============================================ */
@media (max-width: 768px) {
    /* Disable custom cursor on mobile */
    .lantern-aura,
    .lantern-glow,
    .lantern-core,
    .cursor-dot,
    .cursor-ring {
        display: none;
    }

    body {
        cursor: auto;
    }

    /* Carousel */
    .carousel-container {
        gap: 1rem;
    }

    .carousel-btn {
        width: 50px;
        height: 50px;
    }

    .carousel-btn svg {
        width: 20px;
        height: 20px;
    }

    .menu-carousel-section {
        padding: 4rem 1rem;
    }

    /* Navigation */
    .nav {
        padding: 1.25rem 1.5rem;
        z-index: 1002;
    }

    .nav.scrolled {
        padding: 1rem 1.5rem;
    }

    .nav-links {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: #0a0908 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3.5rem !important;
        z-index: 9998 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .nav-links.active {
        display: flex !important;
    }

    .nav-links li {
        text-align: center;
        width: 100%;
        list-style: none;
    }

    .nav-links a {
        font-size: 1.3rem;
        letter-spacing: 5px;
        display: block;
        text-align: center;
    }

    /* Supprimer TOUS les soulignements sur mobile */
    .nav-links a::before,
    .nav-links a::after,
    .nav-links li a::before,
    .nav-links li a::after {
        display: none !important;
        content: none !important;
    }

    /* Style du bouton CTA sur mobile */
    .nav-links .nav-cta,
    .nav-links a.nav-cta {
        margin-top: 2rem;
        border: 1px solid var(--gold) !important;
        padding: 1rem 2.5rem !important;
        border-radius: 100px !important;
        color: var(--gold) !important;
        text-decoration: none !important;
        background: transparent !important;
        display: inline-block !important;
    }

    .nav-links .nav-cta:hover,
    .nav-links a.nav-cta:hover {
        background: var(--gold) !important;
        color: var(--ink) !important;
    }

    /* Fix scroll-hint centrage */
    .scroll-hint {
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
    }

    /* Mobile menu button z-index */
    .mobile-menu-btn {
        z-index: 9999 !important;
        position: relative !important;
    }

    .mobile-menu-btn {
        display: flex;
        cursor: pointer;
    }

    /* Menu Download */
    .menu-download-content {
        flex-direction: column;
        text-align: center;
        padding: 2rem;
        gap: 1.5rem;
    }

    .menu-download-text {
        order: 1;
    }

    .menu-download-icon {
        order: 0;
    }

    .menu-download-btn {
        order: 2;
        width: 100%;
        justify-content: center;
    }

    /* Hero */
    .noren-panel {
        width: 50px;
        height: 100px;
    }

    .noren-panel span {
        font-size: 1.2rem;
    }

    .hero-subtitle {
        padding: 0 1rem;
    }

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

    .feature-item {
        padding: 1.5rem 1rem;
    }

    .feature-value {
        font-size: 1rem;
    }

    /* About */
    .about-features {
        grid-template-columns: 1fr;
    }

    .badge:nth-child(2), 
    .badge:nth-child(3) {
        display: none;
    }

    /* Contact */
    .contact-info {
        padding: 3.5rem 2rem;
    }

    .contact-info h2 {
        font-size: 2.5rem;
    }

    /* Footer */
    .footer-content {
        flex-direction: column;
        gap: 3rem;
        text-align: center;
    }

    .footer-brand {
        flex-direction: column;
        gap: 1.25rem;
    }

    .footer-divider {
        display: none;
    }

    /* Quote Banner */
    .quote-banner {
        padding: 4rem 1.5rem;
        min-height: 250px;
    }

    /* Sections */
    .section-title {
        font-size: clamp(1.8rem, 4vw, 2.5rem);
    }

    .section-desc {
        font-size: 1.1rem;
        padding: 0 1rem;
    }

    .section-intro {
        margin-bottom: 3rem;
    }

    /* Testimonials */
    .testimonials-section {
        padding: 6rem 1.5rem;
    }

    .testimonial-card {
        padding: 2rem;
    }

    /* Philosophy */
    .philosophy-section {
        padding: 6rem 1.5rem;
    }

    .philosophy-item {
        padding: 2rem 1.5rem;
    }
}

/* ============================================
   MOBILE (600px)
============================================ */
@media (max-width: 600px) {
    /* Menu Detail */
    .menu-detail-item {
        grid-template-columns: 40px 1fr;
        grid-template-rows: auto auto;
        gap: 0.5rem 1rem;
        padding: 1rem 1.25rem;
    }

    .menu-detail-item .code {
        grid-row: span 2;
        align-self: center;
    }

    .menu-detail-item .name-jp {
        font-size: 0.95rem;
    }

    .menu-detail-item .name-fr {
        text-align: left;
        font-size: 0.85rem;
        color: var(--paper-muted);
    }

    .menu-detail-content {
        padding: 3rem 1.5rem;
    }

    .menu-detail-header .jp {
        font-size: 2.2rem;
    }

    /* Quote */
    .quote-banner blockquote::before {
        display: none;
    }
}

/* ============================================
   SMALL MOBILE (480px)
============================================ */
@media (max-width: 480px) {
    /* Carousel - Stack buttons on very small screens */
    .carousel-container {
        flex-direction: column;
        gap: 1.5rem;
    }

    .carousel-btn {
        width: 45px;
        height: 45px;
    }

    .carousel-wrapper {
        order: 1;
    }

    .carousel-btn-prev {
        order: 0;
        transform: rotate(90deg);
    }

    .carousel-btn-next {
        order: 2;
        transform: rotate(90deg);
    }

    /* Hero */
    .noren-panel {
        width: 42px;
        height: 85px;
    }

    .noren-panel span {
        font-size: 1rem;
    }

    .hero-title .sub {
        letter-spacing: 0.5em;
        font-size: 0.7rem;
    }

    .hero-title .fr {
        letter-spacing: 0.2em;
    }

    .hero-cta {
        padding: 1rem 2rem;
        font-size: 0.8rem;
    }

    /* Hanko */
    .hanko {
        width: 260px;
        height: 260px;
    }

    .hanko-kanji {
        font-size: 4rem;
    }

    .hanko-sub {
        font-size: 0.9rem;
    }

    /* Menu Card */
    .menu-card {
        padding: 2.5rem 2rem 2rem;
    }

    .menu-card-jp {
        font-size: 1.8rem;
    }

    .menu-card-icon {
        width: 65px;
        height: 65px;
    }

    .menu-card-kanji {
        font-size: 8rem;
    }

    /* Contact */
    .contact-info::before {
        display: none;
    }

    .contact-info {
        padding: 2.5rem 1.5rem;
    }

    .halal-badge-large {
        padding: 1.25rem 1.75rem;
        font-size: 0.9rem;
        gap: 1rem;
    }

    .halal-badge-large svg {
        width: 24px;
        height: 24px;
    }

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

    .feature-item {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        text-align: left;
        padding: 1.25rem;
    }

    .feature-icon {
        margin: 0;
        width: 50px;
        height: 50px;
        flex-shrink: 0;
    }

    /* Footer */
    .footer-social a {
        width: 48px;
        height: 48px;
    }

    /* Philosophy */
    .philosophy-icon {
        width: 65px;
        height: 65px;
    }

    .philosophy-icon svg {
        width: 28px;
        height: 28px;
    }

    .philosophy-item h3 {
        font-size: 1.3rem;
    }

    /* Testimonials */
    .testimonial-card {
        padding: 1.75rem;
    }

    .testimonial-text {
        font-size: 1rem;
    }
}

/* ============================================
   EXTRA SMALL MOBILE (360px)
============================================ */
@media (max-width: 360px) {
    .nav-logo span:last-child {
        display: none;
    }

    .hero-title .jp {
        font-size: 3rem;
    }

    .section-title {
        font-size: 1.6rem;
    }

    .menu-card {
        padding: 2rem 1.5rem;
    }

    .contact-item {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .contact-item-icon {
        margin: 0 auto;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION
============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 6rem 2rem;
    }

    .noren {
        margin-bottom: 2rem;
    }

    .scroll-hint {
        display: none;
    }
}

/* ============================================
   HIGH DPI DISPLAYS
============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper shadows for retina */
    .menu-card:hover {
        box-shadow: 
            0 50px 100px rgba(0,0,0,0.4),
            0 0 150px var(--lantern);
    }
}

/* ============================================
   REDUCED MOTION PREFERENCES
============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .noren-panel {
        opacity: 1;
        transform: none;
    }

    .hero-title,
    .hero-divider,
    .hero-subtitle,
    .hero-cta,
    .scroll-hint {
        opacity: 1;
        transform: none;
    }

    .menu-card {
        opacity: 1;
        transform: none;
    }

    .particle {
        display: none;
    }
}

/* ============================================
   DARK MODE (if system prefers)
============================================ */
@media (prefers-color-scheme: light) {
    /* Keep dark theme regardless - it's the design */
}

/* ============================================
   PRINT STYLES
============================================ */
@media print {
    .loader,
    .grain-overlay,
    .seigaiha-overlay,
    .vignette,
    .lantern-aura,
    .lantern-glow,
    .lantern-core,
    .cursor-dot,
    .cursor-ring,
    .nav,
    .scroll-hint,
    .particles,
    .deco-line {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .hero-title .jp {
        -webkit-text-fill-color: black;
        color: black;
    }

    .menu-card,
    .testimonial-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}