@charset "utf-8";
/* CSS Document */

html, body {
  color:rgba(0,0,0,1.00);
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-weight: 700
}
.modal input{
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
.modal label{
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
.modal button{
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
.tooltip > .tooltip-inner {
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, "sans-serif";
  color:#3da2fd;
  background-color: #f4f6f6;
}
h2 {
  text-align: center;
}
#renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
}

.toolBox{
  position:absolute;
  top:0px;
  left:35px; 
  background-image: url("../images/toolBox/toolBoxBG.png"); 
  display:none;
  height:27px;
}
.toolBoxBtn{
  margin: 2px;
  padding:0;
  width:23px;
  height:23px;
  justify-content: center;
    align-items: center;
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
}
.itemsCatalogue img {
  width: 165px;
  height: 165px;
  object-fit: contain;
}
.menuItems{
  float:right;
  margin-right: 20px;
}
#moduleName{
  background-image: url("../images/toolBox/toolBoxBG.png"); 
  position:absolute; 
  top:0px; 
  left:95px;
  padding:4px;
  height:28px;
  white-space: nowrap;
}
#moduleInfos{
  background-image: url("../images/toolBox/toolBoxBG.png"); 
  position:absolute; 
  top:34px; 
  left:95px;
  padding:4px;

  white-space: nowrap;
}
.form-check-input {
  background-color: #b2daff;
  cursor: pointer;
}
.form-check-input:checked {
  background-color: #3da2fd;
}

.dropend a{
  min-width: 223px;
  white-space: normal;
}
.dropdown-item ul{
  list-style: none;
  padding-left: 2px;
  display: inline;
  color:#3da2fd;
}
.dropdown-item h4{
  margin-bottom: 6px;
  width:165px;
  padding-top:6px;
  text-align: center;
  white-space: normal;
  border-top: solid #3da2fd;
  color:#3da2fd;
}
.itemsList{
  margin-left:-24px;
  flex-direction: column;
}
.itemsList img{
  cursor: grab;
  background-color: #3da2fd;
}
.itemPersons{
  /*background-color: white;
  -webkit-mask-image: url(../images/man.svg);
  mask-image: url(../images/man.svg);
  mask-repeat: no-repeat;*/
  color:#3da2fd;
  background-image: url(../images/manBlue.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  padding-left:26px;
  margin-top:6px;
  margin-left:-134px;
}
.itemPrice{
  color:#3da2fd;
  background-image: url(../images/ticket-liBlue.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  padding-left:26px;
  margin-top:-20px;
  margin-right: -94px;
}
.form-switch{

}
.icon{
  color:#3da2fd;
}
.divider {
  border-left: 2px solid #d3d3d4;
  width:1px;
  height:20px;
  margin:0 10px;
}
.dividerCategories {
  border-top: 1px solid #3da2fd;
  width:150px;
  height:1px;
  margin-left:44px;
}
.labelSettings{
  margin-left:44px; 
  margin-bottom: 2px;
}
.inputSettings{
  margin-left:44px; 
  max-width: 170px;
  padding: 0;
}
.projects{
  cursor: pointer;
}
.environnements{
  cursor: pointer;
}
#modal-notice {
  font-weight:400;
}
.notice-item {
  list-style: inside;
  list-style-position: outside
}
/* HTML: <div class="loader"></div> */
#loader {
  position:absolute;
  top: 50%;
  left: 50%;
  display:none;
}
/* HTML: <div class="loader"></div> */
*{margin:0;padding:0;text-decoration:none;list-style:none;box-sizing:border-box;}
.loader {
 width: 48px;
height: 48px;
border: 5px solid #FFF;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}

@keyframes rotation {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
} 
.logoBoaz {
  padding: 0;
  cursor:pointer;
}
button{
  justify-content: center;
  align-items: center;
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  color: white;
  font-family: 'Arial Black';
  transition: color .4s ease;
}
.btnLogicielLandingPage {
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-weight: bold;
  cursor: pointer;
  border: 0px solid rgb(187, 204, 0);
  font-size: 15px;
  color: rgb(255, 255, 255);
  padding: 8px 30px;
  transition: 208ms;
  width: 240px;
  height:40px;
  box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
  border-radius: 8px;
  background: rgb(0, 136, 255);
  border-color: rgb(214, 214, 214);
  border-width: 1px;
  border-style: solid;
  --hover-bgc: #ffffff;
  --hover-color: #0088ff;
  --hover-borderc: #d6d6d6;
  --hover-width: 335px;
  --hover-borderSize: 1px;
}

.btnLogicielLandingPage:hover{
color: rgb(0, 136, 255);
background: rgb(255, 255, 255);

} 
.btnLandingPage {
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-weight: bold;
  cursor: pointer;
  border: 0px solid rgb(187, 204, 0);
  font-size: 15px;
  color: rgb(0, 136, 255);
  padding: 8px 30px;
  transition: 208ms;
  width: 240px;
  height:40px;
  margin-left: 25px;
  box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px;
  border-radius: 8px;
  background: rgb(255, 255, 255);
  border-color: rgb(0, 136, 255);
  border-width: 1px;
  border-style: solid;
  --hover-bgc: #ffffff;
  --hover-color: #0088ff;
  --hover-borderc: #d6d6d6;
  --hover-width: 335px;
  --hover-borderSize: 1px;
  }

.btnLandingPage:hover{
  color: rgb(255, 255, 255);
  background: rgb(0, 136, 255);
  fill: red;
}

#gallery{
  width:100%;
  height:100%;
  position: absolute;
  background-color: rgba(255,255,255,1.00);
  z-index:1400;
  overflow: auto;
}
#landingPage{
  width:100%;
  height:100%;
  position: absolute;
  background-color: rgba(255,255,255,1.00);
  z-index:1500;
}
#landingPageContainer {
  z-index:1000; 
  width:1200px;
  margin:110px 0 0 300px;
  position: absolute; 
  background-image: linear-gradient(to right, rgba(255,255,255,0.85), rgba(255,255,255,0));
}
#landingPageContainer > div {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}
#landingLeftColumn {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Colonne droite */
#landingRightColumn {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.nav-link{
  cursor:pointer;
}
.dispNoneNavItems,
.dispNone {
  display: none !important;
}

