/*
         * Logo editor workspace (etape 3) — Figma:
         *  - Outer BG: solid #F5F6F7, no grid on the backside
         *  - Dotted line grid: #B2C3D3, 1px stroke, 40×40 squares
         *  - Desktop: grid on the 900×663 creative-zone card only
         *  - Mobile: grid watermarks the full creation surface
         *
         * Grid colour is CSS-variable driven so DevTools can tweak
         * --logo-editor-grid-stroke / --logo-editor-grid-size live.
         */
        .editor.dark {
            background-image: none !important;
        }

        .quadrillage {
            width: 100%;
            height: 100vh;
            background-image: none;
        }

        .creative-zone {
            display: none;
        }

        /* Inspectable dotted-line grid (mask + background-color).
         * Tweak --logo-editor-grid-stroke in DevTools if still too light/dark. */
        .logo-editor-dot-grid {
            --logo-editor-grid-stroke: #B2C3D3;
            --logo-editor-grid-size: 40px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 0;
            background-color: var(--logo-editor-grid-stroke);
            /* Black 1px dotted 40×40 tile used as a mask — colour comes from background-color */
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M40 0H0M0 0V40' fill='none' stroke='%23000' stroke-width='1' stroke-dasharray='0.01 2.5' stroke-linecap='round'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M40 0H0M0 0V40' fill='none' stroke='%23000' stroke-width='1' stroke-dasharray='0.01 2.5' stroke-linecap='round'/%3E%3C/svg%3E");
            -webkit-mask-size: var(--logo-editor-grid-size) var(--logo-editor-grid-size);
            mask-size: var(--logo-editor-grid-size) var(--logo-editor-grid-size);
            -webkit-mask-repeat: repeat;
            mask-repeat: repeat;
            -webkit-mask-position: 0 0;
            mask-position: 0 0;
        }

        /* Desktop — floating creative zone; outer backside has no grid */
        @media screen and (min-width: 769px) {
            body.creation-logo-route.etape3 .editor,
            body.creation-logo-route.etape3 .editor.quadrillage {
                background-image: none !important;
                background-color: #F5F6F7 !important;
            }

            body.creation-logo-route.etape3 .creative-zone {
                display: block;
                position: absolute;
                /*
                 * Center in the workspace to the right of the left tools
                 * (sidebar 72px + palette ≈ 340px total), matching the
                 * shortcut-bar / Preview button content column — not the
                 * full viewport (which made the card sit too far left).
                 */
                left: calc(340px + (100% - 340px) / 2);
                top: 50%;
                width: 900px;
                height: 663px; /* matches Template Selection cards */
                margin: 0;
                transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%, -50%);
                box-sizing: border-box;
                z-index: 0;
                pointer-events: none;
                overflow: hidden;
                background-color: #ffffff;
                background-image: none;
                /* Drop shadow: X0 Y4 Blur15 Spread0 #DBDDE3 @ 50% */
                box-shadow: 0 4px 15px 0 rgba(219, 221, 227, 0.5);
            }

            /* Print cadre replaced by the creative-zone card on desktop */
            body.creation-logo-route.etape3 .cadre-logo {
                display: none !important;
            }
        }

        /*
         * Mobile: no floating card — creative-zone fills the creation surface
         * so the dotted grid watermarks the whole editor background.
         */
        @media screen and (max-width: 768px) {
            body.creation-logo-route.etape3 .editor,
            body.creation-logo-route.etape3 .editor.quadrillage {
                background-image: none !important;
            }

            body.creation-logo-route.etape3 .creative-zone {
                display: block !important;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                width: auto;
                height: auto;
                margin: 0;
                transform: none;
                -webkit-transform: none;
                box-shadow: none;
                /* Logo fill stays on .editor (ng-style); zone only carries the grid */
                background-color: transparent !important;
                background-image: none !important;
                z-index: 0;
                pointer-events: none;
                overflow: hidden;
            }
        }

        .icheckbox_square-green,
        .iradio_square-green {
            width: 22px;
            height: 22px;
            transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
            background-color: transparent;
            background: none;
        }

        .icheckbox_square-green:hover,
        .iradio_square-green:hover {
            border-color: #0ba69d;
        }

        .icheckbox_square-green::before,
        .iradio_square-green::before {}

        .icheckbox_square-green.checked,
        .iradio_square-green.checked {
            text-align: center;
            background-color: #0ba69d;
            border-color: #0ba69d;
        }

        .icheckbox_square-green::before,
        .iradio_square-green::before {
            transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
            content: "";
            background-image: url("/images/svg/checkbox.svg");
            background-size: cover;
            width: 100%;
            height: 100%;
            opacity: 0;
            transform: scale(0);
            display: inline-block;
            text-align: center;
        }

        .icheckbox_square-green.checked::before,
        .iradio_square-green.checked::before {
            opacity: 1;
            transform: scale(1);
        }


        .logo-presentation-white svg * {
            fill: #ffffff;
            /* ou "fill: white;" */
        }

        /* versino responsible mobile */
        @media screen and (max-width:768px) {

            .citation-pablo br {
                display: none;
            }

            .preview-50 {
                width: 100%;
                display: block !important;
            }

            .preview-papier-entete,
            .preview-enveloppe {
                display: none
            }

            .preview-logo-laptop {
                width: 100% !important;
                background-image: none !important;

            }

            .inscription-sidebar-container {
                padding-right: 30px !important;
                padding-left: 30px !important;

            }

            .modify-logo-btn {
                display: none;
            }

            .preview-logo-laptop img {
                padding: 0px !important;
                margin: 0px !important;
                border: 1px solid #cdcdcd;
            }

            .preview-logo-laptop .container-logo {
                position: relative !important;
            }

            .search-modal-desc {
                display: none;
            }

            .search-modal-desc {
                display: none;
            }

            .tooltip-responsive-hide {
                display: none;
            }

            .input-error {
                font-size: 13px;
                position: relative;
                top: 3px;
            }

            .responsive-show {
                display: block !important;
            }

            .search-overlay .close-search-modal {
                display: none;
            }

            /*
             * Logo design welcome modal — MOBILE (max-width 768px).
             * Same markup/logic as desktop; full-bleed teal sheet below top bar.
             */
            body.creation-logo-route .search-overlay-container.logo-design-welcome-modal-container.closeModal {
                top: 0 !important;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                min-height: 100vh;
                min-height: 100dvh;
                padding-top: 0;
                box-sizing: border-box;
                background-color: rgba(36, 44, 61, 0.40) !important;
                -webkit-backdrop-filter: blur(8px);
                backdrop-filter: blur(8px);
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
            }

            body.creation-logo-route .search-overlay-container.logo-design-welcome-modal-container.closeModal.visible {
                display: block;
                visibility: visible;
                pointer-events: all;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal {
                position: absolute !important;
                display: block;
                top: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                left: 0 !important;
                width: 100% !important;
                max-width: none !important;
                height: 100% !important;
                min-height: 100% !important;
                margin: 0 !important;
                margin-left: 0 !important;
                margin-top: 0 !important;
                padding: 0 !important;
                border-radius: 0 !important;
                background-color: #0B7F8F !important;
                background-image: none !important;
                box-shadow: none;
                overflow: visible;
                text-align: left;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal::before {
                content: '';
                position: absolute;
                inset: 0;
                background-color: #0B7F8F;
                background-image: url(/images/engine/logo-design-welcome-modal-bg.webp);
                background-repeat: no-repeat;
                background-position: center top;
                background-size: auto;
                z-index: 0;
                pointer-events: none;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__body {
                position: relative;
                z-index: 1;
                box-sizing: border-box;
                height: 100%;
                padding: 66px 20px 28px;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__close.logo-design-desktop-only {
                display: inline-flex !important;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__close {
                position: absolute;
                top: 50px;
                right: 0;
                z-index: 3;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 48px;
                height: 48px;
                margin: 0;
                padding: 16px;
                border: none;
                background: transparent;
                cursor: pointer;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__close svg {
                width: 15px;
                height: 15px;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__title {
                margin: 8px auto 10px;
                padding: 0 36px;
                max-width: none;
                font-family: 'Open Sans', sans-serif;
                font-size: 26px;
                font-weight: 700;
                line-height: 1.25;
                text-align: center;
                color: #FFFFFF;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__desc {
                display: block;
                margin: 0 auto 22px;
                padding: 0 8px;
                max-width: none;
                font-family: 'Open Sans', sans-serif;
                font-size: 16px;
                font-weight: 400;
                line-height: 24px;
                text-align: center;
                color: #FFFFFF;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__field {
                position: relative;
                width: 100%;
                max-width: none;
                margin: 0 0 18px;
                overflow: visible;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__field:last-of-type {
                margin-bottom: 0;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__label {
                position: relative;
                z-index: 1;
                display: block;
                height: auto;
                min-height: 30px;
                margin: 0 0 7px;
                font-size: 16px;
                font-weight: 400;
                line-height: 1.35;
                color: #FFFFFF;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__label .input-error {
                float: none;
                display: inline;
                margin-left: 6px;
                font-size: 13px;
                font-style: normal;
                font-weight: 400;
                line-height: 1.35;
                color: #e42323;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__input-wrap {
                position: relative;
                z-index: 2;
                display: flex;
                align-items: center;
                gap: 12px;
                width: 100%;
                height: 48px;
                padding: 8px 16px;
                border-radius: 28px;
                background: #FFFFFF;
                overflow: visible;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-tip {
                position: absolute;
                left: 0;
                right: 0;
                top: auto;
                bottom: calc(100% + 10px);
                z-index: 12;
                padding: 8px 12px;
                background: #363F5A;
                border-radius: 8px;
                box-shadow: 0 4px 14px rgba(16, 21, 26, 0.28);
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                transform: translateY(6px);
                transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-tip::after {
                content: '';
                position: absolute;
                left: 50%;
                bottom: -6px;
                margin-left: -6px;
                border: 6px solid transparent;
                border-top-color: #363F5A;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-tip--visible {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-tip__text {
                font-size: 13px;
                font-weight: 600;
                line-height: 1.35;
                color: #EAEDF0;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__input-icon {
                display: inline-flex;
                flex-shrink: 0;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__check {
                flex-shrink: 0;
                width: 20px;
                height: 15.56px;
                margin: 0;
                padding: 0;
                background: #09A59C;
                -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2216%22%20viewBox%3D%220%200%2020%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_514_1309)%22%3E%3Cpath%20d%3D%22M7.78%2015.56L0%207.78L3.34%204.44L7.78%208.88L16.66%200L20%203.34L7.78%2015.56Z%22%20fill%3D%22%2309A59C%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_514_1309%22%3E%3Crect%20width%3D%2220%22%20height%3D%2215.56%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E") no-repeat center;
                mask: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2216%22%20viewBox%3D%220%200%2020%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_514_1309)%22%3E%3Cpath%20d%3D%22M7.78%2015.56L0%207.78L3.34%204.44L7.78%208.88L16.66%200L20%203.34L7.78%2015.56Z%22%20fill%3D%22%2309A59C%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_514_1309%22%3E%3Crect%20width%3D%2220%22%20height%3D%2215.56%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E") no-repeat center;
                -webkit-mask-size: 20px 15.56px;
                mask-size: 20px 15.56px;
                opacity: 0;
                visibility: hidden;
                transform: scale(0.45);
                pointer-events: none;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__check--visible {
                visibility: visible;
                animation: logo-design-welcome-field-check-in 0.35s ease-out forwards;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__input {
                flex: 1 1 auto;
                min-width: 0;
                height: 22px;
                margin: 0;
                padding: 0 !important;
                border: none !important;
                border-radius: 0;
                background: transparent !important;
                font-size: 16px;
                line-height: 22px;
                color: #05A59B !important;
                outline: none;
                box-shadow: none !important;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__input:placeholder-shown {
                color: #9A9FAC !important;
                font-weight: bold !important;
                -webkit-text-fill-color: rgba(154, 159, 172, 0.55) !important;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__input:not(:placeholder-shown) {
                color: #05A59B !important;
                font-weight: bold !important;
                -webkit-text-fill-color: #05A59B !important;
            }

            /* MOBILE ONLY: welcome modal keywords field — match company + tagline weight */
            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__input.input-search-modal {
                font-family: 'Open Sans', sans-serif;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__input.input-search-modal:not(:placeholder-shown) {
                font-weight: 700 !important;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__input::placeholder,
            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__input::-webkit-input-placeholder,
            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__input::-moz-placeholder,
            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__input:-ms-input-placeholder,
            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__input::-ms-input-placeholder {
                color: #9A9FAC !important;
                font-size: 16px !important;
                font-weight: bold !important;
                opacity: 0.55 !important;
                -webkit-text-fill-color: rgba(154, 159, 172, 0.55) !important;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__input-wrap--error,
            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__input-wrap--error:focus-within {
                box-shadow: 0 0 0 2px #e42323;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__input.required-field,
            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__input.error-input {
                border: none !important;
                box-shadow: none !important;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .label-search-modal,
            body.creation-logo-route .search-overlay.logo-design-welcome-modal .svg-icon:before,
            body.creation-logo-route .search-overlay.logo-design-welcome-modal .icon-loupe2:before,
            body.creation-logo-route .search-overlay.logo-design-welcome-modal .icon-editer:before,
            body.creation-logo-route .search-overlay.logo-design-welcome-modal .icon-home:before {
                display: none !important;
                content: none !important;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__actions {
                margin: 28px auto 0;
                padding: 0;
                width: 100%;
                max-width: none;
                text-align: center;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__submit {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 12px;
                width: 100%;
                max-width: 100%;
                height: 48px;
                margin: 0;
                padding: 8px 24px;
                box-sizing: border-box;
                border: none;
                border-radius: 28px;
                background: #FFA20C;
                font-family: 'Open Sans', sans-serif;
                font-size: 20px;
                font-weight: 700;
                line-height: 22px;
                color: #FFFFFF;
                white-space: nowrap;
                cursor: pointer;
                box-shadow: none;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__submit:active {
                background: #E8900B;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__submit-icon.logo-design-desktop-only {
                display: block !important;
                flex-shrink: 0;
                width: 23px;
                height: 24px;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__submit-label.logo-design-desktop-only {
                display: inline !important;
                flex-shrink: 0;
                color: #FFFFFF;
                white-space: nowrap;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__submit .logo-design-mobile-only {
                display: none !important;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__checkbox-container {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                margin: 24px auto 0;
                box-sizing: border-box;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__checkbox-label {
                display: inline-flex;
                align-items: center;
                gap: 16px;
                cursor: pointer;
                user-select: none;
                font-family: 'Open Sans', sans-serif;
                font-size: 16px;
                font-weight: 400;
                /* line-height: 32px; */
                color: #FFFFFF;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__checkbox-input {
                position: absolute;
                opacity: 0;
                cursor: pointer;
                height: 0;
                width: 0;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__checkbox-custom {
                position: relative;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 24px;
                height: 24px;
                background-color: #FFFFFF;
                border-radius: 4.2px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                transition: transform 0.2s ease;
                box-sizing: border-box;
                flex-shrink: 0;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__checkbox-input:checked~.logo-design-welcome-modal__checkbox-custom {
                background-color: #FFFFFF;
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__checkbox-label:hover .logo-design-welcome-modal__checkbox-custom {
                transform: scale(1.05);
            }

            body.creation-logo-route .search-overlay.logo-design-welcome-modal .logo-design-welcome-modal__checkbox-input:checked~.logo-design-welcome-modal__checkbox-custom::after {
                content: '';
                display: block;
                width: 16.5px;
                height: 12.83px;
                background: url('/images/vector.png') no-repeat center;
                background-size: contain;
            }

            body.creation-logo-route.logo-design-welcome-modal-open .search-overlay-container.logo-design-welcome-modal-container.closeModal {
                -webkit-transition: opacity 0.4s ease, visibility 0.4s ease;
                transition: opacity 0.4s ease, visibility 0.4s ease;
            }

            body.creation-logo-route.etape2.logo-design-welcome-modal-open .sidebar {
                z-index: 290 !important;
            }

            .search-bar-container-fixed {
                padding-left: 0px !important;
            }

            .content-step2 {
                padding-left: 0px !important
            }

            .edit-bar {
                display: none;
            }

            .search-bar-container {
                padding-right: 80px !important;
                padding-left: 35px !important;
            }

            .search-bar-container .icon-loupe2 {
                right: 35px !important;
            }

            .text-preview-svg {
                display: none;
            }

            .resizer {
                /* display:none !important;*/
            }

            /* Full width — same as mobile search bar (inside .logo-container) */
            .logo-presentation {
                padding: 14px 20px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                margin-left: 0px !important;
                margin-right: 0px !important;
                width: 100% !important;
                max-width: none !important;
                height: auto !important;
                min-width: 0 !important;
                min-height: 240px !important;
                aspect-ratio: 380 / 290 !important;
                box-sizing: border-box !important;
            }

            .logo-container-div,
            .logo-skeleton-grid {
                grid-template-columns: 1fr !important;
                column-gap: 0 !important;
                row-gap: 24px !important;
                justify-items: stretch;
            }

            .logo-presentation > svg {
                width: 100% !important;
                max-width: 275px !important;
                height: auto !important;
                aspect-ratio: 250 / 180;
            }

            .logo-presentation > .logo-html-stack:not(.logo-html-stack--inside-shape):not(.logo-html-stack--ltr) {
                width: 100% !important;
                max-width: 275px !important;
            }

            .logo-presentation > .logo-html-stack.logo-html-stack--ltr {
                width: 100% !important;
                max-width: 275px !important;
            }

            .logo-presentation > .logo-html-stack.logo-html-stack--inside-shape {
                width: 100% !important;
                max-width: none !important;
            }

            .logo-presentation > .logo-html-stack:not(.logo-html-stack--inside-shape):not(.logo-html-stack--ltr) .logo-html-stack__icon-svg {
                max-width: 100%;
                height: auto;
            }

            .logo-presentation > .logo-html-stack--ltr .logo-html-stack__icon-svg {
                max-width: 100%;
                height: auto;
            }

            .logo-presentation > .logo-html-stack:not(.logo-html-stack--inside-shape):not(.logo-html-stack--ltr) .logo-html-stack__svg--monogram .logo-html-stack__icon-svg {
                width: 100% !important;
                height: 100% !important;
                max-width: 100% !important;
                max-height: 100% !important;
            }

            .search-bar-container {
                width: 100% !important;
            }

            .search-bar-container-fixed {
                width: 98% !important;
            }

            .tooltip-help {
                display: none !important;
            }

            .logo-container {
                padding-left: 35px !important;
                padding-right: 35px !important;
            }

            .sidebar {
                display: none;
            }

            /* Phase 0: unlock editor chrome on mobile only during etape 3 */
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar {
                display: block;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .sidebar {
                display: flex;
            }

            body.creation-logo-route.mobile-editor-enabled.etape2 .edit-bar,
            body.creation-logo-route.mobile-editor-enabled:not(.etape3) .edit-bar {
                display: none !important;
            }

            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar,
            body.creation-logo-route.mobile-editor-enabled.etape2.mobile-edit-sheet-open .edit-bar {
                display: block !important;
            }

            /*
             * Mobile editor shell (etape 3):
             * - Canvas full-bleed
             * - Tools as bottom icon bar
             * - Palettes as bottom sheet (not left rail)
             * - Compact horizontal shortcut strip
             */
            body.creation-logo-route.mobile-editor-enabled.etape3 {
                overflow: hidden !important;
                overflow-x: hidden !important;
                width: 100% !important;
                max-width: 100% !important;
                position: relative;
            }

            /* Prevent document-level sideways scroll on iOS/Android */
            html:has(body.creation-logo-route.mobile-editor-enabled.etape3) {
                overflow-x: hidden !important;
                max-width: 100% !important;
            }

            /* Desktop print-frame is 3440px fixed — clips off-screen and causes
               horizontal page scroll on phones. Hide it in the mobile editor. */
            body.creation-logo-route.mobile-editor-enabled.etape3 .cadre-logo {
                display: none !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .mobile-edit-sheet-backdrop {
                display: none;
                position: fixed;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                /* Light full-screen dim so tap-outside still closes; logo above the half-sheet stays readable */
                background: rgba(22, 28, 45, 0.18);
                z-index: 280;
                border: 0;
                padding: 0;
                margin: 0;
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .mobile-edit-sheet-backdrop {
                display: block;
            }

            /* Shape sheet: don't cover the canvas above the drawer — hyphens /
               dividers live there and must show live color updates. */
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open.mobile-edit-sheet-shape-select .mobile-edit-sheet-backdrop {
                top: 46vh;
                top: 46dvh;
                background: rgba(22, 28, 45, 0.12);
            }

            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open.mobile-edit-sheet-shape-select.mobile-edit-sheet-expanded .mobile-edit-sheet-backdrop {
                top: 25vh;
                top: 25dvh;
            }

            /*
             * Keep the green selection box + handles while any tool drawer is open.
             * Cap z-index below the sheet (300) so chrome in the lower canvas does
             * not steal taps from the drawer. Selection only clears on background tap.
             */
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .editor .resizer.active,
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .editor .resizer.active .ui-resizable-handle,
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .editor .resizer.active .ui-rotatable-handle,
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .editor .resizer.active .ui-symetrie-handle,
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .editor .resizer.active .ui-more-options-handle {
                visibility: visible !important;
                pointer-events: auto !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .editor .resizer.active,
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .editor .resizer.active.resizer-type-text,
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .editor .resizer.active.resizer-decorative {
                z-index: 250 !important;
            }

            /*
             * HTML canvas text jumps to z-index 2500 while $root.editing (sheet
             * inputs also set that). Cap below the drawer (300) so glyphs do not
             * paint over "Your Texts" / other mobile sheets.
             */
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .html-text-paint-layer,
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .html-text-paint-layer.has-text-editing,
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .html-logo-text--editor,
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .html-logo-text--editor.is-editing {
                z-index: 240 !important;
            }

            /* Inactive resizers stay hittable to switch target; hide their chrome */
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .editor .resizer:not(.active) {
                visibility: visible !important;
                pointer-events: auto !important;
                border-color: transparent !important;
                box-shadow: none !important;
                background: transparent !important;
                z-index: 240 !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .editor .resizer:not(.active) > * {
                visibility: hidden !important;
                pointer-events: none !important;
            }

            /* Hide canvas text caret while the Text (or any) drawer is open —
               the native input caret in the sheet is the only one that should show. */
            body.creation-logo-route.mobile-editor-enabled.etape3 .cursor-focus,
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .cursor-focus {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
            }

            /*
             * Mobile drawer: kill visible canvas text selection UI. OS tear-drop
             * handles ignore z-index and otherwise float on top of the sheet;
             * JS clears the range — CSS keeps any residual ::selection invisible.
             */
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .html-logo-text--editor::selection,
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .html-logo-text--editor *::selection {
                background: transparent !important;
                color: inherit !important;
            }
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .html-logo-text--editor::-moz-selection,
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .html-logo-text--editor *::-moz-selection {
                background: transparent !important;
                color: inherit !important;
            }
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .html-logo-text--editor,
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .html-logo-text--editor.is-editing {
                -webkit-user-select: none !important;
                user-select: none !important;
                caret-color: transparent !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .shortcut-bar,
            body.creation-logo-route.mobile-editor-enabled.etape3 .shortcut-bar.visible {
                left: 0 !important;
                right: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                top: 50px;
                height: 44px;
                z-index: 200 !important;
                overflow-x: hidden;
                overflow-y: hidden;
                box-sizing: border-box !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .shortcut-container {
                display: flex !important;
                width: 100% !important;
                min-width: 0 !important;
                max-width: 100% !important;
                height: 100%;
                margin: 0;
                padding: 0 6px;
                box-sizing: border-box;
                justify-content: space-evenly;
                align-items: center;
                gap: 0;
            }

            /* Icon-only toolbar — evenly spaced tap targets */
            body.creation-logo-route.mobile-editor-enabled.etape3 .shortcut-item {
                flex: 1 1 0;
                width: auto;
                min-width: 0;
                max-width: none;
                height: 44px;
                padding: 0 !important;
                margin: 0;
                font-size: 0 !important;
                line-height: 0 !important;
                color: transparent !important;
                overflow: hidden;
                border-left: none !important;
                box-sizing: border-box;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .shortcut-item::before {
                left: 50% !important;
                top: 50% !important;
                transform: translate(-50%, -50%) !important;
                width: 22px;
                height: 22px;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .sidebar,
            body.creation-logo-route.etape2 .sidebar {
                top: auto !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                width: 100% !important;
                height: 64px !important;
                max-height: 64px !important;
                display: flex !important;
                flex-direction: row !important;
                align-items: stretch;
                justify-content: space-between;
                overflow-x: hidden;
                overflow-y: hidden;
                z-index: 320 !important;
                border-top: 1px solid #DFE5EB;
                border-right: none;
                background: #F9FBFF;
                box-shadow: 0 -2px 10px rgba(54, 63, 90, 0.08);
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .sidebar .config-button,
            body.creation-logo-route.etape2 .sidebar .config-button {
                flex: 1 1 0 !important;
                min-width: 0 !important;
                max-width: none !important;
                width: auto !important;
                padding: 8px 2px 6px !important;
                border-bottom: none !important;
                border-right: 1px solid #DFE5EB;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .sidebar .config-button:last-of-type,
            body.creation-logo-route.mobile-editor-enabled.etape3 .sidebar .config-button.icon-tutorial,
            body.creation-logo-route.etape2 .sidebar .config-button:last-of-type,
            body.creation-logo-route.etape2 .sidebar .config-button.icon-tutorial {
                border-right: none;
            }

            /* Desktop spacer — hide so tabs fill the bar evenly */
            body.creation-logo-route.mobile-editor-enabled.etape3 .sidebar .fill,
            body.creation-logo-route.etape2 .sidebar .fill {
                display: none !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .sidebar .config-button:before,
            body.creation-logo-route.etape2 .sidebar .config-button:before {
                width: 28px !important;
                height: 22px !important;
                margin-bottom: 2px !important;
                background-size: contain;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .sidebar .config-button div,
            body.creation-logo-route.etape2 .sidebar .config-button div {
                /* 10px + Open Sans: capital I reads as a tiny “i”. Slightly larger + semibold. */
                font-size: 11px !important;
                font-weight: 600 !important;
                font-variant: normal !important;
                text-transform: none !important;
                line-height: 1.15 !important;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 0 2px;
            }

            body.creation-logo-route.etape2 .sidebar .config-button.icon-background {
                display: none !important;
            }

            /*
             * Tab order on the template grid: Favourites, Texts, icon, Logos,
             * Details, Tutorials. Flex `order` only — the markup keeps its DOM
             * order, which desktop's vertical rail and the etape 3 bar still use.
             * Tutorials stays visually last, so the border-right:none rule that
             * names .icon-tutorial still lands on the right edge.
             */
            body.creation-logo-route.etape2 .sidebar .config-button.icon-favoris {
                order: 1;
            }

            body.creation-logo-route.etape2 .sidebar .config-button.icon-textes {
                order: 2;
            }

            body.creation-logo-route.etape2 .sidebar .config-button.icon-icones {
                order: 3;
            }

            body.creation-logo-route.etape2 .sidebar .config-button.icon-info {
                order: 4;
            }

            body.creation-logo-route.etape2 .sidebar .config-button.icon-finitions {
                order: 5;
            }

            body.creation-logo-route.etape2 .sidebar .config-button.icon-tutorial {
                order: 6;
            }

            /* Tab colour transitions. styles-v2.css declares only -webkit- and
               -ms- transitions on .config-button, so nothing animated in a modern
               browser — the unprefixed property is what makes the fade work.
               "Only one active" is structural: .active keys off showEditBar,
               which holds a single value, so opening one tab drops the other. */
            body.creation-logo-route.etape2 .sidebar .config-button {
                background-color: #F9FBFF;
                -webkit-transition: background-color 220ms ease;
                transition: background-color 220ms ease;
            }

            body.creation-logo-route.etape2 .sidebar .config-button.active,
            body.creation-logo-route.etape2 .sidebar .config-button.active:hover {
                background-color: #FFFFFF !important;
            }

            /* Touch leaves :hover stuck on the tapped tab, which would strand a
               third colour on the bar. Match the resting state instead. */
            body.creation-logo-route.etape2 .sidebar .config-button:hover {
                background-color: #F9FBFF;
            }

            /* Logos is inert on the template grid: the grid already IS the Logos
               view, so the tab never activates here. Its ng-class adds 'disabled',
               which the global rule greys to 0.3 and makes untappable. */

            /* Clear the fixed 64px tab bar so the last template tile stays
               reachable (was 150px when the Modify my details pill sat above it). */
            body.creation-logo-route.etape2 .content-step2 {
                padding-bottom: 88px !important;
            }

            body.creation-logo-route.etape2 .sub-title-search-bar {
                display: none !important;
            }

            body.creation-logo-route .tooltip-error.xxx:after,
            body.creation-logo-route .tooltip-error.similar-templates-tip:after {
                right: auto;
                left: var(--fav-tip-arrow-left, 50%);
                top: 100%;
                margin-left: -6px;
                border-width: 7px 6px 0 6px;
                border-color: #363F5A transparent transparent transparent;
                border-right-color: transparent;
                transform: none;
            }

            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar {
                position: fixed !important;
                left: 0 !important;
                right: 0 !important;
                top: 46vh !important;
                top: 46dvh !important;
                bottom: 64px !important;
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                max-height: none !important;
                min-height: 0 !important;
                transform: translateY(0) !important;
                -webkit-transform: translateY(0) !important;
                pointer-events: auto !important;
                z-index: 300 !important;
                border-radius: 14px 14px 0 0;
                border-right: none;
                border-top: 1px solid #E3E3E8;
                box-shadow: 0 -8px 28px rgba(22, 28, 45, 0.18);
                padding-top: 0 !important;
                padding-bottom: 12px !important;
                overflow: hidden !important;
                background: #fff;
                box-sizing: border-box !important;
                opacity: 1;
                -webkit-transition: opacity 280ms ease, -webkit-transform 280ms ease;
                transition: opacity 280ms ease, transform 280ms ease;
            }

            /*
             * Fade the drawer out on close. The sheet is display:none unless
             * .mobile-edit-sheet-open, so dropping that class ends the element's
             * layout at once and no transition can run — closing popped. JS keeps
             * the open class for the length of this fade and adds
             * .mobile-edit-sheet-closing, so the geometry above still applies
             * while opacity and transform animate; the open class comes off after.
             * One extra class beats the translateY(0) !important above.
             */
            body.creation-logo-route.etape2.mobile-edit-sheet-open.mobile-edit-sheet-closing .edit-bar {
                opacity: 0 !important;
                transform: translateY(6%) !important;
                -webkit-transform: translateY(6%) !important;
                pointer-events: none !important;
            }

            body.creation-logo-route.etape2.mobile-edit-sheet-open.mobile-edit-sheet-closing .mobile-edit-sheet-backdrop {
                opacity: 0;
                pointer-events: none;
            }

            /*
             * Grey filter behind any open drawer on the template grid. It stays
             * mounted (its ng-if is just isLogoTemplatesMobileBar()) and fades on
             * the body class, because a CSS transition cannot animate an element
             * that ng-if inserts already at its final opacity — that popped.
             * Closed it is inert: no hit target over the grid.
             */
            body.creation-logo-route.etape2 .mobile-edit-sheet-backdrop {
                position: fixed;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                display: block;
                background: rgba(22, 28, 45, 0.18);
                opacity: 0;
                visibility: hidden;
                pointer-events: none;
                -webkit-transition: opacity 280ms ease, visibility 280ms ease;
                transition: opacity 280ms ease, visibility 280ms ease;
                z-index: 280;
                border: 0;
                padding: 0;
                margin: 0;
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
            }

            body.creation-logo-route.etape2.mobile-edit-sheet-open .mobile-edit-sheet-backdrop {
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
            }

            /* Chevron expands the etape-2 drawer to the same 3/4 stop as etape 3. */
            body.creation-logo-route.etape2.mobile-edit-sheet-expanded .edit-bar,
            body.creation-logo-route.etape2.mobile-edit-sheet-expanded .edit-bar.active {
                top: 25vh !important;
                top: 25dvh !important;
            }

            /*
             * Texts drawer on the template grid: the 'info' palette — the same
             * company name / tagline / industry sidebar desktop shows beside the
             * grid. Unlike .favoris-palette the palette element IS the scroll
             * container (class="palette info-palette scrollbar"), so it scrolls
             * itself rather than delegating to a child.
             */
            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .palette.info-palette.active {
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                display: block !important;
                width: auto !important;
                height: auto !important;
                min-height: 0 !important;
                max-height: none !important;
                padding: 26px 16px 24px !important;
                overflow-x: hidden !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch !important;
                touch-action: pan-y !important;
                overscroll-behavior: contain;
                box-sizing: border-box !important;
                pointer-events: auto !important;
                z-index: 2 !important;
            }

            /* ng-scrollbars may wrap the contents in mCustomScrollbar markup;
               flatten it so the native scroll above is the one that runs. */
            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .info-palette .mCustomScrollBox,
            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .info-palette .mCSB_container {
                height: auto !important;
                max-height: none !important;
                width: 100% !important;
                overflow: visible !important;
                box-sizing: border-box !important;
            }

            /* Desktop pins these to 235px; the drawer is full width. */
            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .info-palette .input-box2,
            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .info-palette .custom-select,
            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .info-palette .btn-ok-ctn,
            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .info-palette .selectBox-dropdown {
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            /*
             * iOS zooms the page whenever a focused form control computes under
             * 16px, and never zooms back out on its own — Android does not, which
             * is why this only showed on iPhone. .input-box2 is 14px by default,
             * so tapping the company name or tagline in this drawer zoomed the UI.
             * Prevent it at the source rather than undoing it afterwards: the
             * viewport meta carries no initial-scale to snap back to, and
             * resetMobileEditorViewportZoom() is gated to the etape 3 editor.
             * Same countermeasure the editor drawer already uses (see the
             * mobile-editor-enabled.etape3 .edit-bar input rule further down).
             */
            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .info-palette input,
            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .info-palette select,
            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .info-palette textarea,
            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .info-palette .input-box2 {
                font-size: 16px !important;
            }

            /*
             * Industry picker: use the native <select> in the drawer, not the
             * jQuery selectBox widget the desktop sidebar builds from it. That
             * widget has never run at mobile width (this palette is hidden there),
             * and its body-appended menu measured 0-height inside the sheet — it
             * never opened. The native control is what the mobile info panel uses,
             * and ng-model / ng-change stay on this element either way.
             */
            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .info-palette .selectBox-dropdown {
                display: none !important;
            }

            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .info-palette select.custom-select {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                height: 44px;
                padding: 0 12px;
                border: 1px solid #DFE5EB;
                border-radius: 4px;
                background: #fff;
                color: #363F5A;
                font-family: 'Open Sans', sans-serif;
                /* font-size intentionally not set here — the anti-zoom rule above
                   pins every control in this palette to 16px. A 14px value here
                   would be dead (that rule is !important) and would read as if
                   these selects were still small enough to trigger iOS zoom. */
                box-sizing: border-box !important;
                -webkit-appearance: none;
                appearance: none;
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23626A80' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right 12px center;
            }

            /* The palette's own heading duplicates nothing on mobile, but the
               drawer already has the tab bar for context — keep it compact. */
            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .info-palette .config-block {
                margin-bottom: 18px !important;
            }

            /*
             * Orientation + logo-type filters. A blanket rule further down this
             * same media query hides .logo-style-filter-desktop-only, from when
             * the palette was never shown on mobile — the Texts drawer now is, so
             * bring them back inside it. Their selects pick up the native-control
             * and full-width rules above, which match on any .custom-select here.
             */
            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .info-palette .logo-style-filter-desktop-only {
                display: block !important;
            }

            /* The filter block sits straight under the industry select with no
               gap of its own — desktop spaces it in the min-width:769px block. */
            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .info-palette .logo-style-filter-desktop-only > .title-sidebar1 {
                margin-top: 18px;
            }

            /*
             * Close button on the heading's own line. The X is absolutely
             * positioned against the sheet while the heading is laid out inside
             * the palette, so the two offsets are set together. 16px is measured,
             * not derived: it puts the 32px button's centre on the title's centre
             * for both drawers, whose headings land at the same height.
             * !important because the base rule below matches at equal specificity
             * and, being later in the file, would otherwise win with top:4px.
             */
            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .mobile-edit-bar-close {
                top: 16px !important;
            }

            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .palette.info-palette.active {
                padding-top: 20px !important;
            }

            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .palette.favoris-palette.active > .config-block {
                padding-top: 20px !important;
            }

            /* Keep the heading clear of the X (right 8px + 32px wide), which long
               translations would otherwise run under. */
            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .palette.info-palette.active > .config-block:first-of-type,
            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .palette.favoris-palette.active > .config-block {
                padding-right: 52px !important;
            }

            /*
             * Favourites drawer was clipping its second row: the palette is a
             * flex column with overflow:hidden and inherits 45px of bottom
             * padding from the base .palette, so the scroll viewport ended 45px
             * above the sheet floor. A partly-scrolled row was sliced there with
             * blank white beneath it, which read as broken rather than
             * scrollable. Let the scroller reach the sheet floor instead — the
             * scrollbar keeps its own 24px end padding.
             */
            body.creation-logo-route.etape2.mobile-edit-sheet-open .edit-bar .palette.favoris-palette.active {
                padding-top: 0 !important;
                padding-bottom: 0 !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar {
                position: fixed !important;
                left: 0 !important;
                right: 0 !important;
                /* Default height — ~10% shorter so the sheet sits just below logo text */
                top: 46vh !important;
                top: 46dvh !important;
                bottom: 64px !important;
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                max-height: none !important;
                min-height: 0 !important;
                transform: translateY(110%);
                -webkit-transform: translateY(110%);
                transition: transform 0.28s ease, top 0.28s ease, -webkit-transform 0.28s ease;
                pointer-events: none !important;
                z-index: 300 !important;
                border-radius: 14px 14px 0 0;
                border-right: none;
                border-top: 1px solid #E3E3E8;
                box-shadow: 0 -8px 28px rgba(22, 28, 45, 0.18);
                padding-bottom: 12px !important;
                padding-top: 0 !important;
                overflow-x: hidden !important;
                overflow-y: hidden !important;
                background: #fff;
                box-sizing: border-box !important;
            }

            /* Expanded: ~3/4 of the screen (~25% more sheet height) */
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-expanded .edit-bar,
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-expanded .edit-bar.active {
                top: 25vh !important;
                top: 25dvh !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar.active {
                transform: translateY(0);
                -webkit-transform: translateY(0);
                /*
                 * Keep the shell pointer-events:none (rule above). Leftover mCS /
                 * absolute layers on .edit-bar steal touches from green/red if the
                 * shell is auto. Re-enable hits only on chrome + active palette.
                 */
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar.active > .palette,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar.active > .mobile-edit-sheet-expand,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar.active > .mobile-edit-bar-close {
                pointer-events: auto !important;
            }

            /* Never let the loading overlay eat taps after icons are shown */
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .icons-picker-loader.ng-hide {
                display: none !important;
                pointer-events: none !important;
            }

            /* Green/red layers must beat any leftover absolute chrome on the sheet */
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette-body,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .finition-palette-body,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .icons-picker-results,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .icons-picker-scroll,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .finition-picker-results,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .finition-picker-scroll,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .search-bar-container,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .finition-category-tabs {
                pointer-events: auto !important;
            }

            /* Top expand / collapse — plain single chevron, centered */
            body.creation-logo-route:is(.mobile-editor-enabled.etape3, .etape2) .edit-bar .mobile-edit-sheet-expand {
                display: flex !important;
                align-items: center;
                justify-content: center;
                position: absolute;
                top: 2px;
                left: 50%;
                transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                z-index: 6;
                width: 44px;
                height: 24px;
                margin: 0;
                padding: 0;
                border: 0;
                border-radius: 0;
                background: transparent;
                box-shadow: none;
                cursor: pointer;
                pointer-events: auto !important;
                -webkit-tap-highlight-color: transparent;
            }

            body.creation-logo-route:is(.mobile-editor-enabled.etape3, .etape2) .edit-bar .mobile-edit-sheet-expand-grip {
                display: none !important;
            }

            body.creation-logo-route:is(.mobile-editor-enabled.etape3, .etape2) .edit-bar .mobile-edit-sheet-expand-chevron {
                display: block;
                width: 0;
                height: 0;
                border-left: 7px solid transparent;
                border-right: 7px solid transparent;
                /* Collapsed: single chevron up */
                border-bottom: 8px solid #8A94A6;
                border-top: 0;
            }

            body.creation-logo-route:is(.mobile-editor-enabled.etape3, .etape2) .edit-bar .mobile-edit-sheet-expand-chevron::before,
            body.creation-logo-route:is(.mobile-editor-enabled.etape3, .etape2) .edit-bar .mobile-edit-sheet-expand-chevron::after {
                content: none !important;
                display: none !important;
            }

            /* Expanded: single chevron down */
            body.creation-logo-route:is(.mobile-editor-enabled.etape3, .etape2) .edit-bar .mobile-edit-sheet-expand.expanded .mobile-edit-sheet-expand-chevron {
                border-top: 8px solid #8A94A6;
                border-bottom: 0;
            }

            /* Same close button on the etape-2 drawers. The element carries an
               inline display:none, so this needs !important either way. */
            body.creation-logo-route:is(.mobile-editor-enabled.etape3, .etape2) .edit-bar .mobile-edit-bar-close {
                display: flex !important;
                align-items: center;
                justify-content: center;
                position: absolute;
                top: 4px;
                right: 8px;
                z-index: 5;
                width: 32px;
                height: 32px;
                border: 0;
                border-radius: 16px;
                background: #F0F4FA;
                color: #363F5A;
                font-size: 20px;
                line-height: 1;
                cursor: pointer;
                pointer-events: auto !important;
                -webkit-tap-highlight-color: transparent;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette {
                padding-top: 32px !important;
                padding-bottom: 12px !important;
                height: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box;
                overflow-x: hidden !important;
                /* Default drawers scroll the palette; Logos/Details/Fonts override
                   to overflow:hidden and scroll their results pane instead. */
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
                touch-action: pan-y !important;
                overscroll-behavior: contain;
            }

            /*
             * Mobile drawers use native .palette scroll. ng-scrollbars / mCS sets
             * touch-action:pinch-zoom and preventDefault on touchmove — that kills
             * drawer scroll, icon taps, font taps, and gradient checkbox. Disable
             * the plugin chrome so content flows and .palette scrolls.
             */
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .mCustomScrollbar {
                -ms-touch-action: auto !important;
                touch-action: pan-y !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .mCustomScrollBox {
                position: static !important;
                overflow: visible !important;
                height: auto !important;
                max-height: none !important;
                max-width: 100% !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .mCSB_container {
                overflow: visible !important;
                height: auto !important;
                margin-right: 0 !important;
                margin-bottom: 0 !important;
                position: relative !important;
                top: auto !important;
                left: auto !important;
                right: auto !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .mCSB_scrollTools,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .mCSB_scrollTools_vertical,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .mCSB_draggerContainer {
                display: none !important;
                pointer-events: none !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .colorpicker-degrade,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .degrade-checkbox,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .colorpicker-color,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .color-history,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .font-family-box {
                pointer-events: auto !important;
                touch-action: manipulation;
            }

            /* Grid tiles stay tappable; descendants must NOT capture pan/wheel */
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .logo-search,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .detail-shape {
                pointer-events: auto !important;
                touch-action: pan-y !important;
                cursor: pointer;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .logo-search *,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .detail-shape *,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .logo-demo,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .logo-demo img,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .detail-shape svg {
                pointer-events: none !important;
            }

            /* Drawer header: title only (no description), divider kept, pulled up for space */
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette .subtitle-palette {
                display: none !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette .title-palette {
                padding-right: 36px;
                margin-bottom: 0 !important;
                font-size: 15px;
                line-height: 1.25;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette > .config-block.block-text:first-child,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette > .config-block.block-fonts:first-child {
                padding-top: 0 !important;
                padding-bottom: 8px !important;
                margin-bottom: 10px !important;
                /* keep .config-block border-bottom divider */
            }

            /*
             * Mobile canvas must fill the area between shortcut bar (94px) and
             * bottom tool bar (64px). .quadrillage sets height:100vh which fights
             * top/bottom stretching; #full-container-svg was position:relative with
             * height:100% and could collapse to the SVG default size — leaving the
             * white gaps on the right and bottom seen on phones.
             */
            body.creation-logo-route.mobile-editor-enabled.etape3 .step.step3 {
                position: absolute !important;
                left: 0 !important;
                right: 0 !important;
                top: 0 !important;
                bottom: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                overflow: hidden !important;
                overflow-x: hidden !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .step.step3 .editor,
            body.creation-logo-route.mobile-editor-enabled.etape3 .editor,
            body.creation-logo-route.mobile-editor-enabled.etape3 .editor.quadrillage {
                position: absolute !important;
                left: 0 !important;
                right: 0 !important;
                width: auto !important;
                max-width: none !important;
                padding-left: 0 !important;
                top: 94px !important;
                bottom: 64px !important;
                height: auto !important;
                max-height: none !important;
                min-height: 0 !important;
                box-sizing: border-box !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .editor #full-container-svg,
            body.creation-logo-route.mobile-editor-enabled.etape3 .editor #svg-editor-canvas {
                position: absolute !important;
                left: 0 !important;
                top: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: 100% !important;
                height: 100% !important;
                max-width: none !important;
                max-height: none !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .filigrane {
                left: 0 !important;
                right: 0 !important;
                width: auto !important;
                top: 94px !important;
                bottom: 64px !important;
                height: auto !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .btn-help,
            body.creation-logo-route.mobile-editor-enabled.etape3 .button-help,
            body.creation-logo-route.mobile-editor-enabled.etape3 [class*="btn-display-tuto"]:not(.config-button) {
                bottom: 76px !important;
            }

            /* Tutorials tab visible in bottom bar; drawer hosts mobile video UI */
            body.creation-logo-route.mobile-editor-enabled.etape3 .sidebar .config-button.icon-tutorial {
                display: flex !important;
            }

            /* Keep any floating desktop tuto button hidden on mobile editor */
            body.creation-logo-route.mobile-editor-enabled.etape3 .btn-display-tuto:not(.config-button) {
                display: none !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette.tuto-palette {
                overflow: hidden !important;
                -webkit-overflow-scrolling: auto !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .tuto-palette {
                display: flex;
                flex-direction: column;
                height: 100%;
                min-height: 0;
                overflow: hidden !important;
                box-sizing: border-box;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .tuto-palette .tuto-mobile-body {
                flex: 1;
                min-height: 0;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                padding: 0 16px 16px;
                box-sizing: border-box;
            }

            /* Player must receive taps — no transform / no parent scroll stealing */
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .tuto-palette .tuto-mobile-player {
                flex: 0 0 auto;
                margin-bottom: 14px;
                position: relative;
                z-index: 5;
                pointer-events: auto !important;
                touch-action: auto !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .tuto-palette .tuto-mobile-player-frame {
                position: relative;
                width: 100%;
                height: 0;
                padding: 0;
                padding-bottom: 56.25%;
                border: 1px solid #DFE5EB;
                border-radius: 8px;
                overflow: hidden;
                background: #111;
                /* Avoid translateZ — breaks iframe touch on iOS */
                transform: none !important;
                -webkit-transform: none !important;
                pointer-events: auto !important;
                touch-action: auto !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .tuto-palette .tuto-mobile-player-frame .iframe-tuto {
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: 100% !important;
                height: 100% !important;
                max-height: none !important;
                border: 0 !important;
                display: block;
                pointer-events: auto !important;
                touch-action: manipulation !important;
                z-index: 2;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .tuto-palette .tuto-mobile-active-title {
                margin-top: 8px;
                font-size: 14px;
                font-weight: 600;
                color: #242E33;
                line-height: 1.3;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .tuto-palette .tuto-mobile-list {
                flex: 1 1 auto;
                min-height: 0;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-content: flex-start;
                gap: 12px;
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                padding-bottom: 8px;
                position: relative;
                z-index: 1;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .tuto-palette .tuto-mobile-list .video-player {
                flex: 0 0 auto;
                width: 160px;
                cursor: pointer;
                pointer-events: auto !important;
                -webkit-tap-highlight-color: rgba(10, 153, 145, 0.2);
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .tuto-palette .tuto-mobile-list .video-player.active .tuto-player {
                border-color: #0a9991;
                box-shadow: 0 0 0 2px rgba(10, 153, 145, 0.35);
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .tuto-palette .tuto-mobile-list .tuto-player {
                width: 160px;
                height: 100px;
                border-radius: 6px;
                position: relative;
                pointer-events: none;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .tuto-palette .tuto-mobile-list .tuto-player img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                pointer-events: none;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .tuto-palette .tuto-mobile-list .title-player {
                font-size: 12px;
                line-height: 1.25;
                margin-top: 6px;
                pointer-events: none;
            }

            /* Nudge Zendesk / help launcher up so it clears the bottom tool bar.
               etape 2 needs it too now that the template grid has the same 64px
               tab bar; the launcher keeps its own native look either way. */
            body.creation-logo-route.mobile-editor-enabled.etape3 iframe#launcher,
            body.creation-logo-route.mobile-editor-enabled.etape3 iframe[title*="Messaging"],
            body.creation-logo-route.mobile-editor-enabled.etape3 iframe[title*="messaging"],
            body.creation-logo-route.mobile-editor-enabled.etape3 iframe[title*="Button to launch"],
            body.creation-logo-route.mobile-editor-enabled.etape3 div[data-product="web_widget"] iframe,
            body.creation-logo-route.mobile-editor-enabled.etape3 .zEWidget-launcher,
            body.creation-logo-route.etape2 iframe#launcher,
            body.creation-logo-route.etape2 iframe[title*="Messaging"],
            body.creation-logo-route.etape2 iframe[title*="messaging"],
            body.creation-logo-route.etape2 iframe[title*="Button to launch"],
            body.creation-logo-route.etape2 div[data-product="web_widget"] iframe,
            body.creation-logo-route.etape2 .zEWidget-launcher {
                bottom: 80px !important;
            }

            /* Preview CTA — left, same row/height as help launcher; below tool sheets */
            body.creation-logo-route.mobile-editor-enabled.etape3 .mobile-editor-preview-btn {
                display: inline-flex !important;
                align-items: center;
                justify-content: center;
                position: fixed;
                left: 16px;
                bottom: 90px;
                z-index: 250;
                min-width: 50px;
                height: 50px;
                padding: 0 20px;
                border: 0;
                border-radius: 25px;
                background: #0a9991;
                color: #fff;
                font-family: 'Open Sans', sans-serif;
                font-size: 14px;
                font-weight: 700;
                line-height: 1;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .mobile-editor-preview-btn:disabled {
                opacity: 0.65;
                cursor: default;
            }

            /* Hide Preview + help while a tool sheet/popup is open */
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .mobile-editor-preview-btn,
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open iframe#launcher,
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open iframe[title*="Messaging"],
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open iframe[title*="messaging"],
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open iframe[title*="Button to launch"],
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open div[data-product="web_widget"] iframe,
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open .zEWidget-launcher {
                display: none !important;
                visibility: hidden !important;
                pointer-events: none !important;
            }

            /*
             * Same idea for the etape-2 drawers (Texts / Favourites): the launcher
             * otherwise floats over the sheet's fields. Hidden with opacity, NOT
             * display:none — the snippet loads on idle while the page sits at
             * etape 2, and with no layout box it measures its own label at zero,
             * writes width:0 inline and never re-measures, so it stays invisible
             * afterwards. The etape-3 rule above predates that finding; it is safe
             * only because the widget has always measured itself by then.
             */
            body.creation-logo-route.etape2.mobile-edit-sheet-open iframe#launcher,
            body.creation-logo-route.etape2.mobile-edit-sheet-open iframe[title*="Messaging"],
            body.creation-logo-route.etape2.mobile-edit-sheet-open iframe[title*="messaging"],
            body.creation-logo-route.etape2.mobile-edit-sheet-open iframe[title*="Button to launch"],
            body.creation-logo-route.etape2.mobile-edit-sheet-open div[data-product="web_widget"] iframe,
            body.creation-logo-route.etape2.mobile-edit-sheet-open .zEWidget-launcher {
                opacity: 0 !important;
                pointer-events: none !important;
            }

            /*
             * Welcome dialog covers the whole screen on mobile, so the launcher
             * must not float over its Generate button. opacity again, never
             * display:none: this modal is open during the idle window when the
             * snippet loads, and with no layout box the widget measures its own
             * label at zero, writes width:0 inline and never re-measures.
             */
            body.creation-logo-route.logo-design-welcome-modal-open iframe#launcher,
            body.creation-logo-route.logo-design-welcome-modal-open iframe[title*="Messaging"],
            body.creation-logo-route.logo-design-welcome-modal-open iframe[title*="messaging"],
            body.creation-logo-route.logo-design-welcome-modal-open iframe[title*="Button to launch"],
            body.creation-logo-route.logo-design-welcome-modal-open div[data-product="web_widget"] iframe,
            body.creation-logo-route.logo-design-welcome-modal-open .zEWidget-launcher {
                opacity: 0 !important;
                pointer-events: none !important;
            }

            /* Mobile single-tap select+drag: hit the HTML .resizer on the first
               touch (touch-punch requires the gesture to start on the draggable).
               SVG logo-items stay non-hittable so they cannot steal the gesture.
               Desktop keeps SVG → synthetic #resizer mousedown and is unchanged. */
            body.creation-logo-route.mobile-editor-enabled.etape3 .editor #svg-editor-canvas g.logo-item,
            body.creation-logo-route.mobile-editor-enabled.etape3 .editor #svg-editor-canvas g.logo-item.active {
                pointer-events: none !important;
            }

            /*
             * Mobile icon/shape color sheet: let PATH taps reach ngShape (blink +
             * section color). Backdrop stays visible for dim but does not capture
             * hits. Sheet (z=300) keeps Spectrum interactive. No document capture.
             */
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open.mobile-edit-sheet-icon-color .mobile-edit-sheet-backdrop {
                pointer-events: none !important;
            }

            /* Parent groups must be hittable too — WebKit often ignores PATH_ auto
               when ancestor g.logo-item stays pointer-events:none. */
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open.mobile-edit-sheet-icon-color .editor #svg-editor-canvas g.logo-item[type^="container-"],
            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open.mobile-edit-sheet-icon-color .editor #svg-editor-canvas g.logo-item[type^="container-"] .svg-item {
                pointer-events: auto !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3.mobile-edit-sheet-open.mobile-edit-sheet-icon-color .editor #svg-editor-canvas g.logo-item[type^="container-"] [id^="PATH_"] {
                pointer-events: auto !important;
                touch-action: manipulation;
                -webkit-tap-highlight-color: transparent;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .mobile-icon-path-hitlayer {
                display: none !important;
                pointer-events: none !important;
            }

            /* Flash must beat .svg-item * { opacity: 0.99 } + opacity transitions */
            body.creation-logo-route #svg-editor-canvas .clignoter,
            body.creation-logo-route #svg-editor-canvas .svg-item > .clignoter,
            body.creation-logo-route #svg-editor-canvas .svg-item *.clignoter {
                -webkit-transition: none !important;
                transition: none !important;
                -webkit-animation: clignoter 0.55s linear alternate infinite !important;
                -moz-animation: clignoter 0.55s linear alternate infinite !important;
                animation: clignoter 0.55s linear alternate infinite !important;
            }

            /* Pause section blink while the color picker is actively changing color */
            body.sp-dragging.creation-logo-route #svg-editor-canvas .clignoter,
            body.sp-dragging.creation-logo-route #svg-editor-canvas .svg-item > .clignoter,
            body.sp-dragging.creation-logo-route #svg-editor-canvas .svg-item *.clignoter,
            body.color-picker-busy.creation-logo-route #svg-editor-canvas .clignoter,
            body.color-picker-busy.creation-logo-route #svg-editor-canvas .svg-item > .clignoter,
            body.color-picker-busy.creation-logo-route #svg-editor-canvas .svg-item *.clignoter {
                -webkit-animation: none !important;
                -moz-animation: none !important;
                animation: none !important;
                opacity: 1 !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .editor .resizer,
            body.creation-logo-route.mobile-editor-enabled.etape3 .editor .resizer.active {
                pointer-events: auto !important;
                touch-action: none;
                -webkit-user-select: none;
                user-select: none;
                cursor: move;
            }

            /*
             * While canvas text is contenteditable, the mobile resizer must not
             * steal touches (its pointer-events:auto !important otherwise wins
             * over the desktop has-text-editing rules). Handles stay tappable.
             */
            body.creation-logo-route.mobile-editor-enabled.etape3 .editor.has-text-editing .resizer.active.resizer-type-text,
            body.creation-logo-route.mobile-editor-enabled.etape3 .html-text-paint-layer.has-text-editing ~ .resizer.active.resizer-type-text {
                pointer-events: none !important;
                touch-action: auto;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .editor.has-text-editing .resizer.active.resizer-type-text > .ui-resizable-handle,
            body.creation-logo-route.mobile-editor-enabled.etape3 .editor.has-text-editing .resizer.active.resizer-type-text > .ui-rotatable-handle,
            body.creation-logo-route.mobile-editor-enabled.etape3 .editor.has-text-editing .resizer.active.resizer-type-text > .ui-symetrie-handle,
            body.creation-logo-route.mobile-editor-enabled.etape3 .editor.has-text-editing .resizer.active.resizer-type-text > .ui-more-options-handle {
                pointer-events: auto !important;
                touch-action: manipulation;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .editor.has-text-editing .html-logo-text--editor.is-editing {
                z-index: 2500 !important;
                pointer-events: auto !important;
                -webkit-user-select: text !important;
                user-select: text !important;
                touch-action: manipulation;
                /* No OS callout / copy menu; typing is via the Texts sheet. */
                -webkit-touch-callout: none !important;
                caret-color: transparent;
            }

            /*
             * iOS WebKit: tear-drop selection handles share the long-press
             * gesture with touch-callout. Forcing callout:none + transparent
             * caret blocks specific/partial text selection. Re-enable callout
             * + caret while editing; inputmode=none + keydown still block typing.
             */
            body.ios-device.creation-logo-route.mobile-editor-enabled.etape3 .editor.has-text-editing .html-logo-text--editor.is-editing {
                -webkit-touch-callout: default !important;
                touch-action: auto;
                caret-color: #1c1c1c;
            }

            /*
             * Inside Shape: text above integrate frames so company/tagline stay
             * tappable. Decorative details/lines/hyphens must sit ABOVE text —
             * otherwise padded text boxes steal taps and the selection won't stick.
             */
            body.creation-logo-route.mobile-editor-enabled.etape3 .editor .resizer.resizer-type-text {
                z-index: 1200 !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .editor .resizer.resizer-decorative {
                z-index: 1400 !important;
            }

            /*
             * Selected option layer (handles) always on top of every other
             * resizer — including text/decorative — so rotate/scale/invert stay
             * usable when the selection overlaps another element.
             * (Sheet-open rules below keep active at 250 under the drawer.)
             */
            body.creation-logo-route.mobile-editor-enabled.etape3 .editor .resizer.active,
            body.creation-logo-route.mobile-editor-enabled.etape3 .editor .resizer.active.resizer-type-text,
            body.creation-logo-route.mobile-editor-enabled.etape3 .editor .resizer.active.resizer-decorative {
                z-index: 2000 !important;
            }

            /* Handles only after selection (same as desktop active-only handles) */
            body.creation-logo-route.mobile-editor-enabled.etape3 .editor .resizer:not(.active) * {
                pointer-events: none !important;
            }

            /* Inverse / + / rotate / scale must receive taps (not start a drag) */
            body.creation-logo-route.mobile-editor-enabled.etape3 .editor .resizer.active > .ui-symetrie-handle,
            body.creation-logo-route.mobile-editor-enabled.etape3 .editor .resizer.active > .ui-more-options-handle,
            body.creation-logo-route.mobile-editor-enabled.etape3 .editor .resizer.active > .ui-rotatable-handle,
            body.creation-logo-route.mobile-editor-enabled.etape3 .editor .resizer.active > .ui-resizable-handle {
                pointer-events: auto !important;
                touch-action: manipulation;
                -webkit-tap-highlight-color: transparent;
                /* ~25% larger than desktop 23px — easier to grab on touch */
                width: 29px !important;
                height: 29px !important;
                line-height: 29px !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .editor .resizer.active > .ui-resizable-handle {
                bottom: -15px !important;
                right: -15px !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .editor .resizer.active > .ui-rotatable-handle {
                top: -15px !important;
                left: -15px !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .editor .resizer.active > .ui-more-options-handle {
                top: -15px !important;
                right: -15px !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .editor .resizer.active > .ui-symetrie-handle {
                bottom: -15px !important;
                left: -15px !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .editor .resizer.active > .ui-rotatable-handle:before {
                font-size: 19px !important;
                top: 5px !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .editor .resizer.active > .ui-symetrie-handle:before {
                font-size: 21px !important;
                top: 4px !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .editor .resizer.active > .ui-more-options-handle:before,
            body.creation-logo-route.mobile-editor-enabled.etape3 .editor .resizer.active > .ui-resizable-handle:before {
                font-size: 18px !important;
                top: 6px !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .editor .resizer.active.ui-draggable-dragging {
                box-shadow: 0 0 0 2px rgba(10, 153, 145, 0.45);
                opacity: 0.92;
            }

            /* Your Icon drawer — Inverse control */
            body.creation-logo-route .edit-bar .mobile-inverse-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 32px;
                margin: 0;
                padding: 0;
                border: 1px solid #DFE5EB;
                border-radius: 6px;
                background: #F5F7FB;
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
            }

            body.creation-logo-route .edit-bar .mobile-inverse-btn:before {
                position: static;
                font-size: 18px;
                color: #363F5A;
            }

            body.creation-logo-route .edit-bar .mobile-inverse-btn:active {
                background: #E8EEF6;
            }

            /*
             * Mobile drawer color UI — full content width for Hex / R / G / B.
             * Spectrum ~75% size for accessibility; undo spectrum2 ≤480px side-by-side.
             */
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .content-block-color-picker,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .config-block.block-color,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .degrade-config,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .color-picker {
                width: 100% !important;
                max-width: none !important;
                box-sizing: border-box !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .color-picker-palette-box {
                width: 100% !important;
                display: flex !important;
                align-items: flex-end !important;
                justify-content: space-between !important;
                gap: 8px !important;
                box-sizing: border-box !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .color-picker-palette-box label {
                flex: 1 1 0 !important;
                min-width: 0 !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .color-picker-palette-box input[type="text"],
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .color-picker-palette-box input[type="number"] {
                width: 100% !important;
                max-width: none !important;
                box-sizing: border-box !important;
            }

            /* Mobile-only: My Colors above the picker (desktop HTML order stays spectrum → My Colors) */
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .color-picker {
                display: flex !important;
                flex-direction: column !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .color-picker > .colorpicker-history {
                order: -1;
            }

            /* ~75% of drawer width, centered */
            html body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .spectrum-color-picker,
            html body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .sp-container,
            html body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .sp-container.sp-flat,
            html body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .sp-picker-container {
                display: block !important;
                float: none !important;
                width: 75% !important;
                max-width: 75% !important;
                margin-left: auto !important;
                margin-right: auto !important;
                box-sizing: border-box !important;
            }

            html body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .sp-top {
                width: 100% !important;
                display: block !important;
                position: relative !important;
            }

            html body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .sp-color {
                left: 0 !important;
                right: 0 !important;
            }

            /* Square SV area sized to the 75% container */
            html body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .sp-fill {
                padding-top: 100% !important;
            }

            /*
             * Hue strip: tall hit target so the handle is easy to grab.
             * Gradient stays visually thin via background-size; handle uses
             * pointer-events:none so all touches hit .sp-hue (Spectrum binds there).
             */
            html body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .sp-hue {
                position: relative !important;
                left: 0 !important;
                right: 0 !important;
                width: 100% !important;
                height: 36px !important;
                margin-top: 10px !important;
                margin-bottom: 4px !important;
                border-radius: 0 !important;
                background-size: 100% 12px !important;
                background-position: center !important;
                background-repeat: no-repeat !important;
                touch-action: none !important;
                -webkit-user-select: none !important;
                user-select: none !important;
                cursor: pointer;
            }

            html body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .sp-color,
            html body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .sp-sat,
            html body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .sp-val {
                touch-action: none !important;
                -webkit-user-select: none !important;
                user-select: none !important;
            }

            /* SV handle — keep modest size so Spectrum left/top math stays accurate */
            html body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .sp-dragger {
                width: 18px !important;
                height: 18px !important;
                margin-top: 0 !important;
                margin-left: 0 !important;
                border: 2px solid #fff !important;
                border-radius: 50% !important;
                background: transparent !important;
                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.25) !important;
                transform: none !important;
                -webkit-transform: none !important;
                pointer-events: none !important;
                z-index: 5;
            }

            /*
             * Hue handle: Spectrum sets left = slideX - helperHeight, then expects
             * translateX(helperHeight/2) to center. Match that (20px → 10px).
             * pointer-events:none so taps on the knob still hit .sp-hue.
             */
            html body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .sp-slider {
                width: 20px !important;
                height: 20px !important;
                background-size: 20px 20px !important;
                top: 50% !important;
                margin-top: 0 !important;
                transform: translate(10px, -50%) !important;
                -webkit-transform: translate(10px, -50%) !important;
                pointer-events: none !important;
                z-index: 5;
            }

            /*
             * Text / Your icon / Background: scroll the palette itself (not a
             * nested results pane). Must stay overflow-y:scroll after mCS destroy
             * and must not inherit overflow:hidden from grid-drawer rules.
             */
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette.text-palette.active,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette.logo-palette.active,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette.background-palette.active {
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: auto !important;
                height: auto !important;
                min-height: 0 !important;
                max-height: none !important;
                display: block !important;
                overflow-x: hidden !important;
                overflow-y: scroll !important;
                -webkit-overflow-scrolling: touch !important;
                touch-action: pan-y !important;
                overscroll-behavior: contain;
                pointer-events: auto !important;
                box-sizing: border-box !important;
                z-index: 2 !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette.text-palette.active > *,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette.logo-palette.active > *,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette.background-palette.active > * {
                pointer-events: auto !important;
            }

            /* While dragging Spectrum, freeze drawer scroll so the gesture stays on the picker */
            body.sp-dragging.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette,
            body.sp-dragging.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette.text-palette.active,
            body.sp-dragging.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette.logo-palette.active,
            body.sp-dragging.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette.background-palette.active {
                overflow: hidden !important;
            }

            /*
             * iOS Safari zooms inputs with font-size < 16px. Keep drawer fields at
             * 16px so typing never auto-zooms; Text menu stays fully visible.
             */
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar input[type="text"],
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar input[type="number"],
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar input[type="search"],
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .input-text-information,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .input-box2,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .input-search,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .input-search-etape3 {
                font-size: 16px !important;
            }

            /* Font Selection: type bubbles on one horizontal scroll row (like shortcut bar) */
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .font-palette .font-family-filter-scroll {
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                gap: 8px;
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                margin: 0 -16px;
                padding: 0 16px 2px;
                width: auto;
                max-width: none;
                box-sizing: border-box;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .font-palette .font-family-filter-scroll .font-family-title-box {
                flex: 0 0 auto;
                display: inline-block;
                margin-right: 0 !important;
                margin-bottom: 0 !important;
                white-space: nowrap;
            }

            /* Shapes menu: category bubbles on one horizontal scroll row,
               nudged slightly right for clearer spacing under the chevron */
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .finition-palette .finition-category-tabs {
                display: flex;
                flex-wrap: nowrap;
                align-items: center;
                gap: 8px;
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                margin: 0 -16px 10px;
                padding: 0 16px 2px 28px;
                width: auto;
                max-width: none;
                box-sizing: border-box;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .finition-palette .finition-category-tabs .font-family-title-box {
                flex: 0 0 auto;
                display: inline-block;
                margin-right: 0 !important;
                margin-bottom: 0 !important;
                white-space: nowrap;
            }

            /* Font Selection: compact list — desktop uses absolute top:220px which
               leaves a huge empty gap in the half-sheet drawer. */
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .font-palette .block-fonts {
                padding-bottom: 8px !important;
                margin-bottom: 8px !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .font-palette .block-fonts .title-palette {
                margin-bottom: 14px !important;
                padding-right: 36px;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .font-palette .font-container {
                position: relative !important;
                top: auto !important;
                left: auto !important;
                width: 100% !important;
                height: auto !important;
                min-height: 0 !important;
                padding-bottom: 8px !important;
                background: transparent !important;
                z-index: 1 !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .font-palette .fonts-list-container {
                height: auto !important;
                max-height: none !important;
                padding-bottom: 0 !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .font-palette .font-family-box,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .font-palette .font-family-li-box {
                margin-bottom: 6px !important;
                padding-top: 8px !important;
                padding-bottom: 8px !important;
                font-size: 20px !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .font-palette .font-family-box:last-child,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .font-palette .font-family-li-box:last-child {
                margin-bottom: 0 !important;
            }

            /*
             * Logos menu search: flex row so input + teal loupe share one height
             * and sit flush (no gap / no taller button). Same 16px inset as title.
             */
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .search-bar-container {
                position: relative !important;
                display: flex !important;
                flex-direction: row !important;
                align-items: stretch !important;
                width: 100% !important;
                max-width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                margin-bottom: 12px !important;
                padding-left: 16px !important;
                padding-right: 16px !important;
                box-sizing: border-box !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .search-bar-container .input-search,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .search-bar-container .input-search-etape3 {
                order: 1;
                flex: 1 1 auto !important;
                width: auto !important;
                max-width: none !important;
                height: 44px !important;
                min-height: 44px !important;
                line-height: 22px !important;
                margin: 0 !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                padding-left: 14px !important;
                padding-right: 12px !important;
                border: 1px solid #E2E3EF !important;
                border-right: none !important;
                border-radius: 4px 0 0 4px !important;
                box-sizing: border-box !important;
                font-size: 16px !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .search-bar-container .icon-loupe2,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .search-bar-container .etape3-search.icon-loupe2 {
                order: 2;
                position: relative !important;
                right: auto !important;
                top: auto !important;
                bottom: auto !important;
                flex: 0 0 44px !important;
                width: 44px !important;
                min-width: 44px !important;
                height: auto !important;
                min-height: 44px !important;
                line-height: 44px !important;
                margin: 0 !important;
                border: 1px solid #0ba69d !important;
                border-left: none !important;
                border-radius: 0 4px 4px 0 !important;
                box-sizing: border-box !important;
                align-self: stretch !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .search-bar-container .icon-loupe2:before,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .search-bar-container .etape3-search.icon-loupe2:before {
                right: auto !important;
                left: 50% !important;
                top: 50% !important;
                transform: translate(-50%, -50%) !important;
                -webkit-transform: translate(-50%, -50%) !important;
                position: absolute !important;
                margin: 0 !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .icons-picker-scroll.scrollbar > * {
                /* Results pane already has 16px inset — don't double-pad cells */
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            /*
             * Logos icon grid: desktop uses nth-child(2n+1) side margins for a
             * 2-col layout — that zig-zags columns on phones. Use a real 3-col grid.
             * Works with or without mCustomScrollbar (destroyed on mobile).
             */
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .icons-picker-scroll,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .icons-picker-scroll .mCSB_container {
                display: grid !important;
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                gap: 10px !important;
                box-sizing: border-box !important;
                width: 100% !important;
                height: auto !important;
                overflow: visible !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .logo-search,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .logo-search:nth-child(2n+1),
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .logo-search:nth-child(n) {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 !important;
                box-sizing: border-box !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .logo-demo {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: 100% !important;
                height: 72px !important;
                padding: 6px !important;
                box-sizing: border-box !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .logo-demo img {
                max-width: 100% !important;
                max-height: 100% !important;
                width: auto !important;
                height: auto !important;
                object-fit: contain !important;
            }

            /*
             * Logos / Details / Fonts (debug colors kept for QA):
             * yellow = palette shell, green = search/tabs, red = icon grid.
             * Use a flex column + min-height:0 chain so the results pane is the
             * real scroll/hit box. Absolute pinning painted green/red outside a
             * dead hit layer — taps fell through to yellow only.
             */
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette.change_icon-palette.active,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette.finition-palette.active,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette.font-palette.active {
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                /* background-color: yellow; */
                width: auto !important;
                height: auto !important;
                min-height: 0 !important;
                max-height: none !important;
                display: flex !important;
                flex-direction: column !important;
                overflow: hidden !important;
                touch-action: pan-y !important;
                box-sizing: border-box !important;
                z-index: 2 !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette.change_icon-palette.active > .config-block,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette.finition-palette.active > .config-block,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette.font-palette.active > .config-block,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .palette.font-palette.active > .block-fonts {
                flex: 0 0 auto !important;
                position: relative !important;
                z-index: 1 !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .change_icon-palette-body,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .finition-palette .finition-palette-body,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .font-palette .font-container {
                position: relative !important;
                top: auto !important;
                left: auto !important;
                right: auto !important;
                bottom: auto !important;
                display: flex !important;
                flex-direction: column !important;
                flex: 1 1 auto !important;
                min-height: 0 !important;
                height: auto !important;
                max-height: none !important;
                overflow: hidden !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                box-sizing: border-box !important;
                pointer-events: auto !important;
                z-index: 4 !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .search-bar-container,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .finition-palette .finition-category-tabs {
                position: relative !important;
                z-index: 5 !important;
                /* background-color: green; */
                flex: 0 0 auto !important;
                pointer-events: auto !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .icons-picker-results,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .finition-palette .finition-picker-results {
                position: relative !important;
                top: auto !important;
                left: auto !important;
                right: auto !important;
                bottom: auto !important;
                display: block !important;
                flex: 1 1 auto !important;
                width: auto !important;
                height: auto !important;
                min-height: 0 !important;
                max-height: none !important;
                overflow-x: hidden !important;
                overflow-y: scroll !important;
                -webkit-overflow-scrolling: touch !important;
                touch-action: pan-y !important;
                overscroll-behavior: contain;
                pointer-events: auto !important;
                z-index: 4 !important;
                padding-left: 16px !important;
                padding-right: 16px !important;
                padding-bottom: 24px !important;
                box-sizing: border-box !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .icons-picker-scroll,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .icons-picker-scroll.scrollbar {
                display: grid !important;
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                gap: 10px !important;
                width: 100% !important;
                height: auto !important;
                max-height: none !important;
                overflow: visible !important;
                touch-action: pan-y !important;
                box-sizing: border-box !important;
                pointer-events: auto !important;
                position: relative !important;
                z-index: 4 !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .finition-palette .finition-picker-scroll,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .finition-palette .finition-picker-scroll.scrollbar,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .font-palette .fonts-list-container {
                display: block !important;
                width: 100% !important;
                height: auto !important;
                max-height: none !important;
                overflow: visible !important;
                pointer-events: auto !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .font-palette .font-container {
                overflow-x: hidden !important;
                overflow-y: scroll !important;
                -webkit-overflow-scrolling: touch !important;
                touch-action: pan-y !important;
                overscroll-behavior: contain;
                pointer-events: auto !important;
                padding-left: 16px !important;
                padding-right: 16px !important;
                padding-bottom: 24px !important;
                box-sizing: border-box !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .logo-search,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .finition-palette .detail-shape,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .font-palette .font-family-box,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .font-palette .font-family-li-box {
                touch-action: pan-y !important;
                pointer-events: auto !important;
                -webkit-user-select: none !important;
                user-select: none !important;
                cursor: pointer;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .logo-search *,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .finition-palette .detail-shape *,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .logo-demo,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .change_icon-palette .logo-demo img {
                pointer-events: none !important;
            }

            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .finition-palette .finition-picker-scroll .accordion,
            body.creation-logo-route.mobile-editor-enabled.etape3 .edit-bar .finition-palette .finition-picker-scroll .sub {
                height: auto !important;
                overflow: visible !important;
                width: 100% !important;
            }

            /*
             * Favourites drawer (mobile only):
             * flex shell + scrollable results, 2 logos per row, and click-through
             * on the empty iframe/SVG so ng-click on the tile fires.
             */
            body.creation-logo-route:is(.mobile-editor-enabled.etape3, .etape2) .edit-bar .palette.favoris-palette.active {
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: auto !important;
                height: auto !important;
                min-height: 0 !important;
                max-height: none !important;
                display: flex !important;
                flex-direction: column !important;
                overflow: hidden !important;
                touch-action: pan-y !important;
                box-sizing: border-box !important;
                z-index: 2 !important;
                pointer-events: auto !important;
            }

            body.creation-logo-route:is(.mobile-editor-enabled.etape3, .etape2) .edit-bar .palette.favoris-palette.active > .config-block {
                flex: 0 0 auto !important;
                position: relative !important;
                z-index: 1 !important;
            }

            body.creation-logo-route:is(.mobile-editor-enabled.etape3, .etape2) .edit-bar .favoris-palette .scrollbar,
            body.creation-logo-route:is(.mobile-editor-enabled.etape3, .etape2) .edit-bar .favoris-palette .scrollbar.mCustomScrollbar {
                position: relative !important;
                top: auto !important;
                left: auto !important;
                right: auto !important;
                bottom: auto !important;
                display: block !important;
                flex: 1 1 auto !important;
                width: auto !important;
                height: auto !important;
                min-height: 0 !important;
                max-height: none !important;
                overflow-x: hidden !important;
                overflow-y: scroll !important;
                -webkit-overflow-scrolling: touch !important;
                touch-action: pan-y !important;
                overscroll-behavior: contain;
                pointer-events: auto !important;
                z-index: 4 !important;
                padding-left: 16px !important;
                padding-right: 16px !important;
                padding-bottom: 24px !important;
                box-sizing: border-box !important;
            }

            body.creation-logo-route:is(.mobile-editor-enabled.etape3, .etape2) .edit-bar .favoris-palette .mCustomScrollBox,
            body.creation-logo-route:is(.mobile-editor-enabled.etape3, .etape2) .edit-bar .favoris-palette .mCSB_container {
                height: auto !important;
                max-height: none !important;
                overflow: visible !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }

            body.creation-logo-route:is(.mobile-editor-enabled.etape3, .etape2) .edit-bar .favoris-palette .mCSB_container,
            body.creation-logo-route:is(.mobile-editor-enabled.etape3, .etape2) .edit-bar .favoris-palette .scrollbar > .mCustomScrollBox > .mCSB_container {
                display: grid !important;
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                gap: 8px !important;
                align-content: start !important;
                pointer-events: auto !important;
            }

            /* If ng-scrollbars has not wrapped yet, grid the scrollbar itself */
            body.creation-logo-route:is(.mobile-editor-enabled.etape3, .etape2) .edit-bar .favoris-palette .scrollbar:not(.mCustomScrollbar) {
                display: grid !important;
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                gap: 8px !important;
                align-content: start !important;
            }

            body.creation-logo-route:is(.mobile-editor-enabled.etape3, .etape2) .edit-bar .favoris-palette .logo-presentation-favoris {
                position: relative !important;
                width: auto !important;
                max-width: 100% !important;
                height: 100px !important;
                margin: 0 !important;
                padding: 4px !important;
                box-sizing: border-box !important;
                overflow: hidden !important;
                display: block !important;
                pointer-events: auto !important;
                touch-action: pan-y !important;
                cursor: pointer;
                border-radius: 8px !important;
                -webkit-tap-highlight-color: transparent;
            }

            /* Fit 250×180 preview into the 3-col tile without clipping */
            body.creation-logo-route:is(.mobile-editor-enabled.etape3, .etape2) .edit-bar .favoris-palette .logo-presentation-favoris__preview,
            body.creation-logo-route:is(.mobile-editor-enabled.etape3, .etape2) .edit-bar .favoris-palette .logo-presentation-favoris > svg {
                pointer-events: none !important;
                position: absolute !important;
                left: 50% !important;
                top: 50% !important;
                right: auto !important;
                bottom: auto !important;
                width: 250px !important;
                height: 180px !important;
                max-width: none !important;
                margin: 0 !important;
                border: 0 !important;
                transform: translate(-50%, -50%) scale(0.38) !important;
                -webkit-transform: translate(-50%, -50%) scale(0.38) !important;
                transform-origin: center center !important;
                -webkit-transform-origin: center center !important;
            }

            body.creation-logo-route:is(.mobile-editor-enabled.etape3, .etape2) .edit-bar .favoris-palette .logo-presentation-favoris__preview text {
                opacity: 1 !important;
            }

            body.creation-logo-route:is(.mobile-editor-enabled.etape3, .etape2) .edit-bar .favoris-palette .logo-presentation-favoris .remove-favoris {
                pointer-events: auto !important;
                z-index: 50 !important;
                touch-action: manipulation;
            }

        }

        /* Hidden by default; shown only in mobile editor CSS above */
        .mobile-editor-preview-btn {
            display: none;
        }

        .responsive-show {
            display: none;
        }


        [contenteditable] {
            -webkit-user-select: text;
            user-select: text;
        }


        @keyframes fadein {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes fadeout {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        @keyframes logoDesignWelcomeOverlayIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes logoDesignWelcomeOverlayOut {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        /* Info popup: slide up from below (bottom → top). */
        @keyframes logoDesignWelcomePanelIn {
            from {
                opacity: 0;
                -webkit-transform: translate3d(0, 72px, 0);
                transform: translate3d(0, 72px, 0);
            }

            to {
                opacity: 1;
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }
        }

        @-webkit-keyframes logoDesignWelcomePanelIn {
            from {
                opacity: 0;
                -webkit-transform: translate3d(0, 72px, 0);
            }

            to {
                opacity: 1;
                -webkit-transform: translate3d(0, 0, 0);
            }
        }

        @keyframes logoDesignWelcomePanelOut {
            from {
                opacity: 1;
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }

            to {
                opacity: 0;
                -webkit-transform: translate3d(0, 48px, 0);
                transform: translate3d(0, 48px, 0);
            }
        }

        @-webkit-keyframes logoDesignWelcomePanelOut {
            from {
                opacity: 1;
                -webkit-transform: translate3d(0, 0, 0);
            }

            to {
                opacity: 0;
                -webkit-transform: translate3d(0, 48px, 0);
            }
        }

        #searchKeyword {
            color: #0a9c93 !important;

        }

        @keyframes inscreaseSize {
            from {
                transform: scale(1);
            }

            to {
                transform: scale(1.30);
            }
        }

        @keyframes aparition {
            from {
                opacity: 0;
                top: 20px
            }

            to {
                opacity: 1;
                top: 0px
            }
        }


        @keyframes clignoter {
            from {
                opacity: 0.25;
            }

            to {
                opacity: 1;
                top: 0px
            }
        }


        @keyframes cursorClignotement {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .btn-top-bar.visible {
            /* Sized for idle + "Saving your work" + spinner so the button does not jump */
            min-width: 220px;
            width: auto;
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            white-space: nowrap;
            padding-left: 18px;
            padding-right: 18px;
        }

        /* Keep Validate / Save green while saving — no grey-out */
        .btn-green-engine.btn-top-bar.saving,
        .btn-green-engine.btn-top-bar.saving:hover,
        .btn-green-engine.save-btn.saving,
        .btn-green-engine.save-btn.saving:hover {
            background: #05A59B !important;
            cursor: wait !important;
            pointer-events: none;
        }

        .btn-top-bar__label,
        .btn-top-bar__loading,
        .save-btn__label,
        .save-btn__loading {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .btn-top-bar__spinner,
        .save-btn__spinner {
            width: 14px;
            height: 14px;
            border: 2px solid rgba(255, 255, 255, 0.35);
            border-top-color: #fff;
            border-radius: 50%;
            animation: signup-save-progress-spin 0.7s linear infinite;
            flex-shrink: 0;
        }

        /* Pre-Angular boot: hide menu/cart/sign-in chrome only (not Valider — already display:none until .visible) */
        body.creation-logo-route:not(.editor-angular-ready) .account-top-bar .logo-design-etape3-desktop-menu,
        body.creation-logo-route:not(.editor-angular-ready) .account-top-bar .logo-design-etape3-desktop-cart,
        body.creation-logo-route:not(.editor-angular-ready) .account-top-bar .step4-header-btns,
        body.creation-logo-route:not(.editor-angular-ready) .account-top-bar .logo-design-header-logged-in,
        body.creation-logo-route:not(.editor-angular-ready) .account-top-bar .btn-logo-mobile-signin {
            display: none !important;
        }

        /* creation-logo view only + package step (etape 4): header alignment for logged-in block */
        body.creation-logo-route.etape4 .account-top-bar>ul,
        body.preview-route-pending .account-top-bar>ul {
            margin-top: 9px;
        }

        body.creation-logo-route.etape4 .account-top-bar .cart-information.btn-logo-simple,
        body.preview-route-pending .account-top-bar .cart-information.btn-logo-simple {
            margin-top: 9px;
        }

        body.creation-logo-route.etape4 .account-top-bar,
        body.preview-route-pending .account-top-bar {
            top: 5px;
        }

        body.creation-logo-route.etape4 .account-top-bar .btn-logo-simple,
        body.preview-route-pending .account-top-bar .btn-logo-simple,
        body.creation-logo-route.etape4 .account-top-bar .step4-header-btns,
        body.preview-route-pending .account-top-bar .step4-header-btns,
        body.creation-logo-route.etape4 .account-top-bar .btn-step4-signin,
        body.preview-route-pending .account-top-bar .btn-step4-signin {
            -webkit-transition: none !important;
            -moz-transition: none !important;
            -o-transition: none !important;
            transition: none !important;
            -webkit-animation: none !important;
            -moz-animation: none !important;
            animation: none !important;
        }

        /* Desktop etape2 rail: same tab order as mobile bottom bar
           (Favourites → Texts → icon → Logos → Details → Tutorials). */
        @media (min-width: 769px) {
            body.creation-logo-route.etape2 .sidebar {
                display: flex !important;
                flex-direction: column;
                align-items: stretch;
            }

            /* Background colour is editor-only — hide on template grid (desktop). */
            body.creation-logo-route.etape2 .sidebar .config-button.icon-background {
                display: none !important;
            }

            body.creation-logo-route.etape2 .sidebar .config-button.icon-favoris {
                order: 1;
            }

            body.creation-logo-route.etape2 .sidebar .config-button.icon-textes {
                order: 2;
            }

            body.creation-logo-route.etape2 .sidebar .config-button.icon-icones {
                order: 3;
            }

            body.creation-logo-route.etape2 .sidebar .config-button.icon-info {
                order: 4;
            }

            body.creation-logo-route.etape2 .sidebar .config-button.icon-finitions {
                order: 5;
            }

            body.creation-logo-route.etape2 .sidebar .config-button.icon-tutorial {
                order: 6;
            }

            body.creation-logo-route.etape2 .sidebar .fill {
                order: 7;
            }
        }

        /* Etape2: inert (.disabled) tabs stay muted. Unlocked Favourites
           (has items, not .active) must stay full-opacity so it reads as openable. */
        body.creation-logo-route.etape2 .sidebar .config-button:not(.active):not(.disabled) {
            opacity: 1;
        }

        body.creation-logo-route.etape2 .sidebar .config-button.active {
            opacity: 1;
        }

        /* creation-logo /creation-logo etape 3 desktop editor header only */
        @media (min-width: 769px) {
            body.creation-logo-route.etape3 .account-top-bar {
                display: inline-flex !important;
                align-items: center;
                gap: 8px;
                top: 9px !important;
            }

            body.creation-logo-route.etape3 .account-top-bar>ul:not(.ng-hide) {
                display: inline-flex !important;
                align-items: center;
                margin: 0 !important;
                padding: 0;
            }

            body.creation-logo-route.etape3 .account-top-bar .btn-logo-simple,
            body.creation-logo-route.etape3 .account-top-bar .step4-header-btns,
            body.creation-logo-route.etape3 .account-top-bar .btn-step4-signin {
                -webkit-transition: none !important;
                -moz-transition: none !important;
                -o-transition: none !important;
                transition: none !important;
                -webkit-animation: none !important;
                -moz-animation: none !important;
                animation: none !important;
            }

            body.creation-logo-route.etape3 .account-top-bar .btn-green-engine.btn-top-bar.visible {
                position: relative;
                top: 0 !important;
                margin-top: 0;
                margin-left: 0 !important;
                flex-shrink: 0;
            }

            body.creation-logo-route.etape3 .account-top-bar #btn-account-header-desktop {
                top: 0 !important;
            }

            body.creation-logo-route.etape3 .account-top-bar .cart-information.logo-design-etape3-desktop-cart {
                top: 0 !important;
                margin-top: 0 !important;
                margin-left: 0 !important;
            }

            body.creation-logo-route.etape3 .account-top-bar .normal-sub-menu-account2 .sub-menu-account {
                left: -60px !important;
                top: 36px !important;
            }

            body.creation-logo-route.etape3 .account-top-bar li.dropdown:hover>ul.sub-menu-account.sub-menu {
                display: block !important;
            }

            /* Ticket: also show the logged-in account menu on the template-tiles
               step (etape 2) on desktop. Mirrors the etape3 menu rules (container,
               ul, button, dropdown position, hover-open) — cart/save-btn stay
               etape3-only. */
            body.creation-logo-route.etape2 .account-top-bar {
                display: inline-flex !important;
                align-items: center;
                gap: 8px;
                top: 9px !important;
            }

            body.creation-logo-route.etape2 .account-top-bar>ul:not(.ng-hide) {
                display: inline-flex !important;
                align-items: center;
                margin: 0 !important;
                padding: 0;
            }

            body.creation-logo-route.etape2 .account-top-bar #btn-account-header-desktop {
                top: 0 !important;
            }

            body.creation-logo-route.etape2 .account-top-bar .normal-sub-menu-account2 .sub-menu-account {
                left: -60px !important;
                top: 36px !important;
            }

            body.creation-logo-route.etape2 .account-top-bar li.dropdown:hover>ul.sub-menu-account.sub-menu {
                display: block !important;
            }

            body.creation-logo-route.etape3 .top-bar {
                position: relative;
                z-index: 9000 !important;
                overflow: visible;
            }

            body.creation-logo-route.etape3 .shortcut-bar,
            body.creation-logo-route.etape3 .shortcut-bar.visible {
                z-index: 200 !important;
            }
        }

        .step4-header-btns {
            display: none;
            vertical-align: top;
        }

        .step4-header-btns.step4-active {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .btn-step4-download {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 224px;
            height: 40px;
            border-radius: 4px;
            padding: 0 24px;
            box-sizing: border-box;
            background: #0BA69D;
            color: #FFFFFF !important;
            font-family: 'Open Sans';
            font-weight: 700;
            font-style: normal;
            font-size: 14px;
            line-height: 100%;
            letter-spacing: 0;
            text-decoration: none;
            white-space: nowrap;
            cursor: pointer;
            border: none;
            transition: background-color 0.35s ease;
        }

        .btn-step4-download:hover,
        .btn-step4-download:focus {
            background: #0AB3A9;
            color: #FFFFFF !important;
            text-decoration: none;
        }

        .btn-step4-signin {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 40px;
            padding: 0 24px;
            border-radius: 4px;
            background: #313235;
            color: #FFFFFF !important;
            font-family: 'Open Sans';
            font-weight: 700;
            font-size: 14px;
            line-height: 1;
            text-decoration: none;
            white-space: nowrap;
            cursor: pointer;
            border: none;
        }

        /*
         * Logo design mobile UI — /logo-design only (body.creation-logo-route on index-en.php).
         * Guards: (1) body.creation-logo-route — not other site pages
         *         (2) @media max-width 768px — desktop layout untouched
         *         (3) .logo-design-mobile-info-panel / .logo-design-mobile-info-body — not .info-palette sidebar
         *         (4) .info-palette .logo-style-filter-desktop-only — sidebar filter hidden on mobile width only
         * Desktop sidebar keeps .btn-green-engine, original .btn-ok-ctn, logo-style filter, separate input ids.
         */
        body.creation-logo-route .logo-design-mobile-only,
        body.creation-logo-route .logo-design-mobile-nav-backdrop {
            display: none !important;
        }

        /* Wrapper must not alter desktop inline header layout */
        body.creation-logo-route .logo-design-header-logged-in {
            display: contents;
        }

        body.creation-logo-route .logo-design-search-btn-label--mobile {
            display: none;
        }

        body.creation-logo-route .logo-design-mobile-search-field-wrap {
            position: relative;
        }

        body.creation-logo-route .logo-design-search-clear {
            position: absolute;
            right: 160px;
            top: 7px;
            width: 36px;
            height: 46px;
            border: none;
            background-color: transparent;
            cursor: pointer;
            color: #626A80;
            font-family: 'Open Sans', sans-serif;
            font-size: 16px;
            font-weight: 600;
            line-height: 1;
            z-index: 3;
            -webkit-tap-highlight-color: transparent;
        }

        body.creation-logo-route .logo-design-search-clear:hover,
        body.creation-logo-route .logo-design-search-clear:focus {
            color: #363F5A;
            outline: none;
        }

        body.creation-logo-route .input-search-etape2.logo-design-search-input--has-clear {
            padding-right: 200px;
        }

        body.creation-logo-route .btn-search-main.logo-design-search-go-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            z-index: 3;
        }

        @media screen and (max-width: 768px) {
            body.creation-logo-route .top-bar {
                display: flex;
                align-items: center;
                padding-left: 15px;
                padding-right: 0;
                box-sizing: border-box;
            }

            body.creation-logo-route .top-bar .btn-home-engine {
                flex: 0 0 auto;
            }

            body.creation-logo-route .top-bar a,
            body.creation-logo-route .top-bar .btn-logo-simple,
            body.creation-logo-route .top-bar button {
                -webkit-tap-highlight-color: transparent;
            }

            body.creation-logo-route .top-bar .logo-engine {
                display: none !important;
            }

            body.creation-logo-route .top-bar .account-top-bar {
                position: static !important;
                right: auto !important;
                top: auto !important;
                display: flex !important;
                align-items: center;
                justify-content: flex-end;
                flex: 1 1 auto;
                width: auto;
                min-width: 0;
                gap: 0;
                margin: 0 0 0 auto !important;
            }

            body.creation-logo-route .top-bar .account-top-bar .btn-green-engine.btn-top-bar {
                display: none !important;
            }

            body.creation-logo-route .logo-design-mobile-header-end {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                /* gap: 10px; */
                flex: 0 0 auto;
                margin-right: 0;
                padding-right: 5px;
            }

            body.creation-logo-route .logo-design-header-logged-in {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            body.creation-logo-route .logo-design-mobile-header-end .btn-logo-mobile-menu {
                flex-shrink: 0;
                margin-left: 0;
            }

            body.creation-logo-route .logo-design-desktop-only {
                display: none !important;
            }

            body.creation-logo-route .logo-design-mobile-header-end.logo-design-mobile-only {
                display: flex !important;
            }

            body.creation-logo-route .logo-design-mobile-header-end .btn-logo-mobile-signin {
                display: inline-flex !important;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                min-width: 74px;
                height: 30px;
                padding: 0 15px;
                border-radius: 4px;
                border: none;
                background: #4A4A4A;
                color: #FFFFFF !important;
                font-family: 'Open Sans', sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 14px;
                line-height: 100%;
                letter-spacing: 0;
                text-decoration: none;
                white-space: nowrap;
                cursor: pointer;
            }

            body.creation-logo-route .logo-design-mobile-header-end .logo-design-header-logged-in>ul {
                display: flex !important;
                align-items: center;
                margin: 0;
                padding: 0;
                list-style: none;
            }

            body.creation-logo-route .logo-design-mobile-header-end .logo-design-header-logged-in>ul>li {
                display: flex;
                align-items: center;
                margin: 0;
                padding: 0;
            }

            body.creation-logo-route .logo-design-mobile-header-end .logo-design-header-logged-in .btn-logo-simple {
                top: 0 !important;
                margin-top: 0 !important;
                vertical-align: middle;
            }

            body.creation-logo-route .logo-design-mobile-header-end .logo-design-header-logged-in .cart-information {
                top: 0 !important;
                margin-left: 0 !important;
                position: relative !important;
                display: inline-flex !important;
                align-items: center;
                vertical-align: middle;
            }

            body.creation-logo-route .logo-design-mobile-header-end #btn-account-header {
                display: inline-flex !important;
                width: 45px !important;
                height: 32px !important;
                padding: 0 !important;
                align-items: center;
                justify-content: center;
                position: relative;
                top: 0 !important;
                line-height: 1 !important;
                box-sizing: border-box;
                vertical-align: middle;
            }

            body.creation-logo-route .logo-design-mobile-header-end #btn-account-header:before {
                position: static !important;
                display: block;
                margin: 0 !important;
                left: auto !important;
                top: auto !important;
                font-size: 18px !important;
                line-height: 1 !important;
                color: #e3e4e6;
            }

            body.creation-logo-route .logo-design-mobile-header-end #btn-account-header.icon-menu-mobile:before {
                top: auto !important;
            }

            body.creation-logo-route .logo-design-mobile-header-end .btn-logo-mobile-menu {
                display: inline-flex !important;
                align-items: center;
                justify-content: center;
                width: 45px;
                height: 30px;
                padding: 0;
                border: none;
                border-radius: 0;
                background: transparent;
                cursor: pointer;
            }

            body.creation-logo-route .btn-logo-mobile-menu__icon {
                display: block;
                width: 23px;
                height: 18px;
                flex: 0 0 auto;
            }

            body.creation-logo-route .account-top-bar .cart-information.btn-logo-simple {
                display: inline-flex !important;
                align-items: center;
                margin: 0 !important;
                top: 0 !important;
                padding-left: 8px !important;
                padding-right: 8px !important;
            }

            body.creation-logo-route .info-palette .logo-style-filter-desktop-only {
                display: none !important;
            }

            body.creation-logo-route .logo-design-mobile-info-panel.logo-design-mobile-only {
                display: none !important;
                position: fixed;
                top: 50px;
                right: 0;
                left: 0;
                bottom: 0;
                z-index: 220;
                background: #ffffff;
                overflow-x: hidden;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            }

            body.creation-logo-route.logo-design-mobile-nav-open .logo-design-mobile-info-panel.logo-design-mobile-only {
                display: block !important;
            }

            body.creation-logo-route .logo-design-mobile-info-panel .logo-design-mobile-info-head {
                position: relative;
                box-sizing: border-box;
                padding: 34px 32px 0;
                background: #ffffff;
            }

            body.creation-logo-route .logo-design-mobile-info-panel .logo-design-mobile-info-divider-wrap {
                box-sizing: border-box;
                padding: 0 32px;
                margin-top: 31px;
                background: #ffffff;
            }

            body.creation-logo-route .logo-design-mobile-info-panel .logo-design-mobile-info-divider {
                box-sizing: border-box;
                display: block;
                width: 100%;
                max-width: 360px;
                height: 0;
                margin: 0;
                padding: 0;
                border: 0;
                border-top: 1px solid #DFE5EB;
                background: transparent;
            }

            body.creation-logo-route .logo-design-mobile-info-panel .logo-design-mobile-info-close {
                position: absolute;
                top: 0;
                right: 0;
                box-sizing: border-box;
                width: 55px;
                height: 55px;
                padding: 20px;
                margin: 0;
                border: none;
                background: transparent;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }

            body.creation-logo-route .logo-design-mobile-info-panel .logo-design-mobile-info-close__icon {
                display: block;
                width: 15px;
                height: 15px;
                flex: 0 0 auto;
            }

            body.creation-logo-route .logo-design-mobile-info-panel .logo-design-mobile-info-title {
                box-sizing: border-box;
                width: 100%;
                max-width: 329px;
                min-height: 22px;
                margin: 0 auto 13px;
                padding: 0;
                font-family: 'Open Sans', sans-serif;
                font-weight: 700;
                font-style: normal;
                font-size: 24px;
                line-height: 22px;
                letter-spacing: 0;
                text-align: center;
                color: #363F5A;
            }

            body.creation-logo-route .logo-design-mobile-info-panel .logo-design-mobile-info-subtitle {
                box-sizing: border-box;
                width: 100%;
                max-width: 329px;
                min-height: 40px;
                margin: 0 auto;
                padding: 0;
                font-family: 'Open Sans', sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 16px;
                line-height: 22px;
                letter-spacing: 0;
                text-align: center;
                color: #363F5A;
            }

            body.creation-logo-route .logo-design-mobile-info-panel .logo-design-mobile-info-body {
                padding: 25px 32px 28px;
                background: #ffffff;
            }

            body.creation-logo-route .logo-design-mobile-info-panel .logo-design-mobile-field-group {
                margin-bottom: 24px;
            }

            body.creation-logo-route .logo-design-mobile-info-panel .logo-design-mobile-field-group:last-child {
                margin-bottom: 0;
            }

            body.creation-logo-route .logo-design-mobile-info-panel .logo-design-mobile-field-group .title-sidebar1 {
                margin-top: 0;
                margin-bottom: 8px;
                font-size: 14px;
                font-weight: 400;
                color: #6b7280;
            }

            body.creation-logo-route .logo-design-mobile-info-panel .logo-design-mobile-field-group .btn-ok-ctn .input-box2 {
                height: 48px;
                line-height: 48px;
                border-radius: 6px;
                border-color: #DFE5EB;
                box-sizing: border-box;
            }

            body.creation-logo-route .logo-design-mobile-info-panel .logo-design-mobile-field-group .btn-ok-ctn .input-box2:focus,
            body.creation-logo-route .logo-design-mobile-info-panel .logo-design-mobile-field-group .btn-ok-ctn .input-box2.editing {
                border: 1px solid #DFE5EB !important;
            }

            body.creation-logo-route .logo-design-mobile-info-panel .logo-design-mobile-field-group .btn-ok-ctn .input-box2.editing {
                padding-right: 72px;
            }

            body.creation-logo-route .logo-design-mobile-info-panel .logo-design-mobile-field-group .btn-ok-ctn .btn-ok {
                right: 6px;
                top: 6px;
                height: 36px !important;
                line-height: 36px !important;
                min-width: 48px;
                padding-left: 14px;
                padding-right: 14px;
                border-radius: 4px !important;
                border-bottom-left-radius: 4px !important;
                border-top-left-radius: 4px !important;
                font-size: 14px;
            }

            body.creation-logo-route .logo-design-mobile-info-panel .logo-design-mobile-field-group .btn-ok-ctn .btn-ok-delete-text {
                right: 6px;
                top: 6px;
                width: 36px;
                height: 36px;
                border-radius: 4px;
                display: block;
            }

            body.creation-logo-route .logo-design-mobile-info-panel .logo-design-mobile-field-group .btn-ok-ctn .input-box2:not(.editing) {
                padding-right: 48px;
            }

            body.creation-logo-route .logo-design-mobile-info-body .logo-design-mobile-select-ctn {
                position: relative;
                width: 100%;
                min-height: 48px;
            }

            /* Hide native select only after selectBox init (.selectBox class) — not before */
            body.creation-logo-route .logo-design-mobile-info-panel select.logo-design-mobile-industry-select.selectBox {
                display: none !important;
            }

            body.creation-logo-route .logo-design-mobile-info-panel select.logo-design-mobile-industry-select:not(.selectBox) {
                opacity: 0;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 48px;
                pointer-events: none;
            }

            body.creation-logo-route .logo-design-mobile-info-panel .logo-design-mobile-select-ctn:not(.is-ready) .selectBox-dropdown.input-box2 {
                visibility: hidden;
            }

            body.creation-logo-route .logo-design-mobile-info-panel .selectBox-dropdown.input-box2 {
                display: block !important;
                visibility: visible;
                width: 100% !important;
                max-width: 100% !important;
                height: 48px;
                min-height: 48px;
                padding-left: 16px !important;
                padding-right: 40px !important;
                line-height: 48px !important;
                border-radius: 6px;
                border-color: #DFE5EB;
                box-sizing: border-box;
                position: relative;
                z-index: 1;
                touch-action: manipulation;
                -webkit-tap-highlight-color: transparent;
            }

            body.creation-logo-route .logo-design-mobile-info-panel .selectBox-dropdown .selectBox-label {
                display: block !important;
                width: calc(100% - 40px) !important;
                max-width: calc(100% - 40px) !important;
                box-sizing: border-box;
                overflow: hidden !important;
                text-overflow: ellipsis;
                white-space: nowrap;
                line-height: 48px;
                padding: 0;
            }

            /* selectBox menu is appended to body, not inside the panel */
            body.creation-logo-route.logo-design-mobile-nav-open .logo-design-mobile-industry-select-selectBox-dropdown-menu {
                max-width: calc(100vw - 64px);
                box-sizing: border-box;
                background: #ffffff !important;
                border: 1px solid #DFE5EB !important;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
                border-radius: 6px !important;
            }

            body.creation-logo-route.logo-design-mobile-nav-open .logo-design-mobile-industry-select-selectBox-dropdown-menu>LI>A {
                white-space: normal;
                overflow-wrap: break-word;
                word-wrap: break-word;
                line-height: 1.35;
                display: block;
                width: 100%;
                box-sizing: border-box;
                padding: 11px 0;
            }

            /* Dividers between every option — global LI:first-child { border:none } kills first rows */
            body.creation-logo-route.logo-design-mobile-nav-open .logo-design-mobile-industry-select-selectBox-dropdown-menu>LI {
                border-bottom: none !important;
                min-height: 40px;
                display: flex;
                align-items: center;
            }

            body.creation-logo-route.logo-design-mobile-nav-open .logo-design-mobile-industry-select-selectBox-dropdown-menu>LI+LI {
                border-top: 1px solid #DFE5EB !important;
            }

            body.creation-logo-route .logo-design-mobile-info-body .selectBox.input-box2 .selectBox-arrow {
                position: absolute;
                top: 0;
                right: 0;
                width: 36px;
                height: 48px;
                margin: 0;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                background: transparent url(/images/engine/svg/logo-design-mobile-select-arrow.svg) no-repeat center center;
                background-size: 13px 8px;
            }

            body.creation-logo-route .logo-design-mobile-info-body .selectBox.input-box2 .selectBox-arrow:before {
                content: none !important;
                display: none !important;
                border: none !important;
            }

            body.creation-logo-route.logo-design-mobile-nav-open .logo-design-mobile-nav-backdrop.logo-design-mobile-only {
                display: block !important;
                position: fixed;
                top: 50px;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 210;
                background: rgba(0, 0, 0, 0.45);
            }

            /* Logo design welcome modal only (mobile): stacking + scroll lock while open */
            body.creation-logo-route.logo-design-welcome-modal-open {
                overflow: hidden;
            }

            body.creation-logo-route.logo-design-welcome-modal-open .search-overlay-container.logo-design-welcome-modal-container.closeModal.visible {
                z-index: 8990 !important;
            }

            body.creation-logo-route.logo-design-welcome-modal-open .top-bar {
                position: fixed !important;
                top: 0;
                left: 0;
                right: 0;
                width: 100%;
                z-index: 9000 !important;
            }

            body.creation-logo-route.logo-design-welcome-modal-open .btn-logo-mobile-menu {
                opacity: 0.35;
                pointer-events: none;
                cursor: not-allowed;
            }

            body.creation-logo-route.logo-design-welcome-modal-open .btn-logo-mobile-menu__icon {
                opacity: 0.35;
            }

            body.creation-logo-route .title-choice-proposition {
                font-size: 24px !important;
            }

            body.creation-logo-route .logo-container {
                padding-left: 30px !important;
                padding-right: 30px !important;
            }

            body.creation-logo-route .search-bar-container-fixed {
                width: 100% !important;
                padding-top: 16px;
                padding-bottom: 8px;
            }

            body.creation-logo-route .search-bar-container {
                width: 100% !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            body.creation-logo-route .search-bar-container.logo-design-mobile-search-row {
                display: flex;
                align-items: center;
                /* gap: 10px; */
            }

            body.creation-logo-route .logo-design-mobile-search-field-wrap {
                position: relative;
                flex: 1 1 auto;
                min-width: 0;
                min-height: 56px;
                width: 100%;
            }

            body.creation-logo-route .input-search-etape2 {
                height: 56px;
                border-radius: 28px;
                padding-left: 48px;
                padding-right: 88px;
                font-size: 16px;
                box-sizing: border-box;
            }

            body.creation-logo-route .logo-design-search-loupe {
                left: 16px;
                width: 20px;
                height: 20px;
            }

            body.creation-logo-route .logo-design-search-loupe img {
                width: 20px;
                height: 20px;
            }

            body.creation-logo-route .logo-design-search-clear {
                right: 84px;
                top: 6px;
                width: 36px;
                height: 44px;
            }

            body.creation-logo-route .input-search-etape2.logo-design-search-input--has-clear {
                padding-right: 126px;
            }

            body.creation-logo-route .btn-search-main.logo-design-search-go-btn {
                right: 6px;
                top: 6px;
                height: 44px;
                min-width: 72px;
                border-radius: 22px !important;
                padding-left: 38px;
                padding-right: 16px;
                font-size: 14px !important;
                font-weight: 700;
                line-height: 44px;
                border-left: none !important;
                color: #fff !important;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
            }

            body.creation-logo-route .btn-search-main.logo-design-search-go-btn.shortcut-item.ia::before {
                left: 14px;
                width: 18px;
                height: 18px;
            }

            body.creation-logo-route .logo-design-search-btn-label--desktop {
                display: none;
            }

            body.creation-logo-route .logo-design-search-btn-label--mobile {
                display: inline;
            }

            body.creation-logo-route .logo-presentation:hover {
                transform: none;
            }

            body.creation-logo-route .logo-presentation:hover .custom-grey-container {
                opacity: 0;
            }

            body.creation-logo-route .logo-presentation.logo-presentation-mobile-active {
                transform: scale(1.05);
                border-color: #0ba69d;
            }

            body.creation-logo-route .logo-presentation.logo-presentation-mobile-active .custom-grey-container {
                opacity: 1;
            }

            body.creation-logo-route .logo-presentation .custom-grey-container {
                display: flex;
                align-items: stretch;
                box-sizing: border-box;
            }

            /* Mobile tap overlay: Customize only (same as desktop) — Preview commented out in markup */
            body.creation-logo-route .logo-presentation .logo-design-thumb-edit {
                display: flex !important;
                width: 100%;
                max-width: 100%;
                flex: 0 0 100%;
                justify-content: center;
                padding-left: 10px !important;
                padding-right: 10px !important;
            }

            body.creation-logo-route .logo-presentation .logo-design-thumb-preview-col {
                display: none !important;
            }

            body.creation-logo-route .logo-presentation .custom-grey-button {
                gap: 6px;
                padding-left: 10px;
                padding-right: 10px;
                width: 75%;
                font-size: 15px;
            }

            body.creation-logo-route .logo-presentation .custom-grey-button::before {
                flex-shrink: 0;
                margin-right: 0;
                width: 18px;
                min-width: 18px;
                height: 18px;
            }

            body.creation-logo-route .logo-presentation .custom-grey-button.svg-preview::before {
                -webkit-mask: none;
                mask: none;
                background-color: transparent;
                background-image: url("/images/engine/svg/logo-design-mobile-preview.svg");
                background-repeat: no-repeat;
                background-position: center;
                background-size: 15px 15px;
                width: 15px;
                height: 15px;
            }

            body.creation-logo-route .logo-presentation .custom-grey-button.svg-preview:hover::before {
                background-color: transparent;
                filter: brightness(0) invert(1);
            }
        }

        @media screen and (min-width: 769px) {
            body.creation-logo-route .info-palette .logo-style-filter-desktop-only {
                display: block;
            }

            /* First filter label after industry select — tighter top gap */
            body.creation-logo-route .info-palette .logo-style-filter-desktop-only>.title-sidebar1:first-of-type {
                margin-top: 13px;
            }
        }

        .required-field {
            border: 1px solid #e42323 !important;

        }

        .hide-scrollbar-y {
            overflow-y: hidden !important;
        }

        .input-error {
            font-style: italic;
            font-weight: normal;
            color: #e42323;
            float: right;
            margin-right: 5px;
        }

        .register-information {
            margin-top: 0px;
            font-size: 18px;
            font-family: 'Open Sans';
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
            margin-bottom: 18px;
            text-align: center;
            color: #363F5A;
            width: 360px;
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
        }


        .login-form-overlay label.error {
            color: red;
            top: -5px;
            position: relative;
        }

        .input-box2-text {
            height: 45px !important;
            padding-left: 45px !important;
        }

        .search-overlay .icon-home:before {
            position: absolute;
            font-size: 19px;
            top: 12px;
            left: 12px;
        }

        .suggests {
            margin-top: 25px;
            font-size: 20px;
            opacity: 0;

        }

        .no-pointers {
            pointer-events: none;
            opacity: 0;
        }

        .icon-background-de {
            font-size: 12px;
        }

        .suggests.visible {
            opacity: 1;
            -webkit-animation: fadein 250ms ease-in alternate 1;
            -moz-animation: fadein 250ms ease-in alternate 1;
            animation: fadein 250ms ease-in alternate 1;
        }

        .no-border {
            border: none !important;
        }

        .suggest-title {
            font-weight: bold;
        }

        .suggest {
            color: #0A948C;
            display: inline;
            font-size: 20px;
        }

        .suggest-word {
            color: #0A948C;
            cursor: pointer;
        }

        .suggest-word:hover {
            text-decoration: underline;
        }

        .no-result-phantom {
            margin-top: 30px;
        }

        .btn-no-result {
            height: 45px !important;
            line-height: 45px !important;
            padding-left: 50px !important;
            padding-right: 50px !important;
            margin-top: 20px;
            display: inline-block;
            cursor: pointer;
        }

        .no-results-span {
            text-transform: uppercase;
        }

        .request-word {
            color: #0A948C;
        }

        .no-resulat-container {
            display: inline-block;
        }

        .no-result-title {
            margin-top: 40px;
            font-size: 35px;
            font-weight: bold;

        }

        .no-result-description {
            margin-top: 8px;
            font-size: 20px;
            margin-bottom: 25px;
        }

        .no-result {
            padding-top: 100px;
            text-align: center;
        }

        .btn-display-tuto {
            padding-top: 6px;
            text-align: right;
            padding-right: 15px;

            position: absolute;
            left: 50%;
            top: 50%;
            width: 230px;
            height: 33px;
            cursor: pointer;
            background-image: url('/images/onglet-action.png');
            color: #fff;

            /*margin-top:-50-566/2*/
            margin-top: -260px;
            margin-left: 377px;
            z-index: 500;
        }

        .btn-display-tuto .btn-center,
        .btn-display-tuto .icon-play {
            color: #fff;
        }

        .btn-center {
            color: #fff;
            margin-right: 10px;
        }

        .btn-center:before {
            content: "";
            display: inline-block;
            width: 17px;
            height: 17px;
            margin-right: 7px;
            position: relative;
            top: 3px;
            cursor: pointer;
            background-image: url('/images/icons/recentrer-icon.png');
        }

        .btn-display-tuto:hover {
            color: #d9d9d9;
        }



        .color-history.active:before {
            content: "\e912" !important;
            color: #fff;
            position: absolute;
            top: 7px;
            left: 5px;
            font-size: 10px;


        }

        .editor {
            opacity: 0;
        }

        .editor.visible {
            opacity: 1;
        }

        /* Avoid flash of preview coords (0,0) behind the side panel before centerOnStage */
        .editor.positioning-logo #svg-editor-canvas,
        .editor.positioning-logo .resizer,
        .editor.positioning-logo .html-text-paint-layer {
            visibility: hidden;
        }

        /* Logo Maker: logo fades in once fonts + centring settle (logoRevealing) */
        /* Fade in only — hiding is instant so stale coords never ghost */
        .editor:not(.logo-revealing) #full-container-svg,
        .editor:not(.logo-revealing) .html-text-paint-layer {
            transition: opacity 0.4s ease;
        }

        .editor.logo-revealing #full-container-svg,
        .editor.logo-revealing .html-text-paint-layer {
            opacity: 0;
        }

        .editor.logo-revealing .resizer {
            visibility: hidden;
        }

        .editor.logo-revealing .logo-item {
            pointer-events: none !important;
        }

        .editor-logo-loader {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.25s ease;
            z-index: 1;
            /* Own layer: spinner frames must not repaint the masked dot grid */
            will-change: transform, opacity;
            contain: strict;
            width: 48px;
            height: 48px;
        }

        .editor:not(.logo-revealing) .editor-logo-loader .spinner_V8m1,
        .editor:not(.logo-revealing) .editor-logo-loader circle {
            animation: none;
        }

        .editor-logo-loader circle {
            stroke: #05A59B;
        }

        .editor.logo-revealing .editor-logo-loader {
            opacity: 1;
        }

        @media (prefers-reduced-motion: reduce) {
            .editor #full-container-svg,
            .editor .html-text-paint-layer {
                transition: none;
            }
        }

        .shortcut-bar.visible {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
            -webkit-transform: translateY(0);
        }

        .shortcut-bar {
            pointer-events: none;
            z-index: 210;
            /* Arrival on Logo Maker: slide down from under the top bar */
            opacity: 0;
            transform: translateY(-100%);
            -webkit-transform: translateY(-100%);
            transition:
                opacity 0.35s ease,
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
            -webkit-transition:
                opacity 0.35s ease,
                -webkit-transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        }

        /*
         * Side menu (edit panel): fade in when arriving on Logo Maker.
         * Desktop only — mobile uses the bottom sheet, which has its own motion.
         */
        @media screen and (min-width: 769px) {
            @keyframes lg-logo-maker-side-fade-in {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }

            body.creation-logo-route.etape3 .edit-bar {
                animation: lg-logo-maker-side-fade-in 0.45s ease-out both;
            }
        }

        .editor .resizer .ui-resizable-handle,
        .rotator,
        .ui-rotatable-handle,
        .ui-symetrie-handle,
        .ui-more-options-handle {
            position: absolute;
            width: 23px;
            height: 23px;
            line-height: 23px;
            border: none;
            background-color: #0a9991;
            transform: scale(0.4);
            transform-origin: 50% 50%;

            -webkit-transition-property: all;
            -moz-transition-property: all;
            transition-property: all;
            -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;
            border-radius: 30px;
            text-align: center;
            vertical-align: middle;
            text-indent: 0px;
            z-index: 200 !important;
        }

        input::-ms-clear {
            display: none;
        }

        .active .ui-symetrie-handle,
        .active .ui-rotatable-handle,
        .active .ui-symetrie-handle,
        .active .ui-rotatable-handle,
        .active .ui-more-options-handle,
        .active .ui-resizable-handle {
            pointer-events: auto !important;
        }

        .active .ui-symetrie-handle.minimize:before,
        .active .ui-rotatable-handle.minimize:before {
            opacity: 0;
        }

        .active .ui-symetrie-handle.minimize,
        .active .ui-rotatable-handle.minimize,
        .active.multiple .ui-symetrie-handle,
        .active.multiple .ui-rotatable-handle,
        .active.multiple .ui-more-options-handle,
        .active.multiple .ui-resizable-handle {
            transform: scale(0.4) !important;
            pointer-events: none !important;
        }

        .active .ui-symetrie-handle.minimize:hover,
        .active .ui-rotatable-handle.minimize:hover {
            transform: scale(0.4) !important;
        }

        .ui-resizable-handle:before,
        .ui-rotatable-handle:before,
        .ui-symetrie-handle:before,
        .ui-more-options-handle:before,
        .active.multiple .ui-symetrie-handle:before,
        .active.multiple .ui-rotatable-handle:before,
        .active.multiple .ui-more-options-handle:before,
        .active.multiple .ui-resizable-handle:before {
            color: #fff;
            opacity: 0;
        }

        .active .ui-resizable-handle:before,
        .active .ui-rotatable-handle:before,
        .active .ui-symetrie-handle:before,
        .active .ui-more-options-handle:before {
            opacity: 1;

        }

        .ui-rotatable-handle-nw:before {
            font-size: 15px;
            margin-right: 2px;
            top: 4px;
        }

        .ui-symetrie-handle:before {
            font-size: 17px;
            margin-right: 1px;
            top: 3px;
        }


        .ui-more-options-handle:before {
            font-size: 14px;
            margin-right: 0px;
            top: 5px;
        }

        .ui-resizable-handle:before {
            font-size: 14px;
            margin-right: 0px;
            top: 5px;
        }

        .ui-symetrie-handle:hover:before,
        .ui-more-options-handle:hover:before,
        .ui-rotatable-handle-nw:before,
        .ui-resizable-handle:before {
            color: #fff !important;
        }

        .ui-resizable-handle {
            bottom: -12px;
            right: -12px;
        }

        .ui-rotatable-handle {
            top: -12px;
            left: -12px;
        }

        .ui-more-options-handle {
            top: -12px;
            right: -12px;
            cursor: pointer;
        }

        .ui-symetrie-handle {
            bottom: -12px;
            left: -12px;
            cursor: pointer;
        }

        .active .ui-resizable-handle,
        .active .ui-rotatable-handle,
        .active .ui-symetrie-handle,
        .active .ui-more-options-handle {
            transform: scale(1) !important;
        }

        .editor .resizer:not(.active),
        .editor .resizer:not(.active) * {
            pointer-events: none !important;
        }

        /*
         * Multi-select: each selected item keeps .active + .multiple so the
         * group can be dragged from any member (pointer-events must stay on).
         * .multiple already hides per-item handles and clears their border;
         * the shared selection box draws the group outline.
         */
        .editor .resizer.active.multiple {
            pointer-events: auto !important;
            cursor: move;
        }

        .editor .resizer.active.multiple * {
            pointer-events: none !important;
        }

        .active .ui-resizable-handle:hover,
        .active .ui-rotatable-handle:hover,
        .active .ui-symetrie-handle:hover,
        .active .ui-more-options-handle:hover {
            background-color: #077d77;
        }

        .editor .resizer {
            border-color: #0ba69d;
        }

        #svg-editor-canvas {
            position: relative;
        }

        #full-container-svg {
            position: relative;
            height: 100%;
            width: 100%;
            z-index: 1;
        }

        #svg-editor-canvas g {
            position: relative;
            z-index: 100;
        }

        .multiple {
            border-color: transparent !important;
        }

        .multiple .svg-icon,
        .multiple .ui-rotatable-handle {

            display: none
        }

        .editing-text {
            cursor: text;
        }

        .cadre-logo {
            width: 3440px;
            height: 1440px;
            position: fixed;
            top: 50%;
            left: 50%;
            /*margin-left:-1683px;*/
            margin-left: -1563px;
            margin-top: -695px;
            pointer-events: none;
            /*border:2px dashed #cccccc;*/
            background-image: url('/images/background-cadre-logo.png');
            background-repeat: no-repeat;

        }

        .modify-logo .cadre-logo {
            margin-left: -1683px;
        }

        .modify-logo .btn-display-tuto {
            margin-left: 257px;
        }

        .modify-logo .save-btn {
            margin-left: -63px;

        }

        .icheckbox_square-green {
            margin-right: 10px;
            margin-bottom: 7px;
            margin-top: 7px;
            top: -1px;
        }

        .btn-ok-ctn {
            position: relative;
        }

        .btn-ok:hover {
            background: #0ab3a9 !important;
        }

        .btn-ok-ctn:hover .btn-ok-delete-text {
            display: block;
        }

        .btn-ok-delete-text {
            position: absolute;
            background-image: url(/images/engine/svg/croix.svg);
            display: block;
            text-align: center;
            background-position: center;
            width: 36px;
            height: 100%;
            background-repeat: no-repeat;
            right: 0;
            top: 0;
            z-index: 5;
            display: none;
            cursor: pointer;
        }

        .btn-ok {

            position: absolute;
            background-color: red;
            /*width:38px !important;*/
            background: #05a59b !important;
            padding-left: 12px;
            padding-right: 12px;
            height: 42px !important;
            line-height: 42px !important;
            font-weight: bold;
            right: 0px;
            top: 0;
            text-align: center;
            color: #fff;
            border-bottom-left-radius: 0px !important;
            border-top-left-radius: 0px !important;
            cursor: pointer;

            -webkit-transition: all 200ms cubic-bezier(0.100, 0.875, 0.230, 0.980);
            -moz-transition: all 200ms cubic-bezier(0.100, 0.875, 0.230, 0.980);
            -o-transition: all 200ms cubic-bezier(0.100, 0.875, 0.230, 0.980);
            transition: all 200ms cubic-bezier(0.100, 0.875, 0.230, 0.980);

            -webkit-transition-timing-function: cubic-bezier(0.100, 0.875, 0.230, 0.980);
            -moz-transition-timing-function: cubic-bezier(0.100, 0.875, 0.230, 0.980);
            -o-transition-timing-function: cubic-bezier(0.100, 0.875, 0.230, 0.980);
            transition-timing-function: cubic-bezier(0.100, 0.875, 0.230, 0.980);

        }

        .selectBox.input-box2 .selectBox-arrow {
            position: relative;
            top: 0px;
            right: -17px;
        }

        .input-box2.selectBox-dropdown {
            line-height: 35px !important;
        }

        .title-company-name,
        .title-slogan {
            position: relative;
        }

        .title-company-name:before,
        .title-slogan:before {
            position: absolute;
            top: 15px;
            right: 10px;
        }

        .center-table {
            display: table;
            width: 100%;
            height: 100%;
        }

        .v-align {
            display: table-cell;
            vertical-align: middle;
        }

        section.etape1 {
            height: 100%;
        }

        .etape3-search.icon-loupe2 {
            width: 35px !important;

        }

        .input-search-etape3 {
            font-size: 14px;
        }

        .etape3-search:before {
            right: 0px !important;
        }

        .step.step1 {
            -webkit-animation: fadein 0.25s ease-in alternate 1;
            -moz-animation: fadein 0.25s ease-in alternate 1;
            animation: fadein 0.25s ease-in alternate 1;
        }

        .etape-1-box {
            text-align: left;
            width: 545px;
            background-color: #F9FAFC;
            border-radius: 4px;
            border: 1px solid #D9DCE0;
            display: table;
            width: 545px;

            box-shadow: 0 0 0 1px #fff inset, -1px 0px 26px 0px rgba(125, 126, 128, 0.25);
            /*#7D7E80;*/
            -webkit-box-shadow: 0 0 0 1px #fff inset, -1px 0px 26px 0px rgba(125, 126, 128, 0.25);
            /*#7D7E80;*/
            -moz-box-shadow: 0 0 0 1px #fff inset, -1px 0px 26px 0px rgba(125, 126, 128, 0.25);
            /*#7D7E80;*/
            -o-box-shadow: 0 0 0 1px #fff inset, -1px 0px 26px 0px rgba(125, 126, 128, 0.25);
            /*#7D7E80;*/
            margin-left: auto;
            margin-right: auto;
            padding: 35px;
            position: relative;



        }


        .btn-logo-forward:before {
            transform: rotate(0deg);
        }

        .green-bar-title {
            padding-left: 15px;
            height: 40px;
            line-height: 40px;
            border-radius: 4px;
            color: #fff;

            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0ba69d+0,0a948c+100 */
            background: #0ba69d;
            /* Old browsers */
            background: -moz-linear-gradient(top, #0ba69d 0%, #0a948c 100%);
            /* FF3.6-15 */
            background: -webkit-linear-gradient(top, #0ba69d 0%, #0a948c 100%);
            /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom, #0ba69d 0%, #0a948c 100%);
            /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0ba69d', endColorstr='#0a948c', GradientType=0);
            /* IE6-9 */

            box-shadow: 0 0 0 1px #0ab0a7 inset;
            border: 1px solid #0a8c83;
            font-size: 20px;

        }

        .icon-tick:before {
            font-size: 16px !important;
            top: 15px !important;
            color: #0BA69D;
        }

        .title-company-name:before,
        .title-slogan:before {
            font-size: 16px;
        }

        .title-company-name:hover:before,
        .title-slogan:hover:before {
            font-size: 20px;
            content: "\e925";
            pointer-events: none;
            top: 12px;
        }


        .next-button {

            display: inline-block;
            margin-left: auto;
            margin-right: auto;
            height: 45px;
            line-height: 45px;
            padding-left: 85px;
            padding-right: 85px;
            color: #fff;
            border-radius: 4px;

            border-radius: 4px;
            color: #fff;

            background: #0ba69d;
            /* Old browsers */
            background: -moz-linear-gradient(top, #0ba69d 0%, #0a948c 100%);
            /* FF3.6-15 */
            background: -webkit-linear-gradient(top, #0ba69d 0%, #0a948c 100%);
            /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom, #0ba69d 0%, #0a948c 100%);
            /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0ba69d', endColorstr='#0a948c', GradientType=0);
            /* IE6-9 */
            cursor: pointer;
            font-size: 20px;
            margin-top: 50px;
        }

        .next-button:hover {
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0cb3a9+0,0a9e95+100 */
            background: #0cb3a9;
            /* Old browsers */
            background: -moz-linear-gradient(top, #0cb3a9 0%, #0a9e95 100%);
            /* FF3.6-15 */
            background: -webkit-linear-gradient(top, #0cb3a9 0%, #0a9e95 100%);
            /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom, #0cb3a9 0%, #0a9e95 100%);
            /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0cb3a9', endColorstr='#0a9e95', GradientType=0);
            /* IE6-9 */
            text-decoration: none;
        }

        .next-button.disabled,
        .next-button.disabled:hover {
            background: #cdcdcd;
            cursor: auto;
        }

        .input-box1 {
            border-radius: 4px;
            border: 1px solid #d5d6e3;
            width: 100%;
            height: 45px;
            line-height: 45px;
            font-size: 18px;
            color: #0a9c93;
            padding-left: 20px;
            padding-right: 20px;
        }

        .input-rotation {
            border-radius: 4px;
            border: 1px solid #d5d6e3;
            width: 82px;
            height: 35px;
            line-height: 35px !important;
            font-size: 18px;
            color: #0a9c93;
            padding-left: 10px;
            padding-right: 10px;
            font-size: 15px;
            cursor: pointer;

        }

        .selectBox-label {
            font-weight: bold;
        }

        .input-rotation .selectBox-label {
            margin-right: 10px;
            padding: 0px;
        }

        .input-rotation .selectBox-label:after {
            content: "°";
            display: inline-block;
        }

        .input-rotation .selectBox-arrow {
            cursor: pointer;
        }

        .selectBox-dropdown .selectBox-label {
            vertical-align: middle;
        }

        .selectBox-arrow:before {
            display: inline-block;
            top: 0px;
            left: 0px;
        }

        .input-rotation .selectBox-arrow:before {

            border-color: #0ba69d transparent transparent transparent;
        }

        .input-rotation .selectBox-arrow:hover:before {
            border-color: #07736c transparent transparent transparent;
        }

        .input-rotation .selectBox-dropdown:focus {}

        .input-box2 {
            border-radius: 4px;
            border: 1px solid #DFE5EB;
            width: 100%;
            font-weight: bold;
            height: 42px;
            line-height: 42px;
            font-size: 14px;
            padding-left: 16px;
            padding-right: 16px;

            -webkit-transition: all 600ms cubic-bezier(0.100, 0.875, 0.230, 0.980);
            -moz-transition: all 600ms cubic-bezier(0.100, 0.875, 0.230, 0.980);
            -o-transition: all 600ms cubic-bezier(0.100, 0.875, 0.230, 0.980);
            transition: all 600ms cubic-bezier(0.100, 0.875, 0.230, 0.980);

            -webkit-transition-timing-function: cubic-bezier(0.100, 0.875, 0.230, 0.980);
            -moz-transition-timing-function: cubic-bezier(0.100, 0.875, 0.230, 0.980);
            -o-transition-timing-function: cubic-bezier(0.100, 0.875, 0.230, 0.980);
            transition-timing-function: cubic-bezier(0.100, 0.875, 0.230, 0.980);
        }

        /* .input-box3{
            
            font-weight:bold;
        
        } */

        .input-box2.editing {
            padding-right: 50px;
        }

        /* Tagline field only: bold muted placeholder (#9A9FAC @ 50%) */
        .input-box2.input-box2-tagline.tagline-empty,
        .input-box2.input-box2-tagline:placeholder-shown {
            color: #adb3b9 !important;
            font-weight: bold !important;
            -webkit-text-fill-color: #adb3b9 !important;
        }

        .input-box2.input-box2-tagline::placeholder,
        .input-box2.input-box2-tagline::-webkit-input-placeholder,
        .input-box2.input-box2-tagline::-moz-placeholder,
        .input-box2.input-box2-tagline:-ms-input-placeholder,
        .input-box2.input-box2-tagline::-ms-input-placeholder {
            font-weight: bold !important;
            color: #adb3b9 !important;
            -webkit-text-fill-color: #adb3b9 !important;
            opacity: 1 !important;
        }

        .custom-select.input-box2 {
            padding-right: 20px;
        }

        .error-input {
            border-color: #E61717 !important;
            color: #adb3b9 !important;
        }

        .input-box1:focus,
        .input-box2:focus,
        .input-search-modal:not(.required-field):focus {
            outline: none;
            border: 1px solid #0ba69d !important;
            /*  -webkit-box-shadow: 0px 0px 5px  #0ba69d;
     box-shadow: 0px 0px 5px  #0ba69d;*/
        }

        .title-box1 {
            margin-top: 25px;
            margin-bottom: 13px;
            font-size: 16px;
            /*font-weight:300;*/
        }

        .title-sidebar1:first-child {
            margin-top: 0px;
        }

        .title-sidebar1 {
            position: relative;
            margin-top: 22px;
            margin-bottom: 12px;
        }

        .tooltip-error.help {
            line-height: 28px;
            padding-top: 10px;
            padding-bottom: 10px;
            top: -80px;
        }

        .tooltip-error.visible {
            opacity: 1;
            -webkit-animation: fadein 250ms ease-in alternate 1;
            -moz-animation: fadein 250ms ease-in alternate 1;
            animation: fadein 250ms ease-in alternate 1;
        }


        .tooltip-help.visible {
            opacity: 1;

            -webkit-transition: fadein 500ms ease-in alternate 1;
            -moz-transition: fadein 500ms ease-in alternate 1;
            animation: fadein 500ms ease-in alternate 1;
            pointer-events: all;
        }

        .title-tooltip-help {
            font-size: 22px;
            font-weight: 400;
            margin-bottom: 10px;
        }

        .msg-tooltip-help {
            font-size: 14px !important;
            font-weight: bold !important;
        }

        #modifyTooltip-start {
            width: 230px;
            left: 510px;
            text-align: left !important;
            top: 135px;
            padding-bottom: 15px;
            padding-top: 15px;
        }

        #modifyTooltip-start:after {
            left: -5px;
            top: 50%;
            margin-top: -5px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 5px 5px 5px 0;
            border-color: transparent #10151a transparent transparent;
            transform: rotate(0);
        }

        .tooltip-help {
            background-color: #363F5A;
            color: #fff;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            line-height: 20px;

            font-size: 18px;
            width: 430px;
            margin-left: -175px;



            opacity: 0;
            pointer-events: none;

            position: absolute;
            top: 108px;
            left: 50%;
            padding-bottom: 20px;
            padding-top: 20px;


        }


        .closeModal.visible {
            opacity: 1;

            -webkit-transition: fadein 500ms ease-in alternate 1;
            -moz-transition: fadein 500ms ease-in alternate 1;
            animation: fadein 500ms ease-in alternate 1;
            pointer-events: all;
        }

        .closeModal.not-visible {
            -webkit-transition: fadeout 250ms ease-in alternate 1;
            -moz-transition: fadeout 250ms ease-in alternate 1;
            animation: fadeout 250ms ease-in alternate 1;
            pointer-events: none;
        }


        .closeModal {
            opacity: 0;
            pointer-events: none;
        }


        @keyframes bounce {
            from {
                left: 510px;
            }

            50% {
                left: 495px;
            }

            to {
                left: 510px;
            }
        }

        #tooltip-info {
            opacity: 0;
        }

        #tooltip-info.visible {
            opacity: 1;
            left: 530px;
            top: 185px;
            position: fixed;
            width: 280px;
            /*animation: bounce 1200ms ease 5;*/

            -webkit-animation: fadein 0.25s ease-in alternate 1;
            -moz-animation: fadein 0.25s ease-in alternate 1;
            animation: fadein 0.25s ease-in alternate 1;
        }

        #tooltip-info .msg-tooltip-help {
            font-size: 16px;
            line-height: 25px;
        }

        #tooltip-info:after {
            left: -9px;
            top: 50%;
            margin-top: -5px;
            transform: none;

        }

        #tooltip-start {
            margin-left: -58px;
        }

        .tooltip-help:after {
            right: 50%;
            bottom: -10px;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-color: rgba(54, 63, 90, 0);
            border-right-color: #363F5A;
            border-width: 5px;
            margin-top: 0;
            transform: rotate(-90deg);
        }

        .tooltip-help .qtip-content {
            position: relative;
            padding: 0px 9px;
            text-align: center;
            word-wrap: break-word;
            color: #fff;
            font-weight: 300;
            font-size: 15px;

        }

        .tooltip-help .qtip-content * {
            color: #fff;
        }

        .tooltip-error {


            /*background-color: rgba(16,21,26,.85); */
            background-color: #363F5A;
            color: #fff;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            line-height: 20px;

            line-height: 45px;
            font-size: 14px;
            width: 100%;
            opacity: 0;
            pointer-events: none;

            margin-left: auto;
            margin-right: auto;
            position: absolute;
            top: -58px;
            left: 0;
            margin-left: 0px;
            margin-bottom: 0px;

        }



        .tooltip-error:after {
            right: 50%;
            top: 44px;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-color: rgba(53, 63, 90, 0);
            border-right-color: rgba(53, 63, 90, 1);
            border-width: 5px;
            margin-top: 0;
            transform: rotate(-90deg);
        }

        .tooltip-error .qtip-content {
            font-weight: bold;
            position: relative;
            padding: 0px 9px;
            text-align: center;
            word-wrap: break-word;
            color: #EAEDF0;
            font-size: 14px;

        }

        .color-picker {
            border: 1px solid #DFE5EB;
            border-radius: 4px;
            padding: 12px;
            position: relative;
        }


        .colorpicker-color-case-container {
            padding-bottom: 12px;
            border-bottom: 1px solid #DFE5EB;
            margin-bottom: 10px;
        }

        .colorpicker-color {
            position: relative;
            display: inline-block;
            border: 1px solid #DFE5EB;
            border-radius: 4px;
            margin-right: 7px;
            background-color: #ffffff;
            position: relative;
            z-index: 1;
            font-size: 14px;
            cursor: pointer;
            height: 24px;
            vertical-align: top;
            line-height: 24px;
            padding-left: 8px;
            padding-right: 8px;
            font-size: 12px;
            font-weight: bold
        }

        .colorpicker-color.active {
            color: #ffffff;
            border: 1px solid #05A59B;
            background-color: #05A59B;
        }

        .ng-input-color {
            padding-top: 3px;
            padding-bottom: 3px;
            border: 1px solid transparent;
            padding-left: 3px;
            padding-right: 10px;
        }

        .ng-input-color:focus {
            background: #ffffff;
            border-radius: 4px;
            border-color: #e2e3ef;
            position: absolute;
            width: 80px;
        }

        .colorpicker-color:last-child {
            margin-right: 0px;
        }

        .no-text-container {
            text-align: center;
            font-size: 16px;
            margin-top: 75px;
        }

        .inscription-sidebar-container .input-register-txt {
            margin-bottom: 0px;
        }

        .colorpicker-color.color1 {}

        .colorpicker-color.color2 {}

        html boby .sp-container {
            padding: 5px;

        }

        html .sp-container {
            z-index: 0;
            border: 0px;
            background: none;
            background-color: #fff;


            margin-top: 0px;

        }

        html .color-picker.simple .sp-container {
            /*margin-top:4px;*/
        }

        html .color-picker.simple .sp-container {
            -webkit-border-top-left-radius: 5px;
            -webkit-border-top-right-radius: 5px;
            -moz-border-radius-topleft: 5px;
            -moz-border-radius-topright: 5px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        .colorpicker-history {
            border-bottom: 1px solid #DFE5EB;
            margin-bottom: 10px;
            padding-bottom: 9px;
            font-weight: bold;
            font-size: 12px;
        }


        .colorpicker-history-title {
            font-size: 12px;
            margin-bottom: 10px;
        }

        .color-history {
            width: 25px;
            height: 25px;
            display: inline-block;
            border-radius: 4px;
            margin-right: 10px;
            margin-bottom: 5px;
            cursor: pointer;
            position: relative;

        }

        .color-history.active {
            /*border:2px solid #3CC !important;*/

        }


        .font-box {
            overflow: hidden;
            border: 1px solid #DFE5EB;
            border-radius: 4px;
            margin: 0px;
            padding-left: 16px;
            position: relative;
            font-size: 18px;
            height: 42px;
            line-height: 42px;
            cursor: pointer;
            margin-bottom: 12px;

        }

        .font-box:before {
            font-family: 'icomoon' !important;
            font-size: 10px;
            position: absolute;
            right: 14px;
            top: -1px;
            color: #363f5a;
            transform: rotate(90deg);
        }

        .colorpicker-degrade {
            display: inline-block;
            margin-bottom: 15px;

        }

        .angle-container {
            float: right;
            verical-align: top;
        }

        .degrade-checkbox {
            display: inline-block;
            position: relative;
            width: 20px;
            height: 20px;
            border-radius: 3px;
            background-color: #fff;
            border: 1px solid #DFE5EB;
            top: 4px;
            margin-right: 3px;
        }

        .degrade-checkbox.checked:before {
            content: "\e912";
            font-family: 'icomoon' !important;
            font-size: 10px;
            color: #0ba69d;
            position: absolute;
            top: 4px;
            left: 3px;

        }

        .input-text-information {
            border: 1px solid #DFE5EB;
            border-radius: 4px;
            /*padding:0px 12px;*/
            padding-right: 32px;
            padding-left: 16px;
            height: 42px;
            line-height: 42px;
            width: 100%;
            outline: none;

        }

        .config-block {
            padding-bottom: 18px;
            border-bottom: 1px solid #DFE5EB;
            margin-bottom: 17px !important;
        }

        .config-block:last-child {
            border-bottom: none;
        }

        .title-block {
            border: none !important;
            padding-bottom: 8px !important;
        }

        .container-text-information:last-child {
            margin-bottom: 0px;
        }

        .container-text-information {
            margin-bottom: 12px;
            position: relative;
        }

        * {
            box-sizing: border-box;
        }

        .add-text-line {
            position: relative;
            margin-top: 7px;
            padding-left: 2px;
            cursor: pointer;
        }

        .add-text-line:hover {
            color: #109880;
        }

        .input-text-information:focus,
        .input-text-information.active {
            color: #109880;
            outline-color: #109880;
        }



        .delete-text {
            position: absolute;
            width: 6px;
            height: 6px;
            right: 10px;
            top: 16px;
            cursor: pointer;

            display: none;
            color: #0ba69d;
        }

        .delete-text:before {
            font-size: 12px;
            color: #0ba69d;
        }

        .delete-text:hover {
            color: #0ba69d;
        }

        .container-text-information:hover .delete-text {
            display: block;
        }

        .font-container {
            position: absolute;
            width: 100%;
            top: 220px;
            background-color: #fff;
            height: 100%;
            z-index: 6;
            left: 0px;
            padding-bottom: 270px;
            /*padding:15px;*/
        }

        .close-font-container:before {
            color: #363f5a !important;
            font-size: 12px !important;
        }

        .palette.font-palette>* {
            padding-left: 0px;
            padding-right: 0px;
        }

        .palette.font-palette .scrollbar>* {
            padding-left: 16px;
            padding-right: 16px;
        }

        .palette.favoris-palette>* {
            padding-left: 0px;
            padding-right: 0px;
        }

        /* Match header inset (16px) — pad the list container, not inside each card */
        .palette.favoris-palette .scrollbar,
        .palette.favoris-palette .favoris-palette-scroll {
            padding-left: 16px;
            padding-right: 16px;
            box-sizing: border-box;
        }

        .palette.favoris-palette .scrollbar > *,
        .palette.favoris-palette .favoris-palette-scroll > * {
            padding-left: 0;
            padding-right: 0;
        }

        /*
         * Desktop Favourites (left rail): header + scrollable list.
         * Inline height:100% on .scrollbar sat under the title block, so the
         * panel grew with content and mCustomScrollbar never clipped — wheel
         * did nothing. Flex + native overflow fixes it (mobile has its own rules).
         */
        @media screen and (min-width: 769px) {
            .edit-bar .palette.favoris-palette.active {
                display: flex !important;
                flex-direction: column !important;
                overflow: hidden !important;
                height: 100% !important;
                box-sizing: border-box !important;
                padding-bottom: 70px !important;
            }

            .edit-bar .palette.favoris-palette.active > .config-block {
                flex: 0 0 auto !important;
            }

            .edit-bar .palette.favoris-palette.active > .scrollbar,
            .edit-bar .palette.favoris-palette.active > .scrollbar.mCustomScrollbar,
            .edit-bar .palette.favoris-palette.active > .favoris-palette-scroll {
                flex: 1 1 auto !important;
                min-height: 0 !important;
                height: auto !important;
                max-height: none !important;
                overflow-x: hidden !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
                padding-left: 16px !important;
                padding-right: 16px !important;
                box-sizing: border-box !important;
            }

            .edit-bar .palette.favoris-palette .mCustomScrollBox,
            .edit-bar .palette.favoris-palette .mCSB_container {
                height: auto !important;
                max-height: none !important;
                overflow: visible !important;
                position: relative !important;
                top: auto !important;
                left: auto !important;
                margin-right: 0 !important;
            }

            .edit-bar .palette.favoris-palette .mCSB_scrollTools,
            .edit-bar .palette.favoris-palette .mCSB_scrollTools_vertical {
                display: none !important;
            }
        }

        .palette.finition-palette>* {
            padding-left: 0px;
            padding-right: 0px;
        }

        .palette.finition-palette .scrollbar>* {
            padding-left: 16px;
            padding-right: 16px;
        }


        .font-container li {
            font-size: 24px;
            border-top: 1px solid #d3d4e5;
            padding-top: 5px;
            padding-bottom: 5px;
            cursor: pointer;
            color: #91919E;

            -webkit-transition: padding 50ms ease-in;
            -moz-transition: padding 50ms ease-in;
            -o-transition: padding 50ms ease-in;
            -ms-transition: padding 50ms ease-in;
            transition: padding 50ms ease-in;
            position: relative;
        }

        .font-container li:first-child {
            border-top: none;
        }

        .font-container li:hover {
            padding-left: 5px;
        }

        .text-preview-info {
            margin-top: 40px;
            border-top: 1px solid #e2e3ef;
            padding-top: 30px;
            line-height: 28px;
        }

        .text-preview-info .title {
            font-size: 20px;
            font-weight: 300;
            margin-bottom: 20px;
            color: #242E33;
        }

        .font-container li:hover,
        .font-container li.active,
        .font-container li.selected {
            color: #33B59B;
        }

        .font-container li.selected:after {
            font-family: 'icomoon' !important;
            position: absolute;
            right: 6px;
            top: 50%;
            margin-top: -5px;
            content: "\e912";
            font-size: 12px;
        }

        .font-container ul {
            list-style: none;
            padding: 0px;
            margin: 0px;
        }

        .font-selector-title {
            padding-bottom: 6px;
        }

        .close-font-container {
            position: absolute;
            right: 10px;
            top: 18px;
            color: #91919e;
            font-size: 14px;
            cursor: pointer;
        }

        /*
.font-div
{
    margin-top:10px;
    margin-bottom:10px;
}
*/
        .font-div:first-child .font-family-title {
            margin-top: 0px;
        }

        .dib {
            display: inline-block;
        }


        .font-options {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .inscrease-letter-space:before,
        .decrease-letter-space:before {
            font-size: 6px;
            top: 2px;
            position: relative;
            color: #0ba69d !important;
        }

        .inscrease-letter-space:hover:before,
        .decrease-letter-space:hover:before,
        .font-box:hover:before {
            color: #07736c !important;
        }

        .selectBox-options LI:first-child {
            border: none !important;
        }

        .selectBox-dropdown.selectBox-menuShowing {
            border-radius: 4px !important;
        }

        .selectBox-dropdown-menu {
            margin-top: 8px;
            border: 1px solid #DFE5EB !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
            border-radius: 4px;
        }

        .selectBox-options LI {
            border-bottom: 1px solid #DFE5EB !important;
        }

        @media screen and (min-height: 638px) {
            .selectBox-dropdown-menu {
                /*max-height:509px !important;*/
            }
        }


        @media screen and (min-height: 734px) {
            .selectBox-dropdown-menu {
                /* max-height:626px !important;*/
            }
        }

        @media screen and (min-height: 900px) {
            .selectBox-dropdown-menu {
                /* max-height:826px !important;*/
            }
        }

        .selectBox-options LI {
            padding-left: 12px !important;
            padding-right: 12px !important;
        }


        .font-options .icon-interlettrage {
            margin: 0px;
            margin-right: 3px;

        }

        .font-options .icon-interlettrage:before {
            top: 4px;
            position: relative;

        }

        .inscrease-decrease {
            position: relative;
            width: 15px;
            height: 15px;
            margin-left: 9px;
            vertical-align: top;
        }

        .decrease-letter-space {
            position: absolute;
            top: 13px;
            cursor: pointer;

        }

        .inscrease-letter-space {
            top: 0px;
            cursor: pointer;
        }

        .font-options {
            margin-top: 7px;
        }

        .letter-spacing-container {

            display: block;
            margin-bottom: 12px;
            /*display:none;*/

        }

        /*
 .sp-dragger {
    border-radius: 14px;
    height: 14px;
    width: 14px;
    background:transparent;
    border:2px solid #fff;
 }*/
        .letter-inscrease-decrease-container {

            display: block;
            margin-bottom: 12px;

        }

        /* Size / Letter spacing / Weight / Style / Decoration rows —
           label left, controls right on one line. */
        .font-options .increase-decrease-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            overflow: hidden;
            margin-bottom: 12px;
            line-height: 32px;
            min-height: 32px;
        }

        .font-options .increase-decrease-container > .dib {
            float: none !important;
            width: auto !important;
        }

        .font-options .increase-decrease-container > .dib:last-child {
            flex-shrink: 0;
            margin-left: 8px;
        }

        .font-options .increase-decrease-container:last-child {
            margin-bottom: 0;
        }

        .font-weight-container .font-weight-btns,
        .font-style-container .font-weight-btns,
        .font-decoration-container .font-weight-btns {
            display: inline-block;
            white-space: nowrap;
            line-height: 30px;
            vertical-align: middle;
        }

        .font-weight-container .font-weight-btn,
        .font-style-container .font-weight-btn,
        .font-decoration-container .font-weight-btn {
            display: inline-block;
            min-width: 28px;
            height: 30px;
            line-height: 28px;
            text-align: center;
            border: 1px solid #dfe5eb;
            background: #fff;
            cursor: pointer;
            font-size: 12px;
            margin-left: 2px;
            vertical-align: middle;
            box-sizing: border-box;
        }

        .font-weight-container .font-weight-btn:first-child,
        .font-style-container .font-weight-btn:first-child,
        .font-decoration-container .font-weight-btn:first-child {
            margin-left: 0;
        }

        .font-weight-container .font-weight-btn.active,
        .font-style-container .font-weight-btn.active,
        .font-decoration-container .font-weight-btn.active {
            background: #0ba69d;
            border-color: #0ba69d;
            color: #fff;
        }

        .font-style-btn-italic {
            font-style: italic;
            font-family: Georgia, "Times New Roman", serif;
        }

        .font-style-btn-oblique {
            font-style: oblique;
        }

        .font-deco-btn-underline {
            text-decoration: underline;
        }

        .font-deco-btn-overline {
            text-decoration: overline;
        }

        .font-deco-btn-line-through {
            text-decoration: line-through;
        }


        .change-size-container {
            padding-right: 10px;
            margin-right: 10px;
            border-right: 1px solid #d3d4e5;
        }

        .font-type-container {
            position: absolute;
            right: 10px;
            top: -5px;
        }



        .title-step2 {
            font-size: 35px;
            font-weight: 300;

            text-align: center;
            margin-bottom: 35px;
            position: relative;
            left: -10px;
            color: #242E33;




        }

        .title-step3 {
            font-size: 35px;
            font-weight: 300;

            text-align: center;
            margin-bottom: 5px;
            position: relative;
            color: #242E33;
        }



        .content-step2 {
            opacity: 0;
            background-color: #F5F6F7;
            position: relative;
            display: block;
            border-top-right-radius: 4px;
            border-left: 1px solid #DFE5ED;

            z-index: 1;
            padding-left: 313px;
            top: 50px;
            width: 100%;
            pointer-events: none;
        }

        .content-step2.visible {
            opacity: 1;
            pointer-events: auto;
        }


        .logo-presentation-favoris {
            position: relative;
            width: 100%;
            height: 180px;
            border: 1px solid #DAE0E8;
            border-radius: 8px;
            box-shadow: 0px 3px 12px 0px rgba(125, 126, 128, 0.10);
            -webkit-box-shadow: 0px 3px 12px 0px rgba(125, 126, 128, 0.10);
            -moz-box-shadow: -0px 3px 12px 0px rgba(125, 126, 128, 0.10);
            -o-box-shadow: 0px 3px 12px 0px rgba(125, 126, 128, 0.10);
            padding: 10px;
            margin-bottom: 20px;
            margin-top: 4px;
            cursor: pointer;
            display: block;
            overflow: hidden;
            pointer-events: auto;
            box-sizing: border-box;

            -webkit-transition: border-color 200ms ease;
            -moz-transition: border-color 200ms ease;
            -o-transition: border-color 200ms ease;
            transition: border-color 200ms ease;
        }

        /* Desktop: 250×180 preview already fits the full-width tile — do not shrink */
        .logo-presentation-favoris__preview {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 250px;
            height: 180px;
            max-width: none;
            border: 0;
            margin: 0;
            padding: 0;
            pointer-events: none !important;
            transform: translate(-50%, -50%) scale(0.72);
            -webkit-transform: translate(-50%, -50%) scale(0.72);
            transform-origin: center center;
            -webkit-transform-origin: center center;
        }

        .logo-presentation-favoris__preview text {
            opacity: 1 !important;
        }

        .logo-presentation-favoris:hover {
            border-color: #0ba69d;
        }

        /* DISABLED FOR NOW — desktop two-favourites-per-row grid. Uncomment this
           whole block to restore it. Inner comment markers were stripped because
           CSS comments do not nest; restore them if you re-enable.

           Desktop: two favourites per row without widening the sidebar. Same
           approach as the mobile editor's 3-column grid further up, at 2
           columns. No !important here, so the mobile overrides still win.
           ng-scrollbars moves the tiles into .mCSB_container once it wraps the
           list, so both that and the pre-wrap .scrollbar are gridded.

        .favoris-palette .mCSB_container,
        .favoris-palette .scrollbar > .mCustomScrollBox > .mCSB_container,
        .favoris-palette .favoris-palette-scroll:not(.mCustomScrollbar) {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            align-content: start;
        }

        .favoris-palette .logo-presentation-favoris {
            width: auto;
            height: 96px;
            margin: 0;
            padding: 4px;
        }

        250x180 preview scaled to fit the half-width tile.
        .favoris-palette .logo-presentation-favoris__preview {
            transform: translate(-50%, -50%) scale(0.4);
            -webkit-transform: translate(-50%, -50%) scale(0.4);
        }

        .favoris-palette .logo-presentation-favoris .remove-favoris {
            right: 0;
            top: 2px;
            height: 18px;
            width: 18px;
        }
        */

        .remove-favoris:before {
            color: #bcbcbc;
            font-size: 10px;
        }

        .remove-favoris:hover:before {
            color: #999;
        }

        .remove-favoris {
            z-index: 50;
            position: absolute;
            cursor: pointer;
            right: 1px;
            top: 5px;
            height: 25px;
            width: 25px;
            text-align: right;
            pointer-events: auto !important;
        }

        .logo-presentation {
            /*
             * Layout sizing + gaps — tweak live in DevTools on .logo-presentation:
             *   --logo-content-scale       overall logo size inside the card (default 0.9)
             *   --logo-inside-shape-scale-circular | -rectangular | -polygonal | -text-center | -text-right | -text-left | -generic
             *       → Inside Shape tile size per layout (1.1 = production); the card carries
             *         data-inside-shape-layout, the stack also gets .logo-html-stack--inside-shape-<kind>
             *   --logo-icon-max-width-ttb / --logo-icon-max-height-ttb  (~10% under prior)
             *       → edit these to resize TTB icons live (aspect preserved)
             *   --logo-icon-max-width-ltr / --logo-icon-max-height-ltr
             *       → same for LTR icons
             *   --logo-monogram-max-width-ttb / --logo-monogram-max-height-ttb
             *       → TTB monogram box (letters fill it ink-tight, so 20% under icons)
             *   --logo-stack-pad-x / --logo-stack-pad-y
             *   --logo-gap-icon-text-ttb   TTB icon → company name
             *   --logo-gap-icon-text-ltr   LTR icon → text
             *   --logo-gap-name-tagline    company ↔ tagline (~25% tighter)
             *   --logo-gap-name-tagline-inside-shape  Inside Shape name↔tagline floor
             *   --logo-gap-name-lines     split company line1 ↔ line2 (~25% tighter)
             *   --logo-icon-box-width-ttb / --logo-icon-box-height-ttb
             *       → fixed TTB icon box (icon scaled to fit, centered; not monograms)
             *   TTB icon tiles (exact at --logo-ttb-design-card-width, scaled below):
             *     --logo-gap-icon-company-ttb  icon box → company container
             *     --logo-card-pad-x-ttb        card left/right padding
             *     --logo-text-box-width-ttb    company + tagline container width
             *     --logo-company-box-height-ttb / --logo-tagline-box-height-ttb
             *       → TTB company / tagline boxes (on-screen px; ÷ content-scale like LTR)
             *   --logo-icon-box-width-ltr / --logo-icon-box-height-ltr  fixed LTR icon box
             *   --logo-company-box-height-ltr / --logo-tagline-box-height-ltr
             *       → LTR company / tagline line boxes (on-screen px; text ink fits inside)
             *   --logo-gap-name-tagline-ltr / --logo-gap-name-lines-ltr  LTR text gaps
             *   --logo-gap-name-tagline-ttb      TTB icon tiles: company ↔ tagline (no divider)
             *   --logo-gap-hyphen-row-ttb        TTB: company ↔ hyphen tagline row
             *   --logo-gap-name-lines-split-ttb  TTB Split Line: company line ↔ line
             *   --logo-gap-divider-y-ttb / --logo-gap-divider-tagline-ttb
             *       → TTB divider: gap above it / divider → tagline
             *   --logo-gap-name-lines-classic-ttb  TTB Classic name split: line ↔ line
             * Icon box width/height resolve from the max-* vars (not locked px).
             */
            --logo-content-scale: 0.9;
            --logo-inside-shape-scale-circular: 1.1;
            --logo-inside-shape-scale-rectangular: 1.1;
            --logo-inside-shape-scale-polygonal: 1.1;
            --logo-inside-shape-scale-text-center: 1.1;
            --logo-inside-shape-scale-text-right: 1.1;
            --logo-inside-shape-scale-text-left: 1.1;
            --logo-inside-shape-scale-generic: 1.1;
            --logo-icon-max-width-ttb: 126px;
            --logo-icon-max-height-ttb: 99px;
            --logo-icon-max-width-ltr: 99px;
            --logo-icon-max-height-ltr: 81px;
            --logo-monogram-max-width-ttb: 101px;
            --logo-monogram-max-height-ttb: 79px;
            --logo-stack-pad-x: 18px;
            --logo-stack-pad-y: 14px;
            --logo-gap-icon-text-ttb: 6.5px;
            --logo-gap-icon-text-ltr: 10px;
            --logo-gap-name-tagline: 1.5px;
            --logo-gap-name-tagline-inside-shape: 8px;
            --logo-gap-name-lines: 3px;
            --logo-icon-box-width-ttb: 160px;
            --logo-icon-box-height-ttb: 90px;
            --logo-gap-icon-company-ttb: 13px;
            --logo-card-pad-x-ttb: 45px;
            --logo-text-box-width-ttb: 290px;
            --logo-company-box-height-ttb: 25px;
            --logo-tagline-box-height-ttb: 10px;
            --logo-ttb-design-card-width: 380px;
            --logo-icon-box-width-ltr: 80px;
            --logo-icon-box-height-ltr: 80px;
            --logo-company-box-height-ltr: 25px;
            --logo-tagline-box-height-ltr: 10px;
            --logo-gap-name-tagline-ltr: 8px;
            --logo-gap-name-lines-ltr: 6px;
            --logo-gap-name-lines-classic-ltr: 6px;
            --logo-gap-name-tagline-ttb: 10px;
            --logo-gap-hyphen-row-ttb: 10px;
            --logo-gap-name-lines-split-ttb: 6px;
            --logo-gap-name-lines-classic-ttb: 6px;
            --logo-gap-divider-y-ttb: 8px;
            --logo-gap-divider-tagline-ttb: 12px;
            --logo-gap-divider-y: 7px;
            --logo-gap-hyphen-row: 12px;
            --logo-gap-hyphen-text: 5px;
            /* SVG user-units (unitless) — TTB icon→name in measure/export path */
            --logo-svg-icon-text-gap-ttb: 43;
            /* Fixed 380×280; L/R 15px; logo vertically centered via flex */
            box-sizing: border-box;
            width: 380px;
            height: 280px;
            border-radius: 10px;
            padding: 0 15px;
            background-color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: 0;
            margin-right: 0;
            position: relative;
            overflow: hidden;

            margin-bottom: 0;

            border: 1px solid #DAE0E8;


            /* backwards (not both): keep entrance during delay, then release
               transform so :hover scale(1.05) / mobile-active can apply again. */
            -webkit-animation: logo-tile-reveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards;
            -moz-animation: logo-tile-reveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards;
            animation: logo-tile-reveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards;
            -webkit-animation-delay: var(--logo-reveal-delay, 0ms);
            animation-delay: var(--logo-reveal-delay, 0ms);
            cursor: pointer;

            min-height: 280px;
            min-width: 380px;
            vertical-align: top;

            box-shadow: 0px 3px 12px 0px rgba(125, 126, 128, 0.10);
            -webkit-box-shadow: 0px 3px 12px 0px rgba(125, 126, 128, 0.10);
            -moz-box-shadow: -0px 3px 12px 0px rgba(125, 126, 128, 0.10);
            -o-box-shadow: 0px 3px 12px 0px rgba(125, 126, 128, 0.10);
        }

        .logo-presentation > svg {
            display: block;
            flex-shrink: 0;
        }

        /*
         * Logo HTML stacks: inspect [data-role] / [data-element] / [data-layout].
         * Gap defaults inherit from .logo-presentation (edit there in DevTools).
         * --logo-gap-icon-text is axis-specific below; JS must not setProperty gaps.
         */
        .logo-presentation > .logo-html-stack {
            --logo-gap-icon-text: var(--logo-gap-icon-text-ltr, 10px);
        }

        /* TTB icon layouts: icon SVG + HTML text spans stacked under a parent. */
        .logo-presentation > .logo-html-stack:not(.logo-html-stack--inside-shape):not(.logo-html-stack--ltr) {
            /* Vertical icon→name gap — inherits --logo-gap-icon-text-ttb from card. */
            --logo-gap-icon-text: var(--logo-gap-icon-text-ttb, 6.5px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            box-sizing: border-box;
            padding: var(--logo-stack-pad-y, 14px) var(--logo-stack-pad-x, 18px);
            pointer-events: none;
            z-index: 2;
            overflow: visible;
        }

        /* Inside Shape: absolute overlay — out of flex flow so measure SVG stays centered. */
        .logo-presentation > .logo-html-stack.logo-html-stack--inside-shape {
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
            box-sizing: border-box;
            padding: 0;
            margin: 0;
            pointer-events: none;
            z-index: 2;
            overflow: visible;
        }

        .logo-presentation > .logo-html-stack--inside-shape .logo-html-stack__shape {
            position: absolute;
            line-height: 0;
            overflow: visible;
            pointer-events: none;
        }

        .logo-presentation > .logo-html-stack--inside-shape .logo-html-stack__shape-svg {
            display: block;
            width: 100%;
            height: 100%;
            overflow: visible;
        }

        .logo-presentation > .logo-html-stack--inside-shape .logo-html-stack__texts {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: block;
            margin: 0;
            padding: 0;
            order: unset;
            flex-shrink: unset;
            overflow: visible;
            pointer-events: none;
        }

        .logo-presentation > .logo-html-stack--inside-shape .logo-html-stack__text,
        .logo-presentation > .logo-html-stack--inside-shape .html-logo-text--preview {
            position: absolute !important;
            display: block !important;
            white-space: pre;
            max-width: none;
            overflow: visible;
        }

        .logo-presentation > .logo-html-stack--inside-shape .logo-html-stack__line--hyphens {
            position: absolute;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            z-index: 1;
        }

        .logo-presentation > .logo-html-stack--inside-shape .logo-html-stack__line--hyphens .logo-html-stack__text,
        .logo-presentation > .logo-html-stack--inside-shape .logo-html-stack__line--hyphens .html-logo-text--preview {
            position: static !important;
            display: inline-block !important;
        }

        /* Two-colour company name: one absolute row, words flow inline on one line.
           inline-flex so each word's text centres in its height:100% box. */
        .logo-presentation > .logo-html-stack--inside-shape .logo-html-stack__line--name-row .logo-html-stack__text,
        .logo-presentation > .logo-html-stack--inside-shape .logo-html-stack__line--name-row .html-logo-text--preview {
            position: static !important;
            display: inline-flex !important;
        }

        .logo-presentation > .logo-html-stack--inside-shape .logo-html-stack__hyphen {
            display: block;
            flex-shrink: 0;
            border-radius: 0;
            user-select: none;
        }

        .logo-presentation > .logo-html-stack--inside-shape .logo-html-stack__divider {
            pointer-events: none;
            z-index: 3;
        }

        /* Icon box sized by --logo-icon-max-*-ttb (edit on .logo-presentation).
           --logo-icon-aspect is set by JS from ink; both axes stay in proportion. */
        .logo-presentation > .logo-html-stack:not(.logo-html-stack--inside-shape):not(.logo-html-stack--ltr) .logo-html-stack__svg {
            display: flex;
            width: min(var(--logo-icon-max-width-ttb, 126px), calc(var(--logo-icon-max-height-ttb, 99px) * var(--logo-icon-aspect, 1))) !important;
            height: min(var(--logo-icon-max-height-ttb, 99px), calc(var(--logo-icon-max-width-ttb, 126px) / var(--logo-icon-aspect, 1))) !important;
            max-width: var(--logo-icon-max-width-ttb, 126px) !important;
            max-height: var(--logo-icon-max-height-ttb, 99px) !important;
            align-items: flex-end;
            justify-content: center;
            flex-shrink: 0;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: var(--logo-gap-icon-text);
            line-height: 0;
            overflow: visible;
            order: 0;
        }

        /* Monogram mark: center H+V inside the icon box (icons stay bottom-aligned).
           Own caps: the box is trimmed to the letters' ink, so the icon caps read too big. */
        .logo-presentation > .logo-html-stack:not(.logo-html-stack--inside-shape):not(.logo-html-stack--ltr) .logo-html-stack__svg--monogram {
            --logo-icon-max-width-ttb: var(--logo-monogram-max-width-ttb, 101px);
            --logo-icon-max-height-ttb: var(--logo-monogram-max-height-ttb, 79px);
            max-width: var(--logo-icon-max-width-ttb, 126px) !important;
            max-height: var(--logo-icon-max-height-ttb, 99px) !important;
            overflow: hidden;
            align-items: center;
            justify-content: center;
        }

        .logo-presentation > .logo-html-stack:not(.logo-html-stack--inside-shape):not(.logo-html-stack--ltr) .logo-html-stack__svg--monogram .logo-html-stack__icon-svg {
            display: block !important;
            width: 100% !important;
            height: 100% !important;
            max-width: 100% !important;
            max-height: 100% !important;
            margin: 0 !important;
            overflow: hidden;
            flex: 0 0 auto;
        }

        .logo-presentation > .logo-html-stack:not(.logo-html-stack--inside-shape):not(.logo-html-stack--ltr) .logo-html-stack__hyphen {
            display: block;
            flex-shrink: 0;
            align-self: center;
            border-radius: 1px;
            user-select: none;
        }

        .logo-presentation > .logo-html-stack:not(.logo-html-stack--inside-shape):not(.logo-html-stack--ltr) .logo-html-stack__line--hyphens {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            align-self: center;
            gap: 0;
            width: auto;
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
        }

        /* TEMP: red chip marks tiles using the TTB HTML stack override. */
        .logo-html-stack-override-chip {
            position: absolute;
            bottom: 8px;
            left: 8px;
            z-index: 35;
            padding: 3px 7px;
            border-radius: 4px;
            font: 700 10px/1.2 Arial, Helvetica, sans-serif;
            letter-spacing: 0.02em;
            color: #fff;
            background: #e53935;
            pointer-events: none;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
            text-transform: none;
        }

        .logo-presentation:has(> .logo-html-stack-override-chip) > .test-font-label-TEMP {
            bottom: 34px;
        }

        /*
         * TEST ONLY: dotted outlines around each logo element (logo mark, company
         * name, tagline). Gated by admin LOGO_MAKER_DEBUG_LABELS via the
         * .logo-maker-debug-outlines class on .logo-container-div.
         * outline (not border) so box sizes / fit measurements are unchanged.
         * !important: text spans carry inline outline:none.
         */
        .logo-maker-debug-outlines .logo-presentation > .logo-html-stack .logo-html-stack__svg,
        .logo-maker-debug-outlines .logo-presentation > .logo-html-stack--inside-shape .logo-html-stack__shape {
            outline: 1px dotted #1e88e5 !important;
            outline-offset: 1px;
        }

        .logo-maker-debug-outlines .logo-presentation > .logo-html-stack .logo-html-stack__text[data-role^="company-name"] {
            outline: 1px dotted #e53935 !important;
            outline-offset: 1px;
        }

        .logo-maker-debug-outlines .logo-presentation > .logo-html-stack .logo-html-stack__line[data-role^="tagline"],
        .logo-maker-debug-outlines .logo-presentation > .logo-html-stack--inside-shape .logo-html-stack__text[data-role^="tagline"] {
            outline: 1px dotted #43a047 !important;
            outline-offset: 1px;
        }

        .logo-presentation > .logo-html-stack:not(.logo-html-stack--inside-shape):not(.logo-html-stack--ltr) .logo-html-stack__icon-svg {
            display: block;
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            overflow: visible;
        }

        .logo-presentation > .logo-html-stack:not(.logo-html-stack--inside-shape):not(.logo-html-stack--ltr) .logo-html-stack__texts {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 100%;
            max-width: 100%;
            margin-top: 0;
            padding-top: 0;
            order: 1;
            position: relative;
            flex-shrink: 0;
        }

        .logo-presentation > .logo-html-stack:not(.logo-html-stack--inside-shape):not(.logo-html-stack--ltr) .logo-html-stack__line {
            max-width: 100%;
            width: auto;
        }

        .logo-presentation > .logo-html-stack:not(.logo-html-stack--inside-shape):not(.logo-html-stack--ltr) .logo-html-stack__divider {
            flex-shrink: 0;
            border-radius: 1px;
            align-self: center;
        }

        /*
         * TTB icon tiles (not monograms): 10px company ↔ tagline (Classic,
         * Company-to-Tagline) and 6px between split company lines.
         * Set on __texts so the stack keeps the card value in
         * --logo-gap-name-tagline-base for the divider row below.
         */
        .logo-presentation > .logo-html-stack[data-layout="ttb"]:not([data-logo-type="monogram"]) {
            --logo-gap-name-tagline-base: var(--logo-gap-name-tagline);
            /* Icon box → company name container. */
            --logo-gap-icon-text: var(--logo-gap-icon-company-ttb, 13px);
        }

        .logo-presentation > .logo-html-stack[data-layout="ttb"]:not([data-logo-type="monogram"]) > .logo-html-stack__texts {
            --logo-gap-name-tagline: var(--logo-gap-name-tagline-ttb, 10px);
            --logo-gap-hyphen-row: var(--logo-gap-hyphen-row-ttb, 10px);
            /* Text column = container width (JS inline width/max-width 100% overridden). */
            width: var(--logo-text-box-width-ttb, 290px) !important;
            max-width: none !important;
        }

        /*
         * TTB card + text containers, laid out at the 380px design card
         * (45 + 290 + 45). Smaller cards: JS scales by content-scale × cardWidth/380.
         * Company height ÷ --logo-content-scale (25px on-screen); tagline is
         * a strict 10px box. Fonts are capped in JS to fit those containers.
         */
        .logo-presentation:has(> .logo-html-stack[data-layout="ttb"]:not([data-logo-type="monogram"])) {
            padding-left: var(--logo-card-pad-x-ttb, 45px) !important;
            padding-right: var(--logo-card-pad-x-ttb, 45px) !important;
        }

        /*
         * TTB company / tagline max heights (25 / 10 on-screen) — all TTB stacks
         * including monogram. Fixed 290px text width stays icon-tile only below.
         */
        .logo-presentation > .logo-html-stack[data-layout="ttb"] > .logo-html-stack__texts > .logo-html-stack__line[data-role^="company-name"] {
            height: calc(var(--logo-company-box-height-ttb, 25px) / var(--logo-content-scale, 0.9));
            max-height: calc(var(--logo-company-box-height-ttb, 25px) / var(--logo-content-scale, 0.9));
            flex-shrink: 0;
        }

        .logo-presentation > .logo-html-stack[data-layout="ttb"]:not([data-logo-type="monogram"]) > .logo-html-stack__texts > .logo-html-stack__line[data-role^="company-name"] {
            width: var(--logo-text-box-width-ttb, 290px) !important;
            max-width: none !important;
        }

        .logo-presentation > .logo-html-stack[data-layout="ttb"] > .logo-html-stack__texts > .logo-html-stack__line[data-role^="company-name"] .logo-html-stack__text {
            max-height: calc(var(--logo-company-box-height-ttb, 25px) / var(--logo-content-scale, 0.9));
        }

        .logo-presentation > .logo-html-stack[data-layout="ttb"][data-layout-family="split_line1"]:not([data-logo-type="monogram"]) > .logo-html-stack__texts {
            --logo-gap-name-lines: var(--logo-gap-name-lines-split-ttb, 6px);
        }

        /* Classic TTB company-name split (long names): line 1 ↔ line 2. */
        .logo-presentation > .logo-html-stack[data-layout="ttb"][data-layout-family="classic"]:not([data-logo-type="monogram"]) > .logo-html-stack__texts {
            --logo-gap-name-lines: var(--logo-gap-name-lines-classic-ttb, 6px);
        }

        /*
         * TTB icon box: fixed 160×90 (capped to stack width). The icon SVG fills
         * it with preserveAspectRatio xMidYMid meet → scaled to fit, centered.
         */
        .logo-presentation > .logo-html-stack:not(.logo-html-stack--inside-shape):not(.logo-html-stack--ltr) .logo-html-stack__svg:not(.logo-html-stack__svg--monogram) {
            width: min(var(--logo-icon-box-width-ttb, 160px), 100%) !important;
            height: var(--logo-icon-box-height-ttb, 90px) !important;
            max-width: 100% !important;
            max-height: none !important;
            align-items: center;
        }

        /* TTB tagline container: 10px on-screen — ÷ content-scale, like the company box. */
        .logo-presentation > .logo-html-stack[data-layout="ttb"] > .logo-html-stack__texts > .logo-html-stack__line[data-role^="tagline"] {
            height: calc(var(--logo-tagline-box-height-ttb, 10px) / var(--logo-content-scale, 0.9));
            max-height: calc(var(--logo-tagline-box-height-ttb, 10px) / var(--logo-content-scale, 0.9));
            flex-shrink: 0;
        }

        .logo-presentation > .logo-html-stack[data-layout="ttb"]:not([data-logo-type="monogram"]) > .logo-html-stack__texts > .logo-html-stack__line[data-role^="tagline"] {
            width: var(--logo-text-box-width-ttb, 290px) !important;
            max-width: none !important;
        }

        .logo-presentation > .logo-html-stack[data-layout="ttb"] > .logo-html-stack__texts > .logo-html-stack__line[data-role^="tagline"] .logo-html-stack__text {
            max-height: calc(var(--logo-tagline-box-height-ttb, 10px) / var(--logo-content-scale, 0.9));
        }

        /* Column tagline lines: text sits at the top of its container (hyphen rows stay centred). */
        .logo-presentation > .logo-html-stack[data-layout="ttb"] > .logo-html-stack__texts > .logo-html-stack__line[data-role^="tagline"]:not(.logo-html-stack__line--hyphens) {
            justify-content: flex-start !important;
        }

        /*
         * TTB divider: --logo-gap-divider-y-ttb (8px) above it and as its own
         * bottom margin; the tagline after it adds the rest so divider →
         * tagline = --logo-gap-divider-tagline-ttb (12px). Flex margins add up.
         */
        .logo-presentation > .logo-html-stack[data-layout="ttb"]:not([data-logo-type="monogram"]) > .logo-html-stack__texts {
            --logo-gap-divider-y: var(--logo-gap-divider-y-ttb, 8px);
        }

        .logo-presentation > .logo-html-stack[data-layout="ttb"]:not([data-logo-type="monogram"]) > .logo-html-stack__texts > .logo-html-stack__divider + .logo-html-stack__line {
            --logo-gap-name-tagline: calc(var(--logo-gap-divider-tagline-ttb, 12px) - var(--logo-gap-divider-y-ttb, 8px));
        }

        /*
         * Monogram (TTB stack): same spacing as TTB icon tiles — logo → name,
         * name → tagline, divider 5px above / 12px to the tagline. Company /
         * tagline max heights (25 / 10) apply above; fixed 290px text width +
         * card padding stay icon-tile only.
         */
        .logo-presentation > .logo-html-stack[data-layout="ttb"][data-logo-type="monogram"] {
            --logo-gap-icon-text: var(--logo-gap-icon-company-ttb, 13px);
        }

        .logo-presentation > .logo-html-stack[data-layout="ttb"][data-logo-type="monogram"] > .logo-html-stack__texts {
            --logo-gap-name-tagline: var(--logo-gap-name-tagline-ttb, 10px);
            --logo-gap-hyphen-row: var(--logo-gap-hyphen-row-ttb, 10px);
            --logo-gap-divider-y: var(--logo-gap-divider-y-ttb, 8px);
        }

        .logo-presentation > .logo-html-stack[data-layout="ttb"][data-logo-type="monogram"] > .logo-html-stack__texts > .logo-html-stack__divider + .logo-html-stack__line {
            --logo-gap-name-tagline: calc(var(--logo-gap-divider-tagline-ttb, 12px) - var(--logo-gap-divider-y-ttb, 8px));
        }

        /*
         * LTR: 8px company ↔ tagline and 8px between split company lines
         * (Classic splits, Split Line, Company-to-Tagline). Divider rows keep
         * their spacing via --logo-gap-name-tagline-base, as in TTB.
         */
        .logo-presentation > .logo-html-stack--ltr {
            --logo-gap-name-tagline-base: var(--logo-gap-name-tagline);
        }

        .logo-presentation > .logo-html-stack--ltr > .logo-html-stack__texts {
            --logo-gap-name-tagline: var(--logo-gap-name-tagline-ltr, 8px);
            --logo-gap-name-lines: var(--logo-gap-name-lines-ltr, 6px);
        }

        /* Classic LTR company-name splits (generated or measured): line 1 ↔ line 2. */
        .logo-presentation > .logo-html-stack--ltr[data-layout-family="classic"] > .logo-html-stack__texts {
            --logo-gap-name-lines: var(--logo-gap-name-lines-classic-ltr, 6px);
        }

        /* Divider margin is 7px (was 4px): trim 3px here so divider → tagline stays 12px. */
        .logo-presentation > .logo-html-stack--ltr > .logo-html-stack__texts > .logo-html-stack__divider + .logo-html-stack__line {
            --logo-gap-name-tagline: calc(var(--logo-gap-name-tagline-base) - 3px);
        }

        .logo-presentation > .logo-html-stack:not(.logo-html-stack--inside-shape):not(.logo-html-stack--ltr) .logo-html-stack__text {
            max-width: none;
            overflow: visible;
            position: static !important;
            white-space: pre;
        }

        /* Two-colour name-row spans keep their inline display:inline-flex (JS). */
        .logo-presentation > .logo-html-stack:not(.logo-html-stack--inside-shape):not(.logo-html-stack--ltr) .logo-html-stack__text:not(.logo-html-stack__text--name-row) {
            display: inline-block !important;
        }

        /* LTR icon layouts: icon left + HTML text right (row). Scoped so TTB column rules never apply. */
        .logo-presentation > .logo-html-stack.logo-html-stack--ltr {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            min-width: 0;
            box-sizing: border-box;
            padding: var(--logo-stack-pad-y, 14px) var(--logo-stack-pad-x, 18px);
            pointer-events: none;
            z-index: 2;
            overflow: visible;
            transform-origin: center center;
        }

        /* LTR icon box: fixed square; icon SVG (xMaxYMid meet) scales to fit, hugging the text side. */
        .logo-presentation > .logo-html-stack--ltr .logo-html-stack__svg {
            display: flex;
            width: var(--logo-icon-box-width-ltr, 80px) !important;
            height: var(--logo-icon-box-height-ltr, 80px) !important;
            max-width: var(--logo-icon-box-width-ltr, 80px) !important;
            max-height: var(--logo-icon-box-height-ltr, 80px) !important;
            align-items: center;
            /* Hug text: leftover icon-box width sits left of the mark. */
            justify-content: flex-end;
            flex-shrink: 0;
            margin-left: 0;
            margin-right: var(--logo-gap-icon-text);
            line-height: 0;
            overflow: visible;
            order: 0;
        }

        .logo-presentation > .logo-html-stack--ltr .logo-html-stack__icon-svg {
            display: block;
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            overflow: visible;
        }

        .logo-presentation > .logo-html-stack--ltr .logo-html-stack__texts {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            text-align: left;
            width: auto;
            max-width: 100%;
            min-width: 0;
            /* Content-sized — do not grow and invent a gap beside Classic text. */
            flex: 0 1 auto;
            margin-top: 0;
            padding-top: 0;
            order: 1;
            position: relative;
            flex-shrink: 1;
            overflow: visible;
        }

        .logo-presentation > .logo-html-stack--ltr .logo-html-stack__line {
            max-width: 100%;
            width: auto;
            min-width: 0;
            align-self: flex-start;
        }

        /*
         * LTR stacks (icon + monogram): company height ÷ --logo-content-scale
         * (25px on-screen); tagline is a strict 10px box. Width stays auto.
         */
        .logo-presentation > .logo-html-stack--ltr > .logo-html-stack__texts > .logo-html-stack__line[data-role^="company-name"] {
            height: calc(var(--logo-company-box-height-ltr, 25px) / var(--logo-content-scale, 0.9));
            max-height: calc(var(--logo-company-box-height-ltr, 25px) / var(--logo-content-scale, 0.9));
            flex-shrink: 0;
        }

        .logo-presentation > .logo-html-stack--ltr > .logo-html-stack__texts > .logo-html-stack__line[data-role^="company-name"] .logo-html-stack__text {
            max-height: calc(var(--logo-company-box-height-ltr, 25px) / var(--logo-content-scale, 0.9));
        }

        /* LTR tagline: strict 10px (no content-scale inflate). */
        .logo-presentation > .logo-html-stack--ltr > .logo-html-stack__texts > .logo-html-stack__line[data-role^="tagline"] {
            height: var(--logo-tagline-box-height-ltr, 10px);
            max-height: var(--logo-tagline-box-height-ltr, 10px);
            flex-shrink: 0;
        }

        .logo-presentation > .logo-html-stack--ltr > .logo-html-stack__texts > .logo-html-stack__line[data-role^="tagline"] .logo-html-stack__text {
            max-height: var(--logo-tagline-box-height-ltr, 10px);
        }

        .logo-presentation > .logo-html-stack--ltr .logo-html-stack__divider {
            flex-shrink: 0;
            border-radius: 1px;
            align-self: flex-start;
        }

        .logo-presentation > .logo-html-stack--ltr .logo-html-stack__hyphen {
            display: block;
            flex-shrink: 0;
            align-self: center;
            border-radius: 1px;
            user-select: none;
        }

        .logo-presentation > .logo-html-stack--ltr .logo-html-stack__line--hyphens {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            align-self: flex-start;
            gap: 10px;
            width: auto;
            max-width: 100%;
            margin-left: 0;
            margin-right: 0;
        }

        .logo-presentation > .logo-html-stack--ltr .logo-html-stack__text {
            max-width: none;
            overflow: visible;
            position: static !important;
            white-space: pre;
        }

        /* Two-colour name-row spans keep their inline display:inline-flex (JS). */
        .logo-presentation > .logo-html-stack--ltr .logo-html-stack__text:not(.logo-html-stack__text--name-row) {
            display: inline-block !important;
        }

        .logo-presentation > .logo-html-stack--ltr .html-logo-text--preview {
            position: static !important;
        }

        .logo-presentation > svg.logo-html-stack__measure-svg {
            /* TTB / LTR / Inside Shape measure SVG — park off-screen, keep size for layout math. */
            position: absolute !important;
            left: -99999px !important;
            top: 0 !important;
            opacity: 0 !important;
            visibility: hidden !important;
            pointer-events: none !important;
            z-index: 0 !important;
        }

        /* Monogram letter glyphs inside the HTML-stack icon SVG must paint. */
        .logo-presentation .logo-html-stack__icon-svg text {
            opacity: 1 !important;
            pointer-events: none !important;
        }


        .grey-separator {
            border-top: 1px solid #E1E7F0;
            border-bottom: 1px solid #fff;
            width: 80%;

            margin-left: auto;
            margin-right: auto;
            margin-bottom: 30px;
            margin-top: 8px;
        }

        .logo-container-div {
            padding-top: 25px;
            text-align: center;
            opacity: 1;
            transition: opacity 0.45s ease-in;
            /* Shared with .logo-skeleton-grid — must stay identical for column count */
            display: grid;
            grid-template-columns: repeat(auto-fill, 380px);
            justify-content: center;
            column-gap: 30px;
            row-gap: 30px;
        }

        .logo-skeleton-grid {
            text-align: center;
            padding-top: 0;
            display: grid;
            grid-template-columns: repeat(auto-fill, 380px);
            justify-content: center;
            column-gap: 30px;
            row-gap: 30px;
        }

        .logo-skeleton-card {
            box-sizing: border-box;
            width: 380px;
            height: 280px;
            min-width: 380px;
            min-height: 280px;
            border-radius: 8px;
            background-color: #fff;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-left: 0;
            margin-right: 0;
            margin-bottom: 0;
            position: relative;
            vertical-align: top;
            box-shadow: 0px 3px 12px 0px rgba(125, 126, 128, 0.10);
            -webkit-box-shadow: 0px 3px 12px 0px rgba(125, 126, 128, 0.10);
            -moz-box-shadow: 0px 3px 12px 0px rgba(125, 126, 128, 0.10);
            pointer-events: none;
            overflow: hidden;
        }

        .logo-skeleton-circle {
            width: 73px;
            height: 73px;
            border-radius: 50%;
            background-color: #e8ebf0;
            flex-shrink: 0;
            margin-bottom: 25px;
        }

        .logo-skeleton-bar {
            border-radius: 999px;
            background-color: #e8ebf0;
            flex-shrink: 0;
        }

        .logo-skeleton-bar--lg {
            width: 196px;
            height: 20px;
            margin-bottom: 15px;
        }

        .logo-skeleton-bar--sm {
            width: 140px;
            height: 15px;
        }

        /* In-card placeholder: covers a rendered tile until its preview paints. */
        .logo-tile-skeleton {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 20;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            border-radius: inherit;
            pointer-events: none;
        }

        .logo-skeleton-pulse {
            -webkit-animation: logo-skeleton-flash 1.15s ease-in-out infinite;
            animation: logo-skeleton-flash 1.15s ease-in-out infinite;
        }

        @-webkit-keyframes logo-skeleton-flash {
            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.28;
            }
        }

        @keyframes logo-skeleton-flash {
            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.28;
            }
        }

        @-webkit-keyframes logo-tile-reveal {
            from {
                opacity: 0;
                -webkit-transform: translateY(18px) scale(0.985);
                transform: translateY(18px) scale(0.985);
            }

            to {
                opacity: 1;
                -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
            }
        }

        @keyframes logo-tile-reveal {
            from {
                opacity: 0;
                -webkit-transform: translateY(18px) scale(0.985);
                transform: translateY(18px) scale(0.985);
            }

            to {
                opacity: 1;
                -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
            }
        }

        /* Step-2 logo grid: skeleton cards (flashing placeholders) while regenerating */
        .loader-config.logo-skeleton-loader {
            position: relative;
            top: 15px;
            text-align: center;
            display: block;
            padding-top: 0;
            width: 100%;
            box-sizing: border-box;
        }

        .input-search {
            border: 1px solid #E2E3EF;
            background-color: #fff;
            border-radius: 4px;
            padding: 5px;
            width: 100%;
            padding-right: 35px;
            height: 35px;
            /* line-height:35px;*/
            outline: none;
            padding-left: 15px;

            -webkit-transition: border 200ms ease-in;
            -moz-transition: border 200ms ease-in;
            -o-transition: border 200ms ease-in;
            transition: border 200ms ease-in;
        }

        .input-search-etape2 {
            border: 1px solid #DFE5EB;
            background-color: #fff;
            border-radius: 35px;
            padding: 5px;
            width: 100%;
            padding-right: 165px;
            height: 60px;
            box-sizing: border-box;

            /*line-height:45px;*/
            outline: none;
            padding-left: 54px;
            color: #363F5A;
            font-family: 'Open Sans', sans-serif;
            line-height: 22px;

            -webkit-transition: border 200ms ease-in;
            -moz-transition: border 200ms ease-in;
            -o-transition: border 200ms ease-in;
            transition: border 200ms ease-in;

            /* LOG-368 #8 / Figma #685: drop shadow (0,4) blur 10, #DBDDE3 @ 50% */
            box-shadow: 0px 4px 10px 0px rgba(219, 221, 227, 0.5);
            -webkit-box-shadow: 0px 4px 10px 0px rgba(219, 221, 227, 0.5);
            -moz-box-shadow: 0px 4px 10px 0px rgba(219, 221, 227, 0.5);
            -o-box-shadow: 0px 4px 10px 0px rgba(219, 221, 227, 0.5);

            font-size: 16px;
        }

        .input-search-etape2::-webkit-input-placeholder {
            color: rgba(54, 63, 90, 0.5);
        }

        .input-search-etape2::-moz-placeholder {
            color: rgba(54, 63, 90, 0.5);
        }

        .input-search-etape2:-ms-input-placeholder {
            color: rgba(54, 63, 90, 0.5);
        }

        .input-search-etape2::placeholder {
            color: rgba(54, 63, 90, 0.5);
        }

        body.creation-logo-route .logo-design-search-loupe {
            position: absolute;
            left: 24px;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            width: 22px;
            height: 22px;
            line-height: 0;
            pointer-events: none;
            z-index: 2;
        }

        body.creation-logo-route .logo-design-search-loupe img {
            display: block;
            width: 22px;
            height: 22px;
        }


        .search-bar-container {
            position: relative;
            padding-left: 0px;
            padding-right: 0px;
            margin-left: auto;
            margin-right: auto;
            width: 825px;
            z-index: 60;
        }

        .search-bar-container-fixed {
            width: 100% !important;
            padding-top: 30px;
            padding-bottom: 10px;
            background: #F5F6F7;
            z-index: 4 !important;
            position: sticky;
            left: 0px;
            top: 50px;

        }

        /* LOG-368 #8 / Figma #683: template-selection page BG — solid #F5F6F7, no grid */
        body.creation-logo-route.etape2 {
            background-color: #F5F6F7;
            background-image: none;
        }

        body.creation-logo-route.etape2 .editor.quadrillage {
            background-image: none !important;
        }

        /* LOG-368 #8 / Figma #684: Generate hover → #00B6AB + homepage star pop */
        body.creation-logo-route .btn-search-main.logo-design-search-go-btn {
            -webkit-transition: background-color 0.25s ease;
            -moz-transition: background-color 0.25s ease;
            transition: background-color 0.25s ease;
            gap: 8px;
            padding-left: 18px !important;
        }

        body.creation-logo-route .btn-search-main.logo-design-search-go-btn.shortcut-item.ia::before {
            display: none !important;
            content: none !important;
        }

        body.creation-logo-route .btn-search-main.logo-design-search-go-btn:hover {
            background: #00B6AB !important;
        }

        body.creation-logo-route .logo-design-search-go-btn .star-animation {
            display: inline-block;
            overflow: visible;
            width: 22px;
            height: 23px;
            flex-shrink: 0;
            vertical-align: middle;
        }

        body.creation-logo-route .logo-design-search-go-btn .star-animation .star-1,
        body.creation-logo-route .logo-design-search-go-btn .star-animation .star-2,
        body.creation-logo-route .logo-design-search-go-btn .star-animation .star-3 {
            opacity: 1;
            transform: scale(1);
        }

        body.creation-logo-route .logo-design-search-go-btn:hover .star-animation .star-1 {
            -webkit-animation: logoDesignStarScaleSequence 0.6s ease-in-out;
            animation: logoDesignStarScaleSequence 0.6s ease-in-out;
            -webkit-animation-delay: 0s;
            animation-delay: 0s;
        }

        body.creation-logo-route .logo-design-search-go-btn:hover .star-animation .star-2 {
            -webkit-animation: logoDesignStarScaleSequence 0.6s ease-in-out;
            animation: logoDesignStarScaleSequence 0.6s ease-in-out;
            -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
        }

        body.creation-logo-route .logo-design-search-go-btn:hover .star-animation .star-3 {
            -webkit-animation: logoDesignStarScaleSequence 0.6s ease-in-out;
            animation: logoDesignStarScaleSequence 0.6s ease-in-out;
            -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
        }

        @-webkit-keyframes logoDesignStarScaleSequence {
            0% { -webkit-transform: scale(1); transform: scale(1); }
            25% { -webkit-transform: scale(1.25); transform: scale(1.25); }
            100% { -webkit-transform: scale(1); transform: scale(1); }
        }

        @keyframes logoDesignStarScaleSequence {
            0% { transform: scale(1); }
            25% { transform: scale(1.25); }
            100% { transform: scale(1); }
        }

        body.creation-logo-route .logo-design-search-go-btn .star-animation .star-3 {
            transform-origin: center;
        }

        body.creation-logo-route .logo-design-search-go-btn .star-animation .star-2 {
            transform-origin: center;
        }

        body.creation-logo-route .logo-design-search-go-btn .star-animation .star-1 {
            transform-origin: top;
        }

        .palette.change_icon-palette.active {
            display: flex;
            flex-direction: column;
        }

        .palette.change_icon-palette .config-block.block-text {
            flex-shrink: 0;
        }

        .change_icon-palette .change_icon-palette-body {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            padding: 0;
        }

        .change_icon-palette .search-bar-container {
            width: auto;
            margin-left: 5%;
            margin-right: 5%;
            margin-bottom: 15px;
            flex-shrink: 0;
        }

        .change_icon-palette .icons-picker-results {
            position: relative;
            flex: 1;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-y;
        }

        .change_icon-palette .logo-search img,
        .change_icon-palette .logo-demo {
            pointer-events: none;
        }

        .change_icon-palette .icons-picker-loader {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 3;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px 10px;
            background: #ffffff;
        }

        .change_icon-palette .icons-picker-scroll.scrollbar {
            height: auto !important;
            max-height: none;
            box-sizing: border-box;
            /* background-color: green; */
        }

        .palette.finition-palette.active {
            display: flex;
            flex-direction: column;
        }

        .palette.finition-palette .config-block.block-text {
            flex-shrink: 0;
        }

        .finition-palette .finition-palette-body {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            padding: 0;
        }

        .finition-palette .finition-category-tabs {
            flex-shrink: 0;
            padding-left: 16px;
            padding-right: 16px;
            margin-bottom: 10px;
        }

        .finition-palette .finition-picker-results {
            position: relative;
            flex: 1;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            touch-action: pan-y;
        }

        .finition-palette .finition-picker-scroll.scrollbar {
            height: auto !important;
            max-height: none;
            box-sizing: border-box;
        }


        .search-bar-container .etape3-search.icon-loupe2:before {
            top: -4px;
            position: relative;
        }

        .search-bar-container .icon-loupe2 {
            position: absolute;
            right: 0px;
            top: 0px;
            display: block;
            height: 100%;
            width: 45px;
            line-height: 45px;
            text-align: center;
            background-color: #0ba69d;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;

            border-bottom-left-radius: 0px !important;
            border-top-left-radius: 0px !important;
            cursor: pointer;

            box-shadow: 0px 3px 12px 0px rgba(125, 126, 128, 0.10);
            -webkit-box-shadow: 0px 3px 12px 0px rgba(125, 126, 128, 0.10);
            -moz-box-shadow: -0px 3px 12px 0px rgba(125, 126, 128, 0.10);
            -o-box-shadow: 0px 3px 12px 0px rgba(125, 126, 128, 0.10);
        }

        .search-bar-container .icon-loupe2:before {
            top: 8px;
            font-family: 'icomoon';

            color: #fff;

            font-size: 18px;
            cursor: pointer;

        }



        .type-align {
            width: 25px;
            height: 25px;
            display: inline-block;
            background-color: #cdcdcd;
            margin-right: 15px;
            vertical-align: top;
        }

        .align-bar {
            position: absolute;
            left: 50%;
            top: 90px;
            background-color: #fefefe;
            z-index: 150;

        }

        .type-align:last-child {
            margin-right: 0px;
        }

        .block-fonts .icon-taille-texte:before,
        .block-fonts .icon-interlettrage:before {
            font-size: 17px;
            position: relative;
            top: 2px;
            left: 2px;
        }

        .block-fonts .icon-interlettrage:before {
            font-size: 17px;
        }

        .icon-align {
            width: 33%;
            display: inline-block;
            margin-right: 0px;
            height: 45px;
            line-height: 45px;
            font-size: 28px;
            text-align: center;
        }

        .icon-position {
            width: 25%;
            display: inline-block;
            margin-right: 0px;
            font-size: 28px;
            text-align: center;
            vertical-align: top;
        }

        .align-block-vertical-separator {
            border-bottom: 1px solid #d3d4e5;
            /*float:left;*/
            width: 100%;
        }

        .border-align {
            border-left: 1px solid #d3d4e5;
            border-right: 1px solid #d3d4e5;
        }

        .guide {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.5;
        }

        #guide-h {
            border-top: 1px solid #57ac3e;
            width: 100%;
        }

        #guide-v {
            border-left: 1px solid #57ac3e;
            height: 100%;
        }

        .detail-shape svg {
            max-width: 100%;
            display: inline-block;
            vertical-align: middle;
            height: 45px;
            line-height: 45px;
            cursor: pointer;
            /* Let wheel/touch reach the scrollport (tiles stay clickable) */
            pointer-events: none;
        }

        .detail-shape-201 {
            border: 1px solid #DFE5EB;
            margin-bottom: 12px;
            padding-left: 12px;
            padding-right: 12px;
            padding-top: 6px;
            padding-bottom: 6px;
        }

        .detail-shape-200 svg,
        .detail-shape-202 svg {
            position: relative;
            top: 18px;
            max-width: 75%;
            height: 31px;
        }

        .detail-shape {
            box-shadow: 0px 2px 10px 0px rgba(223, 229, 235, 0.5);
            border-radius: 4px;
        }


        .detail-shape-200 svg {
            vertical-align: middle;
        }

        .detail-shape-200,
        .detail-shape-202 {
            width: 66px;
            height: 66px !important;
            line-height: 66px;

            border: 1px solid #DFE5EB;
            margin-right: 12px;
            margin-bottom: 12px;

            display: inline-block;
            text-align: center;
            vertical-align: middle;

            cursor: pointer;
        }

        .block-change-shape .detail-shape-200 {
            padding-top: 7px;
            padding-bottom: 7px;
        }


        html .logo-palette .detail-shape-203 {
            padding: 10px 5px;
            height: auto;
        }

        .detail-shape-203 {
            width: 110px;
            height: 75px;
            line-height: 75px;
            padding: 12px;
            border: 1px solid #DFE5EB;
            display: inline-block;
            text-align: center;
            margin-bottom: 12px;
            margin-right: 12px;
            cursor: pointer;
        }

        .detail-shape-203:nth-child(even) {
            margin-right: 0px;
        }

        .detail-shape-203 svg {
            width: 100%;
            /*height:75px;*/
            line-height: 75px;
        }








        .finition-container .active+.sub>.detail-shape-200 {
            height: 45px;
            padding-top: 7px;
            padding-bottom: 7px;

        }

        .finition-container .active+.sub>.detail-shape-201 {
            height: 30px;
            text-align: center;
            border: none;
            width: 210px;

        }

        .detail-shape-201 svg {
            width: 100%;
            height: 30px;
            line-height: 30px;
        }

        .finition-container .active+.sub>.detail-shape-203 {
            padding: 10px 5px;

            height: 70px;
        }

        .finition-container .active+.sub>.detail-shape-202 {
            height: 45px;
        }

        .categorie-name {
            border-bottom: 1px solid #d3d4e5;
            margin-bottom: 10px;
            padding-bottom: 5px;
            font-weight: bold;
            cursor: pointer;
            color: #242E33;
        }

        .finition-container {
            margin-bottom: 10px;
        }

        .tab-finition {
            /*	display:none;	*/
        }

        .tab-finition.active {
            display: block;

        }

        .finition-container .icon-fleche-police:before {
            display: inline-block;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        .finition-container .icon-fleche-police.active:before {
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);

            -webkit-transition-property: -webkit-transform;
            -moz-transition-property: -moz-transform;
            transition-property: transform;
            -webkit-transition-duration: 0.1s;
            -moz-transition-duration: 0.1s;
            transition-duration: 0.1s;
            -webkit-transition-timing-function: fadein;
            -moz-transition-timing-function: fadein;
            transition-timing-function: fadein;
        }

        .block-symetry .icon-symetrie-horizontal:before {
            font-size: 14px;
        }

        .block-symetry .icon-symetrie-vertical:before {
            font-size: 29px;
        }


        .accordion,
        .sub {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }


        .logo-item {
            cursor: pointer;
        }

        .logo-item.active {
            cursor: move;
        }

        .svg-editor-test {

            position: absolute;
            top: 200px;
            left: 200px;
        }

        .resizer .ui-rotatable-handle,
        .resizer .ui-resizable-handle {
            /*display:block !important;*/
            pointer-events: none !important;
        }

        .resizer.multiple.active .ui-rotatable-handle,
        .resizer.multiple.active .ui-resizable-handle {
            /*display:none !important;*/

            pointer-events: none !important;
        }

        .resizer.active .ui-rotatable-handle,
        .resizer.active .ui-resizable-handle {
            /*display:block !important;*/
            pointer-events: auto !important;
        }

        .resizer.active .ui-more-options-handle,
        .resizer.active .ui-symetrie-handle {
            pointer-events: auto !important;
        }

        /* Selected option layer above all other resizers so handles stay usable
           when the element overlaps another shape (rotate / scale / invert / +).
           Stay above .html-text-paint-layer.has-text-editing (2500) so the dashed
           border remains visible while typing; body stays pointer-events:none. */
        .editor .resizer.active {
            z-index: 2600 !important;
            opacity: 1 !important;
        }

        #full-container-svg,
        #svg-editor-canvas {
            pointer-events: none;
        }

        .logo-item {
            pointer-events: auto;
        }

        .align-block-position-separator .icon-align3:before,
        .align-block-position-separator .icon-align4:before {
            font-size: 12px;
            top: -3px;

        }

        .align-block-position-separator .icon-align1:before,
        .align-block-position-separator .icon-align2:before {
            font-size: 24px;
            /*top:-3px;*/
        }

        .align-block-position-separator .icon-svg:before {
            color: #9595A6;
        }

        .align-block-position-separator .icon-svg:hover:before,
        .align-block-position-separator .icon-svg.active:before {
            color: #0BADA4;
        }


        .border-right {
            border-right: 1px solid #cdcdcd;
        }

        /*  right click */
        .right-clic-modal {
            background-color: #fff;
            z-index: 10050;
            border: 1px solid #cdcdcd;
            list-style-type: none;
            margin: 0px;
            padding: 0px;
            border-radius: 3px;
            opacity: 0;
            pointer-events: none;
            display: none;

            -webkit-transition: opacity 0.1s ease-in-out;
            -moz-transition: opacity 0.1s ease-in-out;
            -ms-transition: opacity 0.1s ease-in-out;
            -o-transition: opacity 0.1s ease-in-out;
            transition: opacity 0.1s ease-in-out;
            width: 200px;

            box-shadow: 0px 2px 3px 1px rgba(223, 224, 230, 0.75);
            -moz-box-shadow: 0px 2px 3px 1px rgba(223, 224, 230, 0.75);
            -webkit-box-shadow: 0px 2px 3px 1px rgba(223, 224, 230, 0.75);

            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        section.etape3 .right-clic-modal {
            display: block;
        }

        body.etape3 .right-clic-modal {
            display: block;
        }

        .hide-by-opacity {
            opacity: 0 !important;
            transition: none !important;
            pointer-events: none;
        }

        .right-clic-modal.visible {
            opacity: 1;
            pointer-events: all;
        }

        /* Mobile: keep + menu usable and inside the canvas chrome */
        body.creation-logo-route.mobile-editor-enabled.etape3 .right-clic-modal {
            max-width: calc(100vw - 16px);
            max-height: calc(100vh - 94px - 64px - 16px);
            max-height: calc(100dvh - 94px - 64px - 16px);
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            box-sizing: border-box;
        }


        .right-clic-modal .svg-icon {}

        .right-clic-modal .svg-icon:before {
            color: #0BADA4;
            font-size: 13px;
            width: 22px;
            display: inline-block;
        }

        .right-clic-modal .icon-avant:before,
        .right-clic-modal .icon-arriere:before {
            font-size: 18px;
        }

        .right-clic-modal .icon-editer:before {

            font-size: 15px;
        }

        .right-clic-modal .icon-magnetism:before {
            font-size: 15px;
        }

        .right-clic-modal .item {
            padding: 0px 10px;
            position: relative;
            cursor: pointer;

        }

        .right-clic-modal .item-div {
            padding: 8px 0px;
            position: relative;
            border-bottom: 1px solid #d8daeb;
        }

        .right-clic-modal .item:last-child .item-div {
            border-bottom: none;
        }

        .right-clic-modal .item:hover {
            /*/background-color:#cdcdcd;*/
            color: #0BADA4;
        }


        .block-position {
            z-index: 1000;
            /*position:absolute;*/
            position: fixed;
            left: 50%;
            top: 75px;

        }

        .align-block-position-separator {
            margin-left: -50%;
            width: 250px;
            height: 40px;

            background-color: #ffffff;
            border: 1px solid #D9DAE6;
            border-radius: 3px;

            box-shadow: 0px 2px 3px 1px rgba(223, 224, 230, 0.75);
            -moz-box-shadow: 0px 2px 3px 1px rgba(223, 224, 230, 0.75);
            -webkit-box-shadow: 0px 2px 3px 1px rgba(223, 224, 230, 0.75);

        }

        .svg-item>* {
            -webkit-transition: opacity 0.25s ease-out;
            -moz-transition: opacity 0.25s ease-out;
            -ms-transition: opacity 0.25s ease-out;
            -o-transition: opacity 0.25s ease-out;
            transition: opacity 0.25s ease-out;
        }

        /*
    .svg-item:hover *{
        opacity:0.5;
    }

    .logo-item.dragging .svg-item:hover *
    {
        opacity:0.999;
    }


    .svg-item > *:hover
    {
        opacity:0.999;
    }*/

        .svg-item * {
            opacity: 0.99;

        }

        .svg-item:hover>* {
            opacity: 0.55;

        }

        .svg-item>*:hover {
            opacity: 0.99;
        }

        .logo-search {
            display: inline-block;
            margin-bottom: 17px;

            box-shadow: 0px 0px 4px 0px rgba(226, 227, 239, 0.65);
            -moz-box-shadow: 0px 0px 4px 0px rgba(226, 227, 239, 0.65);
            -webkit-box-shadow: 0px 0px 4px 0px rgba(226, 227, 239, 0.65);

            border: 1px solid #E2E3EF;
            border-radius: 2px;
            cursor: pointer;
        }

        .logo-search:nth-child(2n+1) {
            margin-right: 17px;
            margin-left: 15px;
        }

        .logo-search:hover {
            border: 1px solid #0FABA5;
        }

        .logo-demo {
            display: table-cell;
            width: 108px;
            height: 74px;
            padding: 10px;
            padding-top: 5px;
            padding-bottom: 5px;
            vertical-align: middle;
            text-align: center;

            -webkit-animation: fadein 0.2s ease-in alternate 1;
            -moz-animation: fadein 0.2s ease-in alternate 1;
            animation: fadein 0.2s ease-in alternate 1;
        }


        .contenteditable {
            outline: none;
        }

        .contenteditable.editing {
            cursor: text;
        }

        html .mCSB_inside>.mCSB_container {
            margin-right: 0px;
        }

        html .mCSB_scrollTools_vertical {
            right: -1px !important;
        }


        /*.edit-logo > *{
        padding-left:15px;
        padding-right:15px;
    }
    */
        .palette {
            height: 100%;
            width: 100%;
            display: block;
            /*top:-100%;*/
            left: 0px;
            position: absolute;
            opacity: 0;
            /*pointer-events:none;*/
            background-color: #ffffff;
            z-index: 1;
            padding-top: 15px;
            top: 150px;
            padding-bottom: 45px;
            display: none;

        }

        .palette.active {
            animation: aparition 250ms ease-out;
            opacity: 1;
            /*pointer-events:all;*/
            top: 0;
            display: block;
        }

        .palette>* {
            padding-left: 16px;
            padding-right: 16px;
        }



        .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
            background-color: #7C8797;
        }

        .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
            background-color: #B9C2CF;
        }

        .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
        .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
            background-color: #7C8797;
        }

        .debug-box {
            width: 250px;
            background-color: #ececec;
            position: absolute;
            right: 150px;
            top: 10px;
            /*display:none;*/
        }

        .saving {
            background: #cdcdcd !important;
            cursor: auto !important;
        }

        foreignObject div {
            height: 100%;
            display: table;
            margin: 0;
        }

        foreignObject div p {
            display: table-cell;
            vertical-align: top;
        }

        .clignoter {
            -webkit-animation: clignoter 0.55s linear alternate infinite;
            -moz-animation: clignoter 0.55s linear alternate infinite;
            animation: clignoter 0.55s linear alternate infinite;
        }

        .save-btn {
            /* background-color: #666; */
            color: #fff;
            position: fixed !important;
            top: 50%;
            left: 50%;

            /*margin-left: -63px;*/
            margin-left: 47px;

            height: 45px !important;
            line-height: 45px !important;
            font-size: 18px;
            z-index: 5;
            /* Sized for idle + "Saving your work" + spinner so the button does not jump */
            min-width: 240px;
            width: auto;
            box-sizing: border-box;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            white-space: nowrap;
            padding-left: 28px;
            margin-top: 335px;
            padding-right: 28px;
            cursor: pointer;
        }


        .text-edit-inline {
            position: absolute;
            white-space: nowrap;
            pointer-events: none;
            font-weight: normal;
            font-style: normal;
            display: inline-block;
            line-height: 63px;
            vertical-align: middle;
            text-align: left;
            transform-origin: 0px 0px 0px;
            z-index: 50;
            opacity: 0;

        }

        .text-edit-inline>div {
            /*display:inline-block;	*/
            /*background-color:rgba(220,220,220,0.5);*/
            line-height: 63px;
            /*vertical-align:middle;*/
            text-align: left;
        }

        .real-text {
            opacity: 1;
        }

        .pointer-events {
            pointer-events: auto;
        }


        .logo-item,
        .text-edit-inline {
            -webkit-animation: fadein 0.2s ease-in alternate 1;
            -moz-animation: fadein 0.2s ease-in alternate 1;
            animation: fadein 0.2s ease-in alternate 1;

        }

        /* Divider / hyphen painted as HTML (.html-logo-ornament--editor): its SVG
           stays hidden. The fadein above animates opacity, which beats the
           opacity="0" attribute and flashes the SVG artwork on first load. */
        .logo-item.logo-item--html-ornament {
            -webkit-animation: none;
            -moz-animation: none;
            animation: none;
            opacity: 0;
        }

        .config-colorpicker-container {
            float: right;
        }

        .degrade-config {
            clear: right;
        }

        .font-family-title {
            background-color: #EDEEF2;
            /*padding:5px;*/
            padding-left: 10px;
            height: 25px;
            line-height: 25px;
            position: relative;
            font-weight: bold;
            margin-top: 10px;
            margin-bottom: 5px;
        }

        .font-family-title:before {

            display: inline-block;
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);

            margin-right: 8px;
        }

        .finition-container .icon-fleche-police:before,
        .font-family-title:before {
            font-size: 11px;
            color: #242E33;
        }

        .font-family-title:hover:before {
            color: #242E33;
        }

        .font-selection-title {
            padding-top: 12px;
            padding-bottom: 12px;
            padding-left: 15px;
        }

        .personnaliser {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;

            display: inline-block;
            vertical-align: middle;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 4px;
        }

        .logo-presentation {
            transition: all 300ms;
            border: none;

        }

        .logo-presentation:hover {
            border-color: #0ba69d;
            transform: scale(1.05);
        }



        .btn-personnaliser:hover:before {
            color: #ffffff;
        }



        .btn-direct-download {
            margin-top: 36px;
        }

        .line-separator {
            border-top: 1px solid #e2e3ef;
            margin-top: 22px;
            margin-bottom: 22px;
            margin-left: 30px;
            margin-right: 30px;
        }

        .personnaliser {
            -webkit-transition: opacity 175ms ease-in;
            -moz-transition: opacity 175ms ease-in;
            -o-transition: opacity 175ms ease-in;
            -ms-transition: opacity 175ms ease-in;
            transition: opacity 175ms ease-in;
            opacity: 0;
        }

        .btn-direct-download:hover,
        .btn-personnaliser:hover,
        .btn-personnaliser:hover:before,
        .btn-direct-download:hover:before {
            color: #098C85;

        }

        .personnaliser:hover {
            opacity: 1;
        }

        .btn-personnaliser {}

        .btn-personnaliser:before,
        .btn-direct-download:before {
            color: #0BA69D;
            font-size: 20px;
            top: 4px;
            margin-right: 10px;
        }

        .btn-personnaliser:before {
            top: 2px;
        }

        /*.btn-personnaliser:hover:before, .btn-direct-download:hover:before{
        color:#0BA69D;
    }*/

        .sidebar-categorie-container ul {
            padding: 0px;
            margin: 0px;
        }

        .sidebar-categorie-container li {
            list-style: none;
            padding-left: 35px;
            position: relative;
            margin-bottom: 16px;
            cursor: pointer;

            -webkit-transition: padding-left 0.10s ease-out;
            -moz-transition: padding-left 0.10s ease-out;
            -ms-transition: padding-left 0.10s ease-out;
            -o-transition: padding-left 0.10s ease-out;
            transition: padding-left 0.10s ease-out;


        }

        .choix-categorie:before {
            font-family: 'icomoon' !important;
            position: absolute;
            width: 18px;
            font-size: 19px;
            left: 0px;
            top: 2px;
            /* Better Font Rendering =========== */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .choix-categorie:hover,
        .choix-categorie.active {
            color: #0BA69D;
            padding-left: 40px;

        }

        .step1,
        step0,
        .step4-container,
        .step4-preview-product-container {
            max-width: 1466px;
            margin-left: auto;
            margin-right: auto;
            /*	padding-bottom:30px;*/


        }


        .step4-preview-product-container {
            position: relative;
        }

        .step4-container {
            padding-bottom: 40px;
            padding-top: 20px;
        }

        .step4-preview-product img {
            vertical-align: middle;
        }

        html {
            height: 100%
        }

        /*
     .body-background{
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            z-index:0;
            background-color:#3fa9a7;

            z-index:auto;
            background-position:top center;

     }
     */
        html {
            overflow: auto;
        }

        body {
            background-attachment: fixed;
            background-color: #f9fafc;
            height: 100%;

            /*	background-image:url('/images/indeximg/bg-header2-optimise-full.jpg');


            background-size: cover;*/
            min-height: 335px;
            background-repeat: no-repeat;
            background-position: center center;
        }

        /*Edge*/
        html {
            /*overflow: hidden;*/
            /*height: 100%;   */
        }

        body {
            /*overflow: auto;*/
            /*height: 100%;*/
        }



        .background-loaded {
            /*background-image:url('/images/v2/visu-etapes-1920x1080.jpg');*/
            /*background-image:url('/images/indeximg/bg-header2-optimise-full.jpg');


            background-size: cover;
            min-height: 335px;
            background-repeat:no-repeat;
            background-position:center center;*/

            /*-webkit-animation: fadein 500ms ease-in alternate 1;
            -moz-animation: fadein 500ms ease-in alternate 1;
            animation: fadein 500ms ease-in alternate 1;	*/

        }

        body.creation-logo-route.etape4 {
            background-image: none;
            /* abs-positioned mockups extend past .step.step4 in-flow height; paint same grey on canvas */
            background-color: #F5F6F7;
        }

        body.creation-logo-route section.etape4 {
            background-color: #F5F6F7;
        }

        /*
         * Header above canvas chrome: active resizers/text peak at 2600/2500.
         * Modals, masks, and coach marks use 10000+.
         */
        .top-bar {
            z-index: 9000;
        }

        /* In-flow centering (same as pagelayout checkout) — absolute positioning prevented bar from growing with wrapped labels */
        body.creation-logo-route .creation-logo-timeline {
            display: inline-block;
            margin: 7px auto 0;
            vertical-align: top;
            pointer-events: none;
            z-index: 1;
        }

        body.creation-logo-route .creation-logo-timeline[ng-cloak] {
            display: none !important;
        }

        body.creation-logo-route .creation-logo-timeline .etape-bar li {
            line-height: 1.25 !important;
            overflow-wrap: break-word;
            word-wrap: break-word;
            pointer-events: auto;
        }

        body.creation-logo-route .creation-logo-timeline .etape-bar li a,
        body.creation-logo-route .creation-logo-timeline .etape-bar li a:hover,
        body.creation-logo-route .creation-logo-timeline .etape-bar li a:focus,
        body.creation-logo-route .creation-logo-timeline .etape-bar li a:visited {
            text-decoration: none;
        }

        body.creation-logo-route.etape4 .top-bar,
        body.preview-route-pending.creation-logo-route .top-bar {
            height: auto !important;
            min-height: 50px;
            overflow: visible;
            padding-bottom: 0;
            box-sizing: border-box;
            text-align: center;
        }

        body.creation-logo-route.etape4,
        body.preview-route-pending.creation-logo-route {
            padding-top: 66px !important;
        }

        /* Preview save: etape stays 3 but body padding assumes fixed header — beat etape3 position:relative */
        @media (min-width: 769px) {
            body.preview-route-pending.creation-logo-route .top-bar {
                position: fixed !important;
                top: 0;
                left: 0;
                width: 100%;
                z-index: 9000 !important;
            }
        }

        @media (max-width: 1100px) {
            body.creation-logo-route .creation-logo-timeline {
                display: none;
            }
        }

        body.no-info .top-bar {
            border-color: transparent;
        }

        .main-title-klasic {

            color: #FFFFFF;

            font-family: 'Klasik';

            font-size: 85px;

            letter-spacing: 1px;
            margin-top: 0px;
            margin-bottom: 0;
            font-weight: 500;

        }


        @media (max-width:1024px) {

            .icon-menu-mobile:before {
                content: "\e948" !important;
                font-size: 18px !important;
                top: 1px !important;
            }

            .left-preview {
                display: block !important;
                margin: 0 !important;
                text-align: center;
            }

            .left-preview-inside {}

            .preview-logo-laptop {
                background-image: url(/v2/images/preview-logo-container.png);
                background-position: center top;
                background-size: 100% auto;
                /*height: auto !important;
                width:100% !important;*/
                position: relative;
            }

            .preview-logo-container {
                display: block !important;
                width: auto !important;
                padding-left: 30px;
                padding-right: 30px;
            }

            .preview-logo-laptop .container-logo {
                background: none !important;
                margin: 0 !important;
                width: 100% !important;
                position: absolute !important;
                top: 0px !important;
                left: 0px !important;
            }

            .preview-logo-laptop img {
                padding-left: 13%;
                padding-right: 13%;
                padding-top: 4%;
                padding-bottom: 10%;
                /* width: 485px; */
                /* height: 303px; */
                width: 100% !important;
                height: auto !important;
                /* padding-left: 186px; */
                /* display: block; */
                display: block !important;
            }

            .preview-logo-laptop img {
                display: block !important;
            }

            .right-preview {
                display: block !important;
                width: auto !important;
                padding-left: 30px !important;
                padding-right: 30px !important;
                margin-top: 30px;
            }

            .modify-logo-btn {
                top: 81.6% !important;
                left: 13% !important;
            }

            .inscription-sidebar-container {
                display: block !important;
                width: 100% !important;
                padding-left: 80px;
                padding-right: 80px;
            }

            .inscription-container {
                margin-top: 30px;
                width: 100% !important;
                margin-left: 0px !important;
            }

            .step4-preview-product-container {
                padding-left: 30px;
                padding-right: 30px;
            }

            .filter-svg {
                position: relative !important;
                margin: 0 !important;
            }

            .preview-logo-laptop img.no-logo {
                width: auto;
                height: auto;
                position: relative !important;
                left: 0px !important;
                top: 0px !important;
                margin: 0 !important;

            }

            .preview-logo-laptop img.no-logo {
                padding-left: 27% !important;
                padding-right: 27% !important;
            }
        }




        @media (max-height:700px) {

            .small-screen-baseline {
                display: block !important;
            }

            .big-screen-baseline {
                display: none;
            }

        }

        .small-screen-baseline {
            display: none;
        }

        .main-title-klasic-responsive {
            color: #FFFFFF;

            font-family: 'Klasik';

            font-size: 45px;

            letter-spacing: 1px;
            margin-top: 0px;
            margin-bottom: 20px;
        }

        .sub-title-klasic {

            color: #FFFFFF;

            font-family: 'Klasik';

            font-size: 55px;

            letter-spacing: 1px;

            margin-top: 13px;
            margin-bottom: 5px;
            font-weight: 500;

        }

        .sub-title-klasic-sub {
            color: #FFFFFF;

            font-family: 'open sans';

            font-size: 25px;
            letter-spacing: 1px;
            font-weight: 300;
            margin-top: 10px;
            margin-bottom: 40px;
        }

        .sub-title-open {
            font-family: 'Open sans';
            font-weight: 300;
            font-size: 32px;
            color: #FFFFFF;
            margin-top: 4px;
            margin-bottom: 4px;
        }

        p.separator-point {
            letter-spacing: 16px;
            color: #FFFFFF;
            font-family: 'Klasik';
            font-size: 77px;
            text-align: center;
            margin: 14px 0 44px 0;

        }

        .button-go {

            margin-bottom: 124px;

            margin-top: 30px;
            position: relative;

        }

        .input-home {

            width: 396px;
            outline: none;
            height: 55px;
            line-height: 55px;
            border-radius: 6px 0 0 6px;

            border-right: none;

            border-left: 1px solid #009990;

            border-top: 1px solid #009990;

            border-bottom: 1px solid #009990;

            background: #FFFFFF url("/images/indeximg/crayon.png") 22px 12px no-repeat;

            font-size: 22px;

            padding: 0 0 0 70px;

            position: relative;

            z-index: 100;

            font-family: 'Open sans';
            -webkit-transition: all 125ms ease-out;
            -moz-transition: all 125ms ease-out;
            -o-transition: all 125ms ease-out;
            transition: all 125ms ease-out;

        }

        .button-go:hover .input-home,
        .button-go:hover .input-btn-go,
        .button-go:focus {
            border-color: #FFA20D;
        }

        .input-btn-go:hover {
            background-color: #F2990C;
            border-color: #F2990C !important;
        }

        .arrow-hover {
            display: inline-block;
            position: relative;
            vertical-align: top;
        }

        .arrow-hover:before {
            display: inline-block;
            content: "";

            position: absolute;
            z-index: 105;
            top: 19px;
            left: -8px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 8px 0 8px 8px;
            border-color: transparent transparent transparent #ffffff;

            -webkit-transition: left 125ms ease-out;
            -moz-transition: left 125ms ease-out;
            -o-transition: left 125ms ease-out;
            transition: left 125ms ease-out;


        }

        .arrow-hover:hover:before {
            left: 0px;
        }

        .input-btn-go {

            height: 55px;

            border-radius: 0 6px 6px 0;

            color: #FFFFFF;

            background-color: #FFA20D;

            font-size: 22px;

            border-left: none;

            border-right: 1px solid #009990;

            border-top: 1px solid #009990;

            border-bottom: 1px solid #009990;

            width: 180px;

            z-index: 102;

            position: relative;

            font-family: 'Open sans';
            outline: none;
            -webkit-transition: all 125ms ease-out;
            -moz-transition: all 125ms ease-out;
            -o-transition: all 125ms ease-out;
            transition: all 125ms ease-out;
            cursor: pointer;

        }


        .box-shadow-go {

            position: relative;

            font-family: 'Open sans';

            margin: auto;

            width: 550px;

            height: 5px;

            box-shadow: 0px 1px 0px 3px rgba(5, 79, 89, 0.16);

            -moz-box-shadow: 0px 1px 0px 3px rgba(5, 79, 89, 0.16);

            -webkit-box-shadow: 0px 1px 0px 3px rgba(5, 79, 89, 0.16);

            top: -6px;

            z-index: 10;

            -moz-border-radius: 2px;

            -webkit-border-radius: 2px;


            border-radius: 2px;

        }

        .step.step1,
        .step.step4 {
            /* padding-top:48px; */
        }

        .step.step4 {
            background: #F5F6F7;
        }

        /* .step.step4 .headline.headline-get-started{
            background: #F5F6F7;
        } */

        .step.step4 .step4-container {
            width: 100%;
            max-width: 1466px;
            position: relative;
            margin-left: auto;
            margin-right: auto;
            padding-top: 40px;
            padding-left: 24px;
            padding-right: 24px;
            padding-bottom: 72px;
        }

        /* Responsive layout (below Figma desktop frame) */
        .step.step4 .step4-container>.row {
            margin-left: 0;
            margin-right: 0;
        }

        .step.step4 .step4-container>.row>.col-md-12 {
            display: flex;
            align-items: flex-start;
            gap: 24px;
        }

        .step.step4 .step4-container .col-md-4,
        .step.step4 .step4-container .col-md-8 {
            float: none;
        }

        .step.step4 .step4-container .col-md-4 {
            flex: 0 0 480px;
            width: 480px;
        }

        .step.step4 .step4-container .col-md-8 {
            flex: 1 1 auto;
            width: auto;
            min-width: 0;
        }


        .preview-logo-container {

            display: inline-block;
            vertical-align: top;
            width: 662px;

        }

        .preview-logo-laptop {
            background-image: url('/v2/images/preview-logo-container.png');
            background-repeat: no-repeat;
            width: 662px;
            height: 387px;
            position: relative;

        }

        .preview-logo-laptop.no-logo {
            text-align: center;
        }

        .preview-logo-laptop img {
            width: 485px;
            height: 303px;
        }

        .preview-logo-laptop .container-logo {
            display: inline-block;
            margin-left: 88px;
            margin-top: 28px;
        }

        .preview-logo-laptop img.no-logo {
            width: auto;
            height: auto;
            position: absolute;
            left: 192px;
            top: 101px;
            margin-left: 88px;
            margin-top: 28px;
        }

        .btn-green-engine {
            border-radius: 4px;
            height: 30px;
            line-height: 30px;
            color: #fff;


            background: #05A59B;
            /* Old browsers */
            border: none !important
                /*background: -moz-linear-gradient(top, #0ba69d 0%, #0a948c 100%);
            background: -webkit-linear-gradient(top, #0ba69d 0%,#0a948c 100%);
            background: linear-gradient(to bottom, #0ba69d 0%,#0a948c 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ba69d', endColorstr='#0a948c',GradientType=0 );*/

        }

        .btn-green-engine:hover {
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0cb3a9+0,0a9e95+100 */
            background: #0ab3a9;
            /* Old browsers */
            /*background: -moz-linear-gradient(top, #0cb3a9 0%, #0a9e95 100%);
            background: -webkit-linear-gradient(top, #0cb3a9 0%,#0a9e95 100%);
            background: linear-gradient(to bottom, #0cb3a9 0%,#0a9e95 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0cb3a9', endColorstr='#0a9e95',GradientType=0 ); */
        }

        .inscription-container {
            display: block;
            padding: 20px;
            padding-left: 28px;
            padding-right: 28px;
            width: 100%;
            max-width: 480px;
            margin-left: auto;
            margin-right: auto;
            border-radius: 8px;
            border: 1px solid #DFE5EB;
            background: #FFFFFF;
            box-shadow: 0px 4px 15px 0px #DBDDE380;
            position: relative;

        }

        .step.step4 .inscription-container {
            width: 100%;
            max-width: 480px;
            height: auto;
            min-height: 0;
            margin-left: 0;
            margin-right: 0;
            margin-top: 0;
            margin-bottom: 28px;
            border-radius: 8px;
            border: 1px solid #DFE5EB;
            background: #FFFFFF;
            box-shadow: 0px 4px 15px 0px #DBDDE380;
            box-sizing: border-box;
            overflow: visible;
        }

        /* Large screens: tune only lower-right preview composition */
        @media (min-width: 1920px) {
            .right-letterhead-main {
                overflow: visible;
            }

            .right-mobile-preview {
                top: 58px;
                right: 42px;
                width: clamp(286px, 15.8vw, 327px);
                max-width: 327px;
                height: 392px;
            }

            .right-mobile-device {
                top: 94px;
            }

            .right-mobile-logo {
                top: 175px;
            }

            .right-mobile-credentials {
                top: 292px;
            }

            .right-envelope-overlay {
                left: auto;
                right: 3.8%;
                top: 462px;
                width: clamp(450px, 29.5vw, 507px);
                max-width: 507px;
            }

            .right-envelope-opening {
                width: 100%;
            }
        }

        @media (min-width: 2300px) {
            .right-mobile-preview {
                right: 4.2%;
                width: 327px;
            }

            .right-envelope-overlay {
                right: 4%;
                width: 507px;
            }
        }

        .inscription-section {
            margin-top: 42px;
            padding-top: 42px !important;
            border-top: 1px solid #EEF2F6;
            text-align: left;
        }

        /* First "What you get" — no top divider / extra 30px (Figma) */
        .step.step4 .inscription-section.inscription-section--after-auth {
            border-top: none;
            margin-top: 0;
            padding-top: 0 !important;
        }

        .inscription-section-title {
            font-size: 18px;
            font-weight: 600;
            color: #2F3A43;
            margin: 0 0 40px 0;
            line-height: 18px;
        }

        /* LOG-404: signed-in package — 30px top margin on "What you get" under
           the download CTA. Zero section chrome so guest signup/signin spacing
           (frm + section rules above) stays untouched. */
        .step.step4 .inscription-package-next-btn+.inscription-section {
            margin-top: 0;
            padding-top: 0 !important;
            border-top: none;
        }

        .step.step4 .inscription-package-next-btn+.inscription-section>.inscription-section-title {
            margin-top: 30px;
        }

        .inscription-checklist {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .inscription-checklist li {
            position: relative;
            padding-left: 36px;
            margin: 0 0 18px 0;
            color: #3E5059;
            font-size: 16px;
            line-height: 22px;
        }

        .inscription-checklist li:before {
            content: "";
            width: 20px;
            height: 15.56px;
            position: absolute;
            left: 0;
            top: 3px;
            background: #09A59C;
            -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2216%22%20viewBox%3D%220%200%2020%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_514_1309)%22%3E%3Cpath%20d%3D%22M7.78%2015.56L0%207.78L3.34%204.44L7.78%208.88L16.66%200L20%203.34L7.78%2015.56Z%22%20fill%3D%22%2309A59C%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_514_1309%22%3E%3Crect%20width%3D%2220%22%20height%3D%2215.56%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E") no-repeat center;
            mask: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2216%22%20viewBox%3D%220%200%2020%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_514_1309)%22%3E%3Cpath%20d%3D%22M7.78%2015.56L0%207.78L3.34%204.44L7.78%208.88L16.66%200L20%203.34L7.78%2015.56Z%22%20fill%3D%22%2309A59C%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_514_1309%22%3E%3Crect%20width%3D%2220%22%20height%3D%2215.56%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E") no-repeat center;
            -webkit-mask-size: 20px 15.56px;
            mask-size: 20px 15.56px;
        }

        .inscription-quote {
            color: #363F5A;
            font-size: 16px;
            line-height: 22px;
            margin: 0;
            position: relative;
            padding-left: 10px;
        }

        .inscription-quote:before {
            content: "“";
            position: absolute;
            left: 0;
            top: 0;
            font-size: 22px;
            line-height: 22px;
            color: #363F5A;
            opacity: 1;
        }

        .inscription-quote:after {
            content: "”";
            position: relative;
            display: inline;
            margin-left: 4px;
            top: 1px;
            font-size: 22px;
            line-height: 22px;
            color: #363F5A;
        }

        .inscription-quote-author {
            margin-top: 0;
            font-family: 'Open Sans';
            font-weight: 700 !important;
            font-style: italic;
            font-size: 16px;
            line-height: 22px;
            color: #363F5A;
            letter-spacing: 0;
            text-transform: uppercase;
        }

        .inscription-quote-box {
            width: 424px;
            max-width: 100%;
            /* Outer: 424x180 with inner content 388x132 */
            padding: 24px 18px;
            border-radius: 8px;
            border: 1px solid #DFE5EB;
            background: #FFFFFF;
            box-sizing: border-box;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .inscription-faq {
            margin-top: 18px;
            width: 424px;
            max-width: 100%;
        }

        .inscription-faq details {
            border-bottom: 1px solid #EEF2F6;
            padding: 10px 0;
            min-height: 68px;
            box-sizing: border-box;
        }

        .inscription-faq summary {
            cursor: pointer;
            list-style: none;
            color: #363F5A;
            font-size: 16px;
            line-height: 22px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 48px;
        }

        .inscription-faq summary::-webkit-details-marker {
            display: none;
        }

        .inscription-faq summary:after {
            content: "";
            width: 15px;
            height: 15px;
            background: #26A5AA;
            flex: 0 0 15px;
            margin-left: 16px;
            -webkit-mask: url("data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%2015%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%226%22%20width%3D%223%22%20height%3D%2215%22%20fill%3D%22%2326A5AA%22%2F%3E%3Crect%20y%3D%229%22%20width%3D%223%22%20height%3D%2215%22%20transform%3D%22rotate(-90%200%209)%22%20fill%3D%22%2326A5AA%22%2F%3E%3C%2Fsvg%3E") no-repeat center;
            mask: url("data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%2015%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%226%22%20width%3D%223%22%20height%3D%2215%22%20fill%3D%22%2326A5AA%22%2F%3E%3Crect%20y%3D%229%22%20width%3D%223%22%20height%3D%2215%22%20transform%3D%22rotate(-90%200%209)%22%20fill%3D%22%2326A5AA%22%2F%3E%3C%2Fsvg%3E") no-repeat center;
            -webkit-mask-size: 15px 15px;
            mask-size: 15px 15px;
            transition: transform 180ms ease;
        }

        .inscription-faq details[open] summary:after {
            transform: rotate(45deg);
        }

        .inscription-faq .answer {
            margin-top: 8px;
            color: #6b7a86;
            font-size: 14px;
            line-height: 22px;
        }

        /* Logo package options: same accordion + checkbox row as guest FAQ pattern */
        .inscription-package-next-btn {
            display: block;
            width: 100%;
            height: 52px;
            line-height: 52px;
            text-align: center;
            text-decoration: none !important;
            text-transform: uppercase;
            color: #FFFFFF !important;
            background: #11A6A1;
            border-radius: 4px;
            border: none;
            font-family: 'Open Sans';
            font-style: normal;
            font-weight: 700;
            font-size: 28px;
            letter-spacing: 0;
            box-sizing: border-box;
        }

        .inscription-package-next-btn:hover,
        .inscription-package-next-btn:focus {
            color: #FFFFFF !important;
            text-decoration: none !important;
            background: #0f9b96;
        }

        /* Right panel - first section */
        .right-top-section {
            height: 467px;
            position: relative;
            top: auto;
            left: auto;
            margin: 0 auto;
            background: #FFFFFF;
            border-radius: 8px;
            overflow: hidden;
            z-index: 0;
        }

        .right-top-section:before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: url('/v2/images/watermark-preview-opt.png');
            background-size: cover;
            /* Keep original section background, show only subtle watermark marks */
            filter: invert(1);
            mix-blend-mode: multiply;
            opacity: 0.05;
            pointer-events: none;
            z-index: 4;
        }

        .right-topbar {
            position: absolute;
            top: 27px;
            left: 45px;
            right: 27px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            z-index: 10;
            isolation: isolate;
            pointer-events: none;
        }

        .right-logo-title {
            font-family: 'Open Sans';
            font-weight: 700;
            font-size: 20px;
            line-height: 22px;
            color: #363F5A;
            min-width: 0;
            flex: 0 1 auto;
            max-width: calc(100% - 200px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: left;
            pointer-events: none;
        }

        .right-editor-btn {
            height: 40px;
            padding: 10px 16px;
            border-radius: 4px;
            border: 1px solid #DFE5EB;
            background: #FFFFFF;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: border-color 0.3s ease-in-out;
            flex: 0 0 auto;
            position: relative;
            z-index: 11;
            pointer-events: auto;
        }

        .right-editor-btn:hover {
            border-color: #05A59B;
        }

        .right-editor-btn .right-editor-label {
            font-family: 'Open Sans';
            font-weight: 700;
            font-size: 15px;
            line-height: 20px;
            color: #363F5A;
            text-transform: none;
        }

        .step.step4 .inscription-title--logged-ready {
            font-size: 28px;
            line-height: 35px;
            font-weight: 700;
            white-space: normal;
            margin: 0 0 16px;
        }
        .register-information.register-information--logged-ready {
            font-size: 15px;
            line-height: 25px;
            font-weight: 400;
            color: #363F5A;
            margin: 0 0 30px;
        }

        .step.step4 .inscription-title--preview {
            font-size: 25px;
            line-height: 35px;
            font-weight: 700;
            margin: 0 0 16px;
        }
        .step.step4 .register-information {
            font-size: 15px;
            line-height: 25px;
            text-align: center;
            width: 100%;
            max-width: 420px;
            margin: 0 auto 30px;
        }

        /* Guest signup ↔ sign-in: fade-out then swap then fade-in (both directions) */
        .step.step4 .step4-auth-panel__signup,
        .step.step4 .step4-auth-panel__signin {
            width: 100%;
            box-sizing: border-box;
            -webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
            transition: opacity 0.2s ease, transform 0.2s ease;
            opacity: 1;
        }
        .step.step4 .step4-auth-panel__signin {
            display: none;
        }
        .step.step4 .step4-auth-panel--signin .step4-auth-panel__signup {
            display: none;
        }
        .step.step4 .step4-auth-panel--signin .step4-auth-panel__signin {
            display: block;
            opacity: 1;
        }
        .step.step4 .step4-auth-panel.step4-auth-fading-out .step4-auth-panel__signup,
        .step.step4 .step4-auth-panel.step4-auth-fading-out .step4-auth-panel__signin {
            opacity: 0 !important;
            -webkit-transform: translateY(6px);
            transform: translateY(6px);
        }
        .step.step4 .step4-auth-panel.step4-auth-fading-in .step4-auth-panel__signup,
        .step.step4 .step4-auth-panel.step4-auth-fading-in .step4-auth-panel__signin {
            -webkit-animation: step4-auth-fade-in 0.28s ease both;
            animation: step4-auth-fade-in 0.28s ease both;
        }
        @-webkit-keyframes step4-auth-fade-in {
            from { opacity: 0; -webkit-transform: translateY(8px); }
            to { opacity: 1; -webkit-transform: none; }
        }
        @keyframes step4-auth-fade-in {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: none; }
        }

        .right-logo-center {
            position: relative;
            height: 100%;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 1;
            background: transparent;
            padding: 90px 0px 100px;
            box-sizing: border-box;
            max-width: 100%;
            overflow: hidden;
        }

        .right-logo-img {
            display: block;
            background: transparent;
            position: relative;
            z-index: 1;
            flex-grow: 0;
            height: auto;
            max-height: 100%;
            max-width: min(100%, 420px);
            object-fit: contain;
            opacity: 0;
            transition: opacity 0.35s ease;
        }

        .right-logo-img.right-logo-img--ready {
            opacity: 1;
        }

        .preview-logo--ready {
            opacity: 1 !important;
        }

        /* ring-resize spinner animation */
        .spinner_V8m1 {
            transform-origin: center;
            animation: spinner_zKoa 2s linear infinite
        }

        .spinner_V8m1 circle {
            stroke-linecap: round;
            animation: spinner_YpZS 1.5s ease-in-out infinite
        }

        @keyframes spinner_zKoa {
            100% {
                transform: rotate(360deg)
            }
        }

        @keyframes spinner_YpZS {
            0% {
                stroke-dasharray: 0 150;
                stroke-dashoffset: 0
            }

            47.5% {
                stroke-dasharray: 42 150;
                stroke-dashoffset: -16
            }

            95%,
            100% {
                stroke-dasharray: 42 150;
                stroke-dashoffset: -59
            }
        }

        .logo-spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            transition: opacity 0.3s ease;
            z-index: 10;
            overflow: visible;
        }

        .logo-spinner--hidden {
            opacity: 0;
        }

        /* per-section spinner position overrides */
        .right-website-laptop .logo-spinner {
            top: 112px;
        }

        .right-business-card-top .logo-spinner {
            width: 28px;
            height: 28px;
            bottom: calc(37% - 14px);
            right: calc(30% - 14px);
            top: auto;
            left: auto;
            transform: none;
        }

        .right-business-card-bottom .logo-spinner {
            width: 28px;
            height: 28px;
        }

        .right-letterhead-inner .logo-spinner {
            top: 45px;
            right: 39px;
            left: auto;
            transform: none;
        }

        .right-envelope-overlay .logo-spinner {
            bottom: 25px;
            right: calc(14% - 30px);
            top: auto;
            left: auto;
            transform: none;
        }

        /* teal spinner on light backgrounds */
        .right-logo-center .logo-spinner circle,
        .right-business-card-top .logo-spinner circle,
        .right-letterhead-inner .logo-spinner circle,
        .right-mobile-preview .logo-spinner circle {
            stroke: #05A59B;
        }

        /* white spinner on colored backgrounds */
        .right-business-card-bottom .logo-spinner circle,
        .right-envelope-overlay .logo-spinner circle {
            stroke: #ffffff;
        }

        .right-website-laptop .logo-spinner circle {
            stroke: #05A59B;
        }

        .right-swatches {
            display: flex;
            gap: 24px;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 50%;
            bottom: 70px;
            transform: translateX(-50%);
            z-index: 3;
        }

        .right-swatch {
            width: 48px;
            height: 6px;
            border-radius: 4px;
            background: #BFC7CF;
        }

        .right-website-section {
            flex: 1 1 0;
            min-width: 0;
            height: 100%;
            background: #1B75BB;
            position: relative;
            overflow: hidden;
        }

        .right-second-row {
            width: 100%;
            height: 392px;
            display: flex;
        }

        .right-website-title {
            position: absolute;
            top: 24px;
            left: 50%;
            transform: translateX(-50%);
            height: 22px;
            font-family: 'Open Sans';
            font-weight: 600;
            font-size: 20px;
            line-height: 22px;
            text-align: center;
            white-space: nowrap;
            color: #FFFFFF;
            z-index: 2;
        }

        .right-website-laptop {
            position: absolute;
            left: 50%;
            top: 80px;
            transform: translateX(-50%);
            width: 366px;
            height: 232px;
            z-index: 1;
        }

        .right-website-laptop img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        .right-website-logo {
            position: absolute;
            left: 50%;
            top: 62px;
            transform: translateX(-50%);
            width: 132px;
            max-width: 70%;
            height: auto;
            max-height: 100px;
            object-fit: contain;
            z-index: 2;
            background: transparent;
            opacity: 0;
            transition: opacity 0.35s ease;
        }

        .right-website-logo[src*="loader-download.gif"] {
            width: 68px;
            height: 68px;
            max-height: none;
        }

        .right-mobile-preview {
            position: absolute;
            top: 0;
            right: 0;
            width: 327px;
            height: 392px;
        }

        .right-mobile-title {
            position: absolute;
            top: 24px;
            left: 50%;
            transform: translateX(-50%);
            height: 22px;
            font-family: 'Open Sans';
            font-weight: 600;
            font-size: 20px;
            line-height: 22px;
            text-align: center;
            white-space: nowrap;
            color: #363F5A;
            z-index: 2;
        }

        .right-mobile-device {
            position: absolute;
            top: 100px;
            left: 50%;
            transform: translateX(-50%);
            width: 173px;
            height: 334px;
            z-index: 1;
        }

        .right-mobile-device img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        .right-mobile-logo {
            position: absolute;
            top: 168px;
            left: 50%;
            transform: translateX(-51%);
            width: clamp(104px, 7.5vw, 136px);
            height: auto;
            max-height: 118px;
            object-fit: contain;
            z-index: 2;
            background: transparent;
            opacity: 0;
            transition: opacity 0.35s ease;
        }

        .right-mobile-logo[src*="loader-download.gif"] {
            width: 56px;
            height: 56px;
            top: 192px;
        }

        .right-mobile-credentials {
            position: absolute;
            top: 300px;
            left: 50%;
            transform: translateX(-50%);
            width: 82px;
            z-index: 3;
        }

        .right-mobile-field {
            width: 82px;
            height: 16px;
            margin: 0;
            text-align: center;
            font-family: 'Open Sans';
            font-weight: 700;
            font-size: 8px;
            line-height: 16px;
            color: #363F5A;
        }

        .right-mobile-field+.right-mobile-field {
            margin-top: 10px;
        }

        .right-envelope-overlay {
            position: absolute;
            left: 360px;
            top: 460px;

            width: 507px;
            height: 236px;

            background: #76A242;
            box-shadow: 0px 4px 10px 0px #DBDDE380;
            overflow: hidden;
            z-index: 4;

            display: flex;
            justify-content: space-between;
            align-items: flex-end;

            padding: 28px 35px;
            box-sizing: border-box;
        }

        .right-envelope-opening {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 70px;
            border-bottom-left-radius: 26px;
            border-bottom-right-radius: 26px;
            z-index: 1;
            background-image: url('/v2/images/envelop-flap.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .right-envelope-company-block {
            display: grid;
            grid-template-columns: auto auto;
            column-gap: 22px;
            row-gap: 5px;
            color: #FFFFFF;
            font-family: 'Open Sans';
            letter-spacing: 0;
            text-align: left;
            z-index: 2;
        }

        .right-envelope-company-title {
            grid-column: 1 / -1;
            font-weight: 700;
            font-size: 10px;
            line-height: 10px;
            margin: 0;
        }

        .right-envelope-address {
            margin: 0;
            white-space: pre-line;
            font-weight: 400;
            font-size: 8px;
            line-height: 10px;
        }

        .right-envelope-contact {
            margin: 0;
            white-space: pre-line;
            font-weight: 400;
            font-size: 8px;
            line-height: 10px;
        }

        .right-envelope-logo {
            max-width: 28%;
            max-height: 110px;
            width: auto;
            height: auto;
            object-fit: contain;
            flex-shrink: 0;
            filter: brightness(0) invert(1) contrast(1.05);
            z-index: 2;
            opacity: 0;
            transition: opacity 0.35s ease;
        }

        .right-envelope-logo[src*="loader-download.gif"] {
            width: 56px;
            height: 56px;
            left: 394px;
            top: 154px;
            filter: none;
        }

        .right-business-section {
            flex: 1 1 0;
            min-width: 0;
            height: 100%;
            background: #76A242;
            position: relative;
            overflow: hidden;
            text-align: left;
        }

        .right-business-title {
            position: absolute;
            top: 24px;
            left: 50%;
            transform: translateX(-50%);
            height: 22px;
            font-family: 'Open Sans';
            font-weight: 600;
            font-size: 20px;
            line-height: 22px;
            text-align: center;
            white-space: nowrap;
            color: #FFFFFF;
        }

        .right-business-card-top,
        .right-business-card-bottom {
            position: absolute;
            left: 110px;
            width: 228px;
            height: 138px;
            box-shadow: 0px 4px 10px 0px #00000026;
        }

        .right-business-card-top {
            top: 68px;
            background: #FFFFFF;
        }

        .right-business-card-bottom {
            top: 224px;
            background: #1B75BB;
        }

        .right-business-info {
            position: absolute;
            top: 24px;
            left: 24px;
            width: 85px;
            height: 90px;
            margin: 0;
            white-space: pre-line;
            font-family: 'Open Sans';
            font-weight: 400;
            font-size: 8px;
            line-height: 10px;
            color: #363F5A;
            text-align: left;
        }

        .right-business-logo-top {
            position: absolute;
            top: auto;
            bottom: 13%;
            left: auto;
            right: 5%;
            transform: none;
            width: 50%;
            height: auto;
            max-height: 48%;
            object-fit: contain;
            background: transparent;
            opacity: 0;
            transition: opacity 0.35s ease;
        }

        .right-business-logo-top[src*="loader-download.gif"] {
            width: 60px;
            height: 60px;
        }

        .right-business-logo-bottom {
            position: absolute;
            top: 18%;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: auto;
            max-height: 62%;
            object-fit: contain;
            background: transparent;
            /* Make transparent logo render white on colored card */
            filter: brightness(0) invert(1) contrast(1.05);
            opacity: 0;
            transition: opacity 0.35s ease;
        }

        .right-business-logo-bottom[src*="loader-download.gif"] {
            width: 60px;
            height: 60px;
            top: 38px;
            left: 50%;
            transform: translateX(-50%);
            filter: none;
        }

        /* Right panel - Letter head section */
        .right-letterhead-main {
            height: 795px;
            background: #EDF1F2;
            position: relative;
            overflow: hidden;
        }

        .right-share-mockup-section {
            height: 170px;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding-top: 46px;
            box-sizing: border-box;
        }

        .right-share-mockup-title {
            position: static;
            height: 22px;
            font-family: 'Open Sans';
            font-weight: 600;
            font-size: 20px;
            line-height: 22px;
            letter-spacing: 0;
            text-align: center;
            color: #363F5A;
        }

        .right-share-btn {
            position: static;
            width: 112px;
            height: 40px;
            border: none;
            border-radius: 4px;
            background: #05A59B;
            padding: 10px 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            cursor: pointer;
            margin-top: 25px;
        }

        .right-share-btn svg {
            width: 18px;
            height: 15px;
            display: block;
            flex: 0 0 auto;
        }

        .right-share-btn span {
            width: 52px;
            height: 25px;
            font-family: 'Open Sans';
            font-weight: 700;
            font-size: 18px;
            line-height: 18px;
            letter-spacing: 0;
            color: #FFFFFF;
            text-align: center;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .right-letterhead-label {
            position: absolute;
            top: 24px;
            left: 275px;
            width: auto;
            max-width: none;
            height: 22px;
            font-family: 'Open Sans';
            font-weight: 600;
            font-size: 20px;
            line-height: 22px;
            text-align: center;
            color: #363F5A;
            white-space: nowrap;
        }

        .right-letterhead-section {
            position: absolute;
            top: 69px;
            left: 90px;
            width: 476px;
            height: 674px;
            background: #FFFFFF;
            box-shadow: 0px 4px 15px 0px #DBDDE380;
            overflow: hidden;
        }

        .right-letterhead-inner {
            position: absolute;
            top: 72px;
            left: 56px;
            width: 368px;
            height: 531px;
            background: #FFFFFF;
        }

        .right-letterhead-logo {
            position: absolute;
            top: 1px;
            right: -8px;
            width: 42%;
            height: auto;
            max-height: 28%;
            object-fit: contain;
            background: transparent;
            opacity: 0;
            transition: opacity 0.35s ease;
        }

        .right-letterhead-logo[src*="loader-download.gif"] {
            width: 64px;
            height: 64px;
            top: -10px;
            right: 20px;
        }

        .right-letterhead-text {
            position: absolute;
            left: 0;
            text-align: left;
            color: #363F5A;
            font-family: 'Open Sans';
            letter-spacing: 0;
        }

        .right-letterhead-title {
            top: 0;
            width: 163px;
            height: 10px;
            font-weight: 700;
            font-size: 20px;
            line-height: 10px;
        }

        .right-letterhead-ceo {
            top: 77px;
            width: 81px;
            height: 10px;
            font-weight: 700;
            font-size: 8px;
            line-height: 10px;
        }

        .right-letterhead-address-top {
            top: 97px;
            width: 76px;
            height: 20px;
            font-weight: 400;
            font-size: 8px;
            line-height: 10px;
            white-space: pre-line;
        }

        .right-letterhead-subject {
            top: 150px;
            width: 147px;
            height: 10px;
            font-weight: 700;
            font-size: 8px;
            line-height: 10px;
        }

        .right-letterhead-body {
            top: 169px;
            width: 368px;
            height: 80px;
            font-weight: 400;
            font-size: 8px;
            line-height: 10px;
        }

        .right-letterhead-name {
            top: 392px;
            width: 97px;
            height: 10px;
            font-weight: 700;
            font-size: 12px;
            line-height: 10px;
        }

        .right-letterhead-position {
            top: 405px;
            width: 54px;
            height: 10px;
            font-weight: 700;
            font-size: 8px;
            line-height: 10px;
        }

        .right-letterhead-company {
            top: 492px;
            width: 94px;
            height: 10px;
            font-weight: 700;
            font-size: 12px;
            line-height: 10px;
        }

        .right-letterhead-address-bottom {
            top: 511px;
            width: 57px;
            height: 20px;
            font-weight: 400;
            font-size: 6px;
            line-height: 10px;
            white-space: pre-line;
        }

        .right-letterhead-contact {
            top: 511px;
            left: 114px;
            width: 77px;
            height: 20px;
            font-weight: 400;
            font-size: 6px;
            line-height: 10px;
            white-space: pre-line;
        }

        /* Keep last two right-panel blocks stable on laptop widths */
        @media (min-width: 1025px) and (max-width: 1700px) {
            .right-letterhead-main {
                position: relative;
                height: 795px;
                padding: 0;
                overflow: visible;
            }

            .right-letterhead-label {
                position: absolute;
                top: 24px;
                left: 29%;
                width: auto;
                max-width: none;
                height: auto;
                transform: translateX(-50%);
                white-space: nowrap;
            }

            .right-letterhead-section {
                position: absolute;
                top: 69px;
                left: 5%;
                width: 58%;
                max-width: 476px;
                height: 674px;
            }

            .right-mobile-preview {
                position: absolute;
                top: 2px;
                right: 4.5%;
                width: 31.5%;
                max-width: 332px;
                height: 392px;
            }

            .right-mobile-device {
                top: 66px;
                width: 178px;
                height: 342px;
            }

            .right-mobile-logo {
                top: 146px;
            }

            .right-mobile-credentials {
                top: 271px;
            }

            .right-envelope-overlay {
                position: absolute;
                top: 460px;
                right: 4%;
                left: auto;
                width: 57%;
                max-width: 507px;
                margin-top: 0;
            }

            .right-envelope-opening {
                width: 100%;
            }
        }

        @media (min-width: 1025px) and (max-width: 1366px) {
            .right-letterhead-main {
                height: 760px;
            }

            .right-letterhead-section {
                left: 3.5%;
                width: 60%;
                max-width: 450px;
            }

            .right-mobile-preview {
                right: 2.2%;
                width: 32%;
                max-width: 298px;
            }

            .right-mobile-device {
                width: 168px;
                height: 322px;
                top: 74px;
            }

            .right-mobile-logo {
                top: 154px;
                width: 57%;
            }

            .right-mobile-credentials {
                top: 265px;
            }

            .right-envelope-overlay {
                right: 2%;
                width: 59%;
                max-width: 470px;
                top: 452px;
            }
        }

        .inscription-divider-ok {
            position: relative;
            margin: 14px 0 6px;
            text-align: center;
            color: #363F5A;
            font-size: 11px;
            font-family: 'Open Sans';
            font-style: normal;
            font-weight: 800;
            font-size: 14px;
            line-height: 22px;
        }

        .inscription-divider-ok:before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            border-top: 1px solid #DFE5EB;
        }

        .inscription-divider-ok span {
            position: relative;
            background: #FFFFFF;
            padding: 0 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 22px;
            min-width: 40px;
        }

        .inscription-have-account {
            margin-top: 10px;
            font-family: 'Open Sans';
            font-style: normal;
            font-weight: 400;
            font-size: 18px;
            line-height: 22px;
            text-align: center;
            color: #363F5A;
        }

        .inscription-have-account a {
            color: #0BA69D;
            text-decoration: none;
            font-weight: 400;
        }

        .inscription-have-account a:hover {
            text-decoration: underline;
        }

        @media (max-width:480px) {
            .inscription-container {
                padding-left: 18px;
                padding-right: 18px;
            }
        }

        .btn-logo-modify {
            position: absolute;
            top: 5px;
            left: 10px;
            font-size: 24px;
        }

        .inscription-sidebar-container {
            vertical-align: top;
            display: inline-block;
            width: 520px;
        }

        .input-register-txt {
            height: 40px;
            line-height: 40px;
            border-radius: 4px;
            border: 1px solid #DFE5EB;
            padding-left: 15px;
            padding-right: 15px;
            width: 100%;
            outline: none;
            font-family: 'Open Sans';
            font-style: normal;
            font-weight: 400;
            font-size: 15px;
            color: #626A80;

            -webkit-transition: border 200ms ease-in;
            -moz-transition: border 200ms ease-in;
            -o-transition: border 200ms ease-in;
            transition: border 200ms ease-in;
        }

        /* LOG-404 guest preview: text fields (Figma #1958099445) */
        .step.step4 #inscription-frm .input-register-txt,
        .step.step4 #step4-signin-frm .input-register-txt {
            background-color: #FFFFFF;
            border: 1px solid #DFE5EB;
            color: #626A80;
            box-shadow: 0 2px 5px 0 rgba(223, 229, 235, 0.25);
        }
        .step.step4 #inscription-frm .input-register-txt::placeholder,
        .step.step4 #step4-signin-frm .input-register-txt::placeholder {
            color: #626A80;
            opacity: 1;
        }

        .step4-preview-product {
            background-color: #fff;
            border-top: 1px solid #cdcdcd;
            padding-top: 35px;
            padding-bottom: 30px;
        }


        .field-register {
            display: inline-block;
            width: 100%;

        }

        /* Step4 sidebar: vertical rhythm — Figma pins 30px / 16px on preview cards */

        .step.step4 #inscription-frm .field-register.field-prenom,
        .step.step4 #inscription-frm .field-register.field-nom {
            margin-top: 0;
            /* margin-bottom: 16px; */
        }

        .step.step4 #inscription-frm .inscription-frm__name-row {
            display: flex;
            gap: 16px;
            width: 100%;
            margin-bottom: 16px;
        }

        .step.step4 #inscription-frm .inscription-frm__name-row .field-register.field-prenom,
        .step.step4 #inscription-frm .inscription-frm__name-row .field-register.field-nom {
            flex: 1 1 0;
            width: auto;
            min-width: 0;
            display: block;
            padding: 0;
            margin: 0;
        }

        /* commun.css .input-register-txt { margin-bottom: 16px } doubles field gap — drop it */
        .step.step4 #inscription-frm .input-register-txt,
        .step.step4 #step4-signin-frm .input-register-txt {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .step.step4 #inscription-frm .field-register.field-email,
        .step.step4 #step4-signin-frm .field-register.field-email {
            margin-top: 0;
            margin-bottom: 16px;
            padding-bottom: 0;
        }

        /* Password → CTA: 30px (Figma); drop default .field-password 16px stack */
        .step.step4 #inscription-frm .field-register.field-password,
        .step.step4 #step4-signin-frm .field-register.field-password {
            margin-top: 0;
            margin-bottom: 30px;
            padding-bottom: 0;
        }

        .step.step4 #inscription-frm .field-register.field-submit {
            margin-top: 0;
            padding-bottom: 0;
        }

        .step.step4 #inscription-frm .field-register {
            position: relative;
        }

        .step.step4 #inscription-frm .field-register.has-inline-error {
            margin-bottom: 0;
        }

        /* Global .input-register-txt { margin-bottom: 16px } — drop it while error is shown */
        .step.step4 #inscription-frm .field-register.has-inline-error .input-register-txt {
            margin-bottom: 0;
        }

        .step.step4 #inscription-frm .field-register.field-submit {
            padding-bottom: 0;
        }

        .step.step4 #inscription-frm .inscription-field-error {
            color: #e42323;
            display: block;
            position: static;
            font-size: 12px;
            font-weight: 400;
            line-height: 1.2;
            margin: 6px 0;
            padding: 0;
            left: auto;
            top: auto;
            background: none;
            white-space: normal;
            z-index: auto;
        }

        .step.step4 #inscription-frm .inscription-field-error.checked {
            display: none !important;
            margin: 0 !important;
            height: 0 !important;
            overflow: hidden;
            padding: 0 !important;
        }

        .step.step4 #inscription-frm .field-register.field-prenom .inscription-field-error,
        .step.step4 #inscription-frm .field-register.field-nom .inscription-field-error {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .step.step4 #inscription-frm .input-register-txt.error {
            border-color: #e42323;
        }

        .step.step4 .inscription-have-account {
            margin-top: 18px;
        }

        .step.step4 .field-info {
            margin-top: 12px;
        }

        .step.step4 .inscription-social-top {
            margin-bottom: 0;
            overflow: visible;
            position: relative;
            z-index: 5;
        }

        .step.step4 .inscription-social-top .btn-google-connect {
            margin-top: 0;
            margin-bottom: 0;
            width: 100%;
            box-sizing: border-box;
            min-height: 48px;
            height: 48px;
            line-height: 48px;
            background-color: #FFFFFF;
            border: 1px solid #DFE5EB;
            box-shadow: 0 2px 5px 0 rgba(223, 229, 235, 0.25);
            -webkit-transition: background-color 0.2s ease;
            transition: background-color 0.2s ease;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }

        .step.step4 .inscription-social-top .btn-google-connect:hover,
        .step.step4 .logo-design-google-btn-wrap:hover .btn-google-connect--visual {
            background-color: #F5F6F8;
        }

        .step.step4 .inscription-social-top .btn-google-connect__label {
            font-weight: 700;
            font-size: 15px;
            color: #626A80;
        }

        .step.step4 .inscription-social-top .btn-google-connect:before {
            width: 58px;
            height: 19px;
            background-image: url('/images/icons/google-sign-in-logo.svg');
            background-size: 58px 19px;
        }

        .step.step4 .logo-design-google-btn-wrap[data-google-auth-mode="token"] {
            overflow: visible;
            min-height: 48px;
        }

        .logo-design-google-btn-wrap {
            position: relative;
        }

        .logo-design-google-btn-wrap--blocked {
            pointer-events: none !important;
            cursor: wait !important;
        }

        /* Invisible GIS overlay for legacy hosts (login overlay). Step4 preview
           signup + signup popup use data-google-auth-mode="token" instead — Google
           blocks clicks on opacity:0 / covered GIS iframes (anti-clickjacking). */
        .logo-design-google-btn-wrap .logo-design-g_id_signin {
            display: block !important;
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            height: 48px !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: visible !important;
            opacity: 0.01 !important;
            z-index: 2 !important;
            clip: auto !important;
            white-space: normal !important;
            border: 0 !important;
        }

        .logo-design-google-btn-wrap .logo-design-g_id_signin > div,
        .logo-design-google-btn-wrap .logo-design-g_id_signin > div > div {
            width: 100% !important;
            height: 48px !important;
            max-width: none !important;
        }

        .logo-design-google-btn-wrap .logo-design-g_id_signin iframe {
            width: 100% !important;
            height: 48px !important;
            max-width: none !important;
            margin: 0 !important;
            left: 0 !important;
            top: 0 !important;
            position: absolute !important;
        }

        .logo-design-google-btn-wrap .btn-google-connect--visual {
            pointer-events: none;
            position: relative;
            z-index: 1;
        }

        /* Signup popup: real button, OAuth token client on click */
        .logo-design-google-btn-wrap[data-google-auth-mode="token"] {
            z-index: 5;
        }

        .logo-design-google-btn-wrap[data-google-auth-mode="token"] .btn-google-connect--token {
            pointer-events: auto !important;
            cursor: pointer !important;
            position: relative;
            z-index: 3;
            width: 100%;
            box-sizing: border-box;
            appearance: none;
            -webkit-appearance: none;
            font: inherit;
            text-align: left;
        }

        .logo-design-google-btn-wrap[data-google-auth-mode="token"] .btn-google-connect--token:disabled {
            cursor: wait !important;
            opacity: 0.85;
        }

        .step.step4 .inscription-divider-ok {
            margin: 20px 0;
        }

        .step.step4 .inscription-have-account {
            margin-top: 14px;
        }

        .step.step4 .field-info--preview-footer {
            margin-top: 14px;
            max-width: none;
            font-size: 14px;
            line-height: 22px;
            margin-bottom: 30px;
        }

        .step.step4 .field-info--preview-footer a {
            color: #0BA69D;
            text-decoration: none;
        }

        .step.step4 .field-info--preview-footer a:hover {
            text-decoration: underline;
        }

        .step.step4 .btn-step4-download-submit,
        .step.step4 .inscription-package-next-btn,
        .step.step4 #btn-go-paiement.btn-new-register {
            transition: background-color 0.35s ease;
        }

        .step.step4 .btn-step4-download-submit {
            touch-action: manipulation;
            cursor: pointer;
            pointer-events: auto;
            position: relative;
            z-index: 3;
        }

        .step.step4 .btn-step4-download-submit:hover,
        .step.step4 .inscription-package-next-btn:hover,
        .step.step4 .inscription-package-next-btn:focus,
        .step.step4 #btn-go-paiement.btn-new-register:hover,
        .step.step4 #btn-go-paiement.btn-new-register:focus {
            background: #0AB3A9 !important;
            background-color: #0AB3A9 !important;
            color: #FFFFFF !important;
            text-decoration: none !important;
        }

        .step.step4 .btn-step4-download-submit.btn-step4-download-submit--loading {
            background: #cdcdcd !important;
            cursor: wait !important;
            pointer-events: none;
        }

        .step4-signup-submit__loading {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .step4-signup-submit__spinner {
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255, 255, 255, 0.35);
            border-top-color: #fff;
            border-radius: 50%;
            animation: signup-save-progress-spin 0.7s linear infinite;
            flex-shrink: 0;
        }

        .step.step4 #inscription-frm .input-register-txt:disabled {
            background: #f3f4f6;
            cursor: not-allowed;
        }

        /* LOG-404: Chrome paints autofilled fields light blue, which reads as
           disabled. Keep them looking like normal, editable inputs. :not(:disabled)
           keeps the grey submitting state above. */
        .step.step4 #inscription-frm .input-register-txt:-webkit-autofill:not(:disabled),
        .step.step4 #step4-signin-frm .input-register-txt:-webkit-autofill:not(:disabled) {
            -webkit-box-shadow: 0 0 0 1000px #fff inset;
            -webkit-text-fill-color: #626A80;
            caret-color: #626A80;
            transition: border 200ms ease-in, background-color 9999s ease-out 0s;
        }

        /* Editor / template-grid signup save-progress popup (desktop) */
        .signup-save-progress-backdrop {
            display: block;
            position: fixed;
            inset: 0;
            z-index: 16000;
            background: rgba(16, 21, 26, 0.55);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .signup-save-progress-backdrop--visible {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .signup-save-progress-modal {
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            inset: 0;
            z-index: 16001;
            padding: 24px;
            overflow-y: auto;
            box-sizing: border-box;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .signup-save-progress-modal--visible {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .signup-save-progress-modal__shell {
            position: relative;
            width: 1040px;
            max-width: calc(100vw - 48px);
            margin: auto;
            flex-shrink: 0;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(54, 63, 90, 0.25);
            background: #fff;
            opacity: 0;
            -webkit-transform: translateY(10px) scale(0.98);
            transform: translateY(10px) scale(0.98);
            -webkit-transition: opacity 0.3s ease, transform 0.3s ease;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .signup-save-progress-modal--visible .signup-save-progress-modal__shell {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }

        .signup-save-progress-modal__layout {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            /* min-height: 595px; */
            min-height: 622px;
        }

        .signup-save-progress-modal__form {
            flex: 1 1 50%;
            width: 50%;
            background: #FFFFFF;
            box-sizing: border-box;
        }

        .signup-save-progress-modal__preview {
            position: relative;
            flex: 1 1 50%;
            width: 50%;
            background: #F5F6F7;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 48px 32px 32px;
            box-sizing: border-box;
        }

        .signup-save-progress-modal__card {
            position: relative;
            width: 100%;
            max-width: 100%;
            min-height: 595px;
            height: auto;
            margin: 0;
            padding: 36px 32px 28px;
            border-radius: 0;
            background: #FFFFFF;
            box-shadow: none;
            box-sizing: border-box;
            overflow: visible;
        }

        .signup-save-progress-modal__close {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 2;
            width: 55px;
            height: 55px;
            padding: 20px 24px 20px 20px;
            border: 0;
            background: transparent;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
        }

        .signup-save-progress-modal__close svg {
            width: 15px;
            height: 15px;
            flex-shrink: 0;
        }

        /* Same size/specs as template-page .logo-presentation — fully static (no click/hover/tap) */
        .signup-save-progress-modal__logo-card,
        .signup-save-progress-modal__logo-card *,
        .signup-save-progress-modal__logo-card-inner,
        .signup-save-progress-modal__logo-card-inner * {
            pointer-events: none !important;
            cursor: default !important;
            -webkit-user-select: none !important;
            user-select: none !important;
            touch-action: none !important;
            -webkit-tap-highlight-color: transparent;
        }

        .signup-save-progress-modal__logo-card {
            box-sizing: border-box;
            width: 380px;
            height: 290px;
            min-width: 380px;
            min-height: 290px;
            max-width: 100%;
            border-radius: 8px;
            /* Equal padding — template cards use extra bottom space for hover actions */
            padding: 24px;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            border: 1px solid #DAE0E8;
            box-shadow: 0px 3px 12px 0px rgba(125, 126, 128, 0.10);
        }

        .signup-save-progress-modal__logo-card:hover,
        .signup-save-progress-modal__logo-card *:hover {
            cursor: default !important;
        }

        .signup-save-progress-modal__logo-card-inner {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .signup-save-progress-modal__logo-card-inner > svg {
            display: block;
            flex-shrink: 0;
            width: 100%;
            height: 100%;
            max-width: 250px;
            max-height: 180px;
            margin: auto;
        }

        /* Editor measure text is opacity:0 — reveal it in the signup card clone. */
        .signup-save-progress-modal__logo-card-inner text {
            opacity: 1 !important;
        }

        /* Nested engine clones must not force a fixed tile size that fights centering */
        .signup-save-progress-modal__logo-card-inner > svg svg {
            width: 100%;
            height: 100%;
            max-width: none;
            max-height: none;
        }

        .signup-save-progress-modal__title {
            margin: 0 0 16px;
            /* text-align: center; */
            font-family: 'Open Sans', sans-serif;
            font-size: 25px;
            font-weight: 700;
            line-height: 35px;
            color: #363F5A;
        }

        .signup-save-progress-modal__subtitle {
            margin: 0 0 31px;
            <!-- text-align: center; -->
            font-family: 'Open Sans', sans-serif;
            font-size: 15px;
            line-height: 25px;
            color: #626A80;
        }

        .signup-save-progress-modal .inscription-social-top {
            margin-bottom: 0;
        }

        .signup-save-progress-modal .inscription-social-top .btn-google-connect {
            margin-top: 0;
            width: 100%;
            box-sizing: border-box;
            background-color: #FFFFFF;
            border: 1px solid #DFE5EB;
            box-shadow: 0 2px 5px 0 rgba(223, 229, 235, 0.25);
            -webkit-transition: background-color 0.2s ease;
            transition: background-color 0.2s ease;
        }

        .signup-save-progress-modal .inscription-social-top .btn-google-connect:hover,
        .signup-save-progress-modal .logo-design-google-btn-wrap:hover .btn-google-connect--visual {
            background-color: #F5F6F8;
        }

        .signup-save-progress-modal .inscription-social-top .btn-google-connect__label {
            font-weight: 700;
            font-size: 15px;
            color: #626A80;
        }

        .signup-save-progress-modal .inscription-social-top .btn-google-connect:before {
            width: 58px;
            height: 19px;
            background-image: url('/images/icons/google-sign-in-logo.svg');
            background-size: 58px 19px;
        }

        .signup-save-progress-modal .inscription-divider-ok {
            margin: 22px 0 21px;
        }

        .signup-save-progress-modal .inscription-divider-ok span {
            font-weight: 700;
        }

        .signup-save-progress-modal #signup-save-progress-frm .field-register,
        .signup-save-progress-modal #signup-save-signin-frm .field-register {
            display: block;
            position: relative;
            margin: 0;
            padding: 0;
        }

        .signup-save-progress-modal #signup-save-progress-frm .signup-save-progress-modal__name-row {
            display: flex;
            gap: 16px;
            width: 100%;
            margin-bottom: 0;
        }

        .signup-save-progress-modal #signup-save-progress-frm .signup-save-progress-modal__name-row .field-register.field-prenom,
        .signup-save-progress-modal #signup-save-progress-frm .signup-save-progress-modal__name-row .field-register.field-nom {
            flex: 1 1 0;
            width: auto;
            min-width: 0;
            display: block;
            padding: 0;
            margin: 0;
        }

        .signup-save-progress-modal #signup-save-progress-frm .field-register.field-email,
        .signup-save-progress-modal #signup-save-progress-frm .field-register.field-password,
        .signup-save-progress-modal #signup-save-signin-frm .field-register.field-email,
        .signup-save-progress-modal #signup-save-signin-frm .field-register.field-password {
            width: 100%;
            display: block;
        }

        /* Signup form only: drop input's global 16px mb while field error is shown */
        .signup-save-progress-modal #signup-save-progress-frm .field-register.has-inline-error {
            margin-bottom: 0;
        }

        .signup-save-progress-modal #signup-save-progress-frm .field-register.has-inline-error .input-register-txt {
            margin-bottom: 0;
        }

        .signup-save-progress-modal #signup-save-progress-frm .field-register.field-submit,
        .signup-save-progress-modal #signup-save-signin-frm .field-register.field-submit {
            width: 100%;
            margin-top: 6px;
        }

        .signup-save-progress-modal #signup-save-progress-frm .btn-signup-save-progress-submit,
        .signup-save-progress-modal #signup-save-signin-frm .btn-signup-save-progress-submit {
            width: 100%;
            margin-top: 4px;
            margin-bottom: 12px;
            border: 0;
            cursor: pointer;
            font-weight: 700;
            -webkit-transition: background-color 0.2s ease;
            transition: background-color 0.2s ease;
        }

        .signup-save-progress-modal #signup-save-progress-frm .btn-signup-save-progress-submit,
        .signup-save-progress-modal #signup-save-signin-frm .btn-signup-save-progress-submit {
            text-transform: none;
        }

        .signup-save-progress-modal #signup-save-progress-frm .btn-signup-save-progress-submit:not(:disabled):hover,
        .signup-save-progress-modal #signup-save-signin-frm .btn-signup-save-progress-submit:not(:disabled):hover {
            background-color: #0F9A92 !important;
        }

        .signup-save-progress-modal #signup-save-progress-frm .btn-signup-save-progress-submit.signup-save-progress-submit--loading,
        .signup-save-progress-modal #signup-save-progress-frm .btn-signup-save-progress-submit:disabled,
        .signup-save-progress-modal #signup-save-progress-frm .btn-signup-save-progress-submit:disabled:hover,
        .signup-save-progress-modal #signup-save-signin-frm .btn-signup-save-progress-submit.signup-save-progress-submit--loading,
        .signup-save-progress-modal #signup-save-signin-frm .btn-signup-save-progress-submit:disabled,
        .signup-save-progress-modal #signup-save-signin-frm .btn-signup-save-progress-submit:disabled:hover {
            background: #cdcdcd !important;
            background-color: #cdcdcd !important;
            color: #ffffff !important;
            cursor: wait !important;
            pointer-events: none;
        }

        .signup-save-progress-submit__loading {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .signup-save-progress-submit__spinner {
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255, 255, 255, 0.35);
            border-top-color: #fff;
            border-radius: 50%;
            animation: signup-save-progress-spin 0.7s linear infinite;
            flex-shrink: 0;
        }

        @keyframes signup-save-progress-spin {
            to {
                transform: rotate(360deg);
            }
        }

        .signup-save-progress-modal #signup-save-progress-frm .input-register-txt,
        .signup-save-progress-modal #signup-save-signin-frm .input-register-txt {
            box-shadow: 0 2px 5px 0 rgba(223, 229, 235, 0.25);
        }

        .signup-save-progress-modal #signup-save-progress-frm .input-register-txt:disabled,
        .signup-save-progress-modal #signup-save-signin-frm .input-register-txt:disabled {
            background: #f3f4f6;
            cursor: not-allowed;
        }

        .signup-save-progress-modal__close:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .signup-save-progress-modal #signup-save-progress-frm .inscription-field-error,
        .signup-save-progress-modal #signup-save-signin-frm .inscription-field-error,
        .signup-save-progress-modal #signup-save-signin-frm .signup-save-signin-error {
            display: block;
            position: static;
            left: auto;
            top: auto;
            margin: 6px 0;
            padding: 0;
            background: none;
            white-space: normal;
            font-size: 12px;
            line-height: 1.2;
            color: #e74c3c;
            z-index: auto;
        }

        /* Cleared/valid labels must not keep error margins or height */
        .signup-save-progress-modal #signup-save-progress-frm .inscription-field-error.checked,
        .signup-save-progress-modal #signup-save-signin-frm .inscription-field-error.checked {
            display: none !important;
            margin: 0 !important;
            height: 0 !important;
            overflow: hidden;
            padding: 0 !important;
        }

        .signup-save-progress-modal #signup-save-progress-frm .field-register.has-inline-error .input-register-txt {
            border-color: #e74c3c;
            margin-bottom: 0;
        }

        /* Sign-in: keep field 16px gaps; only paint the error border */
        .signup-save-progress-modal #signup-save-signin-frm .field-register.has-inline-error .input-register-txt,
        .signup-save-progress-modal #signup-save-signin-frm .input-register-txt.error {
            border-color: #e74c3c;
        }

        .signup-save-progress-modal .signup-save-progress-lost-password {
            margin-top: 0;
            font-family: 'Open Sans', sans-serif;
            font-size: 13px;
            line-height: 1.4;
            color: #626A80;
            text-align: center;
        }

        .signup-save-progress-modal .signup-save-progress-lost-password a {
            color: #0BA69D;
            text-decoration: none;
        }

        .signup-save-progress-modal .signup-save-progress-lost-password a:hover {
            text-decoration: underline;
        }

        .signup-save-progress-modal .field-info--preview-footer {
            margin-top: 14px;
            text-align: center;
            font-size: 13px;
            line-height: 22px;
            color: #363F5A;
            white-space: nowrap;
            display: block;
            width: 100%;
            max-width: none;
            margin-left: 0;
            margin-right: 0;
        }

        .signup-save-progress-modal .field-info--preview-footer a {
            color: #0BA69D;
            text-decoration: none;
        }

        .signup-save-progress-modal .field-info--preview-footer a.signup-save-progress-signin-link {
            cursor: pointer;
        }

        .signup-save-progress-modal .field-info--preview-footer a:hover {
            text-decoration: underline;
        }

        body.signup-save-progress-modal-open {
            overflow: hidden;
        }

        /* Desktop-only popup — mobile keeps the regular preview page */
        @media (max-width:768px) {

            .signup-save-progress-backdrop,
            .signup-save-progress-modal {
                display: none !important;
                visibility: hidden !important;
                pointer-events: none !important;
            }

            body.signup-save-progress-modal-open {
                overflow: auto;
            }
        }

        @media (max-width:1100px) {
            .signup-save-progress-modal__logo-card {
                width: 100%;
                min-width: 0;
                max-width: 380px;
                height: auto;
                min-height: 220px;
                aspect-ratio: 380 / 290;
            }
        }



        .field-register.field-prenom,
        .field-register.field-nom {
            width: 50%;
            display: inline-block;
            vertical-align: top;

        }

        .field-submit,
        .field-info {
            text-align: center;
            /* margin-top:25px; */
        }

        /* .field-submit{
            margin-top:25px;
        } */
        .field-info {
            font-family: 'Open Sans';
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 22px;
            color: #363F5A;
            max-width: 292px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 12px;
        }

        .field-info a {
            color: #0BA69D;
            text-decoration: none;
        }

        .left-preview {
            margin-top: 8px;
            margin-left: 35px;
            display: inline-block;

        }

        .left-preview-inside {
            display: inline-block;
        }

        .right-preview {
            vertical-align: top;
            display: inline-block;
            padding-left: 90px;
            width: 540px;
            max-width: 100%;
            box-sizing: border-box;
        }

        .logo-info-ul {
            padding: 0px;
            margin: 0px;
        }

        .border-red {
            /*border:2px solid red;*/
        }

        .temoignages-clients {
            margin-bottom: 25px;
            line-height: 25px;
            position: relative;
        }

        .temoignages-clients:before {
            content: "\e93b";
            color: #3e5059;
            font-family: 'icomoon' !important;
            font-size: 13px;
            margin-right: 5px;
            top: -2px;
            position: relative;
        }

        .temoignages-clients:after {
            content: "\e938";
            color: #3e5059;
            font-family: 'icomoon' !important;
            font-size: 13px;
            margin-left: 5px;
            top: 2px;
            position: relative;
        }

        .btn-telecharger-preview {
            margin-top: 25px;
            margin-bottom: 25px;
            color: #0BA69D;
            font-size: 16px;
            cursor: pointer;

        }

        .btn-telecharger-preview a {
            color: #0BA69D;
            text-decoration: none;
        }

        .btn-telecharger-preview a:hover {
            text-decoration: underline;
        }

        .btn-telecharger-preview:before {
            color: #0BA69D;
            font-size: 18px;
            margin-right: 16px;
            top: 3px;
        }

        .title-preview-info {
            font-size: 25px;
            font-weight: 300;
            margin-bottom: 25px;
            color: #242E33;
        }

        .logo-info-ul li {
            position: relative;
            list-style: none;
            margin-bottom: 5px;
            line-height: 23px;

        }

        .logo-info-ul li:before {
            content: "\e939";
            color: #3e5059;
            font-family: 'icomoon' !important;
            margin-right: 16px;
            font-size: 15px;
            top: 1px;
            position: relative;

        }

        .preview-50 {
            display: inline-block;
            width: 50%;
        }

        .field-prenom {
            padding-right: 10px;
        }

        .field-nom {
            padding-left: 10px;
        }

        .input-register-txt:focus {
            border: 1px solid #0BA69D;
        }

        .inscription-container .inscription-title {
            text-align: center;
            font-size: 32px;
            margin-bottom: 26px;
            font-family: 'Open Sans';
            font-style: normal;
            font-weight: 700;
            line-height: 22px;
            color: #363F5A;
            white-space: nowrap;
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
        }

        /* Preview step4 left card title (guest 25/35; logged-ready keeps its own size) */
        .step.step4 .inscription-title--preview {
            white-space: normal;
            overflow-wrap: break-word;
            word-wrap: break-word;
            /* Figma: title wraps in ~420px zone (2 lines) */
            max-width: 420px;
            width: auto;
            margin-left: auto;
            margin-right: auto;
            box-sizing: border-box;
        }

        .inscription-title.inscription-title--logged-package {
            width: 301px;
            max-width: 100%;
            margin-bottom: 30px;
            color: #363F5A;
        }

        .step.step4 .inscription-title--preview.inscription-title--logged-package {
            width: auto;
            max-width: 100%;
        }

        .register-information.register-information--logged-package {
            width: 352px;
            max-width: 100%;
            color: #363F5A;
            font-family: 'Open Sans';
            font-style: normal;
            font-weight: 600;
            font-size: 18px;
            line-height: 25px;
            letter-spacing: 0;
            text-align: center;
            margin-top: 0;
            margin-bottom: 28px;
        }

        /* Figma Preview page V3 / signed-in: card padding 30px */
        .step.step4 .inscription-container {
            padding: 30px;
        }

        .btn-connexion-title {
            right: 20px;
            top: 25px;
            position: absolute;
            color: #0BA69D;
            cursor: pointer;
        }

        .btn-connexion {
            color: #0BA69D;
            text-decoration: none;
            outline: none;
        }

        .btn-connexion:hover {
            text-decoration: underline;
        }

        .field-email {
            /* margin-top: 15px; */
        }

        .field-password {
            /* margin-top: 15px; */
            margin-bottom: 16px;
        }

        .field-password.has-inline-error {
            margin-bottom: 0;
        }


        .btn-new-register {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 48px;
            line-height: 1;
            border-radius: 4px;
            background: #05A59B !important;
            text-align: center;
            padding-left: 0;
            padding-right: 0;
            position: relative;
            text-transform: uppercase;
            cursor: pointer;
            font-family: 'Open Sans';
            font-style: normal;
            font-weight: 700;
            font-size: 18px;
            color: #FFFFFF;
            transform: translateZ(0);
            backface-visibility: hidden;
            -webkit-font-smoothing: antialiased;
            text-rendering: geometricPrecision;
        }

        .btn-new-register:before {
            display: none;

        }

        .btn-new-register:hover:before {
            color: #fff;
        }

        ::-webkit-input-placeholder {
            /* WebKit, Blink, Edge — exclude tagline field */
            color: #363F5A;
        }

        .input-box2.input-box2-tagline::-webkit-input-placeholder {
            color: #adb3b9 !important;
            font-weight: bold !important;
            -webkit-text-fill-color: #adb3b9 !important;
            /* opacity: 1 !important; */
        }

        :-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: #363F5A;
        }

        .input-box2.input-box2-tagline:-moz-placeholder {
            color: #adb3b9 !important;
            font-weight: bold !important;
            /* opacity: 1 !important; */
        }

        ::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #363F5A;
        }

        .input-box2.input-box2-tagline::-moz-placeholder {
            color: #adb3b9 !important;
            font-weight: bold !important;
            opacity: 1 !important;
        }

        :-ms-input-placeholder {
            /* Internet Explorer 10-11 */
            color: #363F5A;
        }

        .input-box2.input-box2-tagline:-ms-input-placeholder {
            color: #adb3b9 !important;
            font-weight: bold !important;
        }

        ::-ms-input-placeholder,
        .input-box2:not(.input-box2-tagline)::-ms-input-placeholder {
            /* Microsoft Edge */
            color: #363F5A;
        }

        .input-box2.input-box2-tagline::-ms-input-placeholder {
            color: #adb3b9 !important;
            font-weight: bold !important;
        }



        .input-search:focus {
            border: 1px solid #0BA69D;
        }

        @media screen and (min-width:1920px) {


            .logo-presentation {

                /*padding:40px 62px;*/
                box-sizing: border-box;
                width: 380px;
                height: 280px;
                padding: 0 15px;
                margin-left: 0;
                margin-right: 0;
            }


        }

        @media screen and (max-width:1550px) {




            .logo-container-div,
            .logo-skeleton-grid {
                grid-template-columns: repeat(auto-fill, minmax(280px, 300px));
                column-gap: 26px;
                row-gap: 40px;
            }

            .logo-presentation {
                width: 100%;
                height: auto;
                min-width: 0;
                min-height: 165px;
                padding: 14px 20px;
                margin-left: 0;
                margin-right: 0;
            }

            .logo-skeleton-card {
                width: 100%;
                height: auto;
                min-width: 0;
                min-height: 220px;
                aspect-ratio: 380 / 290;
                padding: 14px 20px;
                margin-left: 0;
                margin-right: 0;
            }

            .logo-skeleton-circle {
                width: 73px;
                height: 73px;
                margin-bottom: 25px;
            }

            .logo-skeleton-bar--lg {
                width: 196px;
                height: 20px;
                margin-bottom: 15px;
            }

            .logo-skeleton-bar--sm {
                width: 140px;
                height: 15px;
            }

            .title-step2 {
                position: relative;
                left: -10px;
            }

            .cadre-logo {
                display: none;
            }

            .btn-display-tuto {
                margin: 0px !important;
                right: 0px;
                top: 48px;
                left: auto;
                z-index: 50;
            }

            .save-btn {
                display: none;
            }



        }

        @media screen and (max-width:1170px) {
            .title-choice-proposition {
                font-size: 18px !important;
            }

        }

        .coeur-config {
            position: absolute;
            right: 4px;
            top: 10px;
            font-size: 18px;
        }

        .logo-type-badge {
            position: absolute;
            top: 8px;
            right: 8px;
            z-index: 20;
            padding: 3px 7px;
            border-radius: 4px;
            font: 700 10px/1.2 Arial, Helvetica, sans-serif;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #fff;
            pointer-events: none;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
        }

        .logo-type-badge--regular {
            background: #3d7ea6;
        }

        .logo-type-badge--letter {
            background: #c45c26;
        }

        .logo-type-badge--shape {
            background: #2f8f6b;
        }

        .logo-type-badge--monogram {
            background: #6b5b95;
        }

        /* ===== TEST ONLY: bottom-left company/tagline font chip — REMOVE BEFORE PROD ===== */
        .test-font-label-TEMP {
            position: absolute;
            bottom: 8px;
            left: 8px;
            z-index: 30;
            padding: 3px 7px;
            border-radius: 3px;
            font: 700 10px/1.25 Arial, Helvetica, sans-serif;
            letter-spacing: 0;
            color: #0b1f14;
            background: #b2f2bb;
            pointer-events: none;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
            text-transform: none;
            max-width: calc(100% - 16px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        /* ===== END TEST ONLY ===== */

        .logo-layout-batch-label {
            position: absolute;
            bottom: 8px;
            left: 8px;
            z-index: 20;
            padding: 3px 7px;
            border-radius: 4px;
            font: 700 10px/1.2 Arial, Helvetica, sans-serif;
            letter-spacing: 0.02em;
            color: #fff;
            background: rgba(36, 48, 72, 0.88);
            pointer-events: none;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
            text-transform: none;
            max-width: calc(100% - 16px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .logo-orient-label {
            position: absolute;
            bottom: 8px;
            right: 8px;
            z-index: 20;
            padding: 3px 7px;
            border-radius: 4px;
            font: 700 10px/1.2 Arial, Helvetica, sans-serif;
            letter-spacing: 0.04em;
            color: #fff;
            pointer-events: none;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
            text-transform: uppercase;
        }

        .logo-orient-label--ttb {
            background: #2f6b4f;
        }

        .logo-orient-label--ltr {
            background: #6b3d8a;
        }

        .coeur-config:before {
            color: #d9d9d9;
        }

        .favoris-coeur {
            opacity: 0;
            pointer-events: none;
        }

        .favoris-coeur.visible {
            opacity: 1;
            pointer-events: auto;
        }

        .favoris-coeur:before {
            font-size: 20px;
            color: #F00C7C;
        }

        .favoris-coeur:hover:before {
            color: #FF3899;
        }

        .coeur-config.active:before {
            font-size: 100%;
            color: #F00C7C;
        }

        .transition,
        .transition:before {
            -webkit-transition: all .6s cubic-bezier(.1, .875, .23, .98);
            -moz-transition: all .6s cubic-bezier(.1, .875, .23, .98);
            -o-transition: all .6s cubic-bezier(.1, .875, .23, .98);
            transition: all .6s cubic-bezier(.1, .875, .23, .98);
            -webkit-transition-timing-function: cubic-bezier(.1, .875, .23, .98);
            -moz-transition-timing-function: cubic-bezier(.1, .875, .23, .98);
            -o-transition-timing-function: cubic-bezier(.1, .875, .23, .98);
            transition-timing-function: cubic-bezier(.1, .875, .23, .98);
        }

        .coeur-config:hover:not(.active):before {
            color: #FF3899;
            text-decoration: none;
        }

        .coeur-config.active:hover:before {
            color: #D00A6A;
            text-decoration: none;
        }

        @media screen and (max-width:896px) {
            .logo-skeleton-loader {
                top: 40px;
                padding-left: 0;
                padding-right: 0;
            }

            .logo-container-div,
            .logo-skeleton-grid {
                grid-template-columns: 1fr;
                column-gap: 0;
                row-gap: 24px;
                justify-items: stretch;
            }

            /* Same width as search bar: full content column, no extra inset */
            .logo-container-div {
                padding-left: 0;
                padding-right: 0;
                box-sizing: border-box;
            }

            /* Logo cards + skeleton: full width of .logo-container (search bar width) */
            .logo-presentation,
            .logo-skeleton-card {
                width: 100%;
                max-width: none;
                min-width: 0;
                height: auto;
                min-height: 240px;
                aspect-ratio: 380 / 290;
                margin-left: 0;
                margin-right: 0;
                margin-bottom: 0;
                box-sizing: border-box;
            }

            .logo-presentation {
                padding: 14px 20px;
            }

            .logo-skeleton-circle {
                width: 73px;
                height: 73px;
                margin-bottom: 25px;
            }
        }

        .coeur-config {
            position: absolute;
            right: 4px;
            top: 10px;
        }

        .coeur-config:before {
            font-size: 18px;
            color: #d9d9d9;
            -webkit-transition: color 250ms ease;
            transition: color 250ms ease;
        }

        .coeur-config:hover:not(.active):before {
            color: #FF3899;
            text-decoration: none;
        }

        .coeur-config.active:before {
            color: #F00C7C;
        }

        .coeur-config.active:hover:before {
            color: #D00A6A;
            text-decoration: none;
        }

        /* Generate similar / reset templates control (top-left of logo tiles). */
        .similar-templates-btn {
            position: absolute;
            left: 10px;
            top: 10px;
            z-index: 25;
            width: 18px;
            height: 18px;
            border-radius: 4px;
            background-color: #c8cdd6;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-sizing: border-box;
            -webkit-transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
            transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease;
        }

        .similar-templates-btn:hover,
        .similar-templates-btn.is-active:hover {
            width: 24px;
            height: 24px;
            background-color: #05A59B;
        }

        .similar-templates-btn.is-active {
            background-color: #c8cdd6;
        }

        .similar-templates-btn__icon {
            display: block;
            width: 10px;
            height: 10px;
            background-color: #fff;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-size: contain;
            mask-size: contain;
            pointer-events: none;
        }

        .similar-templates-btn__icon--plus {
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23000' d='M4 0h2v4h4v2H6v4H4V6H0V4h4z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23000' d='M4 0h2v4h4v2H6v4H4V6H0V4h4z'/%3E%3C/svg%3E");
        }

        .similar-templates-btn__icon--cross {
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23000' d='M1.4 10L0 8.6 3.6 5 0 1.4 1.4 0 5 3.6 8.6 0 10 1.4 6.4 5 10 8.6 8.6 10 5 6.4z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23000' d='M1.4 10L0 8.6 3.6 5 0 1.4 1.4 0 5 3.6 8.6 0 10 1.4 6.4 5 10 8.6 8.6 10 5 6.4z'/%3E%3C/svg%3E");
        }

        /* Overlay pulse on favourite-add: same glyph as :before, fades out while scaling. */
        .coeur-config.is-pulsing:after {
            content: "\e94a";
            font-family: icomoon !important;
            font-style: normal;
            font-weight: 400;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            speak: none;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: 0;
            color: #F00C7C;
            font-size: 18px;
            pointer-events: none;
            -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
            -webkit-animation: fav-heart-pulse 1s ease-out forwards;
            animation: fav-heart-pulse 1s ease-out forwards;
        }

        @-webkit-keyframes fav-heart-pulse {
            from {
                opacity: 0.5;
                -webkit-transform: translate(-50%, -50%) scale(1);
            }

            to {
                opacity: 0;
                -webkit-transform: translate(-50%, -50%) scale(3);
            }
        }

        @keyframes fav-heart-pulse {
            from {
                opacity: 0.5;
                transform: translate(-50%, -50%) scale(1);
            }

            to {
                opacity: 0;
                transform: translate(-50%, -50%) scale(3);
            }
        }

        /* ---- Favourites onboarding tour ------------------------------------
           Two-step coach mark. Step 1 anchors to the top-right card currently
           visible in the viewport. Step 2 anchors to the sidebar favourites
           tab. Distinct from .tooltip-error, which is the hover-only
           "Add to bookmark" label. */
        .fav-tour {
            position: absolute;
            z-index: 15002;
            width: auto;
            min-width: 200px;
            max-width: 260px;
            box-sizing: border-box;
            padding: 12px;
            border-radius: 12px;
            background: #363F5A;
            box-shadow: 0 2px 10px 0 rgba(54, 63, 90, 0.10);
            font-family: Arial, Helvetica, sans-serif;
            text-align: left;
            cursor: default;
            -webkit-animation: favTourFadeIn .25s ease-in both;
            -moz-animation: favTourFadeIn .25s ease-in both;
            animation: favTourFadeIn .25s ease-in both;
        }

        /* Step 2: width set in JS so the right edge meets the edit-bar edge. */
        .fav-tour.fav-tour--step2 {
            min-width: 0;
            max-width: none;
            padding: 12px;
            box-sizing: border-box;
        }

        .fav-tour.fav-tour--out {
            -webkit-animation: favTourFadeOut .25s ease-out both;
            -moz-animation: favTourFadeOut .25s ease-out both;
            animation: favTourFadeOut .25s ease-out both;
            pointer-events: none;
        }

        .fav-tour.fav-tour--in {
            -webkit-animation: favTourFadeIn .25s ease-in both;
            -moz-animation: favTourFadeIn .25s ease-in both;
            animation: favTourFadeIn .25s ease-in both;
        }

        @-webkit-keyframes favTourFadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes favTourFadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @-webkit-keyframes favTourFadeOut {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        @keyframes favTourFadeOut {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        .fav-tour__head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
        }

        .fav-tour__title {
            flex: 1 1 auto;
            min-width: 0;
            color: #FFFFFF;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.3;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        .fav-tour__close {
            flex: 0 0 auto;
            width: 17px;
            height: 17px;
            border: 1px solid #EAEEF8;
            border-radius: 50%;
            color: #EAEEF8;
            font-size: 12px;
            line-height: 15px;
            text-align: center;
            cursor: pointer;
            transition: color .2s, border-color .2s;
        }

        .fav-tour__close:hover {
            color: #FFFFFF;
            border-color: #FFFFFF;
        }

        .fav-tour__text {
            color: #EAEEF8;
            font-size: 12px;
            line-height: 1.35;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        /* Full-bleed rule: cancels the 12px shell padding on both sides. Sits
           directly under the title row, per the Figma. */
        .fav-tour__rule {
            margin: 10px -12px;
            border-top: 1px solid #525971;
        }

        .fav-tour__foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-top: 10px;
        }

        .fav-tour__counter {
            color: #EAEEF8;
            font-size: 12px;
            line-height: 1.2;
        }

        /* Filled pill. Only the background moves on hover — the label stays dark. */
        .fav-tour__next {
            flex: 0 0 auto;
            padding: 5px 12px;
            border-radius: 6px;
            background: #EAEEF8;
            color: #363F5A;
            font-size: 12px;
            line-height: 1.2;
            cursor: pointer;
            transition: background-color .2s;
        }

        .fav-tour__next:hover {
            background: #FFFFFF;
        }

        /* Tail: soft diamond (rotated square), not a sharp CSS triangle. */
        .fav-tour__tail {
            position: absolute;
            width: 12px;
            height: 12px;
            background: #363F5A;
            border-radius: 2px;
            pointer-events: none;
            box-sizing: border-box;
        }

        /* Step 1: under the shell, pointing down at the heart icon. */
        .fav-tour__tail--down {
            top: 100%;
            margin-top: -6px;
            border: none;
            transform: translateX(-50%) rotate(45deg);
        }

        /* Step 2: on the shell's left edge, pointing left at the sidebar tab. */
        .fav-tour__tail--left {
            right: 100%;
            margin-right: -6px;
            border: none;
            transform: translateY(-50%) rotate(45deg);
        }

        /* CLS: h1.title-choice-proposition's 40px top margin collapsed out of the
           (static, transparent) step section into <body>, so the section/body boxes
           jumped 40px while the intro loader was up (once when step 2 appeared, again
           when .hide-scrollbar-y toggled body overflow). A block formatting context
           keeps that margin inside: no visible element moves. Steps 1–2 only (load). */
        body.creation-logo-route > section.etape1,
        body.creation-logo-route > section.etape2 {
            display: flow-root;
        }