/* =========================================================================
   Tableau de bord étudiant — Le Hameau de l'Étoile
   Chargé par inc/hameau-dashboard.php. Aucun SVG : chevrons, flèches,
   coches et triangle « lecture » sont dessinés en CSS.
   ========================================================================= */

.hm-dash {
	--hm-fond: #F6F3EC;
	--hm-vert: #1E4029;
	--hm-encre: #2B3A2E;
	--hm-doux: #5E6E5F;
	--hm-muet: #7C8B7D;
	--hm-prune: #9C2A6B;
	--hm-prune-fonce: #7E2156;
	--hm-sauge: #E9EEE4;
	--hm-or: #E9C46A;
	--hm-bord: rgba(156, 42, 107, .08);
	--hm-ombre: 0 14px 40px -28px rgba(156, 42, 107, .33);
	--hm-rayon: 22px;
	--hm-titre: 'Bricolage Grotesque', 'Nunito Sans', sans-serif;

	font-family: 'Nunito Sans', 'Segoe UI', sans-serif;
	background: var(--hm-fond);
	color: var(--hm-encre);
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(18px, 3vw, 32px) clamp(16px, 4vw, 28px) clamp(64px, 7vw, 110px);
	-webkit-font-smoothing: antialiased;
}
.hm-dash *, .hm-dash *::before, .hm-dash *::after { box-sizing: border-box; }
.hm-dash [hidden] { display: none !important; }

/* Fond crème sur toute la largeur de l'écran : on colore la page elle-même
   et on rend transparents les conteneurs blancs du thème (Kadence). */
html:has(.hm-dash),
body:has(.hm-dash) {
	background-color: #F6F3EC !important;
}
body:has(.hm-dash) .site,
body:has(.hm-dash) #wrapper,
body:has(.hm-dash) #inner-wrap,
body:has(.hm-dash) .site-container,
body:has(.hm-dash) .content-container,
body:has(.hm-dash) .content-bg,
body:has(.hm-dash) .site-content,
body:has(.hm-dash) .content-area,
body:has(.hm-dash) .entry-content,
body:has(.hm-dash) .site-main,
body:has(.hm-dash) main,
body:has(.hm-dash) article {
	background: transparent !important;
}

/* Neutralise les styles de boutons du thème (fond vert au survol, etc.)
   sur nos boutons « transparents » — pas sur ceux des pages internes Tutor. */
.hm-dash .hm-compte-bouton, .hm-dash .hm-compte-bouton:hover, .hm-dash .hm-compte-bouton:focus,
.hm-dash .hm-profil-tete, .hm-dash .hm-profil-tete:hover, .hm-dash .hm-profil-tete:focus {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: inherit !important;
	padding: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
.hm-dash h1, .hm-dash h2, .hm-dash h3 { font-family: var(--hm-titre); font-weight: 800; }
.hm-dash a { text-decoration: none; }

/* ---------- Briques communes ---------- */
.hm-dash-carte {
	background: #fff;
	border: 1px solid var(--hm-bord);
	border-radius: var(--hm-rayon);
	box-shadow: var(--hm-ombre);
}
.hm-sur-titre {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hm-prune);
}
.hm-sur-titre--or { color: rgba(233, 196, 106, .95); }

.hm-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	background: #fff;
	border: 1px solid rgba(156, 42, 107, .12);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--hm-prune);
}

