/* Palette de couleurs */
     :root {
         --premium-red: #812626;
         --premium-bg: #ffffff;
         --premium-gray: #f8f9fa;
         --premium-border: #e9ecef;
         --premium-text: #2d3436;
     }

     /* Overlay & Container */
     .pop_overlay {
         background: rgba(0, 0, 0, 0.6) !important;
         backdrop-filter: blur(4px);
     }

     .pop_content {
         border-radius: 20px !important;
         border: none !important;
         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
         background: var(--premium-bg);
         max-width: 800px !important;
         transition: all 0.3s ease-in-out;
     }

     /* Header */
     .head_pop {
         padding: 20px 30px;
     }

     .head_pop h4 {
         color: var(--premium-red);
         letter-spacing: -0.5px;
     }

     .close_pop {
         background: var(--premium-gray);
         padding: 8px;
         border-radius: 50%;
         transition: 0.2s;
     }

     .close_pop:hover {
         background: #ffeaea;
         color: var(--premium-red);
     }

     /* Stepper Premium */
     .strepper {
         display: flex;
         justify-content: space-around;
         gap: 40px;
         padding: 20px 0;
         position: relative;
     }

     .stepper_circle {
         width: 35px;
         height: 35px;
         border-radius: 50%;
         border: 2px solid var(--premium-border);
         background: white;
         color: #b2bec3;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: 0.3s;
     }

     .active_strepper .stepper_circle {
         border-color: var(--premium-red);
         background: var(--premium-red);
         color: white;
         box-shadow: 0 0 10px rgba(129, 38, 38, 0.4);
     }

     /* Body & Inputs */
     .body_pop {
         padding: 30px !important;
     }

     .input_salon {
         border: 1.5px solid var(--premium-border) !important;
         border-radius: 12px !important;
         padding: 12px 15px !important;
         transition: 0.2s;
         font-size: 15px;
     }

     .input_salon:focus {
         border-color: var(--premium-red) !important;
         box-shadow: 0 0 0 3px rgba(129, 38, 38, 0.1) !important;
         outline: none;
     }

     /* Cards Services (Step 1) */
     .card_pop_step_1 {
         background: var(--premium-gray);
         border: 2px solid transparent;
         border-radius: 15px;
         padding: 20px;
         transition: 0.2s ease;
         position: relative;
     }

     .card_pop_step_1:hover {
         transform: translateY(-3px);
         background: white;
         border-color: #eee;
     }

     .service_checkbox:checked+.card_pop_step_1,
     .card_pop_step_1.active {
         /* si vous ajoutez active en JS */
         border-color: var(--premium-red);
         background: white;
         box-shadow: 0 10px 20px rgba(129, 38, 38, 0.05);
     }

     /* Récapitulatif (Step 4) */
     .bg-card {
         background: var(--premium-gray) !important;
         border: 1px dashed #d1d8e0 !important;
         border-radius: 15px !important;
     }

     .recap_total {
         font-size: 1.2rem;
         border-top: 1px solid #dee2e6;
         margin-top: 10px;
     }

     .mvola-hint {
         font-size: 0.85rem;
         color: #6c757d;
     }

     .text-danger {
         --bs-text-opacity: 1;
         color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
     }

     /* Footer & Buttons */
     .footer_pop {
         /* padding: 20px 30px !important; */
         background: var(--premium-gray);
         border-bottom-left-radius: 20px;
         border-bottom-right-radius: 20px;
     }

     .btn_primary_salon {
         background: var(--premium-red) !important;
         color: white !important;
         border: none !important;

         border-radius: 10px !important;
         font-weight: 600 !important;
         transition: 0.3s;
     }

     .btn_primary_salon:hover {
         background: #5d1b1b !important;
         box-shadow: 0 5px 15px rgba(93, 27, 27, 0.3);
     }

     .btn_secondary_salon {
         background: transparent !important;
         color: #636e72 !important;
         border: 1px solid #dfe6e9 !important;
         padding: 12px 25px !important;
         border-radius: 10px !important;
         font-weight: 600 !important;
     }

     /* Paiement Radio */
     input[type="radio"] {
         accent-color: var(--premium-red);
     }

     @media (max-width: 768px) {

         /* 1. On gère le conteneur des boutons */
         .footer_pop {
             flex-direction: row !important;
             /* On les garde sur la même ligne */
             gap: 15px !important;
             /* On force un espace entre eux */
             /* padding: 10px 0 !important; */
         }

         /* 2. On donne une largeur équitable aux deux boutons */
         .footer_pop button {
             flex: 1 !important;
             /* Chaque bouton prend 50% de l'espace */
             padding: 12px 5px !important;
             /* Ajustement du padding interne */
             font-size: 0.9rem !important;
             white-space: nowrap !important;
             /* Évite que le texte passe à la ligne */
         }
     }

     /* Optionnel : Si l'écran est vraiment trop petit (ex: iPhone SE)
   on peut les empiler pour plus de confort */
     @media (max-width: 380px) {
         .footer_pop {
             flex-direction: column-reverse !important;
             /* Suivant en haut, Précédent en bas */
             gap: 10px !important;
         }

         .footer_pop button {
             width: 100% !important;
         }
     }

     .recap_appointment_details {
         background: #fdfaf5;
         /* Beige très léger */
         padding: 10px;
         border-radius: 5px;
     }

     .recap_items span {
         font-size: 0.9rem;
     }

     .recap_total {
         font-size: 1.2rem;
         letter-spacing: 0.5px;
     }

     .text_primary {
         color: #812626;
         /* Votre bordeaux */
     }

     .payment-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
         gap: 1.5rem;
         margin-top: 0.5rem;
     }

     .payment-radio-hidden {
         display: none;
     }

     .payment-card {
         display: flex;
         align-items: center;
         gap: 15px;
         padding: 20px;
         background: #fff;
         border: 1px solid #e2e2e2;
         border-radius: 0px;
         /* Style salon : angles droits ou très légèrement arrondis */
         cursor: pointer;
         position: relative;
         transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
         width: 100%;
         height: 100%;
     }

     .payment-icon-box {
         width: 50px;
         height: 50px;
         flex-shrink: 0;
         display: flex;
         align-items: center;
         justify-content: center;
         background: #f8f9fa;
         padding: 5px;
     }

     .payment-icon-box img {
         max-width: 100%;
         max-height: 100%;
         object-fit: contain;
     }

     .payment-info {
         display: flex;
         flex-direction: column;
     }

     .payment-title {
         font-family: 'Marcellus', serif;
         font-weight: 600;
         font-size: 1rem;
         color: #1a1a1a;
     }

     .payment-desc {
         font-size: 0.75rem;
         color: #888;
     }

     /* Effet au survol */
     .payment-card:hover {
         border-color: var(--salon-red, #812626);
         background: #fdfaf5;
     }

     /* Style quand sélectionné */
     .payment-radio-hidden:checked+.payment-card {
         border-color: var(--salon-red, #812626);
         background: #fff;
         box-shadow: 0 10px 20px rgba(129, 38, 38, 0.08);
         border-width: 2px;
     }

     /* Petit badge de validation qui apparaît */
     .check-badge {
         position: absolute;
         top: -10px;
         right: -10px;
         width: 24px;
         height: 24px;
         background: var(--salon-red, #812626);
         color: white;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 10px;
         opacity: 0;
         transform: scale(0);
         transition: all 0.2s ease;
     }

     .payment-radio-hidden:checked+.payment-card .check-badge {
         opacity: 1;
         transform: scale(1);
     }

     /* Animation de l'image au clic */
     .payment-radio-hidden:checked+.payment-card .payment-icon-box {
         background: #fff;
     }

     @media (max-width: 768px) {

         /* 1. Force la grille à passer sur une seule colonne */
         .stepper_content_2 .grid_2 {
             display: flex !important;
             flex-direction: column !important;
             gap: 30px !important;
             /* Espace entre le calendrier et les heures */
         }

         /* 2. On s'assure que le calendrier prend toute la largeur */
         #calendar {
             width: 100% !important;
             max-width: 100% !important;
         }

         /* 3. Ajustement de la grille des heures pour le mobile */
         /* On passe de grid_3 (3 colonnes) à grid_2 pour que les boutons soient plus larges et cliquables */
         #timeSlots {
             display: grid !important;
             grid-template-columns: repeat(2, 1fr) !important;
             gap: 10px !important;
         }

         /* 4. On ajuste le titre pour le mobile */
         .stepper_content_2 h4 {
             font-size: 1.2rem !important;
             text-align: center;
             margin-bottom: 10px;
         }
     }

     @media (max-width: 630px) {
         .grid_3 {
             grid-template-columns: 1fr !important;
         }
     }

     @media (max-width: 930px) {
         .grid_3 {
             grid-template-columns: 1fr 1fr;
         }
     }

     /* Optimisation pour les très petits écrans */
     @media (max-width: 480px) {
         #timeSlots {
             grid-template-columns: repeat(2, 1fr) !important;
         }
     }

     @media (max-width: 768px) {

         /* 1. On casse la grille pour que chaque champ prenne toute la largeur */
         .stepper_content_3 .grid_2 {
             display: flex !important;
             flex-direction: column !important;
             gap: 20px !important;
             /* Espace vertical entre email et téléphone */
         }

         /* 2. On ajuste les paddings des inputs pour le tactile */
         .stepper_content_3 .input_salon {
             padding: 12px !important;
             font-size: 0.95rem !important;
         }

         /* 3. On réduit un peu la taille du titre de l'étape */
         .stepper_content_3 h4 {
             font-size: 1.25rem !important;
             margin-bottom: 5px !important;
         }

         /* 4. On s'assure que le textarea ne dépasse pas */
         .stepper_content_3 textarea {
             min-height: 120px !important;
         }

         /* 5. On ajuste l'espacement global du conteneur */
         .stepper_content_3 .flex-column.gap-4 {
             gap: 1.5rem !important;
             /* Réduit l'espace entre les blocs de champs */
         }
     }

     /* Cache le contenu par défaut */
     .acc_content.d-none {
         display: none !important;
     }

     /* Affiche le contenu quand on retire d-none */
     .acc_content {
         display: flex;
         /* ou block */
         flex-direction: column;
         gap: 8px;
         padding: 15px;
         background: #fdfdfd;
     }

     /* Rotation de l'icône */
     .chevron_icon {
         transition: transform 0.3s ease;
     }

     .rotate_90 {
         transform: rotate(90deg);
         color: #812626;
     }

     /* Style de l'entête actif */
     .acc_header.active {
         background-color: #f8f8f8;
         border-bottom: 1px solid #eee;
     }

     /* 1. Indiquer que c'est cliquable */
     .acc_header {
         cursor: pointer;
         transition: all 0.2s ease;
         user-select: none;
         /* Évite de sélectionner le texte en cliquant vite */
     }

     /* 2. Effet au survol (Feedback visuel) */
     .acc_header:hover {
         background-color: #f8f1f1 !important;
         /* Un rouge très très pâle */
     }

     .acc_header:hover .fw_600 {
         color: #812626;
     }

     /* 3. Le petit cercle autour de l'icône */
     .icon_circle {
         width: 28px;
         height: 28px;
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 50%;
         background: #f0f0f0;
         transition: all 0.3s ease;
     }

     .acc_header:hover .icon_circle {
         background: #812626;
     }

     .acc_header:hover .chevron_icon {
         color: #fff;
     }

     /* 4. Animation de rotation quand c'est ouvert */
     .rotate_180 {
         transform: rotate(180deg);
     }

     /* 5. Un petit liseré sur le côté pour les services */
     .custom_accordion_item {
         border-left: 4px solid #e0e0e0 !important;
         transition: border-left 0.3s ease;
     }

     .custom_accordion_item:has(.active_header) {
         border-left: 4px solid #812626 !important;
     }

     .active_header {
         background-color: #fdfdfd;
     }
     .info_forfait_icon {
    color: #812626;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
    padding: 5px; /* Zone de clic plus large */
}

