.flex-container {
    display: flex;
}

.sidebar-cr {
    position: fixed;
    top: 0;
    left: 0;
    width: 150px;
    height: 740px;
    background: var(--bg-imgp-sidebar);
	/*border: 1px solid #cccccc82;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    /*padding-top: 20px;*/
	margin-top: 80px;
    z-index: 1000;
    margin-left: 20px;
    border-radius: 10px !important;
    overflow-y: auto; /* Permet le défilement vertical */
    max-height: calc(100vh - 80px); /* Assure que la hauteur ne dépasse pas la vue de l'écran */
}

.sidebar-header-cr {
    display: flex;
    justify-content: center;
	margin-top: 20px;
    margin-bottom: 7px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 5px;
	padding-left: 5px;
	/*background-color: var(--menu-bg);*/
	background-image: var(--bg-sidebar-header-cr);
    /*border: 1px solid #ddd !important;*/
	border-radius: 10px !important;
	width: 65%;
}

.title-op-cr {
	font-size: 14px;
	color: var(--menu-text) !important;
	margin-bottom: 0px !important;
}


.sidebar-buttons-cr {
    display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.sidebar-buttons-cr .btn {
	display: flex;
    flex-direction: column;
    margin: 10px 0;
	width: 100px;
}

.sidebar-buttons-cr .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar-buttons-cr .image-container img.option-logo {
    width: 100px;
    height: 100px;
}

.main-content-cr {
    margin-left: 210px; /* Adjust based on sidebar width */
    padding: 20px;
    flex-grow: 1;
}

.overlay-transparent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-cr); /* Blanc transparent */
	backdrop-filter: blur(10px);
    display: none; /* Caché par défaut */
    z-index: 999; /* Assure que l'overlay est au-dessus du contenu */
}

.overlay-transparent-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1); /* Couleur avec légère transparence */
    backdrop-filter: blur(10px); /* Applique un flou de 10px */
    display: none; /* Caché par défaut */
    z-index: 1000; /* Assure que l'overlay est au-dessus du contenu */
}

.maintenance-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	z-index: 10000;
	display: flex;
	justify-content: center;
	align-items: center;
}
.maintenance-overlay .message {
	color: white;
	font-size: 2em;
}

.container.mt-5.mt5-cr {
    padding-top: 45px !important; /* Add some padding to compensate for fixed sidebar */
}

.option-button .image-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
	overflow: hidden;
	border-radius: 12%;
}

.option-button .image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.0); /* Overlay blanc transparent */
    opacity: 0; /* Initialement invisible */
    transition: opacity 0.3s ease; /* Transition pour l'effet de survol */
    border-radius: 12%; /* Pour correspondre au bord arrondi de l'image */
}

.option-button .image-container:hover::after {
    opacity: 1; /* Visible au survol */
}

.option-button .image-container img {
    transition: transform 0.3s ease; /* Transition pour l'effet de zoom */
    width: 100%;
    height: 100%;
}

.option-button .image-container:hover img {
    transform: scale(1.1); /* Appliquer un effet de zoom */
}

.option-logo {
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 12%;
	transition: box-shadow 0.3s ease;
}

.option-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
}

.option-overlay-models {
    position: absolute;
    display: flex;               /* On aligne flèche-haut, texte, flèche-bas en colonne */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;  /* Important : ne pas bloquer le clic sur le bouton */
    z-index: 2;            /* Au-dessus de l'image */
}

.text-bg {
  position: relative;  /* pour pouvoir positionner le pseudo-élément en absolu */
  z-index: 2;          /* le texte est au-dessus du pseudo-élément */
  margin: 8px 0;
  padding: 0px 12px;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.75);
}


.option-text {
    color: white;
    /*font-weight: bold;*/
    padding: 5px 0; /* Adjust padding for more or less spacing */
}

.option-button .option-text {
	font-size: 14px;
    text-align: center;
    /*font-weight: bold;*/
    color: #FFFFFF;
}

.option-button.active .option-logo {
    box-shadow: 0 0 20px #DF1366 !important;
	border: 1px solid #DF1366 !important;
}
.exclusions-switch-container {
    margin-top: 20px;
    text-align: center;
	padding: 10px; /* Ajoutez un padding si nécessaire */
}

.exclusions-title {
    display: block;
    margin-bottom: 10px;
    color: var(--text-grey) !important;
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    left: 4px;
    bottom: 2px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #E70B63;
}

input:checked + .slider:before {
    transform: translateX(21px);
}


/* Assurez-vous que votre classe mt-5-cr ne provoque pas de marges non souhaitées */
.mt5-cr {
    margin-top: 0px !important;
}

/* Ajoutez d'autres styles nécessaires */


.mt5-cr {
	margin-top: 0px  !important;
	padding-left: 0px  !important;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

h2 {
	color: #696A6D !important;
	margin-bottom: 1rem !important;
	font-size: 1.2rem !important;
}

h4 {
    color: var(--crfs-text);
    font-weight: 900;
	margin-bottom: 40px !important;
	text-align: center !important;
}

.btn {
	border-radius: 4px; /* Définir un border-radius modéré */
	transition: none; /* Désactiver toute transition */
}

/* Pour un état normal */
#confirmDeleteButton, #cancelDeleteButton {
	border-radius: 4px !important;
}

/* Empêcher toute modification lors d'un clic */
#confirmDeleteButton:active, #cancelDeleteButton:active {
	border-radius: 4px !important;
	transform: none;
	box-shadow: none;
}

/* Pour un état normal */
#confirmDeleteButtonGen #cancelDeleteButtonGen {
	border-radius: 4px !important;
}

/* Empêcher toute modification lors d'un clic */
#confirmDeleteButtonGen:active, #cancelDeleteButtonGen:active {
	border-radius: 4px !important;
	transform: none;
	box-shadow: none;
}

/* Styles pour le bouton confirmDeleteButtonGen */
#confirmationPopupDeleteButtonGen .btn {
    border-radius: 4px; /* Définissez le border-radius souhaité */
}

#confirmationPopupDeleteButtonGen .btn:active,
#confirmationPopupDeleteButtonGen .btn:focus {
    border-radius: 4px; /* Maintenez le même border-radius lors du clic ou du focus */
}

.rowtexarea{
	margin-right: 0px;
	margin-left: 0px;
}

.textareas-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important; /* Adjust based on the width of upload area + some spacing */
}

.textarea-container {
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important; /* Align items to the bottom */
	flex-direction: column;
    margin-bottom: 20px !important; /* Space between the textareas */
}

.textarea-container textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 220px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 40px !important;
    border: 1px solid #f2f2f2 !important;
    border-radius: 10px !important;
    background-color: #f0f0f0 !important;
    color: #696A6D !important;
    outline: none !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
    text-align: left !important;
    line-height: normal !important;
    font-size: 0.9em !important;
	min-height: 140px;
    resize: none !important;
}

/* Style spécifique pour le textarea en lecture seule */
.textarea-container textarea[readonly] {
    background-color: var(--textareas-ro-cr) !important; /* Grise le textarea en lecture seule */
    color: #a9a9a9 !important; /* Couleur du texte en gris */
	pointer-events: none !important; /* Désactive les interactions avec le textarea */
}

.textareas-container textarea[readonly] {
    background-color: var(--textareas-ro-cr) !important; /* Grise le textarea en lecture seule */
    color: #a9a9a9 !important; /* Couleur du texte en gris */
	pointer-events: none !important; /* Désactive les interactions avec le textarea */
}

/* Media queries pour rendre la police responsive */
@media (max-width: 1200px) {
    .textarea-container textarea {
        font-size: 0.9em !important; /* Ajuste la taille de la police pour les écrans moyens */
    }
}

@media (max-width: 768px) {
    .textarea-container textarea {
        font-size: 0.8em !important; /* Ajuste la taille de la police pour les petits écrans */
    }
	.textarea-container .submit-btn-inside {
		width: 95% !important; /* Le bouton occupe 20% de la largeur du conteneur */
	}
}

@media (max-width: 576px) {
    .textarea-container textarea {
        font-size: 0.8em !important; /* Ajuste la taille de la police pour les très petits écrans */
		min-height: 140px;
    }
	.textarea-container .submit-btn-inside {
		width: 95% !important; /* Le bouton occupe 20% de la largeur du conteneur */
	}
}

