body {
  font-family: Inter, sans-serif;
  margin: 0;
  padding: 0;
  
  overflow: hidden;
}

html, body {
/* Empêche la sélection de texte au niveau global */
-webkit-user-select: none;  /* Chrome/Safari/Opera */
-moz-user-select: none;     /* Firefox */
-ms-user-select: none;      /* Internet Explorer/Edge */
user-select: none;          /* Standard */
}

img {
-webkit-user-drag: none; /* Chrome, Safari, etc. */
-moz-user-drag: none;    /* Firefox (non-standard) */
-o-user-drag: none;      /* Opera (non-standard) */
user-drag: none;         /* Standard (pas encore partout) */
}


#canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  z-index: 0;
}

.text-gris {
  font-size: 14px;
  font-weight: 700!important;
  text-align: left!important;
  color: #333333;
  margin-top:10px;
  margin-bottom:0px;
}


/* Container principal */
#controls {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}

.top-controls {
display: flex;
gap: 20px;
margin-bottom: 20px;
}

.menu-item {
position: relative;
}


.menu-label-size {
cursor: pointer;
font-weight: bold;
color: #444;
padding: 8px 12px;
transition: background 0.2s;
border-radius:10px;
}
.menu-label-size:hover {
border-radius:10px;
color: #fff;
background:#6CA7FD;
}

body.dark-mode .menu-label-size{
color: #fff;
}


.menu-label-profile {
cursor: pointer;
font-weight: bold;
color: #444;
padding: 8px 12px;
transition: background 0.2s;
border-radius:10px;
}
.menu-label-profile:hover {
border-radius:10px;
color: #fff;
background:#FD6B88;
}

body.dark-mode .menu-label-profile{
color: #fff;
}

.menu-label-layout {
cursor: pointer;
font-weight: bold;
color: #444;
padding: 8px 12px;
transition: background 0.2s;
border-radius:10px;
}
.menu-label-layout:hover {
border-radius:10px;
color: #fff;
background:#FDA16B;
}

body.dark-mode .menu-label-layout{
color: #fff;
}

.menu-label-standard {
cursor: pointer;
font-weight: bold;
color: #444;
padding: 8px 12px;
transition: background 0.2s;
border-radius:10px;
}
.menu-label-standard:hover {
border-radius:10px;
color: #fff;
background:#0EE920;
}

.menu-label-switch {
cursor: pointer;
font-weight: bold;
color: #444;
padding: 8px 12px;
transition: background 0.2s;
border-radius:10px;
}
.menu-label-switch:hover {
border-radius:10px;
color: #fff;
background:#ffc107;
}

body.dark-mode .menu-label-switch{
color: #fff;
}

body.dark-mode .menu-label-standard{
color: #fff;
}

.color-text-menu {
  font-size:16px;
  color:#000000;
  font-weight:700;
}

body.dark-mode .color-text-menu{
color: #fff;
}

