/* Styles pour les cartes et leur visualisation */
body.carte .zoneGauche,
body.carte_facebook .zoneGauche {
  display: inline-block;
  width: 600px;
  margin: 0 20px 0 0;
  vertical-align: top;
}

body.carte .personnalisation .zoneGauche,
body.carte_facebook .personnalisation .zoneGauche {
  display: block;
  width: 100%;
  margin: 0 20px 0 0;
  vertical-align: top;
}

body.carte .card_container,
body.carte_facebook .card_container {
  width: 100%;
  padding: 10px;
  background: #ACDCED;
  border: 1px solid #98cfe2;
  margin: 0 auto;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1em;
  height: auto;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  z-index:-10;
}

body.carte .card_container #zoneVideo,
body.carte_facebook .card_container #zoneVideo {
  position: relative;
  width: 500px;
  height: 400px;
  margin: 0 auto;
  border: 7px solid #fff;
  background: #fff;
  overflow: hidden;
}

body.carte .card_container #zoneVideo #maVideo {
  width: 500px;
  height: 400px;
}

.watermark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 1s ease-in;
}

.watermark-overlay.show-watermark {
    opacity: 0.4;
}

.watermark-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.demo-notice {
    text-align: center !important;
    font-size: 13px !important;
    color: #666;
    margin: 5px 0 0 0;
    font-style: italic;
}

body.carte .card_container #zoneFlash,
body.carte_facebook .card_container #zoneFlash {
  width: 500px;
  margin: 0 auto;
  z-index: 10;
}

body.carte #zoneTexte,
body.carte_facebook #zoneTexte {
  position: absolute;
  top: -10px;
  text-align: center;
  width: 470px;
  margin-left: 2px;
}

body.carte .cj-fx,
body.carte_facebook .cj-fx {
  z-index: 50;
  width: 480px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding-bottom: 25px;
  text-shadow: 1px 1px 3px #000;
  font-size: 33px;
}

body.carte .card_container #info,
body.carte_facebook .card_container #info {
  z-index: 50;
  position: absolute;
  top: 0;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  background: #ffda00;
  color: #000;
  font-weight: 700;
  font-size: 16px;
  padding: 10px 2px;
  font-family: Arial, sans-serif;
  line-height: 1.4em;
}

body.carte .card_container form {
  text-align: center;
}

body.carte #main {
  padding: 10px 0 0;
}



/* Page INDEX  */


body.front.carte.index h3{
  font-family:'Amaranth';
  font-size:17px;
  font-weight:200;
}

body.front.carte.index p {
  font-size: 14px;
  text-align: left;
  line-height:1.4em;
  margin-bottom:15px;
}
body.front.carte.index ul,
body.front.carte.index ol {
  font-family:'Arial', sans-serif;
  font-size: 14px;
  text-align: left;
  line-height:1.4em;
  margin-bottom:15px;
}
body.front.carte.index.container ul li {
  list-style-type:disc;
  margin-left:15px;
}
body.front.carte.index .moreinfo {
  font-size: 14px;
  text-align: center;
}
body.front.carte.index .moreinfo a {
  color:#06749d;
  text-decoration:underline;
  font-size:15px;
  font-weight: bold;
}

body.front.carte.index #voir-personnalisation-exemple{
  font-weight:normal;
}
body.front.carte.index p.moreinfo a:hover {
  color:#3c93b3;
}
.infoPersonnalisez {
  max-height: 0;
  overflow: hidden;
  font-size: 13px;
  margin: 8px auto;
  line-height: 1.4em;
  text-align: center;
  transition: max-height 0.5s ease-out;
  opacity: 0;
} 

.infoPersonnalisez.active {
  max-height: 500px; /* Hauteur maximale que l'encart peut atteindre */
  opacity: 1;
  transition: max-height 0.5s ease-out, opacity 0.5s ease-in;
  padding: 15px;
}

.options_personnalisation h3 {
  margin-top: 0;
  color: #0079a1;
  font-size: 18px;
  font-weight: bold;
}

.options_personnalisation ul.options {
  list-style-type: disc;
  padding-left: 20px;
  margin-bottom: 15px;
}

.options_personnalisation ul.options li {
  margin-bottom: 5px;
}

body.front.carte.index .options_personnalisation {
  margin:0 auto;
  padding:15px;
  font-size:1.1em;
  line-height: 1.3em;
  text-align:left;
  border:1px solid rgb(255, 255, 255);
  border-radius:8px;
}
body.front.carte.index .options li{
  list-style-type:disc;
  margin-left:20px;
}
body.front.carte.index .infobulle {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

body.front.carte.index .infobulle .popuptext {
  visibility: hidden;
  width: 250px;
  background-color: #99d3e7;
  color: #000;
  text-align: left;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -57px;
  font-size: .6em;
  line-height: 1.3em;
  border: 1px solid #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
}

body.front.carte.index .infobulle .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20%;
  margin-left: 0;
  border-width: 5px;
  border-style: solid;
  border-color: #FFF transparent transparent transparent;
}

body.front.carte.index .infobulle .show {
  visibility: visible;
  -webkit-animation: fadeIn 0.5s;
  animation: fadeIn 0.5s;
}



/* Nouveaux boutons carte */
body.front.carte.index .card-actions-new {
    text-align: center;
    margin: 20px 0;
}

body.front.carte.index .btn-card-premium, .btn-card-gratuit {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 0 auto 10px;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

body.front.carte.index .btn-card-premium {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
}

body.front.carte.index .btn-card-gratuit {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

body.front.carte.index .btn-card-premium:hover, .btn-card-gratuit:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

body.front.carte.index .card-info-toggle {
    color: #6c757d;
    text-decoration: underline;
    font-size: 14px;
}

/* Popups */
body.front.carte.index .card-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.front.carte.index .popup-content {
    background: white;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 12px;
    position: relative;
    padding: 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

body.front.carte.index .popup-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #999;
}

body.front.carte.index .feature-comparison table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

body.front.carte.index .feature-comparison th, .feature-comparison td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

body.front.carte.index .feature-yes { 
  color: #28a745 !important;  
  font-size: 18px; 
}
body.front.carte.index .feature-no { 
  color: #dc3545 !important; 
  font-size: 18px; 
}

body.front.carte.index .upgrade-section, .trial-section {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
    text-align: center;
}

body.front.carte.index .popup-actions {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap;
}

body.front.carte.index .popup-actions button {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

body.front.carte.index .btn-continue-gratuit {
    background: #6c757d;
    color: white;
}

body.front.carte.index .btn-try-premium {
    background: #28a745;
    color: white;
}

/* Popup démonstration personnalisation */
body.front.carte.index .modal-demo {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
}

body.front.carte.index .demo-content {
    background: white;
    border-radius: 10px;
    padding: 30px;
    width: 100%;
    max-width: 694px;
    max-height: 90vh;
    position: relative;
    overflow-y: auto;
    text-align: center;
}

body.front.carte.index .demo-image-container {
    margin-bottom: 25px;
}

body.front.carte.index #personnalisation-demo-image {
    width: 694px;
    height: 693px;
    border-radius: 8px;
    object-fit: cover;
}

body.front.carte.index .demo-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
}

body.front.carte.index .nav-arrow {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #333;
    transition: all 0.2s;
}

body.front.carte.index .nav-arrow:hover {
    background: #e8e8e8;
    border-color: #bbb;
}

body.front.carte.index #personnalisation-demo-counter {
    font-size: 16px;
    color: #666;
    font-weight: normal;
}

body.front.carte.index .close-personnalisation-demo {
    background: #ffae00;
    color: black;
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
}

body.front.carte.index .close-personnalisation-demo:hover {
    background: #e09900;
}

/* Style pour le type de carte au-dessus du titre */
.carte-type-info {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
}

.carte-type-info a {
    color: #0082ba;
    text-decoration: underline;
}

.carte-type-info a:hover {
    text-decoration: underline;
}



@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

body.carte.index #zoneFlash {
  width: 500px;
  margin: 0 auto;
  border: 7px solid #FFF;
  z-index: 10;
}

body.carte.index .people {
  height: 690px;
} 

body.front.carte.index h2 {
  padding-top: 0;
  margin: 0 0 20px 0;
  font-family: 'Amaranth', sans-serif;
  text-transform: none;
  font-size: 20px;
  font-weight: 400;
  color: #c3005c;
}

body.carte.index .categorie,
body.carte.personnalisation .categorie {
  font-family: 'Amaranth', sans-serif;
  font-size: 20px;
  font-weight: 400;
  padding: 0 10px;
  margin: 0;
  background: #2b97ba;
  color: #FFF;
  width: 100%;
}

body.carte.index .categorie a,
body.carte.personnalisation .categorie a {
  text-decoration: underline;
  color: #FFF;
}

body.carte.index .categorie a:hover,
body.carte.personnalisation .categorie a:hover {
  color: #9ee6ff;
}

body.carte.index .categorie h1,
body.carte.personnalisation .categorie h1 {
  font-family: 'Amaranth', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #FFF;
  display: inline-block;
  margin-left: 10px;
}

body.carte.index #image_carte {
  position: absolute;
  top: -1000px;
  left: -1000px;
} 

body.carte.index .card_container #zoneBoutons {
  width: 500px;
  margin: 0 auto;
}

body.carte.index a.button {
  text-align: center;
  width: 48%;
  height: auto;
  display: block;
  padding: 15px;
  border: 3px solid #FFF;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  margin: 15px auto;
  font-size: 1.1em;
  color: #000;
  text-transform: none;
  font-family: 'Amaranth', sans-serif;
  font-weight: 400;
  line-height: 1.3em;
}

body.carte.index .card_container a.emailfutur {
  border: none;
  color: #000;
  background: none;
  text-align: center;
  height: auto;
  display: block;
  padding: 5px;
  margin: 0 auto 15px auto;
  font-size: 15px;
  font-weight: 400;
  text-transform: none;
  font-family: 'Amaranth', sans-serif;
  line-height: 1.3em;
  vertical-align: top;
  text-decoration: underline;
}

body.carte.index .card_container a.button .personnalisez {
  font-size: 20px;
  padding-bottom: 5px;
}

body.carte.index .card_container a.button {
  background: #ffc000;
  color: #000;
}


body.carte.index .card_container a.button:hover {
  background: #ffda00;
  text-decoration: none;
}


body.carte.index .descriptif {
  display: block;
  width: 95%;
  font-size: 14px;
  line-height: 1.3em;
  padding: 20px;
  margin: 15px auto 10px auto;
  background-color:#cfecf6;
  border-radius:8px;
  border:1px solid #98cfe2;
}

/* Lien : Editer la carte */
body.carte.index .admin-edit-link {
  margin: 0 0 10px 0;
  padding: 0;
}

body.carte.index .admin-edit-link a {
  display: block;
  color: #b00053 !important;
  padding: 0;
  text-decoration: underline;
  font-size: 14px;
  text-align:center;
}
/***/

body.carte.index .versions {
  font-size: 13px;
  padding: 10px;
  padding:0px;
}

body.carte.index .versions li {
  list-style-type: none;
  display: inline-block;
}

body.carte.index .versions a {
  color: #006791;
  font-size: 12px;
  text-decoration: underline;
}

body.carte.index .versions a:hover {
  color: #1a8eb7;
}

body.front.carte.index .autresCartes {
  background: #a1dcf1;
  padding: 10px;
  border: 1px solid #539eb9;
  margin:0 0 15px 0;
} 

body.front.carte.index .autresCartes ul {
  width: 100%;
  margin: 0 auto;
  text-align: center;
} 

body.front.carte.index .autresCartes li {
  display: inline-block;
  margin: 0 5px;
} 

body.front.carte.index .autresCartes li a {
  border: 5px solid #FFF;
  display: block;
} 

body.front.carte.index .autresCartes li a:hover {
  border: 5px solid #2b97ba;
} 

body.front.carte.index .autresCartes .pub {
  background: none;
  padding: none;
  border: none;
} 

body.carte.index .autresCartes.premium {
  background: #cfecf6;
  padding: 10px 10px 25px;
  border: 1px solid #b5deec;
} 

body.carte.index .titre_autresCartes.premium h2 {
  padding-top: 0;
} 

body.front.carte.index .autresCartes.premium li {
  margin-top: 20px;
}


/* POPUP CARTE PREMIUM - CARTE GRATUITE */
body.carte #premiumPopup {
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
}

body.carte #premiumPopup[style*="display: block"] {
  display: flex !important;
}

body.carte .premium-popup-content {
  background-color: #fff;
  padding: 20px;
  border: 2px solid #0082ba;
  width: 80%;
  max-width: 600px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  position: relative;
  font-family: Arial, sans-serif;
  max-height: 80vh;
  overflow-y: auto;
}

body.carte .premium-popup-close {
  color: #0082ba;
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
}

body.carte .premium-popup-close:hover {
  color: #c0386e;
}

body.carte .premium-popup-content h3 {
  color: #0082ba;
  font-size: 24px;
  text-align: center;
  margin: 0 0 25px 0;
  padding-bottom: 15px;
  border-bottom: 2px solid #afdfeb;
  font-family: 'Amaranth', sans-serif;
  font-weight: normal;
}

body.carte .premium-popup-content p.popup-description {
  font-family: Arial, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  margin: 15px 0;
  color: #333;
  background: none;
  padding: 0;
  border-radius: 0;
}

body.carte .premium-popup-content .trial-offer {
  background-color: #e5ffc0;
  border: 2px solid #28a745;
  padding: 15px;
  margin: 15px 0;
  border-radius: 8px;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.3em;
}

body.carte .features-container {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin: 20px auto;
    text-align: center;
    width: 80%;
}
body.carte .benefices {
    padding: 10px 60px;
    display: block;
    margin: 0px auto 0 auto;
}
body.carte .features li {
    margin: 12px 0;
    font-size: 16px;
    color: #000000;
    line-height: 1.2em;
}
body.carte .features .fa-check-circle {
    color: #6ab04c;
}
body.carte .features li i {
    margin-right: 8px;
}
body.carte .benefices h2 {
    text-align: center;
    margin-bottom: 0px;
}


body.carte .premium-popup-content .feature-table {
  width: 100%;
  margin: 25px 0 5px;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  font-size: 14px;
}
body.carte .premium-popup-content .asterisque {
  font-size:12px !important;
  color: rgb(167, 167, 167) !important;
  font-style:italic !important;
}

body.carte .premium-popup-content .feature-table th {
  background-color: #f8f9fa;
  padding: 12px;
  border: 1px solid #ddd;
  text-align: center;
  font-weight: bold;
  color: #333;
}

body.carte .premium-popup-content .feature-table td {
  padding: 10px 12px;
  border: 1px solid #ddd;
  text-align: left;
  vertical-align: middle;
}

body.carte .premium-popup-content .feature-table .feature-yes {
  text-align: center;
  font-size: 18px;
  color: #28a745;
  font-weight: bold;
}

body.carte .premium-popup-content .feature-table .feature-no {
  text-align: center;
  font-size: 18px;
  color: #dc3545 !important;
  font-weight: bold;
}

body.carte .premium-popup-content p.popup-action {
  text-align: center;
  margin: 10px 0;
  background: none;
  padding: 0;
  border-radius: 0;
}

body.carte .premium-popup-content .btn-try-premium {
  display: inline-block;
  padding: 15px 30px;
  background: #28a745;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

body.carte .premium-popup-content .btn-try-premium:hover {
  background: #218838;
  text-decoration: none;
  color: white;
}

body.carte .premium-popup-content p.popup-close-text {
  margin-top: 15px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  color: #666;
  background: none;
  padding: 0;
  border-radius: 0;
}

body.carte .premium-popup-content p.popup-close-text span {
  text-decoration: underline;
  cursor: pointer;
  color: #007cba;
}

body.carte .premium-link {
  color: #00719a;
  text-decoration: underline;
  cursor: pointer;
}


/* Page PERSONNALISATION  */

body.carte.personnalisation #header {
  display:none !important;
}

body.carte.personnalisation #master {
  background: #2bb7e3;
}

body.carte.personnalisation #tmv_headline,
body.carte.personnalisation #logo{
  display:none !important;
}

body.carte.personnalisation #main{
  margin:0 !important;
  padding:0 !important;
}

body.carte.personnalisation #logo_inpage{
  margin:0 auto;
}


body.carte.personnalisation .card_container {
  width: 980px;
  margin: 0 auto;
  background:none;
  border:none;
}

body.carte.personnalisation .vignette {
  padding: 0;
  text-align: center;
}

body.carte.personnalisation .vignette img {
  width: 15%;
  height: auto;
}

body.carte.personnalisation .suggestions,
body.carte.partage .suggestions {
  margin-top: 20px;
  padding: 0;
}
body.carte.personnalisation .suggestions-list,
body.carte.partage .suggestions-list {
  background:#8bd0e3 !important;
}

body.carte.personnalisation .suggestions h3,
body.carte.partage .suggestions h3 {
  text-align: center;
  margin-bottom: 20px;
  color: #000;
  font-size: 1em;
}

body.carte.personnalisation .suggestions ul,
body.carte.partage .suggestions ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0;
  list-style: none;
}

body.carte.personnalisation .suggestions .carte,
body.carte.partage .suggestions .carte {
  position: relative;
  border: 5px solid #fff;
}

body.carte.personnalisation .suggestions .carte:hover,
body.carte.partage .suggestions .carte:hover {
  border: 5px solid #ffc000;
}

body.carte.personnalisation .voir-categories,
body.carte.partage .voir-categories {
  text-align: center;
  margin-top: 25px;
}

body.carte.personnalisation .btn-categories,
body.carte.partage .btn-categories {
  height: auto;
  margin: 0;
  padding: 8px 20px;
  position: static;
  display: inline-block;
  background: #ffc000;
  margin: 0 0 20px 0;
  line-height: 30px;
  text-align: center;
  font-family: 'Amaranth', sans-serif;
  font-weight: 400;
  font-size: 22px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  border: 2px solid #FFF;
  text-transform: uppercase;
}

body.carte.personnalisation .btn-categories:hover,
body.carte.partage .btn-categories:hover {
  background: #fbe62e;
  color: #000;
  text-decoration: none;
}


body.carte.personnalisation .btn-mode {
  display: inline-block;
  margin-right: 10px;
  padding: 10px 15px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #555;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  font-size: .8em;
}

body.carte.personnalisation .btn-mode:hover {
  text-decoration: none;
  color: #333;
  background-color: #e9e9e9;
}

body.carte.personnalisation .btn-mode.active {
  background-color: #2b97ba;
  color: #fff;
  border-color: 2px solid #00656e;
}

body.carte.personnalisation .btn-mode.disabled {
  opacity: .65;
  cursor: not-allowed;
}

body.carte.personnalisation #email-section,
body.carte.personnalisation #partage-section,
body.carte.personnalisation #continue-button {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 2s ease, opacity 0.5s ease, margin 0.5s ease;
  margin-top: 0;
  padding: 0;
  display: none;
}

body.carte.personnalisation #email-section.visible,
body.carte.personnalisation #partage-section.visible,
body.carte.personnalisation #continue-button.visible {
  max-height: 800px;
  opacity: 1;
  margin-top: 20px;
  padding: initial;
  display: block;
}

body.carte.personnalisation .info-partage {
  width: 70%;
  margin: 0 auto;
  font-size: .8em;
  text-align: center;
}

body.carte.personnalisation #continue-button {
  margin: 20px 0;
  display: none;
  transition: opacity 0.3s ease;
  text-align: center;
}

body.carte.personnalisation .btn-primary.btn-lg {
  background-color: #ffa200;
  color: #fff;
  border-color: #e3aa00;
  padding: 10px 15px;
  border-radius: 4px;
}

/* Popup Démo Personnage */
.modal-demo {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.demo-content {
    background: white;
    border-radius: 10px;
    padding: 30px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    position: relative;
    overflow-y: auto;
    text-align: center;
}

.demo-content h3 {
    margin-bottom: 25px;
    color: #333;
    font-size: 20px;
}

.demo-image-container {
    margin-bottom: 25px;
}

#demo-image {
    width: 425px;
    height: 504px;
    border-radius: 8px;
    object-fit: cover;
    border:3px dashed #b1b1b1

}

.demo-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
}

.nav-arrow {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #333;
    transition: all 0.2s;
}

.nav-arrow:hover {
    background: #e8e8e8;
    border-color: #bbb;
}

#demo-counter {
    font-size: 16px;
    color: #666;
    font-weight: normal;
}

.close-demo {
    background: #ffae00;
    color: black;
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
}

.close-demo:hover {
    background: #e09900;
}



@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body.carte.personnalisation .form-group label {
  font-size: 1em;
  display: block;
  width: 100%;
  margin: 30px 0 3px 0;
  font-weight: 600;
}

body.carte.personnalisation .form-group input,
body.carte.personnalisation .form-group textarea {
  width: 80%;
}

body.carte.personnalisation .form-group input {
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 8px;
  background-color: #f8f8f8;
  resize: none;
}

body.carte.personnalisation .form-group textarea {
  margin: 5px auto;
  display: block;
  height: 90px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 8px;
  background-color: #f8f8f8;
}

body.carte.personnalisation .form-group #message {
  margin: 5px auto;
  display: block;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 8px;
  background-color: #f8f8f8;
  font-size: .8em;
  line-height: 1.3em;
  min-height: 90px;
  max-height: 300px;
  overflow-y: auto;
  transition: height 0.2s ease;
  resize: vertical;
}

body.carte.personnalisation .info {
  display: block;
  font-size: .7em;
  font-style: italic;
  line-height: 1.3em;
  margin-bottom: 5px;
}

body.carte.personnalisation .info a {
  text-decoration: underline;
  color: #07789e;
}

body.carte.personnalisation .non-premium-message {
  padding: 15px;
  font-size: .8em;
  line-height: 1.3em;
  margin: 0 auto;
}

body.carte.personnalisation .non-premium-message a {
  text-decoration: underline;
  color: #07789e;
  font-weight: 700;
}

body.carte.personnalisation .premium-feature-alert {
  font-size: 13px;
  background: #000;
  opacity: .8;
  color: #fff;
  width: 80%;
  margin: 0 auto;
}

body.carte.personnalisation .immediate-send-notice {
  background: #b1ecff;
  padding: 8px;
  width: 70%;
  margin: 0 auto;
}

body.carte.personnalisation .form-group .form-check {
  display: block;
  width: 30%;
  background: #66d2de;
  padding: 5px;
  margin: 0 auto;
}

body.carte.personnalisation .form-group .form-check-input {
  width: 20px;
}

body.carte.personnalisation .form-group .form-check-label {
  font-size: .8em;
  text-align: left;
  font-weight: 400;
  display: inline-block;
  width: 200px;
  line-height: 1.2em;
}

body.carte.personnalisation .zone_saisie {
  margin-top: 0px;
  padding: 0px;
  width: auto;
}

body.carte.personnalisation .zone_saisie h2 {
  font-size: 1.1em;
  font-weight: 400;
  font-family: 'Amaranth', sans-serif;
  margin: 0;
}

body .zone_boutons {
  width: 378px;
  margin: 15px auto 0;
}

body.carte.personnalisation a.button,
body.carte.message a.button,
body.carte.enveloppe a.button,
body.carte.verification a.button,
body.carte_facebook a.button,
body.front.account.shop #shop a.button {
  width: 150px;
  height: auto;
  margin: 0 0 4px;
  padding: 0;
  position: static;
  display: inline-block;
  background: #ffc000;
  padding: 10px 5px;
  line-height: 30px;
  text-align: center;
  font-family: 'Amaranth', sans-serif;
  font-weight: 400;
  font-size: 22px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  border: 2px solid #FFF;
  text-transform: uppercase;
}

body.carte.personnalisation a.button:hover,
body.carte.message a.button:hover,
body.carte.enveloppe a.button:hover,
body.carte.verification a.button:hover,
body.carte_facebook a.button:hover,
body.front.account.shop #shop a.button:hover {
  text-decoration: none;
  color: #000;
  background: #ffe400;
}

body.carte.personnalisation form .validation,
body.carte.message form .validation,
body.carte.enveloppe form .validation,
body.carte.verification .validation,
body.front.formules.v3 #main .validation,
body.front.account.shop #shop .validation {
  width: 160px;
  height: auto;
  margin: 0;
  padding: 0;
  position: static;
  display: inline-block;
  background: #90e915;
  margin-left: 5px;
  padding: 10px 5px;
  line-height: 30px;
  text-align: center;
  font-family: 'Amaranth', sans-serif;
  font-weight: 400;
  font-size: 22px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  border: 2px solid #FFF;
  text-transform: uppercase;
}

body.carte.personnalisation form .validation:hover,
body.carte.message form .validation:hover,
body.carte.enveloppe form .validation:hover,
body.carte.verification .validation:hover,
body.front.formules.v3 #main .validation:hover,
body.front.account.shop #shop .validation:hover {
  background: #b1ff45;
  color: #000;
  text-decoration: none;
}

/* Page VÉRIFICATION  */

body.carte.verification #header {
  display:none !important;
}

body.carte.verification #master {
  background: #2bb7e3;
}

body.carte.verification #tmv_headline,
body.carte.verification #logo{
  display:none !important;
}

body.carte.verification #main{
  margin:0 !important;
  padding:0 !important;
}

body.carte.verification #logo_inpage{
  margin:0 auto;
  max-width: 250px;
}


body.carte.verification .card_container {
  width: 980px;
  margin: 0 auto;
  background:none;
  border:none;
}

body.carte ul.steps {
  padding: 0;
  text-align: center;
  margin-bottom:10px;
}

body.carte ul.steps li {
  display: inline-block;
  font-size: 0.65em;
  margin-right: 10px;
  padding: 5px 8px;
}

body.carte ul.steps li a, body.carte. ul.steps li a:hover {
  color:black !important;
  text-decoration:underline;
}

body.carte ul.steps li.active {
  border: 3px solid #FFF;
}

body.carte.verification .card_container .message h4 {
  font-style: normal;
  font-size: 18px;
  font-weight: 400;
  margin: 0 0 10px;
  padding: 0;
  color: #1581ac;
  display: block;
  border-bottom: 1px solid #afdfeb;
}

body.carte.verification .card_container .persoTexte1 {
  font-style: bold;
  font-size: 18px;
  font-weight: 400;
  margin: 0 0 10px;
  padding: 0;
  color: #000;
}

body.carte.verification .sending-summary {
  width: 55%;
  margin: 10px auto;
  padding: 10px;
  font-size: .8em;
  border: 1px solid #ffffff;
  background:#b3edff;
}

/* Styles pour les éléments désactivés*/
.choice-btn.disabled,
.couleur-option-small.disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
    background-color: #f5f5f5 !important;
}

.choice-btn.disabled:hover,
.couleur-option-small.disabled:hover {
    background-color: #f5f5f5 !important;
}

.couleur-option-small.disabled .couleur-pastille {
    opacity: 0.6;
}

body.carte.verification .sending-summary {
  width:490px;
  margin: 20px auto;
  padding: 8px;
  font-size: 0.7em;
}
body.carte.verification .summary-item {
  font-size:15px;
}

body.carte.verification #verificationForm {
  display: block;
  width: 100%;
  text-align: center;
  padding-bottom:200px;
}
body.carte.verification .btn_modifier, 
body.carte.verification .btn_valider {
    display: inline-block;
    margin: 10px;
    width: 150px;
    text-align: center;
    font-size: 16px;
}
body.carte.verification .btn_valider {
  background-color: #ffa200;
  color: #fff;
  border-color: #e3aa00;
  padding: 10px 15px;
  border-radius: 4px;
}
body.carte.verification .btn_modifier {
    background-color: #2b97ba;
    color: #fff;
    border-color: 2px solid #00656e;
    padding: 10px 15px;
    border-radius: 4px;
}


body.carte.verification .card_container .message,
body.carte_facebook .card_container .message {
  margin: 0 auto;
  background: #FFF;
  width: 474px;
  padding: 20px;
  font-family: 'Amaranth', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  text-align: left;
  line-height: 1.3em;
  margin-bottom: 15px;
}

body.carte.verification .clear {
  clear: both;
}

body.carte.verification .card_container #recap {
  width: 500px;
  margin: 10px auto;
  font-family: 'Amaranth', sans-serif;
  font-size: 16px;
  font-weight: 400;
}

body.carte.verification .card_container h2 {
  color: #000;
  margin: 0 0 10px;
  font-size: 18px;
  font-family: Arial, sans-serif;
  font-weight: 700;
  background: #ffe400;
  border: 2px dashed #000;
  padding: 10px;
  text-align: center;
  line-height: 1.4em;
}

body.carte.verification .zone_boutons {
  text-align: center;
}


/* Styles pour l'habillage de carte */

.habillage-section{
  width:90%;
  margin:10px auto;
}

.habillage-container {
    width:470px;
    margin:0 auto;
    border: 1px solid white;
    background: transparent;
    padding: 20px;
    border-radius: 5px;
}

.habillage-container .habillage-main-title {
    color: black  !important;
    text-transform: uppercase  !important;
    text-align: center  !important;
    margin: 10px auto 20px auto !important;
    padding:0 !important;
    font-size: 18px;
    font-weight: bold;
    background:none !important;
    border:none !important;
}
.habillage-container .section-title {
    color: black;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: bold;
    background:none;
    border:none;
    margin:0 !important;
}

.couleurs-section{
  margin-top:10px;
}
.couleurs-grid-small {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.couleur-option-small {
    width: 60px;
    height: 43px;
    background: white;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
}

.couleur-option-small.active {
    border-color: #ffae00;
}

.couleur-option-small:hover {
    border-color: #ffae00;
    opacity: 0.8;
}

.couleur-pastille {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
}

.section-subtitle {
    color: black !important;
    font-size: 14px;
    margin: 0 0 10px 0;
    font-weight: normal;
    text-align: left;
}

.personnage-choice {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    justify-content: center;
}

.choice-btn {
    background: transparent;
    border: 1px solid white;
    color: black;
    padding: 11px 23px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.2s;
}

.choice-btn.active {
    background: white;
    color: black;
}

.choice-btn:hover {
    background:white;
}

/* Critères personnage */
.criteres-box {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-top: 0;
}

.criteres-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.critere-sexe {
    display: flex;
    gap: 15px;
}

.radio-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: black;
    font-size: 14px;
}

.radio-option input {
    margin-right: 8px;
}

.critere-peau {
    display: flex;
    align-items: center;
    gap: 10px;
}

.label-peau {
    color: black;
    font-size: 14px;
}

.pastilles-peau {
    display: flex;
    gap: 8px;
}

.pastille-peau {
    cursor: pointer;
}

.pastille-peau input {
    display: none;
}

.radio-option input:checked + span {
    font-weight: bold;
    color: #ffae00;
}

.pastille-couleur {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid transparent;
    display: block;
    transition: border-color 0.2s;
}

.pastille-peau input:checked + .pastille-couleur {
    border-color: #000000;
}
.criteres-box{
  width:100%;
  text-align: center
}

.btn-personnaliser {
    background: #a7ff00 !important;
    color: black;
    border: none;
    padding: 15px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    margin: 0 auto 20px auto;
}
.btn-personnaliser-disabled {
    background: #ccc !important;
    cursor: not-allowed !important;
}

.btn-personnaliser-enabled {
    background: #ffae00 !important;
    cursor: pointer !important;
}

.close-modal {
    position: absolute;
    top: 0%;
    right: 5%;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    z-index: 1000;
    width: 10px !important;
    min-width: 10px;
}


/* Styles pour la section personnages */
.personnages-section {
    margin-top: 0px;
}

.personnage-choice {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 15px;
    border: 2px solid #ddd;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.radio-option:hover {
    border-color: #007bff;
}

.radio-option input[type="radio"] {
    margin: 0;
}

.radio-option input[type="radio"]:checked + span {
    color: #007bff;
    font-weight: bold;
}

.radio-option:has(input[type="radio"]:checked) {
    border-color: #007bff;
    background-color: #f0f8ff;
}

/* Filtres */
.filtres-popup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 14px;
}

.filtre-select {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    background: white;
}

#filtres-personnage {
    margin: 20px 0;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
}

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

.filtre-group:last-child {
    margin-bottom: 0;
}

.filtre-group label:first-child {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

.filtre-group .radio-option {
    margin-right: 15px;
    padding: 6px 12px;
    font-size: 14px;
}

/* Navigation et grille personnages */
.personnages-navigation {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
}

#prev-personnages, #next-personnages {
    background: #007bff;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.3s ease;
}

#prev-personnages:hover, #next-personnages:hover {
    background: #0056b3;
}

.personnages-grid-container {
    flex: 1;
    overflow: hidden;
}

.personnages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.personnage-option {
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.personnage-option:hover {
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0,123,255,0.15);
}

.personnage-option.active {
    border-color: #007bff;
    background-color: #f0f8ff;
}

.personnage-option img {
    width: 100%;
    max-width: 80px;
    height: auto;
    max-height: 100px;
    object-fit: contain;
    margin-bottom: 8px;
}

.personnage-option span {
    display: block;
    font-size: 11px;
    color: #666;
    font-weight: 500;
}

/* Zone photo */
#zone-photo {
    text-align: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}

.modal-personnage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content-personnage {
    width: 360px;
    height: 600px;
    background: white;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.titre-ecran {
    text-align: center;
    color: black;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 16px;
}

.personnage-preview {
    text-align: center;
    margin-bottom: 20px;
}

.vignette-personnage {
    width: 66px;
    height: 114px;
    border: 2px solid transparent;
    cursor: pointer;
    border-radius: 5px;
    overflow: hidden;
}

.vignette-personnage.active {
    border-color: #ffae00;
}

.vignette-personnage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* NAVIGATION UNIFIÉE PERSONNAGES ET COUVRE-CHEFS */

/* Conteneurs de navigation */
.vignettes-navigation,
.couvre-chefs-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 0;
}

/* Conteneurs des grilles */
.vignettes-container,
.chapeaux-container {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* Grilles d'éléments */
.vignettes-grid,
.chapeaux-grid {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* FLÈCHES UNIFIÉES */
.nav-arrow,
#prev-vignettes,
#next-vignettes,
#prev-chapeaux,
#next-chapeaux {
    background: #e0e0e0;
    border: 1px solid #ccc;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.nav-arrow:hover,
#prev-vignettes:hover,
#next-vignettes:hover,
#prev-chapeaux:hover,
#next-chapeaux:hover {
    background: #666;
    color: #fff;
    border-color: #555;
}

.nav-arrow:disabled,
#prev-vignettes:disabled,
#next-vignettes:disabled,
#prev-chapeaux:disabled,
#next-chapeaux:disabled {
    background: #f5f5f5;
    color: #ccc;
    cursor: not-allowed;
    border-color: #ddd;
}

/* VIGNETTES PERSONNAGES */
.vignette-personnage {
    width: 66px;
    height: 114px;
    border: 2px solid transparent;
    cursor: pointer;
    border-radius: 5px;
    overflow: hidden;
}

.vignette-personnage.active {
    border-color: #ffae00;
}

.vignette-personnage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* VIGNETTES COUVRE-CHEFS */
.couvre-chef-option {
    display: inline-block;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 5px;
    padding: 5px;
}

.couvre-chef-option:hover {
    border-color: #ffae00;
}

.couvre-chef-option.active {
    border-color: #ffae00;
    background-color: rgba(255, 174, 0, 0.1);
}

/* PREVIEW PERSONNAGE */
.personnage-preview {
    text-align: center;
    margin-bottom: 20px;
}

.boutons-ecran {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.btn-continuer {
    background: #ffae00;
    border: none;
    color: black;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

.btn-continuer:hover {
    background: #e69900;
}

.zone-principale-photo {
    position: relative;
    height: 400px;
}

.overlay-charger-photo {
    background-color: rgba(255, 255, 255, 0.6) !important; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    height:500px;
}

.btn-charger-photo {
    background: #ffae00;
    color: black;
    border: none;
    padding: 12px 24px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    text-transform: uppercase;
    position: absolute;
    top: 100px;
}

.contenu-desactive {
    opacity: 0.6 !important;
    pointer-events: none;
}

.contenu-actif {
    opacity: 1;
    pointer-events: auto;
}

.photo-zone {
    text-align: center;
    margin: 20px 0 0 0;
}

#canvas-photo {
    border: none;
    cursor: move;
}

.instructions-photo {
    text-align: center;
    font-size: 13px;
    color: #6b6b6b;
    margin: 10px 0 0 0;
    line-height: 1.3em;
}

.controls-curseurs {
    margin: 5px 0 0 0;
}

.controls-curseurs label {
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: normal !important;
    color: #000000 !important;
    display: block !important;
    text-align: center !important;
    margin-bottom: 0px !important;
    text-transform: uppercase;
}

.curseur-taille, .curseur-rotation {
    margin-bottom: 8px;
}

.curseur-container {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

#curseur-taille {
    width: 125px !important;
    height: 7px !important;
    background: #ffebb8 !important;
    border-radius: 3px !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

#curseur-taille::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #ffce50 !important;
    cursor: pointer !important;
    border: 2px solid white !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

#curseur-taille::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #ffce50 !important;
    cursor: pointer !important;
    border: none !important;
}

#curseur-taille::-moz-range-track {
    height: 6px !important;
    background: #ddd !important;
    border-radius: 3px !important;
}

#curseur-rotation {
    width: 125px !important;
    height: 7px !important;
    background: #ffebb8 !important;
    border-radius: 3px !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

#curseur-rotation::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #ffce50 !important;
    cursor: pointer !important;
    border: 2px solid white !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

#curseur-rotation::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #ffce50 !important;
    cursor: pointer !important;
    border: none !important;
}

#curseur-rotation::-moz-range-track {
    height: 7px !important;
    background: #ddd !important;
    border-radius: 3px !important;
}

.curseur-plus, .curseur-moins, .curseur-gauche, .curseur-droite {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #c3c3c3;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #666;
}

.curseur-plus:hover, .curseur-moins:hover, .curseur-gauche:hover, .curseur-droite:hover {
    opacity: 0.7; /* Effet visuel au survol */
}

.btn-precedent, .btn-annuler {
    background:transparent;
    border: 1px solid #979797;
    color: black;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 5px;
    opacity:0.7;
    margin: 0 50px 0 0;
}
.btn-precedent:hover {
    opacity:1;
}


/* Zone d'affichage principale */
.photo-display-zone {
    text-align: center;
    margin-bottom: 20px;
}

.display-container {
    position: relative;
    display: inline-block;
    border: 2px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

#photo-canvas {
    display: block;
    background: #f5f5f5;
}

#couvre-chef-overlay {
    position: absolute;
    top: 0;
    left: -5px; /* Correction du décalage */
    width: 600px;
    height: 567px;
    pointer-events: none;
}

#couvre-chef-overlay img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Zone de calage photo */
.photo-controls {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
}

.control-group {
    text-align: center;
}

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

.control-group button {
    background: #007bff;
    color: white;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 4px;
    cursor: pointer;
    margin: 2px;
    font-size: 14px;
    transition: background 0.3s ease;
}

.control-group button:hover {
    background: #0056b3;
}

#scale-value {
    display: inline-block;
    min-width: 50px;
    font-weight: bold;
    color: #333;
}

/* Couvre-chefs */


.couvre-chef-option {
    display: inline-block;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 5px;
    padding: 5px;
}

.couvre-chef-option:hover {
    border-color: #ffae00;
}

.couvre-chef-option.active {
    border-color: #ffae00;
    background-color: rgba(255, 174, 0, 0.1);
}


/* Boutons de validation */
.modal-actions {
    text-align: center;
    padding-top: 15px;
    border-top: 1px solid #ddd;
    gap: 15px;
    display: flex;
    justify-content: center;
}

.modal-actions .btn {
    padding: 10px 25px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s ease;
}

.btn-primary {
    background: #007bff;
    color: white;
}

.btn-primary:hover {
    background: #0056b3;
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #545b62;
}

/* Positionnement responsive du personnage */
.personnage-sur-carte {
    position: absolute !important;
    top: 0%;
    left: 8%;
    /* top: -50px;
    left: 100px; */
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}
.personnage-sur-carte,
.personnage-responsive {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    pointer-events: none;
    -webkit-touch-callout: none;
}
.personnage-responsive {
    width: 205px;
    height: auto;
    max-width: 205px;
}

body.carte.verification .card_container #zoneVideo,
body.carte.visualisation .card_container #zoneVideo {
  position: relative;
  z-index: 2;
}




/* Page ENVOI  */

body.carte.partage .card_container {
  width: 100%;
}

body.carte.partage #main {
  font-size: 1.3em;
}

body.carte.partage .bravo {
  width: 90%;
  padding: 25px;
  font-weight: 400;
  line-height: 1.3em;
  margin: 0 auto;
  background: #FFF;
  border: 1px solid #C5C5C5;
  font-size: 18px;
  font-family: Arial, sans-serif;
}

body.carte.partage h1 {
  color: #000;
  font-size: 1.4em;
  font-weight: 400;
  padding: 0;
  line-height: 1.3em;
  display: block;
  margin-bottom: 20px;
  text-align: center;
}

body.carte.partage p.envoi_ok {
  margin: 10px 0;
  text-align: center;
  line-height: 1.3em;
}

body.carte.partage .info {
  margin: 20px 0;
  padding: 20px;
  border: 5px solid #ffe28a;
  font-size: .8em;
}

body.carte.partage .tab {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

body.carte.partage .tab .col {
  flex: 0 0 48%;
  margin-bottom: 15px;
  width: 100%;
}

body.carte.partage .share-button .button {
  display: block;
  width: 100%;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  text-decoration: none;
  margin-bottom: 5px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .9em;
  line-height: 1.2em;
  box-sizing: border-box;
}

body.carte.partage .fbshare .button {
  background-color: #3b5998;
  color: #fff;
}

body.carte.partage .twshare .button {
  background-color: #1DA1F2;
  color: #fff;
}

body.carte.partage .whatshare .button {
  background-color: #25D366;
  color: #fff;
}

body.carte.partage .smsshare .button {
  background-color: #5bc0de;
  color: #fff;
}

body.carte.partage .button[style*="cursor: not-allowed"] {
  background-color: #ccc !important;
  color: #666 !important;
}

body.carte.partage .explication {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
  text-align: center;
}

[style*="cursor: not-allowed"] {
  background-color: #ccc !important;
  color: #666 !important;
}

body.carte.partage .link-share-container {
  width: 100%;
}

body.carte.partage h2.copiez {
  font-size: 20px;
  text-align: left;
}

body.carte.partage .link-share-container .input-group {
  width: 100%;
}

body.carte.partage .link-share-container input.form-control {
  width: 80%;
}

body.carte.partage .link-share-container .btn-success {
  background-color: #28a745;
  color: #fff;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  text-decoration: none;
  padding: 10px 25px;
  border: none;
  font-size: 1.1em;
}

body.carte.partage .copy-confirmation {
  text-align: left;
  font-size: 1.1em;
  color: #28a745 !important;
  font-weight: 700;
  padding: 5px;
}

/* Styles communs */

body.carte h1 {
  font-family: 'Amaranth', sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #1182a8;
  padding: 0 0 10px 0;
  text-align:left;
  line-height:1.3em;
}

body.carte #zoneInfoPremium {
  display: block;
  padding: 10px;
  margin: 5px 0 0;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.1em;
  width: auto;
}

body.carte .vignetteCarte {
  display: block;
  border: 5px solid #FFF;
  width: 207px;
  margin: 0 auto;
}

body.carte #texteInfoPremium {
  display: block;
  font-size: 16px;
  width: 100%;
  margin: 0 auto 15px;
  text-align: center;
}

body.carte #texteInfoPremium #infoPremium {
  margin: 10px 0;
  padding: 5px;
  border: 1px dashed #4AABCB;
  font-weight: 700;
}

body.carte #texteInfoPremium ul li {
  list-style-type: none;
  line-height: 1.3em;
}

body.carte #zoneInfoPremium p {
  display: inline-block;
}

body.carte #texteInfoPremium a {
  text-decoration: underline;
}

body.carte #texteInfoPremium a:hover {
  color: #127798;
}


/* Page VISUALISATION */

body.carte.visualisation {
  min-height:100%;
}

body.carte.visualisation #header {
  display:none !important;
}

body.carte.visualisation body {
  margin:0;
  padding:0;
}

body.carte.visualisation #master {
  background: none;
  margin:0;
  padding:0;
  min-height:900px;
  background: #2bb7e3;
}

body.carte.visualisation #tmv_headline,
body.carte.visualisation #logo{
  display:none !important;
}

body.carte.visualisation #main{
  margin:0 !important;
  padding:0 !important;
}

body.carte.visualisation .date_container{
  width:100%;
  padding:5px auto !important;
  text-align:center;
}

body.carte.visualisation .date-envoi{
  color: #000000ff;
  font-size: 12px;
}

body.carte.visualisation .card_container {
  width: 980px;
  margin: 0 auto;
  background:none;
  border:none;
}

body.carte.visualisation #logo_inpage {
    margin: 60px auto 20px auto;
    max-width: 250px;
}

body.carte.visualisation #main h2 {
  font-family: 'Amaranth', sans-serif;
  font-size: 22px;
  font-weight: 400;
  color: #1581a1;
  font-style: italic;
  padding: 5px 0;
}

body.carte.visualisation div.wrapper {
  text-align: center;
  width: 997px;
  margin: 10px auto 0 0;
  padding-bottom: 0;
}

/* body.carte.visualisation .card_container {
  padding: 5px 0 30px 0;
} */


body.carte.visualisation .card_container object,
body.carte.visualisation .card_container #flashDiv {
  display: inline-block;
  vertical-align: top;
}

body.carte.visualisation .card_container .message,
body.carte.verification .card_container .message,
body.carte_facebook .card_container .message {
  margin: 0 auto;
  background: #FFF;
  width: 474px;
  padding: 20px;
  font-family: 'Amaranth', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000;
  text-align: left;
  line-height: 1.3em;
  margin-bottom: 15px;
 -webkit-box-shadow: 0px 6px 5px -2px rgba(0,0,0,0.59); 
  box-shadow: 0px 6px 5px -2px rgba(0,0,0,0.59);
}

body.carte.visualisation .card_container .message h4 {
  font-style: normal;
  font-size: 18px;
  font-weight: 400;
  margin: 0 0 10px;
  padding: 0;
  color: #1581ac;
  display: block;
  border-bottom: 1px solid #afdfeb;
}

body.carte.visualisation .card_container .persoTexte1 {
  font-style: bold;
  font-size: 18px;
  font-weight: 400;
  margin: 0 0 10px;
  padding: 0;
  color: #000;
}

body.carte.visualisation .btn-envoyer-carte {
    display: inline-block;
    padding: 12px 24px;
    background: transparent;
    border-right: 2px solid rgba(255, 255, 255, 0.7);
    border-left: 2px solid rgba(255, 255, 255, 0.7);
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    text-decoration: none;
    text-align: center;
    font-weight: 500;
}

body.carte.visualisation .btn-envoyer-carte:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.9);
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
    border-top: 2px solid rgba(255, 255, 255, 0.7);
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
}

body.carte.visualisation .envoyer_carte {
    text-align: center;
    margin: 30px 0;
}

/* Styles pour l'enveloppe */
.card_container.w500h690 {
  background: #afdfeb url(../img/front/enveloppe_big2.png) top left no-repeat;
  border-radius: 20px;
  height: 800px;
  -moz-box-shadow: 1px 2px 7px #777;
  -webkit-box-shadow: 1px 2px 7px #777;
  box-shadow: 1px 2px 7px #777;
  margin-bottom: 20px;
}


body.carte.message .card_container.w500h690 {
  background: #afdfeb url(../img/front/enveloppe_big2.png) top left no-repeat;
}

body.carte.enveloppe .card_container.w500h690 {
  background: #afdfeb url(../img/front/enveloppe_envoi_big.png) top left no-repeat;
}

body.carte.verification .card_container.w500h690 {
  background: #afdfeb;
}

body.carte.visualisation .card_container.w500h690 {
  background: #afdfeb url(../img/front/enveloppe_visualisation_big.png) top left no-repeat;
}

body.carte.visualisation .card_container.w500h690.message {
  background: #afdfeb url(../img/front/enveloppe_visualisation_message_big.png) top left no-repeat;
}

body.carte.visualisation .card_container.w500h690 p.message {
  background: transparent url(../img/front/bg_visualisation_message_big.png) bottom left no-repeat;
  padding-top: 30px;
}


body.carte.verification #footer,
body.carte.visualisation #footer {
    min-width: 1000px;
    background: none;
    border-top:0;
    margin-bottom: 0;
    width: 100%;
}
body.carte.verification #footerContent,
body.carte.visualisation #footerContent {
    width: 996px;
    margin: 0;
    display: none;
}
body.carte.verification #footer #footerContent #fullWidth .presentation,
body.carte.visualisation #footer #footerContent #fullWidth .presentation {
    margin: 0;
    padding: 5px;
    text-align: justify;
    color: #FFF;
    font-size: 12px;
    line-height: 1.4em;
    color: black;
    margin-bottom: 15px;
    display: none;
}
body.carte.verification #footer #zone4,
body.carte.visualisation #footer #zone4{
  clear: both;
  background: #d5e3e7;
  border: none;
  margin-top: 0;
}
body.carte.verification #footer #zone4 #bottom_links, 
body.carte.verification #footer #zone4 #bottom_links a,
body.carte.visualisation #footer #zone4 #bottom_links, 
body.carte.visualisation #footer #zone4 #bottom_links a {
    color: #8f9597 !important;
}
body.carte.verification #footer #zone4 #bottom_links, 
body.carte.verification #footer #zone4 #bottom_links a:hover,
body.carte.visualisation #footer #zone4 #bottom_links, 
body.carte.visualisation #footer #zone4 #bottom_links a:hover {
    color: #6c6f7 !important;
}

/* Styles pour le composant "siblings" */
body.carte #siblings {
  margin-top: 10px;
  padding-bottom: 0;
}

body.carte #siblings .bandeau {
  position: relative;
}

body.carte #siblings h2 {
  background: #ffa401;
  color: #000;
  font-family: 'Amaranth', sans-serif;
  font-weight: 400;
  padding: 5px 5px 5px 15px;
  -moz-border-top-left-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
  -moz-border-top-right-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
  margin-bottom: 0;
  font-size: 15px;
  font-weight: 400;
}

body.carte #siblings h2.category {
  margin-left: 5px;
  text-transform: uppercase;
}

body.carte #siblings h2 a {
  color: #000;
  text-decoration: underline;
}

body.carte #siblings h2 a:hover {
  color: #FFF;
}

body.carte #siblings .plus {
  position: absolute;
  top: 5px;
  right: 15px;
  display: block;
  height: 22px;
  vertical-align: bottom;
  font-size: 13px;
  font-weight: 400;
}

body.carte #siblings .plus a {
  color: #000;
  text-decoration: underline;
}

body.carte #siblings .plus a:hover {
  color: #fff;
}

body.carte #siblings .plus:first-letter {
  text-transform: capitalize;
}

body.carte #siblings ul {
  background: #fff;
  padding: 0 10px 10px 25px;
  -moz-border-bottom-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

body.carte #siblings li {
  display: inline-block;
  border: none;
  width: 237px;
  background: none;
  margin: 0;
  text-align: left;
  padding: 0;
  vertical-align: top;
  position: relative;
}

body.carte #siblings li .title {
  text-align: center;
  line-height: 1.2em;
  font-family: arial, sans-serif;
  width: 215px;
  padding: 2px 5px;
  margin-top: 3px;
  font-weight: 700;
  font-size: 14px;
}

body.carte #siblings li .title a {
  color: #000;
}

body.carte #siblings img {
  border: 1px solid #ddd;
  background: #fff;
  padding: 5px;
  margin-top: 5px;
  vertical-align: top;
}

body.carte #siblings img:hover {
  background: #a0dff1;
}


body.carte #tags {
  margin-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  font-family: Arial, sans-serif;
  border-bottom: 1px solid #dbf2fa;
}

body.carte #tags a {
  padding: 1px;
  color: #5da9c4;
  display: inline-block;
  font-size: 11px;
  margin-bottom: 2px;
  text-decoration: underline;
}

body.carte #tags a:hover {
  background: #b4e9fc;
}

/* Styles communs pour les cartes au format 500x690 */
.card_container.w500h690 {
    background:#afdfeb url(../img/front/enveloppe_big2.png) top left no-repeat;
    border-radius:20px;
    height:800px;
    -moz-box-shadow:1px 2px 7px #777;
    -webkit-box-shadow:1px 2px 7px #777;
    box-shadow:1px 2px 7px #777;
    margin-bottom:20px
}

body.carte.message .card_container.w500h690 {
    background:#afdfeb url(../img/front/enveloppe_big2.png) top left no-repeat
}

body.carte.enveloppe .card_container.w500h690 {
    background:#afdfeb url(../img/front/enveloppe_envoi_big.png) top left no-repeat
}

body.carte.verification .card_container.w500h690 {
    background:#afdfeb
}

body.carte.visualisation .card_container.w500h690 {
    background:#afdfeb url(../img/front/enveloppe_visualisation_big.png) top left no-repeat
}

body.carte.visualisation .card_container.w500h690.message {
    background:#afdfeb url(../img/front/enveloppe_visualisation_message_big.png) top left no-repeat
}

body.carte.visualisation .card_container.w500h690 p.message {
    background:transparent url(../img/front/bg_visualisation_message_big.png) bottom left no-repeat;
    padding-top:30px
}