.textarea-container .submit-btn-inside {
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important; /* Positionner à 10px au-dessus du bord inférieur du textarea */
    width: 20%; /* Le bouton occupe 20% de la largeur du conteneur */
    color: white !important;
    background-image: linear-gradient(to right, #E50A62, #5F84C2) !important;
	margin-top: 50px !important;
    padding: 5px 0 !important; /* Ajuste le padding pour centrer le texte */
    border: none !important;
	border-radius: 10px !important;
    cursor: pointer !important;
    outline: none !important;
    transition: background-color 0.3s, box-shadow 0.3s !important;
	min-width: 200px !important;
}

.textarea-container .submit-btn-inside:hover {
    background-image: linear-gradient(to right, #ff3399, #9933ff) !important; /* Un éclaircissement des couleurs originales */
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.6) !important; /* Halo lumineux tout autour du bouton */
}

.textarea-container .submit-btn-inside:disabled {
    opacity: 0.3 !important; /* Réduire l'opacité pour indiquer visuellement que le bouton est désactivé */
    cursor: not-allowed !important; /* Changer le curseur pour indiquer qu'il n'est pas cliquable */
}

.textarea-container i {
    font-size: 12px; /* Ajuster la taille de l'icône */
    margin-left: 5px; /* Espacement entre l'input et l'icône */
	color: white;
}

.quality-row {
	display: flex;           /* Place .quality-block et le bouton sur la même ligne */
	justify-content: center; /* Centre horizontalement */
	align-items: center; /* Centre verticalement */
	gap: 10px;               /* Espace horizontal entre .quality-block et le bouton */
}

.quality-block {
	flex-shrink: 0; /* Empêche le bloc de rétrécir */
    text-align: center; /* Centre le contenu à l'intérieur */
    border-radius: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: auto;
}

.quality-title {
    font-size: 14px;
    color: var(--menu-text);
    margin-bottom: 10px; /* Espace entre le titre et le bloc d’options */
    text-align: center;
	background-color: var(--bg-crfs);
	border-radius: 15px;
    /* Vous pouvez aussi centrer : text-align: center; */
}


/* Le conteneur des options + du bouton submit */
.quality-options {
    display: flex;
    align-items: center;
    gap: 3px; /* espace horizontal entre les items */
    justify-content: flex-start; 
    /* S’il y a trop d’éléments, on pourra faire flex-wrap: wrap; */
    position: relative; /* Permet de placer le bouton Submit à droite */
	overflow: hidden;
}

/* Les boutons de qualité : images de fond + label texte */
.btn-quality-l {
	display: inline-flex; 
    width: 120px; 
    height: 50px;
	background-color: var(--bg-crfs);
    border: none;
	border-top-left-radius: 10px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 10px;
    position: relative;
    cursor: pointer;
    color: var(--text-grey);
    text-align: center;
	align-items: center;
	justify-content: center;
    transition: transform 0.3s;
    overflow: hidden; /* Pour masquer le label en trop si besoin */
}

.btn-quality-c {
	display: inline-flex;
    width: 120px; 
    height: 50px;
	background-color: var(--bg-crfs);
    border: none;
    border-radius: 0px;
    position: relative;
    cursor: pointer;
    color: var(--text-grey);
    text-align: center;
	align-items: center;
	justify-content: center;
    transition: transform 0.3s;
    overflow: hidden; /* Pour masquer le label en trop si besoin */
}

.btn-quality-r {
	display: inline-flex;
    width: 120px; 
    height: 50px;
	background-color: var(--bg-crfs);
    border: none;
	border-top-left-radius: 0px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 0px;
    position: relative;
    cursor: pointer;
    color: var(--text-grey);
    text-align: center;
	align-items: center;
	justify-content: center;
    transition: transform 0.3s;
    overflow: hidden; /* Pour masquer le label en trop si besoin */
}

.btn-quality-l:hover,
.btn-quality-c:hover,
.btn-quality-r:hover {
  background-color: var(--menu-hover-bg); /* léger éclaircissement */
}

/* Au survol, petit zoom */
.btn-quality:hover {
    transform: scale(1.05);
}

/* L’étiquette blanche en bas */
.quality-text {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    padding: 5px 0;
    color: var(--text-grey);
    font-size: 14px;
    line-height: 1.2em;
	left: 0px;
	user-select: none; 
}

/* --- BOUTON ACTIF (sélectionné) --- */
.btn-quality-l.active{
  outline: none;
  border-top-left-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 10px;
  box-shadow: none;  
  border: 2px solid #E50A62; /* Couleur de bordure pour l’état actif */
  background-color: var(--bg-crfs); /* ou la même couleur, selon le rendu souhaité */
}

.btn-quality-c.active{
  outline: none;
  box-shadow: none;  
  border-radius: 0px;
  border: 2px solid #E50A62; /* Couleur de bordure pour l’état actif */
  background-color: var(--bg-crfs); /* ou la même couleur, selon le rendu souhaité */	
}

.btn-quality-r.active {
  outline: none;
  border-top-left-radius: 0px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 0px;
  box-shadow: none;  
  border: 2px solid #E50A62; /* Couleur de bordure pour l’état actif */
  background-color: var(--bg-crfs); /* ou la même couleur, selon le rendu souhaité */
}

.btn-quality-l:active,
.btn-quality-c:active,
.btn-quality-r:active {
  background-color: var(--menu-hover-bg);
  transition: background-color 0.2s;
}

.btn-quality-l:focus,
.btn-quality-c:focus,
.btn-quality-r:focus {
  /* Au besoin, vous pouvez retirer le outline, etc. */
  outline: none;
  box-shadow: none;
  /* On évite de remettre un border-radius: 15px; */
}

.btn-quality-c::before,
.btn-quality-r::before {
  content: "Pro";                 /* Le texte affiché */
  position: absolute;             /* Positionnement absolu par rapport au bouton */
  top: 2px;                       /* Ajustez selon vos préférences */
  left: -52px;                    /* Ajustez pour recentrer le bandeau */
  transform: rotate(-45deg);      /* Inclin à 45° (négatif => penche vers gauche) */
  background-color: #E50A62;      /* Couleur de fond rose */
  color: #fff;                    /* Texte blanc */
  font-size: 10px;                /* Taille de la police, assez petit */
  font-weight: bold;             /* Pour que "Pro" se voit bien */
  padding: 0px 56px;               /* Un peu de padding autour du texte */
  z-index: 0;                     /* Au-dessus du fond du bouton */
  pointer-events: none;           /* Évite que le hover sur le ruban affecte le bouton */
  border-radius: 2px;             /* Optionnel, pour arrondir légèrement */
}

.btn-quality-c,
.btn-quality-r {
  position: relative; /* Pour que ::before puisse se positionner en absolu */
  overflow: hidden;  /* Pour s’assurer que le ruban ne soit pas coupé */
}

/* Le bouton Submit à droite du conteneur */
.quality-options .submit-btn-outside {
    margin-left: auto; /* Pousse le bouton Submit à droite */
}

/* Le nouveau bouton Submit en dessous */
.submit-btn-outside {
	margin-top: 30px;
	margin-bottom: 0px;
	margin-left: 0px;
    padding: 12px 16px;
    border: none;
    background-image: linear-gradient(to right, #E50A62, #5F84C2);
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
	width: 200px;
    min-width: 200px;
	align-self: center; 
}

/* État désactivé */
.submit-btn-outside:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/*.textarea-container textarea:focus + .submit-btn-inside,
.textarea-container textarea:not(:placeholder-shown) + .submit-btn-inside {
    display: block !important; /* Afficher le bouton lorsque le textarea est focus ou non vide
}*/

/* Autres styles pour le formulaire */
.form-group {
    margin-bottom: 25px !important;
}


/*.form-group.row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important; /* Espacement entre les colonnes */
}*/

.form-group.row {
    display: flex;
    align-items: flex-start;
}


.form-group.row .col-md-6 {
    flex: 1 !important;
}


.form-container {
    display: flex !important;
    flex-direction: column !important;
}

.form-left,
.form-right {
    width: 100% !important; /* Prenez toute la largeur */
}

/* Textarea Styles */
textarea.form-control {
    border: 1px solid var(--border-textarea) !important; /* Bordure grise de 1px */
    resize: none !important; /* Empêche le redimensionnement */
    overflow-y: hidden !important; /* Masque la barre de défilement verticale */
    background-color: var(--bg-textarea) !important;
    color: var(--menu-text) !important; /* Couleur du texte */
    padding-top: 15px !important; /* Ajoutez du padding pour centrer verticalement */
    padding-bottom: 15px !important; /* Ajoutez du padding pour centrer verticalement */
    padding-left: 40px !important;
	outline: none !important; /* Empêche la bordure bleue par défaut lors du focus */
    border-radius: 10px !important;
    text-align: left !important; /* Assure que le texte n'est pas centré horizontalement */
    line-height: normal !important;/* Reset line height */
    /*height: auto !important; /* Pour permettre un ajustement automatique */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* Effet d'ombre sous le textarea */
}

textarea.form-control::placeholder {
    color: #a9a9a9 !important; /* Couleur du texte placeholder */
}

/* Garder le même style lors du focus */
textarea.form-control:focus {
	/*border: 1px solid #DF1366 !important;*/
	box-shadow: 0 0 20px var(--border-textarea) !important;
	border: 1px solid var(--border-textarea) !important;
    background-color: var(--bg-textarea-focus) !important; /* Même couleur de fond */
    color: var(--menu-text) !important; /* Même couleur de texte */
    outline: none !important; /* Empêche la bordure bleue par défaut lors du focus */
}

.question-icon {
    position: absolute !important;
    top: 4px !important;
    right: 6px !important;
    cursor: pointer !important;
    color: var(--crfs-text) !important;
    font-size: 22px !important;
}

label {
    color: #696A6D !important;
    text-align: center !important;
	font-weight: bold !important; /* Met le texte en gras */
    font-size: 13px !important; /* Ajustez la taille de la police selon vos besoins */
    margin: 0 !important;
	border-radius: 15px !important;
}

/* Conteneur pour les icônes */
.icon-container {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    display: flex !important;
    flex-direction: column !important; /* Dispose les icônes en colonne */
    align-items: center !important;
    gap: 5px !important; /* Espace entre les icônes */
}

/* Style pour l'icône de question */
.icon-container .question-icon {
    font-size: 22px !important;
    color: var(--crfs-text) !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Style pour l'image clear.png */
.icon-container .clear-icon {
	display: none;
	position: absolute !important;
	font-size: 20px !important;
	right: 2px !important;
    cursor: pointer !important;
	color: var(--crfs-text) !important;
}


.container .row {
    display: flex !important;
    flex-wrap: wrap !important;
}


/* Upload Area */

.upload-area-container {
    margin-right: 20px; /* Spacing between upload area and textareas */
}

.upload-area {
    color: var(--crfs-text) !important;
    text-align: center;
    cursor: pointer;
    width: 270px;
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-crfs) !important;
    position: relative;
	border: 1px solid var(--crfs-text);
	border-radius: 15px !important;
}

/* Plus Icon */
.plus-icon {
    width: 50px;
    height: 50px;
    color: var(--crfs-text);
    font-size: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--crfs-text);
    border-radius: 50%;
    margin-bottom: 10px; /* Space between the icon and the text */
	pointer-events: all;
}

.upload-area span {
    display: block; /* Assurer que le texte occupe une nouvelle ligne */
    font-size: 0.8rem; /* Ajustez cette valeur selon vos besoins */
}

.upload-area:hover {
	background-color: var(--bg-crfs-focus) !important;
}

.upload-area.dragover {
    background-color: transparent !important;
	border: 0px solid var(--crfs-text) !important;
}

.upload-text {
	margin-top: 0px;
	font-size: 0.8rem !important;
	font-weight: bold !important;
	pointer-events: all !important;
}

.upload-text-2 {
	font-size: 0.6rem !important;
	margin-top: 0px;
	pointer-events: all !important;
}

.upload-area .img-preview-container {
    pointer-events: all !important;/* Réactive les événements pointer sur les éléments enfants nécessaires */
}

.upload-area .question-icon {
    pointer-events: all !important; /* Réactive les événements pointer sur l'icône de question */
}


.upload-instructions-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
	flex-direction: column !important;
}

.instructions {
    max-width: 600px;
    height: 500px;
    padding: 20px;
    background-color: var(--instructions-prompt);
    border: 1px solid #ccc;
    border-radius: 10px;
}

.instructions h4 {
    font-size: 35px;
    margin-bottom: 15px !important;
    font-weight: 100 !important;
    position: relative; /* Pour permettre le positionnement du pseudo-élément */
}

.instructions h4:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px; /* Ajustez la hauteur de la ligne selon votre préférence */
    background: linear-gradient(to right, #E50A62, #5F84C2);
}

