/** @format */

html {
	padding: 0 !important;
	margin: 0 !important;
	height: 100%;
	width: 100%;
	overflow-y: auto !important; 
   overflow-x: hidden !important;
   scrollbar-gutter: stable;   */
}

body {
	margin: 0 !important;
	padding: 0 !important;
	padding-top: 48px; /* Espace pour ne pas cacher la barre de navigation */
	font-family: arial, sans-serif;
	width: 100%;
	min-height: 100vh;
	/*overflow-y: auto !important;     /* Active le scroll vertical */
	overflow-x: hidden !important;
	scrollbar-gutter: stable; 
	background-color: #fff; /* En option : assure fond blanc si besoin */
}


/* TOUS LES ELEMENTS (pour le padding) */
* {
	box-sizing: border-box;
}

/* Pour le bandeau defilant */
.custom-container-main .auto {
	position: absolute;
	/* bottom: 0; */
	top: 45em;
	left: 0;
	width: 100%;
	height: 220px;
	background-color: rgb(255, 127, 206);
}

.carousel {
	max-height: 23vh; /* Ajuster pour être bien visible */
	overflow: hidden;
	z-index: 2;
	width: 9900px;
}

.img-bandeau-defilant {
	width: 215px;
	height: 215px;
	margin: 5px;
	padding: 3px 0px;
	border-radius: 50%;
}
/* fin bandeau defilant  */

/*index = apres connexion*/
.container-fluid-index .row-index {
	height: 85%;
	max-height: 85%;
	width: 100%;
	align-items: center;
	justify-content: center;
	padding: 10px;
	background-color: rgb(143, 42, 109);
}

.custom-container-main {
	padding-left: 0 !important;
	margin-left: 0 !important;
}

.row-index {
	height: 85%;
	max-height: 85%;
	margin-top: 0;
	background-color: Red;
}
.container-img {
	height: 15%;
	bottom: 0;
	background-color: rgb(14, 61, 12);
}
/* page index avant connexion */
.container-fluid-main {
	display: flex;
	flex-direction: column;
}

.label-1 {
	font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
	width: 100%;
	text-align: center;
	font-size: large;
	margin-top: 1em;
}

/* les 2 li de cette div ou se trouvent les boutons */

.ul-boutons_li1 {
	margin-left: -1.5em;
}

.btn.btn-dark,
.btn.btn-danger {
	margin-top: 1em;
	margin: 0.5em;
}

.img-fond-main {
	width: 100%;
	max-height: 75vh;
	object-fit: cover;
	object-position: center;
	border-radius: 15px;
	margin-top: 1.5rem !important;
	margin-left: 1.1rem !important;
	padding-right: 0 !important;
}

.nav-item {
	text-justify: auto;
	color: red;
}

/* Positionnement du bouton hamburger : à droite */
.navbar-toggler {
	position: absolute;
	right: 0; /* Hamburger à droite en mode mobile */
	z-index: 1050; /* Assurer que le hamburger est devant tout */
}

/* les couleurs des dropbox dans la page index.html.twig */
.bg-pink {
	background-color: #e20795 !important;
}
.image-clignote {
	animation: clignoter 2s ease-in-out infinite;
	filter: drop-shadow(0 0 5px rgba(0, 255, 0, 0.4)); /* Glow léger vert */
}

@keyframes clignoter {
	0% {
		opacity: 1;
		transform: scale(1);
		filter: drop-shadow(0 0 5px rgba(0, 255, 0, 0.4));
	}
	50% {
		opacity: 0.5;
		transform: scale(1.08);
		filter: drop-shadow(
			0 0 10px rgba(0, 255, 0, 0.6)
		); /* Glow un peu plus fort */
	}
	100% {
		opacity: 1;
		transform: scale(1);
		filter: drop-shadow(0 0 5px rgba(0, 255, 0, 0.4));
	}
}
#message-envoye {
	word-wrap: break-word; /* Permet l'enveloppement du texte */
	overflow-wrap: break-word; /* Gère l'enveloppement du texte */
	overflow: hidden; /* Évite le dépassement du contenu */
	max-width: 100%; /* La boîte prend la largeur totale disponible */
	min-height: 50px; /* Assure une hauteur minimale */
	border-radius: 15px;
}

