.container-module-numero-rue {
  /*font-family: "Roboto", sans-serif;*/
  margin: 0;
  padding: 0;
  background-color: #fff;
  color: #333;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.container-module-numero-rue .carousel {

  margin: 20px 0;
  position: relative;
}

.container-module-numero-rue .carousel .inner-slider:not(.slick-initialized) {
 opacity:0;
}

.container-module-numero-rue .carousel img {
max-height: 120px;
object-fit: cover;
float:left;
}

.carousel  .slick-slide {
    margin-left:27px;
  }


 .carousel  .slick-list {
    margin-left:-27px;
  } 
.container-module-numero-rue .carousel .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em;
  color: #333;
  cursor: pointer;
  z-index: 1;
}
.container-module-numero-rue .carousel .arrow.left {
  left: 10px;
}
.container-module-numero-rue .carousel .arrow.right {
  right: 10px;
}
.container-module-numero-rue .section {
  border-top: 1px solid #ccc;
  padding: 20px 0;
}
.container-module-numero-rue .section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.container-module-numero-rue .section-title h2 {
  margin: 0;
}
.container-module-numero-rue .section-title h2 em {
    font-size: 18px;
}
.container-module-numero-rue .section-content {
  display: none;
  padding: 20px 0;
}
.container-module-numero-rue .input-section input {
  width: 100%;
  padding: 10px;
  font-size: 2em;
  text-align: center;
  border: 1px solid #ccc;
  margin: 10px 0;
}
.container-module-numero-rue .options {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
}
.container-module-numero-rue .options label {
  flex: 1 1 100%;
  margin: 10px 0;
}
.container-module-numero-rue .options input {
  margin-right: 10px;
}
.container-module-numero-rue .save-button {
  display: block;
  margin: 20px 0;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
}


.container-module-numero-rue .order-summary {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 20px 0;
}
.container-module-numero-rue .order-summary h3 {
  margin-top: 0;
}
.container-module-numero-rue .order-summary p {
  margin: 5px 0;
}
.container-module-numero-rue  .edit-link {
  color: #dd901c;
  cursor: pointer;
}
.container-module-numero-rue .add-to-cart {
  display: block;
  margin: 20px 0;
  padding: 10px 20px; 
  background-color: #dd901c;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
}
.container-module-numero-rue .price {
  color: #dd901c;
  font-size: 1.5em;
}
.container-module-numero-rue .reviews {
  color: #dd901c;
}
.container-module-numero-rue .details {
  margin: 20px 0;
}
.container-module-numero-rue .details h4 {
  margin: 10px 0;
}
.container-module-numero-rue .details p {
  margin: 5px 0;
}
.container-module-numero-rue .slider-container {
  display: flex;
  position: relative;
  width: 100%;
  align-items: center;
}
.container-module-numero-rue .slider {
  width: 50%;
  background-color: transparent;
  border:1px solid #ddd;
  cursor: pointer;
  position: relative;
}
.container-module-numero-rue .slider .inner-slider:not(.slick-initialized) {
    opacity:0;
}
.container-module-numero-rue .slider img {
  width: 100%;
  height: auto;
  max-height: 400px;
    object-fit: contain;
    min-width: 460px;
}
.container-module-numero-rue .slider .arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em;
  color: #fff;
  cursor: pointer;
}
.container-module-numero-rue .slider .arrow.left {
  left: 10px;
}
.container-module-numero-rue .slider .arrow.right {
  right: 10px;
}


.container-text-input {
  display: flex;
  justify-content: space-between;

}
.container-text-input .left, .container-text-input .right {
  width: 48%;
}

.container-text-input .right {
  padding-left: 20px;
}

body.text-input-is-votre-numero-de-maison  .container-text-input .input-box textarea {
     font-size: 75px;
}

.container-text-input .input-box {
    line-height: 130px;
    background-color: #f0f0f0;
    padding: 10px;
    text-align: center;
    font-size: 91px;
    color: #666;
    margin-bottom: 20px;
    padding-bottom: 0;
    padding-top: 0;
}

.container-text-input .input-box textarea {
    width: 100%;
    height: 100px;
    border: none;
    background-color: #f0f0f0;
    color: #666;
    text-align: center;
    margin-bottom: 0px;
    line-height: 1;
    margin-top: 30px;
}
.container-text-input .section-title {
  font-weight: bold;
  margin-bottom: 10px;
      font-size: 15px;
      cursor:auto;
}
.container-text-input h2.section-title {
  font-size: 24px;
}
.container-text-input .options {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.container-text-input .option {
  margin-right: 20px;
  margin-bottom: 10px;
}
.container-text-input .option input {
  margin-right: 5px;
}
.container-text-input .learn-more {
  display: inline-block;
  margin-left: 10px;
  color: #666;
  font-size: 14px;
  cursor: pointer;
}
.container-text-input .dropdown {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.container-text-input .dropdown select {
  margin-left: 10px;
}
.container-text-input .price {
  color: #dd901c;
  font-size: 24px;
  margin-bottom: 10px;
}
.container-text-input .add-to-cart {
  background-color: #dd901c;
  color: #fff;
  padding: 15px 20px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.add-to-cart-disabled .add-to-cart{
    opacity:0.3;
    pointer-events:none;
}

.container-text-input .add-to-cart {
        display: inline-block;

}
.add-to-cart-fav {
   margin-left: 12px!important;
}
.container-text-input .add-to-cart-go-checkout {
    margin-left: 15px;
}
.container-module-numero-rue .add-to-cart {
    display: inline-block;
}

.container-module-numero-rue .add-to-cart-go-checkout {
    margin-left: 15px;
}

.container-text-input .add-to-cart i {
  /*margin-left: 10px;*/
}
.container-text-input .reviews {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.container-text-input .reviews i {
  color: #dd901c;
  margin-right: 5px;
}
.container-text-input .reviews span {
  margin-left: 5px;
}
.container-text-input .details {
  border-top: 1px solid #ddd;
  padding-top: 10px;
}
.container-text-input .details div {
  margin-bottom: 10px;
  cursor: pointer;
}
.container-text-input .details div i {
  margin-right: 5px;
  
}
.detail_title {
    font-weight: bold;
}
.container-text-input .details-content {
  display: none;
  margin-left: 20px;
  margin-top: 10px;
    font-weight: 400;
}
.container-text-input .row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
      margin: 0;
}
.container-text-input  #color-picker {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    }
.container-text-input .column {
  flex: 1;
  margin-right: 20px;
}
.container-text-input .column:last-child {
  margin-right: 0;
}


#sns_content .container {
        width: 100% !important;
    }

.container-module-numero-rue .section {
        padding: 20px 20px;
}
.container-module-numero-rue .section.black {
    background: #000;
   
     border: none;
}
.container-module-numero-rue .section.black h2 {
 color: #FFF!important;;
 }
.container-module-numero-rue .section.black .fa-chevron-down {
     color: #FFF!important;;
}
.container-module-numero-rue .section.first-section { 
margin-top:20px;
    border-top:0px solid transparent;
}
#color-picker.in-guide {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
}
.in-guide .color-bubble {
    width: 45px;
    height: 45px;
    border-radius: 0;
}
.options-polices123 {
        font-size: 40px;
}

.container-module-numero-rue .save-button{
    background-color: #dd901c;
}
.container-text-input .avec-fixation-wrapper{
        margin-bottom: 20px;
}
.learn-more:not(.learn-more-font) {
        background: #ddd;
    border-radius: 100%;
    aspect-ratio: 1 / 1;
    display: block;
    width: 20px;
    height: 19px;
    text-align: center;
    line-height: 21px;
}

.contenu_explicatif {
        margin-bottom: 20px;
}
.container-module-numero-rue .slider .slick-track{
    display: flex;
    flex-wrap: wrap;
    place-content: center;
    align-items: center;
}
.container-module-numero-rue .height-section {
  text-align: left;
}
.container-module-numero-rue .height-section .options-container {
  display: flex;
  width: 100%;
  gap: 30px;
}
.container-module-numero-rue .height-section .column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.container-module-numero-rue .height-section .column h3 {
  margin-bottom: 15px;
  width: 100%;
  padding-bottom: 5px;
}
.container-module-numero-rue .height-section label {
  display: block;
  margin-bottom: 8px;
  text-align: left;
  cursor: pointer;
}
.container-module-numero-rue .height-section label:hover {
  color: #666;
}
.container-module-numero-rue .height-section input[type=radio] {
  margin-right: 8px;
}
.clone {
        width: 50%;
       
}
@media (max-width: 1023px) {
   .clone {
        width: 100%;
        margin-top:30px;
       
} 
}

/* Lightbox styles */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
}

.lightbox.active {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}


/* Style pour la croix de fermeture */
.lightbox .close {
 position: absolute;
    top: 50px;
    right: 20px;
    font-size: 4rem;
    color: #fff;
    cursor: pointer;
    z-index: 1001;
    font-family: Arial, sans-serif;
    transition: transform 0.2s ease;
    opacity: 1;
}

.lightbox .close:hover {
  transform: scale(1.2);
}

a.cta {
    background-color: #000;
    color: #fff;
    padding: 9px 20px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    margin-bottom: 10px;
    width: 100%;
    border: 3Px solid rgb(227, 68, 68);
}



 .text-align-center {
     text-align:center;
         max-width: 100%;
    text-align: center;
    white-space: break-spaces;
 }
  
        #fontSelector { 
            width: 100%; 
            border: 1px solid #ccc; 
              z-index: 999999;
            cursor: pointer; 
            height: 38px; 
            overflow:hidden;
            position:relative;
              cursor: pointer; 
        } 



        .font-options { 
            position: absolute; 
            top: 100%; 
            left: 0; 
            width: 100%; 
            background-color: white; 
           
           
            z-index: 10; 
        } 
         .font-option {
           outline: 1px solid #eee; 
         }
        
         .font-option.selected { 
           outline: none;
         }

         #fontSelector.open {
        overflow:visible;
    }
      

        #fontSelector .font-option { 
            display: flex; 
            align-items: center; 
            padding: 5px; 
            border-bottom: 1px solid #eee; 
             background-color: white; 
        } 
 

        #fontSelector .font-option:last-child { 
            border-bottom: none; 
        } 

 
       #fontSelector .font-option span {
    font-size: 26px;
    margin-left: 10px;
    line-height: 1.2;
        } 


#image-preview {
    border: 1px solid #ccc;
    width: 600px;
    height: 400px;
    position: relative;
    overflow: hidden;
    user-select: none; 
}

@media (max-width:768px) {
    #image-preview {
        height: 50vw!important;
    }
    #image-preview.preview {
        height: 100vw !important;
    }
}

#text-overlay {
    position: absolute;
    color: #fff;
    font-size: 40px;
    white-space: nowrap;
    cursor: move;
     user-select: none; 
}

    .font_preview_wrapper    form {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            /* box-shadow: 0 0 10px rgba(0,0,0,0.1);
           max-width: 1000px;*/
            margin: auto;
        }
     .font_preview_wrapper     textarea, .font_preview_wrapper  input:not([type='radio']) {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .font_preview_wrapper  select {
            width: 100%;
            height:30px;

            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .font_preview_wrapper  input[type='submit'] {
            background-color: #ff9b1a;
            color: white;
            border: none;
            cursor: pointer;
            padding: 12px;
            width: 100%;
            font-size: 16px;
        }
        .font_preview_wrapper input[type='submit']:hover {
            background-color: #e8880e;
        }
         .font_preview_wrapper .notice {
            color: red;
            font-size: 14px;
            margin-bottom: 20px;
            font-weight:bold;

        }
        
#color-picker {
    display: flex;
    gap: 5px;
}

.color-bubble {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.color-bubble:hover , .color-bubble.active {
    transform: scale(1.1);
    border: 4px solid green;
}

.fake-color-bubble {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
    background-color:white; color:black;font-weight:600;
    position:relative;
}
.fake-color-bubble > span {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
}

.fake-color-bubble:hover , .fake-color-bubble.active {
    transform: scale(1.1);
    border: 4px solid green;
}

/* The thumbnails are laid out by the wrapper's gap, so they carry no margin of their own. */
.background-select-v2-wrapper {
  clear: both;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.background-select-v2-square {
    width: 100px;
    height: 100px;
    flex: 0 0 auto;
    margin: 0;
    background-size: cover;
    cursor:pointer;
    /* Transparent by default and inside the box, so marking a thumbnail active never resizes it. */
    box-sizing: border-box;
    border: 2px solid transparent;
}

.background-select-v2-square:hover {
    border-color: rgba(221, 144, 28, 0.5);
}

.background-select-v2-square.active {
    border-color: #dd901c;
}
.fake-background-select-v2-square .plus-detail{
    font-size: 10px;
    text-align: center;
    position: absolute;
    width: 100px;
    line-height: 1.1;
    bottom: 5px;
}
.fake-background-select-v2-square {
    position: relative;
    width: 100px;
    height: 100px;
    flex: 0 0 auto;
    margin: 0;
    background-size: cover;
    /* Same border box as the thumbnails, so the row lines up whatever the border. */
    box-sizing: border-box;
    border: 2px solid #ddd;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    font-size: 30px;
    cursor: pointer;
}

.fake-background-select-v2-square:hover i  , .fake-background-select-v2-square.active i {
    transform: scale(1.1);
    color:#168037;
}
#preview {
  font-size:16px;
}
#preview.loading {
  opacity: 0.5;
    pointer-events: none;
    position:relative;
}



label[for='custom-background'] {
        margin-top: 20px;
}

#custom-background {
     padding: 20px 20px;
    padding-left: 45px;
    background-size: 30px auto;
        background-repeat: no-repeat;
    background-position: 10px center;

  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHdpZHRoPSI0OCI+PHBhdGggZD0iTTM2LjUgMTcuMVEzNS44NSAxNy4xIDM1LjQyNSAxNi42NzVRMzUgMTYuMjUgMzUgMTUuNlYxMy4wNUgzMi40NVEzMS44IDEzLjA1IDMxLjM3NSAxMi42MjVRMzAuOTUgMTIuMiAzMC45NSAxMS41NVEzMC45NSAxMC45IDMxLjM3NSAxMC40NzVRMzEuOCAxMC4wNSAzMi40NSAxMC4wNUgzNVY3LjVRMzUgNi44NSAzNS40MjUgNi40MjVRMzUuODUgNiAzNi41IDZRMzcuMTUgNiAzNy41NzUgNi40MjVRMzggNi44NSAzOCA3LjVWMTAuMDVINDAuNTVRNDEuMiAxMC4wNSA0MS42MjUgMTAuNDc1UTQyLjA1IDEwLjkgNDIuMDUgMTEuNTVRNDIuMDUgMTIuMiA0MS42MjUgMTIuNjI1UTQxLjIgMTMuMDUgNDAuNTUgMTMuMDVIMzhWMTUuNlEzOCAxNi4yNSAzNy41NzUgMTYuNjc1UTM3LjE1IDE3LjEgMzYuNSAxNy4xWk0xMy41NSAzMy45SDM0LjVRMzUgMzMuOSAzNS4yIDMzLjVRMzUuNCAzMy4xIDM1LjEgMzIuN0wyOS40IDI1LjFRMjkuMTUgMjQuOCAyOC44IDI0LjhRMjguNDUgMjQuOCAyOC4yIDI1LjFMMjIuNDUgMzIuNjVMMTguMzUgMjcuMjVRMTguMSAyNi45IDE3Ljc1IDI2LjlRMTcuNCAyNi45IDE3LjE1IDI3LjI1TDEyLjk1IDMyLjdRMTIuNjUgMzMuMSAxMi44NSAzMy41UTEzLjA1IDMzLjkgMTMuNTUgMzMuOVpNOSA0MlE3LjggNDIgNi45IDQxLjFRNiA0MC4yIDYgMzlWOVE2IDcuOCA2LjkgNi45UTcuOCA2IDkgNkgyNy45NVYxNS44NVEyNy45NSAxNi41IDI4LjM3NSAxNi45MjVRMjguOCAxNy4zNSAyOS40NSAxNy4zNUgzMC43VjE4LjZRMzAuNyAxOS4yNSAzMS4xMjUgMTkuNjc1UTMxLjU1IDIwLjEgMzIuMiAyMC4xSDQyVjM5UTQyIDQwLjIgNDEuMSA0MS4xUTQwLjIgNDIgMzkgNDJaIi8+PC9zdmc+')
}

.instruction {
    font-family: Poppins;
    font-size: 15px;
  
    text-align: center;
   
}

#image-preview.portrait {
    width: 500px !important;
    height: 700px !important;
    max-width: 100%;
    margin: auto;
    margin-bottom: 20px;
}

.sans-fixation-wrapper, .avec-fixation-wrapper, .fifty_fifty {
    width:50%;
    float:left;
    margin: 0;

}

.color-edition-picker {
      display:flex;
}
.show_message.avec_f {
    display:none;
}

@media(max-width: 1024px) {
        .container-text-input .left, .container-text-input .right {
        width: 100%;
        padding:0;
    }
    .container-text-input .right {
            padding-top: 30px;
    border-top: 1px solid #ddd;
    margin-top: 30px;
    }
    .container-text-input {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.container-module-numero-rue .slider-container {
        flex-direction: column;
}

.container-module-numero-rue .slider {
    width: 100%;
            margin-top: 50px;
  
}
.container-module-numero-rue .options {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.container-text-input .row {
        flex-direction: column;
}

.container-module-numero-rue .slider img {
                max-height: 30vh;
        object-fit: contain;
        min-width: auto;
}


}

@media (max-width:600px) {
    .container-text-input .input-box {
    line-height: 1;
    background-color: #f0f0f0;
    padding: 0 10px;
    text-align: center;
    font-size: 42px;
    color: #666;
    margin-bottom: 20px;
}

/* One line of text, with exactly 20px of air above and below it. The height is the content box
   (content-box sizing), so the padding is the whole margin and the field follows the font size. */
.container-text-input .input-box textarea {
    box-sizing: content-box;
    height: 1.15em;
    line-height: 1.15;
    margin: 0;
    padding: 20px 0;
    overflow: hidden;
    resize: none;
}
/* The prefilled "Votre numéro" keeps the desktop 75px otherwise, which wraps to a second line
   on a phone and leaves only "Votre" visible. Typed numbers still use the .input-box size. */
body.text-input-is-votre-numero-de-maison .container-text-input .input-box textarea {
    font-size: 26px;
}
.learn-more {
    display:none!important;
}
.container-text-input #color-picker {
        margin-bottom: 10px;
}

#sns_content{
    width: 100%;
}
.font_preview_wrapper form {
    padding:0;
}
}
.input-box,   #text-input {
 transition: background-color 0s;
}
body.bubble-color-clair .input-box, body.bubble-color-clair  #text-input {
    background-color:#3f3333;
}


.second_row {
  margin-top:20px!important
}
.show_message_chiffre_relies {
font-size: 12px;
    font-style: italic;
    margin-top: 62px;
    clear: both;
}
.show_message_plaque {
  font-size:12px;
  font-style:italic;

  margin-top: 62px;
    clear: both;

}
.go_to_relier_section {
    font-weight:bold;
}
.chiffres-separes-wrapper,
.chiffres-relies-wrapper,
.plaque-wrapper {
  float:left;
}

.je_relie {
  width:auto!important;
}

.relier_section .warning{
  color:red;
  font-size:12px;
      margin-top: 60px;
}

.format_section .options {
    flex-direction: column;
    padding-right: 20px;
}

.relier_section .options {
    flex-direction: column;
    padding-right: 20px;
}

.plaque_chosen .input-box{
  border-radius:0;
}

/* Plate: the digits are cut out of the metal, so the wall (the preview background) shows
   through them. #plaque-plate is the flat metal rectangle; #text-overlay's glyphs are filled
   with the same background — aligned by assets/js/configurator.js — so they read as holes. */
.plaque_chosen #custom-tool #text-overlay {
    border-radius: 0;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-origin: border-box;
    background-repeat: no-repeat;
}

#plaque-plate {
    border-radius: 0;
}

/* In plate mode the extension is cut out of the same plate, exactly like the digits. */
.plaque_chosen #extension-overlay {
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-origin: border-box;
    background-repeat: no-repeat;
}


button.fav_need_saving .add-to-cart.add-to-cart-fav {
   opacity: 1;
}
/*
body:not(.fav_need_saving) button.add-to-cart.add-to-cart-fav {
     opacity: 0.3;
}

body.already_favorite:not(.fav_need_saving) button.restore-fav {
     opacity: 0.3;
     pointer-events:none;
}
*/
body.already_favorite.fav_need_saving button.add-to-cart.add-to-cart-fav .fa-heart:before {
  position:relative;
    z-index:2;
/*  color: #dd901c;*/
  
}

body:not(.fav_need_saving).already_favorite button.add-to-cart.add-to-cart-fav .fa-heart:after {
   content: "✅";
  position: absolute;
      margin-top: -7px;
    margin-left: -2Px;
font-size: 12px;
}

body.already_favorite.fav_need_saving button.add-to-cart.add-to-cart-fav .fa-heart:after
{
     content: "✅";
  position: absolute;
      margin-top: -7px;
    margin-left: -2Px;
font-size: 12px;
}

body .resave {
    display:none;
}

.surlignage {
        background: #ffff00;
}
body.already_favorite.fav_need_saving .resave {
        margin-bottom: 10px;
     text-transform: uppercase;
    
    
           background: transparent !important;
    color: black !important;
    border: none;
    padding: 0 !important;
    text-decoration: underline;
        display: inline-block;    
        margin-right: 10px;
}

/*
body.already_favorite.fav_need_saving button.add-to-cart.add-to-cart-fav .fa-heart:after {
     content: "💾";
    position: absolute;
    margin-top: -7px;
    margin-left: -22Px;
    color: green;
    font-size: 29px;
}
*/


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


.delete-fav, .restore-fav, .restore-fav-from-cookie-to-db {
 

  padding: 15px 20px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
    display: inline-block;
    
         text-align: center;
    text-decoration: none;
    border-radius: 5px;
     margin-top: -5px;
    margin-bottom: 10px;
    
        background: transparent;
    color: black;
    border: 2px solid rgb(227, 68, 68);
    margin-right: 8px !important;
    
        color: black !important;
    border: none;
    padding: 0 !important;
    text-decoration: underline;
}
.delete-fav:hover, .restore-fav:hover, .restore-fav-from-cookie-to-db:hover {
           background: transparent;
     color: black !important;
    border: none;
    padding: 0 !important;
    text-decoration: underline;
}
.add-to-cart-fav {
        background: transparent !important;
    color: black !important;
    border: 2px solid rgb(227, 68, 68) !important;
    margin-left: 8px !important;
    padding: 12px 17px !important;
}

.go-to-fav {
  /* NOT BUTTON*/
  background-color: #dd901c;
  color: #fff!important;
  padding: 15px 20px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
    display: inline-block;
     margin-right: 12px!important;
         text-align: center;
    text-decoration: none;
    border-radius: 5px;
    margin-top: -5px;
    margin-bottom: 10px;
    text-transform: uppercase;
    
    
           background: transparent !important;
    color: black !important;
    border: none;
    padding: 0 !important;
    text-decoration: underline;
}



.current_font_non_reliable #format_edit_select [value="2"] {
    display: none;
}

.current_font_non_reliable .show_message_chiffre_relies {
display: none!important;
}

textarea {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

textarea::-webkit-scrollbar { /* For Chrome, Safari, and Opera */
    display: none;
}

#fontSelector .font-option.selected > span + span {
    display: none;
}

@media (max-width: 600px) {
  .container-module-numero-rue .add-to-cart {
        display: block;
    clear: both;
    width: 100%;
    margin: 0 !important;
    margin-bottom: 10px !important;
    margin-top: 10px !important;
  }
}

/* ---------------------------------------------------------------------------
 * Wizard (six-step configurator)
 * ------------------------------------------------------------------------ */

/* Two-column layout: the forms on the left, the live preview on the right of every step. */
.ndm-layout {
  display: flex;
  align-items: stretch;
  gap: 32px;
}

.ndm-main {
  flex: 1 1 0;
  min-width: 0;
}

.ndm-side {
  flex: 1 1 0;
  min-width: 0;
}

/* The right-hand preview card. Only the render and the background chooser are shown here; the
   advanced controls stay in the DOM (save/restore/submit read them) but hidden. */
.ndm-wizard .ndm-preview {
  position: sticky;
  top: 20px;
  margin: 0;
  padding: 20px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* The per-step illustration sliders are replaced by the live preview on the right. */
.ndm-wizard .slider {
  display: none;
}

.ndm-wizard .slider-container {
  display: block;
}

.ndm-wizard .slider-container .options {
  width: 100%;
}

.ndm-wizard .slider-container .clone {
  width: 100%;
  margin-top: 20px;
}

/* On desktop the persistent preview on the right already shows the colour, so the inline preview
   below the swatches is redundant. Keep it on mobile, where the preview scrolls out of view. */
@media (min-width: 1024px) {
  .ndm-wizard .slider-container .clone {
    display: none;
  }
}

@media (max-width: 1023px) {
  .ndm-layout {
    flex-direction: column;
  }

  /* Stacked layout: the steps come first, the preview follows underneath. */
  .ndm-side {
    flex-basis: auto;
    max-width: none;
    width: 100%;
    order: 1;
  }

  .ndm-wizard .ndm-preview {
    position: static;
  }
}

.ndm-preview-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

.ndm-preview #image-preview {
  width: 100%;
}

/* Closing note of the preview card: the render is an aid, not a contractual picture. */
.ndm-preview-disclaimer {
  margin: 16px 0 0;
  font-size: 12px;
  font-style: italic;
  line-height: 1.4;
  color: #777;
  text-align: center;
}

.ndm-preview .orientation_chooser,
.ndm-preview label[for='font-size'],
.ndm-preview #font-size,
.ndm-preview .line-height-holder {
  display: none !important;
}

/* Contract-only mirror controls are never shown. */
.ndm-mirrors {
  display: none !important;
}

/* Progress bar */
.ndm-progress {
  list-style: none;
  display: flex;
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
}

.ndm-progress-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  cursor: pointer;
  padding-top: 8px;
  border-top: 3px solid #e0e0e0;
  color: #999;
  font-size: 13px;
  transition: color 0.2s, border-color 0.2s;
}

.ndm-progress-item .ndm-progress-index {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e0e0e0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: background 0.2s;
}

.ndm-progress-item.is-done {
  border-top-color: #dd901c;
  color: #555;
}

.ndm-progress-item.is-done .ndm-progress-index {
  background: #dd901c;
}

.ndm-progress-item.is-active {
  border-top-color: #dd901c;
  color: #dd901c;
  font-weight: 700;
}

.ndm-progress-item.is-active .ndm-progress-index {
  background: #dd901c;
}

/* Steps */
.ndm-step {
  display: none;
}

.ndm-step.is-active {
  display: block;
}

.ndm-step-eyebrow {
  display: inline-block;
  color: #dd901c;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.ndm-step-title {
  position: relative;
  margin: 0 0 26px;
  padding-bottom: 14px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.15;
  border-bottom: 3px solid #eee;
}

/* Orange accent under the title that fills up as the steps progress (full on the last step). */
.ndm-step-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: var(--ndm-fill, 100%);
  height: 3px;
  background: #dd901c;
  transition: width 0.3s ease;
}

