/* Styles spécifiques à cs.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 de l'app dans l'en-tête */
#logo a { color: inherit; }

/* Tuiles d'outils (couleurs reprises de l'application) */
.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;
	transition: transform 0.2s ease;
}
.tool-tile:hover { transform: translateY(-3px); }
.tool-tile.calc     { background: #EFF6FF; color: #2563EB; }
.tool-tile.discount { background: #ECFDF5; color: #059669; }
.tool-tile.fraction { background: #FFFBEB; color: #D97706; }
.tool-tile.equation { background: #F5F3FF; color: #7C3AED; }
.tool-tile.problem  { background: #FDF2F8; color: #DB2777; }
.tool-tile.loan     { background: #CCFBF1; color: #0D9488; }
.tool-tile.currency { background: #FEF3C7; color: #D97706; }

/* Liste détaillée des outils (page application) */
.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;
}
.tool-list .tool-icon.calc     { background: #EFF6FF; color: #2563EB; }
.tool-list .tool-icon.discount { background: #ECFDF5; color: #059669; }
.tool-list .tool-icon.fraction { background: #FFFBEB; color: #D97706; }
.tool-list .tool-icon.equation { background: #F5F3FF; color: #7C3AED; }
.tool-list .tool-icon.problem  { background: #FDF2F8; color: #DB2777; }
.tool-list .tool-icon.loan     { background: #CCFBF1; color: #0D9488; }
.tool-list .tool-icon.currency { background: #FEF3C7; color: #D97706; }
.tool-list h4 { margin: 0 0 0.25em 0; font-weight: bold; }
.tool-list p { margin: 0; }
.tool-list ul { margin: 0.5em 0 0 0; }

/* 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; }

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

/* Galerie de captures */
.galerie-popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.88); z-index: 9999; align-items: center; justify-content: center; }
.galerie-popup-contenu { position: relative; max-width: 85%; max-height: 85%; display: flex; align-items: center; justify-content: center; }
.galerie-popup-contenu img { max-width: 100%; max-height: 85vh; display: block; border-radius: 6px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); }
.galerie-fermer { position: absolute; top: -42px; right: 0; color: #fff; font-size: 36px; line-height: 1; cursor: pointer; user-select: none; }
.galerie-fermer:hover, .galerie-prec:hover, .galerie-suiv:hover { color: #ccc; }
.galerie-prec, .galerie-suiv { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 42px; cursor: pointer; user-select: none; padding: 12px; }
.galerie-prec { left: -70px; }
.galerie-suiv { right: -70px; }
@media (max-width: 736px) {
	.galerie-prec { left: 5px; }
	.galerie-suiv { right: 5px; }
	.galerie-fermer { top: 10px; right: 10px; }
}