.instructions ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.instructions li {
    margin-bottom: 10px !important;/* Ajoute un espacement entre les instructions */
    font-size: 14px !important;
    color: #333 !important;
}




.instruction-images {
    display: flex;
    gap: 120px;
    margin-top: 10px;
	align-items: center;
    justify-content: center;
}

.instruction-images img {
    width: 150px;
    height: auto;
    object-fit: cover;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.instructions-text {
    text-align: center !important;
	font-weight: bold !important; /* Met le texte en gras */
    font-size: 14px !important; /* Ajustez la taille de la police selon vos besoins */
    margin-top: -37px !important;
	color: #CA5886 !important;
}

.instructions-prompt {
    max-width: 600px;
    /*height: 470px;*/
	max-height: 80vh;
    padding: 20px;
    background-color: var(--instructions-prompt);
    border: 1px solid #ccc;
    border-radius: 10px;
	overflow-y: auto;
}

.instructions-prompt h4 {
    font-size: 35px;
    margin-bottom: 15px !important;
    font-weight: bold !important;
    position: relative; /* Pour positionner le pseudo-élément */
}

.instructions-prompt h4:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px; /* Ajustez la hauteur de la ligne selon votre préférence */
    background: linear-gradient(to right, #E50A62, #5F84C2);
}


.instructions-prompt ul {
    list-style: none !important;
    padding: 0 !important;
	margin-top: 18px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.instructions-prompt li {
    margin-bottom: 10px !important;/* Ajoute un espacement entre les instructions */
    font-size: 14px !important;
    color: #333 !important;
}

.popup-instructions-faq{
	color: inherit; /* Pour hériter de la couleur du titre */
    text-decoration: none; /* Pour supprimer le soulignement si nécessaire */
	display: flex;
    justify-content: center;  /* Centre horizontalement */
    align-items: center;       /* Centre verticalement */
    width: 100%;               /* Assure que l'élément prend toute la largeur disponible */
    text-align: center;        /* Centre le texte à l'intérieur du lien */
    margin-top: 20px;          /* Espacement optionnel pour ajuster l'apparence */
	margin-bottom: 20px;
	font-size: 18px;
}

.popup-instructions-faq:hover {
    color: #DF1366; /* Change la couleur au survol, optionnel */
}
/* Style pour le popup des instructions */
.popup-instructions-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-bg-info); /* Overlay blanc transparent */
    display: none; /* Caché par défaut */
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Assure que le popup est au-dessus de tout le reste */
}

.popup-instructions-overlay-prompt {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* Overlay blanc transparent */
    display: none; /* Caché par défaut */
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Assure que le popup est au-dessus de tout le reste */
}

.instructions-popup {
    /*background-color: var(--bg-color);*/
    padding: 20px;
    border-radius: 10px;
    max-width: 80%;
    max-height: 80%;
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);*/
    position: relative;
}

.instructions-popup-prompt {
    /*background-color: var(--bg-color);*/
    padding: 20px;
    border-radius: 10px;
    max-width: 80%;
    max-height: 80%;
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);*/
    position: relative;
	z-index: 10000;
}

.close-instructions {
    position: absolute;
    top: 7px; /* Ajustez selon vos besoins */
    right: 10px; /* Ajustez selon vos besoins */
    background: rgba(128, 128, 128, 0.5); /* Fond gris transparent */
    border: none;
    width: 30px; /* Largeur du bouton pour faire un cercle */
    height: 30px; /* Hauteur du bouton pour faire un cercle */
    border-radius: 50%; /* Crée un fond circulaire */
    font-size: 25px; /* Taille de la croix */
    color: var(--text-color); /* La couleur du texte/croix */
    cursor: pointer;
    z-index: 10; /* Assure que le bouton est au-dessus de tout le reste */
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1; /* Assure que la croix est centrée */
    transition: background-color 0.3s ease; /* Ajoute une transition pour l'effet hover */
    outline: none; /* Désactive l'effet de focus */
}

.close-instructions:active {
    transform: scale(1); /* Désactive l'effet de redimensionnement */
    border-radius: 50%; /* Garde le border-radius constant */
    background: rgba(128, 128, 128, 0.8); /* Change légèrement le fond lors du clic */
}

.close-instructions:focus {
    outline: none; /* Supprime le contour bleu de focus */
}

.close-instructions:hover {
    background: rgba(128, 128, 128, 0.8); /* Fonce un peu la couleur au survol */
    /*color: #DF1366;  Change la couleur de la croix au survol */
}


.close-instructions-prompt {
    position: absolute;
    top: 7px; /* Ajustez selon vos besoins */
    right: 10px; /* Ajustez selon vos besoins */
    background: rgba(128, 128, 128, 0.5); /* Fond gris transparent */
    border: none;
    width: 30px; /* Largeur du bouton pour faire un cercle */
    height: 30px; /* Hauteur du bouton pour faire un cercle */
    border-radius: 50%; /* Crée un fond circulaire */
    font-size: 25px; /* Taille de la croix */
    color: var(--text-color); /* La couleur du texte/croix */
    cursor: pointer;
    z-index: 10; /* Assure que le bouton est au-dessus de tout le reste */
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1; /* Assure que la croix est centrée */
    transition: background-color 0.3s ease; /* Ajoute une transition pour l'effet hover */
    outline: none; /* Désactive l'effet de focus */
}

.close-instructions-prompt:active {
    transform: scale(1); /* Désactive l'effet de redimensionnement */
    border-radius: 50%; /* Garde le border-radius constant */
    background: rgba(128, 128, 128, 0.8); /* Change légèrement le fond lors du clic */
}

.close-instructions-prompt:focus {
    outline: none; /* Supprime le contour bleu de focus */
}

.close-instructions-prompt:hover {
    background: rgba(128, 128, 128, 0.8); /* Fonce un peu la couleur au survol */
    /*color: #DF1366;  Change la couleur de la croix au survol */
}

.circle {
	display: inline-block;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background-color: #DF1366;
	color: white;
	text-align: center;
	line-height: 26px;
	font-size: 14px;
	margin-right: 10px;
}

.img-preview-container {
    position: relative;
    display: flex;
    justify-content: center; /* Centre l'image horizontalement */
    align-items: center; /* Centre l'image verticalement */
    width: 100%;
    height: 100%;
    /*border: 1px solid grey; /* Ajoute une bordure grise de 1px */
    /*padding: 5px; /* Ajoute un espace de 5px à l'intérieur des bords */
	border-radius: 15px;
    box-sizing: border-box; /* Assure que le padding et la bordure sont inclus dans les dimensions de l'élément */
}

.img-preview-container:hover .trash-icon {
    display: block;
}

.trash-icon-fs {
    position: absolute;
    bottom: -63px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 16px; /* Réduire la taille de l'icône */
    cursor: pointer;
    /*z-index: 999;*/
    transition: color 0.3s;
	line-height: 1 !important;
    /*pointer-events: auto; /* Allow interactions */
    background-color: rgba(128, 128, 128, 0.9); /* Cercle gris transparent */
    border-radius: 50%; /* Faire un cercle */
    padding: 15px; /* Ajuster le padding pour centrer l'icône dans le cercle */
}

.trash-icon-fs:hover {
    color: red;
}

.center-content {
	display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
	margin-top: -17px;
	margin-bottom: 20px;
}

.img-preview-cr {
    max-width: 100%;
    max-height: 100%;
	border-radius:15px;
    object-fit: contain; /* Assure que l'image garde ses proportions */
}



#formatOptions, #stylingOptions, #lightingOptions, #cameraOptions {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
	/*grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));*/
    /*gap: 30px;*/
    justify-items: center !important;
	justify-content: center !important;
	margin-bottom: 60px !important;
}

.button-row {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments enfants de se réorganiser sur plusieurs lignes si nécessaire */
    justify-content: center; /* Centre les éléments horizontalement */
    gap: 20px; /* Espace entre les éléments */
    width: 100%;
}


.option {
    display: none; /* Par défaut, cacher toutes les options */
}

.option.active {
    display: block; /* Afficher les options actives */
}

.option .icon {
    height: 1em; /* Assure que l'icône a la même hauteur que le texte */
    width: auto; /* Maintient le ratio de l'icône */
    margin-right: 0.5em; /* Espace entre l'icône et le texte */
    vertical-align: middle; /* Aligne l'icône verticalement */
	color: #696A6D
}


.options-container {
    position: relative;
    display: flex;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
    flex-wrap: wrap;
    gap: 20px;
	padding-top: 50px;
	padding-right: 30px;
	padding-bottom: 5px;
	padding-left: 30px;
    margin-top: 10px;
	margin-bottom: 20px;
    background-color: var(--bg-std) !important;
}

.options-title-op {
    position: absolute;
    top: 0px;
    left: 30px;
    color: var(--text-grey) !important;
    font-weight: bold; /* Texte en gras */
	font-size: 15px;
	display: block;
	width:95%;
}

.options-title-op::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, #E50A62, #5F84C2);
	top: 27px;
}

.option-item {
    position: relative;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column; /* Disposer les enfants en colonne */
    align-items: center; /* Centrer les enfants horizontalement */
	z-index: 0;
}

.option-item img {
    border-radius: 15px;
	border: 1px solid #FAFAFA  !important;
    position: relative;
    /*z-index: 1; /* Assure que l'image est au-dessus de l'overlay par défaut */
}

.option-item img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6); /* Overlay blanc transparent */
    opacity: 0; /* Initialement invisible */
    transition: opacity 0.3s ease;
    z-index: 2; /* Assure que l'overlay est au-dessus de l'image */
}

.option-item:hover img::after {
    opacity: 1; /* Visible au survol */
}


/* Option Styles */
.option .image-container {
    position: relative;
    display: flex;
    flex-direction: column; /* Arrange les éléments en colonne */
    align-items: center; /* Centre les éléments horizontalement */
    gap: 14px; /* Espace entre l'image et le texte */
	border-radius: 15px;
}
.option .option-logo {
    display: block !important;
    max-width: 100px; /* Réduit la largeur maximale de l'image */
    max-height: 100px; /* Réduit la hauteur maximale de l'image */
    min-width: 80px; /* Taille minimale de l'image */
    min-height: 80px; /* Taille minimale de l'image */
	border-radius: 15px;
}

.option .image-overlay {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 110%;
    background-color: rgba(255, 255, 255, 0.3); /* Overlay blanc transparent */
    opacity: 0; /* Initialement invisible */
    transition: opacity 0.3s ease;
    z-index: 2; /* Assure que l'overlay est au-dessus de l'image */
	border-radius: 15px;
}

