:root {
  --green: #DAFF70;
  --brown: #574A1C;
  --grey: #D9D9D9;
  --square: 1.7rem;
  --violet: #BB86FF;
  --border-width: 1px;
}

th:empty {
  display: none;
}

body {
  font-family: 'Lucette';
  box-sizing: border-box;
  font-size: 1em;
  counter-reset: menu-nav;
  counter-reset: menu-nav-sub-li;
}

a {
  text-decoration: none;
  color: inherit;
  word-wrap: anywhere;
}

p {
  word-wrap: anywhere;
}

h1, h2 {
  font-family: 'Bai Jamjuree';
  text-transform: uppercase;
  font-weight: 600;
}

.text-content h1 p {
  text-indent: unset;
}

math {
  margin-left: calc(var(--square)*3);
}

img {
  position: relative;
}

sup {
  line-height: 0;
}

/* ours & home ---------------------------------------- */
header h2, .side-content-header {
  font-size: 0.8rem;
  padding: 0 calc(var(--square) *0.5);
  /* color: black; */
  display: flex;
  align-items: center;
}
.side-content-header a {
  color: var(--grey);
}
.side-content-header a:nth-child(2){
  margin-left: calc(var(--square) *0.5);
}

header h2 em {
  font-family: 'Lucette';
  font-style: normal;
  font-weight: normal;
}

section:is(.home, .ours) header h2:first-child {
  background-color: var(--green);
  padding-left: calc(var(--square) *1.5);
  color: black;
}

section:is(.home, .ours) header h2:nth-child(2) {
  background-color: white;
  color: black;
}

section:is(.home, .ours) header h2:last-child {
  margin-left: auto;
  background-color: unset;
  color: var(--green);
}

.side-content {
  padding: calc(var(--square) * 0.5);
}

.side-content p {
  text-indent: var(--square);
}

section.home .text-content {
  padding-right: calc(var(--square)/2);
}

section.home .side-content {
  color: var(--grey);
  display: flex;
  flex-direction: column;
  overflow: scroll;
  justify-content: end;
}

section.home .side-content h1 {
  line-height: 1;
  font-size: 3vw;
  margin-bottom: calc(var(--square)/2)
}

section.home figure.logo {
  display: flex;
  justify-content: center;
  width: 100%;
}

section.home figure.logo img {
  max-height: 30vw;
}

section.home h1{
  position: absolute;
  font-size: 13vw;
  color: var(--grey);
  line-height: 0;
}
section.home h1:nth-of-type(1){
  top: 16vh;
}

section.home h1:nth-of-type(2){
  top: 50vh;
}

section.home h2.button{
  position: absolute;
  text-align: center;
  width: fit-content;
  padding: 0 var(--square);
  border-radius: var(--square);
}

section.home h2.y2022{
  background-color: var(--green);
  color: var(--brown);
  top: 30vh;
}

section.home h2.y2024{
  background-color: var(--violet);
  color: var(--green);
  top: 55vh;
  left: 50vw;
}

/*
section.home .side-content>:first-child {
margin-top: auto;
} */
section:is(.home, .web2print) .text-content {
  height: 100%;
}

section:is(.home, .web2print) .text-content img {
  max-height: 100%;
}

/* end of ours & home ---------------------------------------- */
/* section web2print ---------------------------------------- */
section.web2print {
  color: var(--brown);
}

section.web2print .text-content:not(.hidden) {
  /* display: flex; */
  /* justify-content: center; */
}

section.web2print .side-content ul {
  list-style-type: none;
}

section.web2print .side-content ul li div {
  display: flex;
  min-height: var(--square);
}

section.web2print .side-content {
  padding: unset;
}

section.web2print .side-content .intro {
  padding: calc(var(--square) * 0.5) calc(var(--square) * 0.5) calc(var(--square) * 0.5) var(--square);
}

section.web2print .side-content ul {
  padding-left: 0;
}

section.web2print .side-content>ul:last-of-type {
  border-bottom: solid var(--border-width) var(--brown);
}

section.web2print button {
  margin: var(--square) auto;
  position: relative;
  border: none;
  padding: 0;
  width: auto;
  overflow: visible;
  width: 100%;
  justify-content: center;
  display: flex;
  background: transparent;
  /* inherit font & color from ancestor */
  color: inherit;
  font: inherit;
  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
  line-height: normal;
  /* Corrects font smoothing for webkit */
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  /* Corrects inability to style clickable `input` types in iOS */
  -webkit-appearance: none;
}

