/*-----------*
 | S - STYLE |
 *-----------*/
/*    0		contenu / aucune largeur prédéfinie */
/* 1..4		largeur propre au type de STL       */
/* 5..9		largeur unifiée                     */
/*    x		largeur page                        */
/*============*
 | 01 - BASE  |
 *============*/
:is(
	.stl-1c0, .stl-fl0, .stl-lf0, .stl-pg0, .stl-2c0, .stl-gp0, .stl-3c0,
	.stl-1c1, .stl-fl1, .stl-lf1, .stl-pg1, .stl-2c1, .stl-gp1, .stl-3c1,
	.stl-1c2, .stl-fl2, .stl-lf2, .stl-pg2, .stl-2c2, .stl-gp2, .stl-3c2,
	.stl-1c3, .stl-fl3, .stl-lf3, .stl-pg3, .stl-2c3, .stl-gp3, .stl-3c3,
	.stl-1c4, .stl-fl4, .stl-lf4, .stl-pg4, .stl-2c4, .stl-gp4, .stl-3c4,
	.stl-1c5, .stl-fl5, .stl-lf5, .stl-pg5, .stl-2c5, .stl-gp5, .stl-3c5,
	.stl-1c6, .stl-fl6, .stl-lf6, .stl-pg6, .stl-2c6, .stl-gp6, .stl-3c6,
	.stl-1c7, .stl-fl7, .stl-lf7, .stl-pg7, .stl-2c7, .stl-gp7, .stl-3c7,
	.stl-1c8, .stl-fl8, .stl-lf8, .stl-pg8, .stl-2c8, .stl-gp8, .stl-3c8,
	.stl-1c9, .stl-fl9, .stl-lf9, .stl-pg9, .stl-2c9, .stl-gp9, .stl-3c9,
	.stl-1cx, .stl-flx, .stl-lfx, .stl-pgx, .stl-2cx, .stl-gpx, .stl-3cx
){
	width: calc(100% - (var(--stl-mrg) * 2));
	margin: var(--stl-mrg) auto;
	padding: var(--stl-pdg);

	background-color: var(--fond-transparent);
	border-radius: var(--stl-rds);
	box-shadow: 0 2px 8px var(--ombre);
}

:is(
	.stl-1c0, .stl-fl0, .stl-lf0, .stl-pg0, .stl-2c0, .stl-gp0, .stl-3c0
){
	width: fit-content;
}



/* Mobile portrait */
@media(max-width: 576px){
	:is(
		.stl-1c0, .stl-1c1, .stl-1c2, .stl-1c3, .stl-1c4, .stl-1c5, .stl-1c6, .stl-1c7, .stl-1c8, .stl-1c9, .stl-1cx,
		.stl-2c0, .stl-2c1, .stl-2c2, .stl-2c3, .stl-2c4, .stl-2c5, .stl-2c6, .stl-2c7, .stl-2c8, .stl-2c9, .stl-2cx,
		.stl-fl0, .stl-fl1, .stl-fl2, .stl-fl3, .stl-fl4, .stl-fl5, .stl-fl6, .stl-fl7, .stl-fl8, .stl-fl9, .stl-flx,
		.stl-lf0, .stl-lf1, .stl-lf2, .stl-lf3, .stl-lf4, .stl-lf5, .stl-lf6, .stl-lf7, .stl-lf8, .stl-lf9, .stl-lfx,
		.stl-pg0, .stl-pg1, .stl-pg2, .stl-pg3, .stl-pg4, .stl-pg5, .stl-pg6, .stl-pg7, .stl-pg8, .stl-pg9, .stl-pgx,
		.stl-gp0, .stl-gp1, .stl-gp2, .stl-gp3, .stl-gp4, .stl-gp5, .stl-gp6, .stl-gp7, .stl-gp8, .stl-gp9, .stl-gpx,
		.stl-3c0, .stl-3c1, .stl-3c2, .stl-3c3, .stl-3c4, .stl-3c5, .stl-3c6, .stl-3c7, .stl-3c8, .stl-3c9, .stl-3cx
	){
		width: calc(100% - (10px * 2));
		margin: 10px auto;
	}
}


/*================*
 | 02 - LARGEURS  |
 *================*/