.option:hover .image-overlay {
    opacity: 1; /* Visible au survol */
}

.option .option-text {
    text-align: center !important;
	/*font-weight: bold !important; /* Met le texte en gras */
    font-size: 14px !important; /* Ajustez la taille de la police selon vos besoins */
    margin-top: -37px !important;
	color: #dfdede;
}

.option-button {
    display: flex !important;
    border: none !important;
    background: none !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
	border-radius: 15px !important;
}

.item-name {
	color: #ffffff;
	width: 100%;
	font-size: 14px;
	text-align: center;
	box-sizing: border-box;
	margin-top: -27px; /* Espace entre l'image et le nom */
	transition: background-color 0.3s ease;
	z-index:999;
	/*border: 1px solid #dfdfdfbf  !important;*/
}

.item-name-models {
	color: #ffffff;
	width: 100%;
	font-size: 14px;
	text-align: center;
	box-sizing: border-box;
	margin-top: -85px; /* Espace entre l'image et le nom */
	transition: background-color 0.3s ease;
	z-index:999;
	margin-bottom: 60px;
	/*border: 1px solid #dfdfdfbf  !important;*/
}

.option-item.selected .image-container-op img {
    box-shadow: 0 0 20px #DF1366;
	border: 1px solid #DF1366 !important;
}

.option-item.selected .item-name {
	color: white;
	font-weight: bold;
}


.image-container-op {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-container-op img {
    border-radius: 15px;
    border: none !important;
    position: relative;
	max-width: 150px;
   /* z-index: 1; /* Assure que l'image est au-dessus de l'overlay par défaut */
}

.image-container-op .image-overlay {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3); /* Overlay blanc transparent */
    opacity: 0; /* Initialement invisible */
    transition: opacity 0.3s ease;
    z-index: 2; /* Assure que l'overlay est au-dessus de l'image */
	border-radius: 15px;
	
}

.option-item:hover .image-container-op .image-overlay {
    opacity: 1; /* Visible au survol */
}



.user-info {
    position: relative;
    display: inline-block;
}


.option-logo-w {
    max-width: 50px; /* Assurer que l'image ne dépasse pas la largeur du conteneur */
    max-height: 50px; /* Assurer que l'image ne dépasse pas la hauteur du conteneur */
    display: block; /* Pour éviter le décalage bas ligne */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.failed {
	color: var(--crfs-text);
}

/* Popup Styles */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none; /* Caché par défaut */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}


button.close-popup {
	width: 65%;
    padding: 10px 20px;
    border: none;
    color: white; /* Choisir une couleur de texte qui ressort bien sur un fond sombre */
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    background-image: linear-gradient(to right, #ff0077, #7700ff);
    outline: none;
	transition: background-color 0.3s, box-shadow 0.3s;
}

button.close-popup:hover {
    background-image: linear-gradient(to right, #ff3399, #9933ff); /* Un éclaircissement des couleurs originales */
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.6); /* Halo lumineux tout autour du bouton */
}


.overlay-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fond grisé semi-transparent */
    z-index: 9999; /* Assure que l'overlay est au-dessus de tout le reste */
    display: flex;
    justify-content: center;
    align-items: center;
	backdrop-filter: blur(5px);
}

.overlay-container-last {
  position: fixed;
  top: 45px;
  left: 30px;
  right: 30px;
  background-color: var(--bg-color);
  display: flex;
  justify-content: space-between;
  border: 1px solid var(--message-box-bg) !important;
  overflow: hidden;
  z-index: 9999;
  border-radius: 15px;
  flex-shrink: 0;
}



.image-container-cr {
    width: 90%;  /* Un peu moins que 100% pour garantir une marge */
    height: 100%;  /* Ajustement pour respecter le ratio de l'image */
    display: flex;
    justify-content: center;
    align-items: center;
	max-width: 55%;
}

.image-container-cr-last {
    height: auto; /* Ajustement pour respecter le ratio de l'image */
    display: flex;
    justify-content: left;
    align-items: flex-start; /* Aligne l'image en haut */
    margin-top: 0; /* Supprime la marge au-dessus */
    padding-top: 0; /* Supprime le padding au-dessus */
	flex-shrink: 0;
	max-width: 55%;
}

.image-container-global {
    position: relative;
	display: inline-block;
	max-width: 400px;
    overflow: hidden; /* Assure que l'image ne dépasse pas du conteneur */
	border-radius: 5px;
	/*border: 1px solid #f2f2f2;*/
}

.image-container-global img.img-thumbnail-cr {
    max-width: 100%;
    /*height: auto;*/
    display: block; /* Empêche les espaces blancs sous l'image */
    border-radius: 5px; /* Optionnel : pour les bords arrondis */
}

.image-container-global .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Assurez-vous que l'overlay prend la taille de l'image */
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Couleur de l'overlay avec transparence */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* L'overlay est initialement invisible */
    transition: opacity 0.3s ease; /* Transition pour l'effet de survol */
    border-radius: 5px; /* Même rayon de bord que l'image, si souhaité */
}

.image-container-global img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover to maintain aspect ratio */
    transition: transform 0.3s ease;
	border-radius: 5px;
}

.image-container-global:hover img {
    transform: scale(1.1); /* Applique un effet de zoom prononcé */
}

.image-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-image-info) !important;
	padding-top: 5px;
	padding-right: 15px;
	padding-bottom: 5px;
	padding-left: 15px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.image-info .style-id {
    font-size: 12px;
    color: #696A6D;
}

.image-info .heart-icon {
    font-size: 16px;
    cursor: pointer;
    color: grey;
}

.image-info .heart-icon.liked {
    color: red;
}

.overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: var(--overlay-cr) !important;/* Couleur de l'overlay */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    color: white !important;
    font-size: 15px !important; /* Taille du texte de l'overlay */
    opacity: 0 !important; /* L'overlay est initialement invisible */
    transition: opacity 0.3s !important;/* Transition fluide */
	border-radius: 2px !important;
}

.image-container-global:hover .overlay {
    opacity: 0.6 !important; /* L'overlay devient visible au survol */
    cursor: pointer !important;
}

.overlay-text {
    color: var(--overlay-text-cr);
    font-size: 1.5em;
    text-align: center;
}

.image-wrapper-gen {
    position: relative;
    display: inline-block; /* S'adapte à la taille de l'image */
}

.img-thumbnail-cr {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 5px; /* Optional rounded corners */
	transition: visibility 0s, opacity 0.5s linear;
    opacity: 1;
}

.img-thumbnail-cr[style*="visibility: hidden"] {
    opacity: 0;
}

.hidden {
    opacity: 0;
}

.fade-in {
    transition: opacity 0.3s ease-in;
    opacity: 1;
}


.image-wrapper .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 5px; /* Same radius as the image */
}

.image-wrapper:hover .overlay {
    opacity: 1; /* Show overlay on hover */
}


.trash-icon {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 16px; /* Réduire la taille de l'icône */
    cursor: pointer;
    z-index: 3;
    transition: color 0.3s;
    pointer-events: auto; /* Allow interactions */
    background-color: rgba(128, 128, 128, 0.5); /* Cercle gris transparent */
    border-radius: 50%; /* Faire un cercle */
    padding: 16px; /* Ajuster le padding pour centrer l'icône dans le cercle */
}

.trash-icon:hover {
    color: red;
}

.eye-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 16px; /* Réduire la taille de l'icône */
    cursor: pointer;
    z-index: 3;
    transition: color 0.3s;
    /*pointer-events: auto; /* Allow interactions */
    background-color: rgba(128, 128, 128, 0.5); /* Cercle gris transparent */
    border-radius: 50%; /* Faire un cercle */
    padding: 16px; /* Ajuster le padding pour centrer l'icône dans le cercle */
}

.eye-icon:hover {
    color: #696A6D;
}

.fullscreen-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Assure que l'image garde ses proportions */
}