section.web2print button img {
  max-height: 15vh;
  cursor: pointer;
}
section.web2print button h2.print {
  background-color: var(--violet);
  border-radius: var(--square);
  color: var(--green);
  padding: 0 var(--square);
  cursor: pointer;
}
section.web2print button img.printed {
  visibility: hidden;
  position: absolute;
  top: 0px;
}

section.web2print button:active img.printed {
  visibility: visible;
}

section.web2print button:active img.print {
  visibility: hidden;
}

section.web2print .side-content ul li div {
  border-top: var(--border-width) solid var(--brown);
}

section.web2print .side-content ul li input[type="checkbox"] {
  appearance: none;
  margin: 0;
  font: inherit;
  width: var(--square);
  border-radius: 0;
  display: flex;
  cursor: pointer;
  border-right: var(--border-width) solid var(--brown);
  flex-shrink: 0;
}

section.web2print .side-content ul li ul input[type="checkbox"] {
  border-left: var(--border-width) solid var(--brown);
}

input[type="checkbox"]:checked::before {
  /* transform: scale(1); */
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--brown);
}

section.web2print .side-content ul li label {
  padding: 0 calc(var(--square)/4);
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  align-items: first baseline;
}

section.web2print .side-content>ul>li {
  font-size: 0.8em;
  font-family: 'Bai Jamjuree';
  text-transform: uppercase;
  font-weight: 600;
}

section.web2print .side-content>ul>li.revue {
  counter-increment: section-revue;
  /* counter-reset: sub-section-revue; */
}

section.web2print .side-content>ul>li.revue label {
  padding-left: unset;
}

section.web2print {
  counter-reset: section-revue;
  counter-reset: sub-section-revue;
}

