:root {
        --bg-dark: #121212; 
        --panel-bg: #1e1e1e; 
        --accent: #007bff;
        
        /* VALEURS PAR DÉFAUT (Mobile First) */
        /* Sur mobile, on utilisera des % calculés dynamiquement, 
           mais on garde une base pour la logique */
        --board-size: 96vw; 
        --panel-width: 100%;
    }

    /* VALEURS POUR PC (Écrans > 900px) */
    @media (min-width: 900px) {
        :root {
            --board-size: 600px;
            --panel-width: 300px;
        }
    }

    body { 
        font-family: sans-serif; 
        background: var(--bg-dark); 
        color: white; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        padding: 0px; 
        margin: 0;
        overflow-x: hidden;
    }

    /* --- BANDEAU HEADER --- */
    .site-banner {
        position: sticky;
        top: 0;
        z-index: 1000;
        width: 100%;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        border-bottom: 1px solid #333;
    }
    .site-banner header {
        background: #121a2b;
        color: #fff;
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .site-banner-logo {
        text-decoration: none;
        color: inherit;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .site-banner-icon {
        font-size: 24px;
    }
    .site-banner-text {
        line-height: 1.1;
    }
    .site-banner-title {
        font-weight: 700;
        font-size: 1.2rem;
        letter-spacing: -0.5px;
        color: #f0f0f0;
    }
    .site-banner-version {
        font-size: 0.7rem;
        color: #888;
        font-family: monospace;
        text-transform: uppercase;
    }
    .site-banner-page {
        text-align: right;
        text-decoration: none;
        color: inherit;
    }
    .site-banner-page-title {
        font-size: 0.9rem;
        font-weight: bold;
        color: #e0e0e0;
    }
    .site-banner-page-sub {
        font-size: 0.7rem;
        color: #888;
        font-family: monospace;
        text-transform: uppercase;
    }

    .page-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 60px);
        color: #888;
        font-size: 1.2rem;
    }

    /* --- STRUCTURE GÉNÉRALE --- */
    .main-layout { 
        display: flex; 
        gap: 30px; 
        margin-top: 20px; 
        align-items: flex-start; /* Important pour aligner le haut du plateau et du panneau */
    }
    
    .board-column { 
        display: flex; 
        flex-direction: column; 
        gap: 10px; 
        /* La largeur s'adaptera au contenu (game-area) */
    }

    /* --- NOUVEAU CONTENEUR (Jauge + Échiquier) --- */
    /* C'est ici que la magie opère pour les mettre côte à côte */
    .game-area {
        display: flex;
        flex-direction: row; /* Force l'alignement horizontal */
        align-items: stretch; /* La jauge prendra la hauteur exacte de l'échiquier */
        gap: 8px; /* Espace entre la jauge et l'échiquier */
    }

    /* Jauge */
    .gauge-container { 
        width: 25px; 
        background: #333; 
        border-radius: 4px; 
        overflow: hidden; 
        display: flex; 
        flex-direction: column-reverse; 
        position: relative; 
        border: 1px solid #444; 
        /* L'astuce est ici : */
        align-self: stretch; 
    }
    
    #eval-bar { 
        background: #eee; 
        width: 100%; 
        height: 50%; /* Sera mis à jour par le JS */
        transition: height 0.6s ease-out;
        transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Animation fluide */
        box-shadow: inset 0 0 5px rgba(0,0,0,0.2); 
    }
    
    #eval-text { 
        position: absolute; 
        width: 100%; 
        text-align: center; 
        top: 50%; 
        transform: translateY(-50%); 
        font-size: 10px; 
        font-weight: bold; 
        mix-blend-mode: difference; 
        color: white; 
        z-index: 2;
    }

    /* Conteneur de l'échiquier */
    #board-wrapper {
        position: relative;
        /* Sur PC, la taille est définie par le contenu (Chessground) */
    }

    /* Échiquier Chessground */
    #ground { 
        width: var(--board-size); 
        height: var(--board-size); 
    }
    
    /* Footer (FEN/PGN) */
    .board-footer { 
        background: var(--panel-bg); 
        padding: 15px; 
        border-radius: 8px; 
        border: 1px solid #333; 
        display: flex; 
        flex-direction: column; 
        gap: 10px; 
    }
    
    .footer-row { display: flex; align-items: center; gap: 10px; }
    .footer-row label { font-size: 11px; font-weight: bold; color: #888; width: 35px; }
    .footer-row input, .footer-row textarea { 
        flex-grow: 1; background: #000; border: 1px solid #444; color: #ccc; 
        padding: 5px 8px; font-family: monospace; font-size: 11px; border-radius: 4px; outline: none;
    }
    .footer-row textarea { height: 80px; resize: none; }

    /* Panel */
    .side-panel { 
        width: var(--panel-width); 
        background: var(--panel-bg); 
        padding: 15px; 
        border-radius: 8px; 
        display: flex; 
        flex-direction: column; 
    }
    
    .best-move-display { 
        background: rgba(40, 167, 69, 0.1); border: 1px solid #28a745; 
        padding: 10px; text-align: center; margin-bottom: 10px; border-radius: 6px; 
    }
    
/* Log Moteur - Ajusté pour la cohérence */
#engine-log { 
    height: 250px; 
    background: #000; 
    color: #666; 
    font-family: monospace; 
    font-size: 10px; 
    overflow-y: auto; 
    padding: 10px; 
    /* margin-top: 15px; <-- Supprimé car géré par le wrapper */
    border-radius: 4px; 
    border: 1px solid #222; 
    scrollbar-width: thin; 
    scrollbar-color: #333 transparent;
}

