/* ============================================================
   TMZ Centre — surcouche Tutor LMS
   Reprend les tokens du site vitrine (livrables/sites-web/tmz-centre-site).
   Etape 1 : page "liste des cours" (archive) + "fiche cours" (single).
   Ne touche a aucun fichier du plugin Tutor : uniquement du CSS charge
   par-dessus, pour survivre aux mises a jour du plugin.
   ============================================================ */

:root{
	/* Reprend les variables de theming natives de Tutor LMS : ca met a jour
	   la couleur "primaire" utilisee par la quasi-totalite du plugin. */
	--tutor-color-primary: var(--blue-ink,#1C3A74);
	--tutor-color-primary-hover: var(--blue-ink-deep,#15305F);
	--tutor-color-primary-rgb: 28, 58, 116;
	--tutor-color-secondary: #0F172A;

	/* Tokens TMZ pour les regles plus specifiques ci-dessous. */
	--tmz-navy: #0F172A;
	--tmz-blue: var(--blue-ink,#1C3A74);
	--tmz-blue-bright: var(--blue-ink,#1C3A74);
	--tmz-blue-bright-hover: var(--blue-ink-deep,#15305F);
	--tmz-blue-light: #93C5FD;
	--tmz-green: #179272;
	--tmz-green-hover: #0F7A5E;
	--tmz-text: #1E293B;
	--tmz-border: var(--line,rgba(15,23,42,.12));
	--tmz-surface: var(--mist,#F6F5F2);
}

/* --- Typographie --- */
body.tutor-full-view-modal,
.tutor-wrap,
.tutor-course-list-item,
.tutor-single-course-top,
.tutor-course-details-tab-item{
	font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

.tutor-course-name,
.tutor-course-title,
h1.tutor-course-title,
.tutor-fs-1, .tutor-fs-2, .tutor-fs-3{
	font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
	letter-spacing: -0.02em;
	color: var(--tmz-navy);
}

/* --- Boutons Tutor (enroll, start/continue learning, etc.) --- */
.tutor-btn.tutor-btn-outline-primary{
	border-color: var(--tmz-blue-bright);
	color: var(--tmz-blue-bright);
	border-radius: 10px;
	font-weight: 700;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}
.tutor-btn.tutor-btn-outline-primary:hover{
	background: var(--tmz-blue-bright);
	color: #FFFFFF;
	transform: translateY(-1px);
}
.tutor-btn.tutor-btn-primary,
button.tutor-btn.tutor-btn-primary{
	background: var(--tmz-blue-bright);
	border-color: var(--tmz-blue-bright);
	border-radius: 10px;
	font-weight: 700;
}
.tutor-btn.tutor-btn-primary:hover{
	background: var(--tmz-blue-bright-hover);
	border-color: var(--tmz-blue-bright-hover);
}

/* --- Liste des cours (page archive) --- */
.tutor-course-thumbnail img{
	border-radius: 14px 14px 0 0;
}
.tutor-card{
	border-radius: 14px;
	border: 1px solid var(--tmz-border);
	overflow: hidden;
	box-shadow: none;
	transition: transform .18s ease, box-shadow .18s ease;
}
.tutor-card:hover{
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
}
.tutor-course-price,
.tutor-course-price span,
.tutor-course-loop-price{
	color: var(--tmz-blue);
	font-weight: 800 !important;
}
.tutor-progress-circle{
	color: var(--tmz-blue-bright);
}

/* --- Fiche cours (page single) --- */

/* Masque la ligne d'etoiles tant qu'il n'y a aucun avis : 5 etoiles vides
   en haut de page fait "site vide", pas "site premium". Revient tout seul
   des qu'un premier avis existe (le bloc moyenne n'apparait qu'a ce moment). */
.tutor-ratings:not(:has(.tutor-ratings-average)){
	display: none !important;
}

/* Masque systematiquement le compteur d'inscrits (rassure moins qu'il
   n'inquiete un futur candidat tant que les effectifs sont faibles).
   A retirer manuellement le jour ou tu veux l'afficher.
   !important necessaire : Tutor force ".tutor-d-flex{display:flex!important}"
   sur ce meme <li>, donc une regle normale, meme plus specifique, perd. */
.tutor-card-footer li:has(.tutor-icon-mortarboard){
	display: none !important;
}

.tutor-card.tutor-sidebar-card{
	border-radius: 14px;
	border: 1px solid var(--tmz-border);
	box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}
.tutor-single-course-sidebar .tutor-btn.tutor-btn-primary,
.tutor-single-course-sidebar .tutor-btn.tutor-btn-outline-primary{
	width: 100%;
	padding-top: 14px;
	padding-bottom: 14px;
	font-size: 15px;
}

/* Vignette de cours sans image : visuel TMZ par defaut (symbole TMZ sur
   fond clair, bordure de la charte) a la place du cadre gris de Tutor.
   Deux markups selon la page : la liste des cours utilise un wrapper
   .tutor-ratio, la fiche cours utilise directement .tutor-course-thumbnail
   sans wrapper intermediaire. On couvre les deux. */
.tutor-course-thumbnail:has(img[src*="placeholder"]),
.tutor-course-thumb:has(img[src*="placeholder"]),
.tutor-ratio:has(img[src*="placeholder"]){
	background: url("tmz-logo-v2-symbole.svg") center / 24% auto no-repeat,
		linear-gradient(135deg, #FFFFFF, var(--tmz-surface)) !important;
	border: 1px solid var(--tmz-border);
	border-radius: 14px 14px 0 0;
	overflow: hidden;
}
.tutor-course-thumbnail:has(img[src*="placeholder"]) img,
.tutor-course-thumb:has(img[src*="placeholder"]) img,
.tutor-ratio:has(img[src*="placeholder"]) img{
	opacity: 0 !important;
}

/* Miniatures : toujours 16:9, recadrees proprement quelle que soit l'image
   envoyee (format recommande : 1280 x 720). */
.tutor-course-thumbnail,
.tutor-ratio{
	overflow: hidden;
}
.tutor-ratio img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tutor-course-thumbnail > img,
.tutor-course-thumbnail a > img{
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Mouvement leger : zoom doux de la miniature au survol, apparition
   echelonnee des cartes. Desactive si l'utilisateur reduit les animations. */
@media (prefers-reduced-motion: no-preference){
	.tutor-course-thumbnail img,
	.tutor-ratio img{
		transition: transform .45s cubic-bezier(.22, 1, .36, 1);
	}
	.tutor-card:hover .tutor-course-thumbnail img,
	.tutor-card:hover .tutor-ratio img{
		transform: scale(1.04);
	}
	@keyframes tmz-card-in{
		from{ opacity: 0; transform: translateY(14px); }
	}
	/* fill-mode "backwards" : l'etat final n'est pas fige, le survol (lift) reste actif. */
	body.post-type-archive-courses .tutor-card{
		animation: tmz-card-in .5s cubic-bezier(.22, 1, .36, 1) backwards;
	}
	body.post-type-archive-courses .tutor-card:nth-child(2){ animation-delay: .06s; }
	body.post-type-archive-courses .tutor-card:nth-child(3){ animation-delay: .12s; }
	body.post-type-archive-courses .tutor-card:nth-child(4){ animation-delay: .18s; }
	body.post-type-archive-courses .tutor-card:nth-child(n+5){ animation-delay: .24s; }
}
.tutor-course-price-list .tutor-course-price,
.tutor-single-course-top .tutor-course-price{
	color: var(--tmz-blue);
}
.tutor-progress-bar{
	background: var(--tmz-surface);
	border-radius: 999px;
	overflow: hidden;
}
.tutor-progress-bar .tutor-progress-value{
	background: var(--tmz-blue-bright);
}

/* Icones/etats de reussite (badges, succes) restent en vert TMZ. */
.tutor-color-success,
.tutor-badge-label.label-success{
	color: var(--tmz-green) !important;
}

/* --- Espace d'apprentissage (lecon, quiz) ---
   En-tete, sidebar et boutons du lecteur : voir learning-player.css
   (charge uniquement dans l'espace d'apprentissage). */

.tutor-lesson-content h1,
.tutor-lesson-content h2,
.tutor-lesson-content h3{
	font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
	color: var(--tmz-navy);
}
.tutor-lesson-video-wrapper{
	border-radius: 14px;
	overflow: hidden;
}
.tutor-mark-as-complete-button{
	background: var(--tmz-green);
	border-color: var(--tmz-green);
	border-radius: 10px;
	font-weight: 700;
}
.tutor-mark-as-complete-button:hover{
	background: var(--tmz-green-hover);
	border-color: var(--tmz-green-hover);
}

/* --- Quiz (QCM) --- */
.tutor-quiz-header,
.tutor-quiz-progress-header,
.tutor-quiz-intro-title,
.tutor-quiz-question-title{
	font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
	color: var(--tmz-navy);
}
.tutor-quiz-progress-bar-wrapper .tutor-progress-bar{
	background: var(--tmz-surface);
}
.tutor-quiz-question-wrapper-active{
	border-color: var(--tmz-blue-bright);
}

/* ============================================================
   Mode sombre de Tutor LMS 4 (constat du 2026-09-13)
   Tutor pose data-tutor-theme sur <html> pour un eleve connecte (tableau
   de bord, espace d'apprentissage) : "dark" s'il l'a choisi, "system" s'il
   suit le telephone. Tutor bascule alors ses propres couleurs ; on remplace
   ici les couleurs claires fixees plus haut, pour qu'aucun texte sombre ne
   reste sur fond sombre. Meme bloc pour "dark" et pour "system".
   ============================================================ */
[data-tutor-theme="dark"] .tutor-course-name,
[data-tutor-theme="dark"] .tutor-course-title,
[data-tutor-theme="dark"] h1.tutor-course-title,
[data-tutor-theme="dark"] .tutor-fs-1,
[data-tutor-theme="dark"] .tutor-fs-2,
[data-tutor-theme="dark"] .tutor-fs-3,
[data-tutor-theme="dark"] .tutor-lesson-content h1,
[data-tutor-theme="dark"] .tutor-lesson-content h2,
[data-tutor-theme="dark"] .tutor-lesson-content h3,
[data-tutor-theme="dark"] .tutor-quiz-header,
[data-tutor-theme="dark"] .tutor-quiz-progress-header,
[data-tutor-theme="dark"] .tutor-quiz-intro-title,
[data-tutor-theme="dark"] .tutor-quiz-question-title,
[data-tutor-theme="dark"] .tutor-learning-nav-topic .tutor-learning-nav-header-title{
	color: var(--tutor-text-primary);
}
[data-tutor-theme="dark"] .tutor-course-price,
[data-tutor-theme="dark"] .tutor-course-price span,
[data-tutor-theme="dark"] .tutor-course-loop-price,
[data-tutor-theme="dark"] .tutor-course-price-list .tutor-course-price,
[data-tutor-theme="dark"] .tutor-single-course-top .tutor-course-price{
	color: #93C5FD;
}
[data-tutor-theme="dark"] .tutor-card,
[data-tutor-theme="dark"] .tutor-card.tutor-sidebar-card{
	border-color: var(--tutor-border-idle);
}
[data-tutor-theme="dark"] .tutor-progress-bar,
[data-tutor-theme="dark"] .tutor-quiz-progress-bar-wrapper .tutor-progress-bar{
	background: var(--tutor-actions-gray-quaternary);
}
[data-tutor-theme="dark"] .tutor-learning-sidebar{
	border-color: var(--tutor-border-idle);
	background: var(--tutor-surface-base);
}
[data-tutor-theme="dark"] .tutor-btn.tutor-btn-outline-primary{
	border-color: #60A5FA;
	color: #93C5FD;
}

@media (prefers-color-scheme: dark){
	[data-tutor-theme="system"] .tutor-course-name,
	[data-tutor-theme="system"] .tutor-course-title,
	[data-tutor-theme="system"] h1.tutor-course-title,
	[data-tutor-theme="system"] .tutor-fs-1,
	[data-tutor-theme="system"] .tutor-fs-2,
	[data-tutor-theme="system"] .tutor-fs-3,
	[data-tutor-theme="system"] .tutor-lesson-content h1,
	[data-tutor-theme="system"] .tutor-lesson-content h2,
	[data-tutor-theme="system"] .tutor-lesson-content h3,
	[data-tutor-theme="system"] .tutor-quiz-header,
	[data-tutor-theme="system"] .tutor-quiz-progress-header,
	[data-tutor-theme="system"] .tutor-quiz-intro-title,
	[data-tutor-theme="system"] .tutor-quiz-question-title,
	[data-tutor-theme="system"] .tutor-learning-nav-topic .tutor-learning-nav-header-title{
		color: var(--tutor-text-primary);
	}
	[data-tutor-theme="system"] .tutor-course-price,
	[data-tutor-theme="system"] .tutor-course-price span,
	[data-tutor-theme="system"] .tutor-course-loop-price,
	[data-tutor-theme="system"] .tutor-course-price-list .tutor-course-price,
	[data-tutor-theme="system"] .tutor-single-course-top .tutor-course-price{
		color: #93C5FD;
	}
	[data-tutor-theme="system"] .tutor-card,
	[data-tutor-theme="system"] .tutor-card.tutor-sidebar-card{
		border-color: var(--tutor-border-idle);
	}
	[data-tutor-theme="system"] .tutor-progress-bar,
	[data-tutor-theme="system"] .tutor-quiz-progress-bar-wrapper .tutor-progress-bar{
		background: var(--tutor-actions-gray-quaternary);
	}
	[data-tutor-theme="system"] .tutor-learning-sidebar{
		border-color: var(--tutor-border-idle);
		background: var(--tutor-surface-base);
	}
	[data-tutor-theme="system"] .tutor-btn.tutor-btn-outline-primary{
		border-color: #60A5FA;
		color: #93C5FD;
	}
}