/* Conteneur principal de l'aperçu */
.post-preview-container {
	background: 			#ffffff;
	border: 					1px solid #dbdbdb;
	border-radius: 		12px;
	width: 						100%;
	max-width: 				25rem; /* Largeur fixe pour stabiliser le rendu */
	margin: 					1.25rem auto;
	overflow: 				hidden;
	box-shadow: 			0 10px 25px rgba(0,0,0,0.05);
	font-family: 			-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#accrocheWrapper {
	position:	 				relative;
	width: 						25rem; /* On fixe la largeur pour éviter que la console ne le déforme */
	height: 					25rem;
	background: 			#000;
	flex-shrink: 			0; /* Empêche le wrapper de s'écraser */
}

#accrocheCanvas {
	width: 						100%; /* S'adapte au wrapper */
	height: 					100%;
	display: 					block;
}

/* Header : Avatar + Nom + Sponsorisé */
.post-header {
	display: 					flex;
	align-items: 			center;
	padding: 					12px 16px;
	gap: 							12px;
}

.post-avatar {
	position:					relative;
	width: 						38px;
	height: 					38px;
	background: 			linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	border-radius: 		50%;
	padding: 					2px; /* Effet de bordure colorée */
}

.post-avatar::after {
	content: 					'';
	display: 					block;
	width: 						100%;
	height: 					100%;
	
	background: 			#eee; /* Couleur de l'avatar vide */
	border-radius: 		50%;
	border: 					2px solid #fff;
}
.avatar-image {
	position: 					absolute;
	top:								5px;
	left: 							5px;
	width:							38px;
	aspect-ratio: 			1 / 1;
	background-image: 	var(--url-logo-charte);
	background-size: 		28px;
	background-repeat: 	no-repeat;

}

.post-meta {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.post-username {
	font-weight: 600;
	font-size: 14px;
	color: #262626;
	line-height: 18px;
}

.post-label {
	font-size: 12px;
	color: #262626;
	line-height: 14px;
}

.post-options {
	margin-left: auto;
	font-weight: bold;
	color: #262626;
	cursor: pointer;
}

/* Footer : Icônes et Likes */
.post-footer {
	padding: 12px 16px;
	background: #fff;
}

.post-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 8px;
}

.action-icon {
	font-size: 24px;
	cursor: pointer;
	transition: transform 0.1s ease;
}

.action-icon:active {
	transform: scale(1.2);
}

.post-save {
	margin-left: auto;
}

.post-engagement {
	font-size: 14px;
	color: #262626;
	font-weight: 400;
}

.post-engagement strong {
	font-weight: 600;
}

.conteneur-lame.flex-into-row.post-final-fields {
	padding:              var(--espacement-large) var(--espacement-large) var(--espacement-tres-large);
	justify-content: 			center;
	align-items: 					center;
	gap:									1rem;
}

.input-group {
	margin-bottom: 				15px;
	width: 								100%;
	max-width: 						25rem;
}

.input-group label {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: 11px;
	font-weight: 700;
	color: #8e8e8e;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}

.input-group input {
	width: 100%;
	padding: 12px 16px;
	background: #fafafa;
	border: 1px solid #dbdbdb;
	border-radius: 8px;
	font-size: 14px;
	color: #262626;
	transition: all 0.2s ease;
}

.input-group input:focus {
	border-color: #a8a8a8;
	background: #fff;
	outline: none;
}

/* Compteur de caractères */
.char-counter {
	max-width: 		400px;
	margin: 		0 auto 20px;
	text-align: 	right;
	font-size: 		12px;
	color: 			#8e8e8e;
	padding-right: 	5px;
}

.char-counter.limit-reached {
	color: #ed4956;
	font-weight: bold;
}
/** =========================================================================================== */
/* --- LAYOUT MOBILE FIRST --- */
.battle-arena-wrapper {
	display: 				flex;
	flex-direction: column; 																																			/* Champs en haut, Post en bas */
	gap: 						30px;
}

.battle-timer {
	font-family: 					monospace;
	font-size: 						2.5rem;
	font-weight: 					bold;
	text-align: 					center;
	color: 								#ff4757;
	margin: 							15px 0;
	padding: 							10px;
	background: 					#fff0f0;
	border-radius: 				8px;
	border: 							2px solid #ff4757;
	font-variant-numeric:	tabular-nums;
}

.writing-side { order: 1; } /* Les champs de texte */
.preview-side { order: 2; } /* Le canvas Instagram */

.battle-control-zone {
    text-align: center;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.feedback-consigne { font-weight: bold; margin-bottom: 5px; }
.feedback-reaction { font-style: italic; min-height: 20px; }

.proposition-block {
	position: 		relative;
	padding: 		15px;
	border-radius: 	12px;
	background: 	var(--blanc-pur);
	transition: 	all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	border: 		2px solid transparent;
	margin-bottom: 	15px;
	cursor: 		pointer; 
}


/* --- EFFET IA FLOUTÉ --- */
.ia-masked .ia-reveal-container {
	filter: 				blur(8px);
	opacity: 				0.6;
	user-select: 		none;
	pointer-events: none;
	transition: 		all 0.8s ease;
}

/* --- HIGHLIGHT CHOIX --- */
.proposition-block.selected {
	border: 			4px solid #007bff;
	opacity: 			1;
	background: 	#fff;
	box-shadow: 	0 10px 20px rgba(0, 123, 255, 0.1);
	transform: 		translateX(5px);
}

.proposition-block.rejected {
	opacity: 			0.3;
	filter: 			grayscale(1);
	transform: 		scale(0.98);
}

.text-overlay {
	display: 					flex;
	align-items: 			flex-start; /* Aligne le texte au sommet de la zone de saisie */
	justify-content: 	flex-start;
	width: 						100%;
	height: 					7.5rem;
	margin: 					0;
	padding: 					0.25rem;
	text-transform: 	uppercase;
	outline: 					none;
	user-select: 			none;
	resize: 					none;
	overflow: 				hidden;
	white-space: 			pre-wrap;
	word-break: 			word-wrap;
	border: 					1px solid var(--gris-trmdvsr-clair);
}

.canvas-wrapper {
    position: relative; /* Indispensable pour l'overlay */
    width: 100%;
}
.preview-text-overlay {
    position: absolute;
    top: 70%; /* Position sur la pancarte */
    left: 8%;
    right: 8%;
    color: white;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    pointer-events: none; /* Laisse passer les clics au canvas si besoin */
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: 1.2;
    text-align: left;
    font-weight: bold;
    z-index: 10;
}

.hidden { display: none !important; }

/* Animation de "pulse" pour le timer quand il reste moins de 10s */
.timer-low { animation: pulse-red 1s infinite; }

/* --- LAYOUT DESKTOP --- */
@media (min-width: 60rem) {
	.battle-arena-wrapper {
		flex-direction: row-reverse; /* Post à GAUCHE, Champs à DROITE */
		align-items: 		flex-start;
		max-width: 			var(--largeur-conteneur-max);
		margin: 				0 auto;
	}

	.preview-side, .writing-side {
		flex: 					1; /* Prend la moitié */
		top: 						20px;
	}
}

@keyframes pulse-red {
	  0% { transform: scale(1); }
	 50% { transform: scale(1.05); color: #c0392b; }
	100% { transform: scale(1); }
}

/** ******************************************************************************************* //
 * @description 'Fin du fichier. with care.'
 * @author 'trmdvsr'
 * @version 26.01.12 (22:39)
 * ******************************************************************************************** */