/* On s'assure que le contenu du log ne soit pas trop serré */
#engine-log div {
    margin-bottom: 2px;
}
    
    /* Boutons */
    .btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
    button { padding: 8px 12px; cursor: pointer; border: none; border-radius: 4px; background: var(--accent); color: white; font-weight: bold; font-size: 11px; }
    button.small { padding: 5px 10px; background: #444; }
    button:hover { filter: brightness(1.2); }

    /* Styles des scrollbars personnalisées (inchangé) */
    #engine-log::-webkit-scrollbar, 
    #fen-display::-webkit-scrollbar, 
    #pgn-display::-webkit-scrollbar,
    #move-history-wrapper::-webkit-scrollbar { width: 6px; }
    
    #engine-log::-webkit-scrollbar-thumb, 
    #fen-display::-webkit-scrollbar-thumb, 
    #pgn-display::-webkit-scrollbar-thumb,
    #move-history-wrapper::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
    
    #fen-display:focus, #pgn-display:focus { border-color: var(--accent) !important; outline: none; }


    /* --- STYLES SPECIFIQUES DU JEU --- */
    
	/* --- INFOS JOUEURS AVEC INDICATEUR DE TRAIT --- */
	.player-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding-left: 33px; /* ON GARDE VOTRE ALIGNEMENT (Jauge 25px + Gap 8px) */
		box-sizing: border-box;
		font-size: 14px;
		color: #aaa;
		
		/* Préparation pour l'indicateur */
		border-left: 4px solid transparent; 
		transition: all 0.3s ease;
		position: relative;
	}

	/* État actif : quand c'est au tour du joueur */
	/* Indicateur de trait : on surligne le bloc du joueur actif */
	.player-info.active {
		background: rgba(0, 123, 255, 0.15) !important; /* Fond bleu léger */
		border-left: 4px solid #007bff !important;      /* Barre bleue à gauche */
		color: #fff !important;                         /* Texte en blanc */
		transition: all 0.3s ease;
	}

	/* Point bleu dans la zone jauge (33px à gauche), positionné en absolu */
		.player-info.active::before {
			content: "●";
			color: #007bff;
			font-size: 18px;
			position: absolute;
			left: 10px;
			top: 50%;
			transform: translateY(-50%);
			animation: pulse-turn 1.5s infinite;
		}

	@keyframes pulse-turn {
		0% { opacity: 1; transform: translateY(-50%) scale(1); }
		50% { opacity: 0.4; transform: translateY(-50%) scale(1.2); }
		100% { opacity: 1; transform: translateY(-50%) scale(1); }
	}
    .player-name { font-weight: 600; color: #eee; min-width: 50px; flex-shrink: 0; }
    .clock {
        margin-left: auto; background: #262421; color: #fff; padding: 4px 10px;
        font-family: 'Courier New', monospace; font-size: 1.2em; font-weight: bold;
        border-radius: 3px; min-width: 70px; text-align: center; border: 1px solid #403d39;
        flex-shrink: 0; white-space: nowrap;
    }

    /* Pièces capturées & Matériel */
    .captured-pieces { display: none; align-items: center; height: 24px; padding: 1px 6px; border-radius: 3px; flex-shrink: 1; overflow: hidden; }
    #captured-black-pieces { background: #a0a9bdad; border: 1px solid rgba(255, 255, 255, 0.1); }
    #captured-white-pieces { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.05); }
    .captured-piece { width: 18px; height: 18px; background-size: contain; background-repeat: no-repeat; }
    .material-score { display: none; font-size: 11px; font-weight: bold; color: #bbb; margin-left: 8px; padding: 2px 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }

    /* Styles Chessground Pièces & Coords */
    .cg-wrap piece.pawn.white { background-image: url('../img/pieces/pw.svg'); }
    .cg-wrap piece.knight.white { background-image: url('../img/pieces/nw.svg'); }
    .cg-wrap piece.bishop.white { background-image: url('../img/pieces/bw.svg'); }
    .cg-wrap piece.rook.white { background-image: url('../img/pieces/rw.svg'); }
    .cg-wrap piece.queen.white { background-image: url('../img/pieces/qw.svg'); }
    .cg-wrap piece.king.white { background-image: url('../img/pieces/kw.svg'); }
    .cg-wrap piece.pawn.black { background-image: url('../img/pieces/pb.svg'); }
    .cg-wrap piece.knight.black { background-image: url('../img/pieces/nb.svg'); }
    .cg-wrap piece.bishop.black { background-image: url('../img/pieces/bb.svg'); }
    .cg-wrap piece.rook.black { background-image: url('../img/pieces/rb.svg'); }
    .cg-wrap piece.queen.black { background-image: url('../img/pieces/qb.svg'); }
    .cg-wrap piece.king.black { background-image: url('../img/pieces/kb.svg'); }

	/* Force l'image à ne pas se répéter et à être centrée */
	.cg-wrap piece {
		background-size: 80% !important;
		background-repeat: no-repeat !important; /* LE CORRECTIF EST ICI */
		background-position: center !important;
	}

/* --- COORDONNÉES (LETTRES & CHIFFRES) --- */
    
	/* 1. Base commune */
	.cg-wrap coords {
		font-family: "Noto Sans", Arial, sans-serif !important;
		font-weight: 700 !important;
		font-size: 10px !important;
		pointer-events: none;
		z-index: 10;
		text-shadow: 0 1px 2px rgba(0,0,0,0.6); 
		color: #fff !important;
	}

	/* 2. LETTRES : Toujours en bas, ordre géré par le JS */
	.cg-wrap coords.files {
		/*bottom: 0 !important;*/
		left: 0 !important;
		width: 100% !important;
		display: flex !important;
		flex-direction: row !important; /* Neutre */
	}

	.cg-wrap coords.files coord {
		flex: 1 1 auto !important;
		text-align: right !important;
		padding-right: 4px !important;
		padding-bottom: 2px !important;
	}

	/* CHIFFRES (Ranks) : Toujours calés à droite, ordre dicté UNIQUEMENT par le JS */
	.cg-wrap coords.ranks {
		/*top: 0 !important;*/
		right: 0 !important;
		height: 100% !important;
		display: flex !important;
		flex-direction: column !important; /* IMPORTANT: Pas de reverse ici ! */
		width: 20px !important;
	}

	.cg-wrap coords.ranks coord {
		flex: 1 1 auto !important;
		text-align: left !important;
		padding-right: 4px !important;
		padding-top: 2px !important;
	}

	/* 4. LE PIVOT : On inverse uniquement la section centrale */
	#main-chess-section.flipped {
		flex-direction: column-reverse !important;
	}

    /* PV Lines & History */
    .pv-container { background: #262422; border: 1px solid #444; border-radius: 4px; margin-bottom: 6px; padding: 6px 10px; }
    .pv-row { display: flex; justify-content: space-between; align-items: center; font-family: monospace; font-size: 13px; margin-bottom: 4px; }
    .pv-path { font-family: 'Courier New', monospace; font-size: 10px; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid #333; padding-top: 4px; }
    
    #move-history-wrapper { background: #252525; border-radius: 4px; height: 140px; overflow-y: auto; margin: 0 0 15px 0; padding: 10px; border: 1px solid #333; }
    .move-list { display: flex; flex-wrap: wrap; gap: 5px; font-family: 'Courier New', monospace; font-size: 13px; align-content: flex-start; }
    .move-item { padding: 2px 5px; cursor: pointer; border-radius: 3px; color: #ccc; transition: background 0.2s; }
    .move-item:hover { background: #444; }
    .move-item.active { background: var(--accent); color: white; font-weight: bold; }
    .move-num { color: #666; margin-right: 2px; -webkit-user-select: none; user-select: none; width: 20px; text-align: right; }

	#move-history {
		position: relative; /* Indispensable pour que offsetTop fonctionne bien */
		overflow-y: auto;
	}

    /* Promotion Popup */
    #promotion-menu { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(25, 25, 25, 0.98); padding: 20px; border-radius: 12px; z-index: 1000; text-align: center; border: 2px solid var(--accent); box-shadow: 0 0 30px rgba(0,0,0,0.8); min-width: 240px; }
    #promotion-choices { display: flex; gap: 12px; justify-content: center; align-items: center; }
    #promotion-choices button { display: block; background-color: #333; background-repeat: no-repeat; background-position: center; background-size: 80%; border: 1px solid #555; border-radius: 8px; cursor: pointer; width: 65px; height: 65px; transition: all 0.2s ease; }
    #promotion-choices button:hover { background-color: #444; border-color: var(--accent); transform: translateY(-3px); }
    #prom-n { background-size: 88% !important; background-position: center 45% !important; }
    #promotion-menu > button { margin-top: 20px; background: #444; color: #eee; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 11px; transition: background 0.2s; }
    #promotion-menu > button:hover { background: #555; color: #fff; }

    /* Status & Animations */
    #status { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 18px; border-radius: 20px; font-size: 11px; font-weight: bold; background: rgba(255, 255, 255, 0.05); color: #888; border: 1px solid #444; margin-bottom: 15px; min-width: 180px; }
    #status.thinking { color: #00aaff; border-color: #00aaff; background: rgba(0, 170, 255, 0.1); }
    #status.ready { background: rgba(40, 167, 69, 0.1); color: #28a745; border-color: #28a745; animation: pulse-ready 2s infinite; }
    #status.error { color: #dc3545; border-color: #dc3545; background: rgba(220, 53, 69, 0.1); }
    #status.loading { color: #ffcc00; border-color: #ffcc00; background: rgba(255, 204, 0, 0.1); }
    @keyframes pulse-ready { 0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); } }
    @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }


/* =============================================
   STYLES EXTRAITS DU HTML (ex inline styles)
   ============================================= */

/* --- Layout Principal --- */
#main-chess-section {
    display: flex;
    flex-direction: column;
}

/* --- Panneau Réglages --- */
#settings-toggle {
    cursor: pointer;
    padding: 5px;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
}