.hm-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: .95rem;
	padding: 12px 22px;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	transition: background .25s, transform .25s;
}
.hm-btn--prune {
	color: #fff;
	background: var(--hm-prune);
	box-shadow: 0 16px 34px -16px var(--hm-prune);
}
.hm-btn--prune:hover { background: var(--hm-prune-fonce); color: #fff; }

/* Chevron (bordures, aucun SVG) */
.hm-chev {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 2.4px solid currentColor;
	border-bottom: 2.4px solid currentColor;
}
.hm-chev--bas { transform: rotate(45deg); margin-top: -4px; }

/* Flèche → */
.hm-fleche {
	position: relative;
	display: inline-block;
	width: 15px;
	height: 2.4px;
	background: currentColor;
	border-radius: 2px;
	color: var(--hm-prune);
}
.hm-fleche::before {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	border-top: 2.4px solid currentColor;
	border-right: 2.4px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
	border-radius: 2px;
}
.hm-fleche--blanche { color: #fff; }
.hm-fleche--haut { transform: rotate(-45deg); color: #fff; }

.hm-lien-fleche {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .92rem;
	font-weight: 700;
	color: var(--hm-prune);
}
.hm-lien-fleche:hover { color: var(--hm-prune-fonce); }

/* ---------- Barre « Espace en ligne » ---------- */
.hm-dash-barre {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 16px;
	margin-bottom: clamp(16px, 2.4vw, 26px);
	border-bottom: 1px solid rgba(30, 64, 41, .1);
}
.hm-dash-barre-droite { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.hm-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--hm-prune);
	color: #fff;
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .02em;
	flex: none;
}
.hm-avatar--grand { width: 56px; height: 56px; font-size: 1.1rem; }

.hm-compte { position: relative; }
.hm-compte-bouton {
	display: flex;
	align-items: center;
	gap: 10px;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	color: var(--hm-muet);
}
.hm-compte-meta { line-height: 1.15; }
.hm-compte-nom { display: block; font-size: .88rem; font-weight: 700; color: var(--hm-vert); }
.hm-compte-role { display: block; font-size: .74rem; font-weight: 600; color: var(--hm-muet); }

.hm-compte-menu {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	width: 300px;
	background: #fff;
	border: 1px solid var(--hm-bord);
	border-radius: var(--hm-rayon);
	box-shadow: 0 30px 64px -30px rgba(16, 38, 24, .55);
	padding: 10px;
	z-index: 80;
}
.hm-compte-carte {
	background: var(--hm-fond);
	border-radius: 16px;
	padding: 20px 16px;
	text-align: center;
}
.hm-compte-carte-nom {
	margin-top: 10px;
	font-family: var(--hm-titre);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--hm-vert);
}
.hm-compte-carte-mail {
	margin-top: 2px;
	font-size: .8rem;
	font-weight: 500;
	color: var(--hm-muet);
	word-break: break-all;
}
.hm-btn-bascule {
	display: inline-block;
	margin-top: 14px;
	font-size: .86rem;
	font-weight: 700;
	color: var(--hm-prune);
	background: #fff;
	border: 1px solid rgba(156, 42, 107, .15);
	padding: 9px 16px;
	border-radius: 999px;
	transition: background .2s;
}
.hm-btn-bascule:hover { background: var(--hm-sauge); color: var(--hm-prune); }
.hm-compte-liens { margin-top: 8px; display: flex; flex-direction: column; gap: 1px; }
.hm-compte-lien {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 12px;
	border-radius: 12px;
	font-size: .92rem;
	font-weight: 600;
	color: var(--hm-encre);
	transition: background .2s, color .2s;
}
.hm-compte-lien:hover, .hm-compte-lien.est-actif { background: var(--hm-sauge); color: var(--hm-prune); }
.hm-compte-lien i { font-size: 17px; flex: none; }

/* ---------- Grille : latéral + contenu ---------- */
.hm-dash-grille {
	display: grid;
	grid-template-columns: 248px minmax(0, 1fr);
	gap: clamp(24px, 3vw, 44px);
	align-items: start;
}

.hm-dash-cote {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.hm-dash-nav { padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.hm-dash-nav-lien {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: .94rem;
	font-weight: 600;
	padding: 11px 13px;
	border-radius: 13px;
	color: var(--hm-encre);
	transition: background .2s, color .2s;
}
.hm-dash-nav-lien:hover { background: var(--hm-sauge); color: var(--hm-prune); }
.hm-dash-nav-lien.est-actif { background: var(--hm-prune); color: #fff; font-weight: 700; }
.hm-dash-nav-lien i { font-size: 17px; flex: none; }
.hm-dash-nav-puce {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	opacity: .55;
	flex: none;
	margin: 0 5px;
}
.hm-dash-nav-sep { height: 1px; background: var(--hm-bord); margin: 6px 8px; }
.hm-dash-nav-groupe {
	padding: 8px 13px 2px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hm-muet);
}

.hm-dash-decouvrir {
	display: flex;
	align-items: center;
	gap: 12px;
	background: linear-gradient(150deg, var(--hm-prune), var(--hm-vert));
	border-radius: var(--hm-rayon);
	padding: 18px;
	color: #fff;
	box-shadow: 0 16px 38px -24px rgba(156, 42, 107, .8);
	transition: transform .25s;
}
.hm-dash-decouvrir:hover { color: #fff; transform: translateY(-2px); }
.hm-dash-decouvrir-texte { flex: 1; min-width: 0; }
.hm-dash-decouvrir-titre {
	display: block;
	margin-top: 4px;
	font-family: var(--hm-titre);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.2;
}

/* ---------- En-tête de page ---------- */
.hm-dash-contenu { min-width: 0; display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 26px); }
.hm-dash-titre {
	margin: 8px 0 0;
	font-size: clamp(1.8rem, 3.4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -.025em;
	color: var(--hm-vert);
}
.hm-dash-sous {
	margin: 8px 0 0;
	font-size: 1.02rem;
	font-weight: 500;
	color: var(--hm-doux);
	max-width: 60ch;
	text-wrap: pretty;
}

.hm-dash-flux { display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 26px); }

/* ---------- Complétion du profil ---------- */
.hm-profil { padding: 18px 20px; }
.hm-profil-tete {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
}
.hm-anneau {
	position: relative;
	flex: none;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: conic-gradient(var(--hm-prune) calc(var(--hm-pct, 0) * 1%), var(--hm-sauge) 0);
	display: flex;
	align-items: center;
	justify-content: center;
}
.hm-anneau::before {
	content: "";
	position: absolute;
	inset: 6px;
	border-radius: 50%;
	background: #fff;
}
.hm-anneau-valeur {
	position: relative;
	font-family: var(--hm-titre);
	font-size: .95rem;
	font-weight: 700;
	color: var(--hm-vert);
}
.hm-profil-texte { flex: 1; min-width: 0; }
.hm-profil-etape {
	display: block;
	margin-top: 5px;
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--hm-encre);
}
.hm-rond-chev {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--hm-sauge);
	color: var(--hm-prune);
	transition: transform .25s;
}
.hm-profil.est-ouvert .hm-rond-chev { transform: rotate(180deg); }
.hm-profil-liste {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--hm-bord);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hm-profil-ligne {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 13px;
	font-size: .94rem;
	font-weight: 600;
	color: var(--hm-encre);
	transition: background .2s;
}
.hm-profil-ligne:hover { background: var(--hm-fond); color: var(--hm-encre); }
.hm-profil-ligne.est-faite { color: var(--hm-muet); text-decoration: line-through; }
.hm-profil-ligne span:nth-child(2) { flex: 1; }
.hm-profil-ligne .hm-fleche { opacity: .6; }
.hm-coche {
	position: relative;
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid #C8D5C2;
}
.hm-coche.est-faite { background: var(--hm-prune); border-color: var(--hm-prune); }
.hm-coche.est-faite::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 4px;
	width: 7px;
	height: 4.5px;
	border-left: 2.4px solid #fff;
	border-bottom: 2.4px solid #fff;
	transform: rotate(-45deg);
}

