/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 * Version: 1.0.7
 */

/* ==========================================================================
   Page Actualités, à la manière du fil d'actualités de mctn.sn : catégorie
   en étiquette blanche, titre en gras coloré, date sobre, extrait agrandi
   (jusqu'à 4-5 lignes, comme sur mctn.sn) — la carte s'étire en hauteur
   pour l'accueillir, la photo en fond suit automatiquement.
   ========================================================================== */
.page-id-3572 .desc {
	color: #4a5049;
	font-size: 17px;
	line-height: 1.6;
	margin-top: 8px;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.page-id-3572 .wcf-taxonomy a {
	display: inline-block;
	background-color: #ffffff !important;
	color: #1a5c3f !important;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 4px 10px !important;
	border-radius: 4px;
	text-decoration: none !important;
}
.page-id-3572 .wcf-meta {
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 13px;
}
.page-id-3572 .wcf-post .title a {
	color: #ffffff !important;
	font-weight: 700;
	text-decoration: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.page-id-3572 .wcf-post .title a:hover {
	color: #ffe066 !important;
	text-decoration: underline;
}
/* La teinte verte du widget (rgba(23,105,68,.38)) ne garantit pas un contraste
   suffisant sur les zones claires des photos (robes, ciel, drapeaux) : on
   ajoute un dégradé sombre derrière le texte pour rester lisible quelle que
   soit la photo. */
.page-id-3572 .wcf-post .content {
	position: relative;
}
.page-id-3572 .wcf-post .content::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.6) 100%);
	pointer-events: none;
	z-index: 0;
}
.page-id-3572 .wcf-post .content > * {
	position: relative;
	z-index: 1;
}

/* Titre du slider d'accueil (Smart Slider) : taille desktop (51px) illisible sur mobile */
@media (max-width: 480px) {
	.n2-style-cd537c121e8da02a3d9df6db7da88842-heading {
		font-size: 26px !important;
		line-height: 1.25 !important;
	}
}

/* Bloc "mot du Ministre" : le titre reste bloqué à 2px de haut sur mobile (animation d'apparition qui ne se déclenche pas) */
.wcf--image-box .title-wrap {
	height: auto !important;
}
.wcf--image-box .title-wrap .title {
	height: auto !important;
	overflow: visible !important;
	line-height: 1.3 !important;
}

/* ==========================================================================
   Uniformité des photos et cartes — les logos et photos utilisés dans les
   cartes de services (Espace Service, Espace Entreprise, Structures sous
   tutelles…) ont des proportions d'origine très variables (logos carrés,
   photos larges, portraits), ce qui donnait des cartes de hauteurs et de
   cadrages incohérents d'une carte à l'autre. Un cadre à ratio fixe uniformise
   toutes les cartes ; "contain" (pas "cover") pour ne jamais rogner un logo.
   ========================================================================== */
.wcf--image-box .thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f7f5f0;
}
.wcf--image-box .thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 12px;
	box-sizing: border-box;
}

/* Galerie Médiathèque : les photos ont des proportions d'origine différentes
   (portrait, paysage…), ce qui donnait une grille en dents de scie. Cadre
   uniforme en "cover" ici — ce sont de vraies photos, pas des logos, donc un
   recadrage propre est préférable à des bandes vides. */
.page-id-3936 .elementor-widget-image img {
	aspect-ratio: 4 / 3;
	width: 100%;
	object-fit: cover;
	border-radius: 8px;
}

/* ==========================================================================
   Écran d'affichage — Cabinet du Ministre (page "Affichage Cabinet du
   Ministre" / affichage-cabinet). Réutilise le slider de la page d'accueil
   en plein écran, sans en-tête ni pied de page (gabarit Elementor Canvas).
   ========================================================================== */
.page-id-4944 {
	background: #0f3d2c;
}
.page-id-4944 body,
.page-id-4944 html {
	overflow: hidden;
}
.page-id-4944 .elementor-widget-smartslider {
	display: flex;
	align-items: center;
	min-height: 100vh;
}

/* ==========================================================================
   Cadre latéral d'événement (branding temporaire, piloté depuis le
   Personnaliseur). Voir la note dans functions.php : deux bandeaux fixes,
   au-dessus du contenu, plutôt qu'un arrière-plan de page classique.
   ========================================================================== */
.mincom-event-frame {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	width: 48px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 999;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
}
.mincom-event-frame--left {
	left: 0;
}
.mincom-event-frame--right {
	right: 0;
}
@media (min-width: 1400px) {
	.mincom-event-frame {
		display: block;
	}
}

