body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}

.disableInput {
	text-align: center;
	width: 20px;
    height: 20px;
    border: 1px solid rgba(0, 0, 0, 0);  /* bordure transparente */
    outline: none;
    font-size: 16px; 	
	
	cursor: not-allowed;
	pointer-events: none;
}

.inputCell {
 font-size: 20px; 
 color: rgb(0, 128, 255); 
 font-weight: bold;	
}

.cellForInputChoice,
.cellForInputChoice * {
	background-color: #d6ceff !important;
	transition: background-color 0.5s ease-in-out;   
}

.innerChoiceGrid {
	outline: none;
	padding: 0px;
	width: 12px;
	height: 12px;
	border: 0px;
	font-size: 12px !important;
}

.rounded-cell {
	border: 1px solid #0000ff;
	border-radius: 3px;
	padding: 12px;
	text-align: center;
    font-size: 18px;
}

.rounded-cell-note {
	border: 1px solid #6c6cff;
	border-radius: 3px;
	padding: 12px;
	text-align: center;
    font-size: 14px;
}

.colorError,
.colorError * {
	background-color: #ff4f4f !important;
	font-weight: bold;
	color: black;
	transition: background-color 1.0s ease-in-out;   
}

.colorErrorNone {
	background-color: #a7df7d;
	transition: background-color 1.0s ease-in-out;   
	font-size: 18px;
}

.showInput {
	display: block;
}

.hideInputBack {
	display: none;
}

.hideInput {
	display: none;
}

.divInputContainer {
	position: relative;
	 z-index: 1;
}

.divInputCell,
.divInputGrid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.divInputCell {
    z-index: 10;
}
.divInputGrid {
    z-index: 50;
}

.divSolutionCell { /* Contient la valeur à trouver qui est cacher (opacity: 0)*/
	z-index: 100;
	opacity: 0; 
}

.selectedValue {
	  font-weight: bolder;
	  background-color: #f8f3bc !important;
}


/*** From Perplexity ***/
        .modal {
            position: fixed; z-index: 1000; left: 0; top: 0;
            width: 100%; height: 100%;
            background-color: rgba(0,0,0,0.8);
            display: none; /* Caché au départ */
            align-items: center; 
            justify-content: center;
        }
        .grid-container {
            display: grid;
            grid-template-columns: repeat(9, 1fr);
            grid-gap: 1px;
            background-color: #333;
            width: 450px;
            height: 450px;
            margin: 20px /* auto */;
            border-top: 2px solid #333;
            border-left: 2px solid #333;
            border-right: 0px solid #333; 
            border-bottom: 2px solid #333;
        }
        .grid-item {
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-family: Arial, sans-serif;
        }
        /* Ligne vertical en gras */
        .grid-item:nth-child(3n) {
            border-right: 2px solid #333;
        }

        .grid-item:nth-child(n+19):nth-child(-n+27),
        .grid-item:nth-child(n+46):nth-child(-n+54) {
            border-bottom: 3px solid #333;
        }
 
 /*** Gemin ***/
 
 /* --- SYSTEME DE MODALE UNIFIÉ --- */
.modal-content {
    background-color: white;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    
    /* Correction ici : on donne la priorité au contenu */
    max-width: 95vw;        /* Empêche de sortir de l'écran sur petit mobile */
    width: fit-content;     /* S'adapte à la largeur des boutons */
    min-width: 500px;       /* Maintient une base stable */
}

/* --- BOUTONS DANS LES MODALES --- */
.boutons-container {
    display: flex !important; /* Force le mode flex */
    flex-direction: row;
    flex-wrap: nowrap;        /* Interdiction formelle de passer à la ligne */
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
}

.btn {
    white-space: nowrap;      /* Empêche le texte de doubler sur deux lignes dans le bouton */
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: white;
    font-weight: bold;
    transition: transform 0.2s, opacity 0.2s;
    
    /* On s'assure que le bouton ne prend pas toute la largeur par défaut */
    display: inline; 
}
.btn:hover { transform: scale(1.00); opacity: 0.9; }

/* Couleurs thématiques */
.btn-facile { background-color: #4CAF50; }
.btn-moyen  { background-color: #FF9800; }
.btn-expert { background-color: #f44336; }
.btn-admin  { background-color: #757575; }
.btn-close  { background-color: #5bc0de; margin-top: 15px; }
.btn-valid  { background-color: #757575; margin-left: 44px; }
.btn-retour { background-color: #86aac8; }

/* Style quand le bouton est désactivé */
.btn:disabled {
    background-color: #aaaaaa!important; /* Gris clair */
    color: #888888 !important;            /* Texte grisé */
    cursor: not-allowed;                 /* Curseur "interdit" */
    opacity: 0.6;                        /* Un peu transparent */
    transform: none !important;          /* Annule l'effet de scale */
}
    
/* Empêche l'effet de survol (hover) quand il est désactivé */
.btn:disabled:hover {
    opacity: 0.6;
    transform: none;
}