#engine-settings {
    display: none;
    flex-direction: column;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid #444;
}

#engine-settings.open {
    display: flex;
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settings-label {
    font-size: 11px;
    color: #aaa;
}

.settings-value {
    color: var(--accent);
}

.settings-input {
    width: 80px;
    cursor: pointer;
}

.settings-select {
    background: #333;
    color: white;
    border: 1px solid #444;
    font-size: 10px;
    cursor: pointer;
}

#logic-info {
    font-size: 0.85em;
    color: #aaa;
    margin-top: 5px;
    font-style: italic;
}

.settings-footer {
    margin-top: 15px;
    border-top: 1px solid #444;
    padding-top: 10px;
    text-align: right;
}

.btn-secondary {
    background: #444;
    color: #eee;
    border: 1px solid #555;
}

/* --- En-têtes de section --- */
.panel-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.section-title {
    margin: 0;
    font-size: 1.1em;
    color: var(--accent);
    letter-spacing: 1px;
}

.section-subtitle {
    margin: 0;
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 1px;
}

.section-subtitle--bordered {
    margin-bottom: 10px;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
}

.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

/* --- Bloc Trait + Meilleur Coup --- */
.info-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #444;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 15px;
}

#turn-indicator {
    padding: 8px 10px;
    font-size: 0.7em;
    font-weight: bold;
    background: #ffffff;
    color: #000000;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