/* ==========================================================================
   Onglets vides (Documentation : Lois/Arrêtés/Decrets sans post publié ;
   Organigramme : plusieurs directions sans structure renseignée) : le widget
   d'origine ne prévoit aucun message quand il n'y a rien à afficher, ce qui
   laisse un onglet muet. On avait tenté un remplacement PHP côté serveur,
   mais un cache (LiteSpeed ou un autre plugin) régénérait systématiquement
   une version non modifiée avant l'affichage — cause jamais identifiée avec
   certitude malgré plusieurs heures de débogage. Le sélecteur CSS :empty
   contourne complètement le problème : il s'applique côté navigateur, après
   tout cache serveur, et s'arrête de lui-même dès qu'un onglet contient un
   vrai post ou une vraie structure (donc n'est plus :empty).
   ========================================================================== */
.page-id-3922 [class*="elementor-element-"][data-element_type="container"]:empty::after,
.page-id-3721 [class*="elementor-element-"][data-element_type="container"]:empty::after {
	content: "Ce contenu n’est pas encore renseigné. Revenez prochainement.";
	display: block;
	padding: 24px 4px;
	font-style: italic;
	color: #74786f;
}

/* ==========================================================================
   Identité visuelle du site — couleurs du drapeau (vert / jaune / rouge),
   inspirée de la présentation du site du MCTN (mctn.sn/programmes-et-projets) :
   bandeau tricolore comme signature, onglets/accordéons/cartes renforcés.
   Appliqué à l'ensemble du site via les composants partagés entre les pages
   (Elementor, Royal Elementor Addons) — CSS pur, aucune donnée modifiée.
   ========================================================================== */
:root {
	--sn-green: #1a5c3f;
	--sn-yellow: #e5b93c;
	--sn-red: #ce1126;
}

/* Bandeau tricolore sous le titre de chaque page (le premier titre de la
   page). L'accueil a son propre hero (slider) et n'a pas de titre de page
   classique à ce même endroit — exclu pour ne pas décorer le mauvais titre. */
body:not(.home) .elementor-widget-heading:first-of-type .elementor-heading-title {
	position: relative;
	padding-bottom: 22px;
}
body:not(.home) .elementor-widget-heading:first-of-type .elementor-heading-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 96px;
	height: 5px;
	background: linear-gradient(
		to right,
		var(--sn-green) 0 33.33%,
		var(--sn-yellow) 33.33% 66.66%,
		var(--sn-red) 66.66% 100%
	);
	border-radius: 3px;
}

/* Onglets (Commerce/Industrie/PME-PMI en accueil, Lois/Arrêtés/Decrets en
   Documentation, Orientations Stratégiques en Programmes & Projets, etc.) :
   état actif en vert, accent jaune au survol — partout sur le site. */
.e-n-tab-title {
	border-radius: 6px;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.e-n-tab-title[aria-selected="true"] {
	background: var(--sn-green) !important;
	color: #fff !important;
	box-shadow: 0 4px 14px -4px rgba(26, 92, 63, 0.45);
}
.e-n-tab-title:not([aria-selected="true"]):hover {
	background: rgba(229, 185, 60, 0.16) !important;
}

/* Accordéons (Programmes & Projets, et tout futur accordéon du site) :
   liseré vert sur l'item ouvert, survol teinté de jaune. Un pseudo-élément
   plutôt qu'une bordure : le CSS du plugin fixe déjà border-left avec une
   spécificité qu'on ne veut pas avoir à surenchérir à chaque fois. */
.wpr-acc-button {
	position: relative;
}
.wpr-acc-button::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: transparent;
	transition: background-color 0.2s ease;
}
.wpr-acc-button.wpr-acc-active::before {
	background-color: #1a5c3f !important;
}
.wpr-acc-button:hover {
	background: rgba(229, 185, 60, 0.1) !important;
}

/* Cartes de services et d'agences (Espace Service, Espace Entreprise, cartes
   Secteurs de l'accueil, Structures sous tutelles…) : liseré supérieur aux
   couleurs du drapeau, en rotation, pour un repère visuel cohérent partout. */
.wcf--image-box {
	border-top: 3px solid #1a5c3f !important;
}

/* ==========================================================================
   Pied de page — mctn.sn n'était pas accessible pour reproduire son pied de
   page à l'identique (certificat SSL invalide côté serveur, aussi bien pour
   la navigation directe que pour l'extraction automatisée) : habillage du
   pied de page existant (colonnes Blocksy, contenu inchangé) dans le même
   esprit tricolore que le reste du site plutôt qu'une simple bande grise.
   ========================================================================== */
