.flex-container {
    display: flex;
}

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

.sidebar-header-cr {
    display: flex;
    justify-content: center;
	margin-top: 10px;
    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: 75%;
}

.title-op-cr {
	font-size: 12px;
	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: 5px 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-top: 0px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 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: 0px !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;
	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-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 */
}



.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;
	max-width: 890px;
}


/* 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;
}


.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 {
    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%;
    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: 510px;
    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;
}

/* 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: 155px;
    right: 10px;
    z-index: 1;
}

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

.model-item {
	position: relative;
    width: 200px;
    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: 290px;
    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 */
	font-size: 12px;
}

.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 */
	font-size: 12px;
}

.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;
}

/* ---------- tutoriel ---------- */
.cr-tuto-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(3px);
    z-index: 11000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cr-tuto-popup{
    position:absolute;        /* ← plus de flex-box */
    max-width:280px;
    background:#0F1A2BD6;
	color: white;
	overflow: visible;
    border-radius:12px;
    padding:18px 22px;
    box-shadow:0 6px 18px rgba(255, 255, 255, 0.65);
    z-index: 13000;            /* juste au-dessus de l’élément highlighté */
}

.cr-tuto-popup::after{
    content:'';
    position:absolute;
    width:0;height:0;
    border:10px solid transparent;   /* ← 8 px ➜ 10 px */
}

.cr-tuto-popup.arrow-top::after    {                     /* haut    */
    top:-16px;  left:50%; transform:translateX(-50%);
    border-bottom-color:#0F1A2BD6;
}
.cr-tuto-popup.arrow-bottom::after {                     /* bas     */
    bottom:-16px; left:50%; transform:translateX(-50%);
    border-top-color:#0F1A2BD6;
}
.cr-tuto-popup.arrow-left::after   {                     /* gauche  */
    left:-16px;  top:50%;  transform:translateY(-50%);
    border-right-color:#0F1A2BD6;
}
.cr-tuto-popup.arrow-right::after  {                     /* droite  */
    right:-16px; top:50%;  transform:translateY(-50%);
    border-left-color:#0F1A2BD6;
}


.cr-tuto-highlight {
    /*position: relative !important;*/
    z-index: 12001 !important;
    box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 0 12px 4px #df1366 !important;
    border-radius: 10px !important;
}

#cr-tuto-text{
	font-size: 13px !important;
}

#cr-tuto-prev{
    background:#aaa;
    border:none;
    color:#fff;
	margin-right: 4px;
	border-radius: 50rem !important;
	padding: 0px 16px !important;
	font-size: 13px !important;
}

#cr-tuto-counter{
	font-size: 20px !important;
	color: #DF1366 !important;
}

#cr-tuto-next {
	color: #fff !important;
	background-color: #DF1366 !important;
	padding: 0px 16px !important;
	font-size: 13px !important;
	border-radius: 50rem !important;
	width: 100% !important;
	cursor: pointer !important;
}

#cr-tuto-stop{
	background-color: transparent;
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 12px;
	text-decoration: underline !important;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
    margin-top: 15px;
    font-family: 'Roboto', sans-serif;
}
/* -------------------------------------------------------------------------- */



button.disabled{opacity:.5;cursor:not-allowed}

.pro-account-text{
    font-size: 13px !important;
    font-weight: 600;
    color: var(--menu-text);   /* même couleur que tes textes standard */
    text-align: center;
    margin: 0 0 6px 0;         /* petit espacement sous la phrase */
}


/* ============== Venatus right rail ============== */
:root{
  --rail-w: 320px;         /* largeur du rail pub */
  --rail-gap: 12px;        /* gouttière entre rail et contenu */
  --topbar-h: 56px;        /* hauteur approx. de ta topbar (ajuste si besoin) */
  --content-max: 1120px;   /* largeur max du contenu centré */
}


#page-container{
padding-left: calc(var(--rail-w) + var(--rail-gap));
padding-right: 420px;
padding-bottom: calc(var(--footer-h) + var(--rail-gap));
}


/* Rails fixes */
#venatus-rail-left,
#venatus-rail-right{
  position: fixed;
  top: calc(var(--topbar-h) + var(--rail-gap));
  width: var(--rail-w);
  min-height: 600px; /* de la place pour une 300x600; Venatus peut varier */
  z-index: 40;
  display: block;
  pointer-events: none; /* ne bloque pas tes overlays */
}

#venatus-rail-left  {
	left:  var(--rail-gap);
}

#venatus-rail-right { 
	right: var(--rail-gap);
}

#venatus-rail-left > div,
#venatus-rail-right > div{
  pointer-events: auto; /* clics activés DANS la pub */
  border-radius: 8px;
  min-height: 250px; /* fallback visuel */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Footer pub (sticky) */
#venatus-footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--footer-h);
  z-index: 45; /* au-dessus des rails */
  display: grid;
  place-items: center;
}

#venatus-footer > div{
  width: 100%;
  max-width: 980px;  /* 728/970/980 x 90 */
  min-height: var(--footer-h);
  margin: 0 auto;
}
.ad { margin: 16px 0; }
.ad-lb { display:flex; justify-content:center; }
.ad-mpu { display:flex; justify-content:center; }


/* Évite les caches : mets tes modals > 45 si besoin */

:root{
  /* mets ici la vraie hauteur visuelle de ta topbar */
  --topbar-h: 56px;            /* ex: 56px (ajuste si besoin) */
  --rail-gap: 12px;            /* déjà présent chez toi */
}

