/* ==========================================================================
   French Hosting — Mobile responsive layer (≤ 768 px)
   Charge après style.css ; force le layout mobile propre partout.
   ========================================================================== */

/* -- Anti-overflow global : rien ne dépasse jamais la largeur du viewport -- */
@media (max-width: 900px) {
	html, body { overflow-x: hidden; max-width: 100vw; }
	img, video, iframe { max-width: 100%; height: auto; }
	pre, code { max-width: 100%; overflow-x: auto; }
}

/* =====================================================================
   HEADER — sur mobile devient une barre compacte avec hamburger
   ===================================================================== */
/* Sur desktop : rien de tout ça ne doit apparaître (garde-fous CSS
   au cas où le DOM contiendrait encore ces éléments). */
.mobile-hamburger { display: none; }
.fh-mobile-brand { display: none; }
.fh-menu-backdrop { display: none; }

@media (max-width: 900px) {

	/* Header : compact, sur une seule ligne */
	.site-header {
		padding: 12px 16px !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 10px !important;
	}

	/* Pill de nav : masquée par défaut, s'affiche en drawer */
	.nav-pill {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 84vw !important;
		max-width: 320px !important;
		height: 100vh !important;
		border-radius: 0 !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 6px !important;
		padding: 76px 18px 24px !important;
		overflow-y: auto !important;
		transform: translateX(-100%);
		transition: transform 0.28s ease-out;
		box-shadow: 4px 0 32px rgba(0, 0, 0, 0.28) !important;
		z-index: 1000 !important;
		background: #ffffff !important;
	}
	[data-theme="dark"] .nav-pill { background: #111827 !important; }

	body.fh-menu-open .nav-pill { transform: translateX(0); }
	body.fh-menu-open .fh-menu-backdrop { opacity: 1; pointer-events: auto; }

	.nav-pill .brand {
		padding: 0 0 14px !important;
		margin: 0 0 10px !important;
		border-right: none !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
	}
	.brand-text { display: flex !important; }
	.brand-text b { font-size: 0.95rem !important; }
	.brand-text i { font-size: 0.6rem !important; }

	.links {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 4px !important;
		width: 100% !important;
	}
	.links > li { width: 100%; }
	.links > li > a {
		padding: 12px 14px !important;
		font-size: 0.95rem !important;
		border-radius: 10px !important;
		justify-content: space-between;
	}

	.menu {
		position: static !important;
		width: 100% !important;
		box-shadow: none !important;
		border: 1px solid rgba(0, 0, 0, 0.08) !important;
		margin-top: 6px !important;
		padding: 10px !important;
	}
	.menu .game-grid { grid-template-columns: 1fr !important; gap: 6px !important; }

	/* Pill d'auth : masquée dans le header, ré-affichée dans le drawer */
	.auth-pill {
		position: static !important;
		flex-direction: column !important;
		gap: 10px !important;
		padding: 14px 0 !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
		margin-top: 10px !important;
		width: 100% !important;
	}
	.auth-pill .btn-login,
	.auth-pill .btn-signup {
		width: 100% !important;
		justify-content: center !important;
		padding: 12px 16px !important;
	}
	.auth-pill .auth-div { display: none !important; }

	/* Sur mobile, l'auth-pill du header est déplacée dans le drawer via JS ;
	   par sécurité on la cache si elle est encore dans le header */
	.site-header > .auth-pill { display: none !important; }

	/* Bouton hamburger visible seulement sur mobile */
	.mobile-hamburger {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px; height: 44px;
		border-radius: 12px;
		background: #ffffff;
		border: 1px solid rgba(0, 0, 0, 0.1);
		color: #0f172a;
		cursor: pointer;
		font-size: 1.15rem;
		z-index: 60;
		box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.25);
	}
	[data-theme="dark"] .mobile-hamburger { background: #111827; color: #f1f5f9; border-color: #334155; }

	/* Le logo dans le header mobile — plus compact */
	.site-header > .brand,
	.site-header > .fh-mobile-brand {
		display: flex;
		align-items: center;
		gap: 10px;
		color: var(--ink);
		text-decoration: none;
	}
	.site-header > .fh-mobile-brand img { width: 30px; height: 30px; }

	/* Backdrop qui ferme le drawer */
	.fh-menu-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s;
	}
}

/* =====================================================================
   HERO — resserré et centré sur mobile
   ===================================================================== */