.info_forfait_icon:hover {
    opacity: 1;
    transform: scale(1.2);
}

/* On s'assure que le badge de type ne gêne pas l'icône info si vous l'utilisez encore */
.card_pop_step_1 {
    overflow: visible !important;
}
/* Empêche le nom long de pousser le prix hors de la carte */
.min_width_0 { min-width: 0; }
.text_nowrap { white-space: nowrap; }

.text_truncate_mobile {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.info_item_icon {
    font-size: 0.85rem;
    color: #812626;
    opacity: 0.6;
    transition: 0.2s;
}

.info_item_icon:hover { opacity: 1; transform: scale(1.2); }

.rotate_180 { transform: rotate(180deg); }

.icon_circle {
    width: 25px; height: 25px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

@media (max-width: 576px) {
    .acc_header { padding: 10px !important; }
    .badge_count { font-size: 0.7rem; }
    h6 { font-size: 0.9rem; }
}
/* modal info */
.custom-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999999999999999999999;
}

.custom-modal-card {
    background: white;
    width: 90%; max-width: 450px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    animation: modalScale 0.3s ease;
}

@keyframes modalScale {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.custom-modal-header {
    background: #812626;
    color: white;
    padding: 15px 20px;
    display: flex; justify-content: space-between; align-items: center;
}

.close-btn {
    background: transparent; border: none; color: white;
    font-size: 24px; cursor: pointer; line-height: 1;
}

.custom-modal-body { padding: 20px; color: #444; }

.inclus-grid {
    display: flex; flex-wrap: wrap; gap: 8px;
}

.inclus-tag {
    background: #f8f1f1;
    color: #812626;
    border: 1px solid #e2d2d2;
    padding: 4px 10px; border-radius: 20px; font-size: 0.85rem;
}

.custom-modal-footer { padding: 15px 20px; border-top: 1px solid #eee; text-align: right; }

.btn-modal-close {
    background: #812626; color: white; border: none;
    padding: 8px 25px; border-radius: 6px; font-weight: 600;
}

.btn-modal-close:hover { background: #631d1d; }