/* ---------- Statistiques ---------- */
.hm-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px;
}
.hm-stat {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	border-radius: 20px;
}
.hm-stat-valeur {
	font-family: var(--hm-titre);
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--hm-vert);
}
.hm-stat-unite { font-size: 1.1rem; font-weight: 600; margin-left: 4px; letter-spacing: 0; }
.hm-stat--prune {
	background: linear-gradient(150deg, var(--hm-prune), var(--hm-vert));
	box-shadow: 0 16px 38px -24px rgba(156, 42, 107, .8);
}
.hm-stat--prune .hm-stat-valeur { color: #fff; }
.hm-stat--prune .hm-stat-unite { color: rgba(255, 248, 248, .75); }

/* ---------- Continuer d'apprendre ---------- */
.hm-reprendre-tete {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.hm-reprendre-titre {
	margin: 8px 0 0;
	font-size: clamp(1.4rem, 2.4vw, 1.8rem);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--hm-vert);
}
.hm-reprendre-liste { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }

.hm-cours {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	padding: 16px;
	color: inherit;
	transition: box-shadow .25s, border-color .25s;
}
.hm-cours:hover {
	color: inherit;
	border-color: rgba(156, 42, 107, .16);
	box-shadow: 0 20px 44px -24px rgba(156, 42, 107, .6);
}
.hm-cours-visuel {
	position: relative;
	flex: none;
	width: 150px;
	height: 100px;
	border-radius: 14px;
	overflow: hidden;
	background: linear-gradient(140deg, #4A7355, var(--hm-vert));
}
.hm-cours-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-lire {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 248, 248, .94);
}
.hm-lire::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 12px;
	border-left: 12px solid var(--hm-prune);
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
}
.hm-cours-infos { flex: 1; min-width: 220px; }
.hm-etiquette {
	display: inline-block;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--hm-muet);
	background: var(--hm-sauge);
	padding: 3px 8px;
	border-radius: 7px;
}
.hm-cours-titre {
	display: block;
	margin-top: 8px;
	font-family: var(--hm-titre);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--hm-encre);
	line-height: 1.2;
	letter-spacing: -.01em;
}
.hm-cours-sous {
	display: block;
	margin-top: 4px;
	font-size: .88rem;
	font-weight: 500;
	color: var(--hm-doux);
}
.hm-barre-ligne { margin-top: 12px; display: flex; align-items: center; gap: 12px; }
.hm-barre {
	flex: 1;
	height: 8px;
	border-radius: 999px;
	background: var(--hm-sauge);
	overflow: hidden;
}
.hm-barre-plein {
	display: block;
	height: 100%;
	width: calc(var(--hm-pct, 0) * 1%);
	border-radius: 999px;
	background: var(--hm-prune);
}
.hm-barre-pct { font-size: .84rem; font-weight: 700; color: var(--hm-prune); }

