/*.photo-artiste{
  width:40px;
  height:auto;
 
}
.photo-artiste img{
  max-width:100%;
  height:auto;
 Qmax-height:100%;
}*/



.fade{
transition:opacity 0.15s linear;
}
@media (prefers-reduced-motion:reduce) {
 .fade{/**????*/
   QQtransition: none; 
 }
}
.fade:not(.show){
opacity:0;
}


.modal-header-box-img{
/*On a tout rangé selon format Player ???*/
justify-content:start;
align-items:center;
overflow:hidden;
margin-left:10px;
}
.modal-header-box-img.tsi-albomu{
width:35px;
height:calc(35px * 0.5625);
}
.modal-header-box-img.yinu-albomu,
.modal-header-box-img.woyi-mwimbhajyi{
width:30px;
height:30px;
}
.modal-header-box-img.woyi-mwimbhajyi{
border-radius:50%;
}
.modal-header-box-img img{
max-width:100%;
height:auto;
position:relative;
display:block;
}


.modal-body-content{
margin:40px 0;
}
/*Moda+*/body.modal-open {
  QQheight: 100vh;
  QQoverflow-y: hidden;
}

/****?? hindri? À SUPP ? ??****/.modal.jimbo h3{font-size:14px;font-size:1.4rem;color:red;}
.modal {
  Qmargin-bottom:40px !important;
  Qheight:100vh;
  
  --bs-modal-zindex: 1055;
  --bs-modal-width: 500px;
  --bs-modal-padding: 1rem;
  --bs-modal-margin: 0;/*0.5rem 0 !important ;*/
            margin:0; /*0.5rem 0;*/
  --bs-modal-color:#e6e6e6;
  --bs-modal-bg: red;/*var(--bs-body-bg);*/
  --bs-modal-border-color: var(--bs-border-color-translucent);
  --bs-modal-border-width: 1px; /*var(--bs-border-width);*/
  --bs-modal-border-radius: var(--bs-border-radius-lg);
  --bs-modal-box-shadow: var(--bs-box-shadow-sm);
  --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: #000;/*var(--bs-border-color);*/
  --bs-modal-header-border-width: 1px; /*var(--bs-border-width);*/
  --bs-modal-title-line-height: 1.5;
  -QQ-bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: ;
  --bs-modal-footer-border-color:transparent;/*var(--bs-border-color);*/
  --bs-modal-footer-border-width: 1px; /*var(--bs-border-width);*/
  position: fixed;
  bottom:0;
  left: 0;
  z-index: 9998 !important;
  display: none;
  width: 100%;
  /*height: 100%;*/
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;

}

.modal-dialog {
  position: relative;
  width: auto;
  Qmargin:var(--bs-modal-margin);

  pointer-events: none;


}
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
 /* OR: transform: translate(0, -50px);*/
/*Moda: */ transform: translate(0, 100vh);		
}
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}
.modal.show .modal-dialog {
  transform: none;
}
.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}

.modal-dialog-scrollable {
  height: calc(100% - var(--bs-modal-margin) * 2);
}
.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  Qmin-height: calc(100% - var(--bs-modal-margin) * 2);
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
height:calc(100vh - 45px);/*moda+*/
	
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: #262626; Qvar(--bs-modal-bg);
  Qbackground-clip: padding-box;
  Qborder: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  Qborder-radius: var(--bs-modal-border-radius);
  outline: 0;
}
.modal-content-info-jimbo{
height:calc(100vh - calc(100vw * 0.5625) - 50px );

}
.modal-backdrop {
  -Q-bs-backdrop-zindex: 1050;
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.5;
  position: fixed;
  bottom:0; /*(OR top: 0;)*/
  left: 0;
  z-index: 9997; /* var(--bs-backdrop-zindex);*/
  width: 100vw;
  height: 100vh;/*ICI moda+ ????
REMARQUE : EN le mettant à 100vh,
ça permet de désactiver le contrôle
du player quand modal single est ouverte, si la modal ne couvre
pas toute la hauteur.
Si la modal couvre toute la hauteur, alors player non manipulable,
sauf à modifier son z-index, etc.*/
  background-color:#fff; /*var(--bs-backdrop-bg);*/


}
.modal-backdrop.fade {
  opacity: 0;
}
.modal-backdrop.show {
  opacity: .6;/*var(--bs-backdrop-opacity);*/
	
}

.modal-header {
  display: flex;
  Qflex-shrink: 0;
  align-items: center;
  padding: var(--bs-modal-header-padding);
  padding-left:0;/*M+*/
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
  Qborder-top-left-radius: var(--bs-modal-inner-border-radius);
  Qborder-top-right-radius: var(--bs-modal-inner-border-radius);
}
.modal-header .btn-close {
  padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5);
  margin: calc(-0.5 * var(--bs-modal-header-padding-y)) calc(-0.5 * var(--bs-modal-header-padding-x)) calc(-0.5 * var(--bs-modal-header-padding-y)) auto;
}

.modal-title {
padding:0;/*M+*/
margin-left:10px;/*M+*/
  margin-bottom: 0;/*????*/
  line-height: var(--bs-modal-title-line-height);
}
									
										  
.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--bs-modal-padding);
}

.modal-footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: var(--bs-modal-padding);
  background-color: var(--bs-modal-footer-bg);
  border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
  border-bottom-right-radius: var(--bs-modal-inner-border-radius);
  border-bottom-left-radius: var(--bs-modal-inner-border-radius);
	
	Qmargin-bottom:4Opx;/*M+*/												  
															  
}
.modal-footer > * {
  QQmargin: calc(var(--bs-modal-footer-gap) * 0.5);
}

/***********
  
*************/