@media print {
		@page {
			size: A4 portrait;
			margin: 0;
		}

		* {
			-webkit-print-color-adjust: exact;
			print-color-adjust: exact;
		}

		.fiche-actions, .header, .barre, footer {display: none !important;}

		html, body{background: #fff !important;}
		
		.main {
			background: #fff !important;
			height: 297mm !important;
			min-height: 0 !important;
			overflow: hidden !important;
			display: flex !important;
			justify-content: center !important;
			align-items: center !important;
		}

		.main:has(.main-box.grise) {background: var(--bg-grise) !important;}

		.main:has(.main-box.noire) {background: var(--bg-noire) !important;}
		
		.main-box.grise {background: var(--bg-grise) !important;}

		.main-box.noire {background: var(--bg-noire) !important;}
			
		.fiche {
			width: 1300px !important;
			/*height: 1915px !important;*/
			grid-auto-rows: 79px !important;
			gap: var(--grille-gap) !important;
			zoom: 0.586 !important;
		}

		.main-box {
			width: 210mm !important;
			height: 297mm !important;
			padding: 0 !important;
			border: none !important;
			overflow: visible !important;
			background: #fff !important;
		}
	}
	
	
	/* ================================
		STRUCTURE HTML GENERALE
	================================= */
	
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	:root{
		--bg-header:		#111111;
		--bg:				#0d0d0d;
		--border:			#262626;
		--text:				#f1f1f1;
		--logo:				#3b82f6;
		--bg-blanche:		#ffffff;
		--col-blanche:		#111111;
		--bg-grise:			#3c3c3c;
		--col-grise:		#777777;
		--bg-noire:			#000000;
		--col-noire:		#efefef;
		--bg-cellule:		#8c88881f;
		--bg-cellule-txt:	#8c8888a3;
		--grille-gap:		20px;
	}	

	html, body{
		height: 100%;
		font-family: 'Inter',sans-serif;
		font-size: 14px;
		background: var(--bg);
		color: var(--text);
	}

	.header{
		height: 90px;
		border-bottom: 1px solid var(--border);
		padding: 15px 25px 0;
		background: var(--bg-header);
	}

	.logo{
		font-size: 32px;
		font-weight: 700;
		color: var(--logo);
		margin-left: 20px;
		display: flex;
		align-items: center;
	}
	
	.logo img{
		width: 70px;
		height: 60px;
		margin-right: 50px;
	}
	
	.main{
		min-height: 0;
		padding: 15px;
		padding-bottom: 0;
		overflow: auto;
		background: var(--bg);
	}
	
	
	/* ================================
		VUE DE LA PAGE A4
	================================= */

	.main-box{
		padding: 16px;
		margin: auto;
		margin-bottom: 20px;
		width: 1354px;
		/*height: 1915px;*/
	}
	
	.main-box.blanche{
		background: var(--bg-blanche);
		color: var(--col-blanche);
	}
	
	.main-box.grise{
		background: var(--bg-grise);
		color:  var(--col-grise);
	}
	
	.main-box.noire{
		background: var(--bg-noire);
		color:  var(--col-noire);
	}
	
	footer {
		text-align: center;
		height: 50px;
		align-content: space-around;
		border-top: 1px solid var(--border);
	}


	/* =================================
		GRILLE DE CONCEPTION
	================================= */

	.fiche {
		position: relative;
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-auto-rows: 80px;
		gap: var(--grille-gap);
		width: 1320px;
		height: 1915px;
		border-radius: 16px;
	}
	
	.fiche span {
		margin-top: 10px;
		color: var(--bg-cellule-txt);
	}

	
	/* =================================
		ACTIONS DE LA FICHE
	================================= */

	.fiche-actions{
		width: 1354px;
		margin: 0 auto 15px;
		display: flex;
		align-items: center;
	}

	.fiche-actions button, .fiche-actions a{
		padding: 6px 8px;
		width: 80px;
		border: 1px solid var(--border);
		border-radius: 4px;
		background: #222;
		color: #ddd;
		cursor: pointer;
		text-decoration: none;
	}
	
	.fiche-actions button#export-pdf,
	.fiche-actions .lien{
		width: 180px;
		margin-left: 25px;
		text-align: center;
	}

	.fiche-actions button:hover, .fiche-actions a:hover{background: #333;}

	.fiche-actions span{margin-right: 6px;}

	.fiche-couleurs{
		display: flex;
		align-items: center;
		gap: 5px;
	}