.content .prompt-container {
    background-color: #f9f9f9; /* Consistent light grey background */
    border-radius: 8px;
    margin: 25px auto; /* Center the prompt container */
    width: 90%; /* Width slightly reduced to not touch the edges */
    min-height: 350px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: justify;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease; /* Smooth transitions */
}

.custom-tuto-button-container {
    display: flex;
    justify-content: flex-end;
    margin-bottom: -20px; /* Ajustez selon le besoin */
}

.custom-tuto-button {
    position: relative;
    top: -10px;
}

.custom-tuto-button .btn {
    font-size: 0.75rem; /* Réduit la taille du texte du bouton */
    padding: 0.475rem 0.875rem; /* Ajuste le padding pour le rendre plus compact */
}

/* Centrer le contenu et limiter la hauteur */
.editable-title-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px; /* Limite la hauteur à 50px */
    text-align: center;
}

/* Ajout du curseur main sur toute la div */
.title-view {
    position: relative;
    display: inline-block;
    cursor: pointer; /* Ajout du curseur "main" */
}

.title-view h2 {
    display: inline;
    margin: 0;
}

/* Positionnement et couleur du stylo */
.edit-icon {
    position: absolute;
    top: 80px;
    right: -30px; /* Ajuste la position à côté du texte */
    color: #ccc;
}

/* Affiche le stylo au passage de la souris sur toute la div */
.title-view:hover .edit-icon {
    display: inline-block;
    color: #888; /* Mettre une couleur plus visible au hover */
}

.input-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Espace entre l'input et les boutons */
}

.custom-input {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
    width: auto;
    box-shadow: none;
    height: 50px;
}

.custom-input:focus {
    border-color: #888;
}

.input-group .btn {
    height: 50px;
    width: 50px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.5rem;
}

.input-group .btn-alt-success {
    background-color: #d4edda;
}

.input-group .btn-alt-warning {
    background-color: #f8d7da;
}

/* Style général pour empêcher la sélection de texte */
.priority-service,
.selected-service {
    user-select: none; /* Empêche la sélection du texte */
}

/* Style par défaut des services prioritaires */
#priority-services-list .priority-service {
    cursor: grab; /* Indique que l'élément est draggable */
    transition: box-shadow 0.2s ease, opacity 0.2s ease;
}

/* Style par défaut des services sélectionnés */
#selected-services-list .selected-service {
    cursor: grab; /* Indique que l'élément est draggable */
    transition: box-shadow 0.2s ease, opacity 0.2s ease;
}

/* Effet de "grabbing" lors du drag-and-drop */
.priority-service:active,
.selected-service:active {
    cursor: grabbing; /* Changement de curseur pendant le drag */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* Légère ombre */
}

/* Style visuel pour l'élément en cours de déplacement */
.priority-service.sortable-ghost,
.selected-service.sortable-ghost {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); /* Ombre plus marquée */
    opacity: 0.8; /* Transparence légère */
    transform: scale(1.02); /* Légère mise en avant */
    cursor: grabbing;
}

/* Transition douce pour les services pendant le drag */
.priority-service,
.selected-service {
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

/* Effet supplémentaire pour les services déplacés entre listes */
#priority-services-list .priority-service.dragging,
#selected-services-list .selected-service.dragging {
    background-color: #e9f5ff; /* Couleur de fond différente */
    border-color: #007bff; /* Bordure bleue pour indiquer l'interaction */
}


.btn-icon-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.btn-standard-size {
    width: 90px;      /* Définissez la largeur souhaitée */
    height: 50px;     /* Définissez la hauteur souhaitée */
    padding: 10px;    /* Ajustez le padding si nécessaire */
    box-sizing: border-box; /* Assure que le padding est inclus dans la taille totale */
}

.btn-standard-size i {
    font-size: 1em; /* Ajustez la taille de l'icône */
    margin-bottom: 5px; /* Espace entre l'icône et le texte */
}

.btn-standard-size span {
    font-size: 0.8em;  /* Ajustez la taille du texte */
    text-align: center;
    white-space: normal;
}

