@import url('https://cdn.imprimetcom.fr/fonts/imprimetcom.css');

/*
	Eléments communs font + backoffice
*/
:root {
	/* couleurs */
	--color-main-50: #f9fbfc;
	--color-main-100: #f2f6f7;
	--color-main-200: #d9f1fa;
	--color-main-300: #a9cbda;
	--color-main-500: #4cbbe7;
	--color-main-700: #3c93b5;
	--color-main-800: #3788a8;
	--color-main-900: #266e8c;

	--color-accent-50: #fff1e2;
	--color-accent-100: #ffe1ba;
	--color-accent-200: #ffce8f;
	--color-accent-300: #ffba62;
	--color-accent-500: #ff9c00;
	--color-accent-700: #ee960a;
	--color-accent-800: #db9108;

	--color-alert-success: #5ec52c;
	--color-alert-warning: #ff8a00;
	--color-alert-danger: #b00020;

	--color-notification-success: #71ca4d;
	--color-notification-warning: #ff8a00;
	--color-notification-danger: #b00020;

	
	/* polices */
	--font-oswald: 'Oswald', sans-serif;
	--font-roboto: 'Roboto', sans-serif;
	--font-fontawesome: "Font Awesome 5 Free";

	/* opacités */
	--opacity-text-high: .87;
	--opacity-text-medium: .60;
	--opacity-text-disabled: .38;

	/* breakpoints */
	--breakpoint-xl: 1449px;
	--breakpoint-lg: 1199px;
	--breakpoint-md: 991px;
	--breakpoint-sm: 767px;
	--breakpoint-xs: 575px;
}


/*----------  Responsive  ----------*/

/* XL */
@media (max-width: 1449px) { 

}	
/* LG */
@media (max-width: 1199px) { 

}	
/* MD */
@media (max-width: 991px) {

}
/* SM */
@media (max-width: 767px) {

}
/* XS */
@media (max-width: 575px) {

}


/*=============================================
=            Général            =
=============================================*/

body {
	font-family: var(--font-roboto);
	font-size: 15px;
	color: rgba(0,0,0,var(--opacity-text-medium));
}


.show {
	display: block !important;
}
.hidden {
	display: none;
}




/*=============================================
=            Boutons            =
=============================================*/


/*----------  Icônes boutons  ----------*/
.iconBtn i {
	border-radius: 50%;
	line-height: 2em;
	width: 2em;
	height: 2em;
	text-align: center;
	cursor: pointer;
}
.iconBtn i,
.iconBtn i a {
	color: rgba(0,0,0,var(--opacity-text-medium));
}
.iconBtn i:hover {
	background: rgba(0,0,0,.12);

	-webkit-transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	-ms-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
}
.iconBtn i:active {
	background: rgba(0,0,0,.2);
	transform: scale(.96);
}


.iconBtn-outline i {
	border : 1px solid rgba(0,0,0,.12);
}
.iconBtn-outline i:hover {
	border-color: rgba(0,0,0,0);
}

.iconBtn.disabled {
	opacity: var(--opacity-text-disabled);
}
.iconBtn.disabled i:hover {
	background: none;
	cursor: auto;
}
.iconBtn.iconBtn-noClick i:hover {
	background: none;
}


/*----------  Boutons normaux  ----------*/
.btn {
	display: inline-block;
	background: mediumaquamarine;
	padding: .5em 1em;
	border-radius: 2px;
	text-transform: uppercase;
	font-weight: 500;
	font-size: .9em;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	font-family: var(--font-roboto);
	border: none;

	-webkit-transition: all .05s ease-in-out;
	-moz-transition: all .05s ease-in-out;
	-ms-transition: all .05s ease-in-out;
	-o-transition: all .05s ease-in-out;
	transition: all .05s ease-in-out;
	
}
.btn:hover {
	-webkit-box-shadow: 0 2px 10px 0 rgba(0,0,0,.15);
	box-shadow: 0 2px 10px 0 rgba(0,0,0,.15);
}
.btn:active {
	-moz-transform: translateY(1px);
	-webkit-transform: translateY(1px);
	-o-transform: translateY(1px);
	-ms-transform: translateY(1px);
	transform: translateY(1px);
	border-radius: 5px;
}
.btn.disabled:active {
	-moz-transform: none;
	-webkit-transform: none;
	-o-transform: none;
	-ms-transform: none;
	transform: none;
}

