@charset "UTF-8";
/* =========================================================================
   Mathovore - feuille de style des blocs maison.
   Chargée par /include/maillage-chapitre.php et /include/bandeau-app.php.
   Toutes les classes sont préfixées "mv-" : aucune classe existante du
   thème n'est redéfinie ici.
   ========================================================================= */

.mv-maillage,
.mv-appban {
	--mv-encre: #262e4d;
	--mv-encre-douce: #5b6486;
	--mv-fonce: #36426b;
	--mv-clair: #4b5a94;
	--mv-accent: #bf1f50;
	--mv-degrade: linear-gradient(135deg, #36426b 0%, #4b5a94 100%);
	--mv-bordure: #e7eaf5;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	box-sizing: border-box;
}

.mv-maillage *,
.mv-appban * {
	box-sizing: inherit;
}

.mv-maillage[hidden],
.mv-appban[hidden] {
	display: none !important;
}

/* -------------------------------------------------------------------------
   Bloc de maillage "Pour réviser en ..."
   ------------------------------------------------------------------------- */

.mv-maillage {
	position: relative;
	overflow: hidden;
	margin: 40px 0;
	padding: 30px 28px 28px;
	border: 0;
	border-radius: 24px;
	background: var(--mv-degrade);
	box-shadow: 0 24px 48px -28px rgba(54, 66, 107, 0.6);
}

/* Rail coloré : reprend, dans l'ordre, les cinq familles de ressources. */
.mv-maillage::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, #6366f1 0%, #0ea5e9 26%, #f59e0b 52%, #10b981 76%, #bf1f50 100%);
}

/* Halo décoratif, très discret, pour casser le fond plat. */
.mv-maillage::after {
	content: "";
	position: absolute;
	top: -120px;
	right: -90px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 70%);
	pointer-events: none;
}

.mv-maillage > * {
	position: relative;
	z-index: 1;
}

.mv-maillage-titre {
	margin: 0;
	font-size: 25px;
	font-weight: 750;
	line-height: 1.22;
	letter-spacing: -0.4px;
	color: #fff;
}

.mv-maillage-chapo {
	margin: 10px 0 24px;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.85);
}

.mv-maillage-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
	gap: 14px;
}

.mv-maillage-carte {
	--mv-tuile: var(--mv-degrade);
	--mv-teinte: #6366f1;
	--mv-voile: rgba(99, 102, 241, 0.07);

	display: flex;
	align-items: center;
	gap: 15px;
	padding: 16px 18px;
	border: 1px solid var(--mv-bordure);
	border-radius: 18px;
	background: #fff;
	text-decoration: none;
	color: var(--mv-encre);
	box-shadow: 0 1px 2px rgba(38, 46, 77, 0.04);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease;
}

.mv-maillage-carte:hover,
.mv-maillage-carte:focus-visible {
	transform: translateY(-4px);
	border-color: var(--mv-teinte);
	background: var(--mv-voile);
	box-shadow: 0 18px 32px -18px var(--mv-teinte);
	text-decoration: none;
	color: var(--mv-encre);
}

.mv-maillage-icone {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 15px;
	background: var(--mv-tuile);
	font-size: 21px;
	line-height: 1;
	box-shadow: 0 8px 16px -8px var(--mv-teinte);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-maillage-carte:hover .mv-maillage-icone {
	transform: scale(1.07) rotate(-4deg);
}

.mv-maillage-texte {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mv-maillage-surtitre {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--mv-teinte);
}

.mv-maillage-libelle {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.34;
	color: var(--mv-encre);
}

.mv-maillage-fleche {
	flex: 0 0 auto;
	font-size: 17px;
	color: #b9c0d8;
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), color 0.28s ease;
}

.mv-maillage-carte:hover .mv-maillage-fleche {
	transform: translateX(4px);
	color: var(--mv-teinte);
}

/* Une couleur par famille de ressource. */
.mv-maillage-carte--cours {
	--mv-tuile: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
	--mv-teinte: #6366f1;
	--mv-voile: rgba(99, 102, 241, 0.07);
}

.mv-maillage-carte--exos {
	--mv-tuile: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
	--mv-teinte: #0284c7;
	--mv-voile: rgba(14, 165, 233, 0.07);
}

.mv-maillage-carte--qcm {
	--mv-tuile: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
	--mv-teinte: #d97706;
	--mv-voile: rgba(245, 158, 11, 0.09);
}

