/* ===== CORRECTIONS RESPONSIVE POUR CHAQUE JOUR ===== */

/* ===== JOUR 1 - Plan du marché ===== */
@media screen and (max-width: 768px) {
    /* Interface numérique à 4 chiffres */
    .numeric-input-container {
        display: flex !important;
        gap: 8px !important;
        justify-content: center !important;
        padding: 10px !important;
    }
    
    .numeric-input {
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
        text-align: center !important;
        border: 2px solid #c9a646 !important;
        border-radius: 8px !important;
    }
}

@media screen and (max-width: 480px) {
    .numeric-input {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
}

/* ===== JOUR 5 - Interface 6 chiffres (2x3) ===== */
@media screen and (max-width: 768px) {
    /* Forcer la disposition 2 colonnes x 3 lignes */
    .digicode-display.numeric6 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(3, 1fr) !important;
        gap: 8px !important;
        max-width: 200px !important;
        margin: 0 auto !important;
        padding: 10px !important;
    }
    
    .digicode-display.numeric6 .digit-slot {
        width: 100% !important;
        margin: 0 !important;
    }
    
    .digicode-display.numeric6 .digit-input {
        width: 100% !important;
        height: 50px !important;
        font-size: 20px !important;
        text-align: center !important;
        border: 2px solid #c9a646 !important;
        border-radius: 8px !important;
        margin: 0 !important;
        background: white !important;
    }
}

/* Très petits écrans - réduire les tailles mais garder 2x3 */
@media screen and (max-width: 480px) {
    .digicode-display.numeric6 {
        max-width: 160px !important;
        gap: 6px !important;
    }
    
    .digicode-display.numeric6 .digit-input {
        height: 45px !important;
        font-size: 18px !important;
    }
}

/* Ultra petits écrans */
@media screen and (max-width: 320px) {
    .digicode-display.numeric6 {
        max-width: 140px !important;
        gap: 4px !important;
        padding: 8px !important;
    }
    
    .digicode-display.numeric6 .digit-input {
        height: 40px !important;
        font-size: 16px !important;
    }
}

/* Mode paysage - toujours 2x3 mais plus large */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .digicode-display.numeric6 {
        max-width: 240px !important;
        gap: 10px !important;
    }
    
    .digicode-display.numeric6 .digit-input {
        height: 45px !important;
        font-size: 18px !important;
    }
}

/* ===== JOUR 2 - Poésie à décrypter ===== */
@media screen and (max-width: 768px) {
    .text-input-container {
        padding: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .text-input-label {
        font-size: 14px !important;
        margin-bottom: 8px !important;
        display: block !important;
    }
    
    #answerInput {
        width: 100% !important;
        padding: 10px !important;
        font-size: 16px !important; /* Empêche le zoom sur iOS */
        border: 2px solid #c9a646 !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
    }
}

/* ===== JOUR 3 - Cheminée mystérieuse ===== */
@media screen and (max-width: 768px) {
    .fireplace-container {
        padding: 10px !important;
        width: 100% !important;
    }
    
    .fireplace-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    
    .fireplace-cell {
        aspect-ratio: 1 !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f0f0f0 !important;
        border: 2px solid #ddd !important;
        border-radius: 6px !important;
        cursor: pointer !important;
    }
}

@media screen and (max-width: 480px) {
    .fireplace-grid {
        max-width: 250px !important;
        gap: 6px !important;
    }
    
    .fireplace-cell {
        min-height: 50px !important;
    }
}