/* 1 colonne */
.stl-1c0{ max-width: calc(100% - (var(--stl-mrg) * 2)); }
.stl-1c1{ max-width: calc(var(--lrg-1c-1) + (var(--stl-pdg) * 2)); }
.stl-1c2{ max-width: calc(var(--lrg-1c-2) + (var(--stl-pdg) * 2)); }
.stl-1c3{ max-width: calc(var(--lrg-1c-3) + (var(--stl-pdg) * 2)); }
.stl-1c4{ max-width: calc(var(--lrg-1c-4) + (var(--stl-pdg) * 2)); }
.stl-1c5{ max-width: calc(var(--lrg-1c-5) + (var(--stl-pdg) * 2)); }
.stl-1c6{ max-width: calc(var(--lrg-1c-6) + (var(--stl-pdg) * 2)); }
.stl-1c7{ max-width: calc(var(--lrg-1c-7) + (var(--stl-pdg) * 2)); }
.stl-1c8{ max-width: calc(var(--lrg-1c-8) + (var(--stl-pdg) * 2)); }
.stl-1c9{ max-width: calc(var(--lrg-1c-9) + (var(--stl-pdg) * 2)); }

/* 2 colonnes */
.stl-2c0{ max-width: calc(100% - (var(--stl-mrg) * 2)); }
.stl-2c1{ max-width: calc(var(--lrg-2c-1) + (var(--stl-pdg) * 2) + var(--stl-spc)); }
.stl-2c2{ max-width: calc(var(--lrg-2c-2) + (var(--stl-pdg) * 2) + var(--stl-spc)); }
.stl-2c3{ max-width: calc(var(--lrg-2c-3) + (var(--stl-pdg) * 2) + var(--stl-spc)); }
.stl-2c4{ max-width: calc(var(--lrg-2c-4) + (var(--stl-pdg) * 2) + var(--stl-spc)); }
.stl-2c5{ max-width: calc(var(--lrg-2c-5) + (var(--stl-pdg) * 2) + var(--stl-spc)); }
.stl-2c6{ max-width: calc(var(--lrg-2c-6) + (var(--stl-pdg) * 2) + var(--stl-spc)); }
.stl-2c7{ max-width: calc(var(--lrg-2c-7) + (var(--stl-pdg) * 2) + var(--stl-spc)); }
.stl-2c8{ max-width: calc(var(--lrg-2c-8) + (var(--stl-pdg) * 2) + var(--stl-spc)); }
.stl-2c9{ max-width: calc(var(--lrg-2c-9) + (var(--stl-pdg) * 2) + var(--stl-spc)); }

/* Fixe / libre */
:is(.stl-fl0, .stl-lf0){ max-width: calc(100% - (var(--stl-mrg) * 2)); }
:is(.stl-fl1, .stl-lf1){ max-width: calc(var(--lrg-fl-1) + var(--stl-cln-f) + var(--stl-spc) + (var(--stl-pdg) * 2)); }
:is(.stl-fl2, .stl-lf2){ max-width: calc(var(--lrg-fl-2) + var(--stl-cln-f) + var(--stl-spc) + (var(--stl-pdg) * 2)); }
:is(.stl-fl3, .stl-lf3){ max-width: calc(var(--lrg-fl-3) + var(--stl-cln-f) + var(--stl-spc) + (var(--stl-pdg) * 2)); }
:is(.stl-fl4, .stl-lf4){ max-width: calc(var(--lrg-fl-4) + var(--stl-cln-f) + var(--stl-spc) + (var(--stl-pdg) * 2)); }
:is(.stl-fl5, .stl-lf5){ max-width: calc(var(--lrg-fl-5) + var(--stl-cln-f) + var(--stl-spc) + (var(--stl-pdg) * 2)); }
:is(.stl-fl6, .stl-lf6){ max-width: calc(var(--lrg-fl-6) + var(--stl-cln-f) + var(--stl-spc) + (var(--stl-pdg) * 2)); }
:is(.stl-fl7, .stl-lf7){ max-width: calc(var(--lrg-fl-7) + var(--stl-cln-f) + var(--stl-spc) + (var(--stl-pdg) * 2)); }
:is(.stl-fl8, .stl-lf8){ max-width: calc(var(--lrg-fl-8) + var(--stl-cln-f) + var(--stl-spc) + (var(--stl-pdg) * 2)); }
:is(.stl-fl9, .stl-lf9){ max-width: calc(var(--lrg-fl-9) + var(--stl-cln-f) + var(--stl-spc) + (var(--stl-pdg) * 2)); }