.submenu {
display: none;
position: fixed;
top: 100%;
left: 0;
border-radius: 10px;
margin-left:-300px;
margin-top:0px;
padding:10px 20px;
width: 1200px;            
max-height: 600px;       
white-space: nowrap;     
overflow-x: auto;        
overflow-y: auto;      
cursor: grab;
z-index:99999999999999999;
background: rgba(255, 255, 255, 1);
-webkit-backdrop-filter: blur(7px);
backdrop-filter : blur(4em);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 
  0 8px 32px rgba(0, 0, 0, 0.1),
  inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body.dark-mode .submenu {
  background: #444444;
}



.menu-item:hover .submenu {
display: block;
}
.submenu-option:hover {
transform:translateY(-10px) scale(1.05);
box-shadow:0 10px 20px rgba(0,0,0,0.2);
}
.submenu-option {
  position: relative;
  width: 250px;
  height:250px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  margin-right: 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.submenu-option.disabled {
pointer-events: none;
filter: grayscale(100%);
opacity: 0.5;
}

/* Overlay gris semi-transparent */
.overlay {
  position: absolute;
  border-radius: 10px;
  width: 100%;
  height: 100%;
}

/* Texte "Prochainement" centré au-dessus de l'overlay */
.prochainement-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  z-index: 2; /* Texte au-dessus de l'overlay */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Ombre pour rendre le texte plus lisible */
}

/* Switch menu layout */
.switch-category {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
.switch-options {
display: flex;
gap: 8px;
}

.keyboard-category {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.keyboard-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #000;
}

body.dark-mode .keyboard-title {
  color: #fff;
}

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

.keyboard-options .submenu-option {
  margin-right: 0;
}
.switch-title {
font-weight: bold;
margin: 10px 0px 10px;
font-size:24px;
}

body.dark-mode .submenu-option {
    background: #444;
}

.submenu-option img {
width: 100%;
height: 100%;
object-fit: contain;
margin-bottom: 6px;
border-radius: 10px;
}

body.dark-mode .submenu-option img {
filter: brightness(0) invert(1);
}


.info-row {
display: flex;
justify-content: space-between;
width: 100%;
font-size: 14px;
}

/* ----- pourcentage à gauche ----- */
.size {
font-weight: bold;
color:#fff;
font-size: 18px;
position: absolute;
top: 8px;
left: 8px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 
  0 8px 32px rgba(0, 0, 0, 0.1),
  inset 0 1px 0 rgba(255, 255, 255, 0.5);
padding:6px 14px;
border-radius:10px;
}

.size-noir {
  font-weight: bold;
  color:#000;
  font-size: 18px;
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  padding:6px 14px;
  border-radius:10px;
}

/* Badges for template information */
.template-badge {
  position: absolute;
  font-weight: bold;
  font-size: 16px;
  color: #000!important;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  padding: 6px 14px;
  border-radius: 10px;
  z-index: 2;
}

.template-size { top: 8px; right: 8px; }
.template-standard { bottom: 8px; left: 8px; }
.template-layout { bottom: 8px; right: 8px; }

body.dark-mode .size {
color: #fff;
}

.submenu-option.promo-wrapper {
position: relative;
/* vous pouvez conserver tout autre style existant */
}

/* 2) Style de l’étiquette “promo – 20 %” */
.submenu-option .promo-label {
position: absolute;
top: 8px;     /* espace depuis le haut du conteneur */
right: 8px;   /* espace depuis le bord droit du conteneur */
font-size: 14px;
font-weight: bold;
color: #9b52e0;
background: #fff;
 border: 1px solid #9b52e0;
padding: 2px 6px;
border-radius: 4px;
}

.promo {
font-size: 14px;
font-weight: bold;
color: #9b52e0;
background: #fff;
 border: 1px solid #9b52e0;
padding: 2px 6px;
border-radius: 4px;
}

/* ----- conteneur à droite, en ligne, aligné sur le bas ----- */
.price-container {
display: flex;
align-items: flex-end; /* aligne price et price-promo sur leur bas */
gap: 8px;             /* espace entre les deux prix (facultatif) */
position: absolute;
bottom: 8px;
right: 8px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 
  0 8px 32px rgba(0, 0, 0, 0.1),
  inset 0 1px 0 rgba(255, 255, 255, 0.5);
padding:6px 14px;
border-radius:10px;
}

.price-container-cta {
display: flex;
align-items: flex-end; /* aligne price et price-promo sur leur bas */
gap: 8px;             /* espace entre les deux prix (facultatif) */
}

/* ----- style de price (existant) ----- */
.price {
color: #fff;
font-style: italic;
font-weight: bold;
font-size: 16px;
}

/* ----- style de price-promo : barré, plus petit, couleur atténuée ----- */
.price-promo {
text-decoration: line-through;
font-size: 12px;   /* plus petit que price */
color: #999;
}


body.darkmode .price {
color: #fff;
font-style: italic;
font-size:16px;
}



.bottom-left-text-gris .text-gris {
color: #888;
font-weight: bold;
}


.bottom-left {
margin-bottom: 30px;
}


body.dark-mode .text-config-recap {
color: #fff;
}

body.dark-mode .recap-line select {
color: #fff!important; /* Texte du select en mode sombre */
}

body.dark-mode .recap-line select option {
color: #fff!important;
}

/* Zone du formulaire de config */
.bottom-controls-left {
background-color: #f9f9f9;
padding: 15px;
border-radius: 6px;
}

body.dark-mode  .bottom-controls-left {
background-color: #444444;

}

.control-group h3 {
margin-top: 0;
margin-bottom: 10px;
}

body.dark-mode .control-group h3 {
color: #fff;
}

.recap-line {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}

.recap-line p {
margin: 0;
}

body.dark-mode .recap-line p {
color: #fff;
}

.recap-line select {
padding: 5px;
background-color: rgba(170, 187, 204,0);
}

body.dark-mode .recap-line select {
color: #fff;
background-color: rgba(170, 187, 204,0);
}



.top-controls {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 20px;
padding: 10px 20px;
border-radius: 8px;
z-index: 1;
 background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 
  0 8px 32px rgba(0, 0, 0, 0.1),
  inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body.dark-mode .top-controls {
background-color: #444444;
}


.hover-dropdown {
position: relative;
display: inline-block;
}


.hover-dropdown select {
display: none;
position: absolute;
top: 100%;
left: 0;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
background: #fff;
border-radius: 4px;
min-width: 120px;
border: 1px solid #ccc;
}

.label-menu {
  margin: 2px 40px 0px 0px;
}


.hover-dropdown:hover select {
display: block;
}



.bottom-controls {
  position: fixed;
  bottom: 5px;
  right: 5px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  z-index: 1;
}

.bottom-controls-left {
position: fixed;
bottom: 20px;
left: 25px;
display: flex;
align-items: flex-start;
padding: 10px 20px;
z-index: 10;
flex-direction: column;
background: #fff;
border-radius: 15px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 
  0 8px 32px rgba(0, 0, 0, 0.1),
  inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.menu-toggle,
.recap-toggle{
position:fixed;
width:40px;
height:40px;
background:rgba(255,255,255,0.9);
border:none;
border-radius:8px;
z-index:20;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
box-shadow:0 2px 6px rgba(0,0,0,0.2);
}

.menu-toggle{top:20px;left:20px;}
.template-toggle{
position:fixed;
top:20px;
left:20px;
height:40px;
padding:0 12px;
background:rgba(255,255,255,0.9);
border:none;
border-radius:8px;
z-index:20;
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
box-shadow:0 2px 6px rgba(0,0,0,0.2);
cursor:pointer;
transition:transform .2s,background-color .2s,color .2s;
}

.template-toggle:hover{
transform:scale(1.1);
background:#000;
color:#fff!important;
}

.template-toggle-mobile{
display:none;
}
.recap-toggle{bottom:20px;left:20px;}

@media (max-width:768px){
.template-toggle{
  top:70px;
  left:20px;
  right:auto;
}
}


@media (min-width:769px){
.menu-toggle,
.recap-toggle{display:none;}
}
.left-middle-controls {
position: fixed;
bottom: 350px;
left: 25px;
display: flex;
align-items: flex-start;
padding: 10px 20px;
z-index: 1;
flex-direction: column;
background: #fff;
border-radius: 15px;
}


.text-config-recap {
  font-size: 24px;
  font-weight: 700!important;
  margin: 10px 0px 10px 0px;
  text-align: left!important;
  color: #444;
}
.control-group h3 {
margin-top: 0;
margin-bottom: 1px;
font-size: 18px;
color: #444;
}

.recap-line {
display: flex; 
justify-content: space-between;
align-items: center;
width: 250px;
}

.recap-line p {
text-align: left;  
margin-right: 1rem;  
font-size: 14px;
color: #444;
margin-bottom:0px!important;
}

.recap-line span {
text-align: right;
flex-shrink: 0;
font-size: 14px;
color: #444;
font-weight: 700;
margin-bottom:0px!important;
}

@keyframes gradientBackground {
  0% {
    background-color: #33A370;
  }
25% {
    background-color: #1572FC;
  }
  50% {
    background-color: #FF8319;
  }
75% {
    background-color: #FFD441;
  }
  100% {
    background-color: #FF4375;
  }
}
.animation-bouton {
  animation: gradientBackground 10s infinite alternate;
  border: none;
  padding: 15px 15px;
  border-radius: 15px;
  font-size: 18px!important;
  color: white!important;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  display: inline-block;
}

.control-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

label {
  font-weight: bold;
  margin-bottom: 5px;
}



button {
  background-color: #ff4d4d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 10px 20px;
}


select,
input[type="number"],
button {
border: none !important;
text-align: right;
flex-shrink: 0;
font-size: 14px !important;
color: #444 !important;
font-weight: 700 !important;
margin-bottom: 0px !important;
}


select {
-webkit-appearance: none;
-moz-appearance: none; 
appearance: none;         
background-image: none !important;

}

select::-ms-expand {
display: none;
}

input[type="number"] {
-moz-appearance: textfield;
}

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



button:hover {
  background-color: #ff6666;
}

/* ============================
 1) Style du conteneur général
 ============================ */
.control-group {
display: flex;
flex-direction: column;
gap: 0;                /* on gère les marges soi-même si besoin */
}

/* =========
 2) "Total"
 ========= */
.control-group {
margin: 0;
text-align: right;
color: #777;   /* exemple : gris moyen */
font-size: 14px;
}

/* =============================================
 3) Conteneur des deux prix (soldé + barré)
 ============================================= */
.price-container {
display: flex;
align-items: flex-end; /* aligne price et price-promo sur leur base */
gap: 8px;              /* espace fixe entre les deux spans */
}

/* ======================
 4) Prix soldé (id="price-display")
 ====================== */
#price-display {
font-size: 28px;           /* plus grand */
font-weight: 700 !important;
text-align: right;
color: #333;
}

/* ====================================
 5) Prix d’origine barré (class="price-promo")
 ==================================== */
.price-promo-bottom {
text-decoration: line-through; /* barré */
font-size: 20px;               /* plus petit que 24px */
color: #999;                   /* gris atténué */
/* si vous voulez un léger décalage vertical, on peut ajouter : */
/* margin-bottom: 2px; */
}



body.dark-mode #price-display {
  color: #fff;
}


body.dark-mode #size {
  color: #fff;
}




@media (max-width: 768px) {
  .top-controls,
  .middle-controls {
      flex-direction: column;
      align-items: center;
      gap: 10px;
      left: 50%;
      transform: translateX(-50%);
  }

  .middle-controls {
      top: 0!important;
      bottom: auto!important;
      padding-top: 90px!important;
  }

  select,
  input[type="number"],
  button {
      width: 100%;
      max-width: 300px;
  }
}



.middle-controls {
display:none;
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 1;

/* Pour avoir une présentation en colonne, ou ajustée selon tes besoins */
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;

background-color: rgba(255,255,255,0.9); /* Légère transparence, par exemple */
padding: 15px 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
height:auto;
}


body.dark-mode .middle-controls {
background-color: #444444; /* Légère transparence, par exemple */
}


.controls-buttons-wrapper {
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
height:auto;
}

/* On peut styliser les boutons comme des "boutons" plus visibles */
.clickable-div {
background-color: #eee;
padding: 10px 15px;
border-radius: 5px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
user-select: none; /* pour compléter ce que tu as déjà */
}

.clickable-div:hover {
background-color: #ddd;
}

body.dark-mode .clickable-div{
background-color: #000;
color: #ffffff;
}

body.dark-mode .clickable-div:hover {
background-color: #ddd;
}


.slider-wrapper {
position: relative;
text-align: center;
width: 600px;
height: 80px ;
overflow: hidden;
padding-bottom:5px;
}

.color-circle-container {
display: flex;
width:600px;
margin-left:10px;
overflow-x: scroll;
padding-bottom: 12px;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}

.color-choice {
flex: 0 0 auto;
width: 90px;
margin-right: -8px;
text-align: center;
cursor: pointer;
}

.color-circle {
width: 35px;
height: 35px;
border-radius: 20%;
margin: 20px 0 0 27px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.color-circle-gris {
width: 35px;
height: 35px;
border-radius: 20%;
margin: 20px 0 0 27px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
background-color: #D1D2D3!important;
}

.color-circle-jaune {
width: 35px;
height: 35px;
border-radius: 20%;
margin: 20px 0 0 27px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
background-color: #FFF7AD!important;
}

.color-label {
text-align: center;
margin-top: 5px;
transition: transform 0.2s ease, color 0.2s ease;
font-size:12px;
color:#888;
}

body.dark-mode .color-label{
color: #8E8E8E;
}

body.dark-mode .color-choice:hover .color-label {
color: #ffffff;
}


.color-choice:hover .color-circle {
transform: translateY(-10px) scale(1.33);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.color-choice:hover .color-label {
transform: scale(1.2);
color: #333;
}

.arrow-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #333;
padding: 10px;
font-size: 20px;
cursor: pointer;
border-radius: 50%;
z-index: 10;
user-select: none;
transition: background 0.2s;
}

body.dark-mode .arrow-btn {
color: #ffffff;
}



#arrow-left {
left: 0px;
}

#arrow-right {
right: 0px;
}

