a:focus { outline: none; } 

/* WebKit, Blink, Edge */

::-webkit-input-placeholder {color:#CCCCCC;}

/* Mozilla Firefox 4 to 18 */

:-moz-placeholder {color:#CCCCCC;opacity:1;}

/* Mozilla Firefox 19+ */

::-moz-placeholder {color:#CCCCCC;opacity:1;}

/* Internet Explorer 10-11 */

:-ms-input-placeholder {color:#CCCCCC;opacity:0.6;}

/* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */

:placeholder-shown {color:#CCCCCC;}



input[type=text]::-ms-clear {  display: none; width : 0; height: 0; }

input[type=text]::-ms-reveal {  display: none; width : 0; height: 0; }



/*vewport mobile*/

@-webkit-viewport{

    width: device-width;

}

@-moz-viewport{

    width: device-width;

}

@-ms-viewport{

    width: device-width;

}

@-o-viewport{

    width: device-width;

}

@viewport{

    width: device-width;

}

input,

textarea,

button,

select,

div,

img,

a {

  -webkit-tap-highlight-color: rgba(0,0,0,0);

}

[contenteditable=true]:focus {

outline: none;

}

[contentEditable=true]:empty:not(:focus):before{

content:attr(data-text);

 }

[contentEditable=true]:not([data-text='']):empty:before {

content: attr(data-text);

}

[contentEditable=true]:empty:before {

content: attr(data-text);

}

[contentEditable=true]::-webkit-caps-lock-indicator {

    content: none;

}



.overlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);

    z-index: 1000;

}



.popup {

    display: none;

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background-color: #fff;

    width: 450px;

    height: 500px;

    padding: 20px;

    z-index: 1001;

}

.EmojiT1{width:1.4em;height:1.4em;padding:0 0 0 0;vertical-align:-0.15em;}
.EmojiT2{margin-right:2px;width:1.1em;height:1.1em;padding:0 0 0 0;vertical-align:-0.18em;}

.ePEd07f{position:relative;width:80px;height:80px;border-radius:50%;margin-right:10px;cursor:pointer;margin:50px auto 0px auto;}
.ePEd12s{position:relative;width:80px;height:80px;border-radius:50%;}
.ePEd15n{position:relative;color:#515151;font-family: "Roboto", sans-serif;font-size:18px;font-weight:600;text-align:center;line-height:24px;padding:4px 0px 10px 0px;}
.eFCl59q{position:relative;margin: 0px auto 20px auto;width:calc(100% - 60px);height:47px;border:1px solid #62809B;border-radius:2px;color:#62809B;font-family: "Roboto", sans-serif;font-size:16px;font-weight:normal;text-align:center;line-height:47px;cursor:pointer;display:block;text-decoration:none;}
.close{position:absolute;top:10px;right:10px;cursor:pointer;width:15px;height:15px;background-image:url("/res/icon-close-popup.svg");background-repeat:no-repeat;background-position:center;}

.close-box {
	  position:absolute;
      max-width: 600px;
      padding: 15px 5px 0 5px;
      right:10px;
	  top:10px;
	  z-index:1500;
    }

.cWAl11z{top:0px;}
.bRBd34B{width:670px;}
.a1b2c3d{position:relative;margin:0px;overflow:hidden;background-color:#FFFFFF;}

.e4f5g6h{position:relative;width:600px;margin:0px auto 0px auto;height:calc(100vh + 10px);}
.eWFi08m{position:relative;height:55px;width:100%;}



.bDCd01x{position:relative;overflow-y:auto;overflow-x:hidden;height:calc(100vh - 140px);}

.bDCd01x::-webkit-scrollbar{width:7px;}

.bDCd01x::-webkit-scrollbar-track{background:#FFFFFF;border-radius:25px;}

.bDCd01x::-webkit-scrollbar-thumb{background:#E1E1E1;border-radius:25px;}

.bDCd01x:-webkit-scrollbar-thumb:hover{background:#C7C7C7;}

.eHFh02a1{position:relative;min-height:70px;padding-top:40px;display:none;}

.eFFi29v{
			position:relative;
			margin:20px auto 0px auto;
            width: 60px;
            height: 60px;
			border:0px solid transparent;
			border-radius:50%;
			cursor:pointer;
		}
		.eOFl26O{
			width: 60px;
            height: 60px;
			border:0px solid transparent;
			border-radius:50%;	
			margin-right: 10px;
		}
		
		.eHFh52o{
			position:relative;
			color:#62809B;
			font-family: "Roboto", sans-serif;
			font-size:16px;
			font-weight:600;
			margin:10 0px 20px 0px;
			text-align:center;
			line-height:24px;
			cursor:pointer;
		}
		
		.mail-link{
			font-size:14px;
			color:#62809B;
			text-decoration:none;		
		}
		.mail-link:hover {
			text-decoration:underline;
		}
		
		.message-bubble {
            position: relative;
			margin:20px auto 30px auto;
            background: #F8F8F8;
            border-radius: 10px;
            padding: 10px 15px;
            max-width: 300px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
			font-size:18px;
			color:#515151;
			font-size:13px;font-family: "Roboto", sans-serif;
			line-height:20px;
        }

         .message-bubble:before {
            content: "";
            position: absolute;
            top: -10px;
            left: 0;
            width: 20px;
            height: 20px;
            background: #F8F8F8;
            clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
            transform: rotate(-45deg);
        }
		.container-bubble-user {
			display: flex; /* Utiliser Flexbox pour gérer l'alignement des enfants */
			justify-content: flex-end; /* Aligner les enfants à droite */
			width: calc(100% - 20px); /* S'assurer que le conteneur parent prend toute la largeur disponible */
		}
		.message-bubble-user {
			position: relative;
			display: inline-block;
			margin: 20px 0 30px auto; /* Modifier de 'margin: 20px auto 30px auto' à 'margin: 20px 0 30px auto' */
			background: #CBD5DE;
			border-radius: 10px;
			padding: 10px 15px;
			max-width: 300px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
			font-size: 18px;
			color: #515151;
			font-family: "Roboto", sans-serif;
			line-height: 20px;
		}


         .message-bubble-user:before {
			content: "";
			position: absolute;
			top: -10px;
			right: 0; /* Modifier de 'left: 0' à 'right: 0' */
			width: 20px;
			height: 20px;
			background: #CBD5DE;
			clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
			transform: rotate(45deg); /* Modifier de 'rotate(-45deg)' à 'rotate(45deg)' */
		}

		.eEFh31Z {
			margin:0px auto 0px auto;
			font-size: 16px;
			text-decoration:none;
			color:#62809B;
			font-family: "Roboto", sans-serif;
			cursor:pointer;
		}
		.eEFh31Z:hover{
			text-decoration:underline
		}
		.copied-message {
            display: none;
            position: relative;
			width:150px;
			margin:-40px auto 30px auto;
			text-align:center;
            background-color: rgba(0, 0, 0, 0.8);
            color: #ffffff;
            padding: 10px 20px;
            border-radius: 5px;
            z-index: 9999;
        }

.eHFh10F{position:relative;color:#62809B;font-family: "Roboto", sans-serif;font-size:16px;text-align:center;line-height:24px;text-decoration:none;}
.eHFh10F:hover{text-decoration:underline}

/* Conteneur principal du chat */
.chat-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 5px 10px 5px 10px;
    margin: 0 auto;
	max-width:calc(100% - 20px);
}
.eFFi31D1{
	width: 40px;
	height: 40px;
	border:0px solid transparent;
	border-radius:50%;				
}
.message-img{
	width: 40px;
	height: 40px;	
	margin-right: 10px;	
	align-self: flex-start;
	cursor:pointer;
}
.eYHe28t{	
	float:left;
	width: 20px;
	height: 20px;
	border:0px solid transparent;
	border-radius:50%;	
	margin: 9px 8px 0px 0px;
	align-self: flex-start;
	cursor:pointer;
}
.initials {
	width: 40px;
	height: 40px;
	background-color:#62809B;
	color: #FFF;
	text-align: center;
	line-height: 40px;
	border:0px solid transparent;
	border-radius: 50%;
	font-size: 16px;
	font-family: "Roboto", sans-serif;
	display:none;
}
.toinitials {
	float:left;
	width: 20px;
	height: 20px;
	background-color:#62809B;
	color: #FFF;
	text-align: center;
	line-height: 20px;
	border:0px solid transparent;
	border-radius: 50%;
	font-size: 8px;
	font-family: "Roboto", sans-serif;
	margin: 9px 8px 0px 0px;
	align-self: flex-start;
	display:none;
}
.eIGh22y{
	width: 40px;
	height: 40px;
	background-color:#62809B;
	color: #FFF;
	text-align: center;
	line-height: 40px;
	border:0px solid transparent;
	border-radius: 50%;
	font-size: 16px;
	font-family: "Roboto", sans-serif;
	margin:8px 0px auto 8px;
	align-self: flex-start;
}
.eSFc02E{position:relative;width:40px;height:40px;border-radius:50%;margin:8px 0px auto 8px;}
.message-container {
    display: flex;
    align-items: center;
	width:100%;
}

/* Bulle de message générique */
.message {
    width: calc(100% - 30px); 
    padding: 10px 15px;
    border-radius: 20px;
    font-size: 16px;
    line-height: 1.4;
    position: relative;
    word-wrap: break-word;
	font-family: "Roboto", sans-serif;
}

/* Messages envoyés */
.message.sent {
    align-self: flex-end;
    background-color: #CBD5DE;
    border-top-right-radius: 0;
}

/* Messages reçus */
.eC1Hg57r {
	width: calc(100% - 30px); 
    padding: 10px 15px;
    border-radius: 20px;
    font-size: 16px;
    line-height: 1.4;
    position: relative;
    word-wrap: break-word;
	font-family: "Roboto", sans-serif;
    align-self: flex-start;
    background-color: #F8F8F8;
    border-top-left-radius: 0;
}
/* Triangle de la bulle reçue */
.eC1Hg57r::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: #F8F8F8 transparent transparent transparent;
}
.eA1Hj09N{
	align-self: flex-start;
	background-color: #F8F8F8;
	width: calc(100% - 30px); 
	padding: 10px 15px;
	border-radius: 20px;
	border-top-left-radius: 0;	
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	font-size: 16px;
	line-height: 1.4;
	position: relative;
	word-wrap: break-word;
	font-family: "Roboto", sans-serif;
}
.eA1Hj09N::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: #F8F8F8 transparent transparent transparent;
}
.eB1Hi39C1::before {
    border-color: #E6FFE6 transparent transparent transparent;
}
.eAIi13i::before {
    border-color: #D5DDE3 transparent transparent transparent;
}
.eA1Hj21s{
	align-self: flex-start;
	background-color: #F8F8F8;
	width: calc(100% - 30px); 
	padding: 10px 15px;
	font-size: 16px;
	line-height: 1.4;
	position: relative;
	word-wrap: break-word;
	font-family: "Roboto", sans-serif;
	margin-top:-8px;
}
.eA1Hj22W{
align-self: flex-start;
background-color: #F8F8F8;
width: calc(100% - 30px); 
padding: 10px 15px;
border-radius: 20px;
border-top-left-radius: 0;	
border-top-right-radius: 0;
font-size: 16px;
line-height: 1.4;
position: relative;
word-wrap: break-word;
font-family: "Roboto", sans-serif;
margin-top:-8px;
}
.message-to{
	border-left: 5px solid #62809B;
	border-radius:3px;
	background-color: #E1E7EC;
	min-height: 40px;
	width: 100%;
	line-height:20px;
	box-sizing: border-box;
	padding: 0px 0px 0px 5px;	
	margin:8px 0px 8px 0px;
	display: flex;
  align-items: center;
}

.eB1Hh18G {
  margin-top:8px;
  display: flex;
  flex-direction: column;
  color:#62809B;
  font-size: 14px;
  width:calc(100% - 40px);
}
.eB1Hh18G span {
	position: relative;
    top: -1px;
	font-size: 10px;
}
.eB1Hh31u{
  display: flex;
  flex-direction: column;
  color:#62809B;
  font-size: 14px;
  width:calc(100% - 40px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.eB1Hh31u span {
	margin-top:-1px;
	font-size: 11px;
}
.eB1Hh13z{
width: calc(100% - 30px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom:10px;	
color:#333333;
}
.eB1Hh37Y{
width: calc(100% - 30px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;	
color:#333333;
}
/* Triangle de la bulle envoyée */
.message.sent::before {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: #CBD5DE transparent transparent transparent;
}



/* Conteneur pour les messages envoyés et reçus */
.message-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
	width: calc(100% - 50px);
	text-decoration:none;
}
.message-wrapper:hover {
/*text-decoration:underline;*/
}

.eB1Jh04y{position:absolute;top:8px;right:11px;cursor:pointer;width:22px;height:22px;background-image:url("/app/res/icon-chevron-right.svg?p=ff");background-repeat:no-repeat;background-position:center;background-size:28px 28px;}

.eB1Hg03q {
	/*display: flex;*/
	font-size: 18px;
	color:#62809B;
	font-family: "Roboto", sans-serif;
	width: calc(100% - 18px);
	line-height:19px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

}
.eB1Hg03q span {
	font-size: 12px;
	position: relative;
    top: -2px;
}

.message-date {
	word-wrap: break-word;
	font-family: "Roboto", sans-serif;
    font-size: 10px;
    color: #C0C0C0;
    text-align: right;
}

.message-reqprivate{
	position:relative;
	margin:5px auto 10px 0px;
	display:block;
	font-size:16px;
	color:#62809B;
	font-family:Helvetica,sans-serif;
	font-weight:500;
	text-decoration:none;
	width:100%;
	height:37px;
	line-height:37px;
	cursor:pointer;
	background-color: #FFFFFF;
	border:1px solid #62809B;
	border-radius:2px;
	text-align:center;
}
.message-reqprivate:hover {
	-moz-opacity: 0.9;
	opacity: .90;
	filter: alpha(opacity=90);
}

.eGIh27E1{
margin:4px auto 0px 0px;	
}
.eGIh27i{
	position:relative;
	margin:10px auto 10px 0px;
	display:block;
	font-size:16px;
	color:#62809B;
	font-family:Helvetica,sans-serif;
	font-weight:500;
	text-decoration:none;
	width:100%;
	height:37px;
	line-height:37px;
	cursor:pointer;
	background-color: #FFFFFF;
	border:1px solid #62809B;
	border-radius:2px;
	text-align:center;
}
.eGIh27i:hover {
	-moz-opacity: 0.9;
	opacity: .90;
	filter: alpha(opacity=90);
}
.eD1Hd44T{
	position:relative;
	margin:10px auto 10px 0px;
	display:block;
	font-size:16px;
	color:#62809B;
	font-family:Helvetica,sans-serif;
	font-weight:500;
	text-decoration:none;
	width:200px;
	height:37px;
	line-height:37px;
	cursor:pointer;
	background-color: #FFFFFF;
	border:1px solid #62809B;
	border-radius:2px;
	text-align:center;
}
.eD1Hd44T:hover {
	-moz-opacity: 0.9;
	opacity: .90;
	filter: alpha(opacity=90);
}
.fHDj03G{
	float:left;
	margin-right:5px;
	width:16px;
	height:16px;
}
.fHDi49F{
	position:relative;
	margin:10px auto 10px 0px;
	display:none;
	font-size:12px;
	color:#515151;
	font-family:Helvetica,sans-serif;
	text-decoration:none;
	width:calc(100% - 30px);
	min-height:37px;
	line-height:16px;
	cursor:default;
	background-color: #FFFFFF;
	border-radius:2px;
	padding:10px;
}
.eD1Hd46B{
margin-top:6px;	
}
.eC1Hg45C1{
	width:200px;
}
        #comments {
            height:100%;
            overflow-y: auto;
        }
        /* Style de la barre de défilement */
        #comments::-webkit-scrollbar {
            width: 8px;
        }
        #comments::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        #comments::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }
        #comments::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        .comment {
            display: flex;
        }
        .comment img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 10px;
			cursor:pointer;
        }
        .comment .info {
            display: flex;
            flex-direction: column;	
			font-family: "Roboto", sans-serif;
			display:inline;
			max-width: 90%;
			word-wrap: break-word;
        }
        .comment .info .username {
            font-weight: bold;
			width: max-content;
			cursor:pointer;display:inline;
			
			
        }
		.comment .info .username:hover {
			text-decoration:underline;
		}
        .comment .info .text {
            margin-top: 5px;
			font-size:16px;
			width: max-content;
			cursor:pointer;
			word-wrap: break-word; /* ou word-wrap: break-word; */
    max-width: 90%;
        }


.ePEe12W{color:#62809B;font-size:14px;}

.aDEa22S{position:fixed;bottom:0px;margin-right:-295px;width:600px;background-color:#FFFFFF;z-index:1000;}
.eWJi19N{
	position:fixed;
	bottom:0px;
	width:100%;
	right:50%;
	margin-right:-335px;
	width:670px;
	background-color:#FFFFFF;
	z-index:1000;
	display:none;
	line-height:28px;
	height:28px;
	text-align:center;
	color:#C0C0C0;
	font-size:13px;
	font-family: "Roboto", sans-serif;
	cursor:default;
	}

.eB1Hj17R{
	position:absolute;
	margin-top:-36px;
	right:13px;
	display:none;
	min-width:25px;
	font-size: 20px;
	color:#FFFFFF;
	text-align:center;
	line-height: 1.4;
	word-wrap: break-word;
	font-family: "Roboto", sans-serif;
	padding:2px 5px 2px 5px;
	background-color:#62809B;
	border:0px solid transparent;
	border-radius:25px;
	cursor:pointer;
}

.eRJj04W {
    position: relative;
    margin-left: 20px;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    max-width: calc(100% - 70px); /* Corrigé pour avoir un espace entre 100% et 2px */
    min-height: 20px;
    display:none; /* Ajouté ici */
    font-size: 15px;
    color: #333333;
    font-family: Helvetica, sans-serif;
    font-weight: 500;
    cursor: default;
    background-color: #FFCECE;
    border: 1px solid #FF4848;
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
}


.bSBa29u{position:relative;width:100%;}

.aC1Da15d{width:100%;}

.aC1Da16G{vertical-align:top;display:none;}

.bCDf40u{vertical-align:top;width:40px;}

.cA1Lb26Y{width:100%;}

.eWFj37w{vertical-align:top;display:none;}


.aDEa24m{position:relative;border:1px solid #E9E9E9;border-radius:25px;background-color:#F4F4F4;padding:5px;margin:8px 0px 8px 10px;width:calc(100% - 26px);}

.aDEa25B{
    position:relative;
    color:#A4A4A4;
    padding-left:8px;
    padding-right:8px;
    max-width:100%;
    
    overflow-wrap: normal; /* empêche la coupure sauvage */
    word-break: normal;    /* garde les mots entiers */

    border:0px solid transparent;
    font-size:20px;
    min-height:28px;
    resize:none;
    overflow:hidden;
    font-family:Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;
    line-height:25px;
    outline:none;
}

.aDEa25B:focus{outline:none;outline:0;border-color:#94C5E4;}

.eGIh04v{
	display: none;
	line-height:28px;
	height:28px;
	text-align:center;
	color:#C0C0C0;
	font-size:13px;
	font-family: "Roboto", sans-serif;
	cursor:default;
}
@keyframes dots {
	0% { content: "."; }
	33% { content: ".."; }
	66% { content: "..."; }
}
.dots:after {
	content: ".";
	animation: dots 1s steps(3, end) infinite;
}

.bCDf41C{position:relative;width:24px;height:24px;background-image: url("https://www.readim.com/app/res/icon-send-message.svg");

background-repeat: no-repeat;background-position: center;cursor:pointer;background-color:#62809B;z-index:100;padding:8px;

border: 0px solid transparent;border-radius:50%;margin:8px 5px 0px 5px;display:none;background-size:24px 24px;}

.bCDf53v{position:relative;width:24px;height:24px;background-image: url("https://www.readim.com/app/res/icon-camera.svg");
background-repeat: no-repeat;background-position: center;cursor:pointer;background-color:#C7D2DC;z-index:100;padding:8px;
border: 0px solid transparent;border-radius:50%;margin-top:8px;margin-left:5px;margin-right:5px;}


.cA1Ld03I{width:1.1em;height:1.1em;padding:0 0 0 0;vertical-align:-0.18em;background-size:1.1em 1.1em;background-repeat: no-repeat;background-position: center;display:inline-block;}

/* Style du conteneur */
#social-icons {
  display: flex;
  gap: 10px; /* Espace entre les icônes */
  padding: 10px;
  padding-left:0px;
}

/* Style des liens */
#social-icons a {
  text-decoration: none;
}

/* Style des icônes */
#social-icons img {
  width: 24px; /* Largeur de chaque icône */
  height: 24px; /* Hauteur de chaque icône */
  transition: transform 0.2s ease; /* Effet de transition */
}

#social-icons img:hover {
  transform: scale(1.2); /* Agrandissement lors du survol */
}


@media screen and (max-width : 800px){

.e4f5g6h{max-width:100%;}
.a1b2c3d{
        padding-left: 15px;
        padding-right: 15px;
      }
.header-container {
width:calc(100% - 30px);	
	
}
    .popup {

        width: 100%;

        height: 100%;

        max-width: 100%;

        max-height: 100%;

    }

.close {top:40px;right:40px;}


.eWJi19N{width:100%;margin-right:0px;right:0px;}

.bRBd34B{width:calc(100% - 10px);margin-left:5px;}
.cLLa28R{padding-left:10px;}

.bDCd01x{width:calc(100% - 10px);margin-left:5px;}

.chat-container {max-width: 800px;}

.comment .info {width:calc(100% - 60px);max-width:100%;}/*image 50*/

.comment .info .username {max-width:100%;}
.comment .info .text {max-width: 100%;}

.bSBa29u{width:calc(100% - 10px);margin-left:auto;margin-right:auto;height:30px;}

}
@media (min-height: 800px) {
.eFFi47l{
padding-top:20px;
}
}

@media screen and (max-width : 600px){
.aDEa22S{width:100%;margin-right:auto;right:0px;}
}

@media screen and (max-width : 480px){
.e4f5g6h{width:100%;max-width:100%;}
.cLLa28R{padding-left:0px;}
.chat-container {width:calc(100% - 8px);max-width:100%;margin:0;padding:0px 0px 10px 0px;}
.bSBa29u{
/*margin:4px 0px auto 0px;width: calc(100% - 15px);*/
}
.aDEa24m{
margin:8px 0px 8px 8px;width:calc(100% - 23px);	
}
.eSFc02E{margin:8px 0px auto 5px;}
}