body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #f5f5f5;
}

 header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      background-color: #FFFFFF;
      border-bottom: 1px solid #ccc;
    }

    .headerColonne {
      flex: 1;
      text-align: center;
    }

    .headerColonne.gauche {
      text-align: left;
    }

    .headerColonne.droite {
      text-align: right;
    }
	

@media (min-width: 1024px) {
    body {
        margin: 0;
        padding: 0;
        height: 100vh;
        overflow: hidden;
    }
    
    .container {
        display: flex;
        height: 100vh;
        max-width: 100%;
        margin: 0;
        padding: 0;
        gap: 0;
    }
    
    .controls {
        flex: 0 0 400px;
        width: 410px;
        height: calc(100vh - 75px);
        overflow-y: auto;
        margin-bottom: 0;
    }
    
    .preview {
        flex: 1;
        height: 100vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .text-controls-grid {
        display: block !important;
    }
    
    .text-column {
        flex: none !important;
        min-width: auto !important;
    }
}

.container {
    max-width: 100%;
    margin: 0 auto;
}

.controls {
    background: white;
    padding: 6px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.controls h2 {
    margin-top: 0;
    color: #333;
}

.control-group {
    margin-bottom: 15px;
}

.control-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.control-group input, .control-group select {
    width: 100%;
    max-width: 300px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.control-group textarea {
    width: 280px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
    font-family: inherit;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slider-container input[type="range"] {
    flex: 1;
    max-width: 200px;
    height: 6px;
    background: #ddd;
    border-radius: 3px;
    outline: none;
    appearance: none;
}

.slider-container input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: #1f1f1f;
    border-radius: 50%;
    cursor: pointer;
}

.slider-container input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #1f1f1f;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.slider-value {
    font-weight: bold;
    color: #333;
    min-width: 40px;
    text-align: right;
}

/* Stamp gallery styling */
.stamp-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 8px;
    max-width: 100%;
    margin-top: 10px;
}

.stamp-item {
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
}

.stamp-item:hover {
    /*! border-color: #1f1f1f; */
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
    transform: translateY(-2px);
}

.stamp-item.selected {
    border-color: #1f1f1f;
    background-color: #e3f2fd;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.stamp-item img {
    /*! max-width: 100px; */
    /*! min-height: 120px; */
    /*! object-fit: cover; */
    border-radius: 4px;
    width: 75px;
}

/* Background gallery styling */
.background-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    max-width: 100%;
    margin-top: 10px;
}

.background-item {
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4/3;
}

.background-item:hover {
    border-color: #28a745;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
    transform: translateY(-2px);
}

.background-item.selected {
    border-color: #28a745;
    background-color: #e8f5e8;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.background-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.control-group input[type="color"] {
    width: 60px;
    height: 40px;
    padding: 0;
    border: none;
    cursor: pointer;
}

.buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn {
    padding: 10px;
    border: 1px solid #1f1f1f;
    border-radius: 0px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
}

.btn-primary {
    background-color: #1f1f1f;
    color: white;
}

.btn-primary:hover {
    background-color: #050505;
}

.btn-secondary {
    background-color: #FFFFFF;
    color: #1F1F1F;
}

.btn-secondary:hover {
    background-color: #e6e6e6;
}

/* Preview container */

.preview {
	background-color: #dee2e6;
	position: relative;
	text-align: center;
	vertical-align: middle
}

.preview-content {
	background: var(--invite-background) 50% 50% no-repeat;
	background-size: cover;
	height: 100vh;
	overflow: hidden;
	position: relative;
	width: 100%
}

.preview-content .show-animation {
	background: #fff url(../../media/img/button/play.svg) no-repeat 50%;
	border-radius: 25px;
	color: #1f1f1f;
	cursor: pointer;
	height: 40px;
	left: 20%;
	line-height: 0;
	position: absolute;
	top: calc(50% - 25px);
	width: 40px;
	z-index: 2
}

.preview-content .toggle-back {
	background: #fff url(../../media/img/button/turn-back.svg) no-repeat 50%;
	border: none;
	border-radius: 20px;
	height: 40px;
	justify-content: center;
	left: 20%;
	padding: 0;
	position: absolute;
	top: calc(50% + 25px);
	width: 40px;
	z-index: 10
}

.envelop {
	--main-color: #fefbf7;
	--material: "";
	--liner-image: "";
	--liner-color: $black;
	--invite-front: "";
	--invite-back: "";
	height: var(--envelop-height);
	left: 50%;
	position: absolute;
	top: calc(50% - var(--up-height)/2);
	transform: translate3d(-50%, -50%, 0);
	width: var(--envelop-width)
}