/* Button Container */
.button-container {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px 0; /* Ajustez le padding comme vous le souhaitez */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Fullscreen Button */
.fullscreen-button {
    background: none;
    border: none;
    color: white;
    font-size: 18px;  /* Taille réduite pour les petits écrans */
    padding: 10px 15px;  /* Plus de padding pour une meilleure cliquabilité */
    margin: 5px;  /* Espacement réduit */
    cursor: pointer;
    transition: color 0.3s;
}

.fullscreen-button:hover {
    color: #ff0077; /* Changez la couleur au survol comme vous le souhaitez */
}

/* Styles mis à jour pour les boutons */
.fullscreen-button-last,
.fullscreen-button-delete {
    width: 100%; /* Les boutons occupent toute la largeur du conteneur */
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s, color 0.3s;
    border-radius: 10px; /* Ajusté pour correspondre aux autres styles */
    margin: 0; /* Supprime les marges qui affectent la mise en page */
}

/* Styles spécifiques pour .fullscreen-button-last */
.fullscreen-button-last {
    color: white !important;
    background-image: linear-gradient(to right, #E50A62, #5F84C2) !important;
    border: none !important;
    cursor: pointer !important;
    outline: none !important;
    text-align: center;
}

/* Effet au survol pour .fullscreen-button-last */
.fullscreen-button-last:hover {
    background-image: linear-gradient(to right, #ff3399, #9933ff) !important;
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.6) !important;
}

.fullscreen-button-close-last {
    position: absolute;
    top: 7px; /* Ajustez selon vos besoins */
    right: 10px; /* Ajustez selon vos besoins */
    background: rgba(128, 128, 128, 0.5); /* Fond gris transparent */
    border: none;
    width: 30px; /* Largeur du bouton pour faire un cercle */
    height: 30px; /* Hauteur du bouton pour faire un cercle */
    border-radius: 50%; /* Crée un fond circulaire */
    font-size: 25px; /* Taille de la croix */
    color: var(--text-color); /* La couleur du texte/croix */
    cursor: pointer;
    z-index: 10000; /* S'assure que le bouton est au-dessus de tout le reste */
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1; /* Assure que la croix est centrée */
    transition: background-color 0.3s ease; /* Ajoute une transition pour l'effet hover */
    outline: none; /* Désactive l'effet de focus */
}

.fullscreen-button-close-last:active {
    transform: scale(1); /* Désactive l'effet de redimensionnement */
    border-radius: 50%; /* Garde le border-radius constant */
    background: rgba(128, 128, 128, 0.8); /* Change légèrement le fond lors du clic */
}

.fullscreen-button-close-last:focus {
    outline: none; /* Supprime le contour bleu de focus */
}

.fullscreen-button-close-last:hover {
    background: rgba(128, 128, 128, 0.8); /* Fonce un peu la couleur au survol */
}


.fullscreen-button-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(128, 128, 128, 0.7); /* Fond gris transparent */
    border: none;
    width: 30px; /* Largeur du bouton pour faire un cercle */
    height: 30px; /* Hauteur du bouton pour faire un cercle */
    border-radius: 50%; /* Crée un fond circulaire */
    font-size: 25px; /* Taille de la croix */
    color: var(--text-color); /* La couleur du texte/croix */
    cursor: pointer;
    z-index: 10000; /* S'assure que le bouton est au-dessus de tout le reste */
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1; /* Assure que la croix est centrée */
    transition: background-color 0.3s ease; /* Ajoute une transition pour l'effet hover */
    outline: none; /* Désactive l'effet de focus */
}

.fullscreen-button-close:active {
    transform: scale(1); /* Désactive l'effet de redimensionnement */
    border-radius: 50%; /* Garde le border-radius constant */
    background: rgba(128, 128, 128, 1); /* Change légèrement le fond lors du clic */
}

.fullscreen-button-close:focus {
    outline: none; /* Supprime le contour bleu de focus */
}

.fullscreen-button-close:hover {
    background: rgba(128, 128, 128, 1); /* Fonce un peu la couleur au survol */
}


/* Styles spécifiques pour .fullscreen-button-delete */
.fullscreen-button-delete {
    background-color: grey;
    border: none;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}


/* Effet au survol pour .fullscreen-button-delete */
.fullscreen-button-delete:hover {
    background-color: #d72e2e;
}

.btn-copy {
    background-color: var(--bg-crfs) !important;
    border: 1px solid grey !important;
    color: var(--menu-text) !important;
    padding: 10px 20px !important;
    cursor: pointer !important;
    transition: border-color 0.3s, background-color 0.3s, color 0.3s !important;
    text-align: center !important;
    outline: none !important;
    margin-top: 0px !important;/* Ajoute un espace au-dessus du bouton */
    margin-bottom: 30px !important;
    max-width: 150px !important;
    font-size: 12px !important;
	border-radius: 10px !important;
}

.btn-copy:hover {
    border-color: #ff0077 !important;
    color: var(--menu-text) !important;
}

.btn-copy:focus,
.btn-copy:active {
    outline: none !important;
	border: 1px solid grey !important;
    box-shadow: none !important;
    border-color: #ff0077 !important;
}

.btn-copy.copied {
    color: var(--menu-text) !important;
    border-color: #ff0077 !important;
}


.button-container {
    display: flex;
    justify-content: center; /* Centre les boutons horizontalement */
    align-items: center;
    flex-wrap: wrap; /* Permet de passer les boutons sur la ligne suivante si nécessaire */
    margin-top: 10px; /* Espace entre les infos et les boutons */
}

.button-container-last {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px; /* Espace entre les boutons */
    margin-top: 20px;
	width: 300px;
}

@media (max-width: 768px) {
    .image-container-cr {
        width: 95%;  /* Utilise plus de l'espace disponible */
		max-width: 100%;
    }
	.button-container{
		flex-wrap: wrap !important;
	}
}


/* Style pour le popup */
.popup-question-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none; /* Caché par défaut */
    justify-content: center;
    align-items: center;
	z-index: 9999;
}

.popup-question-content {
    background-color: white;
    padding: 20px;
	width: 50%;
    border-radius: 10px;
    text-align: center;
}

.popup-question-p {
    text-align: left;
	margin-left: 20px;
	margin-top: 2rem;
	margin-bottom: 3rem;
}

.popup-question-content img {
    max-width: 20%;
    height: auto;
}

.head-art-gallery {
	font-size: 1rem;
	padding-right: 5px;
	margin-top: 5px;
	margin-bottom: 10px !important;
	border-bottom: 1px solid #d7d7d7bd !important;
}

/*.gallery {
    column-count: 6; 
    column-gap: 10px;
	column-width: 150px;
    width: 100%;
}

.gallery img {
    width: 100%;
    margin-bottom: 10px;
    display: block;
    border-radius: 5px;
    break-inside: avoid;
}*/

/* NOUVELLES RÈGLES en flex */
.gallery {
    display: flex;         /* On passe en flexbox */
    flex-wrap: wrap;       /* Permet d'aller à la ligne si nécessaire */
    gap: 10px;             /* Espace fixe entre les images (horizontal & vertical) */
    justify-content: flex-start; /* Aligne les images au début */
    /* ou justify-content: center; pour centrer toutes les images */
    /* ou justify-content: space-around; / space-between; selon votre goût */
}

.gallery .image-container-global {
	max-width: 200px;
    margin: 1px;    /* Largeur fixe de chaque “bloc image” */
    flex: 0 0 auto;  /* Empêche le rétrécissement automatique */
    /* margin-bottom: 10px;  // plus forcément besoin avec gap */
}

.gallery .image-container-global img {
    width: 100%;     /* L’image occupe toute la largeur du conteneur */
    /*height: auto;*/
    display: block;
    border-radius: 5px; /* Coins arrondis si souhaité */
    /* margin-bottom: 10px; // idem, remplacé par gap si besoin */
}


.img-thumbnail-cr {
    padding: 0 !important;
    border: none !important;
    display: block !important;
    margin-bottom: 0px !important;
	max-width: 400px;
	width: 100%;
	transition: transform 0.3s ease; /* Ajoute une transition pour l'effet de zoom */
}

.img-thumbnail-cr-gen {
	position: relative;
	/*border-radius: 15px;*/
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
    display: block !important;
    margin-bottom: 0px !important;
	cursor: pointer !important;
	z-index: 0 !important;
}

.all-creations-btn {
    display: block;
    margin: 20px auto;
	background-image: linear-gradient(to right, #E50A62, #5F84C2) !important;
    color: white !important;
    padding: 10px 50px !important;
    font-size: 14px !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    outline: none;
    transition: background-color 0.3s, box-shadow 0.3s;
    width: auto !important;
    text-align: center; /* Assure que le texte est centré */
}

.all-creations-btn:hover {
    background-image: linear-gradient(to right, #ff3399, #9933ff) !important; /* Un éclaircissement des couleurs originales */
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.6) !important; /* Halo lumineux tout autour du bouton */
}

#resultContainer {
    position: relative;
    overflow: hidden;
    /* Keep existing styles */
    display: none;
    margin: 20px auto;
    background-color: transparent;
    border-radius: 15px;
    padding: 20px;
    transition: width 0.5s ease, height 0.5s ease;
}

#resultContainer.loading {
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#resultContainer.loading {
    width: 300px;
    height: 300px; /* Ensure height is defined */
    display: flex;
    align-items: center;
    justify-content: center;

}

#babylonCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.loading-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*justify-content: center;*/
}

.spinnercr {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid #9700ff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 0px;
    left: 0px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



.timer {
    font-size: 10px;
    color: #fdfdfd;
    position: absolute;
    top: 250px;
}

.result-content {
    display: flex;
    align-items: stretch;
    background-color: var(--menu-bg);
    /*border-radius: 15px;*/
    padding: 20px;
    width: 100%; /* Full width within its container */
}



.result-image-container {
    flex: 1;
    margin-right: 20px;
    position: relative;
    width: 100%;
    max-width: 400px; /* Adjust this value as needed */
    height: auto;
    /*border-radius: 15px;*/
}

.result-image-container img {
    width: 100%;s
    height: auto;
    /*border-radius: 15px;*/
    transition: transform 0.3s ease;
	min-width: 400px;
	border-radius: 15px;
}

.option-modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 220px;
    right: 30px;
    top: 80px;
    /*bottom: 50px;*/
    background-color:  var(--bg-std) !important;
    border: 1px solid #888;
    border-radius: 10px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
    flex-direction: column;
	max-height: calc(100vh - 130px);
	overflow-y: auto;
}

.option-modal-content {
    display: flex;
    flex-direction: column;
    height: auto; /* Ajuste la hauteur */
    max-height: 100%; /* Limite la hauteur maximale au conteneur parent */
}

.options-scrollable {
    flex-grow: 1;
    overflow-y: auto; /* Permet de scroller à l'intérieur si nécessaire */
    max-height: calc(100vh - 180px); /* Ajuste la hauteur selon la taille de la fenêtre */
    margin-bottom: 5px; /* Ajoute un espace pour éviter l'overlap avec le bouton de fermeture */
}

.close-button-container {
    display: flex;
    justify-content: center;
    padding: 10px;
    background-color: var(--bg-std) !important;
    border-top: 1px solid #888;
    position: sticky; /* Fixe le bouton en bas du modal */
    bottom: 0;
    z-index: 10;
}

.close-modal {
    position: absolute;
    top: 7px; /* Ajustez selon vos besoins */
    right: 10px; /* Ajustez selon vos besoins */
    background: rgba(128, 128, 128, 0.5); /* Fond gris transparent */
    border: none;
    width: 30px; /* Largeur du bouton pour faire un cercle */
    height: 30px; /* Hauteur du bouton pour faire un cercle */
    border-radius: 50%; /* Crée un fond circulaire */
    font-size: 25px; /* Taille de la croix */
    color: var(--text-color); /* La couleur du texte/croix */
    cursor: pointer;
    z-index: 10; /* Assure que le bouton est au-dessus de tout le reste */
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1; /* Assure que la croix est centrée */
    transition: background-color 0.3s ease; /* Ajoute une transition pour l'effet hover */
    outline: none; /* Désactive l'effet de focus */
}

.close-modal:active {
    transform: scale(1); /* Désactive l'effet de redimensionnement */
    border-radius: 50%; /* Garde le border-radius constant */
    background: rgba(128, 128, 128, 0.8); /* Change légèrement le fond lors du clic */
}

.close-modal:focus {
    outline: none; /* Supprime le contour bleu de focus */
}

.close-modal:hover {
    background: rgba(128, 128, 128, 0.8); /* Fonce un peu la couleur au survol */
    /*color: #DF1366;  Change la couleur de la croix au survol */
}