.disabled-row {
    opacity: 0.7;
    color: #aaa;
}

    /* Container de l'URL */
.site-url-container {
    position: relative;
    max-width: 100%;
    overflow: hidden; /* Empêche le texte de déborder */
}

/* Texte de l'URL avec effet de dégradé */
.site-url-display {
    white-space: nowrap; /* Empêche le texte de se casser sur plusieurs lignes */
    overflow: hidden; /* Masque le débordement horizontal */
    display: inline-block;
    position: relative;
    max-width: 100%;
    padding-right: 20px; /* Espace pour le dégradé */
}

/* Dégradé ajouté pour masquer la fin du texte */
.site-url-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px; /* Largeur du dégradé */
    height: 100%;
    background: linear-gradient(to left, white, rgba(255, 255, 255, 0));
    pointer-events: none; /* Le dégradé n'interfère pas avec l'interaction utilisateur */
}

/* Champ d'entrée pour l'URL (initialement masqué) */
.site-url-input {
    display: block;
    width: 100%;
}

/* Classe pour désactiver le dégradé lors de la modification */
.site-url-container.editing::after {
    display: none; /* Masque le dégradé pendant l'édition */
}

.add-services-container {
    position: relative;
    max-height: 180px; /* Limite la hauteur pour afficher une partie des services */
    overflow: hidden; /* Cache les services qui débordent en dessous */
}

.fade-out-services-dispo {
    position: absolute;
    bottom: 0;
    height: 40px;
    width: 100%;
    background: linear-gradient(to top, white, transparent); /* Crée le dégradé */
    pointer-events: none; /* Empêche d'interagir avec le dégradé */
}

.badge.position-absolute {
    font-size: 0.75rem;
    padding: 0.3rem;
    border-radius: 50%;
    top: -5px; /* Ajustez selon vos besoins */
    right: -10px; /* Ajustez selon vos besoins */
    transform: translate(50%, -50%);
}

.qr-code-tab {
    flex-basis: 25%; /* Largeur de 25% pour chaque onglet */
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    background-color: #f0f0f0;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center;
}

.qr-code-tab.active {
    background-color: #ffffff;
    color: #000;
    border-bottom: 1px solid #ffffff; /* Évite une bordure inférieure sur l'onglet actif */
    cursor: default;
}

.qr-code-navigation {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 0; /* Retirer l'espace entre les onglets et le contenu */
}

/* Pour ajuster le bouton 'Nouveau QR-Code' pour être aligné avec les autres onglets */
.new-qr-code-tab {
    flex-basis: 25%; /* Largeur de 25% pour chaque onglet */
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    background-color: #d4edda;
    text-align: center;
}

/* Pour s'assurer que la zone de contenu en dessous n'a pas de bordure en haut */
.qr-code-content {
    border-top: none;
    padding: 20px;
    background-color: #ffffff;
}

/* Classe pour le padding personnalisé */
.custom-padding {
    padding-left: 1rem;
    padding-top: 1rem;
    padding-right: 1rem;
    padding-bottom: 0;
}

.settings-title{
    position: relative;
    top: -40px;
    right: 70px;
  }
  .qr-code-row{
    position: relative;
    top: -20px;
  }


@media (max-width: 1920px) {
  .custom-tuto-button {
        position: relative;
        top: -10px; /* Ajustez la valeur selon le besoin */
        margin-bottom: -50px;
    }

    .custom-tuto-button .btn {
        font-size: 0.75rem; /* Réduit la taille du texte du bouton */
        padding: 0.475rem 0.875rem; /* Ajuste le padding pour le rendre plus compact */
    }
}

