/*
 *
 * ██████╗                                                         ██╗        ██████╗     ██╗
 * ██╔══██╗ ██ ███╗   ███╗    ████╗   ██████╗  █████╗    █████╗  ██████╗        ██╔═╝   ██║ ██║
 * █████╔═╝  ██║ ║█║ ██║ ██║ ██╔══╝   ██╔══██╗ ██╔══██╗ ██╔══╗█╗   ██╔═╝        ██║    ██║   ██║
 * ██╔══╝    ██║ ╚═╝ ██║ ██║  ████╗   █████╔═╝ █████╔═╝ ██║  ╚═╝   ██║          ██║    ████████║
 * ██║       ██║     ██║  █║      ██╗ ██╔══╝   ██╔══╝   ██║        ██║          ██║    ██║   ██║
 * ██║       ██║      ████║   ████╔╝  ██║      ██████╗   █████╗     ███╗      ██████╗  ██║   ██║
 * ╚═╝       ╚═╝      ╚═══╝   ╚═══╝   ╚═╝      ╚═════╝   ╚════╝     ╚══╝      ╚═════╝  ╚═╝   ╚═╝
 *
 * ---  CSS : Feuilles de style en cascade | Jean-Bernard MARTINEZ & Ayoub BENDIB - ProspectIA.eu © 2025 - SentientTech.com
 * --- Fichier CSS : media_query.css | Gestion des Media Query pour le Responsive Web Design (RWD)
 * 							
*/

/* ***************************************************************************************************
		5 - MEDIA QUERY : GESTION TAILLE ECRAN => Responsive Web Design (RWD)
****************************************************************************************************** */

/* BREAKPOINT XXL LARGE SCREEN : - 1400px */
@media (max-width: 1400px) {

	/* --- HEADER : ENTÊTE DE LA PAGE --- */
	header {

	}

	/* --- NAV : MENU --- */
	nav {

	}

	/* --- MAIN : CONTENUE DE LA PAGE --- */
	main {
		margin-top: 60px;
		min-height: calc(100vh - 40vh); /*-- Hauteur minimale pour le contenu principal --*/
	}

	/* --- FOOTER : PIED DE PAGE --- */
	footer {

	}
	
}

/* BREAKPOINT XL LARGE SCREEN : - 1200px */
@media (max-width: 1200px) {

	/* --- HEADER : ENTÊTE DE LA PAGE --- */
	header {

	}

	/* --- NAV : MENU --- */
	nav {

	}

	/* --- MAIN : CONTENUE DE LA PAGE --- */
	main {
		padding-bottom: 2rem;
	}

	#frametrade-map, #framejob-map {
		margin-top: 0;
		width: calc(100% - 2rem);
		height: calc(85vh - 4rem);
	}

	.navbar-nav {
		margin-right: 2rem;
	}

	#checkLive {
		top: 1.80rem;
		right: 6rem;
	}

	#soundLive {
		top: 1.60rem;
		right: 9.5rem;
	}

	#microLive {
	top: 1.60rem;
	right: 11rem;
	}

	#info {
		top: 1.60rem;
		right: 12.5rem;
	}

	/* --- FOOTER : PIED DE PAGE --- */
	footer {

	}

	.copy {
		margin: 0;
	}	
	
}

