/*
================================================
==     FEUILLE DE STYLE POUR MOBILES            ==
==  (S'applique aux écrans <= 768px de large)   ==
================================================
*/

@media only screen and (max-width: 768px) {

    /* --- AJUSTEMENTS GLOBAUX --- */
    .container {
        display: flex;
        flex-direction: column;
    }

    h1 { font-size: 1.5em; }
    h2 { font-size: 1.3em; }
    h3 { font-size: 1.1em; }
    button { font-size: 0.95em; }


    /* --- HEADER PRINCIPAL --- */

    .game-header > * + * {
        margin-top: 10px;
    }

    #resources-display {
        text-align: left;
    }


    /* ==================================================================
    ==   CORRECTION PRINCIPALE : PANNEAUX STATS / INVENTAIRE        ==
    ==================================================================
    */
    .stats-inventory-container {
        flex-direction: column; /* Empile les .ui-row verticalement */
        gap: 15px; /* Espace entre chaque ligne (ex: entre stats et équipement) */
    }

    /* On force chaque .ui-row (qui contient 2 panneaux) à empiler ses enfants verticalement */
    .ui-row {
        flex-direction: column;
    }

    /* On s'assure que les panneaux eux-mêmes prennent toute la largeur.
    Cette règle cible tout div enfant direct d'un .ui-row.
    */
    .ui-row > div {
        width: 100%;
    }

    .left-panel, .right-panel {
        width: 100%;
        margin: 0;
    }

    .stats-inventory-container .right-panel {
        margin-top: 15px; /* Ajoute un espace au-dessus du panneau de droite quand il est empilé */
    }

    /* --- INVENTAIRE : FILTRES --- */
    #inventory-filters {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .recycle-all-btn {
        margin-left: 0;
    }


    /* --- EXPEDITIONS --- */
    #expedition-board {
        flex-direction: column;
    }
    .expedition-card {
        width: 100%;
    }


    /* --- PANNEAUX DU BAS (VILLAGE, CODEX...) --- */
    .panel-tabs {
        flex-wrap: wrap;
    }
    .tab-button {
        padding: 12px 15px;
    }

    #enchanter-equipment-list {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
    /* --- GRILLES D'OBJETS (FORGE, ENCHANTEUR, CODEX) --- */
    #craftable-items-list,
    #codex-list {
                /* On force une grille de 3 colonnes de taille égale */
        grid-template-columns: repeat(3, 1fr);
        /* On réduit un peu l'espacement pour que les cases ne soient pas trop serrées */
        gap: 8px;
    }
    .craftable-item-card {
        padding: 8px;
    }
    .craftable-item-card h4 {
        font-size: 0.9em;
    }
    .craftable-item-card p, .craftable-item-card span {
        font-size: 0.75em;
    }
    .craftable-item-card {
        cursor: pointer;
    }

    /* Style pour la carte sélectionnée */
    .craftable-item-card.selected {
        border-color: var(--color-accent-highlight);
        box-shadow: 0 0 12px var(--color-accent-highlight);
        transform: translateY(-2px);
    }
    .icon-sprite-small{
        width: 15px;
        height: 15px;
        object-fit: contain;
        vertical-align: middle;
        display: inline-block;
        will-change: transform;
    }

    /* Conteneur pour le bouton "Fabriquer" qui reste en bas */
    .forge-actions-footer {
        position: sticky;
        bottom: 0;
        background-color: var(--color-panel); /* Assorti au fond du panneau */
        padding: 15px;
        margin: 15px -20px -20px -20px; /* Marges négatives pour coller aux bords */
        border-top: 1px solid var(--color-border);
        border-radius: 0 0 8px 8px;
    }

    .forge-actions-footer button {
        width: 100%;
        padding: 12px;
        font-size: 1.1em;
    }

    .codex-entry {
        /* On réduit encore un peu le padding pour maximiser l'espace */
        padding: 8px;
        gap: 8px;
    }

    .codex-header {
        /* LA MODIFICATION CLÉ : On passe en affichage vertical */
        flex-direction: column;
        /* On réduit l'espace (maintenant vertical) entre l'image et le texte */
        gap: 5px;
    }

    .codex-sprite-container {
        /* On peut se permettre d'agrandir un peu l'image maintenant qu'elle a sa propre ligne */
        width: 50px;
        height: 50px;
    }

    .codex-info {
        /* On centre le bloc de texte sous l'image */
        text-align: center;
    }

    .codex-info h4 {
        /* On réduit la taille du nom du monstre */
        font-size: 0.9em;
        word-break: break-word;
        /* On réduit l'espace sous le titre pour rapprocher le palier */
        margin-bottom: 2px;
    }

    /* On s'assure que le texte du palier est bien stylisé et centré */
    .codex-tier {
        font-size: 0.8em;
        margin: 0;
        padding: 0;
        border: none;
    }

    /* --- INTERFACE DE L'ENCHANTEUR --- */
    #enchanter-interface {
        grid-template-columns: 1fr;
    }


    /* --- MODALES (ÉVÉNEMENTS, ALERTES, CONFIRMATIONS) --- */
    #event-content,
    #custom-alert-content,
    #custom-confirm-content {
        width: 95%;
        padding: 15px;
    }
    #event-choices button,
    #custom-alert-close,
    .custom-confirm-buttons button {
        padding: 15px;
        font-size: 1em;
    }

    #event-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    #event-current-resources {
        justify-content: flex-start;
        gap: 12px;
    }


    /* --- MODALE DES OPTIONS --- */
    #options-content {
        flex-direction: column;
        height: auto;
        max-height: 80vh;
        padding-bottom: 20px;
    }
    .options-menu {
        flex-basis: auto;
        border-right: none;
        border-bottom: 1px solid #444;
    }
    .options-menu ul {
        display: flex;
        justify-content: center;
        gap: 5px;
        flex-wrap: wrap;
    }
    #options-close-button {
        position: static;
        width: 100%;
        margin-top: 15px;
    }

    /* --- CRÉATION DE PERSONNAGE --- */
    .creation-stat-block .stat-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .creation-stat-block .stat-description {
        padding-left: 0;
    }

    /* --- VILLAGE & MARCHAND --- */
    .village-sub-tabs, #forge-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .merchant-exchange-interface, .fragments-purchase-interface {
        grid-template-columns: 1fr;
    }

    /* --- COMBAT --- */
    #enemy-group-container {
        gap: 8px;
    }
    .enemy-card {
        width: 100px;
        padding: 5px;
    }
    .enemy-card h4 { font-size: 0.9em; }
    .enemy-card p { font-size: 0.75em; }

    /* --- LEADERBOARD --- */
    #leaderboard-content {
        width: 95%;
        padding: 15px;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
    }
    #leaderboard-list {
        overflow-y: auto;
        flex-grow: 1;
        margin-bottom: 15px;
    }
    .leaderboard-tabs {
        flex-wrap: wrap;
    }

    .panel-tabs {
    /* On s'assure que le conteneur est bien un flex-container */
    display: flex;
    /* On retire le flex-wrap pour forcer les boutons à rester sur une ligne */
    flex-wrap: nowrap; 
    }

    .tab-button {
        /* La propriété flex: 1; force chaque bouton à prendre une part égale de la largeur disponible.
        Avec 3 boutons, chacun prendra 1/3 de la largeur totale. */
        flex: 1;
        
        /* On centre le texte à l'intérieur du bouton, maintenant qu'il est plus large. */
        text-align: center;
        
        /* On ajoute une bordure subtile pour visuellement séparer les boutons. */
        border-right: 1px solid #333;
    }

    /* On retire la bordure du dernier bouton pour un rendu plus propre. */
    .tab-button:last-child {
        border-right: none;
    }


    /* --- 2. Correction de la largeur de l'inventaire --- */
    /* Le "décalage de quelques pixels" est un problème classique souvent dû à la façon
    dont la largeur, le padding et les bordures sont calculés. */
    .ui-row > div {
        /* On ajoute box-sizing: border-box;
        Cela garantit que le padding et la bordure sont INCLUS dans la largeur de 100%,
        au lieu de s'y ajouter, ce qui corrige le problème de dépassement. */
        box-sizing: border-box;
    }

    #game-stats-list, #inventory-section, #equipment-section, .stat-panel, #special-resources-section {
    /* On force la largeur à 100% du conteneur parent */
    width: 100%;

    /* On s'assure que le padding/bordure est inclus dans la largeur */
    box-sizing: border-box;

    /* On retire toute marge latérale qui pourrait venir du style desktop */
    margin-left: 0;
    margin-right: 0;
    }
    #village-hub-view {
        grid-template-columns: 1fr 1fr;
        gap: 10px; /* On réduit un peu l'espacement pour que ça rentre mieux */
    }

    /* On ajuste un peu le texte pour les écrans plus étroits */
    .building-status-card h3 {
        font-size: 1em;
    }
    .building-status-card p, .building-status-card small {
        font-size: 0.8em;
    }


    /* --- COMBAT --- */
    #enemy-group-container {
        gap: 5px;
        margin: 10px 0; /* Marge verticale réduite */
    }
    .enemy-card {
        width: 90px; /* Largeur réduite */
        padding: 5px;
    }
    .enemy-sprite-container {
        height: 60px; /* Hauteur du sprite réduite */
        margin-bottom: 5px;
    }
    .enemy-card h4 {
        font-size: 0.8em; /* Police du nom plus petite */
        margin-bottom: 5px;
    }
    .enemy-card p {
        font-size: 0.7em; /* Police des PV plus petite */
        margin: 2px 0;
    }
    #combat-log {
        height: 150px; /* Hauteur du log réduite */
        font-size: 0.8em;
    }

    /* On réduit la taille des boutons d'action */
    .skill-button, .consumable-button {
        padding: 8px 10px;
        font-size: 0.85em;
        min-width: 100px;
    }

    .village-sub-tabs, #forge-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .merchant-exchange-interface, .fragments-purchase-interface {
        grid-template-columns: 1fr;
    }

    /* ▼▼▼ AJOUTEZ CE BLOC CI-DESSOUS ▼▼▼ */
    #forge-filters {
        flex-direction: column; /* Empile les groupes de filtres */
        align-items: stretch;   /* Étire les groupes sur toute la largeur */
    }
    .forge-filter-group {
        flex-direction: column; /* Empile les labels et les selects */
        align-items: stretch;   /* Étire les éléments à l'intérieur */
    }
    .forge-filter-group select {
        width: 100%; /* S'assure que les selects prennent toute la place */
    }
    .constellation-header {
        flex-direction: column; /* Empile les boutons et le compteur de PC */
        gap: 10px;
        padding: 10px;
    }

    #constellation-switcher {
        width: 100%;
        justify-content: center;
    }
    .constellation-switch-btn {
        flex-grow: 1; /* Les boutons prennent la même largeur */
    }

    #constellation-pc-display {
        width: auto; /* Le compteur ne prend que la place nécessaire */
        padding: 5px 15px;
    }

    #infobox-content h3 {
        margin-top: 5px;
        font-size: 1.1em;
    }
    #infobox-content p {
    font-size: 0.85em;
    margin: 5px 0; /* On réduit la marge verticale de 8px à 5px */
    }
    #infobox-content .infobox-separator {
        margin: 8px 0;
    }
    #unlock-talent-button {
        padding: 10px;
        margin-top: 10px;
    }

    #constellation-content > .modal-close-button {
        padding: 12px;
    }
    #infobox-content .infobox-cost {
    margin: 8px 0; /* On réduit la marge verticale de 15px à 8px */
    }
    .modal-close-button, #constellation-content > .modal-close-button {
        /* On s'assure que le bouton ne rétrécit pas et reste bien en bas */
        flex-shrink: 0;
    }

    #constellation-content > .modal-close-button {
        /* Le bouton ne doit jamais rétrécir */
        flex-shrink: 0;
        margin-top: 10px; /* Espace entre l'infobox et le bouton */
    }
    #constellation-modal {
        align-items: flex-start; /* Aligne la fenêtre en haut */
        padding-top: 2vh;       /* Petite marge esthétique en haut */
    }

    #constellation-content {
        flex-direction: column;
        /* LA SOLUTION PRINCIPALE : On utilise la hauteur de la zone visible (svh) */
        max-height: 95svh; 
    }

    .constellation-body {
        flex: 1; 
        display: flex; 
        flex-direction: column; 
        overflow-y: auto; /* La zone centrale défile */
        min-height: 0; 
    }

    #constellation-viewport {
        flex-shrink: 0; 
        height: 450px; /* Hauteur fixe pour la carte */
    }

    #constellation-infobox {
        flex-shrink: 0; 
        border-left: none;
        border-top: 1px solid #444;
        height: auto; /* Le panneau prend la hauteur de son contenu, comme demandé */
    }
    #trait-cards-container {
        flex-direction: row; /* On force l'affichage en ligne */
        align-items: center;
        gap: 10px; /* On réduit l'espacement entre les cartes */
        margin-bottom: 20px;
    }
    .trait-card-front, .trait-card-back{
        padding:5px;
    }
    .trait-card {
        flex: 1; /* Chaque carte prend une part égale de l'espace */
        width: auto; /* La largeur est maintenant gérée par flex */
        max-width: none;
        gap: 8px; /* On réduit l'espacement entre la carte et ses boutons */
    }

    .trait-card-inner {
        height: 180px; /* Hauteur considérablement réduite pour s'adapter */
    }

    /* On ajuste la taille du contenu des cartes */
    .trait-card-front h3 {
        font-size: 0.8em;
        margin:7px 0px;
    }
    .trait-card-front p {
        font-size: 0.7em;
        line-height: 1.3;
    }
    .trait-icon {
        font-size: 2.4em; /* Icône plus petite */
        margin: 4px 0;
    }
    .trait-card-image {
        width: 60px; /* Image du verso plus petite */
        height: 60px;
    }
    .trait-description-small {
        display: none; /* On cache complètement la description sur mobile */
    }    
    .trait-effects-list {
        font-size: 0.8em;
        margin:5px 0;
    }
    .trait-card-back h4 {
        font-size: 0.9em;
    }
    .trait-card-back p {
        font-size: 0.75em;
    }

    /* On ajuste les boutons d'action sous la carte */
    .trait-reroll-btn, .trait-flip-btn {
        padding: 4px;
        font-size: 0.7em;
    }

    #confirm-trait-choice {
        font-size: 1.1em;
        width: 90%;
        max-width: 280px;
        margin-top: 15px;
    }
    .oracle-card img {
        display: block;       /* MODIFICATION : Force l'image à se comporter comme un bloc. */
        margin-left: auto;    /* MODIFICATION : Centre horizontalement le bloc. */
        margin-right: auto;   /* MODIFICATION : Centre horizontalement le bloc. */
        width: 70px;          /* On définit une largeur fixe. */
        height: 70px;         /* On force la MÊME hauteur pour créer un carré. */
        object-fit: cover;    /* Recadre l'image pour remplir le carré sans la déformer. */
        border-radius: 50%;   /* Applique la bordure circulaire. */
        margin-bottom: 5px;   /* Garde l'espace en dessous. */
        border: 3px solid #444;
        aspect-ratio: 1 / 1;  /* Sécurité pour forcer un ratio carré. */
    }
    #patch-notes-content .options-buttons {
        flex-direction: column; /* Empile les boutons verticalement */
        align-items: stretch;   /* Étire chaque bouton sur toute la largeur */
    }
    .aventure-node {
        width: 90px;
        min-height: 50px;
        padding: 5px;
    }
    .node-icon {
        font-size: 1.3em;
    }
    .node-name {
        font-size: 0.75em;
    }
    #garden-plots-container {
    padding: 5px;
    gap: 5px; 
    }

    .garden-plot {
    min-height: 0;
    /* On utilise votre ratio. La parcelle sera plus haute que large */
    aspect-ratio: 1 / 1.2; 
    font-size: 0.8em;
    /* Ajout crucial : s'assure que rien ne "bave" de la parcelle */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    }

    /* Règle la plus importante : l'image doit être responsive */
    .garden-plot .plant-sprite-container img {
    max-width: 100%;
    height: auto;
    object-fit: contain; /* S'assure que l'image ne se déforme pas */
    }

    /* Permet aux boutons de passer à la ligne si l'espace manque */
    .garden-plot .garden-button-group {
    display: flex;
    flex-wrap: wrap; /* Passage à la ligne automatique */
    justify-content: center;
    gap: 2px;
    }

    /* Permet aux boutons de prendre moins de place */
    .garden-plot .garden-button-group button {
    flex-grow: 1; /* Permet aux boutons de grandir pour remplir l'espace */
    padding: 4px 2px;
    min-width: 60px; /* Un minimum pour la lisibilité */
    }
    .constellation-bg {
        /* On zoome sur tout l'arrière-plan pour que les constellations soient plus grandes */
        transform: scale(1.6);
        transform-origin: center center;
    }
    .game-header {
        flex-direction: column; /* Le portrait reste au-dessus */
        align-items: stretch; /* Les enfants prennent toute la largeur */
        position: relative; 
    }

    /* Le nouveau conteneur qui met l'info et les ressources côte à côte */
    .char-and-resources-wrapper {
        display: flex;
        flex-direction: row; /* Aligne les enfants horizontalement */
        justify-content: space-between; /* Pousse les enfants aux extrémités */
        align-items: flex-start; /* Aligne les blocs en haut */
        gap: 10px;
    }

    #char-info {
        flex-grow: 1; /* Permet au nom de prendre l'espace disponible */
    }



    /* Le reste des styles pour les ressources est inchangé et reste valide */
    .standard-resources {
        display: flex;
        align-items: center;
        gap: 12px;
        background-color: rgba(0, 0, 0, 0.2);
        border: 1px solid var(--color-border);
        border-radius: 6px;
        padding: 3px 10px;
        /* La correction clé : permet aux ressources de passer à la ligne si l'espace manque. */
        flex-wrap: wrap;
        justify-content: flex-end; /* Aligne les ressources à droite à l'intérieur du bloc */
        margin-bottom: -80px;
    }

    .main-resources-group {
        display: flex;
        gap: 12px;
        border-right: 1px solid var(--color-accent-secondary); 
        padding-right: 12px;
    }

    .fragments-group {
        display: flex;
        flex-direction: column;
    }

    .standard-resources p {
        margin: 1px 0;
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.7em;
    }

    .standard-resources .resource-icon {
        width: 18px;
        height: 18px;
    }

    .standard-resources .resource-value {
        font-weight: bold;
        color: var(--color-text-primary);
        font-size: 0.9em;
    }

    .premium-resource {
        /* On ancre la position aux coins du parent (.game-header) */
        position: absolute;
        top: -8px; /* 10px depuis le haut */
        right: 50px; /* 10px depuis la droite */

        /* Le style visuel reste le même */
        background: linear-gradient(145deg, #4a3c0b, #3c2f0a);
        border: 1px solid #ffc107;
        border-radius: 6px;
        padding: 5px 12px;
        box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
        animation: pulse-premium 2.5s infinite ease-in-out;
    }

    .premium-resource p { margin: 2px 0; display: flex; align-items: center; gap: 5px; }
    .premium-resource .resource-value { color: #fff; text-shadow: 0 0 5px #000; font-weight: bold; font-size: 1em; }
    .premium-resource .premium-icon { 
        /* MODIFICATION : On ne fixe que la hauteur */
        height: 25px; 
        width: auto; /* La largeur s'ajustera pour ne pas déformer l'image */
        filter: drop-shadow(0 0 4px #fff); 
    }

    @keyframes pulse-premium {
        0% { box-shadow: 0 0 2px rgba(255, 193, 7, 0.5); }
        50% { box-shadow: 0 0 5px rgba(255, 193, 7, 0.8); }
        100% { box-shadow: 0 0 2px rgba(255, 193, 7, 0.5); }
    }
    .resources-container {
        display: flex;
        /* NOUVEAU : On empile les éléments de haut en bas. */
        flex-direction: column;
        /* NOUVEAU : On aligne les blocs de ressources sur la droite de leur conteneur. */
        align-items: flex-end;
        /* NOUVEAU : On ajoute un espacement propre entre les deux blocs de ressources. */
        gap: 8px;
        
        /* Le reste des règles pour le positionnement global ne change pas */
        margin-top: -55px;
        flex-shrink: 1;
        max-width: 65%;
        min-width: 0;
    }
    #stats-modal-content {
        /* On définit une hauteur maximale pour que la modale ne dépasse jamais de l'écran */
        max-height: 85vh;
        /* On transforme la modale en conteneur flexible vertical */
        display: flex;
        flex-direction: column;
        padding: 20px;
    }

    #stats-modal .stats-grid {
        /* La grille prend maintenant tout l'espace vertical disponible */
        flex-grow: 1;
        /* Si le contenu dépasse, seule la grille défilera, pas toute la modale */
        overflow-y: auto;
        /* On change la taille minimale des colonnes pour mieux s'adapter aux petits écrans */
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        /* On ajoute un peu de padding pour ne pas coller la scrollbar au contenu */
        padding-right: 10px;
        margin-right: -10px; /* Astuce pour compenser le padding */
    }

    #stats-modal .stat-item {
        padding: 10px; /* On réduit un peu le padding interne des cartes */
        gap: 10px; /* On réduit l'espace entre l'icône et le texte */
    }

    #stats-modal .stat-icon {
        font-size: 2em; /* On réduit la taille des icônes */
    }

    #stats-modal .stat-text strong {
        font-size: 1.4em; /* On réduit la taille de la valeur numérique */
    }

    #stats-modal .modal-close-button {
        /* On s'assure que le bouton ne rétrécit pas et reste bien en bas */
        flex-shrink: 0;
        margin-top: 15px; /* Espace constant au-dessus du bouton */
    }


    /* Grille de l'inventaire */
    #inventory-resources-list, #inventory-consumables-list, #inventory-equipment-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    /* Cases de la grille */
    .inventory-grid-item {
        background-color: #333;
        border-radius: 8px;
        border: 1px solid #444;
        aspect-ratio: 1 / 1; /* Force des cases parfaitement carrées */
        position: relative; /* Indispensable pour positionner la quantité */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    .inventory-grid-item:hover {
        background-color: #444;
    }

    /* Image dans la case */
    .inventory-grid-item img {
        width: 70%;
        height: 70%;
        object-fit: contain;
        will-change: transform;
    }

    /* Quantité en superposition */
    .inventory-item-quantity-overlay {
        position: absolute;
        bottom: 2px;
        right: 4px;
        font-size: 0.9em;
        font-weight: bold;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.7);
        padding: 1px 5px;
        border-radius: 5px;
        text-shadow: 1px 1px 2px #000;
    }

    /* Pied de page de la modale */
    .inventory-modal-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        padding-top: 15px;
        border-top: 1px solid #444;
    }

    /* Bouton de tri amélioré */
    #inventory-sort-button {
        background-color: #444;
        color: #eee;
        border: 1px solid #666;
        border-radius: 5px;
        padding: 10px 15px;
        font-size: 1.5em; /* Emoji plus grand */
        cursor: pointer;
        transition: background-color 0.2s;
    }

    #inventory-sort-button:hover {
        background-color: #555;
    }

    /* Modale de détails d'objet */
    #inventory-item-details-modal {
        position: fixed;
        z-index: 3800; /* Au-dessus de la modale d'inventaire */
        left: 0; top: 0;
        width: 100%; height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(5px);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #inventory-item-details-content {
        background-color: #2a2a2a;
        padding: 20px;
        border: 1px solid #666;
        border-radius: 10px;
        width: 90%;
        max-width: 400px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    #item-details-header {
        display: flex;
        align-items: center;
        gap: 15px;
        border-bottom: 1px solid #444;
        padding-bottom: 15px;
    }

    #item-details-img-container {
        width: 72px;
        height: 72px;
        background-color: #1e1e1e;
        border-radius: 8px;
        padding: 5px;
        flex-shrink: 0;
    }

    #item-details-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    #item-details-title-container h3, #item-details-title-container p {
        margin: 0;
    }

    #item-details-name {
        font-size: 1.3em;
        color: #ffc107;
    }

    #item-details-quantity {
        font-size: 1em;
        color: #ccc;
    }

    #item-details-body {
        max-height: 40vh;
        overflow-y: auto;
        padding-right: 10px;
    }

    #item-details-description {
        font-style: italic;
        color: #aaa;
        margin: 0 0 15px 0;
    }

    #item-details-stats p {
        margin: 5px 0;
        font-size: 0.9em;
    }

    .inventory-tabs {
        /* On force les boutons à rester sur une seule ligne et à ne pas passer à la ligne. */
        flex-wrap: nowrap; 
    }

    .inventory-tab-button {
        /* Chaque bouton (Ressources, Consommables, etc.) prendra une part égale de la largeur disponible. */
        flex: 1;
        
        /* On centre le texte à l'intérieur du bouton. */
        text-align: center;
        
        /* On ajuste le padding et la police pour que le texte ne soit pas à l'étroit sur de petits écrans. */
        padding: 12px 5px;
        font-size: 0.9em; 
    }

    #main-header {
        gap: 8px; /* On resserre un peu les éléments */
        padding-left: 10px;
        padding-right: 10px;
    }

    /* On réduit la taille du profil */
    .header-profile {
        width: 42px;
        height: 42px;
    }

    #header-level-display {
        font-size: 0.7em;
        padding: 1px 6px;
    }

    /* On réduit l'affichage des vies */
    .header-lives-container {
        gap: 4px;
        padding: 2px 6px;
    }
    .lives-icon {
        font-size: 1.2em;
    }
    #header-lives-count {
        font-size: 0.8em;
    }
    #header-lives-timer {
        font-size: 0.65em;
    }

    /* On repasse les ressources en ligne pour gagner de la place verticale */
    .header-resources-standard {
        display: flex;
        flex-wrap: wrap; /* Permet de passer à la ligne si vraiment nécessaire */
        gap: 10px;
        flex-grow: 1; /* Permet au bloc de prendre l'espace disponible */
        justify-content: flex-start;
    }

    .header-resources-standard p {
        margin: 0;
        gap: 4px;
    }
    .header-resources-standard .resource-icon {
        width: 18px;
        height: 18px;
    }
    .header-resources-standard .resource-value {
        font-size: 0.9em;
    }

    /* On réduit la taille de la monnaie premium */
    .header-resource-premium {
        padding: 4px 8px;
    }

    body.in-combat #bottom-nav,
    body.in-combat #sub-navigation-wrapper,
    body.in-combat #spend-points-fab {
        display: none;
    }

    body.in-combat .main-screen {
        /* On force le padding à une valeur minimale en haut et en bas */
        padding-top: 15px;
        padding-bottom: 15px;
    }
    body.creation-mode #main-header,
    body.creation-mode #bottom-nav,
    body.creation-mode #sub-nav-container {
        display: none;
    }

    /* Permet le scroll sur l'écran de création */
    body.creation-mode {
        overflow: auto; /* Active le défilement vertical si nécessaire */
    }

    body.creation-mode #character-creation {
        height: auto; /* La hauteur s'adapte au contenu */
        min-height: 100vh; /* Prend au minimum toute la hauteur de l'écran */
        padding: 20px;
    }

    body {
        font-size: 15px;
        -webkit-text-size-adjust: 100%;
        /* On retire tout padding et on bloque le défilement du corps de la page */
        padding: 0;
        overflow: hidden;
    }
    #fief-buildings-grid {
        display: grid;
        /* On crée 2 colonnes de largeur égale */
        grid-template-columns: repeat(2, 1fr);
        gap: 10px; /* On réduit l'espacement */
    }

    .fief-building-card {
        padding: 10px; /* Padding réduit pour plus de compacité */
        min-height: 150px; /* Hauteur minimale pour éviter que les cartes soient trop aplaties */
    }

    .fief-building-card h5 {
        font-size: 1em; /* Police du titre légèrement réduite */
        gap: 5px;
    }

    .building-level-inline {
        font-size: 0.75em;
    }

    .building-production-info p {
        font-size: 0.85em !important;
    }

    .building-actions-container .action-button {
        padding: 6px 4px; /* Padding vertical et horizontal réduits */
        font-size: 0.8em;
    }

    .upgrade-cost {
        font-size: 0.75em;
        gap: 4px;
    }
    #fief-buildings-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
        gap: 10px;
    }
    .fief-building-card .building-actions-container {
        flex-direction: column;
    }

    /* Style pour le bouton "Récolter" déplacé DANS le panneau d'info */
    .building-production-info .collect-button {
        width: 100%;
        margin-top: 10px; /* Espace au-dessus du bouton */
        padding: 5px 5px; /* Bouton un peu moins haut */
        font-size: 0.9em;
    }
    #spend-points-fab {
        /* MON COMMENTAIRE : On ajuste la position pour qu'il soit bien au-dessus des deux barres de navigation */
        bottom: 130px; 
        right: 15px;
        width: 35px;
        height: 35px;
        font-size: 1.8em;
    }

    #spend-points-modal-content {
        width: 95vw; /* Prend presque toute la largeur de l'écran */
        max-height: 85vh; /* Laisse un peu d'espace en haut et en bas */
        padding: 15px;
    }

    #spend-points-modal-content h2 {
        font-size: 1.3em;
    }

    /* On réduit la police dans la modale sur mobile pour plus de clarté */
    #modal-attributes-list .stat-line label {
        font-size: 1em;
    }
}

@media only screen and (max-width: 420px) {
    #main-header {
        gap: 6px;
    }
    
    /* On cache le minuteur de vie pour ne garder que le compteur */
    #header-lives-timer {
        display: none;
    }
    .lives-text {
        justify-content: center; /* On centre le compteur de vies verticalement */
    }

    /* On réorganise les ressources en une grille 2x2 très compacte */
    .header-resources-standard {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2px 8px; /* On réduit encore l'espacement */
        padding: 4px;
        background-color: rgba(0,0,0,0.2);
        border-radius: 4px;
        flex-grow: 0; /* On empêche le bloc de s'étirer */
    }

    .header-resources-standard .resource-icon {
        width: 16px;
        height: 16px;
    }
    .header-resources-standard .resource-value {
        font-size: 0.8em; /* Police très petite pour la valeur */
    }
}