.envelop-landscape,
.envelop-portrait {
	--stampWidth: 0.16;
	--stampHeight: 0.22;
	--envelop-width: 498px;
	--envelop-height: 578px;
	--up-height: 234px;
	--down-height: 346px;
	--up-shadow-border: url(../../media/img/envelop/envelop-horizontal-up-shadow-border.png);
	--front-down-shadow: url(../../media/img/envelop/envelop-horizontal-front-down-shadow.png);
	--back-down-shadow: url(../../media/img/envelop/envelop-horizontal-back-down-shadow.png);
	--up-mask: url(../../media/img/envelop/envelop-horizontal-up-mask.png);
	--down-mask: url(../../media/img/envelop/envelop-horizontal-down-mask.png);
	--border-mask: url(../../media/img/envelop/envelop-horizontal-down-border.png);
	--up-liner-mask: url(../../media/img/envelop/envelop-horizontal-back-up-liner.png);
	--down-liner-mask: url(../../media/img/envelop/envelop-horizontal-back-down-liner.png)
}

.envelop-square {
	--stampWidth: 0.16;
	--stampHeight: 0.2;
	--envelop-width: 427px;
	--envelop-height: 702px;
	--up-height: 275px;
	--down-height: 427px;
	--up-shadow-border: url(../../media/img/envelop/envelop-square-up-shadow-border.png);
	--front-down-shadow: url(../../media/img/envelop/envelop-square-front-down-shadow.png);
	--back-down-shadow: url(../../media/img/envelop/envelop-square-back-down-shadow.png);
	--up-mask: url(../../media/img/envelop/envelop-square-up-mask.png);
	--down-mask: url(../../media/img/envelop/envelop-square-down-mask.png);
	--border-mask: url(../../media/img/envelop/envelop-square-down-border.png);
	--up-liner-mask: url(../../media/img/envelop/envelop-square-back-up-liner.png);
	--down-liner-mask: url(../../media/img/envelop/envelop-square-back-down-liner.png)
}

.envelop-portrait {
	--invite-real-width: calc(var(--invite-width)*var(--envelop-width)/var(--invite-height));
	--invite-real-height: var(--envelop-width)
}

.envelop-landscape {
	--invite-real-width: var(--envelop-width);
	--invite-real-height: calc(var(--invite-height)*var(--envelop-width)/var(--invite-width))
}

.envelop-square {
	--invite-real-width: var(--envelop-width);
	--invite-real-height: var(--envelop-width)
}

.envelop * {
	mask-size: contain !important;
	-webkit-mask-size: contain !important
}

.envelop .envelop-up {
	height: var(--up-height);
	left: -.5px;
	position: absolute;
	right: 0;
	top: 0;
	transform: rotateX(180deg);
	transform-origin: bottom center;
	z-index: 5
}

.envelop .envelop-up .envelop-up-front {
	background: var(--main-color);
	background-blend-mode: hard-light;
	background-size: contain;
	bottom: 0;
	left: 0;
	mask: var(--up-mask) 0 50% no-repeat;
	-webkit-mask: var(--up-mask) 0 50% no-repeat;
	position: absolute;
	right: 0;
	top: 2px;
	transform-origin: bottom center
}

.envelop .envelop-up .envelop-up-front:after {
	background: var(--material) 50% 50%;
	background-size: cover;
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0
}

.envelop .envelop-up .envelop-up-back {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background: var(--main-color);
	background-blend-mode: hard-light;
	background-size: contain;
	bottom: 0;
	left: 0;
	mask: var(--up-mask) 0 50% no-repeat;
	-webkit-mask: var(--up-mask) 0 50% no-repeat;
	position: absolute;
	right: 0;
	top: 2px;
	transform-origin: bottom center;
	visibility: hidden
}

.envelop .envelop-up .envelop-up-back:after {
	background: var(--material) 50% 50%;
	background-size: cover;
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0
}

.envelop .envelop-up .envelop-up-back .envelop-up-liner {
	background-position: top;
	bottom: 0;
	left: 0;
	mask: var(--up-liner-mask) 0 50% no-repeat;
	-webkit-mask: var(--up-liner-mask) 0 50% no-repeat;
	position: absolute;
	right: 0;
	top: 0;
	transform-origin: bottom center;
	z-index: 1
}

.envelop .envelop-up .envelop-up-back .envelop-up-liner.as-pattern:after {
	background-color: var(--liner-color);
	bottom: 0;
	content: "";
	left: 0;
	mask: var(--liner-image) center top;
	-webkit-mask: var(--liner-image) center top;
	mask-size: calc(var(--down-height)*1.7) !important;
	-webkit-mask-size: calc(var(--down-height)*1.7) !important;
	position: absolute;
	right: 0;
	top: 0
}