.close-button-bottom {
    /*background-image: linear-gradient(to right, #ff0077, #2c5bc8);*/
	background-image: linear-gradient(to right, #E50A62, #5F84C2) !important;
    color: white !important;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 15px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s, box-shadow 0.3s;
    width: 30%; /* Adjust the width as needed */
}

.close-button-bottom:hover {
    background-image: linear-gradient(to right, #ff3399, #9933ff) !important; /* Un éclaircissement des couleurs originales */
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.6) !important; /* Halo lumineux tout autour du bouton */
}


@keyframes gradient-move {
    0% {
        background-position: 200% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.generating-text-container {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}


.generating-text {
    font-size: 17px;
    text-align: center;
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: white;
    animation: gradient-move 10s linear infinite;
}

.no-generating-text-container {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}


.no-generating-text {
    font-size: 16px;
    text-align: center;
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: #b7b7b7;
    animation: gradient-move 10s linear infinite;
}



.result-image-container:hover img {
    /*transform: scale(1.2);  Applique un effet de zoom prononcé */
}

.result-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Couleur de l'overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 15px; /* Taille du texte de l'overlay */
    font-weight: bold;
    opacity: 0; /* L'overlay est initialement invisible */
    transition: opacity 0.3s; /* Transition fluide */
    border-radius: 15px;
	pointer-events: none;
    z-index: 2;
}

.image-wrapper-gen:hover .result-overlay {
    opacity: 1; /* L'overlay devient visible au survol */
    cursor: pointer;
}

.result-info {
    display: flex; /* Utilisez flexbox pour aligner les éléments */
    flex-direction: column; /* Alignez les éléments en colonne */
    justify-content: center; /* Centrez verticalement les éléments */
    height: 100%; /* Définissez la hauteur à 100% pour occuper tout l'espace disponible */
    padding: 20px; /* Ajoutez un padding pour l'espace intérieur */
	padding-top: 12px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
    background-color: var(--bg-result-info);
	max-width: 800px;
	border-radius: 15px;
}

.result-info-last {
    width: 100%; /* Ajustez selon vos besoins */
	overflow-y: auto;
	padding-top: 15px;
	padding-right: 60px;
	padding-bottom: 20px;
	padding-left: 15px;
    border-radius: 10px;
    overflow-y: auto;
    max-height: 100%;
}

#fullscreenUserPrompt,
#fullscreenUserNegativePrompt {
    text-align: justify;
}

.result-info-prompt{
    text-align: justify;
}



.result-info p {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
    color: var(--result-info-p);
    font-size: 16px;
}

.result-info strong {
    color: var(--result-info-strong);
}

.inline-info {
    display: flex;
    flex-wrap: wrap;
    font-size: 12px !important; /* Taille de la police plus petite pour la ligne */
    color: var(--result-info-p) !important;
}

.inline-info .info-value {
    color: #999999; /* Couleur plus claire pour les variables */
    margin-left: 5px !important;
    margin-right: 10px !important;
}

.button-row-options {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: white !important;
    background-size: cover !important;
    background-position: center !important;
    color: white !important;
    padding-top: 10px !important;
    padding-right: 30px !important;
    padding-bottom: 10px !important;
    padding-left: 30px !important;
    cursor: pointer !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    margin-bottom: 10px !important;
	border: 1px solid #DF1366 !important;
    position: relative !important; /* Ajouté pour la position du pseudo-élément */
	margin-right: 20px;
}

.button-row-options:last-child {
    margin-right: 0; /* Retire la marge pour le dernier bouton */
}

.button-row-options::after {
    content: "";
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(255, 255, 255, 0) !important; /* Aucun effet initialement */
    border-radius: 10px !important;
    transition: background-color 0.3s ease !important;
}

.button-row-options:hover::after {
    background-color: rgba(255, 255, 255, 0.4) !important; /* Effet overlay blanc transparent */
}

.button-row-options.active {
    box-shadow: 0 0 10px #8a2be2 !important;
    color: white !important;
}

.button-row-options-op {
    font-size: 18px !important;
    font-weight: bold !important; /* Mettre le texte en gras */
}

.toggle-sidebar-btn{
	display: none;
}

.toggle-sidebar-btn.open{
	/*display: none;*/
}

.close-sidebar-btn{
	display: none;
}


#fullscreenImage {
    height: auto;
    max-height: 90vh; /* pour qu’elle ne dépasse jamais la hauteur de l'écran */
    width: auto;
    display: block;
    transition: opacity 0.5s ease-in-out;
}

#fullscreenImage.fade-out {
    opacity: 0;
}

#fullscreenImage.fade-in {
    opacity: 1;
}


#fullscreenOverlay {
    display: flex;
    align-items: flex-start;
    height: auto;
}


#fullscreenOverlay::after {
    content: '';
    display: block;
    height: 0;
    flex-grow: 1;
}


.confirmation-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* Fond semi-transparent pour griser le reste de la fenêtre */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Assurez-vous que c'est au-dessus des autres éléments */
}

/* Ajout du style pour le popup de confirmation */
#confirmationPopupDeleteButtonGen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--bg-confirmationPopup);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#confirmationPopupDeleteButtonGen h5 {
    margin-bottom: 20px;
	color: var(--menu-text);
}


#confirmationPopupDeleteButtonGen .popup-buttons {
    display: flex;
    justify-content: space-between;
	gap: 10px;
}

/* Ajout du style pour le popup de confirmation */
#confirmationPopupDeleteButton {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--bg-confirmationPopup);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#confirmationPopupDeleteButton h5 {
    margin-bottom: 20px;
	color: var(--menu-text);
}

#confirmationPopupDeleteButton .popup-buttons {
    display: flex;
    justify-content: space-between;
	gap: 10px;
}

.babylon-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.infinity-icon {
    color: white;
    font-size: 22px;
    cursor: pointer;
	padding-right: 14px !important;
}


.button-row-div-options {
    display: flex;
    justify-content: center;
    margin-bottom: 20px; /* Espace entre le bouton et les options */
}

.like-container {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 10px; /* Ajustez la taille de la zone cliquable selon vos besoins */
}

.heart-icon {
    margin-right: 5px; /* Espace entre l'icône et le texte */
}

.heart-icon:hover {
    margin-right: 5px; /* Espace entre l'icône et le texte */
	text-shadow: 0px 0px 10px rgba(255, 0, 0, 0.5);
}

.like-count {
    margin-left: 5px; /* Ajustez cet espace selon vos besoins */
}

#negative_prompt {
	min-height: 70px;
}

/* Réinitialiser le style de bordure et l'effet de focus pour les boutons */
button, .option-button {
    outline: none !important; /* Empêche la bordure de focus par défaut */
    border: none !important;  /* Supprime les bordures par défaut */
    box-shadow: none !important; /* Supprime les ombres par défaut */
}

.option-button.active .option-text {
    color: white !important; /* Couleur du texte blanche pour le bouton actif */
}


/* Ajouter vos propres styles pour le focus si nécessaire */
button:focus, .option-button:focus {
    outline: none !important; /* Supprime la bordure de focus par défaut */
    border: none !important; /* Supprime les bordures par défaut */
    box-shadow: none !important; /* Supprime les ombres par défaut */
	/*border-radius: 15px;*/
}

input:focus, textarea:focus, select:focus {
    outline: none !important; /* Supprime la bordure de focus par défaut */
    border: none !important; /* Supprime les bordures par défaut */
    box-shadow: none !important; /* Supprime les ombres par défaut */
}

/* Pour restaurer l'effet de focus à vos spécifications */
button.active, .option-button.active {
    outline: none !important; /* Supprime la bordure de focus par défaut */
    border: 1px solid #DF1366;
	border-radius: 15px;
    box-shadow: 0 0 10px #DF1366; /* Supprime les ombres par défaut */
    color: white !important; /* Exemple de style personnalisé */
}

/* Pour restaurer l'effet de focus à vos spécifications */
input:focus, textarea:focus, select:focus {
    outline: none !important; /* Supprime la bordure de focus par défaut */
    border: none !important; /* Supprime les bordures par défaut */
    box-shadow: none !important; /* Supprime les ombres par défaut */
    color: white !important; /* Exemple de style personnalisé */
}

.spinner-containeracc {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px; /* Adjust size as needed */
    height: 100px; /* Adjust size as needed */
}

/* Logo styles */
.logoacc {
    position: absolute;
    /*width: 50px; /* Adjust size as needed */
    /*height: 50px; /* Adjust size as needed */
    z-index: 1; /* Ensure logo stays on top */
}

.flame {
    position: absolute;
    width: 100px;
    height: 100px;
    background: linear-gradient(to right, #E50A62, #5F84C2);
    border-radius: 50%;
    animation: flameDance 2s linear infinite;
    z-index: 0;
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    mask-size: cover;
}

@keyframes flameDance {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.message-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px;
    border-radius: 10px;
    z-index: 9999; /* Ensure it's above other elements */
    text-align: center;
}

.message-box.success {
    background-color: #28a745; /* Success green */
}

.message-box.error {
    background-color: #dc3545; /* Error red */
}

.message-box.info {
    background-color: #17a2b8; /* Info blue */
}

.message-box.hidden {
    display: none;
}

.toggle-sidebar-btn {
    position: relative;
}

.toggle-sidebar-btn .options-text {
    display: inline-block;
}

.tooltip {
    position: relative;
    display: inline-block;
}

/* Styles pour le conteneur principal des boutons d'upscale */
.upscale-buttons-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px; /* Espace entre les boutons */
}

/* Styles pour chaque conteneur de bouton */
.upscale-button-container {
    position: relative;
    display: block; /* Assure que chaque conteneur de bouton prend toute la largeur */
}

/* Ajuster les styles des boutons */
.upscale-button-container .fullscreen-button-last {
    width: 100%;
    margin: 0; /* Supprime les marges */
}

/* Positionnement du tooltip */
.upscale-button-container .tooltip-outside {
    position: absolute;
    top: 112%;
    left: calc(100% + 10px); /* Positionné à droite du bouton avec un espacement */
    transform: translateY(-50%); /* Centré verticalement */
    display: none; /* Caché par défaut */
    width: 300px; /* Largeur maximale ajustée pour plus de contenu */
    background: var(--bg-tooltip-outside);
    color: var(--menu-text);
    text-align: left; /* Aligner le texte à gauche pour une meilleure lisibilité */
    padding: 10px;
    border-radius: 15px;
    font-size: 0.8em;
    z-index: 1000;
    border: 1px solid transparent; /* Bordure initialement transparente */
    background-clip: padding-box; /* Pour que le fond n'empiète pas sur la bordure */
    white-space: pre-line; /* Conserver les retours à la ligne */
	box-sizing: border-box;
}

/* Tooltip when positioned below */
.upscale-button-container .tooltip-outside.bottom {
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
}

