/* ==========================================================
   Community LMS — thème marketing (page d'accueil)
   Clair par défaut ; le sombre est réservé au hero et au
   footer uniquement (jamais aux écrans applicatifs).
   Les tokens réels vivent dans design-system.css.
   ========================================================== */

body { margin: 0 !important; padding: 0 !important; }
* { box-sizing: border-box; }
a { -webkit-tap-highlight-color: transparent; }

/* --- Navigation : claire, cohérente avec le reste de l'app --- */

.cl-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--community-border);
	font-family: var(--community-font-sans);
}

.cl-nav__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
}

.cl-logo {
	font-weight: 700 !important;
	font-size: 17px;
	color: var(--community-text) !important;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	letter-spacing: -.01em;
}
.cl-logo__mark { font-family: var(--community-font-mono); color: var(--community-primary); font-weight: 700; }

.cl-nav__links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.cl-nav__links a { color: var(--community-text-muted) !important; text-decoration: none; transition: color .15s ease; }
.cl-nav__links a:hover { color: var(--community-text) !important; }

.cl-nav__cta {
	background: var(--community-primary);
	color: #fff !important;
	font-weight: 600;
	font-size: 13.5px;
	padding: 8px 16px;
	border-radius: var(--community-radius-sm);
	text-decoration: none;
	transition: background .15s ease;
	white-space: nowrap;
}
.cl-nav__cta:hover { background: var(--community-primary-dark); }

.cl-nav__login { font-size: 13.5px; color: var(--community-text-muted) !important; text-decoration: none; white-space: nowrap; }
.cl-nav__login:hover { color: var(--community-text) !important; }

.cl-nav__bell { position: relative; font-size: 18px; text-decoration: none; display: inline-flex; align-items: center; }
.cl-nav__bell-badge {
	position: absolute; top: -6px; right: -8px;
	background: #dc2626; color: #fff; font-size: 10px; font-weight: 700;
	min-width: 16px; height: 16px; border-radius: 999px;
	display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

.cl-nav__burger { display: none; }
.cl-nav__burger summary { list-style: none; cursor: pointer; color: var(--community-text); font-size: 22px; line-height: 1; }
.cl-nav__burger summary::-webkit-details-marker { display: none; }
.cl-nav__burger-menu {
	position: absolute;
	right: 20px;
	top: 58px;
	width: 200px;
	background: var(--community-surface);
	border: 1px solid var(--community-border);
	border-radius: var(--community-radius-md);
	box-shadow: var(--community-shadow-md);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 14px;
}
.cl-nav__burger-menu a { color: var(--community-text) !important; text-decoration: none; }

@media (max-width: 860px) {
	.cl-nav__links { display: none; }
	.cl-nav__burger { display: block; position: relative; }
	.cl-nav__login { display: none; }
}

/* --- Boutons marketing (alias visuel du design system, mêmes proportions compactes) --- */

.cl-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--community-font-sans);
	font-weight: 600;
	font-size: 14.5px;
	padding: 10px 20px;
	border-radius: var(--community-radius-sm);
	text-decoration: none;
	transition: all .15s ease;
	border: 1px solid transparent;
}
.cl-btn--primary { background: var(--community-primary); color: #fff !important; }
.cl-btn--primary:hover { background: var(--community-primary-dark); }
.cl-btn--ghost { border-color: var(--community-border); color: var(--community-text) !important; }
.cl-btn--ghost:hover { border-color: var(--community-primary); color: var(--community-primary-dark) !important; }

/* --- Les styles spécifiques à la page d'accueil (hero, domaines, formations,
   méthode, défis, gamification, communauté, ressources, formules, CTA) vivent
   désormais dans assets/css/front-page.css, chargé uniquement sur cette page
   pour ne pas alourdir le reste du site (voir cl_enqueue_assets()). --- */

.cl-home { font-family: var(--community-font-sans); color: var(--community-text); }

/* --- Footer : sombre (zone marketing autorisée) --- */

.cl-foot { background: var(--community-bg-dark); color: #E2E8F0; font-family: var(--community-font-sans); padding: 52px 20px 24px; }
.cl-foot__inner { max-width: 1200px; margin: 0 auto; }
.cl-foot__top { display: flex; flex-wrap: wrap; gap: 36px; justify-content: space-between; padding-bottom: 36px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.cl-foot__brand { flex: 1 1 260px; max-width: 320px; }
.cl-foot__logo { font-weight: 700 !important; font-size: 17px; color: #F8FAFC !important; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.cl-foot__tag { margin: 12px 0 0; font-size: 13px; color: #94A3B8 !important; line-height: 1.6; }
.cl-foot__col { min-width: 140px; }
.cl-foot__colhead { font-size: 12px; color: #94A3B8; margin-bottom: 12px; font-weight: 600; }
.cl-foot__col a { display: block; font-size: 13.5px; color: #CBD5E1 !important; text-decoration: none; margin-bottom: 9px; }
.cl-foot__col a:hover { color: #5EEAD4 !important; }
.cl-foot__bottom { padding-top: 20px; }
.cl-foot__copy { font-size: 12px; color: #64748B; margin: 0; }

@media (max-width: 700px) { .cl-foot__top { flex-direction: column; gap: 26px; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }