/* changement couleur primary */

:root {
  --bs-primary: #6b48d5;
}

/* Pour corriger certaines couleurs de texte ou hover si nécessaire */
a {
	color: var(--bs-primary);
}
a:hover {
  color: #36188f;
}

.bg-primary {
	background-color: var(--bs-primary) !important;
}
.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-primary:hover {
  background-color: #4f2fad;
  border-color: #4f2fad;
}
.btn-outline-primary {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.text-primary {
  color: var(--bs-primary) !important;
}
.text-primary-2 {	
	color: #5b4896;
}

/*****/

p {margin-bottom: 10px}
.lead {font-size:125%}

.back-url { text-decoration:none; font-size:90%;}


body {
	background-color: #fafafa
}

.purple-block {
	/* color: var(--bs-primary); */
	color: #5b4896;
	/* background-color:#f0edf5;  */
	background: linear-gradient(225deg, #fff, #e2ddeb);  
	border-radius:15px; 
	padding:40px; 
	padding-top:30px;
	border: 1px solid #eee;
}



.purple-block	h2 {	
	font-size: 130%;
	letter-spacing:-1px;
	color: #333;
	margin-top: 0px;
	margin-bottom: 0px;
}

.purple-block table {
	color: #5b4896;
	border-color: #c5c2cf;
}

.input-block {
	padding:30px; 
	border:1px solid #8579a8; 
	border-radius: 15px
}

.alert {	
	border-radius:15px;
}

.alert h2  {
	font-size: 130%;
	letter-spacing:-1px;
	margin-top: 0px;
	margin-bottom: 0px;
}


/* Accordion à la charte graphique */
.accordion-item,
.accordion-header,
.accordion-button {						  
  border-radius: 15px 15px 0 0 !important;
}

.accordion-button.collapsed {
	border-radius: 15px !important;							 
}

.accordion-body { padding: 60px }

.accordion-button {
  background: linear-gradient(225deg, #fff, #e2ddeb);
  padding: 20px 30px;

  color: #333;
  box-shadow: none;
}

.accordion-item {
	border:none !important;
	border-radius: 15px !important;
	border:1px solid #eee !important;
}

.accordion-header	h2 {	
	font-size: 130%;
	letter-spacing:-1px;
	color: #333;
	margin-top: 0px;
	margin-bottom: 0px;
}


/* Facultatif : éviter la flèche bleue */
.accordion-button:focus {
	border:none;
	box-shadow: none;
}

/* Supprimer la bordure en bas par défaut */
.accordion-button::after {
	border:none;
  filter: invert(20%);
}


.blur {filter: blur(4px); user-select: none;}

.alert-info {background-color: #edf8fa; border-color: #cce0e6}

.table-label {font-weight:300; font-size:112%}

@media (max-width: 768px) {.table-label {font-size:100%}}

.btn-outline-warning { color: #ec9b00; border-color: #ec9b00}

.text-warning { color: #ec9b00 !important }

.blur-pricing {height:300px; background-image: url("assets/blur-pricing.jpg"); background-position: top center; background-size: contain; background-repeat: no-repeat;}

input::placeholder { color: #aaa !important }

.form-spacing { margin-bottom: 13px }

.tooltip-inner{ max-width:400px; background-color:#140145; padding:15px; text-align: left;}	

.mb-4-5 {margin-bottom: 29px}

table th {font-weight: 500}

b { font-weight: 500	}

h1 {
	font-size: 270%;
	margin-top:80px;
	margin-bottom:40px;
	letter-spacing:-2.4px;
	line-height:1.4;
}

h2 {	
	font-size: 180%;
	margin-top:15px;	
	margin-bottom:40px;
	letter-spacing:-1.3px;
}

h3 {	
	font-size: 150%;
	margin-top:30px;	
	margin-bottom:15px;
	letter-spacing:-1px;
}

header {
	margin-top:20px;
	color: var(--bs-primary);
	font-weight: 500;
	font-size:115%;
}

/* pour que tout le bouton delete soit cliquable, y compris sur l'icône au centre du bouton */
.delete-row i {
  pointer-events: none;
}

/* un peu plus de largeur */
.decote-bspce-container {
	font-size:95% ;
	max-width: 1425px ;  
	margin: 0 auto ;
}


/* figer la premiere col tableau sensi */
.sensi-table th:first-child, .sensi-table td:first-child {
  position:sticky;
  left:0;
}
.sensi-table td, .sensi-table th {	
	padding-left: 30px;
	padding-right: 30px;
}


/* fade in lorsqu'on ajoute une nouvelle ligne */
tr.fade-in {
  animation: fadeIn 0.6s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* loader spinner */
#loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
 }
 
  
/* Pour éviter le "saut" visuel du spinner de la page au chargement */
html {overflow-y: scroll;}
 
/* Quand la modal est ouverte, supprimer aussi le scroll sur html */
html.modal-open {
  overflow: hidden !important;
}

/* Et désactiver les compensations de Bootstrap */
body.modal-open {
  overflow: hidden !important;
  padding-right: 0 !important;
}

/* Optionnel : éviter scroll inutile dans la modal elle-même */
.modal.modal-fullscreen {
  overflow: hidden;
}

/* noUiSlider */
.noUi-connect {
    background: #0d6efd;
}
.noUi-handle {    
    border-radius: 20%;
    background: #fff;
    border: 1px solid #0d6efd;
    top: -10px !important; /* Ajuste par rapport à la hauteur de la piste */
    cursor: grab;    
    transition: box-shadow 0.2s, border-color 0.2s;
	 
}
.noUi-tooltip {    
	 color : #0d6efd;
	 font-weight: bold;
    letter-spacing: 0.5px; 
	 border-color: #bbb;
	 padding: 8px;
}
.noUi-target {
	height: 8px;
}


/**** Carousel welcome screen ****/

/* Flèches plus discrètes */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1) brightness(1.2);  /* moins foncé */
  width: 1.6rem;
  height: 1.6rem;
}

/* Flèches plus éloignées du centre */
.carousel-control-prev {
  left: -4rem;
}

.carousel-control-next {
  right: -4rem;
}

/* Indicateurs (points) */
.carousel-indicators [data-bs-target] {
  background-color: rgba(0, 0, 0, 0.4);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 5px;
  border: none;
}

.carousel-indicators .active {
  background-color: rgba(0, 0, 0, 0.85);
}

/* Modal extra large personnalisé */
.modal-xl {
  max-width: 67%;
}
.modal .btn-close {
  z-index: 1056; /* supérieur au z-index du modal backdrop (1050) et du carousel */
}

/* pour faire apparaitre correctement le modal welcome sur mobile */
@media (min-width: 992px) { /* >= lg */
  .custom-xl-desktop {
    max-width: 1140px;
    width: 100%;
  }
}
@media (max-width: 991px) {
  .carousel-control-prev,
  .carousel-control-next {
    display: none;
  }
}
@media (max-width: 991px) {
  .carousel-indicators [data-bs-target] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
}