*, *::before, *::after { box-sizing: border-box; } body { line-height: 1.6; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; height: auto; max-width: 100%; } input, button, textarea, select { font-family: inherit; font-size: inherit; margin: 0; line-height: 1.1; } iframe { border: 0; }

:root {
  --basecolor: #1b1b1b;
  --basecolor: #242c4a;
  --accentcolor: #454c50;
  --accentcolor: #2aaa29;
  --accentcolor: #1f881e;
  --lightaccentcolor: #6d9ab7;
  --size-huge: clamp(2.5em, 6vw, 5em);
  --size-home: clamp(2em, 4vw, 3em);
  --size-big: clamp(1.25em, 2vw, 1.5em);
  --size-base: 120%;
  --size-small: .75rem;
  --size-medium: .85rem;
  --spacing: 2rem;
  --gap: 3rem;
  --bg: transparent;
  --c: #271f30;
  --light: #eeecdf;
  --light: #fff;
  --mono: "Monaspace";
  --brouillon: "BrouillonBrouillon";
  --headerwidth: 270px;
  --flower-background: url("flowers/flower_08.webp");
  --flower-head: url("flowers/entete/03.webp");
  --flower-size: min(1600px, 150vw);
  --flower-factor: 0.725;
}

@media (max-width:1000px) {
  :root  { 
    --spacing: 1rem;
    --size-base: 100%;
    --size-big: 1.25em;
    --size-medium: 1rem;
    --size-small: .8rem;
  }
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ fonts */

@font-face{
  font-family: "BrouillonBrouillon";
  font-weight: 700;
  src: url("../fonts/Brouillon/Brouillon-Bold.woff2?abc") format("woff2");
  font-display: auto;
  font-display: swap;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ body */
html {
  scroll-behavior: smooth;
  font-size: var(--size-base);
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--light) var(--flower-background) no-repeat center calc(100vh - var(--flower-size) * var(--flower-factor));
  background-size: var(--flower-size) auto;
  background-attachment: fixed;
  font-family: "Century Schoolbook L";
  color: var(--basecolor);
}
@media (orientation:portrait) {
  body {--flower-factor: 1.1;}
}
@media (min-width:2000px) {
  body {
    max-width: 2000px;
    margin-left: auto;
  }  
}

/* hide flower on scroll */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: white;
  opacity: 0;
  transition: 200ms;
}
.no-js body::before,
body.scrolled::before {
  opacity: 1;
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ flowers */

[data-root="actions"] {
  --flower-background: url("flowers/flower_02.webp");
  --flower-head: url("flowers/entete/05.webp");
}
[data-root="ressources"] {
  --flower-background: url("flowers/flower_07.webp");
  --flower-head: url("flowers/entete/04.webp");
}
[data-slug="aux-racines-de-l-ecologie-du-livre"] {
  --flower-background: url("flowers/flower_04.webp");
  --flower-head: url("flowers/entete/02.webp");
}
[data-slug="glossaire"] {
  --flower-background: url("flowers/flower_05.webp");
  --flower-head: url("flowers/entete/06.webp");
}
[data-slug="imaginer"]{
  --flower-background: url("flowers/flower_06.webp");
  --flower-head: url("flowers/entete/09.webp");
}
[data-slug="partager"]{
  --flower-background: url("flowers/flower_15.webp");
  --flower-head: url("flowers/entete/07.webp");
}
[data-slug="deconstruire"]{
  --flower-background: url("flowers/flower_01.webp");
  --flower-head: url("flowers/entete/08.webp");
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ common */
p, blockquote, ul, ol {
  max-width: 40em;
}
h1, h2, h3 {
  /* letter-spacing: .01em; */
  font-weight: bold;
  scroll-margin-top: .75em;
  line-height: 1.2;
  text-wrap: balance;
}
h2, h3, h4 {
  font-family: var(--mono);
  font-variation-settings: "wght" 680;
  text-transform: uppercase;
}
h1 {
  text-wrap: balance;
  max-width: 18em;
  font-size: var(--size-huge);
  font-weight: 400;
  margin: .5em 0;
  font-family: var(--brouillon);
  letter-spacing: .03em;
  line-height: 1;
  display: inline-flex;
  flex-direction: column;
  position: relative;
  justify-content: end;
}
.intro h1 {
  margin: var(--gap) 0;
}
h1::after {
  content: "";
  display: block;
  background: url(../img/strokerepeat.svg);
  width: calc(100% + .15em);
  height: .2em;
  background-size: auto 65%;
  background-repeat: repeat-x;
  background-position: 0 center;
  transform: translate(-.05em, -.1em) rotate(-.2deg);
  clip-path: xywh(0 0px 100% 100% round .2em);
  max-width: 3em;
  margin-top: .25em;
}

.intro h1::after ,
.intro h1::before {
  display: none;
}

.typo h1 {  
  --size-huge: clamp(2em, 4vw, 4em);
  margin: .25em .5em;
}

a {
  color: var(--accentcolor);  
  text-underline-offset: .15em;
}
p { margin: 0 0 1em; }

.button {
  background: var(--light);
  border: .12em solid var(--accentcolor);
  color: var(--accentcolor);
  text-decoration: none;
  display: inline-block;
  text-indent: 0;
  transition: all 100ms;
  border-radius: .25em;
  padding: .05em .5em;
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: var(--size-small);
  letter-spacing: .1em;
}
.button:hover, .button:focus, .edit:hover {
  background: var(--basecolor);
  border-color: var(--basecolor);
  color: var(--light);
}
.edit {
  aspect-ratio: 1;
  text-decoration: none;
  display: inline-block;
  text-indent: 0;
  transition: all 150ms;
  padding: .25em .5em .15em;
  border: none;
  border: 1px solid var(--accentcolor);
  border-radius: 100%;
}
hr {
  clear: both;
  border: none;
  background: none;
  border-bottom: 1px solid #dadada;
  margin: 2em 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ header */

#header {
  position: fixed;
  padding-bottom: 2em;
  z-index: 1;
  padding: var(--spacing);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  top: 0;
  width: var(--headerwidth);
  mix-blend-mode: multiply;
}

#header::before {
  content:"";  
  background: var(--flower-head) no-repeat center 0;
  background-size: 90% auto;
  top: 1em;
  right: -1em;
  left: -1em;
  bottom: 0;
  position: absolute;
  z-index: -1;
}
#header::after{
  --seed: url(seeds/graine-008.webp);
  content: "";
  display: block;
  background: var(--seed, none) no-repeat left 25%;
  background-size: contain;
  width: 50px;
  height: 50px;
  transform: translateX(-.5em);
  flex: 1;
}
@media (max-width:1024px) {
  #header::before,
  #header::after {display: none;}
  #header{
    mix-blend-mode: normal;
  }
}