@media (max-width: 1280px) {
    /* Ajustement des titres pour les écrans de résolution égale ou inférieure à 1280px */
    h1 {
        font-size: 1.75rem; /* Ajuste la taille en fonction de tes besoins (exemple : 2 rem) */
    }
    h2 {
        font-size: 1.5rem;
    }
    h3 {
        font-size: 1.25rem;
    }
    h4 {
        font-size: 1rem;
    }
    h5 {
        font-size: 0.875rem;
    }
    h6 {
        font-size: 0.575rem;
    }
    
    /* Ajustement des marges et paddings pour compacter les titres si besoin */
    h1, h2, h3, h4, h5, h6 {
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 0;
    }

    .h1 {
        font-size: 1.75rem; /* Ajuste la taille en fonction de tes besoins (exemple : 2 rem) */
    }
    .h2 {
        font-size: 1.5rem;
    }
    .h3 {
        font-size: 1.25rem;
    }
    .h4 {
        font-size: 1rem;
    }
    .h5 {
        font-size: 0.875rem;
    }
    .h6 {
        font-size: 0.575rem;
    }

   /* Surcharge des classes Bootstrap mb-1 à mb-6 pour écrans ≤ 1280px */
    .mb-1 {
      margin-bottom: 0.1rem; /* 50% de mb-1 (0.5rem) */
    }
    .mb-2 {
      margin-bottom: 0.25rem; /* 50% de mb-2 (1rem) */
    }
    .mb-3 {
      margin-bottom: 0.50rem; /* 50% de mb-3 (1.5rem) */
    }
    .mb-4 {
      margin-bottom: 0.75rem; /* 50% de mb-4 (2rem) */
    }
    .mb-5 {
      margin-bottom: 1rem; /* 50% de mb-5 (3rem) */
    }
    .mb-6 {
      margin-bottom: 0.5rem; /* 50% de mb-6 (4rem) */
    }  

    .custom-tuto-button {
            top: -10px;  /* Ajuste la position vers le haut pour les petites résolutions */
            left: 800px;  /* Réduit la distance par rapport au bord droit */
        }

    .settings-title{
        position: relative;
        top: -60px;
        right: 70px;
    }

    .qr-code-row{
        position: relative;
        top: -20px;
    }

    /* Positionnement et couleur du stylo */
    .edit-icon {
        position: absolute;
        top: 10px;
        right: -30px; /* Ajuste la position à côté du texte */
        color: #ccc;
    }
    .content-heading {
    margin-bottom: 1rem;
    padding-top: 1rem;
    font-size: 0.775rem;
    font-weight: 600;
    color: #6c757d;
    line-height: 1.75;
    text-transform: uppercase;
    letter-spacing: 0.0625rem;
    }
    .content-heading small, .content-heading .small {
    margin-top: 0.25rem;
    font-size: 0.575rem;
    font-weight: 400;
    color: #6c757d;
    text-transform: none;
    letter-spacing: normal;
    }
}


    /* -------------------------------------------------------------------------------------------------------------------*/
    /* -------------------------------------------------------------------------------------------------------------------*/
    /* ---------------------------------------------Phone Screens --------------------------------------------------------*/
    /* -------------------------------------------------------------------------------------------------------------------*/
    /* -------------------------------------------------------------------------------------------------------------------*/
    
    
    @media (max-width: 768px) {
        .content h2 {
            font-size: 1.2rem; /* Taille ajustée pour les titres */
        }
    
        .content h5 {
            font-size: 0.9rem; /* Taille ajustée pour les sous-titres */
        }
        
        .content .prompt-container {
            background-color: #f9f9f9; /* Consistent light grey background */
            border-radius: 8px;
            margin: 5px auto; /* Center the prompt container */
            width: 100%; /* Width slightly reduced to not touch the edges */
            min-height: 350px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: justify;
            padding: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.5s ease-in-out, opacity 0.5s ease; /* Smooth transitions */
        }
    
        .content .slick-slide:not(.slick-center) .prompt-container {
            width: 80%; /* Largeur réduite pour les slides inactives */
            opacity: 0.7; /* Réduction de la visibilité */
            transform: scale(0.9); /* Mise à l'échelle pour distinguer la slide active */
        }
    
        .content .slick-slider {
            padding: 0 0px; /* Réduction de l'espacement horizontal */
        }

    }