/* ---------- États vides ---------- */
.hm-dash-vide {
	padding: clamp(34px, 5vw, 56px) 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.hm-dash-vide--pointille { border-style: dashed; border-color: rgba(156, 42, 107, .2); box-shadow: none; }
.hm-dash-vide-icone {
	position: relative;
	width: 64px;
	height: 64px;
	border-radius: 20px;
	background: var(--hm-sauge);
}
.hm-dash-vide-icone::before {
	content: "";
	position: absolute;
	inset: 20px 18px;
	border: 2.4px solid var(--hm-prune);
	border-radius: 4px 4px 6px 6px;
}
.hm-dash-vide-icone::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 20px;
	bottom: 24px;
	width: 2.4px;
	background: var(--hm-prune);
	transform: translateX(-50%);
}
.hm-dash-vide-titre { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--hm-vert); }
.hm-dash-vide-texte {
	margin: 0;
	font-size: .95rem;
	font-weight: 500;
	color: var(--hm-doux);
	max-width: 40ch;
	text-wrap: pretty;
}

/* =========================================================================
   Harmonisation des pages internes de Tutor (cours inscrits, souhaits,
   avis, quiz, questions-réponses, facturation, réglages…)
   ========================================================================= */
.hm-dash-page {
	/* Variables de couleur de Tutor v2+ : la teinte prune remplace le bleu. */
	--tutor-color-primary: #9C2A6B;
	--tutor-color-primary-hover: #7E2156;
	--tutor-color-primary-40: rgba(156, 42, 107, .4);
	--tutor-color-primary-30: rgba(156, 42, 107, .3);
	--tutor-color-primary-10: rgba(156, 42, 107, .1);
	--tutor-body-color: #2B3A2E;
	--tutor-color-secondary: #5E6E5F;
	--tutor-border-color: rgba(156, 42, 107, .12);
}
.hm-dash-page .tutor-card,
.hm-dash-page .tutor-course-card {
	border-radius: var(--hm-rayon);
	border-color: var(--hm-bord);
	box-shadow: var(--hm-ombre);
	overflow: hidden;
}
.hm-dash-page .tutor-btn,
.hm-dash-page .tutor-btn-primary { border-radius: 999px; font-weight: 700; }
.hm-dash-page .tutor-nav .tutor-nav-link.is-active,
.hm-dash-page .tutor-nav-tabs .is-active { color: var(--hm-prune); }
.hm-dash-page .tutor-progress-bar,
.hm-dash-page .tutor-progress-value { border-radius: 999px; }
.hm-dash-page input[type="text"],
.hm-dash-page input[type="email"],
.hm-dash-page input[type="password"],
.hm-dash-page select,
.hm-dash-page textarea { border-radius: 14px; }
.hm-dash-page .tutor-dashboard-content-inner > .tutor-dashboard-title,
.hm-dash-page .tutor-fs-5.tutor-fw-medium.tutor-color-black.tutor-mb-24 { display: none; }

/* ---------- Écrans étroits ---------- */
@media (max-width: 900px) {
	.hm-dash-grille { grid-template-columns: 1fr; }
	.hm-dash-cote { position: static; }
	.hm-dash-nav { flex-direction: row; flex-wrap: wrap; }
	.hm-dash-nav-lien { flex: 1 1 140px; }
	.hm-dash-decouvrir { display: none; }
}
@media (max-width: 640px) {
	.hm-stats { grid-template-columns: 1fr 1fr; }
	.hm-compte-meta { display: none; }
	.hm-cours .hm-btn { width: 100%; justify-content: center; }
}