.envelop .envelop-up .envelop-up-back .envelop-up-liner:not(.as-pattern) {
	background-image: var(--liner-image);
	background-size: calc(var(--down-height)*1.7)
}

.envelop .envelop-up .envelop-back-text {
	bottom: 10px;
	color: var(--text-color);
	left: 10%;
	position: absolute;
	right: 10%;
	text-align: center;
	transform: rotateX(180deg);
	z-index: 1
}

.envelop .envelop-up .envelop-seal {
	background: var(--seal) 50% 50% no-repeat;
	background-blend-mode: multiply;
	background-size: contain;
	bottom: 100%;
	height: 85px;
	left: 50%;
	position: absolute;
	transform: translate3d(-50%, 50%, 0) rotateX(180deg);
	width: 85px
}

.envelop .envelop-up .envelop-seal:after {
	background-color: var(--seal-color);
	bottom: 0;
	content: "";
	left: 0;
	mask: var(--seal) 50% 50% no-repeat;
	-webkit-mask: var(--seal) 50% 50% no-repeat;
	mask-size: contain;
	-webkit-mask-size: contain;
	mix-blend-mode: multiply;
	opacity: .7;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1
}

.envelop .envelop-down {
	bottom: 0;
	height: var(--down-height);
	left: 0;
	position: absolute;
	right: 0
}

.envelop .envelop-down .envelop-down-front {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background: var(--main-color);
	background-blend-mode: multiply;


	border-radius: 0 0 3px 3px;
	bottom: 0;
	filter: drop-shadow(2px 5px 7px rgba(0, 0, 0, .11));
	left: 0;
	position: absolute;
	right: 0;
	top: 0
}

.envelop .envelop-down .envelop-down-front:after {
	background: var(--material) 50% 50%;
	background-size: cover;
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0
}

.envelop .envelop-down .envelop-down-front .envelop-front-text,
.envelop .envelop-up .envelop-back-text {
    margin-bottom: 1rem;
    margin-top: 0;
    line-height: 1.2;
    white-space: pre-line;
}

.envelop .envelop-down .envelop-down-front .envelop-front-text {
	color: var(--text-color);
	left: 10%;
	position: absolute;
	right: 10%;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	filter: blur(0.5px);
	/*! mix-blend-mode: screen; */
	text-shadow: 1px 1px 1px rgba(0,0,0,0.04);
	opacity: 0.80;
}



.envelop .envelop-down .envelop-down-front .envelop-front-text::before {
/*! content: attr(data-text); */
  /*! position: absolute; */
  /*! left: 0; */
  /*! top: 0; */
  /*! color: #222; */
  /*! opacity: 0.4; */
  /*! filter: blur(1px); */
  /*! z-index: -1; */
}

.envelop .envelop-down .envelop-down-front .envelop-frontXmas {
	background: var(--frontXmas) 100% 0 no-repeat;
	background-position-x: center;
	background-size: contain;
	position: absolute;
	width: 360px;
	z-index: 10
}

.envelop .envelop-down .envelop-down-front .envelop-stamp {
	background: var(--stamp) 100% 0 no-repeat;
	background-position-x: center;
	background-size: contain;
	height: calc(var(--down-height)*var(--stampHeight));
	position: absolute;
	right: calc(var(--envelop-width)*.04);
	top: calc(var(--down-height)*.04);
	width: calc(var(--envelop-width)*var(--stampWidth));
	z-index: 10
}



.envelop .envelop-down .envelop-down-front .envelop-stamp .postmark {
	background-image: url(../../media/img/envelop/cachet.png);
	background-repeat: no-repeat;
	background-size: contain;
	height: calc(var(--down-height)*.16);
	position: absolute;
	right: 70%;
	top: 0;
	width: calc(var(--envelop-width)*.29);
	z-index: 11
}

.envelop .envelop-down .envelop-down-back {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background: var(--main-color);
	border-radius: 0 0 3px 3px;
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0
}

.envelop .envelop-down .envelop-down-back .envelop-down-fold {
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2
}

.envelop .envelop-down .envelop-down-back .envelop-down-fold:after {
	background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .01));
	content: "";
	height: 50%;
	left: 0;
	position: absolute;
	right: 0;
	top: 0
}

.envelop .envelop-down .envelop-down-back .envelop-down-liner {
	background-position: center calc((var(--up-height) - 5px)*-1);
	bottom: 0;
	left: 0;
	mask: var(--down-liner-mask) 0 50% no-repeat;
	-webkit-mask: var(--down-liner-mask) 0 50% no-repeat;
	position: absolute;
	right: 0;
	top: -1.2px
}

