* {
margin:0;
box-sizing: border-box;

}

body {
  --color-link: rgb(97, 220, 163);
  --clr: oklch(0.9889 0.0053 17.25);
  --fd-clair: oklch(0.27 0.0063 258.36);
  --rad: 13pt;
width: 100vw;
height: 100%;
min-height: 100vh;
background: oklch(0.2264 0.0135 291.83);
color:var(--clr);
font-family: Palatino, Palatino Linotype, Palatino LT STD, Book Antiqua, Georgia, serif;

}

body,section, article {
  display:flex;
  flex-direction: column;
  place-content:center;
  align-items:center;
  flex-wrap: wrap;
}


img {
border-radius: 2rem;
box-shadow: 2px 2px 8px #111010;
border: 3px solid var(--clr);
  }
  .anim {
    transform : translateX(-100%);
    transition: all 1s cubic-bezier(.67,.07,.06,.98) ;
  }

h1 {
  font-size: clamp(2rem, 6.9vw - 1rem, 3.3rem);
  margin-block-start: 5rem;
  text-wrap: balance;
}

h3 {
  font-size: clamp(1.5rem, 8vw - 2rem, 3rem);
  margin-block-start: 3rem;
  text-wrap: balance;
}

  p {
font-size: clamp(.85rem, 4.3vw - 1rem, 1.65rem);
	text-align: justify;
  /*width: 55%;*/
	padding-inline: .45rem;
	hyphens: auto;
	margin-block: 1rem;
	line-height: 1.45;
  max-inline-size: clamp(36ch, 45ch, 50ch);
}

@scope (details) {
  margin-block: 20px;
  summary {
    font-size: x-large;
  }
summary:hover {
  cursor: pointer;

}
.toc {
    padding: 1.55rem;
    background: var(--fd-clair);
    align-self: auto;
    border-radius: var(--rad);
    font-size: 1.5rem;
  }

    ul {
      list-style:none;
    }
      li {
        padding: 0.15em;
}
        a {
  color: currentColor;
  padding-inline: .25rem;
}
a.h1 {
  font-weight: bold;
}
a.h3 {
  padding-inline-start: 2rem;
  font-size: 80%;
}
  }


nav {
width:fit-content;
position: absolute;
bottom: .8em;
right: .8em;
padding: .5em .8em;
}

a.lien {
color: var(--color-link);
}

a.lien:hover {
color:var(--clr);
}

footer {
  border-top: 5px solid var(--clr);
  margin-block-start: 5rem;
}

footer p {
  width: fit-content;
}