.mv-maillage-carte--calcul {
	--mv-tuile: linear-gradient(135deg, #10b981 0%, #059669 100%);
	--mv-teinte: #059669;
	--mv-voile: rgba(16, 185, 129, 0.08);
}

.mv-maillage-carte--escape {
	--mv-tuile: linear-gradient(135deg, #bf1f50 0%, #e11d63 100%);
	--mv-teinte: #bf1f50;
	--mv-voile: rgba(191, 31, 80, 0.07);
}

@media (max-width: 600px) {
	.mv-maillage {
		margin: 30px 0;
		padding: 24px 18px 22px;
		border-radius: 18px;
	}

	.mv-maillage-titre {
		font-size: 21px;
	}

	.mv-maillage-chapo {
		margin-bottom: 18px;
		font-size: 14px;
	}

	.mv-maillage-grille {
		grid-template-columns: 1fr;
		gap: 11px;
	}

	.mv-maillage-carte {
		padding: 14px 15px;
		border-radius: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mv-maillage-carte,
	.mv-maillage-icone,
	.mv-maillage-fleche {
		transition: none;
	}

	.mv-maillage-carte:hover {
		transform: none;
	}

	.mv-maillage-carte:hover .mv-maillage-icone {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   Bandeau "Application Mathovore gratuite"
   ------------------------------------------------------------------------- */

.mv-appban {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--mv-degrade);
	color: #fff;
}

/* Lueur colorée dans l'angle, côté bouton. */
.mv-appban::before {
	content: "";
	position: absolute;
	top: -60%;
	right: -10%;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(191, 31, 80, 0.45) 0%, rgba(191, 31, 80, 0) 68%);
	pointer-events: none;
}

.mv-appban > * {
	position: relative;
	z-index: 1;
}

.mv-appban-icone {
	flex: 0 0 auto;
	display: block;
	width: 56px;
	height: 56px;
	padding: 5px;
	border-radius: 16px;
	background: #fff;
	object-fit: contain;
	box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.55);
}

/* Imagify remplace l'<img> par un <picture> et lui transmet la classe :
   on contraint donc aussi l'image qu'il place à l'intérieur. */
.mv-appban-icone img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mv-appban-texte {
	flex: 1 1 auto;
	min-width: 0;
}

.mv-appban-titre {
	margin: 0;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.2px;
	color: #fff;
}

.mv-appban-sous-titre {
	margin: 3px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.82);
}

.mv-appban-bouton {
	flex: 0 0 auto;
	display: inline-block;
	padding: 12px 26px;
	border-radius: 999px;
	background: linear-gradient(135deg, #bf1f50 0%, #e11d63 100%);
	color: #fff;
	font-size: 15px;
	font-weight: 650;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 10px 22px -10px rgba(191, 31, 80, 0.95);
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, filter 0.25s ease;
}

.mv-appban-bouton:hover,
.mv-appban-bouton:focus-visible {
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow: 0 16px 28px -12px rgba(191, 31, 80, 1);
	color: #fff;
	text-decoration: none;
}

.mv-appban--inline {
	margin: 32px 0;
	padding: 22px 24px;
	border-radius: 22px;
	box-shadow: 0 24px 44px -28px rgba(54, 66, 107, 0.75);
}

/* -------------------------------------------------------------------------
   Bandeau fin, fixé tout en haut du site, sur toutes les largeurs d'écran.
   ------------------------------------------------------------------------- */

.mv-appban--haut {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	/* Marge à droite réservée à la croix, marge haute pour l'encoche. */
	padding: calc(7px + env(safe-area-inset-top, 0px)) 46px 7px 14px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

/* La page descend de la hauteur exacte du bandeau, mesurée en JS. */
.mv-appban-ouvert body {
	padding-top: var(--mv-appban-h, 46px);
}

/* Lueur resserrée : le halo de la version inline est trop large ici. */
.mv-appban--haut::before {
	top: -200%;
	right: 4%;
	width: 220px;
	height: 220px;
}

.mv-appban--haut .mv-appban-icone {
	width: 30px;
	height: 30px;
	padding: 3px;
	border-radius: 9px;
	box-shadow: none;
}

.mv-appban--haut .mv-appban-fermer {
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	font-size: 17px;
}

.mv-appban--haut .mv-appban-titre {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.mv-appban--haut .mv-appban-bouton {
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0 6px 14px -8px rgba(191, 31, 80, 0.95);
}

/* Croix en haut à droite du bandeau. */
.mv-appban-fermer {
	position: absolute;
	top: 6px;
	right: 8px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.25s ease;
}

.mv-appban-fermer:hover,
.mv-appban-fermer:focus-visible {
	background: rgba(255, 255, 255, 0.32);
}

@media (max-width: 560px) {
	.mv-appban--haut {
		gap: 9px;
		padding-left: 10px;
		padding-right: 40px;
	}

	.mv-appban--haut .mv-appban-titre {
		font-size: 13px;
	}

	.mv-appban--haut .mv-appban-bouton {
		padding: 6px 13px;
		font-size: 12.5px;
	}
}

@media (max-width: 480px) {
	.mv-appban--inline {
		flex-wrap: wrap;
		padding: 18px;
	}

	.mv-appban--inline .mv-appban-bouton {
		width: 100%;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mv-appban-bouton {
		transition: none;
	}

	.mv-appban-bouton:hover {
		transform: none;
	}
}