[data-template="resources"] #header {position: absolute;}
[data-intended-template="resources"] #header::after{ content: none; }
[data-root="l-association"] #header::after{ --seed: url(seeds/graine-007.webp); }
[data-root="actions"] #header::after{ --seed: url(seeds/graine-008.webp); }

.logo {
  text-decoration: none;
  line-height: 1;
  position: relative;
  font-weight: normal;
  z-index: 5;
  color: var(--basecolor);
  margin-bottom: var(--spacing);
  display: block;
  font-family: var(--brouillon);
  font-size: 2em;
}
.logo span {
  white-space: nowrap;
  display: block;
}

.logo span:first-child {
  text-indent: 1.7em;
  display: inline-block;
}
.logo span:last-child {
  text-indent: .35em;
  display: inline-block;
}

@media (max-width:1280px) {
  :root {--headerwidth: 220px}
}
@media (max-width:1024px) {
  :root {--headerwidth: 0}
  [data-template="resources"] #header {position: static;}
  #header { 
    position: relative;
    height: auto;
    width: 100%;
    display: block;
    margin-bottom: var(--spacing);
  }
  #header > div {
    display: flex;
    gap: var(--spacing);
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    margin-bottom: 0; font-size: 1.75em;
    background: url(seeds/graine-005.webp) no-repeat;
    background-size: 32px auto;
    background-position: .25em -.15em;
  }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ menu */
.menu, .submenu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: start;
  font-family: var(--mono);
}
.menu {
  gap: 1em;
  max-width: none;
}
.submenu { display: none;}
[data-template="home"] .submenu { display: flex;}
.active .submenu { display: flex;}
.menu .section > a {
  text-transform: uppercase;
  font-weight: bold;
}
.menu li {
  margin-top: .5em;
}
.menu a {
  color: currentColor;
  text-decoration: none;
  font-size: var(--size-small);
  line-height: 1.2;
  display: block;
  text-wrap: balance;
}
.menu a:hover, .menu a:focus {
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .15em;
}
.menu a.active::before{
  content: "> ";
}
@media (max-width:1024px) {
  .menu {
    flex-direction: row;
  }
}
#header:has(#menustate:checked){
  position: static;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ home */

@media (max-width:1024px) {
  .home .intro {
    margin: 2em 0 var(--spacing);
  }
}
.brouillon {
  font-family: var(--brouillon);
  font-weight: normal;
  margin: .5em 0 .25em;
  text-transform: none;
  line-height: 1;
  font-size: var(--size-home);
  a { text-decoration: none ; }
}

