/**
 * Styles front-end « profondeur moderne », pilotés par les variables de theming
 * injectées par DV_LMS_Theming (--dv-couleur-primaire[-claire], --dv-couleur-
 * secondaire[-claire|-foncee], --dv-police[-titres], --dv-fond/--dv-surface/--dv-texte/
 * --dv-bordure, --dv-succes, --dv-ombre-*). Aligné sur les maquettes validées
 * (Main / LeconAcademie / QuizAcademie), en réutilisant uniquement des données réelles
 * du plugin (pas de durée vidéo par ex. : non trackée, donc absente ici).
 *
 * @package DV_LMS
 */

/* ---------------------------------------------------------------- Coquille app (sans header/footer du thème) */

html:has( body.dv-lms-app ) {
	background: var( --dv-fond, #f4f1ea );
}

body.dv-lms-app {
	margin: 0 !important;
	background: var( --dv-fond, #f4f1ea );
	min-height: 100vh;
	position: relative;
	overflow-x: hidden;
}

.dv-lms-app__blob {
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	filter: blur( 10px );
	pointer-events: none;
}

.dv-lms-app__blob--1 {
	top: -160px;
	right: -120px;
	width: 520px;
	height: 520px;
	background: radial-gradient( circle, var( --dv-ombre-secondaire, rgba( 192, 138, 95, 0.35 ) ), transparent 70% );
}

.dv-lms-app__blob--2 {
	top: 340px;
	left: -160px;
	width: 420px;
	height: 420px;
	background: radial-gradient( circle, var( --dv-ombre-primaire, rgba( 22, 35, 58, 0.18 ) ), transparent 70% );
}

.dv-lms-app-header {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 48px;
	background: rgba( 20, 31, 50, 0.9 );
	backdrop-filter: blur( 14px );
	-webkit-backdrop-filter: blur( 14px );
	box-shadow: 0 4px 24px rgba( 10, 16, 26, 0.25 );
}

.dv-lms-app-header__brand {
	display: flex !important;
	align-items: center;
	font-family: var( --dv-police-titres, 'Zilla Slab', Georgia, serif ) !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
	color: #fff !important;
	text-decoration: none !important;
}

.dv-lms-app-header__brand img {
	max-height: 34px;
	width: auto;
	display: block;
}

.dv-lms-app-header__right {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}

/* Un élément « Bonjour, {prénom} + icône » (classe .amm-header-greeting) est injecté
   dans ce conteneur par un script/snippet du site (pas par dv-lms — introuvable dans
   les fichiers du thème/plugins, probablement un extrait de code en base). Demande de
   Florian (31/08/2026) : le masquer sur nos pages, il fait doublon avec « Mon compte »
   + l'avatar et son icône s'affichait mal (glyphe générique à la place d'un chevron).
   Depuis le 01/09/2026, ce même élément est aussi masqué PARTOUT sur le site (en-tête
   du thème compris) via DV_LMS_Frontend::masquer_bonjour_header_site() — la règle
   ci-dessous devient redondante sur nos pages mais reste sans effet ailleurs, on la
   garde par sécurité si ce fichier venait à charger sans ce hook. */
.dv-lms-app-header__right .amm-header-greeting {
	display: none !important;
}

.dv-lms-app-header__compte {
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	opacity: 0.9;
}

.dv-lms-app-header__compte:hover {
	opacity: 1;
	color: #fff !important;
}

.dv-lms-app-header__avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient( 155deg, var( --dv-couleur-secondaire-claire, #e7ac5c ), var( --dv-couleur-secondaire-foncee, #b87b2e ) );
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13.5px;
	box-shadow: var( --dv-ombre-secondaire, 0 10px 20px -8px rgba( 192, 138, 95, 0.6 ) );
	flex-shrink: 0;
}

.dv-lms-app__main {
	position: relative;
	z-index: 2;
	display: block;
}

.dv-lms-cours,
.dv-lms-module,
.dv-lms-quiz {
	--dv-r-vue: 1;
	box-sizing: border-box;
	font-family: var( --dv-police, 'Work Sans', system-ui, sans-serif );
	color: var( --dv-texte, #1c222b );
	max-width: 1160px;
	margin: 0 auto;
	padding: 40px 48px 72px;
}

.dv-lms-cours *,
.dv-lms-module *,
.dv-lms-quiz * {
	box-sizing: border-box;
}

.dv-lms-cours a,
.dv-lms-module a,
.dv-lms-quiz a {
	color: var( --dv-couleur-secondaire-foncee, #b87b2e );
	text-decoration: none;
}

.dv-lms-cours a:hover,
.dv-lms-module a:hover,
.dv-lms-quiz a:hover {
	color: var( --dv-couleur-secondaire, #c08a3e );
}

.dv-lms-titre-affichage {
	/* !important nécessaire : le thème (Hello Elementor + kit Elementor) impose un
	   style global cursif/script sur les h1/h2 nus, qui gagnait sinon sur cette règle
	   à spécificité égale (constaté le 01/09/2026 sur /mon-espace/ : "Mes formations"
	   s'affichait dans la police d'affichage du site marketing, pas Zilla Slab — même
	   piège de cascade Elementor documenté ailleurs dans ce fichier). */
	font-family: var( --dv-police-titres, 'Zilla Slab', Georgia, serif ) !important;
}

/* ---------------------------------------------------------------- Fil d'ariane */

.dv-lms-fil {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var( --dv-texte-att, #6b7280 );
	margin-bottom: 18px;
}

.dv-lms-fil a {
	color: var( --dv-texte-att, #6b7280 );
}

/* ---------------------------------------------------------------- Étiquettes */

.dv-lms-tag {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 100px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.dv-lms-tag--accent {
	background: linear-gradient( 155deg, var( --dv-couleur-secondaire-claire, #f3ddb0 ), var( --dv-couleur-secondaire, #e9c387 ) );
	color: var( --dv-couleur-secondaire-foncee, #7a5219 );
	box-shadow: 0 4px 10px -4px var( --dv-ombre-secondaire, rgba( 192, 138, 95, 0.5 ) );
}

.dv-lms-tag--succes {
	background: var( --dv-succes-fond, #e7f1eb );
	color: var( --dv-succes, #3d7a5c );
}

.dv-lms-tag--neutre {
	background: var( --dv-bordure, #e7e2d6 );
	color: var( --dv-texte-att, #6b7280 );
}

/* Suivi automatique de progression (dv-lms-suivi.js) : petit point qui pulse pour
   signaler qu'un vrai suivi est en cours (vidéo/audio/lecture), en attendant le
   signal qui bascule discrètement vers le tag « Terminé ✓ » sans rechargement. */
.dv-lms-tag--suivi {
	background: var( --dv-bordure, #e7e2d6 );
	color: var( --dv-texte-att, #6b7280 );
}

.dv-lms-tag--suivi::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var( --dv-couleur-secondaire, #e9c387 );
	margin-right: 6px;
	animation: dv-lms-pulse 1.6s ease-in-out infinite;
}

@keyframes dv-lms-pulse {
	0%, 100% { opacity: .35; transform: scale( .85 ); }
	50% { opacity: 1; transform: scale( 1 ); }
}

/* Le sélecteur natif [hidden] a la même spécificité que .dv-lms-tag { display: … }
   et perd face à lui selon l'ordre des règles : sans ce renfort, un tag masqué via
   l'attribut `hidden` (dv-lms-suivi.js) resterait visible. */
.dv-lms-barre-bas__centre [hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------- Boutons */

.dv-lms-bouton {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 13px 26px !important;
	border-radius: 10px !important;
	font-weight: 700 !important;
	font-size: 14.5px !important;
	line-height: normal !important;
	letter-spacing: 0.01em !important;
	cursor: pointer;
	border: 1px solid transparent !important;
	background: linear-gradient( 155deg, var( --dv-couleur-primaire-claire, #26385a ), var( --dv-couleur-primaire, #16233a ) ) !important;
	color: #fff !important;
	box-shadow: var( --dv-ombre-primaire, 0 18px 34px -14px rgba( 22, 35, 58, 0.45 ) ), inset 0 1px 0 rgba( 255, 255, 255, 0.12 ) !important;
	text-decoration: none !important;
	height: auto !important;
	width: auto;
}

.dv-lms-bouton:hover {
	filter: brightness( 1.05 );
	color: #fff;
}

.dv-lms-bouton--secondaire {
	background: linear-gradient( 155deg, var( --dv-couleur-secondaire-claire, #e7ac5c ), var( --dv-couleur-secondaire-foncee, #b87b2e ) ) !important;
	box-shadow: var( --dv-ombre-secondaire, 0 18px 34px -14px rgba( 192, 138, 95, 0.55 ) ), inset 0 1px 0 rgba( 255, 255, 255, 0.3 ) !important;
}

.dv-lms-bouton--fantome {
	background: rgba( 255, 255, 255, 0.7 ) !important;
	color: var( --dv-couleur-primaire, #16233a ) !important;
	border-color: var( --dv-bordure, #e7e2d6 ) !important;
	box-shadow: var( --dv-ombre-1, 0 1px 2px rgba( 15, 20, 30, 0.06 ) ) !important;
}

.dv-lms-bouton--fantome:hover {
	color: var( --dv-couleur-primaire, #16233a );
}

.dv-lms-bouton--pleine-largeur {
	width: 100%;
}

.dv-lms-bouton[disabled],
.dv-lms-bouton--desactive {
	opacity: 0.55;
	cursor: default;
	pointer-events: none;
}

/* ---------------------------------------------------------------- Cartes génériques */

.dv-lms-carte {
	background: var( --dv-surface, #fff );
	border: 1px solid rgba( 255, 255, 255, 0.9 );
	border-radius: 18px;
	box-shadow: var( --dv-ombre-2, 0 10px 24px -10px rgba( 15, 20, 30, 0.16 ) );
}

/* ---------------------------------------------------------------- Page cours */

.dv-lms-cours__entete {
	display: flex;
	overflow: hidden;
	box-shadow: var( --dv-ombre-3, 0 28px 60px -20px rgba( 15, 20, 30, 0.28 ) );
	margin-bottom: 34px;
}

.dv-lms-cours__visuel {
	position: relative;
	width: 260px;
	flex-shrink: 0;
	background: linear-gradient( 145deg, var( --dv-couleur-primaire, #16233a ), var( --dv-couleur-primaire-claire, #2e4468 ) 60%, var( --dv-couleur-secondaire-claire, #3e5a88 ) );
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.dv-lms-cours__visuel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dv-lms-cours__visuel-icone {
	position: relative;
	width: 82px;
	height: 82px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.1 );
	backdrop-filter: blur( 6px );
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 30px rgba( 0, 0, 0, 0.35 ), inset 0 1px 0 rgba( 255, 255, 255, 0.2 );
}

.dv-lms-cours__infos {
	flex: 1;
	padding: 30px 34px;
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.dv-lms-cours__tags {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.dv-lms-cours__titre {
	margin: 0 !important;
	font-size: 29px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: var( --dv-texte, #1c222b ) !important;
	font-family: var( --dv-police-titres, 'Zilla Slab', Georgia, serif ) !important;
}

.dv-lms-cours__resume {
	margin: 0;
	color: var( --dv-texte-att, #6b7280 );
	font-size: 15px;
	line-height: 1.55;
	max-width: 640px;
}

.dv-lms-cours__contenu {
	line-height: 1.75;
	font-size: 15.5px;
	margin-bottom: 30px;
}

/* Sous-titres éventuels À L'INTÉRIEUR du contenu WYSIWYG (cours/module) : certaines
   leçons migrées depuis LearnDash contiennent leurs propres blocs de titre (parfois
   un doublon du titre de la page). Le kit du thème stylait ces balises génériques en
   police script géante — on les remet à une échelle cohérente avec le reste du plugin. */
.dv-lms-cours__contenu h1, .dv-lms-cours__contenu h2, .dv-lms-cours__contenu h3, .dv-lms-cours__contenu h4,
.dv-lms-module__contenu h1, .dv-lms-module__contenu h2, .dv-lms-module__contenu h3, .dv-lms-module__contenu h4 {
	font-family: var( --dv-police-titres, 'Zilla Slab', Georgia, serif ) !important;
	color: var( --dv-texte, #1c222b ) !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	margin: 0 0 14px !important;
}
.dv-lms-cours__contenu h1, .dv-lms-module__contenu h1 { font-size: 24px !important; }
.dv-lms-cours__contenu h2, .dv-lms-module__contenu h2 { font-size: 20px !important; }
.dv-lms-cours__contenu h3, .dv-lms-module__contenu h3 { font-size: 17px !important; }
.dv-lms-cours__contenu h4, .dv-lms-module__contenu h4 { font-size: 15px !important; }

.dv-lms-cours__progres-ligne {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-top: 6px;
	flex-wrap: wrap;
}

.dv-lms-cours__progres-info {
	flex: 1;
	min-width: 220px;
	max-width: 320px;
}

.dv-lms-cours__acces-requis {
	background: var( --dv-surface, #fff );
	border: 1px solid var( --dv-bordure, #e7e2d6 );
	border-radius: 16px;
	padding: 26px 28px;
	margin-bottom: 30px;
	box-shadow: var( --dv-ombre-1, 0 1px 2px rgba( 15, 20, 30, 0.06 ) );
}

.dv-lms-cours__acces-requis p {
	margin: 0 0 14px;
	color: var( --dv-texte-att, #6b7280 );
}

.dv-lms-cours__corps {
	display: flex;
	gap: 28px;
	align-items: flex-start;
}

.dv-lms-cours__liste-col {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dv-lms-cours__liste-titre {
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	margin: 0 0 4px !important;
	color: var( --dv-texte, #1c222b ) !important;
	font-family: var( --dv-police-titres, 'Zilla Slab', Georgia, serif ) !important;
}

/* ---------------------------------------------------------------- Sidebar (cours + module) */

.dv-lms-sidebar {
	width: 290px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.dv-lms-anneau-carte {
	padding: 24px;
	text-align: center;
	box-shadow: var( --dv-ombre-2, 0 10px 24px -10px rgba( 15, 20, 30, 0.16 ) );
}

.dv-lms-anneau {
	position: relative;
	width: 112px;
	height: 112px;
	margin: 0 auto 14px;
	filter: drop-shadow( 0 6px 14px var( --dv-ombre-secondaire, rgba( 192, 138, 95, 0.45 ) ) );
}

.dv-lms-anneau-valeur {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 22px;
}

.dv-lms-anneau-legende {
	font-size: 13px;
	color: var( --dv-texte-att, #6b7280 );
}

.dv-lms-prochaine-etape {
	position: relative;
	border-radius: 18px;
	padding: 22px;
	color: #fff;
	background: linear-gradient( 155deg, var( --dv-couleur-primaire-claire, #233a5c ), var( --dv-couleur-primaire, #16233a ) 65% );
	box-shadow: var( --dv-ombre-primaire, 0 18px 34px -14px rgba( 22, 35, 58, 0.45 ) ), var( --dv-ombre-2, 0 10px 24px -10px rgba( 15, 20, 30, 0.16 ) );
	overflow: hidden;
}

.dv-lms-prochaine-etape::before {
	content: '';
	position: absolute;
	top: -40px;
	right: -30px;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: radial-gradient( circle, var( --dv-ombre-secondaire, rgba( 192, 138, 95, 0.35 ) ), transparent 70% );
}

.dv-lms-prochaine-etape__label {
	position: relative;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --dv-couleur-secondaire, #d79a46 );
	font-weight: 700;
	margin-bottom: 9px;
}

.dv-lms-prochaine-etape__titre {
	position: relative;
	font-weight: 600;
	font-size: 14.5px;
	margin-bottom: 16px;
}

.dv-lms-info-carte {
	padding: 18px 20px;
	font-size: 13px;
	color: var( --dv-texte-att, #6b7280 );
	line-height: 1.6;
	box-shadow: var( --dv-ombre-1, 0 1px 2px rgba( 15, 20, 30, 0.06 ) );
}

/* ---------------------------------------------------------------- Liste de modules */

.dv-lms-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 18px;
	box-shadow: var( --dv-ombre-1, 0 1px 2px rgba( 15, 20, 30, 0.06 ) );
	border-radius: 18px;
}

.dv-lms-item--chapitre {
	margin-left: 26px;
}

.dv-lms-item__puce {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: var( --dv-bordure, #e7e2d6 );
}

.dv-lms-item__corps {
	flex: 1;
	min-width: 0;
}

.dv-lms-item__titre {
	font-weight: 600;
	font-size: 14.5px;
}

.dv-lms-item__meta {
	font-size: 12.5px;
	color: var( --dv-texte-att, #6b7280 );
	margin-top: 2px;
}

.dv-lms-item--termine .dv-lms-item__puce {
	background: var( --dv-succes, #3d7a5c );
	box-shadow: 0 4px 10px -3px rgba( 61, 122, 92, 0.6 );
}

.dv-lms-item--verrouille {
	opacity: 0.68;
}

.dv-lms-item--verrouille .dv-lms-item__puce {
	background: #efeae1;
}

.dv-lms-item--courant {
	position: relative;
	background: linear-gradient( 120deg, #fffdf8, var( --dv-couleur-secondaire-tres-claire, #fcf2e0 ) );
	border: 1px solid var( --dv-couleur-secondaire, rgba( 192, 138, 95, 0.4 ) );
	box-shadow: 0 16px 32px -14px var( --dv-ombre-secondaire, rgba( 192, 138, 95, 0.45 ) ), var( --dv-ombre-1, 0 1px 2px rgba( 15, 20, 30, 0.06 ) );
}

.dv-lms-item--courant .dv-lms-item__puce {
	background: linear-gradient( 155deg, var( --dv-couleur-secondaire-claire, #e7ac5c ), var( --dv-couleur-secondaire-foncee, #b87b2e ) );
	box-shadow: var( --dv-ombre-secondaire, 0 18px 34px -14px rgba( 192, 138, 95, 0.55 ) );
}

.dv-lms-item--courant .dv-lms-item__meta {
	color: var( --dv-couleur-secondaire-foncee, #b87b2e );
	font-weight: 700;
}

.dv-lms-item--quiz .dv-lms-item__puce {
	background: transparent;
}

.dv-lms-item a.dv-lms-item__lien {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
	min-width: 0;
	color: inherit;
}

.dv-lms-item span.dv-lms-item__lien {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
	min-width: 0;
}

/* ---------------------------------------------------------------- Barre de progression */

.dv-lms-barre-legende {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: var( --dv-texte-att, #6b7280 );
	margin-bottom: 7px;
}

.dv-lms-barre-legende strong {
	color: var( --dv-texte, #1c222b );
}

.dv-lms-progress-track {
	height: 9px;
	border-radius: 100px;
	background: var( --dv-bordure, #e7e2d6 );
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.06 );
}

.dv-lms-progress-fill {
	height: 100%;
	border-radius: 100px;
	background: linear-gradient( 90deg, var( --dv-couleur-secondaire-claire, #e7ac5c ), var( --dv-couleur-secondaire-foncee, #b87b2e ) );
	box-shadow: 0 0 10px var( --dv-ombre-secondaire, rgba( 192, 138, 95, 0.6 ) );
}

/* ---------------------------------------------------------------- Types de contenu (03/09/2026)
Teinte de la puce selon vidéo / exercice (ni vidéo ni audio) / podcast (audio) /
quiz -- demande de Florian, « des icon pour les différencier ». Toujours en dessous,
en spécificité CSS, des règles d'état .dv-lms-item--termine/--verrouille/--courant
.dv-lms-item__puce ci-dessus (2 classes) qui restent prioritaires : le type ne
s'applique que sur une étape pas encore commencée. */
.dv-lms-item__puce--video {
	background: #eef1f7;
	color: var( --dv-couleur-primaire, #1b2a41 );
}

.dv-lms-item__puce--exercice {
	background: #fdf3e4;
	color: var( --dv-couleur-secondaire-foncee, #b87b2e );
}

.dv-lms-item__puce--podcast {
	background: #eef0f6;
	color: var( --dv-texte-att, #6b7280 );
}

.dv-lms-item__puce--quiz {
	color: var( --dv-texte-att, #6b7280 );
}

/* ---------------------------------------------------------------- Sommaire en accordéon (03/09/2026)
Chaque module se replie par défaut, seul celui contenant l'étape en cours reste
ouvert -- même principe que le constructeur de cours admin (.dv-cb-module--collapsed),
pour une liste qui reste lisible même avec de nombreux modules. Un module isolé
(pas de chapitre ni de quiz) reste affiché tel quel (.dv-lms-item), sans accordéon. */
.dv-lms-groupe {
	background: var( --dv-surface, #fff );
	border: 1px solid var( --dv-bordure, #e7e2d6 );
	border-radius: 18px;
	box-shadow: var( --dv-ombre-1, 0 1px 2px rgba( 15, 20, 30, 0.06 ) );
	overflow: hidden;
}

/* !important necessaire (meme piege que .dv-lms-titre-affichage / .dv-lms-espace__titre
ailleurs dans ce fichier) : le theme (Hello Elementor + kit Elementor) applique un
habillage par defaut aux <button> (fond marine plein, texte blanc) qui l'emportait
sur ce reset sans lui -- constate le 03/09/2026 en testant l'accordeon. */
.dv-lms-groupe__entete {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 15px 18px !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	cursor: pointer;
	font: inherit !important;
	color: inherit !important;
	text-align: left;
	box-shadow: none !important;
}

.dv-lms-groupe__chevron {
	flex-shrink: 0;
	color: var( --dv-texte-att, #6b7280 );
	transition: transform 0.2s ease;
}

.dv-lms-groupe--ouvert .dv-lms-groupe__chevron {
	transform: rotate( 180deg );
}

.dv-lms-groupe__titre {
	flex: 1;
	min-width: 0;
	font-weight: 700;
	font-size: 14.5px;
	color: var( --dv-texte, #1c222b );
	font-family: var( --dv-police-titres, 'Zilla Slab', Georgia, serif );
}

.dv-lms-groupe__compte {
	flex-shrink: 0;
	font-size: 11.5px;
	font-weight: 600;
	color: var( --dv-texte-att, #6b7280 );
	background: var( --dv-fond, #f4f1ea );
	padding: 4px 10px;
	border-radius: 100px;
}

.dv-lms-groupe__corps {
	display: none;
	flex-direction: column;
	gap: 8px;
	padding: 0 12px 14px;
}

.dv-lms-groupe--ouvert .dv-lms-groupe__corps {
	display: flex;
}

.dv-lms-groupe__corps .dv-lms-item {
	box-shadow: none;
	border: 1px solid var( --dv-bordure, #e7e2d6 );
}

.dv-lms-groupe__corps .dv-lms-item--courant {
	border-color: var( --dv-couleur-secondaire, rgba( 192, 138, 95, 0.4 ) );
}

/* ---------------------------------------------------------------- Page module (leçon) */

.dv-lms-module__corps {
	display: flex;
	gap: 0;
	align-items: flex-start;
}

.dv-lms-module__principal {
	flex: 1;
	min-width: 0;
	max-width: 780px;
}

.dv-lms-module__repere {
	font-size: 13px;
	color: var( --dv-texte-att, #6b7280 );
	margin-bottom: 10px;
}

.dv-lms-module__titre {
	margin: 0 0 22px !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var( --dv-texte, #1c222b ) !important;
	font-family: var( --dv-police-titres, 'Zilla Slab', Georgia, serif ) !important;
}

.dv-lms-module__video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 18px;
	overflow: hidden;
	margin-bottom: 26px;
	background: radial-gradient( circle at 30% 20%, #1e2c42, #0b121d 70% );
	box-shadow: var( --dv-ombre-3, 0 34px 60px -20px rgba( 15, 20, 30, 0.28 ) );
}

.dv-lms-module__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.dv-lms-module__audio {
	margin-bottom: 26px;
}

.dv-lms-module__audio audio {
	width: 100%;
}

.dv-lms-module__contenu {
	line-height: 1.75;
	font-size: 15.5px;
}

/* Barre d'actions collée en bas du viewport (« Marquer comme terminé » + nav
   précédent/suivant) : demande de Florian (31/08/2026) pour un rendu plus
   « plateforme » façon appli, plutôt que des boutons perdus en bas de page. */
.dv-lms-module {
	padding-bottom: 118px !important;
}

.dv-lms-barre-bas {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 25;
	display: flex;
	justify-content: center;
	padding: 0 48px;
	background: var( --dv-surface, #fff );
	border-top: 1px solid var( --dv-bordure, #e7e2d6 );
	box-shadow: 0 -10px 26px -16px rgba( 15, 20, 30, 0.28 );
}

.dv-lms-barre-bas__inner {
	width: 100%;
	max-width: 1160px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
}

.dv-lms-barre-bas__nav {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
}

.dv-lms-barre-bas__nav--suivant {
	justify-content: flex-end;
}

.dv-lms-barre-bas__centre {
	flex-shrink: 0;
}

.dv-lms-barre-bas .dv-lms-bouton .dv-lms-barre-bas__texte {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 220px;
}

.dv-lms-module__sidebar {
	width: 300px;
	flex-shrink: 0;
	margin-left: 30px;
	background: rgba( 255, 255, 255, 0.65 );
	backdrop-filter: blur( 10px );
	border-left: 1px solid rgba( 255, 255, 255, 0.8 );
	border-radius: 18px;
	padding: 26px 22px;
	box-shadow: -16px 0 40px -30px rgba( 15, 20, 30, 0.3 );
}

.dv-lms-module__sidebar .dv-lms-barre-legende,
.dv-lms-module__sidebar .dv-lms-progress-track {
	margin-bottom: 20px;
}

/* Carte « Fiche de synthèse » (option B des maquettes du 03/09/2026, validée par
Florian) : remplace le gros bouton plein-largeur autrefois inséré dans le contenu
par Marielle (cf. DV_LMS_Espace::retirer_bouton_pdf_embarque()) par une carte
compacte, juste sous la barre de progression. */
.dv-lms-fiche-carte {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 13px;
	margin-bottom: 20px;
	background: var( --dv-surface, #fff );
	border: 1px solid var( --dv-bordure, #e7e2d6 );
	border-radius: 12px;
	box-shadow: var( --dv-ombre-1, 0 1px 2px rgba( 15, 20, 30, 0.06 ) );
	color: inherit;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.dv-lms-fiche-carte:hover {
	box-shadow: var( --dv-ombre-2, 0 10px 24px -10px rgba( 15, 20, 30, 0.16 ) );
	transform: translateY( -1px );
}

.dv-lms-fiche-carte__icone {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var( --dv-fond, #f4f1ea );
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var( --dv-couleur-secondaire-foncee, #b87b2e );
}

.dv-lms-fiche-carte__corps {
	flex: 1;
	min-width: 0;
}

.dv-lms-fiche-carte__titre {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var( --dv-texte, #1c222b );
}

.dv-lms-fiche-carte__sous {
	display: block;
	font-size: 11.5px;
	color: var( --dv-texte-att, #6b7280 );
	margin-top: 1px;
}

.dv-lms-fiche-carte__fleche {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var( --dv-fond, #f4f1ea );
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var( --dv-couleur-primaire, #1b2a41 );
}

.dv-lms-module__sidebar .dv-lms-item {
	box-shadow: none;
	padding: 10px 10px;
	border-radius: 8px;
	background: transparent;
}

.dv-lms-module__sidebar .dv-lms-item--courant {
	padding: 11px 14px;
	border-radius: 10px;
	background: linear-gradient( 120deg, #fffdf8, var( --dv-couleur-secondaire-tres-claire, #fbeedc ) );
	box-shadow: 0 8px 18px -10px var( --dv-ombre-secondaire, rgba( 192, 138, 95, 0.5 ) );
}

.dv-lms-module__sidebar .dv-lms-item--chapitre {
	margin-left: 14px;
}

.dv-lms-module__sidebar .dv-lms-item__puce {
	width: 15px;
	height: 15px;
}

.dv-lms-module__sidebar .dv-lms-item__titre {
	font-size: 13.5px;
	font-weight: 600;
}

/* ---------------------------------------------------------------- Page quiz */

.dv-lms-quiz {
	max-width: 680px;
}

.dv-lms-quiz__titre {
	margin: 0 0 24px !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var( --dv-texte, #1c222b ) !important;
	font-family: var( --dv-police-titres, 'Zilla Slab', Georgia, serif ) !important;
}

.dv-lms-quiz__points {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 26px;
}

.dv-lms-quiz__point {
	width: 34px;
	height: 6px;
	border-radius: 100px;
	background: var( --dv-bordure, #e7e2d6 );
}

.dv-lms-quiz__point--repondu {
	background: linear-gradient( 90deg, var( --dv-couleur-secondaire-claire, #e7ac5c ), var( --dv-couleur-secondaire-foncee, #b87b2e ) );
	box-shadow: 0 0 10px var( --dv-ombre-secondaire, rgba( 192, 138, 95, 0.6 ) );
}

.dv-lms-quiz__carte-question {
	padding: 32px 34px;
	margin-bottom: 20px;
	box-shadow: var( --dv-ombre-3, 0 28px 60px -20px rgba( 15, 20, 30, 0.28 ) );
}

.dv-lms-quiz__enonce {
	margin: 0 0 22px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.dv-lms-quiz__options {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dv-lms-quiz__option {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	background: var( --dv-surface, #fff );
	border: 1.5px solid var( --dv-bordure, #e7e2d6 );
	border-radius: 14px;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba( 15, 20, 30, 0.05 );
	font-size: 14.5px;
}

.dv-lms-quiz__option:has( input:checked ) {
	border-color: var( --dv-couleur-secondaire, #d79a46 );
	background: linear-gradient( 120deg, #fffdf8, var( --dv-couleur-secondaire-tres-claire, #fbeedc ) );
	box-shadow: 0 14px 28px -14px var( --dv-ombre-secondaire, rgba( 192, 138, 95, 0.45 ) );
	font-weight: 600;
}

.dv-lms-quiz__option input {
	accent-color: var( --dv-couleur-secondaire-foncee, #b87b2e );
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.dv-lms-quiz__valider {
	display: flex;
	justify-content: flex-end;
	margin-top: 8px;
}

.dv-lms-quiz__resultat {
	padding: 34px;
	text-align: center;
}

.dv-lms-quiz__resultat-score {
	font-family: var( --dv-police-titres, 'Zilla Slab', Georgia, serif );
	font-size: 42px;
	font-weight: 700;
	margin: 6px 0;
}

.dv-lms-quiz__resultat-detail {
	color: var( --dv-texte-att, #6b7280 );
	margin-bottom: 18px;
}

.dv-lms-quiz__resultat-statut--reussi {
	color: var( --dv-succes, #3d7a5c );
	font-weight: 700;
}

.dv-lms-quiz__resultat-statut--echoue {
	color: var( --dv-texte-att, #6b7280 );
}

/* ---------------------------------------------------------------- Responsive */

@media ( max-width: 860px ) {
	.dv-lms-cours,
	.dv-lms-module,
	.dv-lms-quiz {
		padding-left: 20px;
		padding-right: 20px;
	}

	.dv-lms-app-header,
	.dv-lms-barre-bas {
		padding-left: 20px;
		padding-right: 20px;
	}

	.dv-lms-barre-bas .dv-lms-barre-bas__texte {
		display: none;
	}

	.dv-lms-cours__entete {
		flex-direction: column;
	}

	.dv-lms-cours__visuel {
		width: 100%;
		height: 140px;
	}

	.dv-lms-cours__corps,
	.dv-lms-module__corps {
		flex-direction: column;
	}

	.dv-lms-sidebar,
	.dv-lms-module__sidebar {
		width: 100%;
		margin-left: 0;
	}

	.dv-lms-item--chapitre,
	.dv-lms-module__sidebar .dv-lms-item--chapitre {
		margin-left: 14px;
	}
}