/* =========================================================================
   Mahdi School – Course Bundle Redesign
   Portée : .mahdi-bundle-redesign (page single course-bundle uniquement)
   Réutilise les variables du thème Histudy (--color-primary, etc.)

   HERO sur fond CLAIR (bg-gradient-1 : blanc -> #EFF1FF lavande pâle).
   Règle d'or : texte FONCÉ sur fond teinté clair. Jamais de texte blanc ici.
   En MODE SOMBRE (.active-dark-mode), l'image de fond claire est masquée par le
   thème : voir bloc dark-mode qui réinverse le texte/pastilles vers du clair.
   ========================================================================= */

.mahdi-bundle-redesign {
	--mahdi-grad: linear-gradient(95deg, var(--color-primary, #2f57ef), var(--color-secondary, #b966e7));
	--mahdi-radius: 16px;
}

/* ---------- HERO ---------- */
.mahdi-bundle-redesign .mahdi-bundle-hero .content {
	padding: 10px 0 18px;
}

/* Rangée des catégories */
.mahdi-bundle-redesign .mahdi-bundle-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}
/* Pastille de catégorie : pleine, teintée primaire, texte primaire foncé */
.mahdi-bundle-redesign .mahdi-bundle-cats .mahdi-cat-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--color-primary, #2f57ef);              /* texte foncé lisible */
	background: var(--primary-opacity, #2f57ef21);     /* fond bleu très pâle */
	border: 1px solid var(--color-border, #e6e3f1);    /* contour doux */
	border-radius: 50px;
	text-transform: capitalize;
	text-shadow: none;
	backdrop-filter: none;
	transition: var(--transition, .3s);
}
.mahdi-bundle-redesign .mahdi-bundle-cats .mahdi-cat-pill:hover {
	color: var(--color-white, #fff);
	background: var(--color-primary, #2f57ef);         /* inversion au survol : plein bleu */
	border-color: var(--color-primary, #2f57ef);
	transform: translateY(-2px);
}

/* Titre du pack : foncé et lisible */
.mahdi-bundle-redesign .mahdi-bundle-title {
	font-weight: 800;
	letter-spacing: -.5px;
	margin: 0 0 16px;
	font-size: clamp(30px, 4vw, 44px);                 /* échelle propre, indépendante du thème */
	line-height: 1.15;
	color: var(--color-heading, #192335);
}

/* Description : corps de texte foncé */
.mahdi-bundle-redesign .mahdi-bundle-desc {
	max-width: 760px;
	margin: 0 0 18px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--color-body, #6b7385);
}

/* Rangée des "features" (badge promo + pastilles + note)
   La rangée porte aussi .rbt-course-details-feature : le thème Histudy applique
   .rbt-breadcrumb-default.rbt-breadcrumb-style-3 .rbt-course-details-feature { margin:-5px }
   (spécificité 0,3,0). On monte à 0,4,0 et on neutralise le margin négatif pour
   restaurer le rythme vertical de 18px voulu par le fix d'espacement hero. */
.mahdi-bundle-redesign .mahdi-bundle-hero .rbt-course-details-feature.mahdi-bundle-featrow,
.mahdi-bundle-redesign .mahdi-bundle-featrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
}

/* Pastille "feature" : sobre, fond clair neutre, texte heading */
.mahdi-bundle-redesign .mahdi-bundle-featrow .mahdi-feat-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	padding: 7px 15px;
	border-radius: 50px;
	color: var(--color-heading, #192335);              /* texte foncé */
	background: var(--color-light, #F5F7FA);           /* fond clair neutre */
	border: 1px solid var(--color-border, #e6e3f1);
}
.mahdi-bundle-redesign .mahdi-bundle-featrow .mahdi-feat-pill i,
.mahdi-bundle-redesign .mahdi-bundle-featrow .mahdi-feat-pill svg {
	color: var(--color-primary, #2f57ef);              /* icône bleue */
}

/* Note / rating : accent secondaire (violet) bien contrasté sur fond clair */
.mahdi-bundle-redesign .mahdi-bundle-featrow .mahdi-feat-rating {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	padding: 7px 15px;
	border-radius: 50px;
	color: var(--color-heading, #192335);              /* chiffre foncé et net */
	background: var(--secondary-opacity, #b966e721);   /* violet pâle */
	border: 1px solid var(--color-border, #e6e3f1);
}
/* Étoiles : star_rating_generator_v2() émet du markup Tutor (tutor-icon-star-*,
   .tutor-star-rating-group / .tutor-ratings-stars). On cible large pour dorer
   les étoiles quel que soit le markup réel. */
.mahdi-bundle-redesign .mahdi-bundle-featrow .mahdi-feat-rating .star,
.mahdi-bundle-redesign .mahdi-bundle-featrow .mahdi-feat-rating i,
.mahdi-bundle-redesign .mahdi-bundle-featrow .mahdi-feat-rating [class*="tutor-icon-star"],
.mahdi-bundle-redesign .mahdi-bundle-featrow .mahdi-feat-rating .tutor-ratings-stars i,
.mahdi-bundle-redesign .mahdi-bundle-featrow .mahdi-feat-rating .tutor-star-rating-group i {
	color: #f59e0b;                                    /* étoile dorée visible sur clair */
}
.mahdi-bundle-redesign .mahdi-bundle-featrow .mahdi-feat-count {
	color: var(--color-heading, #192335);              /* compteur d'avis plus net (contraste) */
	opacity: .8;
	margin-left: 4px;
}
.mahdi-bundle-redesign .mahdi-bundle-featrow .mahdi-feat-rating a.mahdi-feat-count:hover {
	color: var(--color-primary, #2f57ef);
}

/* Badge "économie" : dégradé coloré rose/orange (déjà contrasté, conservé) */
.mahdi-bundle-redesign .mahdi-save-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 800;
	font-size: 14px;
	line-height: 1;
	padding: 8px 18px;
	border-radius: 50px;
	color: #fff;
	background: linear-gradient(95deg, #ff5b8d, #ff8f3f);
	box-shadow: 0 8px 20px -6px rgba(255, 91, 141, .7);
	animation: mahdiPulse 2.4s ease-in-out infinite;
}
@keyframes mahdiPulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

/* Ligne auteur */
.mahdi-bundle-redesign .mahdi-bundle-authorline {
	margin: 0 0 16px;
}
.mahdi-bundle-redesign .mahdi-bundle-authorline,
.mahdi-bundle-redesign .mahdi-bundle-authorline a {
	color: var(--color-heading, #192335);
}
.mahdi-bundle-redesign .mahdi-bundle-authorline a:hover {
	color: var(--color-primary, #2f57ef);
}

/* Méta du hero (durée, leçons, niveau…) */
.mahdi-bundle-redesign .mahdi-bundle-herometa.rbt-meta {
	margin: 0;
}
.mahdi-bundle-redesign .mahdi-bundle-herometa.rbt-meta li {
	color: var(--color-body, #6b7385);
}
.mahdi-bundle-redesign .mahdi-bundle-herometa.rbt-meta li i {
	color: var(--color-primary, #2f57ef);
}

/* Sécurité anti-héritage : forcer texte non-blanc dans les pastilles du hero */
.mahdi-bundle-redesign .mahdi-cat-pill,
.mahdi-bundle-redesign .mahdi-feat-pill,
.mahdi-bundle-redesign .mahdi-feat-rating {
	text-shadow: none;
}

/* ---------- MODE SOMBRE (dark mode Histudy) ----------
   En dark mode, le thème masque l'image de fond claire du hero
   (.active-dark-mode.single-course-bundle …breadcrumb-inner img { display:none }),
   le hero retombe alors sur le fond sombre de la page. Le texte foncé deviendrait
   illisible : on réinverse titre/desc/auteur/méta vers du texte clair et on rend
   les pastilles translucides claires. Si le site n'expose aucun toggle dark mode,
   ces règles restent simplement inertes. */
body.active-dark-mode .mahdi-bundle-redesign .mahdi-bundle-title {
	color: var(--color-white, #fff);
}
body.active-dark-mode .mahdi-bundle-redesign .mahdi-bundle-desc {
	color: rgba(255, 255, 255, .82);
}
body.active-dark-mode .mahdi-bundle-redesign .mahdi-bundle-authorline,
body.active-dark-mode .mahdi-bundle-redesign .mahdi-bundle-authorline a {
	color: rgba(255, 255, 255, .9);
}
body.active-dark-mode .mahdi-bundle-redesign .mahdi-bundle-herometa.rbt-meta li {
	color: rgba(255, 255, 255, .78);
}
/* Pastilles : fond translucide clair + texte clair en dark mode */
body.active-dark-mode .mahdi-bundle-redesign .mahdi-bundle-cats .mahdi-cat-pill {
	color: var(--color-white, #fff);
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .22);
}
body.active-dark-mode .mahdi-bundle-redesign .mahdi-bundle-featrow .mahdi-feat-pill,
body.active-dark-mode .mahdi-bundle-redesign .mahdi-bundle-featrow .mahdi-feat-rating {
	color: var(--color-white, #fff);
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .2);
}
body.active-dark-mode .mahdi-bundle-redesign .mahdi-bundle-featrow .mahdi-feat-pill i,
body.active-dark-mode .mahdi-bundle-redesign .mahdi-bundle-featrow .mahdi-feat-pill svg,
body.active-dark-mode .mahdi-bundle-redesign .mahdi-bundle-herometa.rbt-meta li i {
	color: #9db4ff;                                    /* bleu clair lisible sur sombre */
}
body.active-dark-mode .mahdi-bundle-redesign .mahdi-bundle-featrow .mahdi-feat-count {
	color: var(--color-white, #fff);
	opacity: .85;
}

/* ---------- IMAGE PROMO ----------
   (Classes préfixées mahdi-, et désormais scopées sous .mahdi-bundle-redesign
    pour cohérence avec la doc et protection si la CSS fuyait hors des pages pack.) */
.mahdi-bundle-redesign .mahdi-bundle-figure {
	padding: 0;
	overflow: hidden;
	border-radius: var(--mahdi-radius);
}
.mahdi-bundle-redesign .mahdi-bundle-figure img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--mahdi-radius);
	transition: transform .6s ease;
}
.mahdi-bundle-redesign .mahdi-bundle-figure:hover img {
	transform: scale(1.03);
}

/* ---------- STATISTIQUES ANIMÉES ---------- */
.mahdi-bundle-redesign .mahdi-bundle-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 18px;
}
.mahdi-bundle-redesign .mahdi-stat {
	position: relative;
	text-align: center;
	padding: 26px 14px 22px;
	background: #fff;
	border: 1px solid var(--color-border, #e6e3f1);
	border-radius: var(--mahdi-radius);
	box-shadow: 0 6px 24px rgba(47, 87, 239, .06);
	overflow: hidden;
	transition: transform .35s ease, box-shadow .35s ease;
}
.mahdi-bundle-redesign .mahdi-stat::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--mahdi-grad);
	opacity: 0;
	transition: opacity .35s ease;
}
.mahdi-bundle-redesign .mahdi-stat:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px -10px rgba(47, 87, 239, .28);
}
.mahdi-bundle-redesign .mahdi-stat:hover::before { opacity: 1; }
.mahdi-bundle-redesign .mahdi-stat-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 12px;
	border-radius: 50%;
	color: #fff;
	font-size: 22px;
	background: var(--mahdi-grad);
	box-shadow: 0 10px 22px -8px rgba(47, 87, 239, .6);
}
.mahdi-bundle-redesign .mahdi-stat-num {
	display: block;
	font-size: 34px;
	line-height: 1;
	font-weight: 800;
	color: var(--color-heading, #192335);
}
.mahdi-bundle-redesign .mahdi-stat-lbl {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-body, #6b7385);
}

/* ---------- SECTIONS (titres) ---------- */
.mahdi-bundle-redesign .mahdi-bundle-section .mahdi-section-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
}
.mahdi-bundle-redesign .mahdi-bundle-section .mahdi-section-head--split {
	flex-wrap: wrap;
}
.mahdi-bundle-redesign .mahdi-section-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	border-radius: 12px;
	font-size: 19px;
	color: var(--color-primary, #2f57ef);
	background: rgba(47, 87, 239, .1);
}
.mahdi-bundle-redesign .mahdi-bundle-section .mahdi-section-head h4 {
	margin: 0;
}
.mahdi-bundle-redesign .mahdi-count-pill {
	margin-left: auto;
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 700;
	color: var(--color-primary, #2f57ef);
	background: rgba(47, 87, 239, .1);
	border-radius: 50px;
}
.mahdi-bundle-redesign .mahdi-bundle-prose {
	color: var(--color-body, #6b7385);
	line-height: 1.7;
}
.mahdi-bundle-redesign .mahdi-bundle-prose img { max-width: 100%; height: auto; }

/* ---------- LISTE DES COURS ---------- */
.mahdi-bundle-redesign .mahdi-course-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mahdi-bundle-redesign .mahdi-course-card {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 14px;
	border: 1px solid var(--color-border, #e6e3f1);
	border-radius: 14px;
	background: #fff;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.mahdi-bundle-redesign .mahdi-course-card:hover {
	transform: translateY(-3px);
	border-color: transparent;
	box-shadow: 0 16px 34px -14px rgba(47, 87, 239, .35);
}
.mahdi-bundle-redesign .mahdi-cc-thumb {
	position: relative;
	flex: 0 0 130px;
	width: 130px;
	height: 86px;
	border-radius: 10px;
	overflow: hidden;
}
.mahdi-bundle-redesign .mahdi-cc-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.mahdi-bundle-redesign .mahdi-course-card:hover .mahdi-cc-thumb img { transform: scale(1.08); }
.mahdi-bundle-redesign .mahdi-cc-index {
	position: absolute;
	top: 8px;
	left: 8px;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	color: #fff;
	background: var(--mahdi-grad);
	border-radius: 50%;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
}
.mahdi-bundle-redesign .mahdi-cc-body {
	flex: 1 1 auto;
	min-width: 0;
}
.mahdi-bundle-redesign .mahdi-cc-title {
	display: block;
	font-size: 17px;
	font-weight: 700;
	color: var(--color-heading, #192335);
	line-height: 1.35;
	transition: color .3s ease;
}
.mahdi-bundle-redesign .mahdi-course-card:hover .mahdi-cc-title { color: var(--color-primary, #2f57ef); }
.mahdi-bundle-redesign .mahdi-cc-author {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 5px;
	font-size: 13px;
	color: var(--color-body, #6b7385);
}
.mahdi-bundle-redesign .mahdi-cc-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 9px;
}
.mahdi-bundle-redesign .mahdi-cc-meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-body, #6b7385);
}
.mahdi-bundle-redesign .mahdi-cc-meta i { color: var(--color-primary, #2f57ef); }
.mahdi-bundle-redesign .mahdi-cc-arrow {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--color-primary, #2f57ef);
	background: rgba(47, 87, 239, .08);
	transition: transform .3s ease, background .3s ease, color .3s ease;
}
.mahdi-bundle-redesign .mahdi-course-card:hover .mahdi-cc-arrow {
	background: var(--mahdi-grad);
	color: #fff;
	transform: translateX(4px);
}

/* ---------- INSTRUCTEURS ---------- */
.mahdi-bundle-redesign .mahdi-instructors {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}
.mahdi-bundle-redesign .mahdi-instructor {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--color-border, #e6e3f1);
	border-radius: 14px;
	transition: transform .3s ease, box-shadow .3s ease;
}
.mahdi-bundle-redesign .mahdi-instructor:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px -14px rgba(47, 87, 239, .3);
}
.mahdi-bundle-redesign .mahdi-ins-av img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid rgba(47, 87, 239, .15);
}
.mahdi-bundle-redesign .mahdi-ins-name {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--color-heading, #192335);
}
.mahdi-bundle-redesign .mahdi-ins-name:hover { color: var(--color-primary, #2f57ef); }
.mahdi-bundle-redesign .mahdi-ins-desig {
	display: block;
	font-size: 13px;
	color: var(--color-body, #6b7385);
	margin-top: 2px;
}
.mahdi-bundle-redesign .mahdi-ins-rating { display: block; margin-top: 4px; }

/* ---------- SIDEBAR ---------- */
.mahdi-bundle-sidebar {
	padding: 26px;
	border-radius: var(--mahdi-radius);
}
/* Offset sticky fiabilisé : scopé + cible .sticky-top (0,3,0) pour battre toute
   règle .sticky-top du thème. 100px ≈ hauteur du header sticky Histudy. */
.mahdi-bundle-redesign .mahdi-bundle-sidebar.sticky-top {
	top: 100px;
}

/* PROBLÈME 3 — Corrige l'effet "coins coupés" du liseré dégradé Histudy.
   La bordure dégradée = fond dégradé du parent + ::before blanc en overlay (inset 3px).
   Le ::before est figé à var(--radius)=6px alors que la carte est à 16px => angles tronqués.
   1) Contexte de positionnement (le ::before est en position:absolute). */
.mahdi-bundle-redesign .mahdi-bundle-sidebar.rbt-gradient-border {
	position: relative;
	border-radius: var(--mahdi-radius, 16px);          /* le fond dégradé du parent suit l'angle */
}
/* 2) Le masque blanc ::before doit ÉPOUSER les coins de la carte.
      Inset de 3px => rayon concentrique dérivé de la variable (reste concentrique
      si --mahdi-radius évolue) : radius - 3px = 13px par défaut. */
.mahdi-bundle-redesign .mahdi-bundle-sidebar.rbt-gradient-border::before {
	border-radius: calc(var(--mahdi-radius, 16px) - 3px);
}
/* 3) Garder le même arrondi sur .rbt-shadow-box pour que overflow:hidden ne re-rogne pas. */
.mahdi-bundle-redesign .mahdi-bundle-sidebar.rbt-shadow-box {
	border-radius: var(--mahdi-radius, 16px);
}

/* Bandeau "économie" en haut de la sidebar */
.mahdi-bundle-redesign .mahdi-save-strip {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	margin-bottom: 22px;
	border-radius: 12px;
	color: #fff;
	background: var(--mahdi-grad);
	box-shadow: 0 12px 26px -10px rgba(47, 87, 239, .6);
}
.mahdi-bundle-redesign .mahdi-save-strip-pct {
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
}
.mahdi-bundle-redesign .mahdi-save-strip-txt {
	font-size: 13px;
	line-height: 1.35;
}
.mahdi-bundle-redesign .mahdi-save-strip-txt strong { display: inline; }

/* Fond la boîte d'achat native dans notre carte (évite la double-carte) */
.mahdi-bundle-redesign .mahdi-bundle-sidebar .tutor-card {
	box-shadow: none;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
}
.mahdi-bundle-redesign .mahdi-bundle-sidebar .tutor-card-body { padding: 0; }

/* Espacement interne : bloc prix, bouton "Ajouter au panier", footer méta */
.mahdi-bundle-redesign .mahdi-bundle-sidebar .tutor-course-sidebar-card-pricing {
	margin-bottom: 18px;
}
/* Bouton d'action plein largeur, indépendamment du moteur de paiement
   (WooCommerce, Tutor natif, EDD, gratuit). tutor-btn-block assure déjà 100%,
   on cible le vrai conteneur du bouton pour l'espacement et la robustesse. */
.mahdi-bundle-redesign .mahdi-bundle-sidebar .tutor-card-body .tutor-btn-block,
.mahdi-bundle-redesign .mahdi-bundle-sidebar .tutor-card-body form > .tutor-btn,
.mahdi-bundle-redesign .mahdi-bundle-sidebar .tutor-card-body [data-course-single] {
	width: 100%;
	margin-top: 6px;
}
/* Footer méta : scopé sous .mahdi-bundle-redesign (0,3,0) pour rester stable
   même si un futur markup enveloppe la sidebar dans .course-sidebar (règle thème 0,4,0). */
.mahdi-bundle-redesign .mahdi-bundle-sidebar .tutor-card-footer {
	padding: 18px 0 0 !important;                        /* bat la règle thème padding:0 (0,4,0) */
	margin-top: 18px;
	border-top: 1px solid var(--color-border, #e6e3f1);   /* séparation propre */
}
.mahdi-bundle-redesign .mahdi-bundle-sidebar .tutor-card-footer > ul.tutor-ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
	.mahdi-bundle-redesign .mahdi-bundle-sidebar { position: static !important; margin-top: 30px; }
	.mahdi-bundle-redesign .mahdi-bundle-title { font-size: 30px; }
}
@media (max-width: 575px) {
	.mahdi-bundle-redesign .mahdi-bundle-stats { grid-template-columns: repeat(2, 1fr); }
	.mahdi-bundle-redesign .mahdi-course-card { flex-wrap: wrap; }
	.mahdi-bundle-redesign .mahdi-cc-thumb { flex-basis: 100%; width: 100%; height: 150px; }
	.mahdi-bundle-redesign .mahdi-cc-arrow { display: none; }
	.mahdi-bundle-redesign .mahdi-stat-num { font-size: 28px; }
}

/* ---------- Sécurité animations (si SAL absent, on montre le contenu) ---------- */
.mahdi-bundle-redesign.mahdi-sal-fallback [data-sal] {
	opacity: 1 !important;
	transform: none !important;
}
/* ---------- Bouton "Explorer les cours" (pack déjà acheté) ----------
   Look EXACT du bouton "Acheter Maintenant" des pages cours (rbt-btn btn-border
   icon-hover). Le JS (bundle.js) remplace les classes Tutor par les classes du
   thème et ajoute la flèche. Ces règles : (1) pré-stylent le bouton BRUT pour
   eviter tout flash avant l'execution du JS ; (2) reproduisent la variante
   "course-sidebar" (bordure 1px, texte fonce) sur notre carte .mahdi-bundle-sidebar. */
.mahdi-bundle-redesign .mahdi-bundle-sidebar a.tutor-btn-outline-primary {
    display: block;
    width: 100%;
    height: 60px;
    line-height: 57px;
    padding: 0 26px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .5px;
    color: var(--color-heading, #192335);
    background: transparent;
    border: 1px solid var(--color-border, #e6e3f1);
    border-radius: 6px;
    transition: all .4s ease-in-out;
}
.mahdi-bundle-redesign .mahdi-bundle-sidebar .rbt-btn.btn-border {
    color: var(--color-heading, #192335);
    border: 1px solid var(--color-border, #e6e3f1);
}
/* =========================================================================
   AJOUT — (1) La carte sidebar REMONTE sur le hero (chevauchement), exactement
                comme la page single course (mécanisme natif Histudy :
                .course-sidebar-top { margin-top:-500px } + sticky top:110px,
                hero .rbt-breadcrumb-style-3 min-height:490px overflow:hidden).
            (2) Hover du bouton "Explorer les cours" : DISCRET (pas de bleu plein
                + texte blanc) -> leger fond bleu pale + texte/bordure/fleche bleus.

   Reglage : --mahdi-hero-pull pilote l'amplitude de la remontee. -500px = valeur
   native du theme (hero ~490px). Si un petit ecart subsiste sur tes packs (hero
   un peu plus/moins haut selon le contenu), ajuste UNIQUEMENT cette valeur
   (ex. -520px si un gap apparait sous la carte, -480px si la carte coiffe le texte).
   ========================================================================= */
.mahdi-bundle-redesign {
    --mahdi-hero-pull: -500px;
    --mahdi-sticky-top: 110px;
}

/* (1.A) Hero : hauteur de reference + image de fond qui couvre tout le bandeau. */
.mahdi-bundle-redesign .mahdi-bundle-hero {
    position: relative;
    min-height: 490px;
    overflow: hidden;
}
.mahdi-bundle-redesign .mahdi-bundle-hero .breadcrumb-inner > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* (1.B) DESKTOP (>=992px) : la carte remonte sur le hero et le chevauche. */
@media (min-width: 992px) {
    /* Pas de padding bas qui decale (comme Histudy). */
    .mahdi-bundle-redesign .rbt-course-details-area.ptb--60 {
        padding-bottom: 0 !important;
    }
    /* La colonne droite (carte) passe au-dessus de l'image du hero. */
    .mahdi-bundle-redesign .rbt-course-details-area .col-lg-4 {
        position: relative;
        z-index: 3;
    }
    /* On reserve la zone droite du hero pour que le texte ne passe pas sous la carte. */
    .mahdi-bundle-redesign .mahdi-bundle-hero .content {
        padding-right: 36%;
    }
    /* REGLE CLE : sticky + grande marge negative = la carte demarre tout en haut,
       posee sur l'image (exactement .course-sidebar-top de Histudy). */
    .mahdi-bundle-redesign .mahdi-bundle-sidebar.sticky-top {
        margin-top: var(--mahdi-hero-pull);
        top: var(--mahdi-sticky-top);
    }
    /* admin-bar WordPress connecte : decale l'offset sticky (comme le theme). */
    .logged-in.admin-bar .mahdi-bundle-redesign .mahdi-bundle-sidebar.sticky-top {
        top: calc(var(--mahdi-sticky-top) + 32px);
    }
}

/* (2) HOVER du bouton "Explorer les cours" : DISCRET (jamais bleu plein + blanc).
   Au repos : transparent, texte fonce, fine bordure (deja en place plus haut).
   Au survol : leger fond bleu pale + texte/bordure/fleche en bleu primaire + lift. */
.mahdi-bundle-redesign .mahdi-bundle-sidebar .rbt-btn.btn-border:hover {
    background: var(--primary-opacity, #2f57ef21);
    background-image: none;
    color: var(--color-primary, #2f57ef);
    border-color: var(--color-primary, #2f57ef);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -10px rgba(47, 87, 239, .4);
}
.mahdi-bundle-redesign .mahdi-bundle-sidebar .rbt-btn.btn-border.icon-hover:hover .btn-text {
    transform: translateX(-7px);
}
.mahdi-bundle-redesign .mahdi-bundle-sidebar .rbt-btn.btn-border.icon-hover:hover .btn-icon i {
    opacity: 1;
    transform: translateX(7px);
    color: var(--color-primary, #2f57ef);
}

/* (3) RESPONSIVE < 992px : flux normal, aucune remontee, paddings restaures. */
@media (max-width: 991px) {
    .mahdi-bundle-redesign .mahdi-bundle-sidebar,
    .mahdi-bundle-redesign .mahdi-bundle-sidebar.sticky-top {
        position: static !important;
        margin-top: 30px !important;
        top: auto !important;
    }
    .mahdi-bundle-redesign .mahdi-bundle-hero {
        min-height: 0;
    }
    .mahdi-bundle-redesign .mahdi-bundle-hero .content {
        padding-right: 0;
    }
    .mahdi-bundle-redesign .rbt-course-details-area.ptb--60 {
        padding-bottom: 60px;
    }
}