.home .noireaude .button {
  mix-blend-mode: multiply;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ map */

.mapembed iframe {
  width: 100%;
  height: 70vh;
  max-height: 900px;
  margin-bottom: 2em;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ prevnext */
.prevnext {
  display: flex;
  flex-direction: column;
  margin: 1em 0 1em;
  display: none;
}
.prevnext h4 {
  /* @todo factorize */
  font-size: var(--size-small);
  letter-spacing: .1em;
  margin: 0 0 .5em;
  font-weight: normal;
  text-transform: uppercase;
}
.prevnext nav {
  display: flex;
  gap: 1em;
  /* max-width: 20em; */
}
.prevnext a {
  text-wrap: balance;
}
@media (max-width: 800px) {
  .prevnext { margin-top: 0; grid-column: 1; grid-row: 3;}
}
@media (max-width: 400px) {
  .prevnext nav { flex-direction: column;}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ main */

main {
  scroll-margin-top: 2em;
  padding: var(--spacing);
  margin-left: var(--headerwidth);
  position: relative;
  z-index: 2;
}

@media (max-width:1024px) {
  main {padding-top: 0;}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ blockquotes */
.quote {
  margin: 0 0 var(--spacing) 0;
  max-width: none;
}
.quote > p {
  font-size: var(--size-big);
  line-height: 1.35;
  text-wrap: balance;
}
.blockquote-footer {
  margin-top: .5em;
  padding-left: var(--spacing);
  text-wrap: balance;
  max-width: 40em;
  font-family: var(--mono);
  font-size: var(--size-small);
  opacity: .75;
}
.blockquote-footer::before {
  content: "— "
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ breadcrumb */

.breadcrumb {
  margin-bottom: var(--spacing);
  font-family: var(--mono); font-size: var(--size-small);
  a { text-decoration: none; color: currentColor; }  
}
@media (max-width: 1024px) {
  .breadcrumb { display: none; }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ text */
h2.subtitle {
  
  margin: 0em auto 0;
  padding: var(--spacing);
}

.intro {
  margin-bottom: 2em;
  padding: var(--spacing) 0;
  position: relative;
  padding-right: calc(50px + var(--spacing));
}

.intro :last-child { margin-bottom: 0;}
.intro::after {
  --seed: url(seeds/graine-004.webp);
  content: "";
  display: block;
  background: var(--seed, none) no-repeat;
  background-size: contain;
  width: 50px;
  height: 50px;
  transform: translateY(-50%);
  position: absolute;
  right: var(--spacing);
  top: 50%;
}

@media (max-width:1024px) {
  .intro{ padding: 0;}
  .intro h1 { margin: var(--gap) 0 calc(var(--gap) / 2) 0;  }
  .intro::after {mix-blend-mode: multiply;}
}


.text {
  text-wrap: pretty;
  max-width: 60em;
}


.text blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 0 0 0 4em;
}
.text ul {
  list-style-type: none;
  position: relative;
  padding-left: 4em;
}
.text ul li::before {
  content :"●";
  width: 2em;
  display: inline-block;
  margin-left: -2em;
}
.text a {
  text-decoration-thickness: 1px;
  text-underline-offset: .1em;
  text-decoration-color: color-mix(in srgb, currentColor 100%, white 70%);
}
.text a[href^="http"]::after {
  
}
.text a:not([href*="ecologiedulivre"]):not([href^="#"])::after {
  content: url("img/external.svg");
  width: 1em;
  display: inline-block;
  vertical-align: middle;
}
.text h2 {
  font-size: 1.75em;
  max-width: 40em;
}
.text * + h2 {
  margin-top: 1.75em;
}
.text h3 {
  margin: 1.5em 0 1em;
  font-size: 1.25em;
  font-weight: normal;
  padding-bottom: .5em;
  border-bottom: 1px solid var(--accentcolor);
}


.text h4:has(+h3){
  margin-bottom: 0;
  font-weight: normal;
}
.text h4+h3{
  margin-top: 0;
}

/* subpages */
.subpages ul {
  max-width: none;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  list-style-type: none;
  padding: 0;
}
.subpages .custom-image {
  margin-bottom: 0;
}
.subpages ul img {
  max-width: 200px;
  width: auto;
}
.gridbeforetext ul,
.gridaftertext ul { margin-bottom: 2em;}

.gridbeforetext h3 ,
.gridaftertext h3 {margin-bottom: 0.5em;}
.gridbeforetext h3 a ,
.gridaftertext h3 a {color: currentColor; text-decoration: none; }
.gridbeforetext .chapo ,
.gridaftertext .chapo {margin: 0 0 1em;}
.gridbeforetext .chapo p ,
.gridaftertext .chapo p {  margin: 0;}
.gridbeforetext li ,
.gridaftertext li { margin: 0; padding: 0; }
.gridaftertext .custom-image,
.gridbeforetext .custom-image {
  float: left;
  margin: 1em 1em 0 0;
}
.gridbeforetext .readmore ,
.gridaftertext .readmore { font-family: var(--mono); font-size: var(--size-small);}
.gridbeforetext  ul img {
  max-width: none;
  max-height: 250px;
}
.listaftertext  {
  border-top: 1px solid #dadada;
  margin-top: 2em;
  padding-top: 2em;
}
.listbeforetext  {
  border-bottom: 1px solid #dadada;
  margin-bottom: 2em;
  padding-bottom: 2em;
}

.listbeforetext  ul {
  grid-template-columns: 1fr;
}
.listbeforetext li:has(img) {
  display: grid;
  gap: var(--spacing);
  grid-template-columns: 200px 1fr;
}
.listbeforetext h3, .listbeforetext p { margin: 0 0 .5em;}
.listbeforetext h3 a { text-decoration: none;}
@media (max-width:500px) {
  .listbeforetext li:has(img) {
    grid-template-columns: unset;
  }
}


.custom-image {
  margin: 0 0 1em 0;
}
.custom-image img {
  width: 100%;
}
.custom-image figcaption {
  font-size: var(--size-small);
  padding-top: 1em;
  background: var(--light);
}
.custom-image picture {
  position: relative;
  display: block;
}
.custom-image.filter picture a {
  /* display: block; */
  display: inline-block;
  position: relative;
}
/* .custom-image.filter picture a::before {
  content: "";
  inset: 0;
  position: absolute;
  background: #70b872;
}
.custom-image.filter picture a::after {
  content: "";
  inset: 0;
  position: absolute;
  background: #a4a4a4;
  mix-blend-mode: multiply;
  opacity: .3;
  pointer-events: none;
} */
.custom-image.filter img {
  /* mix-blend-mode: luminosity; */
}
.custom-image.align-left {
  float: left;
  margin-right: 1em;
  max-width: calc(13.3em - .5em);
  width: calc(33.33% - .5em);
}
.custom-image.align-right {
  float: right;
  margin-left: 1em;
  max-width: calc(13.3em - .5em);
  width: calc(33.33% - .5em);
}
.custom-image.align-left::after{
  content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.custom-image.half {
  width: 50%;
}
sup.footnote {
  font-size: var(--size-small);
  line-height: 0;
  vertical-align: baseline;
  font-family: var(--mono);
  font-weight: normal;
}
sup.footnote a {
  text-decoration: none;
  /* font-weight: bold; */
  color: currentColor;
  padding: 0 0 0 .15em;
}
sup.footnote a::before{content:'['}
sup.footnote a::after{content:']'}
.footnotes-container {
  border-top: 1px solid #dadada;
  margin-top: 2em;
  padding-top: 2em;
}
.footnotes-list {
  padding-left: 4em;
  margin: 0;
  counter-reset: notes;
}
.footnotes-list li {
  font-size: .75em;
  counter-increment: notes;
}
.footnotes-list ::marker {
  content: counter(notes) " — "
}

.youtube-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 1em 0;
}

.youtube-container .embed-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  width: 100%;
  height: auto;
}

.youtube-container .embed-container iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

.youtube-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.youtube-container.disabled::before {
  content: "";
  inset: 0;
  position: absolute;
  background: #a2d3ff;
}

.youtube-container.disabled img {
  mix-blend-mode: luminosity;
}

.youtube-container .youtube-hint {
  display: none;
}

.youtube-container.disabled .youtube-hint {
  display: inline-block;
  position: absolute;
  max-width: 400px;
  z-index: 1;
  font-size: var(--size-small);
  border-radius: .25em;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #ffffff;
  padding: 2em;
  gap: 1em
}
.youtube-container.disabled small {
  font-size: var(--size-small);
font-family: var(--mono);
}




a.term {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: .12em;
}

@media (max-width: 800px) {
  .prevnext, .text  {
    padding-left: 0;
  }
  .text blockquote {
    border-left: 2px solid currentColor;
    padding: 0 0 0 1em;
  }
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(108, 108, 108, 0.24);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  z-index: 100;
}
.popup {
  z-index: 101;
  position: fixed;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -50%);
  width: 26em;
  max-width: 80%;
  max-height: 80vh;
  overflow: scroll;
  top: 50%;
  background: var(--light);
  padding: 1.5em;
  border: 2px solid var(--accentcolor);
  border-radius: .25em;
  box-shadow: 3px 3px 10px #23335185;
}
.popup h3 {
  margin: -.25em 1.5em .5em 0;
}
.popup .button { 
  background: var(--accentcolor);
  color: var(--light);
  position: absolute;
  top: .5em;
  right: .5em;
  width: 2em;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.popup > p {
  font-size: var(--size-small);
}
.popup h4 {
  font-size: var(--size-small);
  letter-spacing: .1em;
  margin: 1.5em 0 .5em;
  font-weight: normal;
  text-transform: uppercase;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ toc */


h2 a[href^="#"], h3 a[href^="#"] {
  color: currentColor;
  text-decoration: none;
}
h2 :not(sup) a[href^="#"]::after, h3 :not(sup) a[href^="#"]::after {
  content: " #";
  opacity: 0;
}
h2:not(sup)  a[href^="#"]:hover::after, h3 a[href^="#"]:hover::after {
  opacity: .4;
}
aside {
  position: sticky;
  top: 1em;
  font-size: var(--size-small);
}
.aside {
  margin-bottom: 2em;
}
.aside ol,
.aside ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.aside li {
  margin-bottom: .5em;
}
.aside a  {
  text-decoration: none;
}
aside:has( ~ .text > h2:first-child ) .aside:first-child{
  margin-top: 5em;
}
aside:has( ~ .text > h2:first-child ) {
  top: -4em
}
.aside h4 {
  /* font-size: 1em;
  letter-spacing: .1em;
  margin: 0 0 .5em;
  font-weight: normal;
  text-transform: uppercase; */
}
.aside + .aside {
  margin-top: 0 !important;
}


@media (max-width: 800px) {
  
  aside {
    position: static;
    display: flex;
    gap: 2em;
    width: auto;
  }
  .aside { margin-top: 0 !important;}
  .toc {
    display: none;
  }
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ resources */



.resources-intro {
  font-size: var(--size-small);
  font-family: var(--mono);
  opacity: .75;
}

.starred {
  margin: 4em 0 0;  
}
.starred h2{
  text-transform: uppercase;
}
.starred-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin: 1em 0;
  gap: .5em 2em;
}
.starred-list a {
  display: block;
}
.starred-list span + span::before {
  content: " — ";
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ data */

.rsrcs {
  display: flex;
  align-items: start;
  gap: 2em;
  /* --accentcolor: #42bfdd; */
  margin-top: 4em;
}
.tags{
  font-size: var(--size-small);
  top: 2em;
}
.tagslist {
  list-style-type: none;
  margin: 1em 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
  margin-bottom: 2em;
  max-width: none;
}
.tags {
  width: calc(var(--headerwidth) - var(--spacing) );
  align-self: flex-start;
  position: sticky;
  top: 2em;
  margin-left: calc(-1 * var(--headerwidth) );
}

.tags h3,
.tags h4 {
  /* @todo factorize */
  font-size: var(--size-small);
  letter-spacing: .1em;
  margin: 0 0 .5em;
  font-weight: normal;
  text-transform: uppercase;
  font-family: var(--mono);
}
.reset {
  margin-bottom: 1em;
}
.tags h3 {
  font-weight: normal;
  border-bottom: 1px solid #000;  
  padding: 0 0 .75em;
  margin-bottom: 1em;
  line-height: 1;
}
.tagslist a {  
  text-decoration: none;
  border-radius: .25em;
  color: #5e5e5e;
  box-decoration-break: clone;
}
.tagslist a.active,
.tagslist a:hover {
  background: var(--accentcolor);
  color: var(--light);
}

.resources-nav {
  border-bottom: 1px solid #000;
  line-height: 1;
  text-transform: uppercase;
  position: sticky;
  top: 0em;
  background: white;
  padding-top: 1.5em;
  margin-top: -1.5em;
}
.resource,
.resources-nav {
  display: grid; grid-template-columns: 1fr 8em;
  gap: 1em;
}
.resources-nav > * {
  display: flex;
  padding: 0 0 .75em 0;
  font-size: var(--size-small);
  gap: 1em;
  font-family: var(--mono);
}
.resources-nav .resources-data { display: flex; }

.resources-nav a {
  color: currentColor;
  padding: 0 1em 0 0;
  display: inline-block;
  text-decoration: none;
  white-space: nowrap;
}
.resources-nav a.sort, .resources-nav a:hover {
  background: url(img/sort.svg) calc(100% - .2em) center no-repeat;
  background-size: auto 75%;
}
.resources-nav a.sort.desc{
  background-image: url(img/sort-desc.svg);
}
.resources-nav a.sort.asc{
  background-image: url(img/sort-asc.svg);
}
[class*="th"]:has(.sort) a{
  background-color: var(--accentcolor);
  border: 2px solid  var(--accentcolor);
  border-radius: 2px;
  color: white;
  padding: 0 1em 0 .2em;
}
#rsrcsdata {
  width: 100%;
}
.resources-meta {
  font-family: var(--mono);
}
.close{
  font-family: var(--mono);
  float: right;
  border: none;
  width: 2em;
  aspect-ratio: 1;
  border-radius: .25em;
  display: none;
}

.open .close {
  display: block;
}

.summary {
  display: none;
}

.star > a {
  font-size: 1.25em;
  line-height: 1.2;
  text-wrap: balance;
}
.star p {
  font-family: var(--mono);
  font-size: var(--size-small);
  line-height: 1.25;
  margin-top: 1em;
}

/* div:target .summary, */
div.open .summary {
  display: block;
  margin: 1em 0;
}
.resource {
  padding: .75em 0;
  border-bottom: 1px solid #5e5e5e;
}

.th-star {
  flex: 1;
  text-align: right;
}
.stars { float: right;}
.stars span {
  padding: 0 1.25em;
}
.stars span,
.format-date span {
  display: block;
  font-size: .75em;
}
.format-date a {
  text-decoration: none;
  color: currentColor;
}
.title-authors-publishers span {
  font-size: .75em;
}
.title-authors-publishers span + span::before {
  content: " | ";
  color: #42bfdd;
}
.title {
  text-decoration: none;
  color: currentColor;
  font-size: 1.5em;
  text-wrap: balance;
  display: block;
  line-height: 1.2;
  font-weight: normal;
}
.resource:hover:not(.open) .title {
  /* text-decoration-color: var(--lightaccentcolor); */
  /* text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px; */
  color: var(--accentcolor);
}
.resource:hover:not(.open)  {
  cursor:zoom-in;
}

#rsrcsstate { display: none;}
.rsrcsnav {
  display: flex;  
  /* justify-content: center; */
  margin: 1em 0 2em;
  width: 100%;
  font-size: var(--size-small);
  gap: 1em;
  display: none;
}
@media (max-width:1024px) {
  .rsrcs {flex-direction: column; gap: 0; margin-top: 0;}
  .tags {width: auto; max-width: none; position: static; display: none;}
  .resources-nav::before {
    content: "TRIER PAR…";
    display: block;
    margin: 0 0 .5em;
    line-height: 1;
    width: 100%;
    font-size: var(--size-small);
  }
  .th-sortby {display: none;}

  .resource:first-child { border-top: 1px solid #5e5e5e;}
  .resources-nav { 
    text-transform: none;
    border: none ;
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    padding-bottom: 3em;
    display: none;
  }
  .resources-nav a { 
    border: 1px solid var(--accentcolor);
    padding: .3em .5em .25em;
    border-radius: .25em;
    color: #5e5e5e;
    box-decoration-break: clone;
  }
  .resources-nav > * { gap: .5em; padding: 0;}
  .resources-nav a.sort.asc,
  .resources-nav a.sort.desc,
  .resources-nav a.sort, .resources-nav a:hover { background: none;}
  .resource {
    grid-template-columns: 1fr;
  }
  .resource .resources-meta {
    display: flex;
   flex-direction: row-reverse;
    justify-content: start;
    gap: .5em;
  }
  .rsrcsnav { display: flex; }
  #rsrcsstate:checked ~ .rsrcs .resources-nav {display: flex;}
  #rsrcsstate:checked ~ .rsrcs .tags{display: block;}
  #rsrcsstate:checked ~ .rsrcs .menu-open { display: none;}
  #rsrcsstate:checked ~ .rsrcs .menu-close { display: block;}
  #rsrcsstate:checked ~ .rsrcs .rsrcsnav > a { display: none;}
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ glossaire */


.letters ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 2em;
  gap: 0 1em;
  
}
.letters li {
  font-weight: bold;
  text-transform: uppercase;
}
.letters a {
  text-decoration: none;
  color: currentColor;
}
.letters a:hover {
  color: #42bfdd;
}

.terms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
  gap: 2em;  
}
.terms article {
  grid-column: span 2;
  font-size: var(--size-medium);
}
.terms article.has_letter {
  grid-column: span 3;
  display: grid;
  grid-template-columns: subgrid;
  align-content: start;
}
.terms article.has_letter .letter { grid-column: 1; grid-row: span 3;}
.terms article.has_letter h2,
.terms article.has_letter p { grid-column: 2 / span 2;}
.letter {
  font-family: var(--brouillon);
  text-transform: uppercase;
  font-size: clamp(2em, 10vw, 12em);
  font-weight: normal;
  display: flex;
  align-items: end;
  justify-content: end;
  margin: 0;
  line-height: 1;
  position: relative;
}

.has_letter:nth-of-type(2n) .letter  { align-items: start;}
.has_letter:nth-of-type(3n) .letter  { align-items: center;}
.has_letter:nth-of-type(5n) .letter  { align-items: start;}
.has_letter:nth-of-type(7n) .letter  { align-items: end;}
.has_letter:nth-of-type(11n) .letter { align-items: center;}
.has_letter:nth-of-type(13n) .letter { align-items: end;}
.has_letter:nth-of-type(17n) .letter { align-items: start;}

.letter[style] span {
  transform: scale( calc( .7 + var(--s, 0) * .1 ));
}
.letter svg + span { visibility: hidden;}

.terms .links {
  text-indent: 0;
  font-size: var(--size-small);
  font-family: var(--mono);
}
.terms .links a {
  text-underline-offset: 2px;
}
@media (max-width:1200px) {
  .terms article.has_letter {
    grid-column: span 2;
  }
 .terms article {
  margin-bottom: 3em;
  display: block !important;
 }
 .letter {
   float: left;
   align-items: start !important;
   margin: 0 1rem 0 0;
 }
}
@media (max-width:800px) {
 .terms {
   gap: 1em;
 }
 .letter {
   justify-content: start;
   /* margin: .5em 0 -.50em -.1em; */
   line-height: 1;
   font-size: 5em;
 }
 .letter[style] span {
   transform: none;
   font-size: 1.5em;
 }
}
@media (max-width:500px) {
 .terms {
   display: block;
 }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ list */

.list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22em, 1fr));
  gap: var(--spacing);
}
.subtitle {
  font-family: var(--mono);
  line-height: 1.2;
}
.list-article {
  align-self: self-start;
  position: relative;
}
.list p {
  text-indent: 0;
}
.list p:last-child {
  margin-top: .5em;
}
.list-article h2 {
  margin: 0 0 .25em;
  line-height: 1.2;
  text-wrap: balance;
}
/* .punctuation { 
  display: block;
  float: left;
  position: absolute;
  margin-left: -1em;
}
.firstletter {
  display: block;
  line-height: 1;
  float: left;
  font-size: 5em;
  font-weight: 100;
  margin:.075em .1em -.15em -.125em
} */
.list-article h2 a {
  text-decoration: none;
  color: var(--basecolor);
}
.list .meta > * + *::before { content: " — "}
.list .meta {
  font-size: var(--size-small);
  margin: .5em 0;
  font-family: var(--mono);
  a { text-decoration: none;}
  a:hover { color: currentColor;}
}
.list-button {
  /* padding: .05em .5em;
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: var(--size-small);
  letter-spacing: .1em; */
}

.theme-intro p.meta {
  font-family: var(--mono);
  font-size: var(--size-small);
  margin: .5em 0;
  max-width: none;
  a { color: currentColor;}
}

@media (max-width:30em) {
  .list { grid-template-columns: 1fr;}
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ footer */
#footer {
  position: relative;
  padding: 4em var(--spacing);
  display: flex;
  flex-direction: row;
  margin-left: var(--headerwidth);
  align-items: start;
  gap: var(--gap);
  justify-content: space-between;
  line-height: 1.6;
}
.footercontent {
  font-family: var(--mono);
  font-size: var(--size-small);
  display: flex;
  flex-direction: column;  
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--gap) / 2) var(--gap);
}
.footercontent ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1em;
}
.footercontent ul, .footercontent  p {
  margin: 0;
  padding: 0;
  max-width: none;
}
.partners {
  grid-column: 1 / -1;
}
.partners p {
  display: flex;
  flex-wrap: wrap;
  gap:.5em 2em;
}
.partners img {
  mix-blend-mode: multiply;
  height: 65px;
  filter: grayscale(1);
  opacity: .75;
  width: auto;
}
.partners a:hover img {
  opacity: 1;
}
#footer h2 {
  font-size: 1em;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 .25em;
  line-height: 1.6;
}
#footer a {
  color: currentColor;
}
.footerlogo {
  display: flex;
  align-items: end;
  font-family: var(--mono);
  gap: .5em;
  flex: 1 auto;
  flex-shrink: 0;
  font-family: var(--brouillon);
  font-size: 1.2em;
  font-weight: normal;
  margin-top: -1.2em;
}
.footerlogo-img {
    display: block;
    background: var(--basecolor);
    margin-left: -.75em; 
}
.footerlogo-img img { height: 4em; mix-blend-mode: lighten; width: auto;}
.footerlogo strong span {
  display: block;
  font-weight: bold;
  /* text-transform: lowercase; */
  line-height: 1.2;
  margin-bottom: -.25em;
}

