/* Styles pour les boutons en mode portrait */
         .button-container {
         display: flex;
         align-items: center;
         }
         .call-button {
         background-color: #333;
         color: #fff;
         font-size: 18px;
         border: none;
         border-radius: 5px;
         width: 30px;
         height: 30px;
         margin-right: 10px;
         cursor: pointer;
         display: flex;
         justify-content: center;
         align-items: center;
         }
         .order-button {
         background-color: #333;
         color: #fff;
         font-size: 18px;
         border: none;
         border-radius: 5px;
         padding: 10px 20px;
         cursor: pointer;
         }
         /* Style lorsque le carré de téléphone est survolé en mode portrait */
         .call-button:hover {
         background-color: #007bff;
         }
         /* Styles pour les boutons en mode paysage */
         @media screen and (orientation: landscape) {
         .button-container {
         justify-content: center; /* Centrer les boutons en mode paysage */
         }
         .call-button {
         width: 3em; /* Augmenter la taille du carré de téléphone en mode paysage */
         height: 3em;
         }
         .order-button {
         padding: 10px 30px; /* Ajuster la largeur du bouton "Commander" en mode paysage */
         }
         }
         .smart-features {
         padding: 20px;
         background-color: #f9f9fb;
         border-radius: 16px;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
         font-family: 'Segoe UI', sans-serif;
         }
         .feature-list {
         list-style: none;
         padding: 0;
         margin: 0;
         }
         .feature-list li {
         display: flex;
         align-items: center;
         padding: 10px 0;
         font-size: 16px;
         border-bottom: 1px dashed #ddd;
         }
         .feature-list li:last-child {
         border-bottom: none;
         }
         .feature-list li i {
         color: #FF7F50; /* pastel orange */
         background: #fff2e6;
         border-radius: 50%;
         padding: 6px;
         font-size: 18px;
         margin-right: 12px;
         transition: transform 0.2s ease;
         }
         .feature-list li:hover i {
         transform: scale(1.1);
         }
         .highlight {
         text-align: center;
         color: #2b2b2b;
         font-weight: 600;
         font-style: italic;
         margin-top: 20px;
         }
         .sub-highlight {
         text-align: center;
         font-style: italic;
         color: #555;
         margin-bottom: 10px;
         }
   @media (max-width: 768px) {
         .containerbox3 {
         flex-direction: column !important;
         }
         .image-box {
         margin: 0 auto 20px auto;
         }
         }
         @media (max-width: 768px) {
         .elya-text p {
         font-size: 1.25rem;
         }
         }
         @media screen and (max-width: 768px) {
         .table-responsive-mobile {
         -webkit-overflow-scrolling: touch;
         }
         .table-responsive-mobile thead {
         display: none;
         }
         .table-responsive-mobile tr {
         display: block;
         margin-bottom: 1rem;
         border: 1px solid #ccc;
         border-radius: 6px;
         background-color: #fff;
         padding: 0.5rem;
         }
         .table-responsive-mobile td {
         display: flex;
         justify-content: space-between;
         padding: 8px 10px;
         font-size: 15px;
         border-bottom: 1px solid #eee;
         }
         .table-responsive-mobile td::before {
         content: attr(data-label);
         font-weight: bold;
         color: #555;
         }
         }
         .table-responsive-mobile td:first-child {
         background-color: #fef6f0; /* doux orange pâle */
         font-weight: bold;
         color: #444;
         border-right: 2px solid #fff;
         }
         .table-responsive-mobile {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
         margin: 0 auto;
         padding: 10px;
         }
         @media (max-width: 768px) {
         .table-responsive-mobile table {
         min-width: 800px;
         width: auto;
         display: block;
         }
         }
         .elya-feature-box {
         padding: 20px;
         background-color: #fdfdfd;
         }
         .elya-feature-card {
         background: #f8f9fc;
         border: 1px solid #e0e0e0;
         border-radius: 12px;
         padding: 20px;
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
         max-width: 600px;
         margin: 0 auto;
         }
         .elya-list {
         list-style: none;
         padding: 0;
         margin: 0;
         }
         .elya-list li {
         padding: 10px 0;
         font-size: 16px;
         color: #333;
         border-bottom: 1px dashed #ddd;
         display: flex;
         flex-wrap: wrap;
         }
         .elya-list li:last-child {
         border-bottom: none;
         }
         .label {
         font-weight: bold;
         color: #444;
         margin-right: 5px;
         }
         .elya-feature-card h2 {
         font-size: 22px;
         margin-bottom: 8px;
         color: #2c2c2c;
         text-align: center;
         }
         .elya-feature-card h3 {
         font-size: 18px;
         font-style: italic;
         text-align: center;
         color: #666;
         margin-bottom: 16px;
         }
         .elya-feature-card * {
         hyphens: auto;
         word-break: break-word;
         overflow-wrap: break-word;
         }
         .img-fluid mb-4 {
         display: block;
         margin: 0 auto;
         max-width: 100%;
         height: auto;
         }
         .close-form {
         float: right;
         font-size: 34px;
         background: none;
         border: none;
         color: white;
         cursor: pointer;
         position: absolute;
         right: 20px;
         top: 10px;
         width: 20%;
         }
         .elya-feature-card,
         .elya-feature-box,
         .elya-text {
         text-align: justify;
         -webkit-hyphens: auto;
         -ms-hyphens: auto;
         hyphens: auto;
         word-break: break-word;
         overflow-wrap: break-word;
         max-width: 100%;
         }
         /* Pour s'assurer que les éléments enfants héritent également de ces styles */
         .elya-feature-card *,
         .elya-feature-box *,
         .elya-text * {
         -webkit-hyphens: auto;
         -ms-hyphens: auto;
         hyphens: auto;
         word-break: break-word;
         overflow-wrap: break-word;
         }
         /* S'assurer que les titres dans ces blocs sont également bien formatés */
         .elya-feature-card h2,
         .elya-feature-card h3,
         .elya-feature-box h2,
         .elya-feature-box h3,
         .elya-text h2,
         .elya-text h3 {
         text-align: left; /* ou justify si vous préférez */
         -webkit-hyphens: auto;
         -ms-hyphens: auto;
         hyphens: auto;
         word-break: break-word;
         overflow-wrap: break-word;
         }
		  .color-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.color-selector label {
  cursor: pointer;
}

