@media only screen and (min-width: 1100px) {
	/* ajoute un background au body pour le style pc */
	body {
		text-align: center;
		background-image: url("/resources/images/laptop_background.jpg");
		background-size: 100%;
		background-repeat: repeat-y;
	}
	body.connected {
		background-image: url("/resources/images/laptop_main_background.jpg");
	}
	body
	/* style pc pour les pages de connexions */
	.login,
	.forgot-pwd,
	.reset-pwd {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 420px;
		padding: 40px 40px 100px 40px;
		text-align: left;
		box-shadow: 0 0 6.2px 0 rgba(0, 0, 0, 0.25);
		background-color: #FFF;
		border-radius: 50px;
		transform: translate(-50%, -50%);
	}
	.login .logo-container #logo,
	.forgot-pwd .logo-container #logo,
	.reset-pwd .logo-container #logo{
		width: calc(100% - 150px);
	}
	.login #connexion_txt,
	.forgot-pwd #connexion_txt,
	.reset-pwd #connexion_txt{
		font-size: 2.0rem;
		margin: 10% 0 5% 0;
	}
	.login .input-container input,
	.forgot-pwd .input-container input,
	.reset-pwd .input-container input{
		border-radius: 50px;
	}
	.login .button,
	.forgot-pwd .button,
	.reset-pwd .button {
		margin: 10% auto 0;
	}
	.login .link,
	.forgot-pwd .link,
	.reset-pwd .link{
		margin: 10% 0 0 0;
		font-size: 1.0rem;
	}
	.login .notice.red,
	.forgot-pwd .notice.red,
	.reset-pwd .notice.red {
		
	}
	
	/* style pc du header */
	.header{
		display: grid;
		grid-template-columns: 0.5fr 900px 0.5fr;
		width: 100%;
		height: 100px;
		padding: 0;
		box-shadow: 0 4px 15.3px 0 rgba(0, 0, 0, 0.15);
		align-items: center;
		justify-items: center;
	}
	.header.mini {
		padding: 0 15px;
		/* height: 80px; */
	}
	.header.mini .logo-container #logo {
		width: 150px;
		transform: translateX(-50%);
	}
	.header .logo-container{
		margin: 10px 0 0;
	}
	.header.mini .logo-container {
		position: absolute;
		width: 150px;
		left: calc(50% - 75px);
		transform: translateX(50%);
		transition: all 0.3s;
	}
	.header .logout-button.link {
		top: 50%;
		right: 70px;
	}
	.header .logout-button.link svg {
		transform: scale(1.5);
	}
	.header .buttons-container {
		display: grid;
		grid-column-gap: 10px;
		align-items: center;
		justify-items: center;
		margin: 0;
	}
	.header .select-button {
		position: relative;
		width: 250px;
		height: 60px;
		padding: 0;
	}
	.header .select-button .icon {
		display: inline-block;
		position: absolute;
		left: 25px;
		top: 50%;
		width: 30px;
		transform: translateY(-50%);
	}
	.header .select-button span {
		display: inline-block;
		position: absolute;
		top: 50%;
		left: 140px;
		padding: 0;
		margin: 0;
		font-size: 1.2rem;
		font-weight: 500;
		transform: translate(-50%, -50%);
	}
	.header .logout-button {
		position: absolute;
		top: 20px;
		right: 1%;
	}

	/* style pc des txt-box */
	
	.txt-box {
		width: 100%;
	}
	.txt-box.regular{
		width: calc(100% - 40px);
	}
	.txt-box.tips {
		width: calc(100% - 60px);
		line-height: 1.5em;
	}
	.ai-modules.page .modules-content .module-content .step .page .padding-10-80 {
		padding: 30px 10px 20px 10px;
	}
	.txt-box.svg-left{
		width: calc(100% - 60px);
	}
	.txt-box.lvl .content {
		width: calc(100% - 10px);
	}
	.txt-box.title-svg-button {
		width: calc(100% - 60px);
	}
	
	.button {
		display: block;
		margin: 20px auto 20px;
	}
	
	.txt-box.ai-result {
		width: calc(100% - 42px);
	}
	.txt-box.ai-result-txt {
		width: calc(100% - 22px);
	}
	/* fonction d'animation pour les popup */
	
	@keyframes gelatine_popup {
		from, to { transform: translate(-50%, -50%) scale(1, 1); }
		25% { transform: translate(-50%, -50%) scale(0.95, 1.05); }
		50% { transform: translate(-50%, -50%) scale(1.05, 0.95); }
		75% { transform: translate(-50%, -50%) scale(0.925, 1.25); }
	}
	@keyframes appearFromBack {
		from { 
			opacity: 0;
			transform: translate(-50%, -50%) scale(0.5, 0.5)
		}
		to { 
			opacity: 1;
			transform: translate(-50%, -50%) scale(1, 1)
		}
	}
	@keyframes disappearToBack {
		from { 
			opacity: 1;
			transform: translate(-50%, -50%) scale(1, 1)
		}
		to { 
			opacity: 0;
			transform: translate(-50%, -50%) scale(0.5, 0.5)
		}
	}

	/* style pc des popup */
	
	.popup {
		position: fixed;
		z-index: 500;
		width: 100%;
		height: 100%;
	}
	.popup .background {
		opacity: 0.7;
	}
	.popup.history .background {
		opacity: 0.9;
	}
	.popup .content {
		position: fixed;
		top: 50%;
		left: 50%;
		width: calc(900px - 90px);
		padding: 58px 0 101px 0;
		height: auto;
		border-radius: 50px;
		transform: translate(-50%, -50%);
		animation: appearFromBack 0.5s;
	}
	.popup .content .body {
		display: inline-block;
		height: auto;
		text-align: center;
	}
	.popup.closing .content {
		opacity: 0;
		animation: disappearToBack 0.5s;
	}
	.popup.waiting {
		
	}
	.popup.waiting .content {
		width: 600px;
		height: 220px;
		padding: 20px 0 90px;
	}
	.popup.cv {
		margin: 0;
		height: 100vh;
	}
	.popup.cv .content {
		margin: 0;
		height: 80%;
	}
	.popup.alert .content {
		padding: 0;
		width: 50%;
		height: 20%;
	}
	.popup.confirm .content{
		height: 20%;
	}
	.popup.history .content{
		display: inline-block;
		padding-bottom: 58px;
	}
		
	/* style pc des bénéficiaires */
	
	.beneficiary.page {
		margin: 100px 0 0 0;
		padding: 100px 0 0 0;
	}
	
	/* style pc des pages contenu dans ai-modules */
	
	.page.laptop{
		display: inline-block;
		position: relative;
		width: 1100px;
		min-height: 100vh;
		padding: 0 0 4rem 0;
		box-shadow: 7px 7px 15.5px 22px rgba(0, 0, 0, 0.25);
		text-align: left;
		background-color: #FFF;
	}
	.ai-modules.page {
	}
	.ai-modules.page .modules-list.visible {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 40px 40px;
		margin: 150px 0 0 0;
		padding: 0 70px 0;
		background-color: #FFF;
	}
	.ai-modules.page .modules-list .module-item {
		height: 100px;
		margin: 0 0 0 0;
	}
	.ai-modules.page .modules-list .module-item:nth-child(odd) {
		grid-column: 1 / 2;
	}
	.ai-modules.page .modules-list .module-item:nth-child(even) {
		grid-column: 2 / 2;
	}
	.ai-modules.page .modules-list .module-item h2 {
		width: calc(70% - 10px);
		padding: 20px 0 0 20px;
		font-size: 1.2rem;
		font-weight: 500;
	}    
	.ai-modules.page .modules-list .module-item h3 {
		width: calc(70% - 10px);
		padding-left: 20px;
		font-size: 1.1rem;
	}
	.ai-modules.page .modules-list .module-item svg {
		width: 40px;
		height: auto;
	}
	.ai-modules.page .modules-content .module-content {
	}
	.ai-modules.page .modules-content .module-content .step.visible {
		width: calc(1100px - 360px);
		padding: 50px 180px 50px 180px;
		background-color: #FFF;
	}
	.ai-modules.page .modules-content .module-content .step .page-top {
		position: relative;
		height: 450px;
	}
	.ai-modules.page .modules-content .module-content .step .page-top .module-img{
		height: 450px;
	}
	.ai-modules.page .modules-content .module-content .step .page {
		display: inline-block;
		background-color: #FFF;
		width: 100%;
		margin: 30px 0 0 0;
		padding: 0 0 0 0;
	}
	.ai-modules.page .modules-content .module-content .step .top-page {
		width: 100%;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
	}

	/*style pc de l'historique */

	.history {
		margin: 100px 0 0 0;
	}
	.history .link.visible {
		display: inline-block;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	.history .conversations-list{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px 40px;
		text-align: center;
	}
	.history .conversations-list .notice{
		position: absolute;
		left: 50%;
		margin: 0 0 20px 0;
		transform: translateX(-50%);
	}
	.history .conversations-list .analyze-container {
		margin: 0;
	}
	.history .conversations-list .analyze-container h2 {
		font-size: 1.0rem;
		padding: 0 100px 0 0;
	}
	.history .conversations-list .analyze-container p {
		font-size: 0.9rem;
		line-height: 1.5em;
	}
	.history .conversations-list .analyze-container svg.glass{
		top: 50%;
		right: 80px;
		width: 25px;
		height: 25px;
	}
	.history .conversations-list .analyze-container svg.transfer{
		top: 50%;
		right: 30px;
		width: 22px;
		height: 22px;
	}
}