.message-box {
	align-self: flex-start;
	background-color: #f0f4ff; /* Fond bleu très clair */
	border: 1px solid #c3d4ff; /* Bordure bleu clair */
	border-radius: 12px; /* Coins arrondis */
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
	padding: 12px; /* Espacement intérieur */
	min-width: 50%;
	max-width: 100%;
	width: auto;
	word-break: break-word;
	overflow-wrap: break-word;
	margin-bottom: 12px; /* Espacement extérieur */
	justify-content: space-between; /* Espace entre le texte et la date */
}
/* POUR LE FORMULAIRE DE LOGIN */
.form-options {
	display: flex;
	align-items: center; /*   Centre verticalement les éléments  */
	justify-content: space-between; /* Espace entre les boutons et la case à cocher */
	margin-top: 10px;
}

.button-group {
	/* text-align:center; */
	display: flex;
	/* gap: 10px;  */
}

/* .remember_me 
{
   display:none;
	align-items: center;  
	margin-left: 10px;
    } */

.sender-name {
	color: red;
}
/* #remember_me input {
	margin-left: 10px;
} */

.text-body-login {
	position: relative;
	/* top: 50%; */
	transform: translateY(50%);
	background-color: #f8f9fa; /* Couleur de fond claire */
}

.custom-input {
	background-color: #e0f7fa; /* Fond bleu clair */
	width: 100%; /* Les champs prennent toute la largeur du conteneur */
	/* max-width: 300px;          Limite la largeur */
	margin-bottom: 10px;
}

.rounded-label-login {
	display: inline-block;
	padding: 5px 10px;
	border: 2px solid #ff69b4; /* Bordure rose */
	border-radius: 15px; /* Bords arrondis */
	margin-bottom: 5px;
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}
/* FIN FORMULAIRE DE LOGIN */
#cote-avatar {
	overflow: auto;
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /*Firefox */
	height: 100%;
	/* border: 1px solid rgb(128, 77, 0); */
}

/* lignes de la partie membres des la connexion realisee */
.row-membres {
	margin: 0 !important;
	padding:  0 !important;
	width: 100% !important;
	overflow: hidden !important; /*evite debordement*/
}
/* virer les padding de bootstrap sur les containers pour avoir pleine largeur*/
.container-fluid {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* les 4 bouton a droite*/
.btn-group {
	display: flex;
	justify-content: space-between; /* Garde les éléments espacés uniformément */
	width: 100%; /* Occupe toute la largeur disponible */
	max-width: 100%; /* Assurer qu'on ne dépasse pas la largeur */
	gap: 2; /* Éviter le gap si il cause un débordement */
	padding: 0; /* Annule tout padding supplémentaire */
}
/* S'assurer que le menu déroulant ne dépasse pas */
.dropdown-menu {
	width: 100%; /* Pour s'ajuster à la largeur du bouton */
}
/* eviter de cacher le menu */
.btn-group .dropdown-menu {
	overflow: visible !important;
}
#tchat-centre {
	border-radius: 2%;
}

#tchat-dans-centre {
	border-radius: 2%;
	/* background-color: rgb(253, 252, 252); */
	background-color: rgba(247, 232, 232, 0.2); /* Rouge translucide */
}

.input {
	width: 50%;
	margin: 0 auto;
}
/* champs pour entrer les messages */
#input-group {
	/* width: 100%; */
	height: 6%;
	background-color: #ebf1f7;
	text-align: start;
	display: flex;
	justify-content: space-between;
	align-items: center; /* Alignement vertical au centre */
	padding: 8px; /* Ajout de padding pour l'input */
	font-size: 16px; /* Taille du texte dans l'input */
	border: 1px solid #ccc; /* Bordure pour l'input */
	border-radius: 15px; /* Coins arrondis pour l'input */
}
#chat-input {
	flex-grow: 1; /*Permet à l'input de prendre tout l'espace dispo*/
	min-width: 0; /* Évite qu'il ne déborde sur mobile */
}

#envoie-msg {
	white-space: nowrap; /* Empêche le texte de se casser */
	flex-shrink: 0; /* Empêche le bouton de grossir */
	width: auto; /* Il prend juste la place de son contenu */
	max-width: 100px; /* Limite sa largeur */
}

.chat-text {
	text-align: start;
}