#turn-indicator .turn-main {
    font-size: 1em;
}

#turn-indicator .turn-sub {
    font-size: 0.9em;
    opacity: 0.7;
    text-align: center;
    line-height: 1.3;
}

#turn-indicator .turn-sub-detail {
    font-size: 1.1em;
    opacity: 0.8;
    font-weight: normal;
}

.info-card .best-move-display {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    padding: 8px 10px;
    background: #111;
    font-size: 0.7em;
    font-weight: bold;
    color: #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.best-move-display .move-label {
    font-size: 1em;
    opacity: 0.7;
}

.best-move-display .move-value {
    font-size: 1.4em;
}

#best-move {
    color: #28a745;
}

/* --- PV Lines --- */
#pv-summary {
    margin-bottom: 15px;
}

#pv-row-1 .pv-label { color: #28a745; }
#pv-row-2 .pv-label { color: #007bff; }
#pv-row-3 .pv-label { color: #20c997; }
#pv-row-4 .pv-label { color: #fd7e14; }
#pv-row-5 .pv-label { color: #dc3545; }

#pv-row-4,
#pv-row-5 {
    display: none;
}

/* --- Promotion --- */
.promotion-title {
    color: white;
    margin-bottom: 10px;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
}

/* --- Historique & Log --- */
#engine-log-wrapper {
    margin-top: 20px;
}