/* Bordure avec dégradé 
.upscale-button-container .tooltip-outside::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid transparent;
    border-image: linear-gradient(to right, #E50A62, #5F84C2) 1;
    border-radius: 6px;
    pointer-events: none;
}*/

/* Assurez-vous que la galerie est masquée initialement */
#flex-container-cr {
    opacity: 0;
	display: none;
}

/* Vous pouvez ajouter une transition pour un effet plus fluide */
#flex-container-cr {
    transition: opacity 2s;
}

/* Une fois affichée, l'opacité passera à 1 */
#flex-container-cr.show {
    opacity: 1;
}


/* Afficher le tooltip au survol du bouton */
.upscale-button-container .fullscreen-button-last:hover + .tooltip-outside {
    display: block;
}

.toggle-container {
    position: absolute;
    z-index: 10; /* Assurez que l'élément est au-dessus */
}

.toggle-question {
color: var(--menu-text) !important;
}

/* Label principal du toggle avec bordure en dégradé */
.toggle-label {
	position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: var(--menu-text) !important;
    font-weight: bold;
    user-select: none;
    gap: 10px;
	padding-top: 2px;
	padding-right: 9px;
	padding-bottom: 2px;
	padding-left: 9px;
    border-radius: 50px !important; /* Arrondi pour harmoniser avec le slider */
    position: relative;
    background: var(--bg-crfs); /* Couleur de fond du label */
    background-clip: padding-box; /* Empêche le fond de déborder sur la bordure */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Ombre subtile */
}

/* Style du tooltip associé */
.toggle-label .tooltip-outside {
    position: absolute;
    top: 50%; /* Centré verticalement */
    right: calc(100% + 10px); /* Positionné à droite avec un espacement de 10px */
    transform: translateY(-50%);
    display: none; /* Caché par défaut */
    width: 300px; /* Largeur du tooltip */
    background: var(--bg-tooltip-outside); /* Couleur de fond */
    color: var(--menu-text); /* Couleur du texte */
    text-align: left; /* Texte aligné à gauche */
    padding: 10px;
    border-radius: 15px; /* Coins arrondis */
    font-size: 0.9em;
    z-index: 1000;
    border: 1px solid transparent; /* Bordure initialement transparente */
    background-clip: padding-box; /* Assurer une séparation nette entre bordure et fond */
    white-space: pre-line; /* Permet de conserver les retours à la ligne */
    box-sizing: border-box;
}

/* Bordure avec dégradé 
.toggle-label .tooltip-outside::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid transparent;
    border-image: linear-gradient(to right, #E50A62, #5F84C2) 1;
    border-radius: 6px;
    pointer-events: none;
}*/

/* Afficher le tooltip au survol */
.toggle-label:hover .tooltip-outside {
    display: block; /* Afficher le tooltip */
}

.toggle-label::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50px !important; /* Légèrement plus grand que le label */
    background: linear-gradient(to right, #E50A62, #5F84C2); /* Dégradé */
    z-index: -1; /* Place la bordure derrière le contenu */
    pointer-events: none; /* Empêche les interactions sur la bordure */
}


/* Input checkbox caché */
.toggle-label input[type="checkbox"] {
    display: none; /* Cache le checkbox natif */
}

/* Style du slider */
.toggle-label .slider {
    position: relative;
    display: inline-block;
    width: 35px; /* Largeur du switch */
    height: 18px; /* Hauteur du switch */
    background-color: rgb(109, 109, 111); /* Couleur de fond adaptée */
    border-radius: 12px; /* Coins arrondis pour un effet "pill" */
    transition: background-color 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre interne subtile */
}

/* Rond interne du slider */
.toggle-label .slider:before {
    content: "";
    position: absolute;
    width: 14px; /* Taille du rond interne */
    height: 14px;
    background-color: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* Ombre pour donner un effet flottant */
}

/* Toggle activé */
.toggle-label input[type="checkbox"]:checked + .slider {
    background-image: linear-gradient(to right, #E50A62, #5F84C2); /* Dégradé harmonisé */
}

/* Rond interne lorsqu'activé */
.toggle-label input[type="checkbox"]:checked + .slider:before {
    transform: translateX(16px); /* Déplacement du rond à droite */
}

/* Toggle désactivé */
.toggle-label input[type="checkbox"]:disabled + .slider {
    background-color: rgb(109, 109, 111); /* Couleur de fond désactivée */
    cursor: not-allowed;
}

.toggle-label input[type="checkbox"]:disabled + .slider:before {
    background-color: #d4d4d4; /* Rond désactivé */
    box-shadow: none; /* Pas d'ombre pour l'état désactivé */
}

/* Effet de focus pour l'accessibilité */
.toggle-label input[type="checkbox"]:focus + .slider {
    outline: 2px solid var(--menu-bg);
    outline-offset: 4px;
}

.textarea-container-prompt {
    position: relative; /* Positionnement relatif pour un placement précis des éléments enfants */
}

/* Conteneur du toggle (par défaut dans le textarea pour desktop) */
.textarea-container .toggle-container {
    position: absolute; /* Position dans le textarea */
    top: 14px;
    right: 10px;
    z-index: 1;
}

.model-slider {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.model-item {
	position: relative;
    width: 260px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.model-item.selected {
  box-shadow: 0 0 20px #DF1366;
  border: 1px solid #DF1366 !important;
}

.model-item:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Ombre plus prononcée */
}

.slider-images {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 380px;
    position: relative;
}

.slider-images img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
	border-radius: 10px;
    transition: opacity 1s ease-in-out;
}

.slider-images img.active {
    opacity: 1;
}

#modelButton {
    position: relative;
    overflow: visible; /* pour que les flèches puissent déborder si nécessaire */
}

/* Conteneur qui va gérer la position des flèches */
.arrow-up, .arrow-down {
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Autorise le clic, malgré pointer-events: none sur le parent */
    pointer-events: auto;   
}

/* Dessin de la flèche vers le haut */
.arrow-up::before {
    content: '';
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid #fff;
}

/* Dessin de la flèche vers le bas */
.arrow-down::before {
    content: '';
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #fff;
}

/* Petits espacements */
.arrow-up {
    /*margin-bottom: 4px;  Espace sous la flèche du haut */
}
.arrow-down {
    /*margin-top: 4px;     Espace au-dessus de la flèche du bas */
}

.option-text-model{
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
	font-size: 14px;
    color: #fff; 
}

.model-note {
	font-size: 0.7em;
	margin-bottom: 0rem;
}

.max-width-920 {
    max-width: 920px;
}

.model-description {
	position: absolute; /* Position dans le textarea */
    bottom: 0px;
    z-index: 1;
	width: 100%;
	text-align: center;
	padding: 30px;
	font-weight: bold;
    color: #fff;
	background-color: rgba(100, 99, 99, 0.3);
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
	overflow: hidden;
}

.model-description.hover-effect {
    overflow: hidden;
}

.model-description .primary-text,
.model-description .secondary-text {
    position: absolute;
    top: 50%; /* Centrage vertical */
    left: 50%; /* Centrage horizontal */
    transform: translate(-50%, -50%); /* Centrage parfait */
    white-space: nowrap;
    transition: opacity 0.3s ease-in-out; /* Transition d'opacité fluide */
}

.model-description .primary-text {
    opacity: 1; /* Visible par défaut */
}

.model-description .secondary-text {
    opacity: 0; /* Caché par défaut */
}

.model-item:hover .model-description .primary-text {
    opacity: 0; /* Cache le texte principal au survol */
}

.model-item:hover .model-description .secondary-text {
    opacity: 1; /* Rend le texte secondaire visible au survol */
}

.pro-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #DF1366; /* fond rose/rouge */
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 4px;
    z-index: 2;
}

.pro-tag-options {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #DF1366A6; /* fond rose/rouge */
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 3px 6px;
    border-radius: 4px;
    z-index: 2;
}

.fa-star {
	/*background: rgba(128, 128, 128, 0.5) !important;*/
	border-radius: 50% !important;
	padding-top: 6px !important;
	padding-right: 5px !important;
	padding-bottom: 6px !important;
	padding-left: 5px !important;
	transition: background-color 0.3s ease;
}

.fa-star:hover {
	background: rgba(128, 128, 128, 0.8) !important;
}

@media (max-width: 1300px) {
	
    .upscale-button-container .tooltip-outside {
        top: calc(100% + 10px); /* Position below the button */
        left: 46%;
        transform: translateX(-40%); /* Center horizontally */
    }
	
    .toggle-label .tooltip-outside {
        top: calc(100% + 10px); /* Positionné sous le label */
        left: 50%; /* Centré horizontalement */
        transform: translateX(-50%);
    }

    /* Ajustement de la largeur du tooltip pour les petits écrans */
    .toggle-label .tooltip-outside {
        width: 90%; /* Réduire la largeur pour s'adapter aux petits écrans */
    }
}

