/* per-page styles for landingpage.php */
.landing-header {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: calc(var(--header-height, 72px) + 2.5rem) 1rem 3.5rem 1rem;
	/* Effet de flou comme le footer - permet de voir l'image de fond à travers */
	background: rgba(255, 255, 255, 0.7);
	border-radius: 12px;
	margin: 2rem auto;
	max-width: 1200px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px); /* Support Safari */
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	position: relative;
}
.landing-header h1 {
	margin: 0;
	max-width: 1100px;
	font-size: clamp(1.8rem, 3.5vw + 0.5rem, 3.5rem);
	line-height: 1.05;
	color: #1e293b;
	opacity: 1;
	font-weight: 700;
}
.landing-header .lead {
	margin: 0;
	max-width: 980px;
	font-size: 1.125rem;
	color: #475569;
	opacity: 0.95;
	font-weight: 500;
}
.mascotte-img {
	text-align: center;
	margin: 0 auto 1rem;
}
.mascotte-img img,
.mascotte-img svg { 
	border-radius: 50%; 
	object-fit: cover;
	display: block;
	width: 240px;
	height: 240px;
	margin: 0 auto;
}
.mascotte-img svg {
	background: transparent;
}
.reassurance-panel .section { flex:1 1 300px; min-width:300px; padding:40px; }
.reassurance-panel 
.reassurance-panel 
.features-list li { padding: 12px 0; border-bottom: 1px solid #f0f0f0; display:flex; align-items:flex-start; }
.features-list li .icon { margin-right: 12px; color: #3498db; font-size: 20px; min-width: 24px; }
.info-panel { background: rgba(255,255,255,0.1); padding: 1rem; border-radius: 10px; margin-top: 1rem; }
.btn-signup { display:inline-block; background: linear-gradient(135deg,#e67e22,#d35400); color: white; padding:14px 32px; border-radius:50px; text-decoration:none; font-weight:600; font-size:18px; margin-top:25px; transition:all 0.3s ease; box-shadow:0 4px 15px rgba(230,126,34,0.3); }
.btn-signup:hover { transform: translateY(-3px); }

/* parents/adventure section specifics */
.reassurance-panel .parents-section h2 { color: #3498db; font-size: 1.7em; margin-bottom: 20px; }
.reassurance-panel .parents-section .subtitle { font-size: 1.1em; margin-bottom: 15px; color: #555; }
.reassurance-panel 
.reassurance-panel .security-badge .badge-icon { font-size:24px; margin-right:12px; color:#3498db; }
.reassurance-panel .adventure-section h2 { color: #e67e22; font-size: 1.5em; margin-bottom: 20px; }
.reassurance-panel .adventure-section .subtitle { font-size: 1.1em; margin-bottom: 15px; color: #555; }
.reassurance-panel .adventure-section p { margin-top: 30px; }

.reassurance-panel .trusted-note { margin-top: 30px; }

/* Section infos avec cards - disposition horizontale */
.infos h2 { text-align: center; margin-bottom: 2rem; }
.infos .niveau-cards { 
	display: grid;
	grid-template-columns: 1fr 1fr; /* Deux colonnes comme l'existant */
	gap: 2rem; 
	max-width: 1200px; 
	margin: 0 auto; /* Centrage comme les sections au-dessus */
}
.infos .niveau-card { 
	width: 100%;
	transition: all 0.3s ease;
}

.infos .niveau-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
	background: rgba(255, 255, 255, 0.2);
}

/* Effet hover pour les cartes de la section intro (Collège+, Lycée+, BAC) */
.intro .niveau-card {
	transition: all 0.3s ease;
}

.intro .niveau-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
	background: rgba(255, 255, 255, 0.2);
}

/* Effet hover spécifique pour la carte "Sur le chemin du BAC" - texte en noir */
.intro .niveau-card.special:hover h3,
.intro .niveau-card.special:hover p,
.intro .niveau-card.special:hover li {
	color: #000 !important;
}

/* Effet hover pour les cartes de la section "Pourquoi MonCoachScolaire" */
.why-mcs .niveau-card {
	transition: all 0.3s ease;
}

.why-mcs .niveau-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
	background: rgba(255, 255, 255, 0.2);
}

/* Carte Protection - structure interne en colonnes */
.infos .protection-card {
	width: 100%;
	max-width: 100%;
}

/* Masquer les mascottes dans la section infos pour gagner de l'espace */
.infos .mascotte-img {
	display: none;
}

.infos .protection-header {
	text-align: center;
	margin-bottom: 2rem;
}
.infos .protection-header h3 {
	margin-bottom: 1rem;
	font-size: 1.5em;
}
.infos .protection-header .subtitle {
	display: block;
	margin: 0.5rem 0;
	font-size: 0.9em;
}
.infos .protection-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin-top: 2rem;
}
.infos .protection-column {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.infos .protection-item {
	padding: 1rem 0;
	border-bottom: 1px solid #f0f0f0;
}
.infos .protection-item:last-child {
	border-bottom: none;
}
.infos .protection-item strong {
	display: block;
	margin-bottom: 0.5rem;
	color: #333;
	font-size: 1em;
}
.infos .protection-item p {
	margin: 0;
	color: #666;
	line-height: 1.6;
	font-size: 0.9em;
}

.infos .niveau-card 
.infos .niveau-card 
.infos .niveau-card .trusted-note { margin-top: 1.5rem; }
.infos .niveau-card .trusted-note p { margin: 0.5rem 0; }

/* Responsive pour la section infos */
@media (max-width: 900px) {
	.infos .niveau-cards {
		grid-template-columns: 1fr; /* Une colonne en mobile comme l'existant */
	}
	.infos .protection-columns {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* Effet de flou pour les sections principales du main - avec espace entre les sections */
.landing-page main .intro,
.landing-page main .why-mcs,
.landing-page main .infos,
/* Section container - juste pour centrer la carte */
.demo-cta-section {
	margin: 3rem auto;
	max-width: 1200px;
	position: relative;
	z-index: 1;
	padding: 0 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Carte CTA Démo centrée */
.demo-cta-card {
	/* Effet de flou comme le header et footer */
	background: rgba(255, 255, 255, 0.7) !important;
	border-radius: 12px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px); /* Support Safari */
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	
	/* Centrage et dimensions */
	width: 100%;
	max-width: 600px;
	padding: 3rem 2rem;
	text-align: center;
}

/* Première section - pas de marge-top */
.landing-page main > .intro:first-of-type {
	margin-top: 2rem;
}

/* Dernière section - pas de marge-bottom excessive */
.landing-page main > section:last-of-type {
	margin-bottom: 2rem;
}

/* Conteneurs de sections pour centrer les titres - DOIT être avant les règles des h2 */
.landing-page main .intro,
.landing-page main .why-mcs,
.landing-page main .infos {
	text-align: center; /* Assure que le contenu des sections est centré */
}

.demo-cta-card {
	text-align: center; /* Assure que le contenu de la carte est centré */
}

/* S'assurer que les titres et textes sont bien lisibles */
.landing-page main .intro h2,
.landing-page main .why-mcs h2,
.landing-page main .infos h2 {
	color: #1e293b;
	opacity: 1;
	font-weight: 700;
	/* Effet de flou sur les titres de section */
	background: rgba(255, 255, 255, 0.7);
	border-radius: 8px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 1rem 2rem;
	/* Pour le centrage: utiliser block avec width fit-content et margin auto */
	display: block;
	width: fit-content;
	width: -moz-fit-content; /* Support Firefox */
	margin: 0 auto 2rem auto;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	text-align: center; /* Centre le texte à l'intérieur du titre */
}

/* Centrer spécifiquement le titre "Pourquoi choisir MonCoachScolaire ?" - règle renforcée */
.landing-page main .why-mcs h2,
.landing-page .why-mcs h2,
.why-mcs h2 {
	display: block !important;
	width: fit-content !important;
	width: -moz-fit-content !important; /* Support Firefox */
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
}

.landing-page main .intro p,
.landing-page main .why-mcs p,
.landing-page main .infos p {
	color: #475569;
	opacity: 0.95;
}

/* Styles spécifiques pour la carte CTA Démo */
.demo-cta-card {
	transition: all 0.3s ease;
}

.demo-cta-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
	background: rgba(255, 255, 255, 0.8) !important;
}

/* Effet hover sur le titre et texte de la carte Démo */
.demo-cta-card:hover h2 {
	color: #000 !important;
}

.demo-cta-card:hover p {
	color: #000 !important;
}

.demo-cta-card h2 {
	color: #1e293b !important;
	opacity: 1;
	font-weight: 700;
	font-size: 2rem;
	margin: 0 0 1rem 0;
	transition: color 0.3s ease;
}

.demo-cta-card p {
	color: #475569 !important;
	opacity: 0.95;
	font-size: 1.2rem;
	margin: 0 0 2rem 0;
	transition: color 0.3s ease;
}

.demo-cta-card:hover h2 {
	color: #000 !important;
}

.demo-cta-card:hover p {
	color: #000 !important;
}

.demo-cta-card .btn-demo {
	display: inline-block;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
	color: white !important;
	padding: 1rem 2rem;
	font-size: 1.1rem;
	text-decoration: none;
	border-radius: 8px;
	font-weight: 600;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.demo-cta-card .btn-demo:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* Centrer la carte pour les utilisateurs authentifiés */
.niveau-cards-authenticated {
	display: grid !important;
	grid-template-columns: 1fr 1fr 1fr !important;
	justify-items: center !important;
}

.niveau-cards-authenticated .niveau-card {
	grid-column: 2 !important;
	max-width: 350px;
	transition: all 0.3s ease;
}

.niveau-cards-authenticated .niveau-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
	background: rgba(255, 255, 255, 0.2);
}

/* Style spécifique pour l'admin : 3 colonnes avec toutes les cartes visibles */
.niveau-cards-admin {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 2rem !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	justify-items: stretch !important;
}

.niveau-cards-admin .niveau-card {
	grid-column: auto !important;
	max-width: 100% !important;
	width: 100% !important;
	transition: all 0.3s ease;
}

.niveau-cards-admin .niveau-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
	background: rgba(255, 255, 255, 0.2);
}

/* Responsive pour les utilisateurs authentifiés */
@media (max-width: 1200px) {
	.niveau-cards-authenticated {
		grid-template-columns: 1fr !important;
	}
	.niveau-cards-authenticated .niveau-card {
		grid-column: 1 !important;
	}
	
	/* Admin : passer à 2 colonnes sur tablettes */
	.niveau-cards-admin {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Responsive pour admin : 1 colonne sur mobile */
@media (max-width: 768px) {
	.niveau-cards-admin {
		grid-template-columns: 1fr !important;
	}
	
	/* MOBILE UNIQUEMENT : S'assurer que le contenu commence après la topbar fixe */
	body.landing-page {
		padding-top: calc(var(--header-height, 72px) + 0.5rem);
	}
	
	body.landing-page main {
		margin-top: 0;
		padding-top: 0;
	}
	
	/* Simplifier le padding de landing-header car body a déjà le padding-top */
	.landing-header {
		margin-top: 1rem;
		padding: 2rem 1rem 2.5rem 1rem;
	}
	
	.landing-header h1 {
		font-size: clamp(1.5rem, 5vw, 2.2rem);
	}
	
	.landing-header .lead {
		font-size: 1rem;
	}
}

@media (max-width: 480px) {
	/* MOBILE UNIQUEMENT : Sur très petits écrans, assurer l'espacement avec la topbar */
	body.landing-page {
		padding-top: calc(var(--header-height, 72px) + 1rem);
	}
	
	body.landing-page main {
		margin-top: 0;
		padding-top: 0;
	}
	
	.landing-header {
		padding: 1.5rem 0.75rem 2rem 0.75rem;
		margin-top: 0.5rem;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
	}
	
	.landing-header h1 {
		font-size: clamp(1.3rem, 6vw, 1.8rem);
	}
	
	.landing-header .lead {
		font-size: 0.95rem;
	}
}