#cote-pseudos {
	overflow: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
	height: 100%;
}

.avatar-with-before::before {
	content: ""; /* Ou du texte si nécessaire */
	display: inline-block; /* Ou inline-block selon le cas */
	width: 90px; /* Ajuste selon tes besoins */
	height: 90px;
	background-color: red; /* Exemple de style */
	position: absolute; /* Ajuste le positionnement */
	top: 0;
	left: 0;
}
.iEnveloppe-with-before::before {
	content: "";
	display: inline-block;
	background-color: rgb(0, 153, 255);
	position: absolute; /* Ajuste le positionnement */
	top: 0;
	left: 0;
}
.avatar-responsive {
	display: flex;
	align-items: center; /* Centre verticalement l'image et l'icône */
	justify-content: flex-start; /* Aligne les éléments horizontalement (par défaut) */
}

.span-rounded-circle-blur {
	width: 50px;
	height: 50px;
}
.iEnveloppe-with-before {
	margin-left: 100px; /* Ajuster l'espacement entre la photo et l'icône enveloppe */
	background-color: red;
}
.photo_expediteur {
	cursor: pointer;
}
#div-reception {
	display: inline;
}

.rounded-circle-blur {
	display: flex;
	justify-content: center;
	align-items: center;
}
/* NOTIFICATIONS DANS LA NAVBAR */
#notifications-bandeau .avatar {
	margin-left: 8px; /* on avait 10 !Ajuste la valeur pour plus ou moins d'espacement */
}

#notifications-bandeau .avatar:first-child {
	margin-left: 0; /* Pour que le premier avatar ne soit pas décalé vers la droite */
}
#notifications-bandeau {
	gap: 8px; /* Ajuste la valeur selon l'espacement souhaité */
}
#liste-messages {
	margin-top: 1px;
	padding-top: 1px;
	flex-grow: 1;
	width: 100%;
	overflow: auto;
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /*Firefox */
}
/*  Classe principale de la barre de navigation */
.navbar-default {
	/* Couleur de fond de la barre de navigation */
	background-color: #f5e0e0;
	border-color: #e7e7e7;
	color: #777;
}

/* Version mobile, le menu devient une icône qui déroule une liste avec le menu en vertical */
.navbar-brand {
	margin-left: 5px;
	color: red;
	z-index: 1050;
}

@media (max-width: 992px) {
	#arrowAlert {
		position: sticky;
		bottom: 150px; /* Ajuste la distance depuis le bas */
		left: 5px;
		/*  transform: translateX(-50%); /* Centre horizontalement */
		width: max-content; /* Ajuste la largeur au contenu */
		z-index: 1000; /* S'assure qu'elle soit au-dessus des autres éléments */
	}
}
/* Menu déroulant en mode mobile */
@media (max-width: 767px) {
	.navbar-collapse {
		position: absolute;
		top: 48px; /* Positionne le menu juste sous la barre de navigation */
		left: 0;
		width: 100%;
	}

	.navbar-nav {
		display: flex;
		flex-direction: column; /* Les éléments sont empilés */
	}

	.navbar-nav .nav-item {
		text-align: left; /* Les boutons s'alignent à gauche */
	}

	#notifications-bandeau {
		left: 15px; /*Décale légèrement la div à gauche pour éviter le chevauchement */
		width: calc(
			100% - 200px
		); /* Largeur ajustée pour éviter que les notifications n'écrasent le logo */
	}
	/* page accueil avant connexion */
	.container-fluid-main {
		flex-direction: column;
		text-align: center;
	}

	.colonne-index-main {
		min-height: 40vh; /* Augmente la hauteur en mode mobile */
		display: flex;
		align-items: center; /* Centre le contenu verticalement */
	}

	.img-fond-main {
		margin-bottom: 8px;
		width: 100%;
		max-height: 60vh; /* Ajustable si nécessaire */
		object-fit: cover;
		border-radius: 15px; /* Coins arrondis */
	}

	.custom-container-main {
		margin-top: auto; /* Force l'alignement en bas */
	}

	.custom-container-main .auto {
		position: static; /* Laisse le flux normal en mobile */
		margin-top: 20px; /* Ajuste l'espacement */
	}

	.carousel {
		max-height: 22vh; /* Ajuster pour être bien visible */
		overflow: hidden;
		width: 100%;
	}

	/* fin avant connexion sur mobile */
}