.envelop .envelop-down .envelop-down-back .envelop-down-liner.as-pattern:after {
	background-color: var(--liner-color);
	bottom: 0;
	content: "";
	left: 0;
	mask: var(--liner-image) center calc(var(--up-height)*-1);
	-webkit-mask: var(--liner-image) center calc(var(--up-height)*-1);
	mask-size: calc(var(--down-height)*1.7) !important;
	-webkit-mask-size: calc(var(--down-height)*1.7) !important;
	position: absolute;
	right: 0;
	top: 0
}

.envelop .envelop-down .envelop-down-back .envelop-down-liner:not(.as-pattern) {
	background-image: var(--liner-image);
	background-size: calc(var(--down-height)*1.7)
}

.envelop .envelop-down .envelop-down-back .envelop-down-hover {
	background: var(--main-color) 50% 50% no-repeat;
	background-blend-mode: multiply;
	background-size: contain;
	border-radius: 0 0 3px 3px;
	bottom: 0;
	left: 0;
	mask: var(--down-mask) 0 50% no-repeat;
	-webkit-mask: var(--down-mask) 0 50% no-repeat;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 3
}

.envelop .envelop-down .envelop-down-back .envelop-down-hover:after {
	background: var(--material) 50% 50%;
	background-size: cover;
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0
}

.envelop .envelop-down .envelop-down-back .envelop-down-border {
	background-color: var(--border-color);
	height: var(--down-height);
	mask: var(--border-mask) 0 50% no-repeat;
	-webkit-mask: var(--border-mask) 0 50% no-repeat;
	position: relative;
	z-index: 3
}

.envelop .envelop-down .envelop-down-back:before {
	background: var(--material) 50% 50%;
	background-size: cover;
	border-radius: 0 0 3px 3px;
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0
}

.envelop .envelop-down .envelop-down-back:after {
	background: var(--back-down-shadow) 50% 50% no-repeat;
	background-size: contain;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 3
}

.envelop-landscape .envelop-down .envelop-down-front .envelop-stamp,
.envelop-portrait .envelop-down .envelop-down-front .envelop-stamp {
	right: calc(var(--envelop-width)*.015)
}

.envelop-landscape .envelop-down .envelop-down-front .envelop-stamp .postmark,
.envelop-portrait .envelop-down .envelop-down-front .envelop-stamp .postmark {
	height: calc(var(--down-height)*.19);
	right: 30%;
	width: calc(var(--envelop-width)*.3)
}

.envelop:not(.opened):not(.animated) .envelop-up:before {
	top: 0;
	transform: scaleX(-1) rotate(180deg);
	z-index: 1
}

.envelop.animated .envelop-up .envelop-up-front:before,
.envelop:not(.opened):not(.animated) .envelop-up:before {
	background: var(--up-shadow-border);
	background-size: cover;
	bottom: 0;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	right: 0
}

.envelop.animated .envelop-up .envelop-up-front:before {
	top: 6px;
	transform: rotate(-180deg);
	z-index: 2
}

.envelop.opened .envelop-up {
	filter: drop-shadow(2px 2px 7px rgba(0, 0, 0, .11));
	top: .4px;
	transform: rotate3d(0, 0, 0, 180deg);
	transform-origin: bottom center
}

.envelop.opened .envelop-up-back {
	visibility: visible
}

.envelop.opened .envelop-up-front {
	visibility: hidden
}

.envelop.opened .envelop-down {
	z-index: 5
}

.envelop.animated .envelop-up-back:before,
.envelop.opened .envelop-up-back:before {
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0
}

.envelop-square.animated .envelop-up-back:before,
.envelop-square.opened .envelop-up-back:before {
	background: var(--main-color) url(../../media/img/envelop/envelop-square-back-up-liner-adhesive.png);
	background-size: contain
}

.envelop-landscape.animated .envelop-up-back:before,
.envelop-landscape.opened .envelop-up-back:before,
.envelop-portrait.animated .envelop-up-back:before,
.envelop-portrait.opened .envelop-up-back:before {
	background: var(--main-color) url(../../media/img/envelop/envelop-horizontal-back-up-liner-adhesive.png);
	background-size: contain
}

.envelop.hidden .envelop-down .envelop-down-back:after,
.envelop.hidden .envelop-down-border,
.envelop.hidden .envelop-down-fold,
.envelop.hidden .envelop-down-front,
.envelop.hidden .envelop-down-hover,
.envelop.hidden .envelop-down-liner,
.envelop.hidden .envelop-up {
	display: none
}

.preview-content:has(.envelop:not(.animated)) {
	height: 100vh;
}

.preview-content .envelop:not(.animated).side-back.opened {
	top: 48%
}

