.publication-grid {
	display: grid; grid-template-columns: 1fr; gap: 48px;

	& > main {
		display: grid; grid-template-columns: 1fr; gap: 0;

		& > div {
			/* outline: 1px dashed grey; */

			&:nth-child(1) {
				background-color: #fff0; aspect-ratio: 2/1;
			}
			&:nth-child(2) {

				opacity: 0;
				animation-name: anim_fromLeft-32;
				animation-duration: 500ms; animation-timing-function: ease; animation-fill-mode: forwards;
				animation-delay: 0ms;

				& h1 {
					border: 0px solid red;
					font-size: 1.5rem; margin: 0; padding: 0;

					& span {display: block; line-height: 2rem; margin-bottom: 0.5rem; }
					& small {
						display: block; font-size: 1.25rem;
						/* & h2 { line-height: 2rem; } */
					}
				}
			}
			&:nth-child(3) {

				opacity: 0;
				animation-name: anim_opacity-in;
				animation-duration: 300ms; animation-timing-function: ease; animation-fill-mode: forwards;
				animation-delay: 0ms;


			}
			&:nth-child(4) {
				padding-left: 0;

				opacity: 0;
				animation-name: anim_fromTop-32;
				animation-duration: 500ms; animation-timing-function: ease; animation-fill-mode: forwards;
				animation-delay: 100ms;
			}
			&:nth-child(5) {
				padding: 0;

				& > div {
					padding: 32px 0 32px 48px; border-radius: 7px;
					background: linear-gradient(#fff 30%, #fff0 100%);

					opacity: 0;
					animation-name: anim_fromBottom-32;
					animation-duration: 500ms; animation-timing-function: ease; animation-fill-mode: forwards;

					&:nth-child(1) { animation-delay: 100ms; }
					&:nth-child(2) { animation-delay: 300ms; }
					&:nth-child(3) { animation-delay: 500ms; }

				}
			}
			&:nth-child(6) { background: linear-gradient(#fff, #fff0);}

		}

	}

	& aside { padding: 0 0; }

}





aside ul.mini-oeuvre-menu-1 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
aside ul.mini-oeuvre-menu-2 { display: grid; grid-template-columns: repeat(1, 1fr); }

aside ul.mini-oeuvre-menu-1 li > a { display: block; font-size: 0; width: 24px; aspect-ratio: 1/1; box-sizing: border-box; }
aside ul.mini-oeuvre-menu-1:last-child li > a { aspect-ratio: 3/4; }
aside ul.mini-oeuvre-menu-2 li > a { display: block; background-color: #fff!important; color: var(--color-code-comment); margin-bottom: 4px; /* opacity: 0.4;*/ }

aside ul.mini-oeuvre-menu-1 a[aria-current] {
	background-color: #fff!important;
	border: 0px solid #CCC;
	outline: 2px solid #000; outline-offset: 1px
}



/* .h1 { outline: 1px solid red; } */
.h1 .text h1 { }
.h1 .text h2 { margin-bottom: 0.25rem; padding: 0; line-height: 1.75rem; }
.h1 .text h3 { font-size: 1.4rem; margin-bottom: 0.1rem; }

.spacer-1 { height: 24px}
.spacer-2 { height: 32px}
.spacer-3 { height: 48px}

.ico-support { display: block; width: 28px; }



ul.btn-ancre {
  /* outline: 0px solid red; */
  position: absolute; width: 256px;
  margin-top: -6rem;

  & li {

    & a {
      position: relative; display: block; width: 100%;
      padding-bottom: 4rem;

      &:after { position: absolute; content: ''; right: calc( 100% + 12px ); top: 9px; width: 0; height: 2px; background-color: #000; transition: width 100ms ease;}

      &:hover {
        opacity: 1;
        & b { opacity: 1; }
        &:after { width: 24px; }
      }
    }
  }
}



@media screen and (min-width: 25rem) {}
@media screen and (min-width: 40rem) {
	.publication-grid {
		& > main {
			grid-template-columns: 240px auto 192px; gap: 0 24px;

			& > div:nth-child(2) { padding-left: 44px; }
			& > div:nth-child(4) { grid-row: 2 / span 2; }
			& > div:nth-child(5) { padding-left: 0px; grid-column: 2 / span 2; }
			& > div:nth-child(6) { padding-left: 0px; grid-column: 2 / span 2; }

		}
	}

}
@media screen and (min-width: 50rem) {
	.publication-grid {
		& > main {
			grid-template-columns: 300px auto 192px; gap: 0 48px;

			& > div:nth-child(2) { padding-left: 0px; }
			& > div:nth-child(5) { padding-left: 0px; grid-column: 2 / span 2; }
			& > div:nth-child(6) { padding-left: 0px; grid-column: 2 / span 2; }

		}
	}
}
@media screen and (min-width: 60rem) {}
@media screen and (min-width: 70rem) {
	/* .publication-grid { grid-template-columns: 5fr 1fr; } */
}