@media (max-width: 576px) {
	#tchat-dans-centre {
		display: flex !important; /* On garde flex, mais on l'adapte */
		flex-direction: column;
		min-height: 10vh; /* Minimum pour ne pas disparaître */
		max-height: 50vh; /* Pour ne pas déborder */
		overflow-y: auto; /* Active le scroll si besoin */
		scrollbar-width: none; /* Cache la barre de scroll sur Firefox */
		-ms-overflow-style: none; /* Cache la barre de scroll sur Edge/IE */
	}
	.btn-group {
		width: 100%; /* Les boutons prennent toute la largeur */
	}

	.btn {
		width: 100%; /* S'assurer que les boutons sont bien redimensionnés */
		padding: 10px;
	}

	.container-relations {
		flex-wrap: wrap;
		justify-content: center;
	}
	.container-relations button {
		flex-grow: 0; /* Empêche le bouton de grandir */
		width: auto; /* Permet au bouton de prendre la largeur de son contenu */
		max-width: 100px; /* Limite la largeur des boutons */
		margin-bottom: 5px; /* Espacement entre les boutons */
	}
	.container-relations i {
		font-size: 0.8rem; /* Réduit la taille des icônes */
	}
}
.row-index {
	height: 50%;
}
#index-tarifs {
	left: 2px;
	height: 75%;
	/* max-height:80%; */
	background-color: rgb(71, 17, 17);
	border-color: white;
	border: 2px;
	align-items: center;
}
/* main = partie avant connexion */
#colonne-gauche-main {
	background: linear-gradient(to bottom, #ff758c, #ff7eb3);
	border-radius: 5%;
	margin-left: 1.4rem !important; /* centre le bloc dans sa largeur */
	max-height: 650px; /* ou une valeur selon la hauteur de la colonne de droite */
	overflow-y: auto; /* active la barre de scroll si besoin */
}
/* ANIMATION POUR LES LIGENS SUR PAGE INDEX */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fade-in {
	opacity: 0;
	animation: fadeIn 0.6s ease-out forwards;
}

/* CLIGNOTEMENT DU CHAMP DE SAISIE DES MESSAGES BAS ECRAN */
@keyframes clignotement {
	0% {
		border-color: transparent;
		background-color: #fff;
	}
	50% {
		border-color: red;
		background-color: #ffdddd;
	}
	100% {
		border-color: transparent;
		background-color: #fff;
	}
}

.blink {
	animation: clignotement 1s infinite;
	border: 1px solid red;
}

/* .blink-champ-recherche {
	animation: clignotement 1s infinite;
	background-color: 2px solid rgb(8, 8, 8);
}   */
#message-count-notifications {
	font-size: 0.85rem;
	color: red;
	background-color: yellow;
}
/* sur la page de recherche */
#btn-ville-pseudo,
#btn-age,
#btn-on-off,
#btn-sexe {
	background-color: rgb(58, 6, 248);
	color: rgb(227, 235, 217);
}

#btn-ville-pseudo:hover,
#btn-age:hover,
#btn-on-off:hover,
#btn-sexe:hover {
	color: rgb(58, 6, 248);
	background-color: rgb(227, 235, 217);
}

#loading-spinner {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	background-color: rgba(255, 255, 255, 0.8); /* Fond semi-transparent */
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

.spinner-border {
	width: 3rem;
	height: 3rem;
}
/*======================================================================*/
/* PAGE INDEX MEMBRES FLECHE D'ALERTE SI ECRITURE MESSAGE SANS CHOIX DE PROFIL*/
#arrowAlert {
	position: absolute;
	margin-top: 25%;
	right: 10px;
	transform: translateY(-50%);
	/* animation: bounce 1s infinite; */
	z-index: 10;
	display: flex; /* Aligne la phrase et la flèche sur une ligne */
	align-items: center;
	gap: 5px; /* Espacement entre la phrase et la flèche */
}
#alertText {
	font-size: 1rem; /* Taille de la phrase */
	font-weight: bold; /* Texte en gras */
	color: #ff00c8; /* Couleur rose */
	animation: fade 1s infinite alternate; /* Clignotement doux */
}

#arrowIcon {
	animation: bounce 1s infinite alternate; /* Animation de rebond pour la flèche */
}