#arrow-left-char {
left: 0px;
}

#arrow-right-char {
right: 0px;
}


.open-case {
background-color: black; 
color: white;
}

.open-char {
background-color: black; 
color: white;
}

#left-panel {
display: flex;
flex-direction: column;
gap: 10px;
color:#fff!important;
z-index: 1000; /* Pour s'assurer que le panneau soit au-dessus du canvas */
}

.left-item {
padding: 10px 10px 10px 10px;
margin-bottom:5px;
color:#fff!important;
border-radius: 10px;
cursor: pointer;
font-size: 14px;
text-align: center!important;
user-select: none; /* Pour éviter la sélection du texte au clic */
transition: top 0.8s ease, background-color 0.3s ease;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 
  0 8px 32px rgba(0, 0, 0, 0.1),
  inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.left-item:hover {
background-color: #f0f0f0;
top:-5px;
}

.left-item img {
width: 15px; /* Ajustez la taille selon vos besoins */
height: auto;
display: block;
margin: 0 auto; /* Pour centrer l'image dans le div */
color: #ffffff!important;
}

body.dark-mode #left-panel .left-item {
background-color: #444444;
color: #ffffff!important;
}

body.dark-mode #left-panel .left-item img {
/* Ce filtre rend l'image blanche en ajustant la luminosité et en inversant les couleurs */
filter: brightness(0) invert(1);
}