@media (max-width: 768px) {
	.hero-animated-section {
		padding-bottom: 20px !important;
		min-height: auto !important;
	}
	.hero-title,
	.hero-title .aurora-text {
		font-size: 1.5rem !important;
		line-height: 1.15 !important;
		padding: 0 16px !important;
		text-align: center !important;
	}
	.hero-container {
		padding: 20px 16px !important;
		flex-direction: column !important;
		gap: 24px !important;
	}
	.hero-left h1 {
		font-size: 1.6rem !important;
		line-height: 1.2 !important;
	}
	.hero-left h1 span { display: inline !important; }
	.hero-subtitle { font-size: 0.95rem !important; }
	.hero-info { font-size: 0.85rem !important; }
	.hero-actions {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
		padding: 20px 16px 24px !important;
		margin: 0 !important;
		background: transparent !important;
	}
	.hero-actions .btn-primary,
	.hero-actions .btn-discord {
		width: 100% !important;
		box-sizing: border-box !important;
		text-align: center !important;
		justify-content: center !important;
		padding: 14px 20px !important;
	}
	/* Supprime le bandeau clair sous le hero : la section suivante démarre collée */
	.featured-games-section { margin-top: 0 !important; padding-top: 30px !important; }

	.features-container {
		display: flex !important;
		flex-direction: column !important;
		gap: 12px !important;
	}
	.feature-card { padding: 14px !important; }

	.stats-bar-section { padding: 20px 0 !important; }
	.stat-card { min-width: 140px !important; padding: 14px 18px !important; }
	.stat-value { font-size: 1.15rem !important; }
	.stat-label { font-size: 0.65rem !important; }
}

/* =====================================================================
   SECTIONS jeux + reviews
   ===================================================================== */
@media (max-width: 768px) {
	.featured-games-section,
	.reviews-section {
		padding: 40px 16px !important;
		margin: 30px auto !important;
	}
	.section-title { font-size: 1.4rem !important; }
	.section-subtitle { font-size: 0.85rem !important; margin-bottom: 24px !important; }

	.games-grid {
		grid-template-columns: 1fr !important;
		gap: 14px !important;
	}
	.game-card {
		padding: 20px 18px !important;
	}
	.game-card h3 { font-size: 1.4rem !important; }
	.game-card p { font-size: 0.88rem !important; }
	.game-card-img { width: 40px !important; height: 40px !important; }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
@media (max-width: 768px) {
	.site-footer,
	footer {
		padding: 30px 16px 20px !important;
	}
	.footer-grid,
	.footer-cols {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
		text-align: left !important;
	}
	.footer-bottom {
		flex-direction: column !important;
		gap: 10px !important;
		text-align: center !important;
	}
}

/* =====================================================================
   OFFRES page — sidebar catégories + cartes plans
   ===================================================================== */
@media (max-width: 768px) {
	.offres-container,
	.offres-page {
		flex-direction: column !important;
		padding: 16px !important;
		gap: 16px !important;
	}
	.offres-sidebar,
	.offres-menu {
		width: 100% !important;
		position: static !important;
		max-height: none !important;
	}
	.offres-content,
	.offres-plans {
		width: 100% !important;
		padding: 0 !important;
	}
	.offres-header { padding: 16px !important; }
	.offres-plans .plan-block,
	.plan-card,
	.card-offre {
		padding: 18px !important;
	}
}

/* =====================================================================
   DASHBOARD / ADMIN — sidebar devient drawer
   ===================================================================== */
@media (max-width: 900px) {
	.dashboard-container,
	.admin-dashboard-container {
		flex-direction: column !important;
		padding: 12px !important;
		gap: 12px !important;
	}
	.sidebar,
	.admin-sidebar {
		position: fixed !important;
		top: 0 !important; left: 0 !important;
		width: 84vw !important;
		max-width: 320px !important;
		height: 100vh !important;
		border-radius: 0 !important;
		z-index: 1000 !important;
		transform: translateX(-100%);
		transition: transform 0.28s;
		overflow-y: auto !important;
	}
	body.fh-menu-open .sidebar,
	body.fh-menu-open .admin-sidebar { transform: translateX(0); }

	.dashboard-main,
	.admin-main {
		width: 100% !important;
		padding: 12px !important;
	}
	.dashboard-header,
	.admin-topbar {
		flex-wrap: wrap !important;
		gap: 8px !important;
		padding: 12px !important;
	}
}

/* =====================================================================
   PANIER / CHECKOUT / AUTH — largeur pleine sur mobile
   ===================================================================== */
@media (max-width: 768px) {
	.auth-card, .panier-card, .checkout-card, .form-card {
		width: 100% !important;
		max-width: 100% !important;
		padding: 22px 18px !important;
		box-sizing: border-box !important;
	}
	.auth-page, .panier-page, .checkout-page {
		padding: 16px !important;
	}
	.row { grid-template-columns: 1fr !important; }
	input, select, textarea, button, .btn-submit { font-size: 16px !important; }
}

/* =====================================================================
   Ticker / stats horizontal — pause propre sur mobile
   ===================================================================== */
@media (max-width: 768px) {
	.stats-ticker-track { animation-duration: 24s !important; }
}

/* =====================================================================
   FLOATING BUTTONS (theme toggle) — évite chevauchement
   ===================================================================== */
@media (max-width: 768px) {
	#fh-theme-toggle {
		bottom: 16px !important;
		right: 16px !important;
		width: 44px !important;
		height: 44px !important;
	}
}