.ndm-see-preview {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 8px 16px;
  background: transparent;
  color: #dd901c;
  border: 1px solid #dd901c;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s ease, color 0.15s ease;
}

.ndm-see-preview:hover {
  background: #dd901c;
  color: #fff;
}

/* On desktop the preview is always visible on the right, so the shortcut is only useful on
   narrow screens where the columns stack. */
@media (min-width: 1024px) {
  .ndm-see-preview {
    display: none;
  }
}

/* Step 1 wraps its fields directly in `.container-text-input` (the `pricing.js` hook),
   which is otherwise a two-column flex row — reset it to a plain block here. */
.ndm-wizard .ndm-step-body {
  display: block;
  width: 100%;
}

/* Navigation */
.ndm-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #ddd;
}

.ndm-nav .ndm-nav-total {
  font-size: 20px;
  font-weight: 700;
  color: #dd901c;
}

.ndm-nav button {
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.ndm-nav .ndm-prev {
  background: transparent;
  color: #333;
  border: 1px solid #ccc;
}

.ndm-nav .ndm-prev:disabled {
  opacity: 0.4;
  cursor: default;
}

.ndm-nav .ndm-next {
  background: #dd901c;
  color: #fff;
}

@media (max-width: 600px) {
  .ndm-progress-label {
    display: none;
  }

  .ndm-step-title {
    font-size: 24px;
  }

  /* Keep Prev / total / Next on one line: no wrap, tighter buttons, and let the price shrink
     rather than push a button onto a second row. */
  .ndm-nav {
    flex-wrap: nowrap;
    gap: 10px;
  }

  .ndm-nav button {
    flex: 0 0 auto;
    padding: 12px 16px;
    font-size: 15px;
  }

  .ndm-nav .ndm-nav-total {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: 18px;
  }
}

/* Dimensions step: the sizes on top, a larger illustration below, roomier columns. */
.ndm-wizard .height-section .slider-container {
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
}

.ndm-wizard .height-section .options-container {
  gap: 48px;
}

.ndm-wizard .height-section .slider {
  width: 100%;
  margin-top: 0;
}

.ndm-wizard .height-section .slider img {
  max-height: 560px;
}

/* The single size dropdown. Scoped under `.ndm-wizard` so it beats the global
   `.font_preview_wrapper select { height: 30px }`, whose fixed height clipped the text. */
.ndm-wizard .ndm-size-select {
  width: 100%;
  height: auto;
  margin-top: 8px;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.3;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  cursor: pointer;
}

/* Format step: separate the "join my digits" option from the radios and frame it as a card. */
.ndm-wizard .relier_section {
  margin-top: 32px;
  padding: 24px;
  background: #faf7f2;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* ---------------------------------------------------------------------------
 * Custom radios & checkboxes — the site orange instead of the browser blue.
 * Scoped to the configurator so nothing else on the site is affected.
 * width/height/padding use !important to beat `.je_relie { width:auto!important }`
 * and the generic `.font_preview_wrapper input:not([type='radio'])` rule.
 * ------------------------------------------------------------------------ */

.container-module-numero-rue input[type="radio"],
.container-module-numero-rue input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  padding: 0 !important;
  margin: 0 8px 0 0 !important;
  border: 2px solid #c4c4c4;
  background: #fff;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  flex: 0 0 auto;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.container-module-numero-rue input[type="radio"] {
  border-radius: 50%;
}

.container-module-numero-rue input[type="checkbox"] {
  border-radius: 5px;
}

.container-module-numero-rue input[type="radio"]:hover,
.container-module-numero-rue input[type="checkbox"]:hover {
  border-color: #dd901c;
}

.container-module-numero-rue input[type="radio"]:checked,
.container-module-numero-rue input[type="checkbox"]:checked {
  border-color: #dd901c;
}

.container-module-numero-rue input[type="checkbox"]:checked {
  background-color: #dd901c;
}

/* The filled dot of a selected radio. */
.container-module-numero-rue input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #dd901c;
}

/* The tick of a checked checkbox. */
.container-module-numero-rue input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.container-module-numero-rue input[type="radio"]:focus-visible,
.container-module-numero-rue input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(221, 144, 28, 0.3);
}

