html {
  background: linear-gradient(90deg,#cacbd100 60%, #cacbd155 90%);
}

.grid-41 {
	display: grid; grid-template-columns: 1fr;

	& > div {
		outline: 0px dashed #ccc;

		/* &:nth-child(1) */
		&:nth-child(2) { display: flex; flex-direction: row; justify-content: end; align-items: start;}
		&:nth-child(3) { border-bottom: 2px solid #000;}

		&:nth-child(4) { border-bottom: 2px solid #ddd; display: flex; flex-direction: row; justify-content: end; align-items: start;}
		&:nth-child(5) { padding-top: 8rem;}

		& figure { outline: 2px solid #000; outline-offset: 2px;}
		& code { font-size: 0.7rem; transition: all 200ms ease; cursor: pointer; padding: 0px 8px;}

		& p {
			&:hover {
				code { background-color: var(--color-link); color: white;}
			}
		}

		ul.ecrit-auteurs {
			margin: 0; padding: 8px 0 8px 0;
			& li {
				list-style-type: none; text-align: right;
				& small { font-size: 0.85rem; }
			}
		}
	}
}


/* blockquote {
  border: 1px solid red; width: 100%; max-width: 600px;
} */

div#noteBasdePage {
	position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
	background-color: #fff;
	box-shadow: 0 0 128px #0002;

	& div.close-nbdp {
		position: absolute; right: 12px; top: 12px; width: 48px; cursor: pointer;
		padding: 16px; outline: 1px solid #bbb; outline-offset: 0; border-radius: 50%; box-sizing: border-box;
		transition: all 150ms ease;

		& svg {
			display: block; opacity: 0.4;
		}

		&:hover {
			outline: 2px solid #000; outline-offset: 2px; padding: 12px;
			& svg {display: block; opacity: 1;}
		}
	}


	& ul {
		padding: var(--padding);
		max-width: 70rem;
		margin: 0 auto;

		&.hidden { display: none; }

		& li {
			display: none;
			/* &:first-child { display: block;} */

			& a {
				display: flex; flex-direction: row; justify-content: start; align-items: start;
				padding: 0.5rem 0; font-size: 0.9rem;

				& span {
					/* outline: 1px solid grey; */

					&:nth-child(1) { width: 32px; font-weight: 700; padding-top: 0px; }
					&:nth-child(2) { width: 100%; max-width: 928px; padding-right: 48px;}
				}

			}


		}
	}
}

table {
	border-collapse: collapse; width: 100%; margin-bottom: 32px;
	outline: 2px solid #000; outline-offset: 2px; font-size: 0.8rem;

	& th,
	& td {
		border: 1px solid #0001;
		line-height: 1rem; padding: 4px;
	}

	& thead {
		& th {
			text-align: left; background-color: #eee; padding-top: 12px;
			&.hid {
				border: none; background-color: #fff;
			}
		}
	}
	& tbody {
		& th,
		& td {
		}
		& th {
			text-align: left; background-color: #f7f7f7;
			width: 28%;
		}
		& td {

			& span.circ-0 { background-color: #000; display: inline-block; width: 14px; height: 14px; border-radius: 50%;}
			& svg.svgico { display: block; width: 24px; }
			& svg.svgtimeline {
				display: block; width: 100%;
				& rect { fill: #ddd; }
			}
		}
		& th.hid,
		& td.hid {
			border: none;
		}
	}

	&.t1 {
		& tbody {
			& th { width: 24%; }
			& td {  width: 19%; }
		}
	}
	&.t2 {
		& thead {
			& th {
				background-color: #fff;  border: none; border-left: 2px solid #000; font-family: var(--font-family-mono); font-weight: 400; font-size: 0.7rem;
				&:nth-child(1) { border-left: none;}
			}
		}
		& tbody {
			& th { width: 24%; }
			& td {  width: auto; }
		}
	}
	&.t3 {
		/* exemple 12 !!! */
		& tr {
			&.hidentr {
				& td { visibility: hidden; }
			}

			&.greytr {
				& td:nth-child(4),
				& td:nth-child(5),
				& td:nth-child(6),
				& td:nth-child(7),
				& td:nth-child(8),
				& td:nth-child(9),
				& td:nth-child(10),
				& td:nth-child(11) { background-color: #eee; }
			}

			& th { width: 20%}
			& td {

				&:nth-child(1) { }
				&:nth-child(2) { width: 24px; border: 1px solid #000;}
				&:nth-child(3) { width: auto; border: none;}
			}
		}

	}
}


@media screen and (min-width: 30rem) {}
@media screen and (min-width: 40rem) {}
@media screen and (min-width: 50rem) {}
@media screen and (min-width: 60rem) {
	.grid-41 {
		grid-template-columns: 5fr 1fr;

		& > div { }
	}
}
@media screen and (min-width: 70rem) {}