/*
Theme Name: SkillStream Child
Theme URI: https://skillstream.qodeinteractive.com
Description: A child theme of SkillStream
Author: Select Themes
Author URI: https://qodeinteractive.com
Version: 1.0
Text Domain: skillstream
Template: skillstream
*/

/* Titre du bandeau de page : sur mobile, les mots longs (« Weiterbildungen ») dépassaient la
   largeur disponible et étaient coupés n'importe où. Taille fluide + césure selon la langue. */
@media only screen and (max-width: 680px) {
	.qodef-page-title .qodef-m-title {
		font-size: clamp(30px, 9.5vw, 45px);
		hyphens: auto;
	}
}

/* Slider de l'accueil (Revolution Slider « main-home-1-1 », et ses copies EN « main-home-1-en »
   et LB « main-home-1-lb », un slider par langue) : voile sombre entre la photo de fond
   et les formes / textes, pour la lisibilité du texte blanc sur des photos claires. */
sr7-module:is([data-alias="main-home-1-1"], [data-alias="main-home-1-en"], [data-alias="main-home-1-lb"]) sr7-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .1) 80%);
	pointer-events: none;
}

/* Forme cyan de la 1re diapositive : le slider la place par rapport au centre de l'écran, alors que
   le texte reste calé à gauche. Sur très grand écran, elle glissait donc sous le titre et le paragraphe.
   On la fixe par rapport au bord gauche, à sa position d'un écran de 1440 px (mode ordinateur du
   slider : 1240 px et plus). */
@media only screen and (min-width: 1240px) {
	sr7-module:is([data-alias="main-home-1-1"], [data-alias="main-home-1-en"], [data-alias="main-home-1-lb"]) sr7-px:has(> :is(#SR7_7_1-17-0, #SR7_11_1-29-0, #SR7_12_1-33-0)) {
		left: -390px !important;
	}
}

/* Tablette et mobile : le texte occupe toute la largeur, voile plus uniforme. */
@media only screen and (max-width: 1024px) {
	sr7-module:is([data-alias="main-home-1-1"], [data-alias="main-home-1-en"], [data-alias="main-home-1-lb"]) sr7-bg::after {
		background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .5) 100%);
	}
}

/* Bandeau de titre de la page Contact (FR 1849, EN 5904, LB 5909) : léger dégradé sombre de haut en bas sur la photo, pour la
   lisibilité du menu et du titre blancs (même principe que le slider de l'accueil). */
:is(.page-id-1849, .page-id-5904, .page-id-5909) .qodef-page-title::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .3) 55%, rgba(0, 0, 0, .1) 100%);
	pointer-events: none;
}

:is(.page-id-1849, .page-id-5904, .page-id-5909) .qodef-page-title .qodef-m-inner {
	position: relative;
	z-index: 1;
}

/* Sélecteur de langue du menu principal (codes FR / EN / LB, voir inc/language-switcher.php) :
   le thème masque la flèche des éléments de 1er niveau, on la réaffiche tournée vers le bas. */
.qodef-header-navigation > ul > li.wpml-ls-menu-item > a {
	position: relative;
	padding-right: 18px;
}

.qodef-header-navigation > ul > li.wpml-ls-menu-item > a .qodef-menu-item-arrow {
	display: block;
	top: calc(50% - 9px);
	right: -4px;
	width: 18px;
	fill: currentColor;
	transform: rotate(90deg);
	transition: transform .2s ease-out;
}

.qodef-header-navigation > ul > li.wpml-ls-menu-item:hover > a .qodef-menu-item-arrow,
.qodef-header-navigation > ul > li.wpml-ls-menu-item:focus-within > a .qodef-menu-item-arrow {
	transform: rotate(-90deg);
}

.qodef-header-navigation ul li.wpml-ls-menu-item.qodef-menu-item--narrow ul {
	left: -22px;
	width: auto;
	min-width: 86px;
	padding: 14px 0 16px;
}

.qodef-header-navigation ul li.wpml-ls-menu-item.qodef-menu-item--narrow ul li {
	padding: 0 22px;
}

.qodef-header-navigation ul li.wpml-ls-menu-item.qodef-menu-item--narrow ul.qodef-drop-down--right {
	right: -22px;
}

.qodef-header-navigation ul li.wpml-ls-menu-item.qodef-menu-item--narrow ul li a {
	font-family: "Syne", sans-serif;
	font-size: 14px;
	font-weight: 600;
}

/* Menu mobile : les langues dépliées (EN, LB) reprennent le style des liens principaux
   au lieu de celui des sous-menus du thème (Inter 16px). */