.invite {
	bottom: 0;
	height: var(--invite-real-height);
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: var(--invite-real-width);
	z-index: 3
}

.invite .invite-link {
	position: absolute;
	transform-origin: left top;
	z-index: 10
}

.invite .invite-back,
.invite .invite-front {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: contain;
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;

	transform-style: preserve-3d;
	transition: all .75s ease-in-out
}

.invite .invite-front {
	background-image: var(--invite-front)
}

.invite .invite-back {
	background-image: var(--invite-back);
	transform: rotateY(180deg)
}

.invite .invite-back .invite-link {
	display: none
}

.invite.return .invite-front {
	transform: rotateY(180deg)
}

.invite.return .invite-back {
	transform: rotate3d(0, 0, 0, 180deg)
}

.invite.return .invite-back .invite-link {
	display: inline-block
}

.envelop-landscape:not(.side-front) .invite,
.envelop-portrait:not(.side-front) .invite {
	bottom: 0;
	left: auto;
	right: 0;
	transform: scale3d(99%, 99%, 100%) translate3d(100%, -1%, 0) rotate(-90deg);
	transform-origin: left bottom
}

.envelop-square:not(.side-front) .invite {
	bottom: 0;
	left: auto;
	right: 0;
	transform: scale3d(98%, 98%, 100%) translate3d(1%, -1%, 0);
	transform-origin: left bottom
}

.envelop.side-front .envelop-up,
.envelop.side-front .invite {
	visibility: hidden
}

.envelop.side-front .envelop-down-back {
	transform: rotateY(180deg)
}

.envelop.side-back .envelop-down-front .envelop-front-text,
.envelop.side-back .envelop-down-front .envelop-stamp {
	display: none !important
}

.envelop.side-back:not(.opened) .envelop-up {
	top: -1px
}

.envelop-landscape.side-back:not(.opened) .envelop-up,
.envelop-portrait.side-back:not(.opened) .envelop-up {
	top: -4px
}

@keyframes rotateEnvelop {
	0% {
		transform: rotateY(0)
	}

	to {
		transform: rotateY(-90deg)
	}
}

@keyframes openEnvelop {
	0% {
		transform: rotateX(180deg)
	}

	to {
		transform: rotateX(0deg)
	}
}

@keyframes openEnvelopVisibility {
	0% {
		visibility: hidden
	}

	to {
		visibility: visible
	}
}

@keyframes openedEnvelopTop {
	0% {
		top: -5px
	}

	to {
		top: 0
	}
}

@keyframes openEnvelopDepth {
	0% {
		z-index: 0
	}

	to {
		z-index: 10
	}
}

@keyframes moveEnvelopYMobile {
	to {
		transform: translate3d(-50%, 65%, 0) scale3d(130%, 130%, 100%)
	}
}

@keyframes moveEnvelopYSquareMobile {
	to {
		transform: translate3d(-50%, 50%, 0) scale3d(130%, 130%, 100%)
	}
}

@keyframes takeOutInvitePortraitMobile {
	0% {
		transform: translate3d(98%, -1%, 0) rotate(-90deg) scale3d(96%, 96%, 100%)
	}

	49% {
		z-index: 3
	}

	50% {
		transform: translate3d(98%, -70%, 0) rotate(-90deg) scale3d(96%, 96%, 100%);
		z-index: 20
	}

	to {
		transform: translate3d(-29%, -80%, 0) scale3d(100%, 100%, 100%);
		z-index: 20
	}
}

@keyframes zoomInviteMobile {
	to {
		transform: translate3d(-34%, -87%, 0) scale3d(110%, 110%, 100%)
	}
}

@keyframes takeOutInviteSquareMobile {
	0% {
		transform: translate3d(1%, -1%, 0) scale3d(98%, 98%, 100%)
	}

	49% {
		z-index: 3
	}

	50% {
		transform: translate3d(3%, -120%, 0) scale3d(94%, 94%, 100%);
		z-index: 20
	}

	to {
		transform: translate3d(5%, -138%, 0) scale3d(90%, 90%, 100%);
		z-index: 20
	}
}

@keyframes zoomInviteSquareMobile {
	to {
		transform: translate3d(5%, -142%, 0) scale3d(90%, 90%, 100%)
	}
}

@keyframes takeOutInvitePortrait {
	0% {
		transform: translate3d(96%, 0, 0) rotate(-90deg) scale3d(95%, 95%, 100%)
	}

	49% {
		z-index: 3
	}

	50% {
		transform: translate3d(96%, -70%, 0) rotate(-90deg) scale3d(95%, 95%, 100%);
		z-index: 20
	}

	to {
		transform: translate3d(-41.5%, 12%, 0) scale3d(95%, 95%, 100%);
		z-index: 20
	}
}

