/*
	Theme Name: MasterStudy Child - MOSIREX
	Theme URI: https://stylemixthemes.com/masterstudy/
	Description: Thème enfant de MasterStudy pour le projet MOSIREX. Toutes les personnalisations (CSS, PHP) doivent être faites ICI et jamais dans le thème parent, qui est écrasé à chaque mise à jour.
	Author: Kamgang David
	Template: masterstudy
	Version: 1.0.0
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Text Domain: masterstudy-child
*/

/* ==========================================================================
   Personnalisations MOSIREX
   Ce fichier est chargé APRÈS le CSS du thème parent : les règles écrites
   ici l'emportent, sans avoir besoin de !important dans la majorité des cas.
   ========================================================================== */

/* --- Pied de page ------------------------------------------------------- */
/* Les widgets texte portent bien une couleur claire, mais les liens qu'ils
   contiennent héritent de la couleur de lien du thème, sombre : sur le fond
   marine du pied, les colonnes devenaient illisibles. */

[data-elementor-type="footer"] a {
	color: #AFC0D6;
	text-decoration: none;
	transition: color .15s ease;
}

[data-elementor-type="footer"] a:hover,
[data-elementor-type="footer"] a:focus-visible {
	color: #FFFFFF;
}

/* --- Cartes du catalogue ------------------------------------------------ */
/* Les descriptions ont des longueurs inégales. Sans cela, le lien « En savoir
   plus » flotte juste sous le texte et les cartes d'une même ligne ne
   s'alignent pas. On étire la carte sur toute la hauteur de sa cellule et on
   repousse le lien en bas. */

.jet-listing-grid__item > .e-con {
	height: 100%;
}

.jet-listing-grid__item .elementor-widget-jet-listing-dynamic-link {
	margin-top: auto;
}

/* --- Bandeau d'accueil --------------------------------------------------- */
/* La géométrie du bandeau (halo, photo, position des cartes) vit dans
   Elementor : les règles qu'il génère portent un sélecteur de spécificité
   0-3-0 qu'une classe ne peut pas battre, et tout ce qui était écrit ici
   était simplement ignoré.
   Ne restent donc que les quatre choses qu'Elementor ne sait pas exprimer. */

