/* Styles spécifiques à youzu.maxou.pro (en complément de main.css) */

/* Sélecteur de langue */
#lang-switcher { position: relative; display: inline-block; float: right; margin: 1.5em 0 0 0; z-index: 10000; }
#lang-switcher button { background: none; border: none; cursor: pointer; font-size: 1.6em; line-height: 1; padding: 4px 8px; }
#lang-switcher .lang-menu { display: none; position: absolute; right: 0; top: 100%; background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); min-width: 180px; max-height: 320px; overflow-y: auto; padding: 6px 0; }
#lang-switcher.open .lang-menu { display: block; }
#lang-switcher .lang-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; color: #333; text-decoration: none; font-size: 0.95em; white-space: nowrap; }
#lang-switcher .lang-menu a:hover { background: #f2f2f2; }
#lang-switcher .lang-menu a.active { font-weight: bold; background: #f7f7f7; }
#lang-switcher .lang-menu .flag { font-size: 1.2em; }
[dir="rtl"] #lang-switcher { float: left; }
[dir="rtl"] #lang-switcher .lang-menu { right: auto; left: 0; }

/* Logo du jeu dans l'en-tête */
#logo a { color: inherit; }

/* Tuiles des modes de jeu (couleurs des sphères du jeu) */
.tool-tile {
	display: flex; align-items: center; justify-content: center;
	height: 160px; border-radius: 6px; margin-bottom: 1.5em;
	font-size: 4em; text-decoration: none; border-bottom: 0;
	background: radial-gradient(circle at 50% 40%, #26224A 0%, #0F1320 75%);
	transition: transform 0.2s ease;
}
.tool-tile:hover { transform: translateY(-3px); }
.tool-tile.normal    { color: #FDD835; }
.tool-tile.timed     { color: #42A5F5; }
.tool-tile.challenge { color: #AB47BC; }

/* Liste détaillée (page du jeu) */
.tool-list { list-style: none; padding: 0; margin: 0 0 2em 0; }
.tool-list > li { display: flex; gap: 1em; align-items: flex-start; padding: 1em 0; border-top: 1px solid #e5e5e5; }
.tool-list > li:first-child { border-top: 0; }
.tool-list .tool-icon {
	flex: 0 0 3em; height: 3em; border-radius: 10px;
	display: flex; align-items: center; justify-content: center; font-size: 1.3em;
	background: #1A2032;
}
.tool-list .tool-icon.normal    { color: #FDD835; }
.tool-list .tool-icon.timed     { color: #42A5F5; }
.tool-list .tool-icon.challenge { color: #AB47BC; }
.tool-list .tool-icon.scores    { color: #66BB6A; }
.tool-list .tool-icon.drop      { color: #7C8CFF; }
.tool-list .tool-icon.weight    { color: #C9D2E0; }
.tool-list .tool-icon.target    { color: #66BB6A; }
.tool-list .tool-icon.lives     { color: #EF5350; }
.tool-list .tool-icon.bonus     { color: #FDD835; }
.tool-list .tool-icon.silver    { color: #E0E6EE; }
.tool-list h4 { margin: 0 0 0.25em 0; font-weight: bold; }
.tool-list p { margin: 0; }

/* Les 5 sphères et leur poids */
.sphere-list { list-style: none; padding: 1.5em 1em; margin: 0 0 1em 0; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: flex-end; gap: 1em; background: radial-gradient(circle at 50% 30%, #26224A 0%, #0F1320 80%); border-radius: 8px; }
.sphere-list li { display: flex; flex-direction: column; align-items: center; gap: 0.5em; padding: 0; margin: 0; }
.sphere {
	width: var(--size, 3em); height: var(--size, 3em); border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-weight: bold; font-size: 1.1em; text-shadow: 0 1px 2px rgba(0,0,0,0.6);
	box-shadow: inset -4px -6px 10px rgba(0,0,0,0.3), 0 3px 8px rgba(0,0,0,0.4);
}
.sphere.red    { background: radial-gradient(circle at 35% 30%, #FF9A98 0%, #EF5350 45%, #B71C1C 100%); }
.sphere.yellow { background: radial-gradient(circle at 35% 30%, #FFF59D 0%, #FDD835 45%, #C49000 100%); }
.sphere.green  { background: radial-gradient(circle at 35% 30%, #B9F6BC 0%, #66BB6A 45%, #2E7D32 100%); }
.sphere.blue   { background: radial-gradient(circle at 35% 30%, #A5D8FF 0%, #42A5F5 45%, #1565C0 100%); }
.sphere.purple { background: radial-gradient(circle at 35% 30%, #E1A6EC 0%, #AB47BC 45%, #6A1B9A 100%); }
.sphere-name { color: #F2F4F8; font-size: 0.9em; }

/* Tableau des modes */
.table-wrapper { overflow-x: auto; margin: 0 0 2em 0; }
.mode-table { width: 100%; border-collapse: collapse; }
.mode-table th, .mode-table td { padding: 0.6em 0.8em; text-align: center; border-bottom: 1px solid #e5e5e5; }
.mode-table th { background: #1A2032; color: #F2F4F8; font-weight: bold; }
.mode-table td:first-child { font-weight: bold; }
.mode-table .yes { color: #43A047; }
.mode-table .no  { color: #E53935; }

/* Encadré de téléchargement */
.download-box { background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 8px; padding: 1.5em; margin: 1.5em 0; }
.download-box p:last-child { margin-bottom: 0; }
.highlight-yellow { background-color: yellow; }

/* Encadré « Contenus familiaux » */
.family-box { border: 2px solid #34A853; border-radius: 8px; padding: 1.2em 1.5em; margin: 2em 0; background: #F1F8F3; }
.family-box p:last-child { margin-bottom: 0; }

/* Logo carré dans la barre latérale */
.app-logo-side { display: block; max-width: 160px; margin: 0 auto 1em auto; border-radius: 22%; }