@keyframes takeOutInviteSquare {
	0% {
		transform: translate3d(1%, -1%, 0) scale3d(98%, 98%, 100%)
	}

	49% {
		z-index: 3
	}

	50% {
		transform: translate3d(1%, -110%, 0) scale3d(98%, 98%, 100%);
		z-index: 20
	}

	to {
		transform: translate3d(-50%, -8%, 0) scale3d(98%, 98%, 100%);
		z-index: 20
	}
}

@keyframes moveEnvelopX {
	0% {
		transform: translate3d(-50%, -50%, 0) scale3d(100%, 100%, 100%)
	}

	50% {
		transform: translate3d(-50%, -26%, 0) scale3d(100%, 100%, 100%)
	}

	to {
		transform: translate3d(-50%, -32%, 0) scale3d(100%, 100%, 100%)
	}
}

@keyframes moveEnvelopY {
	to {
		transform: translate3d(-25%, -32%, 0) scale3d(80%, 80%, 100%)
	}
}

@keyframes zoomInvite {
	to {
		transform: translate3d(-160%, 15%, 0) scale3d(140%, 140%, 100%)
	}
}

@keyframes zoomInviteSquare {
	to {
		transform: translate3d(-75%, -8%, 0) scale3d(110%, 110%, 100%)
	}
}

.envelop:not(.hidden).animated .envelop-up-front {
	transform: rotateX(180deg)
}

.envelop:not(.hidden).animated .envelop-up-back {
	transform: rotateX(0deg)
}

.envelop:not(.hidden).animated .envelop-seal {
	transform: translate3d(-50%, calc(var(--up-height)*2 + 43px), 0) rotateX(0)
}

.envelop:not(.hidden).animated .envelop-up {
	animation-delay: 0s, 1s;
	animation-direction: reverse, normal;
	animation-duration: 0s, 1s;
	animation-fill-mode: both;
	animation-iteration-count: 1;
	animation-name: rotateEnvelop, openedEnvelopTop;
	animation-timing-function: ease-out
}

.envelop:not(.hidden).animated .envelop-down-back {
	animation-delay: 0s;
	animation-direction: reverse;
	animation-duration: 0s;
	animation-fill-mode: both;
	animation-iteration-count: 1;
	animation-name: rotateEnvelop;
	animation-timing-function: ease-out
}

.envelop:not(.hidden).animated .envelop-up-front {
	animation-delay: 1s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-name: openEnvelop;
	animation-timing-function: ease-out
}

.envelop:not(.hidden).animated .envelop-up-back {
	animation-delay: 1s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-name: openEnvelop, openEnvelopVisibility;
	animation-timing-function: ease-out
}

.envelop:not(.hidden).animated .envelop-down {
	animation-delay: 1s;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-name: openEnvelopDepth;
	animation-timing-function: ease-out
}

@media (max-width:1023px) {
	.envelop:not(.hidden).animated {
		animation-delay: 1s;
		animation-duration: 2s;
		animation-fill-mode: forwards;
		animation-iteration-count: 1;
		animation-timing-function: ease-out
	}

	.envelop:not(.hidden).animated.envelop-square {
		animation-name: moveEnvelopYSquareMobile
	}

	.envelop:not(.hidden).animated.envelop-portrait {
		animation-name: moveEnvelopYMobile
	}

	.envelop:not(.hidden).animated .envelop-up {
		animation-delay: 0s, 1s;
		animation-duration: 0s, .5s
	}

	.envelop:not(.hidden).animated.envelop-square .invite {
		animation-name: takeOutInviteSquareMobile, zoomInviteSquareMobile
	}

	.envelop:not(.hidden).animated.envelop-landscape .invite {
		animation-name: takeOutInviteLandscape
	}

	.envelop:not(.hidden).animated.envelop-portrait .invite {
		animation-name: takeOutInvitePortraitMobile, zoomInviteMobile
	}

	.envelop:not(.hidden).animated .invite {
		animation-delay: 1.5s, 2.5s;
		animation-direction: normal;
		animation-duration: 1.5s, .5s;
		animation-fill-mode: forwards;
		animation-iteration-count: 1;
		animation-timing-function: ease-out
	}
}