/* force style slider budget (spécificité + neutralisation) */
#budgetRange.noUi-target,
#budgetRange .noUi-target {
  height: 4px !important;
  background: #e9ecef !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 999px !important;
}

/* couches internes */
#budgetRange .noUi-base,
#budgetRange .noUi-connects,
#budgetRange .noUi-connect {
  height: 4px !important;
}

#budgetRange .noUi-connect {
  background: var(--tblr-primary) !important;
  border-radius: 999px !important;
}

/* poignées */
#budgetRange .noUi-handle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tblr-primary) !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 2px rgba(var(--tblr-primary-rgb), 0.3) !important;
}

#budgetRange .noUi-handle:before,
#budgetRange .noUi-handle:after {
  display: none !important;
}

/* centrage vertical poignée */
#budgetRange.noUi-horizontal .noUi-handle,
#budgetRange .noUi-horizontal .noUi-handle {
  top: -7px !important; /* (18/2)-(4/2) */
}



 /* Durée pilotée par variable CSS (surchargée via JS) */
#toolBoxID{ --tbx-dur:350ms; }

/* État initial / ouvert (entrée = slide gauche, sans scale) */
#toolBoxID{
  opacity: 0;
  transform: translateX(-10px);  /* -12px → -10px */
  pointer-events: none;
  transition:
    opacity var(--tbx-dur) cubic-bezier(.22,.61,.36,1),
    transform var(--tbx-dur) cubic-bezier(.22,.61,.36,1);
}
#toolBoxID.is-open{
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Fermeture finale du container : FADE SEUL (pas de translate) */
#toolBoxID.is-closing{
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tbx-dur) cubic-bezier(.22,.61,.36,1);
}

/* === Entrées enfants === */
#toolBoxID #moduleName{
  opacity: 0;
  transform: translateX(-8px);   /* -10px → -8px */
  transition: opacity var(--tbx-dur) ease, transform var(--tbx-dur) ease;
}
#toolBoxID.stage-name #moduleName{
  opacity: 1;
  transform: translateX(0);
}

#toolBoxID #xtremTowerPanel{
  opacity: 0;
  transform: translateY(8px);    /* 10px → 8px */
  transition: opacity var(--tbx-dur) ease, transform var(--tbx-dur) ease;
}
#toolBoxID.stage-panel #xtremTowerPanel{
  opacity: 1;
  transform: translateY(0);
}

/* moduleInfos : entrée top -> bottom (10px → 8px) */
#toolBoxID #moduleInfos{
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--tbx-dur) ease, transform var(--tbx-dur) ease;
}
#toolBoxID.info-open #moduleInfos{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* === xtColorBox : droite → gauche (10px → 8px) === */
#toolBoxID #xtremTowerPanel #xtColorBox{
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--tbx-dur) ease, transform var(--tbx-dur) ease;
}
#toolBoxID.stage-color #xtremTowerPanel #xtColorBox{
  opacity: 1;
  transform: translateX(0);
}

/* === Fermeture séquencée (ordre : color → panel → name → container) === */

/* Étape 1 : xtColorBox repart à droite (10px → 8px) */
#toolBoxID.closing-color #xtremTowerPanel #xtColorBox{
  opacity: 0;
  transform: translateX(8px);
}

/* Étape 2 : panel descend + infos remontent (10px → 8px) */
#toolBoxID.closing-panel #xtremTowerPanel{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--tbx-dur) ease, transform var(--tbx-dur) ease;
}
#toolBoxID.closing-panel #moduleInfos{
  opacity: 0;
  transform: translateY(-8px);
}

