html, body,section, input{
	margin:0px;
	padding:0px;	
	/*overflow:hidden;	*/
	
}

html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}
section.etape3, body.etape3{
	overflow:hidden;	
	height:100%;
}

html, body,section, input, div{
	font-family:"Open Sans", sans-serif;
	color:#363F5A;
	font-size:14px;
	
}
svg.canvas rect{
	border:5px solid #FF0000;	
}
.editor {
    height: 100%;
	width:100%;
    position: absolute;
    top: 0;
    left: 0;
   /* margin-left: 78px;
    margin-top: 50px;*/
	background-image: url(../images/editor-background.png);
    background-repeat: repeat;
	background-position:-21px -21px;
}
.etape3-search:before{
	right:-4px;
}


.editor.dark {
	background-image: url(../images/editor-background-dark.png);

}
.editor .resizer{
	position:absolute;
    border: 1px dashed #57ac3e;
    pointer-events: none;
    z-index: 2;	
	opacity:0;
    /*visibility: hidden;*/
}

#svg-editor-canvas *{

    transform-origin: 0px 0px 0px;

}
.editor .resizer .ui-resizable-handle{
	position: absolute;
    width: 15px;
    height: 15px;
    background-color: #57ac3e;
    border: 2px solid white;
    border-radius: 16px;
    pointer-events: auto;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition-property: background-color, -webkit-transform;
    -moz-transition-property: background-color, -moz-transform;
    transition-property: background-color, transform;
    -webkit-transition-duration: 0.1s;
    -moz-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    transition-timing-function: linear;
}