@media (min-width:1024px) {
	.envelop:not(.hidden).animated {
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-name: moveEnvelopX, moveEnvelopY;
		animation-timing-function: ease-out
	}

	.envelop:not(.hidden).animated.envelop-square .invite {
		animation-name: takeOutInviteSquare, zoomInviteSquare
	}

	.envelop:not(.hidden).animated.envelop-landscape .invite {
		animation-name: takeOutInviteLandscape
	}

	.envelop:not(.hidden).animated.envelop-portrait .invite {
		animation-name: takeOutInvitePortrait, zoomInvite
	}

	.envelop:not(.hidden).animated.envelop-square {
		animation-delay: 1.1s, 3.3s;
		animation-duration: 2.2s, 1.1s
	}

	.envelop:not(.hidden).animated.envelop-portrait {
		animation-delay: 1.1s, 3.1s;
		animation-duration: 2s, 1.1s
	}

	.envelop:not(.hidden).animated .invite {
		animation-direction: normal;
		animation-fill-mode: both;
		animation-iteration-count: 1;
		animation-timing-function: ease-out
	}

	.envelop:not(.hidden).animated.envelop-square .invite {
		animation-delay: 1.5s, 3.1s;
		animation-duration: 1.6s, 1.1s
	}

	.envelop:not(.hidden).animated.envelop-portrait .invite {
		animation-delay: 1.5s, 2.9s;
		animation-duration: 1.4s, 1.1s
	}
}

.envelop.hidden.animated .invite {
	animation-delay: 1s;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-iteration-count: 1;
	animation-name: takeOutInviteWithoutEnvelop
}

.envelop.hidden.animated.envelop-portrait .invite {
	animation-name: takeOutInviteWithoutEnvelop
}

.preview-fit-content {
	width: unset
}

.preview-fit-content .preview-fit-content-header {
	border-bottom: 1px solid #f5f5f5
}

.preview-fit-content .preview-fit-content-header p {
	margin: 0;
	padding-top: 5px
}

.preview-fit-content .preview-message {
	color: #707070;
	line-height: 1.4;
	text-align: center
}

.preview-fit-content .invitation {
	max-width: 100%
}

.preview-fit-content .preview-large-padding {
	padding: 0 10vw
}

.preview-fit-content .envelop {
	cursor: pointer;
	height: var(--down-height)
}

.envelope-preview .envelop {
	top: 0
}

.envelope-preview .envelop-landscape,
.envelope-preview .envelop-portrait {
	--envelop-width: 800px;
	--envelop-height: 556px;
	--down-height: 556px
}

.envelope-preview .envelop-square {
	--envelop-width: 780px;
	--envelop-height: 780px;
	--down-height: 780px
}

.shareable-link-preview .link-preview-card {
	background-color: #fff;
	border: none;
	border-radius: 10px;
	overflow: hidden
}

.shareable-link-preview .link-preview-image {
	max-width: 400px
}

.shareable-link-preview .card-body {
	background: #f8f8f8
}

.shareable-link-preview .link-preview-title {
	color: #333;
	font-size: .75rem
}

.shareable-link-preview .link-preview-description {
	color: #666;
	font-size: .7rem
}

.shareable-link-preview .link-preview-card.shadow-sm {
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1)
}

@media (max-width:1023px) {
	.envelop-square {
		--envelop-width: 325px;
		--envelop-height: 534px;
		--up-height: 209px;
		--down-height: 325px
	}

	.envelop-landscape,
	.envelop-portrait {
		--envelop-width: 395px;
		--envelop-height: 458px;
		--up-height: 186px;
		--down-height: 274px
	}
}

@media (max-width:767px) {
	.envelop-square {
		--envelop-width: 300px;
		--envelop-height: 494px;
		--up-height: 194px;
		--down-height: 300px
	}

	.envelop-landscape,
	.envelop-portrait {
		--envelop-width: 300px;
		--envelop-height: 348px;
		--up-height: 140px;
		--down-height: 209px
	}

	.preview-content .envelop:not(.animated) {
		top: 15%
	}

	.preview-content .envelop:not(.animated).side-back.opened {
		top: 30%
	}

	.preview-content .envelop:not(.animated).side-back.opened.envelop-square {
		top: 33%
	}

	.modal-card-animation .preview-content .show-animation {
		height: 40px;
		left: 10px;
		top: 10px;
		width: 40px
	}

	.modal-card-animation .preview-content .toggle-back {
		font-size: 25px;
		height: 40px;
		left: 10px;
		top: 60px;
		width: 40px
	}

	.link-preview-image {
		max-width: 275px
	}
}

@media (max-width:380px) {
	.envelop-square {
		--envelop-width: 270px;
		--envelop-height: 444px;
		--up-height: 174px;
		--down-height: 270px
	}

	.envelop-landscape,
	.envelop-portrait {
		--envelop-width: 270px;
		--envelop-height: 314px;
		--up-height: 126px;
		--down-height: 188px
	}
}

/* Tabs styling */
.tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 19px;
    /*! padding: 10px 10px 0; */
    background-color: #fff;
}

