/* ============================================================
   mobile.css : Surcouche mobile uniquement.
   N'affecte AUCUNEMENT le rendu desktop : toutes les règles
   sont enfermées dans des media queries max-width.
   À charger APRÈS style.css.
   ============================================================ */

/* ----------- Petits écrans (tablette portrait & mobile) ------ */
@media (max-width: 992px) {

    /* Réduit le padding latéral global */
    .container-1 {
        padding-inline: 4% !important;
    }

    .container-shop {
        padding-left: 4% !important;
        padding-right: 4% !important;
    }

    /* Vidéo de fond YouTube : largeur fluide */
    .fond6 iframe {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9;
    }
}


/* ----------- Mobile (≤ 768px) -------------------------------- */
@media (max-width: 768px) {

    /* ---- Body / espace navbar ---- */
    body {
        padding-top: 60px;
    }

    /* ---- Hero principal ---- */
    .fondvideo {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .fondvideo2 {
        height: 25vh;
    }

    /* Le hero index a un row 2 colonnes : on stack */
    .fondvideo .row.align-items-center > .col {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center !important;
    }

    /* Logo dans le hero : 30% c'est trop petit en mobile */
    .fondvideo #logo {
        max-width: 55% !important;
        margin-bottom: 1.5rem;
    }

    /* Cache les <br> de calage du hero (utiles uniquement desktop) */
    .fondvideo .col br {
        display: none;
    }

    /* ---- Titres géants ---- */
    .custom-h1 {
        font-size: 2rem;
    }

    .custom-h1-2 {
        font-size: 2.4rem;
    }

    .custom-h3 {
        font-size: 1rem;
    }

    .merilac {
        font-size: 2.6rem !important;
    }

    .text-giant {
        font-size: 2.2rem;
        line-height: 1.15;
    }

    /* ---- Sections "fondX" : paddings démesurés ---- */
    .fond1 {
        padding-top: 120px;
        padding-bottom: 180px;
    }

    .fond2,
    .fond3,
    .fond-joueur {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .fond5 {
        padding-top: 80px;
        padding-bottom: 120px;
    }

    .fond6 {
        padding: 60px 0;
    }

    /* Background blur card : padding interne plus raisonnable */
    .background-blur {
        padding: 18px;
    }

    /* ---- Bouton "play" + IP serveur : repasse en colonne ---- */
    .fondvideo .space {
        display: block;
        height: 10px;
        width: 0;
    }

    .fondvideo .custom-button {
        display: inline-block;
        margin-top: 8px;
        word-break: break-all;
    }

    /* ---- Navbar ---- */
    .navbar-nav .nav-link {
        font-size: 1rem;
        margin-right: 0;
    }

    .znv-navbar {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .navbar-brand img {
        width: 110px !important;
    }

    /* Cartes infos / cosmétiques : un peu de respiration */
    .card-with-padding {
        padding: 16px !important;
    }

    .rounded-custom {
        border-radius: 14px !important;
    }

    /* ---- Boutique : bordures épaisses + grand padding ---- */
    .boutiqueborder1,
    .boutiqueborder2 {
        border-width: 4px;
        padding: 18px;
    }

    /* ---- Sections grade fullscreen : plus tenable en mobile ---- */
    .custom-grade-scroll-section {
        height: auto;
        min-height: 70vh;
        padding: 3rem 1rem;
    }

    .custom-grade-scroll-section h1,
    .custom-grade-scroll-section h2 {
        font-size: 1.8rem;
    }

    .custom-grade-scroll-section p {
        font-size: 1rem;
    }

    /* ---- Tableaux classement : scroll horizontal au lieu de casser ---- */
    #classement-table-wrapper {
        overflow-x: auto;
    }

    #classement-table {
        min-width: 540px;
        font-size: 0.9rem;
    }

    /* ---- Discord schema (gap énorme) ---- */
    .discord-link-page .schema-container {
        gap: 12px;
    }

    .discord-link-page .dotted-line {
        width: 24px;
    }

    /* ---- Avatar profil : 25% trop petit en mobile ---- */
    .avatar-container img {
        width: 55%;
    }

    /* ---- Anti-débordement général ---- */
    img,
    video,
    iframe {
        max-width: 100%;
    }

    table {
        max-width: 100%;
    }

    /* Empêche tout débordement horizontal accidentel */
    html, body {
        overflow-x: hidden;
    }
}