.btn-mini {
    font-size: 9px;
    padding: 2px 8px;
    height: auto;
    min-width: 60px;
}

/* --- RESPONSIVE MOBILE (Écrans < 900px) --- */
@media (max-width: 899px) {
    body { padding: 10px 0; } 

    .main-layout {
        display: flex;
        flex-direction: column; /* Empilement vertical */
        align-items: center;
        gap: 15px;
        width: 98%;
        margin-top: 15px;
    }

    /* Rend le side-panel transparent pour le positionnement de ses enfants */
    .side-panel {
        display: contents; 
    }

    /* POSITION 1 : LE HEADER D'ANALYSE */
	#side-panel-header {
        order: 1;
        width: 96vw;
        background: var(--panel-bg);
        padding: 0px;
        border-radius: 8px;
        margin-bottom: 0px;
        box-sizing: border-box;
        
        /* CENTRAGE DU BLOC */
        display: flex;
        flex-direction: column;
        align-items: center; 
        text-align: center;
    }

    /* POSITION 2 : LE PLATEAU ET SES ACCESSOIRES */
    .board-column {
        order: 2; /* Au milieu */
        width: 100%;
        align-items: center;
    }

    /* POSITION 3 : LE RESTE DE L'ANALYSE */
    #side-panel-content {
        order: 3; /* Tout en bas */
        width: 90%;
        background: var(--panel-bg);
        padding: 15px;
        border-radius: 8px;
        box-sizing: border-box;
    }

    .game-area {
        width: 96vw;
        justify-content: center;
    }

    .cg-wrap {
        width: calc(96vw - 33px) !important; 
        height: calc(96vw - 33px) !important;
    }
    
    .player-info {
        width: 96vw;
        padding-left: 33px;
    }

    .board-footer {
        width: 95vw;
        box-sizing: border-box;
    }

	.footer-row {
        display: grid !important;
        grid-template-areas: 
            "label actions"
            "field field";
        grid-template-columns: auto 1fr;
        gap: 8px;
        background: rgba(255, 255, 255, 0.03);
        padding: 10px;
        border-radius: 8px;
        margin-bottom: 10px;
        align-items: center;
    }

    .footer-row label {
        grid-area: label;
        width: auto !important; /* On annule le 100% */
        margin: 0;
        font-size: 11px;
        font-weight: bold;
        color: var(--accent);
    }

    .footer-actions {
        grid-area: actions;
        display: flex;
        justify-content: flex-end; /* Boutons calés à droite */
        gap: 6px;
    }

    .footer-actions button {
        padding: 6px 12px !important; /* Taille adaptée au mobile */
        margin: 0;
        flex: 0 1 auto;
    }

    .footer-row input, 
    .footer-row textarea {
        grid-area: field;
        width: 93% !important;
        margin: 0 !important;
        padding: 10px;
        background: #1a1a1a;
        border: 1px solid #444;
        color: #ccc;
        border-radius: 4px;
        font-family: monospace;
    }

    .footer-row textarea {
        height: 60px !important;
        resize: none;
    }
    
    .gauge-container { width: 25px; }

	/* Ajustement de la ligne du titre pour le centrage */
    #side-panel-header > div:first-child {
        width: 100%;
        justify-content: center !important; /* Centre le titre */
        position: relative;
    }

    /* On décolle l'icône de réglage pour qu'elle ne gêne pas le centrage du titre */
    #settings-toggle {
        position: absolute;
        right: 0;
    }
    
    #status,
    .info-card {
        width: 100%;
    }

	/* 2. LETTRES : Toujours en bas, ordre géré par le JS */
	.cg-wrap coords.files {
		left: 0 !important;
		width: 100% !important;
		display: flex !important;
		flex-direction: row !important; /* Neutre */
	}

	.cg-wrap coords.files coord {
		flex: 1 1 auto !important;
		text-align: right !important;
		padding-right: 2px !important;
		padding-top: 2px !important;
		font-size: 8px !important;
	}

	/* CHIFFRES (Ranks) : Toujours calés à droite, ordre dicté UNIQUEMENT par le JS */
	.cg-wrap coords.ranks {
		/*top: 0 !important;*/
		right: 0 !important;
		height: 100% !important;
		display: flex !important;
		flex-direction: column !important; /* IMPORTANT: Pas de reverse ici ! */
		width: 20px !important;
	}

	.cg-wrap coords.ranks coord {
		flex: 1 1 auto !important;
		text-align: left !important;
		padding-left: 0px !important;
		padding-top: 6px !important;
	}

}/*Fin style mobile*/