.btn i {
	margin-left: .3em;
}
.btn.disabled:hover {
	background: none;
	cursor: auto;
}

.btn-text {
	background: none;
	color: var(--color-main-700);
}
.btn-text:hover {
	background: var(--color-main-100);
	box-shadow: none;
	-webkit-box-shadow: none;
}
.btn-text:active {
	background: var(--color-main-200);
}
.btn-text.disabled {
	color: rgba(0,0,0,var(--opacity-text-disabled));
}

.btn-main {
	background: var(--color-main-500);
	color: white;
}
.btn-main:hover {
	background: var(--color-main-700);
	color: white;
}
.btn-main:active {
	background: var(--color-main-800);
}



.btn-outline {
	border: 1px solid var(--color-main-700);
	color: var(--color-main-700);
	background: none;
}
.btn-outline:hover {
	background: var(--color-main-100);
	color: var(--color-main-700);
	-webkit-box-shadow: 0 2px 10px 0 rgba(0,0,0,.05);
	box-shadow: 0 2px 10px 0 rgba(0,0,0,.05);
}
.btn-outline:active {
	background: var(--color-main-200);
}



.btn-accent {
	background: var(--color-accent-500);
	color: white;
}
.btn-accent:hover {
	background: var(--color-accent-700);
	color: white;
}

.actions .btn {
	margin-right: 1em;
	margin-bottom: 1em;
}
.actions .btn:last-of-type {
	margin-right: 0;
}	





/*=============================================
=            Tables            =
=============================================*/

table tbody tr[data-href] {
	cursor: pointer;
}

table.table {
	border-collapse: collapse;
	width: 100%;
	text-align: left;
	color: rgba(0,0,0,var(--opacity-text-high))
}
table.table tr {
	-webkit-transition: all .05s ease-in-out;
	-moz-transition: all .05s ease-in-out;
	-ms-transition: all .05s ease-in-out;
	-o-transition: all .05s ease-in-out;
	transition: all .05s ease-in-out;
	
}
table.table thead tr {
	border-top: 1px solid rgba(0,0,0,.17);
	border-bottom: 1px solid rgba(0,0,0,.17);
}
table.table tfoot tr:first-of-type td,
table.table tfoot tr:first-of-type th {
	border-top: 1px solid rgba(0,0,0,.17);
}
table.table tfoot tr:last-of-type td,
table.table tfoot tr:last-of-type th {
	border-bottom: 1px solid rgba(0,0,0,.17);
}
table.table tfoot td,
table.table tfoot th {
	border-top: 1px solid rgba(0,0,0,.07);
	border-bottom: 1px solid rgba(0,0,0,.07);
}
table.table tfoot th.disabled,
table.table tfoot td.disabled {
	border-top: none;
	border-bottom: none !important;
}
table.table th {
	font-weight: 500;
	padding: .8em 1em ;
}
table.table th a {
	color: rgba(0,0,0,var(--opacity-text-high));
	text-decoration: none;
}

table tbody tr td[data-label]::before {
	content: attr(data-label);
	display: none;
	font-size: .6rem;
	color: rgba(0,0,0,.5);
	margin-bottom: 0.3em;
	font-weight: 400;
}

table.table tbody td,
table.table tfoot td {
	padding: 1em;
}
table.table tbody tr {
	border-top: 1px solid rgba(0,0,0,.07);
	border-bottom: 1px solid rgba(0,0,0,.07);
}
table.table tbody tr:hover {
	/* background: var(--color-main-50); */
	background: rgba(0,0,0,.03);
}
table.table tbody tr.selected,
table.table tbody tr.selected:hover {
	background: var(--color-main-200);
}