.qodef-mobile-header-navigation ul li.wpml-ls-menu-item ul li > a {
	font-family: "Syne", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.57143em;
	text-transform: uppercase;
}

/* Sélecteur de langue WPML du pied de page (WPML › Langues › Sélecteur de langue du pied de
   page) : WPML le place sous le pied de page, on le fond dans la bande noire du bas.
   Sélecteurs renforcés (li .wpml-ls-link:is(:link, :visited)) pour passer devant les couleurs
   réglées dans WPML (Langues › Sélecteur de langue du pied de page › couleurs). */
.wpml-ls-statics-footer.wpml-ls {
	margin: 0;
	padding: 0 0 30px;
	background-color: #000;
	border: 0;
	text-align: center;
}

.wpml-ls-statics-footer.wpml-ls li .wpml-ls-link:is(:link, :visited) {
	padding: 1px 10px;
	font-family: "Syne", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 22px;
	text-transform: uppercase;
	color: #fff;
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: 30px;
	transition: border-color .2s ease-out;
}

.wpml-ls-statics-footer.wpml-ls li .wpml-ls-link:is(:link, :visited):hover,
.wpml-ls-statics-footer.wpml-ls li .wpml-ls-link:is(:link, :visited):focus-visible,
.wpml-ls-statics-footer.wpml-ls li.wpml-ls-current-language .wpml-ls-link:is(:link, :visited) {
	color: #fff;
	background-color: transparent;
	border-color: currentColor;
}

/* Catalogue des formations — shortcode [ms_formations] */
.ms-formations {
	--ms-accent: #6c33d8;
	--ms-border: #e4e4e4;
}

.ms-formations {
	scroll-margin-top: 120px; /* retour en haut du catalogue au changement de page, sous l'en-tête fixe */
}

.ms-formations__title {
	margin: 0 0 30px;
}

.ms-formations__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	margin-bottom: 16px;
}

.ms-formations__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 6px;
}

/* Champ de recherche : reprend le soulignement des champs du thème. */
.ms-formations__search {
	position: relative;
	flex: 0 1 280px;
}

.ms-formations .ms-formations__search-input {
	margin: 0;
	padding: 6px 28px 6px 0;
	font-size: 15px;
	cursor: text;
}

/* Loupe du thème (icône « search »), à droite du champ. */
.ms-formations__search-icon {
	position: absolute;
	top: 50%;
	right: 2px;
	display: flex;
	transform: translateY(-50%);
	pointer-events: none;
}

.ms-formations__search-icon svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	overflow: visible; /* le tracé de l'icône du thème touche le bord de sa zone : sans ça, le haut est rogné */
}

.ms-formations__count {
	margin: 0 0 30px;
	font-size: 14px;
	color: #777;
}

.ms-formations__empty {
	margin: 0;
	padding: 40px 0;
	text-align: center;
}

/* Pagination : style de la pagination du blog du thème (.qodef-m-pagination.qodef--wp),
   appliqué ici à des boutons au lieu de liens. */
.ms-formations__pagination[hidden],
.ms-formations__pagination .page-numbers[hidden] {
	display: none;
}

.ms-formations__pagination .page-numbers {
	color: #000;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

/* Cercles de 31px (24px dans le thème) et numéros plus espacés. */
.ms-formations__pagination.qodef--wp .page-numbers:not(.prev):not(.next) {
	margin: 0 13px;
}

.ms-formations__pagination.qodef--wp .page-numbers:not(.prev):not(.next):not(.qodef--dots)::before {
	width: 31px;
	height: 31px;
}

.ms-formations__filter {
	margin: 0;
	padding: 0 12px;
	font-family: "Syne", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 22px;
	text-transform: uppercase;
	color: #000;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 30px;
	cursor: pointer;
	transition: border-color .2s ease-out;
}

.ms-formations__filter:hover,
.ms-formations__filter:focus-visible,
.ms-formations__filter.is-active {
	color: #000;
	background: transparent;
	border-color: currentColor;
}

.ms-formations__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

.ms-card {
	display: flex;
	flex-direction: column;
	padding: 32px 30px 28px;
	background: #fff;
	border: 1px solid var(--ms-border);
	border-radius: 20px;
	transition: border-color .2s ease-out, transform .2s ease-out;
}

.ms-card[hidden] {
	display: none;
}

.ms-card:hover {
	border-color: #000;
}

.ms-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 22px;
}

.ms-card__number {
	font-family: "Syne", sans-serif;
	font-size: 30px;
	font-weight: 600;
	line-height: 1;
	color: var(--ms-accent);
}