.container-module-numero-rue input[type="radio"]:disabled,
.container-module-numero-rue input[type="checkbox"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Non-joinable font: the "join my digits" option stays visible but reads as unavailable. */
.relier-disabled label[for="je_relie"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
 * Extension step
 * ------------------------------------------------------------------------ */

.ndm-extension-intro {
  margin: 0 0 16px;
}

.ndm-extension-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 20px;
}

.ndm-extension-fields {
  display: none;
  padding: 24px;
  background: #faf7f2;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* Dimensions step: the extension's own size picker, below the number's. */
.ndm-extension-size {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid #e6e6e6;
}

.ndm-extension-size[hidden] {
  display: none;
}

.ndm-extension-size-title,
.ndm-size-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
}

.ndm-extension-fields .ndm-field {
  margin-bottom: 20px;
}

.ndm-extension-fields .ndm-field:last-child {
  margin-bottom: 0;
}

.ndm-extension-fields label,
.ndm-extension-fields .ndm-field-label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
}

/* Position options read as normal-weight radio choices, not bold block labels. */
.ndm-extension-fields .ndm-extension-position-option {
  display: flex;
  align-items: center;
  font-weight: 400;
  margin-bottom: 8px;
  cursor: pointer;
}

.ndm-extension-fields .ndm-extension-position-option:last-child {
  margin-bottom: 0;
}

/* Colour step: show only the first five swatches until "show more" is clicked. */
#color-picker.in-guide:not(.show-all) .color-bubble:nth-child(n+6) {
  display: none;
}

.ndm-more-colors-row {
  flex: 0 0 100%;
  margin-top: 16px;
}

.ndm-more-colors {
  padding: 8px 16px;
  background: transparent;
  color: #dd901c;
  border: 1px solid #dd901c;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s ease, color 0.15s ease;
}

.ndm-more-colors:hover {
  background: #dd901c;
  color: #fff;
}

/* Payment step: the order recap as a clean card with a single, centred, full-width CTA. */
.ndm-wizard .order-summary {
  margin: 20px 0 0;
  padding: 24px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.ndm-wizard .order-summary h3 {
  margin: 0 0 8px;
  padding-bottom: 14px;
  font-size: 18px;
  border-bottom: 1px solid #eee;
}

.ndm-wizard .order-summary p {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid #f2f2f2;
}

.ndm-wizard .order-summary p.price {
  border-bottom: none;
  padding-top: 16px;
  font-size: 24px;
  font-weight: 700;
}

.ndm-wizard .order-summary .add-to-cart {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 4px 0 0;
}

/* Per-unit line and surcharges, just above the total. */
.ndm-wizard .order-summary .ndm-unit-line {
  padding: 12px 0 0;
  color: #666;
  font-size: 14px;
}

.ndm-wizard .order-summary .supplement,
.ndm-wizard .order-summary .supplement_extension {
  padding: 4px 0;
  color: #666;
  font-size: 14px;
}

/* The remarks field, sitting just above the add-to-cart button. */
.ndm-wizard .order-summary .notice {
  margin: 4px 0 8px;
  padding-top: 16px;
  border-top: 1px solid #eee;
  border-bottom: none;
  color: #555;
  font-weight: 400;
  font-size: 13px;
}

.ndm-wizard .order-summary textarea[name="remarques"] {
  width: 100%;
  min-height: 80px;
  margin-bottom: 8px;
}

/* Reviews and FAQ, below the recap card. */
.ndm-payment-extras {
  margin-top: 24px;
}

.ndm-payment-extras .reviews {
  margin-bottom: 16px;
}

/* FAQ accordion — collapsed by default, one clean card per question. */
.ndm-faq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ndm-faq-item {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ndm-faq-item.is-open {
  border-color: #dd901c;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.ndm-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 16px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  color: #333;
}

.ndm-faq-q i {
  flex: 0 0 auto;
  color: #dd901c;
  transition: transform 0.25s ease, color 0.2s ease;
}

.ndm-faq-q:hover {
  background: #dd901c;
  color: #fff;
}

.ndm-faq-q:hover i {
  color: #fff;
}

.ndm-faq-item.is-open .ndm-faq-q i {
  transform: rotate(180deg);
}

.ndm-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.ndm-faq-item.is-open .ndm-faq-a {
  max-height: 600px;
}

.ndm-faq-a-inner {
  padding: 16px;
  color: #555;
  font-size: 14px;
  line-height: 1.55;
}

#extension-overlay {
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* ---------------------------------------------------------------------------
 * Font dropdown (#fontSelector): a chevron cue and a scrollable open panel.
 * ------------------------------------------------------------------------ */

/* Down chevron on the right, hidden behind the panel once it opens. */
#fontSelector::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 40%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

#fontSelector .font-option.selected {
  padding-right: 34px;
}

/* When open, the panel shows the options list; hide the selected "header" so the current font
   is not listed twice. */
#fontSelector.open .font-option.selected {
  display: none;
}

/* Open: the list becomes an absolutely-positioned panel that scrolls instead of being cropped. */
#fontSelector.open .fontSelector_wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 999999;
}