table.table th.disabled,
table.table td.disabled {
	background: rgba(0,0,0,.02);
}

table.table .number {
	text-align: right;
}



table.table td.detailMenu {
	color: rgba(0,0,0,var(--opacity-text-medium));
	width: 3em;
}

table.table td.actions ul li {
	display: inline-block;
}
table.table td.actions ul li i {
	font-size: 1.3em;
}


table.table tr.noResults td {
	text-align: center;
	color: rgba(0,0,0,var(--opacity-text-medium));
}
table.table tr.noResults:hover {
	background: none;
}





table.table-invisible {
	border-collapse: collapse;
	width: 100%;
	text-align: left;
	color: rgba(0,0,0,var(--opacity-text-high));	
}
table.table-invisible th,
table.table-invisible td {
	padding-bottom: .5em;
	vertical-align: top;
}


table.table-small th {
	padding: .3em;
}
table.table-small tbody td,
table.table-small tfoot td {
	padding: .3em;
}




.globalTableActions {
	position: relative;
	margin-top: 0.5em;
}
.globalTableActions ul {
	margin-left: 6em;
}
.globalTableActions ul li {
	display: inline-block;
	margin-right: .5em;
	margin-top: .4em;
}

.globalTableActions ul::before {
	content:'\f04b';
	font-family: var(--font-fontawesome);
	font-size: .5em;
	font-weight: 900;
	color: #d1d1d1;
	display: block;
	width: 3rem;
	height: 1.4rem;
	position: absolute;
	left: 2rem;
	border-bottom: dotted 2px #d1d1d1;
	border-left: dotted 2px #d1d1d1;
	line-height: 2.7rem;
	text-align: right;
}



label.checkbox-container {
	display: flex;
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding: .62em .75em;
	/* width: 2.5em; */
	/* height: 2.5em; */
	/* line-height: 1em; */
	/* border-radius: 50%; */
}
label.checkbox-container::before {
	content: '';
	padding: .62em .75em;
	width: 2.5em;
	height: 2.5em;
	top: 0;
	left: 0;
	line-height: 1em;
	border-radius: 50%;
	display: block;
	position: absolute;
}
label.checkbox-container:hover::before {
	background: rgba(0,0,0,.1);
	
	-webkit-transition: all .1s ease-in;
	-moz-transition: all .1s ease-in;
	-ms-transition: all .1s ease-in;
	-o-transition: all .1s ease-in;
	transition: all .1s ease-in;
}
label.checkbox-container input[type=checkbox] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}
.form-checkbox {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-top: 0.1em;
	border: 2px solid #666;
	border-radius: 2px;
	position: relative;
}
.form-checkbox:before {
	content:'\f00c';
	font-family: var(--font-fontawesome);
	font-weight: 900;
	color: white;
	position: absolute;
	top: -.09em;
	left: -.05em;
	font-size: .8em;
	line-height: 1em;
	opacity: 0;

	-moz-transform: scale(0);
	-webkit-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}

.checkbox-container input:checked ~ .form-checkbox {
	background: #666;
}
.checkbox-container input:checked ~ .form-checkbox:before {
	opacity: 1;
	
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);

	-webkit-transition: all .1s ease-in;
	-moz-transition: all .1s ease-in;
	-ms-transition: all .1s ease-in;
	-o-transition: all .1s ease-in;
	transition: all .1s ease-in;
}

label.checkbox-container .label {
	flex: 1;
	margin-left: 1em;
}

/* XL modifié */
@media (max-width: 1449px) { 
	table.table thead th,
	table.table tfoot th,
	table.table tbody td,
	table.table tfoot td {
		padding: .75em;
	}
}
/* LG */
@media (max-width: 1199px) { 
	table.table {
		font-size: .963em;
	}
	table.table thead th,
	table.table tfoot th,
	table.table tbody td,
	table.table tfoot td {
		padding: .5em;
	}
}