/* Petite / grande */
:is(.stl-pg0, .stl-gp0){ max-width: calc(100% - (var(--stl-mrg) * 2)); }
:is(.stl-pg1, .stl-gp1){ max-width: calc(var(--lrg-pg-1) + var(--stl-spc) + (var(--stl-pdg) * 2)); }
:is(.stl-pg2, .stl-gp2){ max-width: calc(var(--lrg-pg-2) + var(--stl-spc) + (var(--stl-pdg) * 2)); }
:is(.stl-pg3, .stl-gp3){ max-width: calc(var(--lrg-pg-3) + var(--stl-spc) + (var(--stl-pdg) * 2)); }
:is(.stl-pg4, .stl-gp4){ max-width: calc(var(--lrg-pg-4) + var(--stl-spc) + (var(--stl-pdg) * 2)); }
:is(.stl-pg5, .stl-gp5){ max-width: calc(var(--lrg-pg-5) + var(--stl-spc) + (var(--stl-pdg) * 2)); }
:is(.stl-pg6, .stl-gp6){ max-width: calc(var(--lrg-pg-6) + var(--stl-spc) + (var(--stl-pdg) * 2)); }
:is(.stl-pg7, .stl-gp7){ max-width: calc(var(--lrg-pg-7) + var(--stl-spc) + (var(--stl-pdg) * 2)); }
:is(.stl-pg8, .stl-gp8){ max-width: calc(var(--lrg-pg-8) + var(--stl-spc) + (var(--stl-pdg) * 2)); }
:is(.stl-pg9, .stl-gp9){ max-width: calc(var(--lrg-pg-9) + var(--stl-spc) + (var(--stl-pdg) * 2)); }

/* 3 colonnes */
.stl-3c0{ max-width: calc(100% - (var(--stl-mrg) * 2)); }
.stl-3c1{ max-width: calc(var(--lrg-3c-1) + (var(--stl-spc) * 2) + (var(--stl-pdg) * 2)); }
.stl-3c2{ max-width: calc(var(--lrg-3c-2) + (var(--stl-spc) * 2) + (var(--stl-pdg) * 2)); }
.stl-3c3{ max-width: calc(var(--lrg-3c-3) + (var(--stl-spc) * 2) + (var(--stl-pdg) * 2)); }
.stl-3c4{ max-width: calc(var(--lrg-3c-4) + (var(--stl-spc) * 2) + (var(--stl-pdg) * 2)); }
.stl-3c5{ max-width: calc(var(--lrg-3c-5) + (var(--stl-spc) * 2) + (var(--stl-pdg) * 2)); }
.stl-3c6{ max-width: calc(var(--lrg-3c-6) + (var(--stl-spc) * 2) + (var(--stl-pdg) * 2)); }
.stl-3c7{ max-width: calc(var(--lrg-3c-7) + (var(--stl-spc) * 2) + (var(--stl-pdg) * 2)); }
.stl-3c8{ max-width: calc(var(--lrg-3c-8) + (var(--stl-spc) * 2) + (var(--stl-pdg) * 2)); }
.stl-3c9{ max-width: calc(var(--lrg-3c-9) + (var(--stl-spc) * 2) + (var(--stl-pdg) * 2)); }


/*===============*
 | 03 - COLONNES |
 *===============*/