.tab-button {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px 5px 0 0;
    padding: 10px 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
    font-weight: 500;
    color: #495057;
    border-bottom: none;
}

.tab-button:hover {
    background: #e9ecef;
    color: #212529;
}

.tab-button.active {
    background: #1f1f1f;
    color: white;
    border-color: #1f1f1f;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive tabs for mobile */
@media (max-width: 1023px) {
	
    .tabs-nav {
        justify-content: space-between;
        gap: 2px;
    }
    
    .tab-button {
        flex: 1;
        padding: 8px 5px;
        font-size: 12px;
        text-align: center;
    }

    
    .preview-content .show-animation {
        top: 10px;
        left: 10px;
        width: 40px;
        height: 40px;
    }

    .preview-content .toggle-back {
        left: 10px;
        top: 60px;
        width: 40px;
        height: 40px;
        font-size: 25px;
    }
    
    .control-group {
        max-width: 100%;
        overflow-x: auto;
        padding-right: 10px;
    }
    
    .stamp-gallery,
    .background-gallery,
    .envelope-style-gallery,
    .liner-gallery {
        display: flex !important;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 10px;
        width: 100%;
    }
    
    .stamp-item,
    .background-item,
    .envelope-style-item,
    .liner-item {
        flex: 0 0 60px;
        min-width: 60px;
    }
    
    .envelope-style-item,
    .liner-item {
        flex: 0 0 75px !important;
        min-width: 75px !important;
    }
    
    .text-controls-grid {
        display: flex !important;
        overflow-x: auto;
        gap: 15px;
        padding-bottom: 10px;
    }
    
    .text-column {
        flex: 0 0 325px;
        min-width: 325px;
    }
    
    .font-dropdown,
    .slider-container,
    .action-buttons {
        overflow-x: auto;
        padding-bottom: 10px;
    }
	
	
	
	#enveloppes label, #interieur label, #timbres label, #fonds label  {
		display:none
}

   header {
	  padding: 8px;
    font-size: 12px;
    background-color: #f9f9f9;
	   }
	
	header .colonne.centre {display:none}
	
	header .btn {
		padding: 10px;
    font-size: 10px;
    text-transform: uppercase;
  }
  
  .preview-content {
	/*  height: calc(100vh - 200px);*/
	  }
	#startAnimationBtn , #toggleSideBtn { display:none;}
	#replayBtn, #toggleBtn { display:block !important}
	
}

/* Envelope style gallery styling */
.envelope-style-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.envelope-style-item {
    position: relative;
    width: 75px;
    height: 55px;
    cursor: pointer;
    display: block;
    margin: 0;
    padding: 0;
    transition: all 0.3s ease;
}

.envelope-style-item::before {
    background: url(../../media/img/envelop/envelop-style-radio-hover.png);
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 0;
    content: "";
    cursor: pointer;
    display: inline-block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.envelope-style-item.selected::before {
    border: 2px solid #fff;
    outline: 1px solid #707070;
    opacity: 1;
}

.envelope-style-item:hover::before {
    opacity: 0.5;
}

.envelope-style-item::after {
    background: var(--color) var(--pattern) 50% 50%;
    background-size: cover;
    bottom: 0;
    content: "";
    display: inline-block;
    left: 0;
    line-height: 1;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.envelope-style-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 3;
}

.envelope-style-item.selected {
    border: 2px solid #333;
}

/* Liner gallery styling */
.liner-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.liner-item {
    position: relative;
    width: 75px;
    height: 75px;
    cursor: pointer;
    display: block;
    margin: 0;
    padding: 0;
    transition: all 0.3s ease;
}

.liner-item::before {
    background: url(../../media/img/envelop/envelop-liner-radio-hover.png);
    background-size: contain;
    background-repeat: no-repeat;
    bottom: 0;
    content: "";
    cursor: pointer;
    display: inline-block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.liner-item.selected::before {
    border: 2px solid #fff;
    outline: 1px solid #707070;
    opacity: 1;
}

.liner-item:hover::before {
    opacity: 0.5;
}

.liner-item::after {
    background-image: var(--liner-bg);
    background-size: cover;
    background-position: center;
    bottom: 0;
    content: "";
    display: inline-block;
    left: 0;
    line-height: 1;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.liner-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 3;
}

.liner-item.selected {
    border: 2px solid #333;
}

/* Action buttons styling */
.action-buttons {
    margin: 15px 0;
    padding: 4px;
    /*! background: #f8f9fa; */
    /*! border-radius: 8px; */
    /*! border: 1px solid #dee2e6; */
}

/* Text controls grid styling */
.text-controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.text-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Responsive design for smaller screens */
@media (max-width: 1024px) {
    .text-controls-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}