.ct-footer {
	position: relative;
}
.ct-footer .mincom-footer-logo {
	margin: 0 0 20px;
}
.ct-footer .mincom-footer-logo img {
	max-width: 150px;
	height: auto;
	background: #fff;
	padding: 10px 14px;
	border-radius: 8px;
}
.ct-footer::before {
	content: "";
	display: block;
	height: 4px;
	background: linear-gradient(
		to right,
		var(--sn-green) 0 33.33%,
		var(--sn-yellow) 33.33% 66.66%,
		var(--sn-red) 66.66% 100%
	);
}
.ct-footer [data-row="middle"] {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}
.ct-footer .widget-title {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 15px;
	position: relative;
	padding-bottom: 14px;
	margin-bottom: 18px !important;
}
.ct-footer .widget-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 3px;
	background: var(--sn-yellow);
	border-radius: 2px;
}
.ct-footer [data-column] .textwidget ul li {
	margin-bottom: 11px;
}
.ct-footer [data-column] .textwidget a {
	opacity: 0.85;
	display: inline-block;
	transition: opacity 0.2s ease, padding-left 0.2s ease, color 0.2s ease;
}
.ct-footer [data-column] .textwidget a:hover {
	opacity: 1;
	color: var(--sn-yellow) !important;
	padding-left: 4px;
}
.ct-footer .ct-contact-info-block {
	--background-color: rgba(229, 185, 60, 0.16) !important;
	--background-hover-color: rgba(229, 185, 60, 0.28) !important;
}
.ct-footer .ct-contact-info-block .ct-icon-container {
	color: var(--sn-yellow);
}
.ct-footer .ct-contact-info-block .contact-title {
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.05em;
	opacity: 0.75;
}
.ct-footer [data-row="bottom"] {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.ct-footer .ct-footer-copyright p {
	font-size: 13px;
	opacity: 0.8;
	letter-spacing: 0.02em;
}
.ct-footer .ct-social-box a {
	background: rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, transform 0.2s ease;
}
.ct-footer .ct-social-box a:hover {
	background-color: var(--sn-yellow);
	transform: translateY(-2px);
}
.ct-footer .ct-social-box svg {
	fill: #ffffff;
	transition: fill 0.2s ease;
}
.ct-footer .ct-social-box a:hover svg {
	fill: var(--sn-green);
}

/* ==========================================================================
   Accueil — bloc "Mot du Ministre" en aplat de couleur pleine, à la manière
   du bloc bleu de mctn.sn (message du ministre sur fond de couleur, texte
   blanc) plutôt qu'un simple encart blanc. Les vignettes "Secteurs" en
   dessous adoptent le même esprit : un aplat de couleur (vert/jaune/rouge)
   par-dessus la photo plutôt qu'un simple assombrissement.
   ========================================================================== */
/* Coins arrondis + padding symétrique 40px retirés : ça donnait à ce bloc
   l'aspect d'une carte flottante isolée, différent des autres sections en
   aplat de couleur du reste de la page (pleine largeur, coins carrés,
   padding vertical seul). On harmonise sur ce même gabarit.
   Fond blanc (au lieu du vert plein) : les couleurs de texte ci-dessous
   sont inversées en conséquence (vert/doré sur blanc plutôt que blanc sur
   vert), sans quoi le texte disparaîtrait. Un fin séparateur remplace le
   bloc de couleur pour distinguer la section du reste de la page blanche. */
.elementor-element-e3a3651 {
	background: #ffffff !important;
	padding: 50px 40px !important;
	border-top: 1px solid #e3e0d6;
	border-bottom: 1px solid #e3e0d6;
}
/* Sur mobile, la photo du Ministre s'étire à une hauteur démesurée (jusqu'à
   2000px) : son style "height: 100%" est pensé pour le bureau, où la photo
   égale la hauteur du bloc de texte à côté d'elle (mise en page en ligne).
   En colonne (mobile), ce même "100%" se calcule contre une référence tout
   autre et produit une bande verticale illisible. On repasse la photo en
   hauteur naturelle et on réduit le padding, qui mange sinon une bonne
   partie des 375px de large disponibles. */
@media (max-width: 767px) {
	.elementor-element-e3a3651 {
		padding: 24px !important;
	}
	.elementor-element-e3a3651 img {
		height: auto !important;
		max-height: 420px;
		object-fit: cover;
		width: 100% !important;
	}
	/* La règle globale des cartes uniformes (.wcf--image-box .thumb) donne à
	   ce même conteneur un fond clair qui s'étire en flex "stretch" jusqu'à
	   égaler la hauteur du bloc de texte voisin (très long ici) : 2000px de
	   bande vide. On le repasse en hauteur naturelle sur mobile. */
	.elementor-element-e3a3651 .thumb {
		height: auto !important;
		max-height: 420px;
		aspect-ratio: auto;
	}
}
.elementor-element-e3a3651 .subtitle,
.elementor-element-e3a3651 .title,
.elementor-element-e3a3651 .description {
	color: #1a5c3f !important;
}
.elementor-element-e3a3651 .subtitle {
	color: #ce1126 !important;
}
.elementor-element-e3a3651 .wcf-btn-default {
	background: #1a5c3f !important;
	color: #fff !important;
}
.elementor-element-e3a3651 .elementor-social-icon {
	background: rgba(26, 92, 63, 0.1) !important;
	color: #1a5c3f !important;
}
.elementor-element-e3a3651 .elementor-social-icon:hover {
	background: #e5b93c !important;
	color: #1a5c3f !important;
}

.elementor-element-b570651::before,
.elementor-element-cb7b0d3::before,
.elementor-element-ad455bd::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.elementor-element-b570651::before { background: rgba(26, 92, 63, 0.55) !important; }
.elementor-element-cb7b0d3::before { background: rgba(229, 185, 60, 0.55) !important; }
.elementor-element-ad455bd::before { background: rgba(206, 17, 38, 0.55) !important; }
.elementor-element-b570651 > .e-con-inner,
.elementor-element-cb7b0d3 > .e-con-inner,
.elementor-element-ad455bd > .e-con-inner {
	position: relative;
	z-index: 1;
}
.elementor-element-b570651 .elementor-button,
.elementor-element-cb7b0d3 .elementor-button,
.elementor-element-ad455bd .elementor-button {
	color: #fff !important;
	font-size: 1.35em !important;
	font-weight: 700 !important;
	border: none !important;
	background: transparent !important;
}

/* ==========================================================================
   Tout accordéon du site (Programmes & Projets, Organigramme, et tout futur
   accordéon) en grille de cartes plutôt qu'en liste repliée, à la manière du
   fil d'actualités de mctn.sn : le contenu est visible d'un coup, sans clic
   nécessaire. Le contenu et le balisage d'origine ne changent pas — seule la
   présentation est transformée, en CSS pur.
   ========================================================================== */
.wpr-advanced-accordion {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
	align-items: stretch;
}
.wpr-accordion-item-wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid #e3e0d6;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 10px -6px rgba(23, 41, 33, 0.15);
}
.wpr-acc-button {
	cursor: default;
	width: 100%;
	flex-shrink: 0;
}
/* Le panneau de contenu reste toujours visible : le plugin le masque par
   défaut (display: none) tant qu'il n'est pas l'item "actif" ; on force
   l'affichage de tous, quel que soit leur état. flex:1 pour que les cartes
   d'une même rangée s'alignent sur la même hauteur, quelle que soit la
   longueur du texte de chacune. */
