span.clickable {
            text-decoration: none;
            cursor: pointer;      /* indique que c'est cliquable */
            display: block;       /* chaque span sur sa propre ligne */
			line-height:1.7
            
        }
        .container {
            
            padding: 20px;
            max-width: 100%;
            width: 100%;
            overflow-x: auto;
        }
        
        .entry-content>:first-child {
			margin-top: 0!important;
		} 
		.entry-content>:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
			
			max-width: 55rem;
		}	
		a.next-post {
			float: right;
		}
        .instructions {
            background: #f8f9fa;
            border-left: 4px solid #667eea;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 0 8px 8px 0;
            
        }
        
        .puzzle-container {
            display: flex;
            justify-content: center;
            overflow-x: auto;
            padding: 10px;
        }
        
        .logic-grid {
            border-collapse: collapse; /* bug d'affichage sur firefox au niveau de certaines bordures de cellules*/ 
            background: white;
            /*border: 3px solid #333;*/
            min-width: 700px;
        }
        .mask {
            border: 0!important;
            background: white!important;
        }
        
        /* Headers des catégories */
        .category-header {
            color: white;
            font-weight: bold;
            text-align: center;
            padding: 8px 4px;
            border: 2px solid #333;
            font-size: clamp(10px, 2vw, 12px);
        }
        
        .music-genre-header { background: #2196F3; }
        .sport-header { background: #9C27B0; }
        .lenght-header,.day-of-week-header, .hour-of-day-header, .weight-header, .year-header, .month-header, .house-header, .tent-header { background: #F44336; }
        .pet-header { background: #FF9800; }
        .transport-header { background:#F5385B; }
        .food-header { background:red }
        .movie-genre-header {background: #ffe405fc}
        .job-header {background: #666; color:white;}
        .beverage-header{background: #85B027;}
        .hobby-header {background: #073ca1;}
        .nationality-header {background: #3da341;}
        
        /* Headers verticaux pour les lignes */
        .vertical-header {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            width: 35px;
            padding: 8px 4px;
        }
        
        /* Items dans chaque catégorie */
        .item-label {
            background: #f8f9fa;
            padding: 6px 0px;
            border: 1px solid #666;
            font-size: clamp(9px, 1.8vw, 11px);
            font-weight: 500;
            text-align: center;
            min-width: 20px;
            white-space: nowrap;
			color: #060606;
        }
           .item-label:not(.vertical-item) {
   writing-mode: vertical-rl;
}
        .music-genre-item { background: #E3F2FD;  }
        .nationality-item { background:#79CB53;  }
        .food-item { background: #F38C8C;  }
        .job-item { background: #6D6B6B40;  }
        .beverage-item { background: #B8CBCB;  }
        .transport-item { background: #F38C8C;  }
        .sport-item { background: #F3E5F5;  }
        .lenght-item,.day-of-week-item, .hour-of-day-item, .weight-item, .year-item, .month-item, .house-item, .tent-item { background: #FFEBEE;  }
        .pet-item { background: #FFF3E0;  }
        .movie-genre-item { background: #f3f314a8;  }
        .hobby-item { background: #8998ebd6;  }
        
        /* Items verticaux pour les lignes */
        .vertical-item {
            writing-mode: horizontal-rl;
            text-orientation: mixed;
            width: 35px;
            padding: 8px 4px;
            font-size: clamp(9px, 1.8vw, 10px);
        }
        
        /* Cellules cliquables */
        .grid-cell {
            width: 21px;
            height: 21px;
            border: 1px solid #666;
            cursor: pointer;
            position: relative;
            background: white;
            transition: all 0.2s ease;
        }
        
        .grid-cell:hover {
            background: #e3f2fd;
            transform: scale(0.98);
        }
        
        .grid-cell.checked {
            background: #4CAF50;
            color: white;
        }
        
        .grid-cell.checked::after {
            content: "✓";
            font-size: 16px;
            font-weight: bold;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .grid-cell.crossed {
            background: #f44336;
            color: white;
        }
        
        .grid-cell.crossed::after {
            content: "✗";
            font-size: 16px;
            font-weight: bold;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        /* Zone interdite */
        .blocked-cell {
            background: #ddd;
            cursor: not-allowed;
        }
        
        .success-message {
            display: none;
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            margin-top: 20px;
            font-size: 18px;
            font-weight: bold;
            box-shadow: 0 10px 25px rgba(76, 175, 80, 0.3);
            animation: slideIn 0.5s ease-out;
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .controls {
            text-align: center;
            margin-top: 15px;
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .btn {
            border: none;
            padding: 10px 20px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        
        .reset-btn {
            background: linear-gradient(135deg, #f44336, #d32f2f);
            color: white;
        }
        
        .clear-btn {
            background: linear-gradient(135deg, #FF9800, #F57C00);
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }
        
        @media (max-width: 820px) {
            .container {
                padding: 15px;
                margin: 10px;
            }
            
            .logic-grid {
                min-width: 600px;
            }
            
            .grid-cell {
                width: 25px;
                height: 25px;
            }
            
            .grid-cell.checked::after,
            .grid-cell.crossed::after {
                font-size: 14px;
            }
            
            .vertical-header,
            .vertical-item {
                width: 30px;
            }
			
			.entry-content>:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
			 --double-padding: 0; 
    
			}
        }
        
        /* Smartphones portrait : masquer la 1ère colonne, réduire la 2ème */
@media (max-width: 600px) and (orientation: portrait) {
  /* Colonne 1 (headers verticaux) => compressée, mais sans casser colspan */
  .vertical-header {
    width: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    border: none !important;
  }

  /* Colonne 2 (items verticaux) => réduite au minimum */
  .vertical-item {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    width: 18px !important;
    font-size: 9px !important;
    padding: 2px !important;
  }

  /* Grille adaptée */
  .logic-grid {
    min-width: auto;
    width: 100%;
    table-layout: fixed;
  }

  .grid-cell {
    width: 16px;
    height: 16px;
  }

  /* Entêtes horizontaux plus compacts */
  .category-header,
  .item-label {
    font-size: 9px !important;
    padding: 2px !important;
  }

  h1 {
    font-size: 1.2em;
  }

  .instructions {
    font-size: 11px;
    padding: 8px;
  }
}

/* séparateurs épais verticaux entre catégories de colonnes */
.col-separator {
    border-right: 2px solid #333 !important;
}

/* séparateurs épais horizontaux entre catégories de lignes */
.row-separator {
    border-bottom: 2px solid #333 !important;
}

/* garantie que ça s'applique aux différents types de cellules */
.category-header.col-separator,
.item-label.col-separator,
.grid-cell.col-separator { border-right: 2px solid #333 !important; }

.vertical-header.row-separator,
.item-label.row-separator,
.grid-cell.row-separator { border-bottom: 2px solid #333 !important; }