@keyframes gradientBorder {
0% { border-color: #33A370;} 25% { border-color: #1572FC;} 50% { border-color: #FF8319;}75% { border-color: #FFD441; } 100% {border-color: #FF4375;}
}

/* =============== GRIS =============== */
@keyframes gradientBorder-gris {
0%   { border-color: #5E6369; }   /* gris anthracite */
25%  { border-color: #9EA4AD; }   /* gris médium (origine) */
50%  { border-color: #C8CCD1; }   /* gris clair */
75%  { border-color: #E3E5E8; }   /* presque blanc */
100% { border-color: #5E6369; }
}

/* =============== JAUNE ============== */
@keyframes gradientBorder-jaune {
0%   { border-color: #FFD441; }   /* jaune (origine) */
25%  { border-color: #FFE17F; }   /* jaune pâle – éclairci */
50%  { border-color: #FFCA28; }   /* doré – plus saturé */
75%  { border-color: #FFF2AD; }   /* pastel très clair */
100% { border-color: #FFD441; }
}

/* ============== MAGENTA ============= */
@keyframes gradientBorder-magenta {
0%   { border-color: #FF4375; }   /* rose‑fuchsia (origine) */
25%  { border-color: #FF66A3; }   /* rose clair saturé */
50%  { border-color: #FF0BDC; }   /* magenta pur “néon” */
75%  { border-color: #FF83BF; }   /* rose pastel lumineux */
100% { border-color: #FF4375; }
}

/* =============== CYAN =============== */
@keyframes gradientBorder-cyan {
0%   { border-color: #1572FC; }   /* bleu vif (origine) */
25%  { border-color: #00AFFF; }   /* cyan électrique */
50%  { border-color: #33A370; }   /* vert‑bleu / teal (origine) */
75%  { border-color: #63EDFF; }   /* cyan pastel lumineux */
100% { border-color: #1572FC; }
}

.rainbow-border {
animation: gradientBorder 3s infinite alternate;
border: 2px solid #33A370;
}

.rainbow-border-jaune {
animation: gradientBorder-jaune 3s infinite alternate;
border: 2px solid #33A370;
}

.rainbow-border-gris {
animation: gradientBorder-gris 3s infinite alternate;
border: 2px solid #33A370;
}

.rainbow-border-magenta {
animation: gradientBorder-magenta 3s infinite alternate;
border: 2px solid #33A370;
}

.rainbow-border-cyan {
animation: gradientBorder-cyan 3s infinite alternate;
border: 2px solid #33A370;
}



@keyframes rainbow {
0%   { background-color: #FFEDF2; }   /* Rouge */
16%  { background-color: #FFF3E8; }   /* Orange */
33%  { background-color: #FFFBEC; }   /* Jaune */
50%  { background-color: #EBF6F1; }   /* Vert */
66%  { background-color: #E8F1FF; }   /* Bleu */
83%  { background-color: #4b0082; }   /* Indigo */
100% { background-color: #F9EDFF; }   /* Violet */
}

.rainbow-animation {
animation: rainbow 5s linear infinite;
}


.view-config-button {
background-color: #ff8239;  /* Couleur de fond personnalisée */
border: none;               /* Pas de bordure */
color: #fff;                /* Texte en blanc */
      /* Espacement interne */
text-transform: uppercase;  /* Texte en majuscules */
font-weight: bold;          /* Texte en gras */
      /* Bords arrondis */
transition: background-color 0.3s ease;
text-decoration: none;      /* Pas de soulignement */
display: inline-block;
}

.view-config-button:hover {
background-color: #fb5f00;  /* Couleur de fond au survol */
}

.color-tabs{
display:flex; gap:15px; margin-bottom:6px; flex-wrap:wrap;
justify-content:center;
align-items:center; 
}

.hidden-by-filter{
display:none !important;
}

.color-tab{
padding:6px 14px;
border-radius:10px;
font:600 12px/1 sans-serif;
cursor:pointer;
transition:transform .70s ease, background-color .0s ease, box-shadow .0s ease;
user-select:none;
}

/* agrandissement + ombre au survol (et pour l’onglet actif) */
.color-tab:hover,
.color-tab.active{
transform:scale(1.12);
box-shadow:0 3px 8px rgba(0,0,0,.25);
}

.color-tab[data-cat="RGB (Transparent)"]{
background:none; color:#000;
}
.color-tab[data-cat="Mate"]{
background:none; color:#000;
}

.color-tab[data-cat="RGB (Transparent)"]:is(:hover, .active){
/* animation déjà présente dans ta feuille */
animation: gradientBackground 3s infinite alternate;
background-color:#33A370;   /* couleur de départ (obligatoire comme fallback) */
color:#fff;
opacity:.6;
}

/* — Mate vs Pastel : dégradés distincts et colorés — */

/* ========= MATTE (Mate) ========= */
.color-tab[data-cat="Mate"]{
color:#333;
transition:background .3s ease;
}

.color-tab[data-cat="Mate"]:is(:hover, .active){
/* dégradé MAT coloré mais plus soutenu que Pastel */
background:linear-gradient(
    135deg,
    #ffb8a9 0%,   /* corail doux */
    #ffe09a 25%,  /* jaune abricot */
    #b1f5b1 50%,  /* vert menthe */
    #b1cbff 75%,  /* bleu pervenche */
    #deb1ff 100%  /* mauve vif */
);
color:#333;
}

/* ========= PASTEL ========= */
.color-tab[data-cat="Pastel"]{
transition:background .3s ease;
}

.color-tab[data-cat="Pastel"]:is(:hover, .active){
/* dégradé pastel multicolore, tout doux */
background:linear-gradient(
    135deg,
    #ffe8e1 0%,
    #fff6d9 25%,
    #e8ffe8 50%,
    #e1f0ff 75%,
    #f5e1ff 100%
);
color:#333;
}

/* ========= MODE SOMBRE ========= */
body.dark-mode .color-tab[data-cat="Mate"],
body.dark-mode .color-tab[data-cat="Pastel"]{
color:#fff;
}

body.dark-mode .color-tab[data-cat="Mate"]:is(:hover, .active),
body.dark-mode .color-tab[data-cat="Pastel"]:is(:hover, .active){
color:#000;            /* contraste intact en dark-mode */
}

/* ========= TRANSPARENT ========= */
/* — Transparent : supprime l’opacité quand il est survolé / actif — */
body.dark-mode .color-tab[data-cat="RGB (Transparent)"]:is(:hover, .active){
opacity:1;             /* plein‑feu, plus de transparence */
}


.popup-box {
    cursor: pointer;
    font-size: 14px;
    text-align: center!important;
    user-select: none;
    position: relative;
    transition: top 0.8s ease, background-color 0.3s ease;
  }

  .popup-circle {
    width: 30px;
    height: 30px;
    background-color: #fff;
    color: black;
    font-weight: bold;
    font-size: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  }

  .popup-circle:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  }


  .popup-content {
    position: fixed;
    top: 60px;
    right: 16px;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 999;
    display: none;
  }

  .popup-content h2 {
    margin-top: 0;
    font-size: 16px;
  }

  .popup-content.show {
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  
   .color-popup {
    position: fixed;
    top: 45px;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 999;
    display: none;
  }
  
  .color-popup.show {
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(10px);
  }



.indisponible-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: 800;
  color: #f8f8f8;
  z-index: 2;
  letter-spacing: 0.3px;
  text-shadow: 2px 4px 12px rgba(0, 0, 0, 0.4);
}

.color-picker-popup {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    padding: 20px;
    display: none;
    z-index: 1000;
  }

  .color-picker-popup.show {
    display: block;
  }
  
  
  /* Aperçu du clavier sélectionné */


/* Wizard popup styles */
.welcome-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.7);
display:none;
align-items:center;
justify-content:center;
z-index:2000;
touch-action: pan-y;
overscroll-behavior: contain;
}
.welcome-overlay.show{display:flex;}
#templateOverlay{
    align-items:flex-start;
    justify-content:center;
}

#templateOverlay .welcome-popup{
    margin-top:20px!important;
    align-items:flex-start;
    justify-content:flex-start;
}

.welcome-popup{
width:1200px;
height:800px;
background:linear-gradient(135deg,#ffffff,#eaf3ff);
border-radius:10px;
position:relative;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
touch-action: pan-y;
overscroll-behavior: contain;
}
body.dark-mode .welcome-popup{
background:linear-gradient(135deg,#2b2e35,#373b44);
}
.welcome-step{
position:absolute;
inset:0;
padding:40px;
box-sizing:border-box;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
overflow-y:auto;
overflow-x:hidden;
touch-action: pan-y;
opacity:0;
pointer-events:none;
transform: scale(0.95);
transition:opacity 0.5s, transform 0.5s;
}
.welcome-step.active{
opacity:1;
pointer-events:auto;
transform: scale(1);
}
.welcome-title{
font-size:32px;
margin-bottom:0px;
text-align:center;
font-weight: bold;
}

.welcome-text{
font-size:18px;
text-align:center;
font-weight: bold;
}

.welcome-under-text{
font-size:14px;
margin-top:60px;
text-align:center;
font-weight: bold;
color:#909090;
}

.choice-row{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
justify-content: center;
justify-items: center;
gap: 20px 80px;
max-width: calc(4 * 200px + 80px); /* limite à 2 colonnes pleines */
margin-top:50px;
}
.choice-box{
position:relative;
width:300px;
height:300px;
cursor:pointer;
text-align:left;
transition:transform 0.3s ease, box-shadow 0.3s ease;
overflow:hidden;                 /* keep overlay inside */
background:linear-gradient(135deg,#f8faff,#eef5ff);
}
.choice-box.disabled{
pointer-events:none;
filter:grayscale(100%);
opacity:0.75;
}
.choice-box:hover{
transform:translateY(-10px) scale(1.05);
box-shadow:0 10px 20px rgba(0,0,0,0.2);
}
.choice-box:hover span{
background:rgba(255,255,255,0.45);
}
.choice-box:active{
transform:scale(0.95);

}
body.dark-mode .choice-box{
background:linear-gradient(135deg,#2b2e35,#373b44);
border-color:#555;
}
.choice-box img{
width:300px;
height:300px;
object-fit:cover;
border-radius:10px;
}

#templatePopup .template-categories .submenu-option img{
margin-bottom:0;
object-fit:cover;
}

.welcome-popup .submenu-option{
width:300px;
height:300px;
}

.welcome-popup .submenu-option img{
width:100%;
height:100%;
object-fit:cover;
}

#templatePopup .template-categories,
#templatePopup .template-list{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
    justify-items:center;
}

#templatePopupContent{
    display:flex;
    align-items:flex-start;
    gap:32px;
     width:100%;
}

.template-filters{
    flex:0.15;
    max-height:80vh;
    overflow-y:auto;
     scrollbar-gutter: stable;
    margin-left:20px;
}

.template-results{
    flex:0.85;
    max-height:80vh;
    overflow-y:auto;
     scrollbar-gutter: stable;
    padding:30px;
}

.template-filters details{
    margin-bottom:1rem;
}

.template-filters label{
    display:block;
    margin:4px 0;
}



body.dark-mode .choice-box span{
background:rgba(0,0,0,0.3);
color:#fff;
}
body.dark-mode .choice-box:hover span{
background:rgba(0,0,0,0.45);
}

.welcome-back{
position:absolute;
top:20px;
left:20px;
font-size:18px;
cursor:pointer;
user-select:none;
z-index:10;
color:#ACACAC;
font-weight:bold;
}
body.dark-mode .welcome-back{
color:#fff;
}

.keys-count {
position: absolute;
left: 10px;
bottom: 0px;
font-size:16px;
padding:6px 14px;
font-size:16px;
font-weight:bold;
color:#fff;
border-radius:12px;
z-index:2;
transition:background 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 
  0 8px 32px rgba(0, 0, 0, 0.1),
  inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.key-price {
position: absolute;
right: 10px;
bottom: 0px;
font-size:16px;
padding:6px 14px;
font-size:16px;
font-weight:bold;
color:#fff;
border-radius:12px;
z-index:2;
transition:background 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 
  0 8px 32px rgba(0, 0, 0, 0.1),
  inset 0 1px 0 rgba(255, 255, 255, 0.5);
}


#choice-keyboard:hover {
box-shadow:0 10px 20px rgba(248,165,49,0.6);
}

#choice-keycaps img {
width: 450px;
height:450px;
}

#choice-keycaps {
width:450px;
height:450px;
}

#choice-keyboard img {
width: 450px;
height:450px;
}

#choice-keyboard {
width:450px;
height:450px;
}

#choice-keyboard:hover {
box-shadow:0 10px 20px rgb(64,132,245,0.5);
}

#choice-keycaps:hover {
box-shadow:0 10px 20px rgba(248,165,49,0.5);
}

.choice-box span{
position:absolute;
top:10px;
left:10px;
padding:6px 14px;
font-size:18px;
font-weight:bold;
color:#fff;
border-radius:12px;
z-index:2;
transition:background 0.3s ease;
  background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
  0 8px 32px rgba(0, 0, 0, 0.1),
  inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.choice-box.disabled span,
.choice-box.disabled .key-price,
.choice-box.disabled .keys-count{
  background: rgba(191, 194, 201, 0.55);
  color:#f7f7f7;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 10px 20px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.55);
}


#choice-keycaps {
border: none;
}

#choice-keyboard {
border: none;
}


.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 
  0 8px 32px rgba(0, 0, 0, 0.1),
  inset 0 1px 0 rgba(255, 255, 255, 0.5);
width:220px;
height:40px;
border-radius: 20px;
}


.switch-text-wizard {
  color:#000!important;
  z-index:300;
}


.switch-menu {
white-space: normal;
height: 900px!important; 
}

.switch-count-container {
position: absolute;
top: 20px;
right: 20px;
text-align: right;
width: auto;
height: auto;
padding: 8px 12px;
}

.switch-count-container .submenu-option.active {
background: #000;
color: #fff;
}

/* Thumbnails of selected products */

/* Thumbnails of selected products */
.selection-preview {
position: fixed;
bottom: 70px;
right: 27.5px;
display: flex;
gap: 10px;
z-index: 5;
}

.selection-preview.with-keyboard {
bottom: 70px;
flex-direction: column;
}

.selection-preview.no-keyboard {
bottom: 70px;
flex-direction: row;
}

.selection-preview .preview-item {
position: relative;
opacity: 0;
transform: scale(0.8);
animation: previewFadeIn 0.3s forwards;
}

.selection-preview img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 6px;
}

.selection-preview .remove-btn {
position: absolute;
top: -6px;
right: -6px;
width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
background: #fff;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
font-size: 12px;
font-weight: bold;
}

.remove-btn:hover {
background: #000;
color:#fff;
}

@keyframes previewFadeIn {
to {
  opacity: 1;
  transform: scale(1);
}
}

@media (max-width: 768px) {
.template-toggle{display:none;}
.template-toggle-mobile{
  display:flex;
  position:static;
  top:auto;
  left:auto;
  align-self:flex-start;
  margin-bottom:10px;
}
.welcome-popup{
  width:95%;
  height:90%;
}
.choice-row{
  display:flex;
  flex-direction:column;
  gap:15px;
  max-width:none;
}

#choice-keyboard img {
width: 300px;
height:300px;
}


#choice-keyboard {
width: 300px;
height:300px;
 margin: auto;
}

#choice-keycaps img {
width: 300px;
height:300px;
}


#choice-keycaps {
width: 300px;
height:300px;
 margin: auto;
}
.choice-box{
  width:100%;
  height:100%;
}
.top-controls{
  display:none;
  position:fixed;
  top:40px;
  left:0;
  width:80%;
  height:calc(100vh - 40px);
  transform:none;
  background:#fff;
  color:#000;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  padding:20px 15px;
  text-align:left;
  gap:10px;
  border-top-right-radius:10px;
  z-index:1001;
  overflow-y:auto;
}
.top-controls.show{display:flex;}
.top-controls .menu-item{
  width:100%;
}
.top-controls .menu-item .submenu{
  display:none;
  position:static;
  top:auto;
  left:auto;
  margin:10px 0 0;
  width:100%;
  max-height:none;
  z-index:auto;
}
.top-controls .menu-item.open .submenu{
  display:block;
}
.menu-overlay{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(128,128,128,0.5);
  z-index:1000;
}
.menu-overlay.show{display:block;}
.bottom-controls-left{
  position:static;
  display:flex;
  left:auto;
  bottom:auto;
  flex-direction:column;
  overflow:visible;
  margin-top:10px;
}
.recap-toggle{display:none;}
.selection-preview,
.selection-preview.with-keyboard,
.selection-preview.no-keyboard {
  top: 20px;
  left: calc(10px + 50px + 10px);
  bottom: auto;
  right: auto;
  flex-direction: row;
}
.selection-preview img {
  width:40px;
  height:40px;
}


.bottom-controls{
  left:auto;
  right:0px;
  bottom:5px;
  transform:none;
  justify-content:flex-end !important;
  gap: 0px;
}
.woocommerce-variation-add-to-cart.variations_button{
  flex-direction:column;
  align-items:flex-end !important;
}
.control-group{
  align-items:flex-end !important;
}
.price-container-cta{
  justify-content:flex-end;
}
.promo{
  font-size:10px;
}
#price-display{
  font-size:20px;
}
.price-promo-bottom{
  font-size:14px;
}

.animation-bouton{
  font-size:14px;
}

.bottom-controls .single_add_to_cart_button{
  padding:12px 15px;
  font-size:12px;
  border-radius:12px;
}
.menu-label-profile{
  color:#000;
}

.menu-label-size{
  color:#000;
}

.menu-label-layout{
  color:#000;
}
.menu-label-standard{
  color:#000;
}
.menu-label-switch{
  color:#000;
}
}

.template-controls{
display:none;
position:fixed;
top:40px;
left:0;
background:#fff;
color:#000;
padding:10px;
border-top-right-radius:10px;
z-index:1001;
flex-direction:column;
gap:10px;
}
.template-controls.show{display:flex;}
.template-option{
cursor:pointer;
padding:8px 12px;
border-radius:8px;
background:#eee;
}
.template-option:hover{background:#ddd;}

#templatePopup .popular-section {
  margin-top: 16px;
  width: 100%;
}

#templatePopup .popular-message {
  width: 100%;
  text-align: center;
  font-weight: 500;
  margin: 32px;
}