.wpr-acc-panel {
	display: flex !important;
	flex-direction: column;
	flex: 1;
	max-height: none !important;
	visibility: visible !important;
	opacity: 1 !important;
}
.wpr-acc-panel-content {
	padding: 0 20px 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.wpr-acc-panel-content p {
	margin: 0;
	color: #4a5049;
	font-size: 14.5px;
	line-height: 1.55;
}
/* Le lien "En savoir plus" (dernier paragraphe) reste collé en bas de
   chaque carte, même quand la description au-dessus est courte. */
.wpr-acc-panel-content p:last-child:has(a) {
	margin-top: auto;
	padding-top: 12px;
}
/* Le petit "+/-" n'a plus lieu d'être une fois toutes les cartes ouvertes */
.wpr-toggle-icon {
	display: none !important;
}

/* Sous-titres "Programme N : …" sur Programmes & Projets : petit repère
   rouge pour les distinguer de l'intitulé de l'orientation au-dessus. */
.page-id-3823 .elementor-element-b01271c .wcf--title,
.page-id-3823 .elementor-element-67ab60b .wcf--title,
.page-id-3823 .elementor-element-3fe4fc3 .wcf--title,
.page-id-3823 .elementor-element-bc946ef .wcf--title,
.page-id-3823 .elementor-element-776d9ba .wcf--title {
	border-left: 3px solid var(--sn-red);
	padding-left: 14px;
}

/* ==========================================================================
   Page "Présentation" — reconstruite sur le modèle de mctn.sn/mctn/presentation :
   bloc ministre condensé (photo + nom + rôle), cadrage légal et missions
   "Au titre de…" par domaine. Les sections de mission sont en attente du
   texte officiel du Ministère (encart marqué "Contenu à venir").
   ========================================================================== */
.elementor-element-pr01imgw {
	max-width: 140px !important;
	width: 140px !important;
	flex-shrink: 0 !important;
}
.elementor-element-pr01imgw img {
	border-radius: 10px;
}

/* ==========================================================================
   Animations page d'accueil — en CSS pur, sans dépendance JS.
   Les widgets d'animation intégrés (compteurs, apparitions au scroll) ne se
   déclenchent pas de façon fiable sur ce site (optimisation d'assets qui
   interfère avec les scripts). Le CSS, lui, fonctionne toujours.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	@keyframes mincom-fade-up {
		from { opacity: 0; transform: translateY(16px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	/* Cartes de services (Commerce / Industrie / PME-PMI, Espace Entreprise, etc.) :
	   légère élévation au survol pour signaler l'interactivité */
	.wcf--image-box {
		transition: transform 0.25s ease, box-shadow 0.25s ease;
	}
	.wcf--image-box:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 28px -12px rgba(23, 105, 68, 0.35);
	}

	/* Chiffres clés : les valeurs réagissent légèrement au survol de leur bloc */
	.number-percentage {
		display: inline-block;
		transition: transform 0.25s ease;
	}
	.elementskit-funfact:hover .number-percentage {
		transform: scale(1.08);
	}

	/* Révélation douce au défilement pour les cartes et les chiffres clés,
	   avec repli silencieux (contenu déjà visible) sur les navigateurs qui ne
	   supportent pas encore animation-timeline (ex. Safari). */
	@supports (animation-timeline: view()) {
		.elementskit-funfact,
		.wcf--image-box {
			animation: mincom-fade-up 0.6s ease-out both;
			animation-timeline: view();
			animation-range: entry 0% cover 30%;
		}
	}
}