.ms-card__theme {
	padding: 0 12px;
	font-family: "Syne", sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 22px;
	text-transform: uppercase;
	color: #000;
	border: 1px solid #000;
	border-radius: 30px;
}

.ms-card__title {
	margin: 0 0 14px;
	font-family: "Syne", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	color: #000;
}

.ms-card__title a {
	color: inherit;
}

.ms-card__excerpt {
	margin: 0 0 24px;
	font-size: 15px;
	line-height: 1.6;
	color: #444;
}

.ms-card__trainer {
	display: flex;
	flex-direction: column;
	margin: auto 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--ms-border);
	font-size: 14px;
	line-height: 1.4;
}

.ms-card__trainer-name {
	font-weight: 600;
	color: #000;
}

.ms-card__trainer-role {
	color: #777;
}

@media only screen and (max-width: 1024px) {
	.ms-formations__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px;
	}
}

@media only screen and (max-width: 680px) {
	.ms-formations__search {
		flex-basis: 100%;
	}

	/* Les 7 numéros prennent toute la largeur : Précédent / Suivant passent en dessous. */
	.ms-formations__pagination.qodef--wp .nav-links {
		flex-wrap: wrap;
		row-gap: 24px;
		padding: 0;
	}

	.ms-formations__pagination.qodef--wp .page-numbers:not(.prev):not(.next) {
		margin: 0 8px;
	}

	.ms-formations__pagination.qodef--wp .page-numbers.prev,
	.ms-formations__pagination.qodef--wp .page-numbers.next {
		position: static;
		order: 1;
		margin: 0 20px;
	}

	.ms-formations__pagination.qodef--wp .nav-links::after {
		content: "";
		order: 0;
		flex-basis: 100%;
	}

	.ms-formations__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.ms-card {
		padding: 26px 22px 22px;
	}
}

/* Carte Google Maps (bloc « Une question… ») tant que le visiteur n'a pas accepté les cookies :
   Complianz la remplace par une image de carte et un bouton gris. On reprend la charte du site :
   image passée en gris sous un voile lavande, bouton pilule du thème, et une ligne qui explique
   ce que le clic accepte (texte du bouton : Complianz › Outils › Espaces réservés). */
.qodef-google-map.cmplz-blocked-content-container {
	position: relative;
	border-radius: 0;
	box-shadow: none;
}

.qodef-google-map.cmplz-blocked-content-container::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgba(228, 218, 245, .6);
	-webkit-backdrop-filter: grayscale(1);
	backdrop-filter: grayscale(1);
}

.qodef-google-map.cmplz-blocked-content-container .cmplz-blocked-content-notice {
	z-index: 3;
	width: auto;
	max-width: none;
	height: 47px;
	padding: 0 39px;
	border: 1px solid #000;
	border-radius: 23px;
	background-color: #fff;
	color: #000;
	font-family: Syne, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 45px;
	letter-spacing: -.21px;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .2s ease, color .2s ease;
}

.qodef-google-map.cmplz-blocked-content-container .cmplz-blocked-content-notice:hover,
.qodef-google-map.cmplz-blocked-content-container .cmplz-blocked-content-notice:focus-visible {
	background-color: #000;
	color: #fff;
}

.qodef-google-map.cmplz-blocked-content-container::after {
	position: absolute;
	top: calc(50% + 40px);
	left: 50%;
	z-index: 2;
	width: min(320px, 90%);
	transform: translateX(-50%);
	color: #000;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

html[lang^="fr"] .qodef-google-map.cmplz-blocked-content-container::after {
	content: "En affichant la carte, vous acceptez les cookies de Google Maps.";
}

html[lang^="en"] .qodef-google-map.cmplz-blocked-content-container::after {
	content: "Showing the map means accepting Google Maps cookies.";
}

html[lang^="lb"] .qodef-google-map.cmplz-blocked-content-container::after {
	content: "Wann Dir d'Kaart uweist, akzeptéiert Dir d'Cookies vu Google Maps.";
}

/* Repère des cartes Google Maps (Contact, Location de salle) : image 2x (96px) affichée à 48px pour
   rester nette sur écran Retina. Google Maps place le bas-centre du repère sur l'adresse ; on le
   décale d'une demi-largeur pour que ce soit le coin carré (en bas à gauche) qui pointe l'adresse. */
.qodef-google-map img[src*="maison-savoirs-repere-carte"] {
	width: 48px;
	height: 48px;
	transform: translateX(50%);
}

/* Liens réseaux sociaux (Fb / Ig / Lnkd / Pin) du slider d'accueil : ils pointent encore vers les
   comptes de la démo et Maison Savoirs n'a pas encore ses comptes. Masqués en attendant ; à retirer
   quand les vrais liens seront saisis dans Revolution Slider. Le même lien du pied de page est rangé
   dans Apparence › Widgets › Widgets inactifs. */
sr7-module .qodef-link-list {
	display: none;
}

/* Page 404 : le thème pose l'image de fond (options du thème › 404) à sa taille réelle, collée en
   haut à gauche et répétée. On la cale en haut à droite, sans répétition, pour garder les formes
   violettes visibles quelle que soit la largeur de l'écran. */
body.error404 #qodef-page-outer {
	background-position: right top;
	background-repeat: no-repeat;
}