/* Un dégradé à deux couches : Elementor n'en accepte qu'une. */
.mx-hero {
	background:
		radial-gradient(circle at 75% 40%, rgba(35, 156, 255, .08), transparent 37%),
		linear-gradient(90deg, #fff 0%, #f8fbff 55%, #eef7ff 100%);
}

/* Le second vers du titre, en bleu, dans le même bloc de texte. */
.mx-titre-hero span { color: var(--e-global-color-primary); }

/* L'anneau pointillé extérieur : un pseudo-élément. */
.mx-halo::after {
	content: "";
	position: absolute;
	inset: -112px;
	border: 1px dashed rgba(26, 160, 246, .38);
	border-radius: 50%;
	pointer-events: none;
}

/* La hauteur porte sur la balise img, hors de portée des réglages du
   conteneur qui l'entoure. */
.mx-hero-photo img {
	height: 560px;
	width: auto;
	max-width: none;
	object-fit: contain;
	object-position: bottom;
}

@media (max-width: 1024px) {
	.mx-halo::after { inset: -78px; }
	.mx-hero-photo img { height: 430px; }
}

@media (max-width: 640px) {
	/* Le pointillé déborderait de l'écran. */
	.mx-halo::after { display: none; }
	.mx-hero-photo img { height: 400px; }
}

/* --- Sections de la page d'accueil --------------------------------------- */
/* Les dégradés de conteneur d'Elementor ne s'appliquent pas sur ce site : la
   règle est bien générée et bien servie, mais le navigateur calcule
   « background-image: none ». Le bandeau d'appel s'affichait en texte blanc
   sur blanc. On les pose donc ici, où rien ne les concurrence. */

.mx-doux {
	background: linear-gradient(180deg, #F8FBFF, #F1F7FF);
}

.mx-appel {
	background: linear-gradient(100deg, #073D89, #005BC2 60%, #04366E);
}

.mx-date {
	background: linear-gradient(180deg, #6E46D6, #4F28B8);
}

/* --- Logos --------------------------------------------------------------- */
/* Des logos de rapports très différents doivent se normaliser en HAUTEUR.
   Elementor ne règle que la largeur : à 108 px de large, les hauteurs
   s'étalaient de 10 à 54 px.
   Le préfixe « .elementor » est nécessaire : « .elementor img { height:auto } »
   a la même spécificité que « .mx-... img » et, chargée après, l'emportait. */

.elementor .mx-erp-carte img {
	height: 40px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}

.elementor .mx-logos img {
	height: 33px;
	width: auto;
	max-width: 130px;
	object-fit: contain;
}

@media (max-width: 640px) {
	.elementor .mx-logos img { height: 27px; }
}

/* --- Bandeau d'ouverture des pages intérieures --------------------------- */

.mx-page-hero {
	background: linear-gradient(110deg, #F7FBFF, #EDF6FF);
}

.mx-fil a { color: var(--e-global-color-primary); }

.elementor .mx-hero-page-image img {
	max-height: 260px;
	width: auto;
	object-fit: contain;
}

/* Emplacement réservé à la carte, sur la page Contact. */
.mx-carte-geo {
	background: linear-gradient(145deg, #E8F2FF, #C7DFFF);
}

/* Le réglage « rows » du champ de formulaire Elementor ne se traduit pas en
   hauteur visible : on demande un besoin détaillé dans une zone de deux
   lignes. */
.elementor-field-textual.elementor-field-type-textarea { min-height: 132px; }

/* --- Calendrier de prise de rendez-vous ---------------------------------- */
/* JetAppointments impose 350 px au calendrier : il débordait de 17 px sur un
   écran de 360. */
.jet-apb-calendar-wrapper {
	max-width: 100%;
	overflow-x: auto;
}
@media (max-width: 420px) {
	.jet-apb-calendar-wrapper .jet-apb-calendar { min-width: 0; font-size: 0.9em; }
}

/* --- Bouton d'envoi de JetFormBuilder ------------------------------------ */
/* Le widget ne propose pas de style de bouton : il sortait avec l'apparence
   par défaut du navigateur. */
.jet-form-builder__submit,
.jet-form-builder .jet-form-builder__submit {
	background: var(--e-global-color-accent);
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 14px 24px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: filter .15s ease;
}
.jet-form-builder__submit:hover { filter: brightness(1.08); }
.jet-form-builder__submit:focus-visible { outline: 2px solid var(--e-global-color-primary); outline-offset: 2px; }

/* --- Grilles JetEngine --------------------------------------------------- */
/* JetEngine étale ses grilles avec des marges négatives de 10 px pour créer
   ses gouttières. Sans compensation, la page déborde de 10 px à toutes les
   largeurs — les deux catalogues, ERP et formations, étaient concernés. */
.elementor .jet-listing-grid { padding-inline: 10px; }

/* --- Catalogue de formations MasterStudy --------------------------------- */
/* La vignette de survol des cartes est positionnée en absolu sur 362 px et
   débordait de la page. Sur un écran tactile elle n'a de toute façon aucun
   sens : il n'y a pas de survol. */
@media (max-width: 1024px) {
	.ms_lms_courses_card_item_popup { display: none !important; }
}

/* ------------------------------------------------------------------------
   Colonne latérale de la fiche formation

   La maquette place à droite un encart « Informations clés » suivi d'un
   appel à parler à un conseiller. MasterStudy affiche déjà les informations
   du cours dans son propre bloc ; il ne restait donc que l'encart de
   contact, posé en widget texte dans la zone `stm_lms_sidebar`.
   ------------------------------------------------------------------------ */

.masterstudy-single-course-widgets .widget_text {
	background: #FFFFFF;
	border: 1px solid #E4EBF5;
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0 6px 22px rgba(15, 53, 98, 0.05);
}

.masterstudy-single-course-widgets .widget_text .widgettitle {
	font-size: 17px;
	font-weight: 700;
	color: var(--e-global-color-secondary);
	margin: 0 0 12px;
}

.masterstudy-single-course-widgets .widget_text p {
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--e-global-color-text);
	margin: 0 0 12px;
}

.mx-bouton-conseil {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 12px 18px;
	border-radius: 9px;
	background: var(--e-global-color-accent);
	color: #FFFFFF !important;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	transition: filter .18s ease;
}

.mx-bouton-conseil:hover,
.mx-bouton-conseil:focus {
	filter: brightness(1.08);
	color: #FFFFFF !important;
}

/* Le tarif, au-dessus du bouton d'inscription de la fiche formation. */
.mx-tarif {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 14px;
}

.mx-tarif__montant {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--e-global-color-secondary);
}

.mx-tarif__mention {
	font-size: 12.5px;
	color: var(--e-global-color-text);
	opacity: .8;
}

/* Les deux appels de la fiche formation, sous le tarif. */
.mx-inscription {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.mx-inscription a {
	display: block;
	text-align: center;
	padding: 13px 20px;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: filter .18s ease, background-color .18s ease;
}

.mx-inscription__principal {
	background: var(--e-global-color-accent);
	color: #FFFFFF !important;
}

.mx-inscription__principal:hover,
.mx-inscription__principal:focus {
	filter: brightness(1.08);
	color: #FFFFFF !important;
}

.mx-inscription__secondaire {
	background: transparent;
	border: 1px solid #D5DFEE;
	color: var(--e-global-color-secondary) !important;
}

.mx-inscription__secondaire:hover,
.mx-inscription__secondaire:focus {
	background: #F4F7FC;
	color: var(--e-global-color-secondary) !important;
}

/* Le message qui accompagne les deux appels. */
.mx-inscription__avis {
	margin: 0 0 12px;
	padding: 12px 14px;
	border-radius: 9px;
	background: #F4F7FC;
	border-left: 3px solid var(--e-global-color-primary);
	font-size: 13px;
	line-height: 1.6;
	color: var(--e-global-color-text);
}

/* Arrivee par redirection depuis le lecteur : on attire l'oeil sur la
   raison, sinon l'utilisateur reclique et tourne en rond. */
.mx-inscription_signale {
	scroll-margin-top: 90px;
}

.mx-inscription_signale .mx-inscription__avis {
	background: #FFF6E5;
	border-left-color: #E8A33D;
	font-weight: 500;
	animation: mx-attirer 1.6s ease 1;
}

@keyframes mx-attirer {
	0%, 100% { box-shadow: 0 0 0 0 rgba(232, 163, 61, 0); }
	35%      { box-shadow: 0 0 0 5px rgba(232, 163, 61, .28); }
}

@media (prefers-reduced-motion: reduce) {
	.mx-inscription_signale .mx-inscription__avis { animation: none; }
}

/* ------------------------------------------------------------------------
   Vignette de repli des cartes de formation

   Aucune des 85 fiches n'a d'illustration — le client ne les a pas encore
   fournies — et MasterStudy rend alors un `<img src="">` : le navigateur
   affiche l'icône d'image cassée, douze fois par page.

   Plutôt qu'une image de remplissage, le cadre porte un aplat aux couleurs
   de la marque. Le jour où les visuels arriveront, l'image se posera
   par-dessus sans qu'on ait à toucher à ce style.
   ------------------------------------------------------------------------ */

.ms_lms_courses_card_item_image_link {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 330 / 185;
	background: linear-gradient(135deg,
		var(--e-global-color-secondary, #0F3562) 0%,
		var(--e-global-color-primary, #1B4F8F) 55%,
		var(--e-global-color-accent, #227AFF) 100%);
}

/* Une trame diagonale très discrète, pour que l'aplat ne soit pas plat. */
.ms_lms_courses_card_item_image_link::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		115deg,
		rgba(255, 255, 255, .05) 0 1px,
		transparent 1px 14px);
	pointer-events: none;
}

/* L'image vide laisse voir l'aplat ; une vraie image le recouvre. */
.ms_lms_courses_card_item_image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ms_lms_courses_card_item_image[src=""] {
	visibility: hidden;
}

/* Le tarif ne doit jamais se couper entre le nombre et la devise. */
.ms_lms_courses_card_item_info_price_single,
.ms_lms_courses_card_item_popup_price_single,
.ms_lms_courses_card_item_info_price_single span,
.ms_lms_courses_card_item_popup_price_single span {
	white-space: nowrap;
}