/* ============================================================
   Désactivation des "scroll-jacks" en mobile
   ------------------------------------------------------------
   Sur desktop : Mérilac & Highlights utilisent du sticky scroll
   (scroll vertical → animation / scroll horizontal). En mobile
   c'est inconfortable et ça casse souvent à cause de Lenis +
   tactile + barres URL qui changent de hauteur.
   On repasse simplement en sections classiques empilées.
   ============================================================ */
@media (max-width: 768px) {

    /* ---------- MÉRILAC ---------- */
    .merilac-scroll-area {
        height: auto !important;
    }

    .merilac-sticky {
        position: static !important;
        height: auto !important;
        overflow: visible !important;
    }

    .merilac-layer {
        height: auto !important;
    }

    /* L'image n'est plus en absolute centrée mais en bloc normal */
    .merilac-image-wrap {
        position: relative !important;
        inset: auto !important;
        height: 50vh;
        min-height: 280px;
        transform: none !important;
        filter: none !important;
        will-change: auto;
    }

    /* Titre qui était fade-in piloté par scroll → toujours visible */
    .merilac-heading {
        position: static !important;
        inset: auto !important;
        opacity: 1 !important;
        transform: none !important;
        padding: 2.5rem 1rem 1rem !important;
        pointer-events: auto !important;
    }

    /* Cartes infos : statiques, plein opacité */
    .merilac-info {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 100% !important;
        padding: 1rem;
        bottom: auto !important;
        left: auto !important;
    }

    .merilac-info .card {
        opacity: 1 !important;
        transform: none !important;
        background-color: #121212 !important;
    }


    /* ---------- HIGHLIGHTS HORIZONTAUX ---------- */

    /* Plus de zone de 320vh, plus de sticky */
    .zenahscroll-wrapper {
        height: auto !important;
    }

    .zenahscroll-sticky {
        position: static !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Le track passe de flex-row + transformX(...) à un empilement vertical.
       Le JS pose un transform inline pour glisser horizontalement → on
       l'écrase avec !important pour forcer "aucun déplacement". */
    .zenahscroll-track {
        display: block !important;
        height: auto !important;
        transform: none !important;
        will-change: auto;
    }

    /* Chaque panneau prend la largeur normale, hauteur naturelle */
    .zenahpanel {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        padding: 3rem 1rem !important;
    }

    .zenahpanel > .container {
        height: auto !important;
        display: block !important;
    }

    /* Les colonnes intra-panel : on stack proprement */
    .zenahpanel .row {
        flex-direction: column;
    }

    /* Les paddings inline 8% des panels 2 & 3 sont trop forts en mobile */
    .zenahpanel [style*="padding-left:8%"],
    .zenahpanel [style*="padding-right:8%"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
    }

    /* Image qui tourne : 30% de la largeur c'est minuscule en mobile */
    .zenahpanel .tourne {
        max-width: 45% !important;
        margin: 0 auto 1rem;
    }


    /* ---------- MEDIA REWARD (barre verticale 4400px) ---------- */
    /* Si tu as cette section sur d'autres pages, on la rend digérable */
    .media-reward-track-wrapper {
        height: auto !important;
        min-height: 70vh;
    }

    .media-reward-sidebar.is-fixed {
        position: relative !important;
        top: auto !important;
    }
}


/* ----------- Très petit mobile (≤ 480px) --------------------- */
@media (max-width: 480px) {

    .custom-h1     { font-size: 1.7rem; }
    .custom-h1-2   { font-size: 2rem; }
    .merilac       { font-size: 2.1rem !important; }
    .text-giant    { font-size: 1.8rem; }

    .fondvideo #logo {
        max-width: 65% !important;
    }

    .fondvideo .custom-button {
        font-size: 0.85rem;
        padding: 8px 14px;
    }

    /* Boutons navbar burger seul → on évite les chevauchements */
    .znv-navbar-right .btn {
        padding: 0.35rem 0.6rem;
        font-size: 0.85rem;
    }
}