#footer a {
  text-underline-offset: .2em;
}
#footer a:hover {
  color: var(--accentcolor);  
}

/* logo margin ±= 1200 + 3.5em */
@media (max-width:1270px) {
  .footerlogo figure { margin-left:  -.9em;}
}

@media (max-width:1024px) {
  
  .footercontent,
  #footer {
    display: block;
  }
  .footerlogo { margin-bottom: var(--spacing);}
  .contacts, .members, .credits-mentions, .partners { 
    display: grid;
    grid-template-columns: 120px 1fr;
    margin: var(--spacing) 0;
    align-items: baseline;
    align-items: start;
  }
  .partners img {
    height: 50px;    
  }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ edit */
.edit {
  font-size: .75rem;
  text-transform: uppercase;
  position: absolute;
  right: var(--spacing);
  top: var(--spacing);
  z-index: 999;
}
.calls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing);
}

#svgfilter {
  position: absolute; left: -9999px; 
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.noireaude {
  min-height: 10em;
  position: relative;
  display: flex;
  align-items: start;
  padding: 0;
  align-items: end;
}

.noireaude h2::before {
  content: "";
  display: block;
  background: var(--seed, none) no-repeat;
  background-size: contain;
  width: 50px;
  height: 50px;
  transform: translate(-.05em, -.35em);
}
.noireaude:nth-child(1){ --seed: url(seeds/graine-001.webp); }
.noireaude:nth-child(2){ --seed: url(seeds/graine-002.webp); }
.noireaude:nth-child(3){ --seed: url(seeds/graine-006.webp); }
.noireaude:nth-child(4){ --seed: url(seeds/graine-005.webp); }
.noireaude:nth-child(5){ --seed: url(seeds/graine-004.webp); }