/* Étape 3 : moduleName repart à gauche (10px → 8px) */
#toolBoxID.closing-name #moduleName{
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--tbx-dur) ease, transform var(--tbx-dur) ease;
}

/* Étape 4 : container → fade only via .is-closing (ci-dessus) */


/* Étape 4: fade final du conteneur (il disparait) */
#toolBoxID.is-closing{
  opacity:0; /* <-- uniquement l'opacité ici */
  /* on peut garder une légère translation si tu veux, sinon retire : */
  transform: translateX(-10px) scale(.98);
  pointer-events:none;
}
/* État initial de la box couleurs (cachée, prête à glisser depuis la gauche) */
#toolBoxID #xtremTowerPanel #xtColorBox{
  opacity: 0;
  transform: translateX(10px); /* vient de la droite */
  transition: opacity var(--tbx-dur) ease, transform var(--tbx-dur) ease;
}
#toolBoxID.stage-color #xtremTowerPanel #xtColorBox{
  opacity: 1;
  transform: translateX(0);
}

/* --- FERMETURE SÉQUENCÉE --- */
/* ÉTAPE 1 : d'abord xtColorBox (droite) */
#toolBoxID.closing-color #xtremTowerPanel #xtColorBox{
  opacity: 0;
  transform: translateX(10px);
}

/* ÉTAPE 2 : puis xtremTowerPanel (bas) */
#toolBoxID.closing-panel #xtremTowerPanel{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--tbx-dur) ease, transform var(--tbx-dur) ease;
}

/* ÉTAPE 3 : puis moduleName (gauche) */
#toolBoxID.closing-name #moduleName{
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--tbx-dur) ease, transform var(--tbx-dur) ease;
}

/* ÉTAPE 4 : enfin le container (fade seul) */
#toolBoxID.is-closing{
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tbx-dur) cubic-bezier(.22,.61,.36,1);
}
.mi-doc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--link-color, #1a73e8);
  text-decoration: none;
  transition: color 0.2s ease;
}

.mi-doc svg {
  stroke: #1a73e8;
  transition: transform 0.2s ease;
}

.mi-doc:hover {
  text-decoration: underline;
}

.mi-doc:hover svg {
  transform: translateX(6px);
}
.mi-thumb {
  cursor: pointer;
  transition: transform 0.18s ease;
  will-change: transform;
}

.mi-thumb:hover {
  transform: translateY(-3px) scale(1.03);
}

.mi-thumb:active {
  transform: translateY(0) scale(0.97);
}
/* image */
.mi-lb-img{
  max-width: 100%;
  max-height: 75vh;
  border-radius: 12px;
  display: inline-block;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 1;
  transition: opacity .18s ease;
}

.mi-lb-img.is-fading{
  opacity: 0.5;
}


/* zone modal-body : flèches en overlay */
.mi-lb-body{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* flèches */
.mi-lb-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.12);
  color: #fff;
  transition: transform .18s ease, background .18s ease;
}

.mi-lb-arrow:hover{
  background: rgba(255,255,255,.18);
}

/* déplacement directionnel */
.mi-lb-prev:hover{
  transform: translateY(-50%) translateX(-4px);
}

.mi-lb-next:hover{
  transform: translateY(-50%) translateX(4px);
}
.mi-lb-prev:hover svg{
  transform: translateX(-6px);
}

.mi-lb-next:hover svg{
  transform: translateX(6px);
}
.mi-lb-prev{ left: 14px; }
.mi-lb-next{ right: 14px; }

.mi-lb-arrow svg{
  width: 72px; 
  height: 72px;  
  transition: transform .18s ease;
}

#carouselParc {
  position: absolute;
  top: 110px;
  right: 40px;
  width: 700px;
  height: 350px; 
  overflow: hidden;
}

/* Base */
#carouselParc .carousel-track {
  width: 100%;
  height: 100%;
}

#carouselParc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;      /* non cliquable */
}

/* ========== MODE BLUR (fondu + flou) ========== */

#carouselParc.mode-blur .carousel-track {
  position: relative;
}

#carouselParc.mode-blur img {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(10px);
  transition:
    opacity 1.2s ease-in-out,
    filter 1.2s ease-in-out;
}

#carouselParc.mode-blur img.active {
  opacity: 1;
  filter: blur(0);
}

/* ========== MODE SLIDE (transition position) ========== */

#carouselParc.mode-slide .carousel-track {
  display: flex;
  height: 100%;
  transform: translateX(0);
  transition: transform var(--slide-duration, 0.8s) ease-in-out;
}

#carouselParc.mode-slide img {
  position: relative;
  flex: 0 0 100%;   /* chaque image = 100% de la largeur */
  opacity: 1;
  filter: none;
}