/* Pages internes aide/profil/classement/actualites. Chaque vue remplit la zone
   de contenu sous le header persistant, comme #salon ou #div_jeu ; il n'y a
   ni backdrop, ni carte de modale, ni dialogue. */

body.page_secondaire_ouverte {
	overflow: hidden;
}

/* Le header principal devient l'en-tete de navigation des pages internes :
   le logo reste visible et le bouton remplace temporairement l'avatar. */
#retour_menu_page_secondaire {
	position: absolute;
	top: 50%;
	left: 10px;
	width: auto;
	height: calc(100% - 8px);
	min-height: 0;
	max-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid #cfdacb;
	border-radius: 999px;
	background: #fff;
	color: #397a2e;
	box-shadow: 0 5px 16px rgba(20, 53, 17, 0.14);
	font-family: "Comfortaa", sans-serif;
	font-size: 0.76rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transform: translateY(-50%);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#retour_menu_page_secondaire[hidden] {
	display: none !important;
}

#retour_menu_page_secondaire i {
	font-size: 0.9rem;
}

#retour_menu_page_secondaire .retour_menu_icone {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

#retour_menu_page_secondaire .retour_menu_icone .fa-arrow-left {
	font-size: 0.7rem;
}

#retour_menu_page_secondaire:hover,
#retour_menu_page_secondaire:focus-visible {
	border-color: #82ae78;
	box-shadow: 0 7px 20px rgba(20, 53, 17, 0.2);
	outline: none;
}

body.page_secondaire_ouverte #profil_header {
	display: none;
}

body.page_secondaire_ouverte #header {
	z-index: 10001;
}

.page_secondaire_spa {
	position: fixed;
	z-index: 10000;
	top: 5%;
	right: 0;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	color: #273127;
	font-family: "Comfortaa", sans-serif;
	background-color: #589306;
	background-image: url("/images/padding.png");
}

.page_secondaire_spa::before {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 19%, rgba(77, 101, 35, 0) 59%, rgba(0, 0, 0, 0.7) 100%);
	content: "";
}

.page_secondaire_corps {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Les fragments retrouvent leur presentation de page autonome : titre dans le
   contenu, cartes blanches et marges sur le fond vert. Le retour, lui, reste
   uniquement dans le header principal. */
#page_profil_spa .profil_page {
	width: 100%;
	padding-top: 24px;
	padding-right: 0;
	padding-left: 0;
}

#page_profil_spa .profil_surface {
	border-right: 0;
	border-left: 0;
	border-radius: 0;
}

#page_classement_spa .page_secondaire_corps {
	padding: 24px 0;
}

#page_statistiques_spa .page_secondaire_corps {
	padding: 24px 0;
}

#page_classement_spa #header_classement,
#page_classement_spa #page_classement {
	width: 100%;
	border-right: 0;
	border-left: 0;
	border-radius: 0;
}

#page_statistiques_spa .statistiques_globales {
	width: 100%;
}

#page_statistiques_spa .stats_globales_entete,
#page_statistiques_spa .stats_globales_cadre {
	border-right: 0;
	border-left: 0;
	border-radius: 0;
}

#page_statistiques_spa .stats_globales_note {
	padding: 0 14px 10px;
}

#page_aide_spa {
	padding: 16px 0;
}

#page_aide_spa .aide-fenetre {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	min-height: 0;
	border-right: 0;
	border-left: 0;
	border-radius: 0;
}

#page_aide_spa .aide-fermer,
#page_aide_spa .aide-pied > a,
#page_nouveautes_spa .nouveautes_retour {
	display: none;
}

#page_nouveautes_spa .nouveautes_page {
	width: 100%;
}

/* La boutique porte son propre lien de retour (.back-link) dans son en-tete,
   pertinent uniquement sur la page /boutique autonome - #retour_menu_page_secondaire
   (en-tete du jeu) le remplace ici, meme convention que .aide-fermer/
   .nouveautes_retour ci-dessus. `visibility` (pas `display:none`) : .shop-header
   est une grille a 3 colonnes fixes (40px/1fr/auto) - un display:none aurait
   retire .back-link du flux de la grille et decale .shop-heading/.balance-card
   chacun d'une colonne. Les hauteurs de boutique.css supposent un plein
   viewport (100vh) : recalees sur l'espace reellement disponible dans
   .page_secondaire_corps une fois embarquees. */
#page_boutique_spa .back-link {
	visibility: hidden;
}

#page_boutique_spa .preview {
	min-height: 100%;
	height: 100%;
	padding: 4px 6px 0;
}

#page_boutique_spa .shop-page {
	height: calc(100% - 4px);
	min-height: 0;
	border-radius: 24px 24px 0 0;
}

@media (max-width: 620px) {
	body.page_secondaire_ouverte #header {
		box-sizing: border-box;
		justify-content: flex-end;
		padding-right: 8px;
	}

	body.page_secondaire_ouverte #logo_header {
		max-width: calc(100% - 170px);
	}

	#retour_menu_page_secondaire {
		left: 8px;
		gap: 7px;
		padding: 0 13px;
		font-size: 0.68rem;
	}

	#page_profil_spa .profil_page {
		padding-top: 12px;
	}

	#page_classement_spa .page_secondaire_corps {
		padding: 12px 0;
	}

	#page_statistiques_spa .page_secondaire_corps {
		padding: 12px 0;
	}

	#page_aide_spa {
		padding: 8px 0;
	}

	#page_nouveautes_spa .nouveautes_page {
		width: 100%;
		padding-top: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#retour_menu_page_secondaire {
		transition-duration: 1ms;
	}
}