/* ===== JOUR 5 - Les statuettes (2x3) - OVERRIDE MOBILE-IMPROVEMENTS ===== */
/* Spécificité maximale pour forcer la grille 2x3 */
@media screen and (max-width: 768px) {
    /* Conteneur principal du temple - spécificité renforcée */
    body #app .main-content .view .temple-container,
    body .temple-container {
        padding: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    
    /* Grille forcée en 2 colonnes x 3 lignes - TOUJOURS */
    body #app .main-content .view .temple-grid,
    body .temple-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(3, auto) !important;
        gap: 10px !important;
        max-width: 320px !important;
        margin: 15px auto !important;
        padding: 0 !important;
        /* Force la grille même si d'autres styles interfèrent */
        justify-content: center !important;
        align-content: start !important;
    }
    
    /* Chaque statuette */
    .statuette-item {
        padding: 8px !important;
        background: white !important;
        border: 2px solid #ddd !important;
        border-radius: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        min-height: 140px !important;
    }
    
    /* Image de la statuette */
    .statuette-image-container {
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto 5px !important;
        position: relative !important;
    }
    
    .statuette-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
    
    /* Indicateur de rotation */
    .rotation-indicator {
        position: absolute !important;
        top: -8px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 10px !important;
    }
    
    /* Contrôles d'orientation */
    .orientation-controls {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        margin: 5px 0 !important;
    }
    
    .rotate-btn {
        width: 24px !important;
        height: 24px !important;
        padding: 0 !important;
        font-size: 14px !important;
        background: #c9a646 !important;
        color: white !important;
        border: none !important;
        border-radius: 50% !important;
        cursor: pointer !important;
    }
    
    .rotation-display {
        font-size: 11px !important;
        min-width: 30px !important;
        text-align: center !important;
    }
    
    /* Input pour le nom */
    .statuette-name-input {
        width: 100% !important;
        max-width: 100px !important;
        padding: 4px !important;
        font-size: 12px !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        text-align: center !important;
        margin-top: 5px !important;
    }
    
    /* Label de position */
    .position-label {
        font-size: 10px !important;
        color: #666 !important;
        margin-top: 3px !important;
    }
}

/* Très petits écrans - réduire les tailles mais TOUJOURS garder 2x3 */
@media screen and (max-width: 480px) {
    body #app .main-content .view .temple-grid,
    body .temple-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(3, auto) !important;
        max-width: 280px !important;
        gap: 8px !important;
        margin: 10px auto !important;
    }
    
    .statuette-item {
        min-height: 120px !important;
        padding: 6px !important;
    }
    
    .statuette-image-container {
        width: 50px !important;
        height: 50px !important;
    }
    
    .rotate-btn {
        width: 20px !important;
        height: 20px !important;
        font-size: 12px !important;
    }
    
    .rotation-display {
        font-size: 10px !important;
    }
    
    .statuette-name-input {
        max-width: 80px !important;
        font-size: 11px !important;
    }
}

/* Ultra petits écrans - FORCER 2x3 même sur Galaxy Fold */
@media screen and (max-width: 320px) {
    body #app .main-content .view .temple-grid,
    body .temple-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(3, auto) !important;
        max-width: 240px !important;
        gap: 6px !important;
        margin: 8px auto !important;
    }
    
    .statuette-item {
        min-height: 110px !important;
        padding: 5px !important;
    }
    
    .statuette-image-container {
        width: 45px !important;
        height: 45px !important;
    }
    
    .rotate-btn {
        width: 18px !important;
        height: 18px !important;
        font-size: 11px !important;
    }
    
    .statuette-name-input {
        max-width: 70px !important;
        font-size: 10px !important;
        padding: 3px !important;
    }
}

/* Mode paysage - FORCER 2x3 (pas 3x2 !) */
@media screen and (max-width: 768px) and (orientation: landscape) {
    /* Override mobile-improvements.css qui met en 3x2 */
    body #app .main-content .view .temple-grid,
    body .temple-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(3, auto) !important;
        max-width: 400px !important;
        gap: 10px !important;
        margin: 10px auto !important;
    }
    
    body #app .main-content .view .temple-container,
    body .temple-container {
        max-height: none !important;
        overflow-y: visible !important;
    }
    
    .statuette-item {
        min-height: 100px !important;
    }
    
    .statuette-image-container {
        width: 50px !important;
        height: 50px !important;
    }
}

/* ===== JOUR 6 - Interphone ===== */
@media screen and (max-width: 768px) {
    .interphone-container {
        padding: 10px !important;
        width: 100% !important;
    }
    
    .interphone-keypad {
        max-width: 280px !important;
        margin: 0 auto !important;
    }
    
    .keypad-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    
    .keypad-btn {
        aspect-ratio: 1 !important;
        min-height: 50px !important;
        font-size: 18px !important;
        background: #c9a646 !important;
        color: white !important;
        border: none !important;
        border-radius: 6px !important;
        cursor: pointer !important;
    }
    
    .interphone-display {
        padding: 10px !important;
        margin-bottom: 10px !important;
        background: #333 !important;
        color: #0f0 !important;
        font-family: monospace !important;
        font-size: 20px !important;
        text-align: center !important;
        min-height: 40px !important;
        border-radius: 6px !important;
    }
}