.resizer .ui-resizable-handle:hover {
    background-color: #4a8738;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.ui-resizable-resizing .ui-resizable-handle
{
    background-color: #4a8738;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.ui-resizable-nw {
    top: -10px;
    left: -10px;
    cursor: nw-resize;
}

.editor .resizer .ui-resizable-handle.ui-resizable-n {
    cursor: n-resize;
    top: -8px;
    left: 50%;
    border-radius: 0;
	margin-left:-7px
}

.editor .resizer .ui-resizable-handle.ui-resizable-s {
    cursor: s-resize;
    bottom: -8px;
    left: 50%;
    border-radius: 0;
	margin-left:-7px
}

.editor .resizer .ui-resizable-handle.ui-resizable-w {
    cursor: w-resize;
    top: 50%;
    left: -8px;
    border-radius: 0;
	margin-top:-7px
}
.editor .resizer .ui-resizable-handle.ui-resizable-e {
    cursor: e-resize;
    top: 50%;
    right: -8px;
    border-radius: 0;
	margin-top:-7px
}

.ui-resizable-ne {
    top: -10px;
    right: -10px;
	cursor: url(../cursors/resize-cursor-ne.svg) 12 12, ne-resize;

	
}

.ui-resizable-sw {
    bottom: -10px;
    left: -10px;
    cursor: sw-resize;
}

.ui-icon, .ui-widget-content .ui-icon
{
      background-image : none;
}
.ui-resizable-se {
    bottom: -10px;
    right: -10px;
    cursor: se-resize;
}

.rotator-nw, .ui-rotatable-handle-nw {
    top: -30px;
    left: -30px;
	cursor:nesw-resize;	
   /* cursor: url(../cursors/rotate-cursor-nw.svg) 12  12, auto;*/
	/*background-color:green;*/
}
.rotator-ne, .ui-rotatable-handle-ne {
    top: -30px;
    right: -30px;
    cursor: url(../cursors/rotate-cursor-ne.svg), auto;
	/*background-color:red;*/
}

.rotator-sw,  .ui-rotatable-handle-sw {
    bottom: -30px;
    left: -30px;
    cursor: url(../cursors/rotate-cursor-sw.svg), auto;
	/*background-color:blue;*/
}

.rotator-se,  .ui-rotatable-handle-se {
    bottom: -30px;
    right: -30px;
    cursor: url(../cursors/rotate-cursor-se.svg), auto;
	/*background-color:#FF0;*/
}

.rotator, .ui-rotatable-handle {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 16px;
    pointer-events: auto;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.editor > * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.editor .resizer.active{
	opacity: 1 !important;
    visibility: visible;
}

.sidebar {

}
.sidebar{
	z-index:6;
/*	position:absolute;*/
	position:fixed;
	height:100%;

    background-color: #F9FBFF;
    width:72px;

	top: 50px;
	display:inline-block;
	
	 -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	-webkit-transition: width 150ms ease-out;
    -ms-transition: width 150ms ease-out;
    transition: width 150ms ease-out;
}


/*
.sidebar.active .config-button:before{
	-webkit-transition: transform 150ms ease-out;
    -ms-transition: transform 150ms ease-out;
    transition: transform 150ms ease-out;
	transform: scale(1,1);
}

.sidebar.active .config-button:before{
	 transform: scale(0.9,0.9);
}*/


  
  .container-etape-bar
  {
      display:inline-block;
	  margin: 0px auto; 
	  margin-top:7px;
  }
  
  .etape-bar {
    margin:0px;
	padding:0px;
	float:left;
	margin-left:auto;
	margin-right:auto;
  }


  .edit-bar .active:before{
	  color:#0BADA4
  }
 .detail-shape.active svg *{
	  fill:#0BADA4
  }
  
  .detail-shape svg *{
	  fill:#9696A6;
  }


.config-button div {
    font-size: 12px !important;
    color: #363F5A;


}
  .config-button{
	 font-size:12px;
	 text-align:center; 
	 padding:0px;
	 padding-top:17px;
	 padding-bottom:16px;
	 
	 position:relative;
	 cursor:pointer;
	 border-bottom:1px solid #DFE5EB;

	  -webkit-transition: background-color 150ms linear;
      -ms-transition: background-color 150ms linear;
      border-right: 1px solid #DFE5EB;
}

.sidebar .fill {
    flex-grow: 1;
    border-right: 1px solid #DFE5EB;
}
.config-button.active{
    border-right-color:transparent;
}

.sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh; /* pleine hauteur de la fenêtre */
}

.config-button:hover{
  background-color:#F0F4FA;
}
.config-button:before{
  display:inline-block;
  text-align: center;
  background-position: center;
  width: 72px;
  background-repeat: no-repeat;
  content:'';
  margin-bottom:5px;
}

.sidebar div:last-child,{
    border-bottom: none;
}


.config-button.icon-textes:before{
    background-image: url(/images/engine/svg/texts.svg);
    height:21px;
}

.config-button.icon-icones:before{
    background-image: url(/images/engine/svg/icons.svg);
    height:24px;
}

.config-button.icon-finitions:before{
    background-image: url(/images/engine/svg/details.svg);
    height:25px;
}
.config-button.icon-background:before{
    background-image: url(/images/engine/svg/bg-color.svg);
    height:27px;
}

.config-button.icon-favoris:before{
    background-image: url(/images/engine/svg/favoris.svg);
    height:27px;
}

.config-button.icon-tutorial:before{
    background-image: url(/images/engine/svg/tutorials.svg);
    height:27px;
}
.config-button.icon-undo:before{
    background-position:0px -195px;
    height:21px;
}
.config-button.icon-redo:before{
    background-position:0px -232px;
    height:21px;
}
.config-button.icon-tutoriel:before{
    background-position:0px -279px;
    height:20px;
}

.config-button.icon-info:before{
   background-image: url(/images/engine/svg/template.svg);
   height:27px;
}


.config-button.active{
  background-color:#fff;
}

.edit-bar{
/*padding:15px;*/
	z-index:4;
	position:fixed;
	    top: 50px;
	left:-195px;
	width:268px;
	height:100%;
	background-color:#fff;
	border-right:1px solid #e3e3e8;
	box-shadow:4px 0 8px -4px #e3e3e8;
	pointer-events: none;
	/*padding-top:15px;*/
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	padding-bottom:50px
	
}

.edit-bar.active{
	pointer-events:auto;
}



.title-block{
	border-bottom:1px solid #d3d4e5;
	font-size:14px;
	padding-bottom:5px;
	font-weight:bold;
	position:relative;
}

.icon-action{
	display:inline-block;
	cursor:pointer;
	height:30px;
	line-height:30px !important;
}

.icon-move-top{
	
}

.delete-text:hover:before, .delete-text:before{
    color:#363F5A !important;
    font-size:10px !important;
}

.content-block{
	padding-top:4px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.content-block-color-picker{
	padding-top:10px;	
}
 
.separator{
	  color:#A7A6AA;
	  font-size:20px;
}

.config-block {
	margin-bottom:26px;	
}

.right-separator{
	border-right:1px solid #D9DAE6;
	padding-right:15px;
	margin-right:15px;
}

#select-area {
    border: 1px dotted #000;
    position: absolute;
	pointer-events:none;
	z-index:9999;
}

.search-bar-container{
	margin-bottom:15px;	
}

.title-palette{
    font-size:16px;
    font-weight: bold;
    margin-bottom:10px;
}
.subtitle-palette{
    line-height: 22px;
}

.increase-decrease-box{
    border:1px solid #dfe5eb; border-radius:4px;line-height:30px;
    display:inline-block;
}
.button-increase-decrease{
    height:30px;display:inline-block;width:24px;background-color:#ffffff;text-align: center;
    font-weight:bold;
    cursor:pointer;

}

.transition-v2{
    transition: all 150ms ease-out;
}
.font-family-title-box{
    height:32px;
    line-height: 32px;
    border:1px solid #dfe5eb;
    border-radius:4px;
    text-align: center;
    padding-left:16px;
    padding-right:16px;
    margin-right:10px;
    background-color: #fff;
    display:inline-block;
    cursor:pointer;
    margin-bottom:12px;
}
.font-family-title-box.active,.font-family-title-box:hover {
    border-color:#05A59B;
    background-color: #05A59B;
    color:#fff;
}

.font-family-box{
    border:1px solid #DFE5EB;
    margin-bottom:12px;
    padding-left:16px;
    padding-right:16px;
    border-radius:4px;
    padding-top:6px;
    padding-bottom:6px;
    font-size:24px;
    cursor:pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.shortcut-bar{
    height: 44px;
    border-bottom: 1px solid #DFE5EB;
    background-color: #fff;
    position: fixed;
    top: 50px;
    left: 340px;
    z-index: 5;
    width: calc(100% - 340px);
    opacity: 0;
}

.shortcut-container {
    list-style: none;         /* Enlève les puces */
    margin: 0;
    padding: 0;
    display: flex;            /* Affiche les <li> en ligne */
    justify-content: center; /* Centre horizontalement */
    align-items: center;      /* Centre verticalement */
    height: 100%;             /* Prend la hauteur du parent (ex: .shortcut-bar) */
    /* Espace entre les éléments (modifiable) */
}

.shortcut-item {
    position: relative;
    height: 24px;             /* Prend la hauteur du parent (ex: .shortcut-bar) */
    line-height: 24px;
    font-weight: bold;
    padding-left: 54px;
    padding-right: 24px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    border-left:1px solid #DFE5EB
}

.shortcut-item::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.help-icon
{
    background-image: url(/images/engine/svg/info.svg);
    display: block;
    background-position: center;
    height: 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    position:relative;
    display: inline-block;
    width: 20px;
    height: 16px;
    top: 2px;
    left: 4px;
    background-size: contain;

}

.logo-engine {
    left: 15px;
    position: absolute;
    margin-top: 0px !important;
    display: block;
    width: 170px !important;
    height: 50px !important;
    background: url('/images/engine/svg/logo.svg') no-repeat center center !important;
    background-size: contain !important;
}

.shortcut-item.undo::before {
    background-image: url("/images/engine/svg/undo.svg");
}
.shortcut-item.redo::before {
    background-image: url("/images/engine/svg/redo.svg");
}
.shortcut-item.move-front::before {
    background-image: url("/images/engine/svg/move-front.svg");
}
.shortcut-item.move-back::before {
    background-image: url("/images/engine/svg/move-back.svg");
}
.shortcut-item.duplicate::before {
    background-image: url("/images/engine/svg/duplicate.svg");
}
.shortcut-item.auto-align::before {
    background-image: url("/images/engine/svg/auto-align.svg");
}
.shortcut-item.delete::before {
    background-image: url("/images/engine/svg/delete.svg");
}

.shortcut-item.ia::before {
    background-image: url("/images/engine/svg/ia-icon.svg");
    left: 20px;
}

.color-picker-palette-box {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom:12px;
}
.color-picker-palette-box label {
    display: flex;
    flex-direction: column;
    font-size:12px;

}

html body .color-history{
    border:1px solid #DFE5EB;

}
.color-picker-palette-box input[type="text"]
{
    margin-top:4px;
    border:1px  solid #DFE5EB;
    border-radius:2px;
    width:69px;
    padding-left:8px;
    padding-right: 8px;
    font-size:12px;
    height: 24px;
    line-height: 24px;
}

.font-family-li-box:hover{
    border-color:#05A59B;
}

.container
{
    margin-right: auto;
    margin-left: auto;

}

.tooltip-error.xxx{
    padding-top:10px;
    line-height: 25px !important;
    padding-bottom:10px;
}
.fonts-list-container.scrollbar{

    padding-bottom:0px;
}

.fonts-list-container.scrollbar{

    padding-bottom:0px;
}


.mCustomScrollBox {
    max-height:500px !important;
}


.color-picker-palette-box input[type="number"] {

    margin-top:4px;
    border-radius:2px;
    border:1px  solid #DFE5EB;
    width: 36px;
    text-align: center;
    font-size:12px;
    height: 24px;
    line-height: 24px;
}

.font-family-box.active
{
    border-color:#05A59B;
    position: relative;
}

.font-family-box.active:before,  .font-family-box.selected:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right:12px;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("/images/engine/svg/tick-font.svg");
}

.button-increase-decrease-left
{
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
    border-right:1px solid #dfe5eb;
    font-family: Tahoma;
}
.button-increase-decrease-right
{
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
    border-left:1px solid #dfe5eb;
}
.button-increase-decrease:hover{
    background-color: #f0f4fa;
}
.input-increase-decrease{
    text-align:center;height:30px;line-height:30px;border:none;width:100%;padding:0px;
    outline: none;
}
input-increase-decrease:focus{
    outline: none;
}
.input-container-increase-decrease{
    height:30px;display:inline-block;width:44px;text-align: center;vertical-align:top;
}
.increase-decrease-container
{
    line-height:32px;
}

/*
@media screen and (max-width:768px) {
    html body .preview-logo-laptop {
        height: 240px !important;
    }
}

@media screen and (max-width:768px) {
    html body .preview-logo-laptop {
        height: 240px !important;
    }
}
*/
/* colorpciker */