/*=============================================
=            Menus contextuels            =
=============================================*/
.contextualMenu-container {
	position: relative;
}
.contextualMenu {
	display: none;
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 10;
	background:white;
	padding: 1em;
	border-radius: 5px;
	border: 1px solid rgba(0,0,0,.04);
	-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
	box-shadow: 0 5px 5px 0 rgba(0,0,0,.05);
	font-size: 0.85em;
}
.contextualMenu li {
	display: block;
	white-space: nowrap;
}
.contextualMenu li a {
	display: block;
	color: rgba(0,0,0,var(--opacity-text-medium));
	text-decoration: none;
	padding: 0.7em;
	margin-bottom: 0.5em;

	-webkit-transition: all .10s ease-in-out;
	-moz-transition: all .10s ease-in-out;
	-ms-transition: all .10s ease-in-out;
	-o-transition: all .10s ease-in-out;
	transition: all .10s ease-in-out;
}
.contextualMenu li a:hover {
	color: rgba(0,0,0,var(--opacity-text-high));
}
.contextualMenu li:last-of-type a {
	margin-bottom: 0;
}

a.contextualMenu-btn {
	text-decoration: underline;
	cursor: pointer;
	display: inline-block;
}




/*=============================================
=            Progress bar            =
=============================================*/
.progressbar {
	height: 3px;
	border-radius: 2px;
	background: rgba(0,0,0,.11);
	overflow: hidden;
	position: relative;
}
.progressbar .progress {
	/* content: ''; */
	/* background: var(--color-alert-warning); */
	position: absolute;
	top: 0;
	left: 0;
	height: 3px;
	width: 50%;
	overflow: hidden;

	animation: progressbar .5s ease-out 1;
	
}
.progressbar .progress .color {
	position: absolute;
	left: 0;
	top: 0;
	height: 300px;
	width: 100%;
	background: rgb(176,0,32);
	background: linear-gradient(180deg, rgba(176,0,32,1) 0%, rgba(255,138,0,1) 10%, rgba(255,138,0,1) 50%, rgba(208,209,22,1) 80%, rgba(52,180,2,1) 99%); 
}

@keyframes progressbar {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(0);
	}
}

/* XL modifié */
@media (max-width: 1449px) { 
	.progressBarContainer {
		font-size: .9em;
	}
}
/* LG */
@media (max-width: 1199px) { 
	.progressBarContainer {
		font-size: .8em;
	}
}	