section.web2print .side-content>ul>li.revue label:before {
  font-family: 'Lucette';
  font-size: 0.9em;
  font-weight: normal;
  width: var(--square);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

section.web2print .side-content>ul>li.revue>div>label:before {
  content: counter(section-revue, upper-roman);
}

section.web2print .side-content ul>li.revue>ul>li {
  padding-left: calc(var(--square) - 1px);
}

section.web2print .side-content>ul>li.revue>ul>li {
  counter-increment: sub-section-revue;
}

section.web2print .side-content>ul>li.revue>ul>li>div>label::before {
  content: counter(sub-section-revue);
  width: var(--square);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9em;
}

section.web2print .side-content ul>li>ul {
  font-size: 0.8rem;
  font-family: 'Lucette';
  text-transform: none;
  font-weight: normal;
  border-top: solid var(--border-width) var(--brown);
}

section.web2print .side-content ul>li>ul>li:first-child>div {
  border-top: unset;
}

section.web2print .text-content {
  padding-top: var(--square);
  padding-left: unset;
  padding-bottom: unset;
  padding-right: unset;
}

section.web2print .text-content>* {
  margin-left: var(--square);
}

.web2print main {
  counter-reset: num-section;
}

.section-revue.sommaire-detaille h1:not(.meta)::before, .web2print .text-content h1::before {
  content: counter(num-section, upper-roman);
  width: var(--square);
  display: inline-block;
  text-align: center;
  font-family: "Lucette";
  font-weight: normal;
}

.section-revue.sommaire-detaille h1:not(.meta), .web2print .text-content h1 {
  height: var(--square);
  counter-increment: num-section;
  width: 100%;
  background-color: var(--brown);
  grid-column: span 2;
  color: white;
  font-size: 0.8em;
  display: flex;
  align-items: center;
  margin-left: unset;
  margin-right: unset;
}

.web2print .text-content>hr {
  width: 100%;
}

.section-revue.sommaire-detaille h2, .web2print .text-content h2 {
  counter-increment: num-article;
  font-size: 2em;
  font-family: "Lucette";
  line-height: 1;
  border-bottom: solid var(--border-width) var(--brown);
  margin-bottom: var(--square);
  font-weight: normal;
  padding-right: unset;
  padding: calc(var(--square)*0.5) 0;
}

.section-revue.sommaire-detaille h2::before, .web2print .text-content h2::before {
  content: counter(num-article) ". ";
}

.web2print .text-content h3 {
  font-family: 'Bai Jamjuree';
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.5em;
}

/* section content ---------------------------------------- */
section.content {
  color: var(--brown);
}

nav.tabs ul {
  list-style-type: none;
  display: flex;
  padding: 0;
}

nav.tabs ul li.menu-nav.active .border {
  border-bottom: solid var(--border-width) white;
  position: absolute;
  left: 1px;
  bottom: -1px;
  width: calc(100% - var(--border-width));
}

nav.tabs ul li.menu-nav:first-child.active .border {
  left: 0px;
  bottom: -1px;
  width: calc(100%);
}

nav.tabs li.menu-nav {
  position: relative;
  box-shadow: var(--border-width) 0 0 0 var(--brown);
}

nav.tabs li.menu-nav h2 {
  padding: 0 var(--square);
  height: var(--square);
  font-size: 0.8em;
  display: flex;
  justify-content: center;
  align-items: center;
}

section.content nav.side {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-y: scroll;
}

section.content nav.side ol {
  padding-left: 0;
}

section.content nav.side .square.filler {
  height: 100%;
  position: absolute;
  width: calc(var(--square) - 1px);
  background-color: unset;
  border-right: solid var(--border-width) var(--brown);
  border-bottom: unset;
}

section.content nav.side li>ol {
  /* list-style-type: decimal; */
  display: unset;
}

section.content nav.side>ol>li.menu-nav {
  counter-increment: menu-nav;
  list-style-type: none;
}

section.content nav.side>ol>li.menu-nav {
  font-size: 0.8em;
  /* display: inline; */
  font-family: 'Bai Jamjuree';
  text-transform: uppercase;
  font-weight: 600;
}

section.content nav.side>ol>li.menu-nav>ol {
  /* counter-reset: menu-nav-sub-li; */
  font-family: 'Lucette';
  text-transform: none;
  font-weight: normal;
}

section.content nav.side>ol>li.menu-nav>ol>li>div {
  counter-increment: menu-nav-sub-li;
  margin-left: calc(var(--square) - 2px);
  border-left: solid var(--border-width) var(--brown);
}

section.content nav.side>ol>li.menu-nav a {
  display: flex;
  align-items: first baseline;
  padding-right: calc(var(--square) * 0.25);
}

section.content nav.side>ol>li.menu-nav>div.wrap>a {
  align-items: center;
}

section.content nav.side>ol>li.menu-nav>ol>li>a {
  border-left: solid var(--border-width) var(--brown);
  /* border-top: solid var(--border-width) var(--brown); */
}

section.content nav.side>ol>li.menu-nav>ol>li>div.wrap>a {
  padding-left: var(--square);
}

section.content nav.side>ol>li.menu-nav>ol>li>div.wrap>a::before {
  content: counter(menu-nav-sub-li);
  width: var(--square);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9em;
}

section.content nav.side>ol>li.menu-nav {
  border-top: solid var(--border-width) var(--brown);
}

section.content nav.side>ol>li.menu-nav:first-of-type {
  border-top: unset;
}

section.content nav.side>ol>li.menu-nav>ol>li:last-child>div.wrap {
  border-bottom: unset;
}

section.content nav.side>ol>li.menu-nav:first-child>div.wrap {
  /* border-top: unset; */
}

section.content nav.side>ol>li.menu-nav div.wrap {
  display: flex;
  min-height: var(--square);
  border-bottom: solid var(--border-width) var(--brown);
}

section.content nav.side>ol>li.menu-nav a::before {
  content: counter(menu-nav, upper-roman);
  width: var(--square);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: 'Lucette';
  font-size: 0.9em;
  font-weight: normal;
  flex-shrink: 0;
}

.side .square {
  width: calc(var(--square) - var(--border-width));
  border-right: solid var(--border-width) var(--brown);
  flex-shrink: 0;
}

/* .side .square.filler {
border-top: unset;
} */
.side li.menu-nav:nth-of-type(even) .square {
  background-color: var(--green);
}

/* text content ---------------------------------------- */
.text-content {
  min-height: 100%;
  padding: calc(var(--square)*0.5) 0 calc(var(--square)*0.5) var(--square);
}

.text-content:not(.revue)>* {
  margin-right: var(--square);
}

.text-content>hr {
  margin-right: 0px;
  color: inherit;
  border-top: unset;
  position: relative;
  left: calc(var(--square) * -1);
  width: calc(100% + var(--square));
}

.text-content.revue {
  padding: unset;
}

.text-content.revue .section-revue>div {
  padding-left: var(--square);
  background: linear-gradient(to top, var(--grey) 0px, #FFF 5%);
  padding-bottom: var(--square);
}

.text-content .section-revue>div>* {
  margin-right: var(--square);
}

.text-content .section-revue>div>h2 {
  padding-top: calc(var(--square) / 2);
  padding-right: unset;
}

.text-content p {
  max-width: 800px;
  text-indent: calc(var(--square)*2);
}

.text-content :is(h3, blockquote) {
  margin-left: calc(var(--square)*2);
  max-width: calc(800px - calc(var(--square)*2));
}

.text-content :is(ul, ol) {
  margin-left: calc(var(--square)*2);
  padding-left: 0;
}

.text-content ul {
  list-style-position: inside;
}

.text-content figure {
  gap: var(--square);
  margin-top: var(--square);
  margin-bottom: var(--square);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-content figcaption {
  text-align: center;
}

section.content .text-content img {
  /* max-width: 100%; */
}

.text-content ul {
  list-style-type: none;
  margin-top: calc(var(--square) / 2);
  margin-bottom: calc(var(--square) / 2);
}

.text-content ul li::before {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  background-color: var(--brown);
  border-radius: 50%;
  grid-column: 1;
  top: 0.4em;
  position: relative;
  margin-right: calc(var(--square)/2);
}

.text-content ul li {
  display: grid;
  grid-template-columns: 1em auto;
}

.text-content ul li p {
  text-indent: unset;
}

.text-content ul li * {
  grid-column: 2;
}

.footnotes {
  margin-right: var(--square);
  padding: var(--square);
  font-size: 0.8em;
  counter-reset: footnotes;
}

.footnotes ol {
  margin-left: unset;
}

.footnotes ol li {
  display: grid;
  grid-template-columns: min-content auto;
  counter-increment: footnotes;
}

.footnotes ol li * {
  grid-column: 2;
}

.footnotes ol {
  list-style-type: none;
  columns: 2;
}

.footnotes ol li::before {
  content: counter(footnotes);
  grid-column: 1;
  margin-right: calc(var(--square)/2);
}

.footnotes hr {
  display: none;
}

.footnote-backref {
  visibility: hidden;
}

.footnote-backref::before {
  visibility: visible;
  content: "⇈";
  /* color: var(--green); */
}

.footnotes p {
  text-indent: unset;
}

h1.part-title::before {
  content: attr(data-num);
  width: var(--square);
  display: inline-block;
  text-align: center;
  font-family: "Lucette";
  font-weight: normal;
  margin-right: var(--square);
}

h1.part-title {
  height: var(--square);
  width: 100%;
  background-color: var(--brown);
  grid-column: span 2;
  color: white;
  font-size: 0.8em;
  display: flex;
  align-items: center;
}

.section-revue::after {
  content: "";
  height: var(--square);
  background-color: var(--green);
  display: block;
}

.text-content h2.subpart-title::before {
  content: attr(data-num) "."attr(data-subnum) " ";
}

.text-content h2.subpart-title {
  counter-increment: subpart-title;
  font-size: 2em;
  font-family: "Lucette";
  line-height: 1;
  border-bottom: solid var(--border-width) var(--brown);
  margin-bottom: var(--square);
  font-weight: normal;
  padding-right: unset;
  padding-bottom: calc(var(--square)*0.5);
}

.text-content h3 {
  font-family: 'Bai Jamjuree';
  font-size: 1em;
  font-weight: 600;
  margin-top: var(--square);
}

.text-content :is(blockquote) {
  margin-bottom: var(--square);
}

.text-content blockquote h6 {
  font-size: 1em;
  font-weight: normal;
  font-family: 'Bai Jamjuree';
}

.text-content blockquote p {
  text-indent: unset;
}

/* avertissement ---------------------------------------- */
.avertissement-popup {
  z-index: 100;
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avertissement-popup.hidden {
  display: none;
}

.text-content-avertissement {
  max-height: 80vh;
  position: relative;
  width: 70vw;
  overflow: scroll;
  background-color: var(--brown);
  padding: var(--square);
  color: var(--grey);
  --p-width: 60%;
  font-size: 0.9em;
  line-height: 1.2;
}

.text-content-avertissement p {
  width: var(--p-width);
  margin-bottom: calc(var(--square)/2);
}

.text-content-avertissement figure {
  width: calc(100% - calc(var(--square)/2) - var(--p-width) - var(--square));
  left: calc(var(--p-width) + calc(var(--square)/2));
  position: absolute;
  top: calc(var(--square)*2);
}

.avertissement-popup .close {
  position: sticky;
  top: 0px;
  cursor: pointer;
}

.avertissement-popup .close::after {
  display: inline-block;
  width: 100%;
  height: var(--square);
  font-size: 3em;
  line-height: 0;
  text-align: right;
  content: "\00d7";
  /* This will render the 'X' */
}

/* glossaire ---------------------------------------- */
.glossaire thead {
  display: none;
}

table, th, td {
  border: var(--border-width) solid var(--brown);
  border-collapse: collapse;
  padding: calc(var(--square)/4);
  font-size: 0.9em;
  overflow: scroll;
  /* display: block; */
}

table {
  margin-top: var(--square);
  margin-bottom: var(--square);
}

:is(.glossaire, .chronologie) tr>td:first-child {
  font-family: 'MetaAccanthisAlternate';
}

tr>td {
  vertical-align: top;
}