/* Animation de clignotement */
/* Animation "rebond" pour rendre la flèche plus vivante */
@keyframes bounce {
	0%,
	100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(10px); /* Déplacement léger */
	}
}
@keyframes fade {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0.5;
	}
}
/* Centrage des icones dans le bouton */
.photos-bouton .fa {
	font-size: 1.2rem;
	vertical-align: middle;
	cursor: pointer;
}
.photos-bouton .fa-star {
	color: #ffc107 !important; /* Couleur jaune pour l'étoile */
}
/*taille des icones */
.photos-bouton .fa-crown {
	font-size: 1.2em;
	margin-left: 1em; /* moitie taile police conteneur parent entre photos et les icones*/
	vertical-align: middle;
	color: #ff00dd !important; /* Couleur rose pour la couronne */
}
/* Centrer les bages */
.photos-bouton {
	display: flex;
	align-items: center;
	justify-content: center;
}
/* icone des outils au dessus des boutons de choix connectés */
/* Ligne verticale séparatrice */
.separator-vertical {
	height: 40px;
	width: 2px;
	background-color: #dee2e6;
	margin: 0 10px;
}
.container-relations button {
	margin: 0 5px; /* Espace entre les boutons */
}
.container-relations {
	margin-left: 10px;
}
.container-connectes {
	margin-top: 5px;
	overflow-y: auto;
	scrollbar-width: none; /* Cache la barre de scroll sur Firefox */
	-ms-overflow-style: none; /* Cache la barre de scroll sur Edge/IE */
	max-height: 80vh;
}
/* Pour Chrome, Edge (versions récentes) et Safari */
.container-connectes::-webkit-scrollbar {
	display: none;
}
#container-connectes {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* 4 colonnes égales */
	gap: 12px; /* espace entre les images */
	justify-items: center; /* centre chaque image dans sa cellule */
	padding: 10px;
}
#container-connectes a {
	display: block;
	width: 90px;
	height: 90px;
}
#container-connectes img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Liste des relations dans la modale */
.list-group-item {
	transition: background-color 0.3s ease;
}

.list-group-item:hover {
	background-color: #f8f9fa;
}

.list-group-item img {
	border: 1px solid #ddd;
}

.modal-dialog-scrollable {
	max-height: 500px;
	overflow-y: auto;
}

/* Icônes */
i.star-tools {
	color: #ffc107; /* Couleur or */
}

i.fa-tools i.fa-plug {
	color: #6c757d; /* Couleur gris */
}
/* Partie pour la cloche des evenements dasn le bandeau superieur*/
/* Cercle rouge autour de la cloche */
/* Cercle rouge autour de la cloche */
.notification-circle {
	width: 45px;
	height: 45px;
	border: 2px solid rgb(196, 115, 115); /* Bordure rouge */
	border-radius: 50%; /* Cercle */
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Clignotement de la cloche */
@keyframes blinkCloche {
	0% {
		color: yellow;
	}
	50% {
		color: rgb(243, 216, 136);
	}
	100% {
		color: yellow;
	}
}

.blinkCloche {
	animation: blinkCloche 1s infinite;
	color: red;
}
/* taille des polices dans boutons photos et mes photos */
.btn-same-size {
	font-size: 1.1rem;
}

/* partie concernant la boite de message apres connexion */
.info-box {
	width: 320px;
	background: #ffe6e6; /* Rose pâle */
	border: 1px solid #ffb6c1;
	border-radius: 10px;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);

	/* Centre la boîte au milieu de l'écran */
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/* .arrow-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    } */

/* En-tête */
.info-header {
	background: #ffb6c1;
	color: white;
	height: 30px;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
/* Bouton de fermeture */
.btn-close {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 50%;
}

/* Conteneur du message */
.message-info-container {
	padding: 10px;
	background: #fff;
	min-height: 60px;
	text-align: justify;
	border-radius: 5px;
	margin: 10px;
	border-radius: 3px;
}
/* Texte de la flèche */
.arrow-text {
	font-size: 14px;
	font-weight: bold;
	color: #ff4d4d;
}
/* --------------------- */

#enveloppe-info {
	animation: bounce-info 1s infinite alternate;
}
@keyframes bounce-info {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(10px); /* Déplacement léger */
	}
}