/*Style mobile ET pc lorsque la fenêtre est trop serrée pour affiche toutes les colonnes correctement*/
@media (max-width: 1200px) {
    .page-container { width: 100%; }
    .header-scene {
        height: auto; /* On laisse la hauteur s'adapter au ratio sur mobile */
        aspect-ratio: 1200 / 350; /* Garde le même ratio que ta bannière PC */
    }

	.main-layout {
		flex-direction: column;
	}

    .header-stage {
        width: 100%; /* Le stage prend toute la largeur du téléphone */
        height: auto;
        aspect-ratio: 1200 / 350;
    }

    .base-banniere {
        width: 100%;
        height: auto;
        object-fit: contain; /* L'image s'affiche en entier sans zoomer dedans */
    }

    .main-logo {
        /* On réduit la taille du logo sur mobile pour pas qu'il bouffe tout */
        max-width: 60%; 
        top: 20%;
        left: 10%;
    }
    
    .content-area {
        display: flex;
        flex-direction: column; 
        margin-left: 0; /* Important pour libérer l'espace de la sidebar */
        padding: 15px;
        width: 100%;
        align-items: center;
        box-sizing: border-box;
    }
    .button-grid {
        /* On réactive le scroll ici */
        justify-content: flex-start; 
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch; /* Scroll fluide iOS */
        padding: 0 10px;
    }
	.main-content {
        padding: 40px 50px; /* On réduit les marges internes sur mobile */
        aspect-ratio: auto; /* On laisse le livre s'allonger un peu sinon le texte débordera */
        background-size: cover;
    }
    .button-ribbon {
        /* IMPORTANT : Le ruban ne doit plus être limité à 80% ou 850px */
        width: auto; 
        max-width: none; 
    }

    .sidebar-buttons {
        width: 85%; /* On réduit un peu pour ne pas coller aux bords de la barre */
        gap: 15px;  /* On espace plus les boutons pour éviter les miss-clicks */
    }

    .rpg-button {
        width: 180px; /* Largeur fixe plus naturelle pour un bouton mobile */
        height: auto;
        aspect-ratio: 488 / 231; /* On garde les proportions de ton image */
        margin: 0 auto; /* On centre le bouton dans la sidebar */
    }

    .main-logo {
        max-width: 45%;
        margin-left: 5%;
        margin-right: auto;
    }
	.header-stage {
        aspect-ratio: 1200 / 450; /* On donne un peu plus de hauteur pour que le logo respire */
    }

    /* On s'assure que les engrenages ne bloquent pas le swipe */
    .gear-container { display: none; }

    .sidebar-navigation {
        position: fixed;
        top: 0;
        left: 0;
        width: 260px;
        height: 100vh;
        /* On la décale de 100% de sa propre largeur vers la gauche */
        transform: translateX(-100%); 
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        
        /* On vire l'ombre au repos pour éviter de voir un trait noir sur le bord */
        filter: none; 
        z-index: 2000;
        overflow-y: auto;         /* LE SECRET : permet le scroll vertical interne */
        overflow-x: hidden;       /* Évite les petits glissements horizontaux bizarres */
        
        /* Pour masquer la barre de défilement moche sur mobile (optionnel) */
        scrollbar-width: none;    /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

    /* État ouvert */
    .sidebar-navigation.active {
        transform: translateX(0);
        /* On remet l'ombre uniquement quand c'est ouvert */
        filter: drop-shadow(8px 0px 10px rgba(0, 0, 0, 0.8));
    }

    /* Le bouton Burger */
    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        position: fixed;
        top: 20px;
        left: 20px;
        z-index: 2100;
        background: var(--sign-brown);
        padding: 10px;
        border-radius: 5px;
        border: 2px solid gold;
        cursor: pointer;
    }

    .mobile-menu-toggle span {
        width: 25px;
        height: 3px;
        background: white;
    }
    .patch-status-panel {
        position: relative;
        top: 0;
        order: 999999;
        margin-top: 0;
        margin-bottom: 20px;
        width: 100%; /* Augmente ici (300px -> 450px par exemple) */
        flex-shrink: 0; /* Empêche le flexbox de le ratatiner */
    }

    /* 4. On cache le bouton de téléchargement */
    .action-buttons .download-button.download-button {
        display: none !important;
    }

    /* 5. On condense la liste des chapitres (optionnel) */
    .progress-details {
        display: grid;
        /* Crée autant de colonnes de 150px que possible, sinon remplit l'espace */
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); 
        gap: 20px;
    }
    
    .chapter-stat {
        margin-bottom: 5px;
        font-size: 0.75rem;
    }
    .bracer-board {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px !important; /* On réduit pour laisser de la place aux post-its */
        margin: 0 !important;
        overflow-x: hidden; /* Empêche le scroll horizontal parasite */
    }

    
    .projects-grid {
        display: block !important; /* On passe de grid à block pour plus de simplicité sur mobile */
        width: 100% !important;
    }

    .post-it {
        width: 92% !important; /* On laisse 4% de marge de chaque côté */
        max-width: 92% !important;
        margin: 15px auto !important; /* Centre le post-it horizontalement */
        transform: none !important; /* Annule l'inclinaison qui fait sortir les coins */
        background-size: 100% 100% !important; /* Force l'image quest.png à s'adapter à la nouvelle largeur */
        box-sizing: border-box !important;
    }

    .statut-valeur {
        margin-left: 0 !important; /* On annule bien les 275px */
        display: block !important;
        text-align: right !important; 
        
        /* AJOUTE ÇA : */
        padding-right: 70px; /* Crée une marge interne pour que le texte ne touche pas le bord du papier */
        width: 100%;
        box-sizing: border-box; /* Pour que le padding ne fasse pas déborder le bloc */
        margin-top: 5px;
    }

    .board-title {
        font-size: 1.4rem !important;
        margin-bottom: 20px !important;
    }
    .statut-valeur {
        margin-left: 0px; /* Ajuste cette valeur pour décaler plus ou moins à droite */
    }
    .cadre {
        min-width: calc(70vw + 200px);
    }
    .post-it img {
        max-width: 100% !important;
        height: auto !important;
    }

    .project-card {
        margin: 20px auto;
        /* On réduit drastiquement la bordure sur mobile sinon il ne reste plus de place pour le texte */
        border-width: 25px; 
        width: calc(100% - 10px); /* On laisse 5px de chaque côté */
    }
    .bulle-extensible {
        /* On force le centrage total en annulant le margin-left de 50px */
        margin-left: auto !important; 
        margin-right: auto !important;
        
        /* On réduit la largeur pour que ça respire */
        width: 95%; 
        max-width: none;
    }
    .detail-title {
        font-size: 1.4rem; /* Titre plus petit pour pas qu'il coupe */
        padding: 0 10px;
    }

    /* GALERIE : On cache les boutons fléchés sur mobile */
    .nav-btn {
        display: none !important;
    }

    .gallery-viewport {
        overflow-x: auto; /* On laisse le doigt faire le travail (swipe) */
        -webkit-overflow-scrolling: touch;
    }

    .gallery-item img {
        height: 160px; /* Images un peu plus petites pour en voir plus */
    }

    /* FICHE TECHNIQUE : On empile tout proprement */
    .project-specs-grid p {
        font-size: 0.9rem;
        margin: 5px 0;
    }

    /* MODE CINÉMA SUR MOBILE */
    .cinema-image {
        max-width: 95%; /* On prend toute la place */
        border-width: 2px;
    }

    
    .cinema-close-hint {
        font-size: 0.7rem;
        bottom: 10px;
    }
    
    /* Le bouton installateur prend toute la largeur */
    .installer-button {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
    .cinema-overlay {
        touch-action: none; 
    }
    
    /* On cache définitivement les flèches fantômes sur mobile */
    .cinema-btn {
        display: none !important;
    }

    .sidebar-partners {
        /* On réduit un peu l'épaisseur des bordures car 37px c'est énorme sur un petit écran */
        border-width: 25px; 
        margin-top: 15px;
        /* On augmente l'espace vertical forcé */
        min-height: 500px; 
        
        /* On s'assure que le flex ne compresse rien */
        justify-content: space-around;
    }
    .courrier-lecteurs {
        /* 1. ON RÉINITIALISE TOUT */
        position: relative !important;
        left: 0 !important;
        margin-left: 120px !important;  /* Marge de sécurité à gauche */
        margin-right: 10px !important; /* Marge de sécurité à droite */
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        
        /* 2. ON FORCE LE CALCUL DE LARGEUR */
        /* width: auto avec box-sizing permet au navigateur de calculer 
           (Largeur Écran - Marges G/D) sans déborder */
        width: auto !important;
        max-width: none !important;
        box-sizing: border-box !important;
        
        /* 3. LE PADDING INTERNE */
        padding: 20px !important;
    }

    .courrier-lecteurs h3 {
        /* Le titre doit compenser EXACTEMENT le padding de 20px du container */
        margin: -20px -20px 20px -20px !important;
        width: auto !important;
        display: block !important;
        border-radius: 4px 4px 0 0 !important;
    }

    /* On s'assure que rien ne dépasse à l'intérieur */
    .liste-coms, .comment-form-container {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
}