.new-game-btn svg.icon {
    fill: var(--accent); /* Utilise votre couleur bleue */
}
.new-game-btn:active svg.icon {
    fill: white; /* Devient blanc au clic */
}

/* Permet d'inverser l'ordre des éléments (Joueur Haut / Plateau / Joueur Bas) */
.board-column.flipped {
    flex-direction: column-reverse !important;
}

/* Si vos noms de joueurs sont dans des sous-conteneurs spécifiques */
.board-column.flipped .player-info {
    /* Optionnel : pour garder les textes alignés si besoin */
    display: flex;
    flex-direction: row; /* Ou row-reverse selon ta préférence d'alignement */    
}

/* --- BARRE DE CONTRÔLES UNIFIÉE (PC & MOBILE) --- */
.game-controls {
    display: flex;
    /* Aligné sur la taille de l'échiquier (600px sur PC, 96vw sur mobile) */
    width: 100%; 
    max-width: 100%;
    gap: 6px;
    margin-top: 15px;
    margin-bottom: 10px;
    justify-content: space-between;
}

.game-controls button {
    flex: 1; 
    padding: 10px 0;
    background: #262422; 
    border: 1px solid #444;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* Effets de survol (PC) et de clic (Mobile) */
.game-controls button:hover, 
.game-controls button:active {
    background: #3a3a3a;
    border-color: #666;
}

.game-controls button svg.icon {
    width: 24px;
    height: 24px;
    fill: #999;
    transition: fill 0.2s;
}

.game-controls button:hover svg.icon,
.game-controls button:active svg.icon {
    fill: #fff;
}

/* Boutons de navigation centrale (Undo/Redo) */
.game-controls button.nav-btn {
    flex-grow: 1.5;
    background: #333;
}

.game-controls button.nav-btn svg.icon {
    fill: #ccc;
}

/* Bouton Nouvelle Partie */
.game-controls button.new-game-btn {
    border-color: var(--accent);
    background: rgba(0, 123, 255, 0.1);
    margin-left: 10px; 
    flex: 0 0 50px; /* Garde une taille carrée pour le "+" */
}

.game-controls button.new-game-btn svg.icon {
    fill: var(--accent);
}

.game-controls button.new-game-btn:hover {
    background: var(--accent);
}

.game-controls button.new-game-btn:hover svg.icon {
    fill: white;
}


/* On force les nouveaux blocs à prendre toute la largeur du panneau */
#side-panel-header, 
#side-panel-content {
    width: 100%;
    display: flex;
    flex-direction: column;
}


/* On modifie le statut pour qu'il s'étende */
#status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* FIXE LA HAUTEUR SUR 2 LIGNES */
    /* 11px de texte + line-height + padding haut/bas */
    height: 54px; 
    min-height: 54px;
    
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.05);
    color: #888;
    border: 1px solid #444;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    
    /* OPTIONNEL : Empêche le texte de déborder si 3 lignes */
    overflow: hidden;
    line-height: 1.4;
}