/* 1) Topbar plein écran, toujours visible */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;                 /* évite 100vw pour ne pas créer de scroll horizontal */
  z-index: 60;                 /* > rails (40/45) et > contenu */
  /* si besoin: background: var(--menu-bg); */
  /* optionnel: box-shadow: 0 1px 0 rgba(0,0,0,.06); */
}

/* 2) On libère la place sous la topbar pour le contenu */
#page-container{
  padding-top: calc(var(--topbar-h) + var(--rail-gap));
}

/* 3) (Déjà fait chez toi, rappel) Les rails commencent sous la topbar */
#venatus-rail-left,
#venatus-rail-right{
  top: calc(var(--topbar-h) + var(--rail-gap));
}
@media (min-width:1280px){
  :root{
    --rail-w: 320px;   /* largeur rail Venatus */
    --rail-gap: 12px;  /* marge avec le contenu */
  }

  /* Le sidebar ne doit pas chevaucher la zone du rail (0 → 300px) */
  .sidebar-cr{
    left: calc(var(--rail-gap) + var(--rail-w) + 20px) !important; /* ~332px */
    z-index: 30 !important;  /* sous les rails/overlays si besoin */
  }

  /* Le contenu principal tient compte du sidebar déplacé */
  .main-content-cr{
    /*margin-left: calc(var(--rail-gap) + var(--rail-w) + 20px + 150px + 20px) !important; */
    /* rail (300) + gap(12) + marge (20) + sidebar(150) + marge (20) = ~502px */
  }

  /* Laisse Venatus coller ses éléments fixes au viewport sans être coupés */
  html, body{ overflow-x: visible !important; }
}


#page-container,
.main,
.main-content-cr { position: relative; z-index: 0; }
.overlay-transparent,
.overlay-transparent-fullscreen,
.overlay-transparent-op{
  z-index: 50 !important;          /* inférieur aux iframes pubs si Venatus monte leur z-index */
  pointer-events: none !important;  /* ne bloque pas les clics pubs */
}

.main{
	margin-top: 0px !important;
	margin-left: 10px;
}
/* ========= Réglages généraux pour rails & centrage ========= */
:root{
  --rail-w: 320px;         /* largeur du rail pub */
  --rail-gap: 12px;        /* gouttière entre rail et contenu */
  --topbar-h: 56px;        /* hauteur approx. de ta topbar (ajuste si besoin) */
  --content-max: 1120px;   /* largeur max du contenu centré */
}

/* Le conteneur global de page (ou body si tu préfères) réserve la place des rails */
@media (min-width: 1025px){
  #page-container{
    padding-left: calc(var(--rail-w) + var(--rail-gap));
    padding-right: calc(var(--rail-w) + var(--rail-gap));
    padding-top: calc(var(--topbar-h) + var(--rail-gap));
  }
}

/* Rails fixes (déjà présents mais on s’assure de la position) */
#venatus-rail-left,
#venatus-rail-right{
  position: fixed;
  top: calc(var(--topbar-h) + var(--rail-gap));
  width: var(--rail-w);
  min-height: 600px;
  z-index: 40;
  display: block;
  pointer-events: none;
}
#venatus-rail-left  { left:  var(--rail-gap); }
#venatus-rail-right { right: var(--rail-gap); }
#venatus-rail-left > div,
#venatus-rail-right > div{ pointer-events: auto; }

/* ========= Contenu centré ========= */
#flex-container-cr{
  display: flex !important;
  gap: 20px;
  max-width: var(--content-max);
  margin-inline: auto;           /* centre horizontalement */
  align-items: flex-start;
}

/* Sidebar : on la fait scroller avec la page mais sans casser le centrage */
.sidebar-cr{
  position: sticky !important;   /* ← au lieu de fixed */
  top: calc(var(--topbar-h) + var(--rail-gap)) !important;
  left: auto !important;
  margin-left: 0 !important;
  height: auto !important;
  max-height: calc(100vh - (var(--topbar-h) + 2 * var(--rail-gap))) !important;
}

/* La colonne principale occupe le reste, sans “margin-left” artificiel */
.main-content-cr{
  margin-left: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0;                  /* évite les débordements */
}

/* ========= Footer pub (bas de page) – on ne touche pas à tes marges existantes ========= */
#venatus-footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 90px;                  /* hauteur indicative (Venatus adaptera) */
  z-index: 45;
  display: grid;
  place-items: center;
}
#venatus-footer > div{
  width: 100%;
  max-width: 980px;
  min-height: 90px;
  margin: 0 auto;
}

/* ========= Petits écrans : tout masquer et afficher un message ========= */
#app-lock{
  display: none;
}

@media (max-width: 1024px){
  /* on masque le contenu et les zones pubs */
  #flex-container-cr,
  #venatus-rail-left,
  #venatus-rail-right,
  #venatus-footer{
    display: none !important;
  }

  /* message plein écran */
  #app-lock{
    position: fixed;
    inset: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    z-index: 10000;
    background: rgba(0,0,0,0.9);
    color: #fff;
    font-size: 18px;
    line-height: 1.4;
  }
}

/* ========= Divers (évite les barres de scroll latérales) ========= */
html, body{ overflow-x: hidden; }

/* Modale au-dessus de tout */
#optionModal.option-modal{
  position: fixed;
  inset: auto auto auto auto; /* reset */
  left: auto; right: auto;
  transform: none;            /* on pilote en JS */
  max-width: 920px;           /* borne confortable */
  width: auto;                /* la largeur sera fixée en JS */
  z-index: 2147483646 !important;
  box-sizing: border-box;
}


/* L’overlay reste cliquable et au-dessus des iframes pubs */
.overlay-transparent{
  z-index: 2147483645 !important;
  pointer-events: auto !important;
}