/*=============================================
=            Formulaires            =
=============================================*/
/* hack pour supprimer la stylisation automatique de Chrome */
input[type="search"] {
	-webkit-appearance: textfield;
	outline: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.form .field {
	margin: 2em 0;
	position: relative;
}
.form fieldset {
	border: none;
	padding: 0;
	margin: 0;
}
.form .inline-group .field {
	margin: 0;
}
.form .field-text label,
.form .field-select label {
	font-size: 1em;
	position: absolute;
	pointer-events: none;
	color: rgba(0,0,0,var(--opacity-text-disabled));
	top: 4px;
	left: 0;
	z-index: 2;

	transition:0.2s ease all; 
	-moz-transition:0.2s ease all; 
	-webkit-transition:0.2s ease all;
}
.form .field-file label {
	display: block;
	margin-bottom: 0.5em;
}
.form .field-text label.active,
.form .field-select label,
.form .field-file label {
	font-size: .7em;
	top: -15px;
	color: var(--color-main-700);
}

.form .field-text .textareaLabel {
	position: relative;
	font-size: .9em;
	top: unset;
	color: rgba(0,0,0,var(--opacity-text-medium));
	margin-bottom: 0.5em;
	display: block;
}

.form input[type="text"]:required ~ label::after,
.form select:required ~ label::after,
.form textarea:required ~ label::after {
	content:" *";
}

.form label[data-required-customs-fields-group]::after {
	content: attr(data-required-customs-fields-group);
	font-size: .7em;
	padding-left: .25em;
	vertical-align: super;
}

.form .inline-group {
	display: flex;
	margin: 2em 0;
}
.form .inline-group .field {
	flex: 1;
	margin-right: 1em;
}
.form .inline-group .field:last-of-type {
	margin-right: 0;
}

.form .field-text input,
.form .field-text textarea,
.form .field-select select {
	font-family: var(--font-roboto);
	border: none;
	border-bottom: 1px solid rgba(0,0,0,.20);
	border-radius: 0;
	font-size: 1rem;
	padding: .2em 0;
	width: 100%;
	color: rgba(0,0,0,var(--opacity-text-high));
	display: block;

	transition:0.2s ease all; 
	-moz-transition:0.2s ease all; 
	-webkit-transition:0.2s ease all;
}
.form .field-text textarea {
	border: 1px solid rgba(0,0,0,.20);
	font-size: .9em;
	padding: .5em;
	resize: vertical;
}

.form .field-text input:focus,
.form .field-text textarea:focus {
	outline: none;
	border-bottom: 1px solid var(--color-main-500);
}
.form .field-text textarea:focus {
	border: 1px solid var(--color-main-500);
}

.form .field-select select {
	border: 1px solid rgba(0,0,0,.20);
	padding: .5em .2em;
}
.form .field-select select:focus {
	border: 1px solid var(--color-main-500);
}

.form .field-radio input:not(:checked) ~ div.group {
	display: none;
}


.form legend {
	font-weight: 500;
	text-transform: uppercase;
	padding: 2em 0 0;
}
.form .hint {
	font-size: .75em;
	margin-top: 0.5em;
}
.form .free {
	margin: 1em 0 2em;
}

.form .actions {
	margin-top: 2em;
}
/* XS */
@media (max-width: 575px) {
	.form .actions {
		margin-bottom: 2em;
	}
}

.form .globalRequired {
	font-size: .75em;
	text-align: right;
}

.editField.form .field-text {
	display: inline-block;
	max-width: 50%;
	margin: 0;
}
.editField.form input[type=text] {
	min-height: 2.1em;
	font-size: 1em;
}

.form .field-radio label {
	cursor: pointer;
}

.form .tooltip {
	font-size: .8em;
}
.form .tooltip i {
	margin-right: 0.5em;
}

/* LG */
@media (max-width: 1199px) { 
	.editField.form .field-text {
		display: inline-block;
		max-width: 75%;
	}
}


/*=============================================
=            Erreurs / confirmations            =
=============================================*/
#main .mainMessages {
	color: white;
	padding: 1em;
	margin: 1em 1em 2em;
	border-radius: 3px;
}
#main .mainMessages a {
	color: white;
}
#main .mainMessages .btn {
	background: rgba(255,255,255,.2);
}
#main .mainMessages .btn:hover {
	background: rgba(255,255,255,.3);
}
#main .errors {
	background: var(--color-alert-danger);
}
#main .confirmations {
	background: var(--color-alert-success);
}




/*=============================================
=            Eléments divers            =
=============================================*/
span.lastname,
span.city,
span.countryName {
	text-transform: uppercase;
}




/*=============================================
=            Popup            =
=============================================*/
*[data-popupaction] {
	cursor: pointer;
}
.popup {
	/* display: none; */
	/* height: 100vh; */
	height: 0;
	width: 0;
	overflow: hidden;
}
.popup.show {
	height: 100vh;
	width: 100%;
	overflow: hidden;
}