.noireaude.size-deux { grid-column: span 2; }
.noireaude.size-trois { grid-column: span 3; }
.noireaude.size-trois {
  padding-right: calc(50px + var(--spacing));
}
.noireaude.size-trois::after {
  --seed: url(seeds/graine-003.webp);
  content: "";
  display: block;
  background: var(--seed, none) no-repeat;
  background-size: contain;
  width: 50px;
  height: 50px;
  transform: translateY( -50%);
  position: absolute;
  right: var(--spacing);
  top: 50%;
}
.noireaude-content {
  text-decoration: none;
  line-height: 1.5;
  position: relative;
}

.noireaude-content span {
  display: block;
  text-wrap: balance;
}
.noireaude-content h2 a {
  hyphens: auto;
  hyphenate-limit-chars: 6 3 2;
}

.noireaude-content a {
  color: currentColor;
  text-decoration-thickness: .1em;
  text-underline-offset: .16em;
}
.noireaude-content a.button {
  color: var(--accentcolor);
  &:hover {
    color: var(--light);
  }
}

.noireaude-content strong{
  display: block;
  margin-top: .25em;
  text-wrap: balance;
}
.noireaude-content strong a {
  text-transform: uppercase;
  text-decoration: underline;  
}

@media (max-width:1280px) {
  .calls { grid-template-columns: repeat(2, 1fr); }
  .noireaude.size-deux { grid-column: span 1; }
  .noireaude.size-trois { grid-column: span 1; }
}
@media (max-width: 800px) {
  .noireaude { min-height: 0; }
  .noireaude.size-un { grid-column: span 1; }
  .noireaude.size-deux { grid-column: span 1; }
  .noireaude.size-trois { grid-column: span 1; }
}
@media (max-width: 650px) {
  .calls { grid-template-columns: 1fr; }
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ a11y */

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.skip-link {
  position: absolute;
  left: 50%;
  
  width: 100%;
  transform: translateX(-50%);
  padding: 0 2em;
  bottom: 0;
}
.skip-link a::before {
  content: "↓ ";
}
.skip-link a:focus {
  height: auto;
  width: auto;
  clip: unset;
  clip-path: none;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ toggle menu */
#menustate, .menu-close {
  display: none;
}
.hamburger-button {
  width: 2.5rem;
  height: 2.5rem;
  right: 1.5em;
  top: 2em;
  display: none;
  z-index: 5;
}

.hamburger-button path {
  fill:var(--basecolor)
}
.hamburger-button svg {
  max-width: none;
  position: relative;
  width: 1.5em;
}
@media (max-width:800px) {
  body:has(#menustate:checked){
    overflow: hidden;
  }
  .hamburger-button {
    display: grid;
    place-content: center;
  }
  #nav {
    display: none;    
  }
  .menu, .submenu {
    align-items: start;
    text-align: right;
    flex-direction: column;
    align-items: end;
  }
  #menustate:checked ~ div .menu-close {
    display: block;    
  }
  #menustate:checked ~ div .menu-open {
    display: none;    
  }
  #menustate:checked ~ #nav{
    background: white;
    position: fixed;
    z-index: 4;
    display: flex;
    inset: 0;
    justify-content: end;
    /* extra padding left required for .logo padding */
    padding: 6em 1.5em 0 calc(var(--spacing) + .15em);
  }  
  #menustate:checked ~ #nav .submenu{
    display: flex;
  }  
}