.progress-bar {
    width: 80%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    transition: width 0.4s ease, background-color 0.3s ease;
}

#status.loading .progress-fill {
    background-color: #ffcc00;
}

#status.ready .progress-bar,
#status.thinking .progress-bar,
#status.error .progress-bar {
    display: none;
}

/* ═══════════════════════════════════════════════════════════
   IMAGE2FEN PAGE
   ═══════════════════════════════════════════════════════════ */
.i2f-layout {
    display: flex; gap: 24px; max-width: 750px; margin: 20px auto; padding: 0 16px;
    align-items: flex-start;
}
.i2f-upload-col { flex: 0 0 auto; width: 320px; }
.i2f-result-col { flex: 0 0 auto; width: 300px; }
.i2f-title {
    font-size: 14px; color: #aaa; text-transform: uppercase; letter-spacing: 1px;
    margin: 0 0 12px 0; font-weight: 600;
}

/* Dropzone */
.i2f-dropzone {
    border: 2px dashed #444; border-radius: 8px; padding: 24px;
    text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s;
    height: 360px; display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden; box-sizing: border-box;
}
.i2f-dropzone.has-image {
    background: #000; border-style: solid; border-color: #333; padding: 0;
}
.i2f-dropzone:hover, .i2f-dragover {
    border-color: var(--accent); background: rgba(0, 123, 255, 0.05);
}
.i2f-dropzone-content { color: #888; }
.i2f-dropzone-content p { margin: 8px 0 0; font-size: 14px; }
.i2f-dropzone-sub { font-size: 12px !important; color: #666 !important; }
.i2f-preview-img {
    max-width: 100%; max-height: 100%; border-radius: 4px; object-fit: contain;
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 8px;
    box-sizing: border-box;
}

/* Buttons */
.i2f-btn {
    padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;
    font-size: 12px; font-weight: bold; background: #444; color: #ccc;
    transition: background 0.2s; text-decoration: none; display: inline-block;
    margin-top: 8px;
}
.i2f-btn:hover { background: #555; }
.i2f-btn-primary {
    background: var(--accent); color: #fff;
}
.i2f-btn-primary:hover { background: #0069d9; }
.i2f-btn-secondary { background: #333; }
.i2f-btn-secondary:hover { background: #444; }
#btn-reset {
    width: 100%; margin-top: 10px; background: #2a2a2a;
    border: 1px solid #555; color: #ccc;
}
.i2f-btn-analyze {
    display: block; text-align: center; padding: 10px;
    font-size: 13px; flex: 1;
}
.i2f-actions-row {
    display: flex; gap: 8px; margin-top: 12px; align-items: stretch;
}
.i2f-external-row { margin-top: 8px; }
.i2f-btn-external {
    flex: 1; text-align: center; padding: 8px; font-size: 11px;
    background: #1a1a1a; border: 1px solid #444; color: #aaa;
    text-decoration: none;
}
.i2f-btn-external:hover { background: #2a2a2a; color: #fff; }

.i2f-hint {
    font-size: 11px; color: #888; margin: 8px 0 0; font-style: italic;
}

/* Options FEN (trait + roque) */
.i2f-fen-options {
    margin-top: 10px; padding: 10px; background: #1a1a1a;
    border: 1px solid #333; border-radius: 6px;
    display: flex; flex-direction: column; gap: 8px;
}
.i2f-option {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 12px; color: #ccc;
}
.i2f-option-label {
    font-weight: bold; color: #888; min-width: 42px; font-size: 11px;
}
.i2f-option label {
    display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
    white-space: nowrap;
}
.i2f-option input[type="radio"],
.i2f-option input[type="checkbox"] {
    accent-color: var(--accent); margin: 0; cursor: pointer;
}
.i2f-castling-rows {
    display: flex; flex-direction: column; gap: 4px;
}
.i2f-castling-row {
    display: flex; align-items: center; gap: 8px;
}
.i2f-castling-side {
    font-size: 11px; color: #aaa; min-width: 42px;
}

/* Status */
.i2f-status {
    font-size: 12px; margin-top: 10px; min-height: 1.4em;
}
.i2f-status-loading { color: #ffcc00; }
.i2f-status-ready { color: #888; }
.i2f-status-success { color: #10b981; }
.i2f-status-error { color: #ef4444; }

/* FEN output */
.i2f-fen-row {
    display: flex; align-items: center; gap: 6px; margin-top: 12px;
}
.i2f-fen-row label {
    font-size: 11px; font-weight: bold; color: #888; min-width: 28px;
}
.i2f-fen-row input {
    flex: 1; background: #000; border: 1px solid #444; color: #ccc;
    padding: 6px 8px; font-family: monospace; font-size: 11px; border-radius: 4px;
}

/* Board wrapper */
.i2f-board-wrapper {
    display: flex; justify-content: center;
    min-height: 298px; /* 280px board + 18px coords bottom */
    position: relative;
}
/* Curseur pointer en mode edition */
.i2f-board-wrapper.editing cg-board { cursor: pointer; }
/* Coordonnées à l'extérieur de l'échiquier */
.i2f-board-wrapper .cg-wrap {
    margin-left: 18px;
    margin-bottom: 18px;
}
.i2f-board-wrapper .cg-wrap coords.ranks {
    left: -18px;
    top: 0;
    align-items: flex-end;
    font-size: 11px;
    opacity: 0.7;
}
.i2f-board-wrapper .cg-wrap coords.files {
    bottom: -18px;
    left: 0;
    font-size: 11px;
    opacity: 0.7;
}

/* Piece editor popup */
.i2f-piece-popup {
    position: absolute;
    z-index: 100;
    bottom: -4px; left: 50%;
    transform: translate(-50%, 100%);
    background: rgba(20, 20, 20, 0.97);
    border: 2px solid var(--accent);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}
.i2f-piece-popup-row {
    display: flex; gap: 4px; justify-content: center;
}
.i2f-piece-popup-row + .i2f-piece-popup-row { margin-top: 4px; }
.i2f-piece-popup-row button {
    width: 36px; height: 36px;
    background-color: #333; background-repeat: no-repeat;
    background-position: center; background-size: 80%;
    border: 1px solid #555; border-radius: 6px;
    cursor: pointer; padding: 0;
    transition: all 0.15s ease;
}
.i2f-piece-popup-row button:hover {
    background-color: #444; border-color: var(--accent); transform: scale(1.1);
}
.i2f-piece-popup-empty button {
    width: 100%; height: 28px;
    font-size: 11px; color: #aaa;
    background-image: none !important;
}
/* Piece images */
.i2f-piece-popup button[data-piece="K"] { background-image: url('../img/pieces/kw.svg'); }
.i2f-piece-popup button[data-piece="Q"] { background-image: url('../img/pieces/qw.svg'); }
.i2f-piece-popup button[data-piece="R"] { background-image: url('../img/pieces/rw.svg'); }
.i2f-piece-popup button[data-piece="B"] { background-image: url('../img/pieces/bw.svg'); }
.i2f-piece-popup button[data-piece="N"] { background-image: url('../img/pieces/nw.svg'); }
.i2f-piece-popup button[data-piece="P"] { background-image: url('../img/pieces/pw.svg'); }
.i2f-piece-popup button[data-piece="k"] { background-image: url('../img/pieces/kb.svg'); }
.i2f-piece-popup button[data-piece="q"] { background-image: url('../img/pieces/qb.svg'); }
.i2f-piece-popup button[data-piece="r"] { background-image: url('../img/pieces/rb.svg'); }
.i2f-piece-popup button[data-piece="b"] { background-image: url('../img/pieces/bb.svg'); }
.i2f-piece-popup button[data-piece="n"] { background-image: url('../img/pieces/nb.svg'); }
.i2f-piece-popup button[data-piece="p"] { background-image: url('../img/pieces/pb.svg'); }

/* Responsive */
@media (max-width: 600px) {
    .i2f-layout { flex-direction: column; gap: 20px; }
    .i2f-upload-col, .i2f-result-col { width: 100%; }
    .i2f-result-col { border-top: 1px solid #333; padding-top: 16px; }
    .i2f-dropzone { height: 280px; }
    .i2f-board-wrapper { justify-content: center; min-height: 258px; /* 240px + 18px */ }
    #board { width: 240px !important; height: 240px !important; }
    .i2f-piece-popup-row button { width: 32px; height: 32px; }
}