/* ===== JOUR 7-8 - Statuettes ===== */
@media screen and (max-width: 768px) {
    .statuettes-container,
    .statuettes-orientation-container {
        padding: 10px !important;
        width: 100% !important;
    }
    
    .statuette-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        max-width: 100% !important;
    }
    
    .statuette-slot,
    .statuette-item {
        padding: 8px !important;
        min-height: 100px !important;
        background: white !important;
        border: 2px solid #ddd !important;
        border-radius: 8px !important;
    }
    
    .statuette-image {
        width: 50px !important;
        height: 50px !important;
        object-fit: contain !important;
    }
    
    .statuette-name {
        font-size: 12px !important;
        margin-top: 5px !important;
    }
    
    .orientation-buttons {
        display: flex !important;
        gap: 4px !important;
        margin-top: 5px !important;
    }
    
    .orientation-buttons button {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }
}

/* ===== JOUR 6 - Cuisiner pour le banquet ===== */
@media screen and (max-width: 768px) {
    /* Conteneur principal */
    .cooking-container {
        padding: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* En-tête plus compact */
    .cooking-header h3 {
        font-size: 1.2rem !important;
        margin: 5px 0 !important;
    }
    
    .cooking-subtitle {
        font-size: 0.8rem !important;
        margin: 3px 0 !important;
    }
    
    /* Section des ingrédients - VERTICAL */
    .ingredients-selection {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Catégories d'ingrédients en colonne */
    .ingredient-categories {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    
    /* Chaque catégorie */
    .ingredient-category {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    .category-title {
        font-size: 1rem !important;
        margin: 5px 0 !important;
        text-align: center !important;
    }
    
    /* Items d'ingrédients - En colonne sur mobile */
    .ingredient-items {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
    }
    
    /* Cartes d'ingrédients compactes - VERTICAL */
    .ingredient-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px !important;
        background: white !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        box-sizing: border-box !important;
        gap: 6px !important;
    }
    
    /* Image d'ingrédient */
    .ingredient-image {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        position: relative !important;
    }
    
    .ingredient-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
    
    .runic-symbol {
        position: absolute !important;
        bottom: 0 !important;
        right: 0 !important;
        font-size: 10px !important;
        background: rgba(0,0,0,0.7) !important;
        color: white !important;
        padding: 1px 3px !important;
        border-radius: 2px !important;
    }
    
    /* Info ingrédient - centrée */
    .ingredient-info {
        text-align: center !important;
    }
    
    .ingredient-info h5 {
        font-size: 0.9rem !important;
        margin: 0 !important;
    }
    
    /* Sélection quantité - en dessous */
    .ingredient-selection {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .quantity-controls {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 3px !important;
    }
    
    .quantity-controls label {
        font-size: 0.7rem !important;
        margin: 0 !important;
    }
    
    .quantity-input {
        width: 40px !important;
        height: 30px !important;
        padding: 3px !important;
        font-size: 0.9rem !important;
        text-align: center !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
    }
    
    /* Actions plus compactes */
    .cooking-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
        margin-top: 10px !important;
    }
    
    .cooking-actions button {
        flex: 1 1 auto !important;
        min-width: 100px !important;
        max-width: 150px !important;
        padding: 8px !important;
        font-size: 0.8rem !important;
    }
}

/* Très petits écrans */
@media screen and (max-width: 480px) {
    .cooking-container {
        padding: 5px !important;
    }
    
    .ingredient-card {
        padding: 4px !important;
        gap: 6px !important;
    }
    
    .ingredient-image {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
    }
    
    .ingredient-info h5 {
        font-size: 0.8rem !important;
    }
    
    .quantity-input {
        width: 35px !important;
        height: 25px !important;
        font-size: 0.8rem !important;
    }
    
    .cooking-actions {
        flex-direction: column !important;
    }
    
    .cooking-actions button {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Ultra petits écrans */
@media screen and (max-width: 320px) {
    .ingredient-image {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
    }
    
    .ingredient-info h5 {
        font-size: 0.7rem !important;
    }
    
    .quantity-controls label {
        font-size: 0.6rem !important;
    }
    
    .quantity-input {
        width: 30px !important;
        height: 22px !important;
        font-size: 0.7rem !important;
    }
}

/* ===== JOUR 9 - Recette de cuisine ===== */
@media screen and (max-width: 768px) {
    .recipe-container {
        padding: 10px !important;
        width: 100% !important;
    }
    
    .ingredients-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    
    .ingredient-item {
        padding: 8px !important;
        background: white !important;
        border: 2px solid #ddd !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        cursor: pointer !important;
    }
    
    .ingredient-icon {
        font-size: 20px !important;
    }
    
    .ingredient-name {
        font-size: 12px !important;
    }
    
    .ingredient-quantity {
        margin-left: auto !important;
        background: #c9a646 !important;
        color: white !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
        font-size: 11px !important;
    }
}

/* ===== JOUR 10-11 - Château et digicode ===== */
@media screen and (max-width: 768px) {
    .castle-container,
    .digicode-container {
        padding: 10px !important;
        width: 100% !important;
    }
    
    .castle-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    
    .castle-room {
        aspect-ratio: 1 !important;
        min-height: 60px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f5f5f5 !important;
        border: 2px solid #c9a646 !important;
        border-radius: 6px !important;
        padding: 5px !important;
    }
    
    .room-icon {
        font-size: 20px !important;
    }
    
    .room-name {
        font-size: 10px !important;
        margin-top: 3px !important;
    }
}

/* ===== JOUR 12 - Labyrinthe ===== */
@media screen and (max-width: 768px) {
    .maze-container {
        padding: 10px !important;
        width: 100% !important;
        overflow-x: auto !important;
    }
    
    .maze-grid {
        display: grid !important;
        grid-template-columns: repeat(10, 30px) !important;
        grid-template-rows: repeat(10, 30px) !important;
        gap: 1px !important;
        margin: 0 auto !important;
        width: fit-content !important;
    }
    
    .maze-cell {
        width: 30px !important;
        height: 30px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        background: white !important;
        border: 1px solid #ddd !important;
    }
    
    .maze-cell.wall {
        background: #333 !important;
    }
    
    .maze-cell.path {
        background: #f0f0f0 !important;
    }
}

/* ===== JOUR 13 - Boulangerie ===== */
@media screen and (max-width: 768px) {
    .bakery-container {
        padding: 10px !important;
        width: 100% !important;
    }
    
    .pastries-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .pastry-item {
        padding: 10px !important;
        background: white !important;
        border: 2px solid #ddd !important;
        border-radius: 8px !important;
        text-align: center !important;
    }
    
    .pastry-image {
        width: 60px !important;
        height: 60px !important;
        object-fit: cover !important;
        border-radius: 50% !important;
        margin: 0 auto 8px !important;
    }
    
    .pastry-name {
        font-size: 12px !important;
        font-weight: bold !important;
    }
    
    .pastry-price {
        font-size: 14px !important;
        color: #c9a646 !important;
        margin-top: 4px !important;
    }
}

/* ===== JOUR 14-15 - Cartes et sélections ===== */
@media screen and (max-width: 768px) {
    .map-container {
        padding: 10px !important;
        width: 100% !important;
    }
    
    .map-image {
        width: 100% !important;
        height: auto !important;
        max-height: 400px !important;
        object-fit: contain !important;
    }
    
    .location-selector {
        margin-top: 10px !important;
    }
    
    .location-selector select {
        width: 100% !important;
        padding: 10px !important;
        font-size: 16px !important;
        border: 2px solid #c9a646 !important;
        border-radius: 6px !important;
    }
}

/* ===== JOUR 16 - Métro ===== */
@media screen and (max-width: 768px) {
    .metro-container {
        padding: 10px !important;
        width: 100% !important;
    }
    
    .metro-map {
        width: 100% !important;
        overflow-x: auto !important;
    }
    
    .station-selector {
        margin-top: 10px !important;
    }
    
    .station-selector select {
        width: 100% !important;
        padding: 10px !important;
        font-size: 16px !important;
    }
}

/* ===== JOUR 17 - Fusibles ===== */
@media screen and (max-width: 768px) {
    .fusible-interface {
        padding: 10px !important;
        width: 100% !important;
    }
    
    .fusible-panel {
        max-width: 100% !important;
        position: relative !important;
    }
    
    .fusible-panel img {
        width: 100% !important;
        height: auto !important;
    }
    
    .fusible-slot {
        position: absolute !important;
        width: 15% !important;
        height: 15% !important;
        cursor: pointer !important;
    }
    
    .fusible-selector {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 10px !important;
        justify-content: center !important;
    }
    
    .fusible-option {
        width: 60px !important;
        height: 60px !important;
        cursor: pointer !important;
        border: 2px solid transparent !important;
        border-radius: 4px !important;
    }
    
    .fusible-option.selected {
        border-color: #c9a646 !important;
    }
}

/* ===== JOUR 18 - Échecs ===== */
@media screen and (max-width: 768px) {
    .chess-container {
        padding: 10px !important;
        width: 100% !important;
    }
    
    .chess-board {
        display: grid !important;
        grid-template-columns: repeat(8, 1fr) !important;
        gap: 0 !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        border: 2px solid #333 !important;
    }
    
    .chess-square {
        aspect-ratio: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
    }
    
    .chess-square.white {
        background: #f0d9b5 !important;
    }
    
    .chess-square.black {
        background: #b58863 !important;
    }
    
    .chess-piece {
        cursor: pointer !important;
        font-size: 24px !important;
    }
    
    .chess-sequence {
        display: flex !important;
        gap: 8px !important;
        margin-top: 10px !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
    
    .sequence-item {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: white !important;
        border: 2px solid #c9a646 !important;
        border-radius: 4px !important;
        font-size: 20px !important;
    }
}

/* ===== JOUR 19-20 - Recherche visuelle ===== */
@media screen and (max-width: 768px) {
    .visual-search-container {
        padding: 10px !important;
        width: 100% !important;
    }
    
    .search-image {
        width: 100% !important;
        height: auto !important;
        max-height: 500px !important;
        object-fit: contain !important;
    }
    
    .search-hint {
        margin-top: 10px !important;
        padding: 10px !important;
        background: #f0f0f0 !important;
        border-radius: 6px !important;
        font-size: 14px !important;
    }
}

/* ===== JOUR 21-22 - Énigmes de maths ===== */
@media screen and (max-width: 768px) {
    .math-puzzle-container {
        padding: 10px !important;
        width: 100% !important;
    }
    
    .equation-display {
        padding: 15px !important;
        background: #f5f5f5 !important;
        border: 2px solid #c9a646 !important;
        border-radius: 8px !important;
        font-size: 18px !important;
        font-family: monospace !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }
    
    .number-input {
        width: 100% !important;
        padding: 10px !important;
        font-size: 16px !important;
        text-align: center !important;
        border: 2px solid #c9a646 !important;
        border-radius: 6px !important;
    }
}

/* ===== JOUR 23-24 - Temple et final ===== */
@media screen and (max-width: 768px) {
    .temple-container {
        padding: 10px !important;
        width: 100% !important;
    }
    
    .temple-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .temple-item {
        padding: 10px !important;
        background: white !important;
        border: 2px solid #c9a646 !important;
        border-radius: 8px !important;
        text-align: center !important;
    }
    
    .temple-icon {
        font-size: 30px !important;
        margin-bottom: 8px !important;
    }
    
    .temple-text {
        font-size: 12px !important;
    }
    
    /* Éléments spéciaux du temple */
    .temple-doors,
    .temple-fireplace {
        margin: 15px 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

/* ===== JOUR 7 - Table des clans ===== */
@media screen and (max-width: 768px) {
    /* Container principal de la table */
    .clan-table-visual {
        padding: 8px !important;
        margin-bottom: 10px !important;
    }
    
    /* Réduire la table */
    .table-positions {
        max-width: 100% !important;
        padding: 0 5px !important;
    }
    
    /* Centre de la table plus petit */
    .table-center {
        min-width: 50px !important;
        min-height: 50px !important;
        width: 50px !important;
        height: 50px !important;
        padding: 8px !important;
        font-size: 10px !important;
        border-radius: 50% !important;
    }
    
    /* Positions des clans plus petites */
    .clan-position,
    .position-slot {
        width: 45px !important;
        height: 45px !important;
        min-width: 45px !important;
        min-height: 45px !important;
        padding: 4px !important;
        border-radius: 8px !important;
    }
    
    /* Contenu centré dans la position */
    .position-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Clan placé bien centré */
    .placed-clan {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1px !important;
    }
    
    /* Images des clans placés */
    .placed-clan .clan-image-small {
        width: 16px !important;
        height: 16px !important;
        object-fit: contain !important;
    }
    
    /* Nom du clan plus petit */
    .placed-clan .clan-name-small,
    .placed-clan .clan-name {
        font-size: 6px !important;
        font-weight: bold !important;
        color: #FFF !important;
        line-height: 1 !important;
        text-align: center !important;
    }
    
    /* Numéro de position */
    .position-number {
        position: absolute !important;
        font-size: 8px !important;
        width: 12px !important;
        height: 12px !important;
        top: 1px !important;
        right: 2px !important;
        z-index: 10 !important;
        background: rgba(255,255,255,0.9) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Rangées de positions */
    .position-row {
        margin: 4px 0 !important;
    }
    
    .position-row.middle {
        gap: 8px !important;
    }
    
    /* Colonnes gauche/droite */
    .left-positions,
    .right-positions {
        gap: 4px !important;
    }
    
    /* Grille des clans à sélectionner */
    .clans-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        padding: 8px !important;
    }
    
    /* Items de clan dans la sélection */
    .clan-item {
        padding: 4px !important;
        min-height: 60px !important;
    }
    
    .clan-item .clan-image {
        width: 25px !important;
        height: 25px !important;
    }
    
    .clan-item .clan-name {
        font-size: 9px !important;
        line-height: 1.2 !important;
    }
    
    /* Boutons d'action en colonne sur mobile */
    .clan-actions {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 200px !important;
        margin: 10px auto !important;
    }
    
    .clan-actions button {
        width: 100% !important;
        padding: 10px !important;
        font-size: 14px !important;
    }
}

/* Très petits écrans */
@media screen and (max-width: 480px) {
    .clan-table-visual {
        padding: 5px !important;
    }
    
    /* Centre encore plus petit */
    .table-center {
        min-width: 40px !important;
        min-height: 40px !important;
        width: 40px !important;
        height: 40px !important;
        padding: 5px !important;
        font-size: 8px !important;
    }
    
    /* Positions encore plus petites */
    .clan-position,
    .position-slot {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 3px !important;
    }
    
    .placed-clan {
        gap: 1px !important;
    }
    
    .placed-clan .clan-image-small {
        width: 15px !important;
        height: 15px !important;
        object-fit: contain !important;
    }
    
    .placed-clan .clan-name-small,
    .placed-clan .clan-name {
        font-size: 6px !important;
        font-weight: bold !important;
        color: #FFF !important;
        text-align: center !important;
        line-height: 1 !important;
    }
    
    .position-number {
        position: absolute !important;
        font-size: 7px !important;
        width: 10px !important;
        height: 10px !important;
        top: 0 !important;
        right: 1px !important;
        z-index: 10 !important;
    }
    
    /* Grille 2x4 sur très petits écrans */
    .clans-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
    }
    
    .clan-item {
        min-height: 50px !important;
    }
    
    .clan-item .clan-image {
        width: 20px !important;
        height: 20px !important;
    }
    
    .clan-item .clan-name {
        font-size: 8px !important;
    }
}

/* Écrans de 280px de large */
@media screen and (max-width: 280px) {
    /* Centre ultra minuscule */
    .table-center {
        min-width: 30px !important;
        min-height: 30px !important;
        width: 30px !important;
        height: 30px !important;
        padding: 2px !important;
        font-size: 6px !important;
    }
    
    /* Positions ultra petites */
    .clan-position,
    .position-slot {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        padding: 1px !important;
    }
    
    /* Clan centré sur 280px */
    .placed-clan {
        gap: 0 !important;
    }
    
    .placed-clan .clan-image-small {
        width: 10px !important;
        height: 10px !important;
    }
    
    .placed-clan .clan-name-small,
    .placed-clan .clan-name {
        font-size: 6px !important;
        font-weight: bold !important;
        color: #FFF !important;
        line-height: 1 !important;
    }
    
    .position-number {
        font-size: 5px !important;
        width: 8px !important;
        height: 8px !important;
    }
    
    .clans-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2px !important;
    }
    
    .clan-item {
        min-height: 40px !important;
        padding: 2px !important;
    }
    
    .clan-item .clan-image {
        width: 15px !important;
        height: 15px !important;
    }
    
    .clan-item .clan-name {
        font-size: 6px !important;
    }
}

/* Ultra petits écrans (320px) */
@media screen and (max-width: 320px) {
    /* Centre minuscule */
    .table-center {
        min-width: 35px !important;
        min-height: 35px !important;
        width: 35px !important;
        height: 35px !important;
        padding: 3px !important;
        font-size: 7px !important;
    }
    
    /* Positions minuscules */
    .clan-position,
    .position-slot {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 2px !important;
    }
    
    
    .placed-clan .clan-image-small {
        width: 12px !important;
        height: 12px !important;
        object-fit: contain !important;
    }
    
    .placed-clan .clan-name-small,
    .placed-clan .clan-name {
        font-size: 6px !important;
        font-weight: bold !important;
        color: #FFF !important;
        text-align: center !important;
        line-height: 1 !important;
    }
    
    .position-number {
        position: absolute !important;
        font-size: 6px !important;
        width: 9px !important;
        height: 9px !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 10 !important;
    }
    
    .position-row.middle {
        gap: 4px !important;
    }
    
    .clan-item .clan-image {
        width: 18px !important;
        height: 18px !important;
    }
    
    .clan-item .clan-name {
        font-size: 7px !important;
    }
}

/* Mode paysage - optimisations spéciales */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .clan-table-visual {
        display: flex !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }
    
    .table-positions {
        flex: 0 0 auto !important;
        max-width: 300px !important;
    }
    
    .clans-selection {
        flex: 1 !important;
        max-height: 200px !important;
        overflow-y: auto !important;
    }
    
    .clans-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ===== OPTIMISATIONS GLOBALES POUR TOUS LES JOURS ===== */
@media screen and (max-width: 768px) {
    /* Conteneurs principaux */
    .enigma-container,
    .puzzle-container,
    .game-container {
        padding: 10px !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    /* Titres et textes */
    .enigma-title {
        font-size: 1.5rem !important;
        margin-bottom: 10px !important;
    }
    
    .enigma-story {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 15px !important;
    }
    
    /* Boutons généraux */
    .action-button,
    .validate-button,
    .submit-button {
        width: 100% !important;
        max-width: 300px !important;
        margin: 10px auto !important;
        padding: 12px !important;
        font-size: 16px !important;
    }
    
    /* Images */
    .puzzle-image,
    .enigma-image {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }
    
    /* Modales */
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px !important;
        padding: 15px !important;
    }
}

/* ===== TRÈS PETITS ÉCRANS (320px et moins) ===== */
@media screen and (max-width: 320px) {
    /* Réduction supplémentaire des tailles */
    .enigma-title {
        font-size: 1.2rem !important;
    }
    
    .enigma-story {
        font-size: 12px !important;
    }
    
    .action-button,
    .validate-button {
        font-size: 14px !important;
        padding: 10px !important;
    }
    
    /* Grilles encore plus petites */
    .letter-grid,
    .chess-board,
    .maze-grid {
        max-width: 280px !important;
    }
    
    .keypad-grid {
        max-width: 240px !important;
    }
    
    /* Inputs et selects */
    input, select, textarea {
        font-size: 14px !important;
        padding: 8px !important;
    }
}

/* ===== MODE PAYSAGE ===== */
@media screen and (max-width: 768px) and (orientation: landscape) {
    /* Optimisations pour le mode paysage */
    .enigma-container {
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    /* Grilles en mode paysage */
    .equipment-grid,
    .ingredients-grid,
    .pastries-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .statuette-grid,
    .temple-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}