:is(
	.stl-fl0, .stl-lf0, .stl-pg0, .stl-2c0, .stl-gp0, .stl-3c0,
	.stl-fl1, .stl-lf1, .stl-pg1, .stl-2c1, .stl-gp1, .stl-3c1,
	.stl-fl2, .stl-lf2, .stl-pg2, .stl-2c2, .stl-gp2, .stl-3c2,
	.stl-fl3, .stl-lf3, .stl-pg3, .stl-2c3, .stl-gp3, .stl-3c3,
	.stl-fl4, .stl-lf4, .stl-pg4, .stl-2c4, .stl-gp4, .stl-3c4,
	.stl-fl5, .stl-lf5, .stl-pg5, .stl-2c5, .stl-gp5, .stl-3c5,
	.stl-fl6, .stl-lf6, .stl-pg6, .stl-2c6, .stl-gp6, .stl-3c6,
	.stl-fl7, .stl-lf7, .stl-pg7, .stl-2c7, .stl-gp7, .stl-3c7,
	.stl-fl8, .stl-lf8, .stl-pg8, .stl-2c8, .stl-gp8, .stl-3c8,
	.stl-fl9, .stl-lf9, .stl-pg9, .stl-2c9, .stl-gp9, .stl-3c9,
	.stl-flx, .stl-lfx, .stl-pgx, .stl-2cx, .stl-gpx, .stl-3cx
){
	display: grid;
	gap: var(--stl-spc);
}


/*=================*
 | 04 - PROPORTION |
 *=================*/
:is(
	.stl-2c0, .stl-2c1, .stl-2c2, .stl-2c3, .stl-2c4, .stl-2c5, .stl-2c6, .stl-2c7, .stl-2c8, .stl-2c9, .stl-2cx
){
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

:is(
	.stl-3c0, .stl-3c1, .stl-3c2, .stl-3c3, .stl-3c4, .stl-3c5, .stl-3c6, .stl-3c7, .stl-3c8, .stl-3c9, .stl-3cx
){
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

:is(
	.stl-fl0, .stl-fl1, .stl-fl2, .stl-fl3, .stl-fl4, .stl-fl5, .stl-fl6, .stl-fl7, .stl-fl8, .stl-fl9, .stl-flx
){
	grid-template-columns: var(--stl-cln-f) minmax(0, var(--stl-cln-l));
}

:is(
	.stl-lf0, .stl-lf1, .stl-lf2, .stl-lf3, .stl-lf4, .stl-lf5, .stl-lf6, .stl-lf7, .stl-lf8, .stl-lf9, .stl-lfx
){
	grid-template-columns: minmax(0, var(--stl-cln-l)) var(--stl-cln-f);
}

:is(
	.stl-pg0, .stl-pg1, .stl-pg2, .stl-pg3, .stl-pg4, .stl-pg5, .stl-pg6, .stl-pg7, .stl-pg8, .stl-pg9, .stl-pgx
){
	grid-template-columns: minmax(0, var(--stl-cln-p)) minmax(0, var(--stl-cln-g));
}

:is( .stl-gp0, .stl-gp1, .stl-gp2, .stl-gp3, .stl-gp4, .stl-gp5, .stl-gp6, .stl-gp7, .stl-gp8, .stl-gp9, .stl-gpx
){
	grid-template-columns: minmax(0, var(--stl-cln-g)) minmax(0, var(--stl-cln-p));
}


/* Tablette portrait */
@media(max-width: 992px){
	:is(
		.stl-fl0, .stl-lf0, .stl-pg0, .stl-2c0, .stl-gp0, .stl-3c0,
		.stl-fl1, .stl-lf1, .stl-pg1, .stl-2c1, .stl-gp1, .stl-3c1,
		.stl-fl2, .stl-lf2, .stl-pg2, .stl-2c2, .stl-gp2, .stl-3c2,
		.stl-fl3, .stl-lf3, .stl-pg3, .stl-2c3, .stl-gp3, .stl-3c3,
		.stl-fl4, .stl-lf4, .stl-pg4, .stl-2c4, .stl-gp4, .stl-3c4,
		.stl-fl5, .stl-lf5, .stl-pg5, .stl-2c5, .stl-gp5, .stl-3c5,
		.stl-fl6, .stl-lf6, .stl-pg6, .stl-2c6, .stl-gp6, .stl-3c6,
		.stl-fl7, .stl-lf7, .stl-pg7, .stl-2c7, .stl-gp7, .stl-3c7,
		.stl-fl8, .stl-lf8, .stl-pg8, .stl-2c8, .stl-gp8, .stl-3c8,
		.stl-fl9, .stl-lf9, .stl-pg9, .stl-2c9, .stl-gp9, .stl-3c9,
		.stl-flx, .stl-lfx, .stl-pgx, .stl-2cx, .stl-gpx, .stl-3cx
	){
		grid-template-columns: 1fr;
	}
}