/* Mobile : formes plus petites, pour ne pas passer derrière le titre et le texte. */
@media (max-width: 767px) {
	body.error404 #qodef-page-outer {
		background-size: 700px auto;
	}
}

/* Salle Odin (Location de salle, #salle-3) : en attendant ses photos, le carrousel n'affiche que le
   visuel « salle-odin-photos-a-venir ». La mention ci-dessous ne s'applique qu'à ce visuel : elle
   disparaît d'elle-même dès que de vraies photos le remplacent dans le carrousel. */
/* Avec une seule image, Elementor n'initialise pas le carrousel : sur mobile, le visuel ne réservait
   aucune hauteur et recouvrait le titre de la salle. On réserve le format 3:2 (+ 10px de marge du
   carrousel), calculé sur la largeur du conteneur parent. */
.e-con:has(> .elementor-widget-media-carousel .elementor-carousel-image[style*="salle-odin-photos-a-venir"]) {
	container-type: inline-size;
}

.elementor-widget-media-carousel:has(.elementor-carousel-image[style*="salle-odin-photos-a-venir"]) {
	min-height: calc(100cqw * 2 / 3 + 10px);
}

.elementor-main-swiper:has(.elementor-carousel-image[style*="salle-odin-photos-a-venir"])::after {
	position: absolute;
	top: calc(50% + 14px);
	left: 50%;
	z-index: 2;
	width: min(320px, 86%);
	transform: translateX(-50%);
	color: #000;
	font-family: Syne, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -.21px;
	text-align: center;
	text-transform: uppercase;
	pointer-events: none;
}

html[lang^="fr"] .elementor-main-swiper:has(.elementor-carousel-image[style*="salle-odin-photos-a-venir"])::after {
	content: "Photos de la salle bientôt disponibles";
}

html[lang^="en"] .elementor-main-swiper:has(.elementor-carousel-image[style*="salle-odin-photos-a-venir"])::after {
	content: "Photos of the room coming soon";
}

html[lang^="lb"] .elementor-main-swiper:has(.elementor-carousel-image[style*="salle-odin-photos-a-venir"])::after {
	content: "Fotoe vum Sall geschwë verfügbar";
}

/* Défilement horizontal parasite sur Safari iOS : le panneau latéral du thème (#qodef-side-area) attend
   fermé, en position fixe, hors de l'écran à droite. Le thème ne coupe le débordement que sur <body>,
   ce que Safari iOS ignore pour les éléments fixes : la page devenait déplaçable de gauche à droite.
   « clip » coupe le débordement sans créer de zone de défilement (le menu collant reste fonctionnel). */
html,
body {
	overflow-x: clip;
}

/* Case à cocher du consentement newsletter (Contact Form 7) : dans la ligne flex qu'elle partage avec
   le long texte d'acceptation, elle était écrasée à ~8px de large sur mobile. On fixe sa taille. */
.wpcf7 .wpcf7-list-item input[type="checkbox"] {
	flex: 0 0 18px;
	width: 18px;
	min-width: 18px;
}

/* Miniatures des carrousels de salles (Location de salle) : le format 4:3 reposait sur « aspect-ratio »
   posé sur les diapositives Swiper, qui sont les éléments d'une ligne flex étirée. Safari et Chrome sur
   iPhone (WebKit) ignoraient ce format et étiraient les miniatures en hautes bandes verticales. On fixe
   le format sur l'image elle-même avec un padding-bottom en pourcentage (calculé sur la largeur),
   que tous les navigateurs respectent. */
.elementor-widget-media-carousel .elementor-thumbnails-swiper .swiper-wrapper {
	align-items: flex-start;
}

.elementor-widget-media-carousel .elementor-thumbnails-swiper .swiper-slide {
	height: auto !important;
	aspect-ratio: auto !important;
}

.elementor-widget-media-carousel .elementor-thumbnails-swiper .elementor-carousel-image {
	width: 100% !important;
	height: 0 !important;
	padding-bottom: 75%;
	aspect-ratio: auto !important;
}