.popup .container {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.popup-overlay {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	z-index: 4000;
	background-color: rgba(0, 0, 0, 0.75);
}
.popup .popup-content {
	
	background: white;
	-webkit-box-shadow: 0 5px 20px 0 rgba(0,0,0,.3);
	box-shadow: 0 5px 20px 0 rgba(0,0,0,.3);
	border-radius: 5px;
	padding: 2.5em 3em 2.5em 1em;
	position: relative;

	transform: translateY(-1em);

	opacity: 0;

	-webkit-transition: all 150ms ease-out;
	-moz-transition: all 150ms ease-out;
	-ms-transition: all 150ms ease-out;
	-o-transition: all 150ms ease-out;
	transition: all 150ms ease-out;

}
.popup.show .popup-content {
	-moz-transform: translateY(0px);
	-webkit-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
	opacity: 1;
	
}

.popup .popup-content .close {
	position: absolute;
	top: .5em;
	right: .5em;
	
}
.popup .popup-content .title {
	font-size: 1.2em;
	color: rgba(0,0,0,var(--opacity-text-high));
	margin-bottom: 0.5em;
}
.popup .actions {
	text-align: right;
	margin-top: 1em;
}

.popup .hide {
	display: none;
}

.popup .confirmationMessage {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em 0;
}
.popup .confirmationMessage i {
	font-size: 2em;
	color: var(--color-alert-success);
}
.popup .confirmationMessage .message {
	/* flex: 1; */
	margin-left: 1em;
}


/*=============================================
=            Envoi de fichier            =
=============================================*/

#popupLoading {
	text-align: center;
	margin: 2em 0 0;
}
#popupLoading .progressLegend {
	margin-bottom: 1em;
}
#popupLoading progress {
	width: 80%;
}
#popupLoading .progressPercentage {
	font-size: 2em;
	margin-top: .5em;
	font-weight: 500;
}
#popupLoading #uploadFileAbortBtn {
	margin-top: 1em;
}
.popup[data-popup=sendShippingLabel] .globalRequired {
	display: none;
}



/*=============================================
=            Spinner            =
=============================================*/
/* Spinner */
.spinner-container {
	position: relative;
	display: inline-block;
	width: 2em;
	height: 2em;
}
.spinner {
	/* display:none; */
	
	position: absolute;
	z-index: 500;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: show;
	border: calc(2em / 6) solid #f3f3f3;
	border-radius: 50%;
	border-top: calc(2em / 6) solid var(--color-main-500);
	width: 100%;
	height: 100%;
	-webkit-animation: spin-popup 2s linear infinite; /* Safari */
	animation: spin-popup 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin-popup {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin-popup {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}






/*----------  Debug Responsive  ----------*/
#debug-responsive  {
	position: fixed;
	bottom: 50px;
	left: 15px;
	color: #333;
	z-index: 2000;
	font-size: 33px;
}
#debug-responsive .container {
	width: 100px;
	height: 100px;
	background: #a2a2a2;
	text-align: center;
	border-radius: 100px;
	line-height: 2.9em;
	opacity: .3;
}
#grille.showGrid {
	display: block;
}

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
#debug-responsive .container .size::before {
	content: "XS";
}
@media (min-width: 576px) {
	#debug-responsive .container .size::before {
		content: "SM";
	}
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 768px) {
	#debug-responsive .container .size::before {
		content: "MD";
	}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 992px) { 
	#debug-responsive .container .size::before {
		content: "LG";
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	#debug-responsive .container .size::before {
		content: "XL";
	}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1440px) { 
	#debug-responsive .container .size::before {
		content: "XXL";
	}
}

#grille {
	position: fixed;
	top: 0;
	z-index: 6000;
	left: calc(var(--size-sidebar-width) + var(--size-gap-main));
	width: calc(100% - var(--size-sidebar-width) - var(--size-gap-main) * 2);
	display: none;
	cursor: pointer;
}
#grille .cols {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: var(--size-gap-main);
	padding: 0;
}
#grille .element {
	grid-column: auto / span 1;

	background: rgb(255,0,0,.5);
	height: 300px;
	text-align: center;
	font-size: 3em;
	font-weight: 700;
	color: rgba(255,255,255,.5);
}
#grille .element .content {
	background: rgb(255,255,255,.5);
	height: 300px;
}