/* BREAKPOINT MEDIUM SIZE SCREEN : - 992px */
@media (max-width: 992px) {
	
	/* --- HEADER : ENTÊTE DE LA PAGE --- */
	header {

	}

	/* --- NAV : MENU --- */

	.navbar-toggler {
		padding: 0.1rem 0.2rem;
	}

	.navbar-brand {
		transform: translateX(-0.5rem);
	}

	.nav_right_icons {
		position: absolute;
		top: 1.5rem;
		right: 0.5rem;
	}

	.navbar-nav {
		margin-right: 0;
	}

	/* --- MAIN : CONTENUE DE LA PAGE --- */
	.dsp-phone {
		display: inline;
	}

	.dsp-desktop {
		display: none;
	}

	main {
		margin-top: 60px;
		min-height: calc(100vh - 40vh); /*-- Hauteur minimale pour le contenu principal --*/
		padding-bottom: 0;
	}

	.main_content_survey {
		margin: 1rem auto !important;
		width: calc(100% - 2rem) !important;
	}

	.text-info {
		width: 80%;
	}
	
	#trade, #job {
		margin-top: 0;
	}

	.aside-left {
		position:relative;
		display: block;
		top: 0;
		left: 0;
		width: calc(100% - 2rem);
		min-height: 8rem;
		margin: 0.5rem 0;
		padding: 0.5rem 0 2rem;
	}

	.aside-left::before {
		display: none;
	}

	.aside-left h3, .aside-right h3 {
		transform: translateY(-0.5rem);
	}

	.aside-right {
		position:relative;
		display: block;
		top: 0;
		left: 0;
		width: calc(100% - 2rem);
		min-height: 8rem;
		margin: 0.5rem 0;
		padding: 0.5rem 0 2rem;
	}

	.aside-right::before {
		display: none;
	}
	
	.container-bot {
		position: relative;
		margin-top: 2.5rem;
	}

	#img-bot {
		width: 300px;
		height: 300px;
	}

	.container-chat {
		position:relative;
		display: block;
		margin-top: 1rem;
		width: calc(100% - 2rem);
		text-align: center;
	}

	/** Form chat user */
	#user-text-bubble, #bot-text-bubble {
		position: relative;
		width: 100%;
		height: auto;
		overflow:auto;
	}

	.user-speech {
		position: relative;
		display: block;
		transform: translateY(-3rem);
		left: 0;
		padding: 1rem;
		width: 100%;
	}

	.bubble-user::after, .bubble-bot::after {
		top: 0;
		width: 80%;
	}

	.bubble-user::after {
		transform: translateX(1.6rem);
	}

	.bubble-bot::after {
		transform: translateX(-1.6rem);
	}

	.bubble-user .curve {
		transform: translate(1rem,-1rem);
	}

	.bubble-bot .curve {
		transform: translate(-1rem,-1rem) rotateY(180deg);
	}

	#frametrade-map, #framejob-map {
		margin-top: 5rem;
		width: 100%;
		height: calc(81vh - 5.6rem);
	}

	#checkLive {
		top: 4.5rem;
		right: 3.75rem;
	}

	#soundLive {
		top: 4.25rem;
		right: 2rem;
	}

	#microLive {
		top: 4.25rem;
		right: 0.50rem;
	}

	#info {
		position: absolute;
		z-index: 1100;
		top: 4.25rem;
		right: 7.25rem;
		font-size: 18px;
		color: var(--color-text);
	}

	/**
	* Prompt wing
	**/

	#prompt_wing {
		top: 0;
		width: 100vw;
		height: 100vh;
	}

	#prompt_wing .wing_open {
		position: absolute;
		right: 0;
		transform: translateX(2.25rem);
	}

	#toggle_wing ~ #prompt_wing {
		transform: translateX(-100vw);
	}

	#toggle_wing:checked ~ #prompt_wing {
		transform: translateX(0);
	}

	#toggle_wing ~ #prompt_wing .wing_open {
		display:block;
	}

	#toggle_wing:checked ~ .wing_open {
		display: none;
	}	

	#prompt_results ul, #prompt_results ul {
		max-height: calc(100vh - 10rem);
		overflow-y: auto;
	}

	/**
	* HISTORY
	**/

	#history, #listing_admin, #prompt_listing {
		min-height: calc(100vh - 30vh);
		padding: 0;
	}

	#history details .history_prospect {
		display: block;
		padding: 0;
		cursor: pointer;
	}

	/**
	* STAT
	**/

	#stat .charts {
		margin-top: 0.5rem;
	}
	#stat .charts canvas {
		margin-bottom: 1rem;
	}

	/**
	* ADMIN LISTING
	**/

	.phone {
		display: none;
	}

	.desktop {
		display: inline;
	}

	/**
	* PROMPT WING
	**/

	#prompt_save_form {
		margin-top: 7rem;
		width: calc(100% - 2rem);
	}l

	#prompt_save_form .radio_group fieldset legend {

		width: 80% !important;
		padding: 0 0.25rem;
	}

	#prompt_save_form .radio_group {
		margin: 1rem 0;
	}

	#prompt_save_form .radio_group fieldset {
		padding: 0 5px;
		min-height: 15vh;
	}

	#prompt_save_form input[type="radio"]
	{
		width: 1.5rem;
	}

	/**
	* LEVEL USER SECTION
	**/

	#user-level-section {
		width: calc(100% - 4rem) !important;
	}

	/* --- FOOTER : PIED DE PAGE --- */
	
	.copy {
		margin: 20px 0;
	}	
	
}

/* BREAKTHROUGH POINT INTERMEDIATE SIZE SCREEN : - 768px */
@media (max-width: 768px) {

	/* --- HEADER : ENTÊTE DE LA PAGE --- */
	header {

	}

	/* --- NAV : MENU --- */
	nav {

	}

	/* --- MAIN : CONTENUE DE LA PAGE --- */
	main {

	}

	/* --- FOOTER : PIED DE PAGE --- */
	footer {

	}	
	
}

/* BREAKPOINT SMALL SCREEN SIZE : - 576px */
@media (max-width: 576px) {
	
	/* --- HEADER : ENTÊTE DE LA PAGE --- */
	header {

	}

	/* --- NAV : MENU --- */
	nav {

	}

	/* --- MAIN : CONTENUE DE LA PAGE --- */
	main {

	}

	/* --- FOOTER : PIED DE PAGE --- */
	footer {

	}	
	
}