/*
Theme Name: Extendable Child
Template: extendable
Description: Child theme d'Extendable pour les personnalisations du site.
Version: 1.7.0
Text Domain: extendable-child
*/

/*
 * Le template page.html du theme enveloppe le contenu dans wp:post-content
 * avec layout:inherit, qui impose une largeur max a tout ce qui n'est pas
 * marque alignfull. Elementor ne connait pas cette convention de theme de
 * blocs : son reglage interne "Full Width" ne peut donc pas s'appliquer.
 * On neutralise cette contrainte uniquement sur les pages construites en
 * Elementor, en laissant les sections internes "boxed" se centrer normalement.
 */
body.elementor-page .wp-block-post-content > .elementor {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/*
 * Montee en gamme visuelle — etape 1 (CSS uniquement, sans toucher a la
 * structure Elementor) : respiration entre sections, hierarchie typographique,
 * micro-interactions sur les boutons/liens.
 */

/* Respiration generale entre sections (surcharge le padding par-section
   deja defini dans Elementor, qui a sinon la priorite) */
body.elementor-page .elementor-section:not(:first-child) {
	padding-top: clamp(72px, 9vw, 140px) !important;
	padding-bottom: clamp(72px, 9vw, 140px) !important;
}

/* Hierarchie typographique plus marquee */
body.elementor-page .elementor-widget-heading h1.elementor-heading-title {
	font-size: clamp(2.75rem, 5vw, 4.25rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
}
body.elementor-page .elementor-widget-heading h2.elementor-heading-title {
	font-size: clamp(1.875rem, 3.2vw, 2.75rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
}
body.elementor-page .elementor-widget-heading h3.elementor-heading-title {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.3;
}
body.elementor-page .elementor-widget-text-editor p {
	font-size: 1.125rem;
	line-height: 1.75;
	max-width: 65ch;
}
body.elementor-page .elementor-widget-text-editor {
	margin-left: auto;
	margin-right: auto;
}

/* Micro-interactions : boutons et liens */
body.elementor-page .elementor-button {
	transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease, filter 0.25s ease;
}
body.elementor-page .elementor-button:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(12, 68, 124, 0.22);
	filter: brightness(1.05);
}
body.elementor-page .elementor-button:active {
	transform: translateY(-1px);
}

/*
 * Montee en gamme visuelle — etape 2 : cartes (formations), alignements,
 * micro-interactions supplementaires, sans photo hero (dégradé conservé).
 */

/* Cartes de formation : look plus premium (ombre, coins arrondis, hover) */
body.elementor-page .elementor-widget-image {
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body.elementor-page .elementor-widget-image:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(12, 68, 124, 0.15);
}
body.elementor-page .elementor-widget-image img {
	display: block;
	border-radius: 12px;
}

/* Alignement/lecture : centrer et limiter la largeur des sections de texte */
body.elementor-page .elementor-section .elementor-container {
	align-items: center;
}

/* Liens texte (ex: "Plus d'information" en style lien) : soulignement anime */
body.elementor-page .elementor-widget-text-editor a:not(.elementor-button) {
	position: relative;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	transition: background-size 0.3s ease;
}
body.elementor-page .elementor-widget-text-editor a:not(.elementor-button):hover {
	background-size: 100% 1px;
}

/* Rythme vertical interne coherent entre les widgets d'une meme colonne */
body.elementor-page .elementor-widget:not(:last-child) {
	margin-bottom: 0.25em;
}

/*
 * Habillage aux couleurs TSC de la page de lecture Tutor LMS.
 *
 * CORRECTIF IMPORTANT (v1.5) : la version precedente de ce bloc ciblait des
 * classes lues dans templates/single/lesson/*.php (--tutor-color-primary,
 * .tutor-nav-link, .tutor-course-topic-single-header, .tutor-progress-value...).
 * Verification faite sur le HTML reellement rendu (recupere via une requete
 * authentifiee avec le compte test) : cette page utilise en fait un tout
 * autre systeme de gabarits, templates/learning-area/*.php (introduit en
 * Tutor 4.0, mode "Modern"), avec des classes et des variables CSS
 * completement differentes. Aucune des regles precedentes ne pouvait donc
 * jamais s'appliquer. Classes ci-dessous confirmees dans le HTML reel et/ou
 * le bundle JS (fonction getTabClass dans tutor-core.js).
 */

/* Lecteur video Plyr : variable officielle pour sa couleur d'accent
   (barre de progression, bouton play, boutons de controle actifs) */
.plyr {
	--plyr-color-main: #F2CE7C;
}

/* Bandeau du haut (tutor-learning-header) : titre du cours/leçon */
.tutor-learning-header-title {
	font-family: var(--wp--preset--font-family--fraunces, 'Fraunces', serif);
	font-weight: 600;
	color: #0C447C;
}

/* Onglets (Apercu / Q&R / Annonces) : classes confirmees via le JS
   (tutor-tabs-tab / tutor-tabs-tab-active), pas .tutor-nav-link */
.tutor-tabs-tab {
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #A5A5B5;
}
.tutor-tabs-tab-active,
.tutor-tabs-tab-active:hover,
.tutor-tabs-tab-active:focus {
	color: #185FA5 !important;
	background-color: rgba(24, 95, 165, 0.08) !important;
}
.tutor-tabs-tab-active svg {
	color: #185FA5 !important;
}

/* Barre de progression du cours : classe reelle .tutor-progress-bar-fill
   (et non .tutor-progress-value/.tutor-progress-filled, qui n'existent pas
   sur cette page) */
.tutor-progress-bar-fill {
	background-color: #F2CE7C !important;
}

/* Barre laterale du programme (tutor-learning-sidebar) */
.tutor-learning-sidebar {
	background: #fff;
}
.tutor-learning-nav-header-title {
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
}

/* Module/topic actif */
.tutor-learning-nav-topic.active:not(.expanded) {
	background-color: rgba(24, 95, 165, 0.08) !important;
}
.tutor-learning-nav-topic.active:not(.expanded) .tutor-learning-nav-header-title {
	color: #185FA5 !important;
	font-weight: 600;
}

/* Lecon/quiz actif dans la liste */
.tutor-learning-nav-item.active {
	background-color: rgba(24, 95, 165, 0.1) !important;
	color: #185FA5 !important;
}
.tutor-learning-nav-item.active svg {
	color: #185FA5 !important;
}

/* Bouton "Marquer comme complete" : seul bouton d'action present sur cette
   page (pas de bouton .tutor-btn-primary generique ici) — transforme en
   bouton plein pour jouer le role du CTA "Continuer" de la maquette */
.tutor-mark-as-complete-button {
	background-color: #185FA5 !important;
	color: #FFFFFF !important;
	padding: 10px 20px !important;
	border-radius: 10px !important;
}
.tutor-mark-as-complete-button:hover {
	background-color: #0C447C !important;
}

/* Bandeau degrade coherent entre la page de lecon et le tableau de bord */
.tutor-learning-header,
.tutor-dashboard-header {
	background: linear-gradient(135deg, #EAF1FA, #F1EEFB);
	padding: 20px 28px;
}

/*
 * Bandeau du tableau de bord : avatar + nom + pastille de progression.
 * Classes .tsc-header-avatar / .tsc-header-name / .tsc-header-progress-badge
 * injectees par tsc-dashboard-banner.php (bufferisation de sortie), classes
 * .tutor-dashboard-header* confirmees sur le vrai HTML authentifie.
 */
.tutor-dashboard-header-left {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}
.tsc-header-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, #185FA5, #534AB7);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--fraunces, 'Fraunces', serif);
	font-weight: 600;
	font-size: 1.1rem;
	flex-shrink: 0;
	order: -1;
}
.tsc-header-name {
	font-family: var(--wp--preset--font-family--fraunces, 'Fraunces', serif);
	font-weight: 600;
	font-size: 1.25rem;
	color: #1D1C24;
}
.tsc-header-progress-badge {
	font-family: var(--wp--preset--font-family--inter, Inter, sans-serif);
	font-size: 0.8rem;
	font-weight: 600;
	color: #4A4A55;
	background: #E9EAF0;
	padding: 4px 12px;
	border-radius: 999px;
	flex-basis: 100%;
	display: inline-block;
	width: fit-content;
}

/* Simplification du tableau de bord : masquer les 4 cartes de statistiques,
   garder la carte "Continuer d'apprendre" (.tutor-student-dashboard-courses) */
.tutor-student-dashboard-stats {
	display: none;
}

/*
 * Barre laterale du cours (page leçon/quiz) : le bloc avatar/nom/pastille
 * (injecte par tsc-sidebar-progress.php) remplace le "0% Completed" en
 * petit texte. On masque la barre fine grise existante pour ne garder
 * qu'un seul indicateur de progression, comme demande.
 */
.tutor-learning-progress-text.tsc-sidebar-progress {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 6px 0;
}
.tutor-learning-progress > .tutor-progress-bar {
	display: none;
}