/* ==========================================================================
   Galerie photos des actualités — section injectée en bas de l'article
   (voir functions.php) : mêmes codes visuels que le reste du site (titre
   vert + liseré tricolore, cartes à coins arrondis), grille responsive et
   visionneuse plein écran.
   ========================================================================== */
.mincom-gallery-section {
	max-width: 1140px;
	margin: 48px auto 0;
	padding: 32px 20px 0;
	border-top: 1px solid #e3e0d6;
}
.mincom-gallery-title {
	color: var(--sn-green, #1a5c3f);
	font-weight: 700;
	position: relative;
	padding-bottom: 18px;
	margin: 0 0 24px;
}
.mincom-gallery-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 72px;
	height: 4px;
	border-radius: 3px;
	background: linear-gradient(
		to right,
		var(--sn-green, #1a5c3f) 0 33.33%,
		var(--sn-yellow, #e5b93c) 33.33% 66.66%,
		var(--sn-red, #ce1126) 66.66% 100%
	);
}
.mincom-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 14px;
}
.mincom-gallery-item {
	display: block;
	padding: 0;
	border: none;
	border-radius: 10px;
	overflow: hidden;
	cursor: zoom-in;
	aspect-ratio: 4 / 3;
	background: #f0f0ec;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mincom-gallery-item:hover,
.mincom-gallery-item:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px -10px rgba(23, 92, 63, 0.4);
}
.mincom-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mincom-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(15, 26, 20, 0.92);
	padding: 40px;
}
.mincom-lightbox.is-open {
	display: flex;
}
.mincom-lightbox-img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 6px;
	box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
}
.mincom-lightbox-close,
.mincom-lightbox-prev,
.mincom-lightbox-next {
	position: absolute;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease;
}
.mincom-lightbox-close:hover,
.mincom-lightbox-prev:hover,
.mincom-lightbox-next:hover {
	background: var(--sn-yellow, #e5b93c);
	color: #1a2a20;
}
.mincom-lightbox-close {
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	font-size: 26px;
	line-height: 1;
}
.mincom-lightbox-prev,
.mincom-lightbox-next {
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	font-size: 30px;
	line-height: 1;
}
.mincom-lightbox-prev {
	left: 20px;
}
.mincom-lightbox-next {
	right: 20px;
}
@media (max-width: 600px) {
	.mincom-lightbox {
		padding: 16px;
	}
	.mincom-lightbox-prev,
	.mincom-lightbox-next {
		width: 40px;
		height: 40px;
		font-size: 22px;
	}
	.mincom-lightbox-close {
		top: 10px;
		right: 10px;
	}
}