@media (max-width: 820px) {
	
    .quality-row {
		order: 2;
		flex-direction: column !important;
		align-items: center !important;
		gap: 10px; /* un peu d’espace vertical */
    }
	
    .quality-block {
        margin-top: 0px; 
		width: 100%;
		padding-bottom: 0px;
		padding-left: 0px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
        /* On pourra ajuster la marge pour qu’il apparaisse sous le textarea */
    }

	.btn-quality-l,
	.btn-quality-c,
	.btn-quality-r {
		width: 102px;
	}

	.quality-text{
		font-size: 11px;
	}

    .quality-options {
		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: center !important; /* centre horizontalement */
		align-items: center;
    }

    .submit-btn-outside {
		display: block !important;
		width: 100%;
		margin: 10px auto 0 auto !important; /* marge au-dessus + centré */
    }
	
    .textarea-container-prompt {
		margin-bottom: 20px;
        order: 1;
    }

	
    .textarea-container {
        flex-direction: column; /* Change la disposition en colonne */
    }
	
    .textarea-container .toggle-container {
        position: static;
        margin-top: 10px;
        width: 100%;
        text-align: center;
    }

	.textarea-container .submit-btn-inside {
		bottom: 50px !important;
	}

    .textarea-container textarea {
		padding-right: 40px !important;
        padding-bottom: 10px; /* Réserve l'espace uniquement pour le bouton Submit */
        order: 1; /* Garde le textarea en premier */
        width: 100%; /* Le textarea prend toute la largeur disponible */
        font-size: 0.9em !important; /* Ajuste la taille de la police pour les très petits écrans */
		min-height: 155px;
    }
	
    .toggle-container {
        order: 2; /* Place le toggle après le textarea */
        width: 100%; /* Prend toute la largeur disponible */
        margin-top: 10px; /* Espacement entre le textarea et le toggle */
        text-align: left; /* Alignement à gauche */
    }
	
	.toggle-label {
		padding-top: 4px;
		padding-right: 9px;
		padding-bottom: 4px;
		padding-left: 9px;
	}
	
	.gallery .image-container-global{
		max-width: 150px;
	}
	
	.maintenance-overlay .message {
		color: white;
		font-size: 1em;
	}
	
	.icon-container .clear-icon {
		display: block;
	}
	
    .upscale-button-container .tooltip-outside {
        top: calc(100% + 10px); /* Position below the button */
        left: 50%;
        transform: translateX(-50%); /* Center horizontally */
    }
	
	.options-title-op {
		width:80%;
	}
	
		
	.toggle-sidebar-btn {
		position: relative;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		width: 40%;
		height: 140px;
		position: relative;
		margin-top: 0px;
		margin-right: 15px;
		border-radius: 15px;
		cursor: pointer;
		overflow: hidden; /* Empêche tout débordement */
		background: transparent; /* Fond transparent */
	}

	.toggle-sidebar-btn::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 15px; /* Même radius que l'élément principal */
		padding: 2px; /* Épaisseur de la bordure */
		background: linear-gradient(to right, #E50A62, #5F84C2); /* Dégradé pour la bordure */
		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: destination-out;
		mask-composite: exclude; /* Rend l'intérieur transparent */
		pointer-events: none; /* Empêche toute interaction avec cet élément */
		z-index: 1;
		transition: background 0.3s ease-in-out; /* Ajoute une transition douce */
	}

	.toggle-sidebar-btn:hover::before {
		background: linear-gradient(to right, #FF5A8D, #7FA5FF); /* Couleurs légèrement plus claires */
	}


    .toggle-sidebar-btn i {
        margin-left: 10px;
    }
	

	.toggle-sidebar-btn .options-text {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1; /* Place le texte au-dessus des images */
		background: linear-gradient(to right, #E50A62, #5F84C2); /* Dégradé */
		-webkit-background-clip: text; /* Affiche le dégradé uniquement sur le texte */
		-webkit-text-fill-color: transparent; /* Rend le texte transparent pour afficher le dégradé */
		text-align: center;
		font-weight: bold;
	}

	
    .toggle-sidebar-btn .option-quadrant {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        opacity: 0.7;
		z-index: 0;
    }
	
    .toggle-sidebar-btn .format-option {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .toggle-sidebar-btn .styling-option {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    .toggle-sidebar-btn .lighting-option {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .toggle-sidebar-btn .camera-option {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }
	
    .overlay-transparent-op {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--modal-bg-info); /* Overlay noir transparent */
        display: none; /* Caché par défaut */
        z-index: 998; /* Assure que l'overlay est sous la sidebar mais au-dessus du contenu */
    }
	
    .sidebar-cr.open + .overlay-transparent-op {
        display: block; /* Affiche l'overlay quand la sidebar est ouverte */
    }

	.gallery{
		margin-left: 0px;
		justify-content: center;
	}

    .overlay-container-last {
        display: flex;
		top: 20px;
		left: 10px;
		right: 10px;
	    bottom: 10px;
        flex-direction: column;
        overflow-y: auto; /* Permet le défilement vertical pour l'ensemble du conteneur */
        -webkit-overflow-scrolling: touch; /* Améliore le scrolling sur iOS */
    }

    .image-container-cr-last {
        width: 100%; /* L'image prend toute la largeur */
        justify-content: center; /* Centre l'image horizontalement */
        margin-top: 0;
		max-width: 100%;
    }

    .result-info-last {
        width: 100%;
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        overflow-y: auto; /* Permet le défilement vertical des informations si elles dépassent l'espace disponible */
        max-height: 100%; /* Assure que l'élément ne dépasse pas la hauteur de son conteneur parent */
        flex-shrink: 0; /* Empêche la réduction de la taille en flexbox */
    }
	
	.container.mt-5.mt5-cr{
		padding-top: 24px !important;
		padding-right: 35px;
	}
	

	
	.head-art-gallery{
		margin-top: 0px !important;
		font-size: 0.8rem !important;
		margin-left: -15px;
	}
	
	.no-generating-text{
		font-size: 12px;
	}
	
	.instructions-popup-prompt {
		/*background-color: white;*/
		padding: 20px;
		border-radius: 10px;
		max-width: 95%;
		max-height: 80%;
		/*box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);*/
		position: relative;
		z-index: 10000;
	}
	
	.instructions-prompt{
		height: 607px;
	}
	
	.main-content-cr {
		padding-top: 20px;
		padding-right: 0px;
		padding-bottom: 20px;
		padding-left: 20px;
	}
	
	.col-12 {
		padding-right: 0px !important;
	}
	
	.image-container-op img {
		max-width:130px;
	}
	
    .button-row-div-options {
        flex-direction: column; /* Change la direction du flexbox en colonne */
        align-items: center; /* Centre les éléments verticalement */
    }

    .button-row-options {
        margin-right: 0; /* Supprime la marge droite sur les petits écrans */
        width: 80%; /* Ajuste la largeur des boutons pour mieux s'adapter aux écrans plus petits */
        margin-bottom: 15px; /* Ajoute un peu d'espace entre les boutons */
    }
	
	
	
	.sidebar-header-cr {
		display: none !important;
	}
	
	.sidebar-buttons-cr {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap; /* Permet d'avoir plusieurs lignes de boutons */
		justify-content: space-between; /* Ajuste l'espace entre les boutons */
		width: 100%;
		margin-top: 80px;
	}

	.sidebar-buttons-cr .btn {
		display: flex;
		flex-direction: column;
		margin: 10px;
		width: 100px;
		flex-basis: calc(50% - 20px); /* Prend 50% de l'espace disponible moins les marges */
	}
	
	.popup-question-content{
		width: 85%;
		padding: 10px;
	}
	.instruction-images{
		display: none !important;
	}
	
    .result-content {
        flex-direction: column; /* Empile les éléments verticalement */
		padding: 0px;
    }

    .result-image-container {
        max-width: 100%; /* Permet à l'image de prendre toute la largeur */
        margin-right: 0; /* Retire la marge qui était entre l'image et les infos */
        order: 1; /* Assure que l'image est affichée en premier */
    }
	
	.result-image-container img{
		min-width: 200px !important;
	}
	
    .result-info {
        order: 2; /* Positionne les infos après l'image */
        width: 100%; /* Prend toute la largeur disponible */
        margin-top: 20px; /* Ajoute un peu d'espace entre l'image et les infos */
    }

    .img-thumbnail-cr-gen {
        width: 100%; /* Ajuste la largeur de l'image pour qu'elle remplisse son conteneur */
    }

    .sidebar-cr {
        transform: translateX(-120%); /* Cache la sidebar en la déplaçant hors de l'écran */
        transition: transform 0.3s ease;
		margin-top: 50px;
		width: 100%;
		margin-left: 0px;
		height: 420px;
		border: 1px solid #cccccc82;
    }
	
    .sidebar-cr.open {
        transform: translateX(0); /* Affiche la sidebar */
        overflow-y: auto; /* Ajoutez ceci pour permettre le défilement vertical */
    }

    .main-content-cr {
        margin-left: 0; /* Ajuste le contenu principal pour utiliser toute la largeur de l'écran */
        padding-left: 20px; /* Ajoute un peu de padding à gauche pour le contenu principal */
        transition: margin-left 0.3s ease;
    }

    .sidebar-cr.open + .toggle-sidebar-btn {
        display: none;
    }
	

	
	.sidebar-buttons-cr .image-container img.option-logo {
		width: 140px;
		height: 140px;
	}
	
    .sidebar-cr.open .close-sidebar-btn {
        content: "\00d7"; /* Caractère pour la croix */
        font-size: 20px;
        color: white;
        position: absolute; /* Utiliser position absolue */
		background-image: linear-gradient(to right, #E50A62, #5F84C2) !important;
		margin-top: 14px;
		padding-top: 0px;
		padding-right: 60px;
		padding-bottom: 0px;
		padding-left: 60px;
        z-index: 2000;
        border-radius: 10px;
        cursor: pointer;
        display: block;
    }

	
	.trash-icon-fs {
		bottom: -50px;
	}
	
	.option-modal {
		display: none;
		position: fixed;
		z-index: 2001;
		left: 10px;
		right: 10px;
		top: 50px;
		bottom: 10px;
		background-color: white;
		border: 1px solid #888;
		border-radius: 10px;
		padding-top: 10px;
		padding-right: 5px;
		padding-bottom: 10px;
		padding-left: 5px;
		flex-direction: column;
	}
	
    .upload-area-container, 
    .textarea-container-prompt, 
    .textarea-container-negative {
        width: 100% !important; /* Assurer que les éléments prennent toute la largeur */
        margin-right: 0 !important; /* Réinitialiser la marge à droite */
    }
    
    .textareas-container {
        flex-direction: column !important; /* Arrangez les éléments en colonne */
		width: 100% !important;
    }


	.upload-area-container {
		order: 1;
		display: flex !important;
        justify-content: center;
        align-items: center;
		margin-right: 20px; /* Spacing between upload area and textareas */
	}
	
	
	.upload-area {
		color: #696A6D;
		text-align: center;
		cursor: pointer;
		height: 140px;
		width: 40%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f0f0f0;
		position: relative;
		border-radius: 15px !important;
	}

    .textarea-container-prompt {
        order: 2; /* Assurez que prompt apparaît en deuxième */
    }

    .textarea-container-negative {
        order: 3; /* Assurez que negative_prompt apparaît en troisième */
    }
	
	#resultContainer{
		margin-left: 0px;
	}
	
	#resultContainer.loading{
		width: 100%;
		height: 230px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	

	.generating-text{
		font-size: 15px;
	}
	
	.timer{
		top: 188px;
	}
	
	.option-logo-w{
		top: 58%;
	}
	
    #recentImagesGallery {
		margin-left: -15px;
    }
	
	
	.no-generating-text-container{
		margin-left: -15px;
		text-align: left;
	}
	
	.instructions{
		height: 400px;
	}
	
    .button-container-last {
        display: flex;
        flex-direction: column; /* Arrange les boutons en colonne */
        width: 100%; /* Les boutons prennent toute la largeur du conteneur */
    }

    .button-container-last .fullscreen-button-last,
    .button-container-last .fullscreen-button-delete {
        width: 100%; /* Chaque bouton prend toute la largeur disponible */
        margin: 10px 0; /* Ajoute un espace entre les boutons */
    }
	
}