.color,
.colorBox2,
.colorbraceler,
.colorfermoir {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid #ccc;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.color:hover,
.colorBox2:hover,
.colorbraceler:hover,
.colorfermoir:hover {
  transform: scale(1.1);
  border-color: #17A6DE;
}

.color_active {
  border: 3px solid #17A6DE !important;
}

input[type="radio"].hidden {
  display: none;
}

.color-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  color: #333;
  text-align: center;
  margin-top: 5px;
}

.form-description {
  background: #f5f5f5;
  padding: 10px;
  border-left: 4px solid #17A6DE;
  margin-top: 10px;
  font-size: 13px;
  color: #444;
  border-radius: 6px;
}
/* Masquer les inputs radio */
input[type="radio"].hidden {
  display: none;
}

/* Style commun des bulles */
.color,
.colorBox2,
.colorbraceler,
.colorfermoir {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid #ccc;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease-in-out;
  position: relative;
}

/* Conteneur de sélection */
.color-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* Hover visuel */
.color:hover,
.colorBox2:hover,
.colorbraceler:hover,
.colorfermoir:hover {
  transform: scale(1.1);
  border-color: #17A6DE;
}

/* État sélectionné */
input[type="radio"]:checked + .color,
input[type="radio"]:checked + .colorBox2,
input[type="radio"]:checked + .colorbraceler,
input[type="radio"]:checked + .colorfermoir {
  transform: scale(1.2);
  border: 3px solid #17A6DE;
}

/* Optionnel : curseur sur les labels */
.color-selector label {
  cursor: pointer;
}