/* import font */
@import url(../layout/one-column.css);

@import url('fonts.css');
@import 'table.css';
@import 'specific.css';

:root {
  --font-body: "Crimson Text";
  --font-title: "Lato";
  --font-head: "Lato";
  --font-interface: "Lato";
  --font-deco: "Lato";
  --font-bodyLink: var(--font-head);
  --font-quote: "Crimson Text";

  --color-primary: #002a6c;
  --color-background: #efefef;
  /* --color-background: #cccccc; */
  --color-secondary: #729f1a;
  --color-body: #222222;
  --color-deco: #729f1a;
  --color-tableBody: silver ;
  --color-button: #9782a2;
  --color-error: #d50a00;
  --font-size: 1.2em;
}

body {
  color: var(--color-body);
  font-family: var(--font-interface);
  width: 100%;
  font-size: var(--font-size);
  position: relative;
  line-height: 1.4;
  background-color: var(--color-background);
  min-height: 100vh;
  transition: background-color 1000ms;
}

@media (prefers-color-scheme: dark) {
  body,
  .nightmode {
    --color-body: #efefef;
    --color-background: #111113;
    --color-primary: #e6d2b4;
    --color-deco: #dcaf39;
  }
  .logo-institutionnel {
    opacity: 1;
  mix-blend-mode: screen;
  filter: brightness(1.5); 
  } 
  .logotitle .black,
  .cover .blac {
    fill: white;
    }
}
.nightmode {
  --color-body: #e6d2b4;
  --color-background: #111113;
  --color-primary: #e6d2b4;
  --color-deco: #917201;
}
.nightmode .logo-institutionnel {
  opacity: 1;
  mix-blend-mode: screen;
  filter: brightness(1.5);
} 
figure:not(.nightmode) .logo-institutionnel {
  filter: grayscale(80%);
} 
.nightmode .logotitle .black,
.nightmode .cover .black {
fill: white;
}


.logo {
  font-family: var(--font-title);
  width: 40%;
  font-size: 2em;
  font-weight: 100;
  line-height: 1;
  font-variation-settings: "opsz" 96;
}

.logotitle {
  text-transform: lowercase;
  text-decoration: underline;
  text-decoration-color: var(--color-deco);
  font-style: italic;
  font-weight: 100;
  width: 250px;
  display: block;
}
.logotitle img {
  width: 250px;
  mix-blend-mode: unset;
}
.logo-institutionnel {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 50px;
  align-items: center;
  
}
.logo-institutionnel img {
  max-width: 250px;
}


/* 
.logo span:nth-of-type(1) {
  color: #bd7697;
}

.logo span:nth-of-type(2) {
  color: #a6b013;
}

.logo span:nth-of-type(3) {
  color: #65b74d;
}

.logo span:nth-of-type(4) {
  color: #1aabc1;
}

.logo span:nth-of-type(5) {
  color: #681e8e;
}

.logo span:nth-of-type(6) {
  color: #d53788;
}

.logo span:nth-of-type(7) {
  color: #ec55ff;
}

.logo span:nth-of-type(9) {
  color: #d48162;
}

.logo span:nth-of-type(8) {
  color: #dddfc2;
} */

main {
  --text-zoom: 0;
  font-size: calc(var(--font-size) + var(--text-zoom));
  transition: var(--text-zoom) 1s;
}

@media screen {
  main {
    width: clamp(16rem, 90vw, 70rem);
    margin-left: auto;
    margin-right: auto;
    padding-left: 70px;
    padding-right: 1.5rem;
  }
}

.intro {
  margin: auto;
  margin-top: 4em;
}


a {
  color: inherit;
  text-decoration: none;
  font-style: normal;
}
p a {
  color: var(--color-primary);
  text-decoration: none;
  font-style: italic;
}

a:hover {
  color: var(--color-deco);
}

.topbar nav a.active {
  border-color: var(--color-primary);
}

main p,
main li,
.casestudy p {
  max-width: 70ch;
  font-variation-settings: "opsz" 1;
  line-height: 1.7;
  /* font-size: 1em; */
}

p + p {
  text-indent: 5ch;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-title);
  font-weight: 800;
  margin-top: 2em;
  margin-bottom: .5em;
  scroll-margin-top: 2em;
}

h1 {
  color: var(--color-primary);
  margin-top: 0;
  font-size: 3em;
  line-height: 1.1;
  font-variation-settings: "opsz" 46;
  font-weight: 800;
  text-align: center;
  /* font-style: italic; */
  margin-top: 2em;
  margin-bottom: 3em;
}

h2 {
  color: var(--color-primary);
  margin-top: 3em;
  font-size: 2.5em;
  border-bottom: 1px solid var(--color-primary);
  font-variation-settings: "opsz" 1;
}

h3 {
  font-size: 1.2em;
  font-weight: 600;
  color: var(--color-primary);
}

h4 {
  font-size: 1.1em;
  font-family: var(--font-body);
}

h5 {
  font-size: 1em;
}

h6 {
  font-size: 1em;
}

h1 strong {
  font-weight: inherit;
}

h2 strong {
  font-weight: inherit;
}

h3 strong {
  font-weight: inherit;
}

h4 strong {
  font-weight: inherit;
}

h5 strong {
  font-weight: inherit;
}

h6 strong {
  font-weight: inherit;
}

.chap-content {
  font-family: var(--font-body);
  margin: 0 auto;
  font-size: 1.2em;
}

.chap-content figure {
  /* margin: 3em 0 3em -25%; */
  width: 100%;
}

.chap-number::before {
  /* content: 'chapter'; */
  font-style: normal;
  font-weight: 400;
  display: block;
  font-family: var(--font-interface);
  letter-spacing: 2ch;
  text-transform: uppercase;
  font-size: .025em;
  text-align: center;
}

.chap-number {
  font-size: 30em;
  height: 0;
  font-family: var(--font-body);
  line-height: 1;
  font-weight: 400;
  font-family: var(--font-title);
  margin: 0 auto;
  text-align: center;
  color: var(--color-deco);
}

.chap-subtoc {
  color: var(--color-secondary);
  margin-left: 3em;
  margin-bottom: 3em;
  padding: 1em;
  font-family: var(--font-interface);
  border-left: 1px solid var(--color-primary);

}

.chap-subtoc a {
  color: inherit;
  text-decoration: none;
}

.chap-subtoc ol {
  padding-left: 4ch;
  margin: 0;
  margin-bottom: .3em;
}

.home h1 {
  color: var(--color-primary);
  margin-bottom: 1em;
}

.home .culdelampe {
 display: none;
}

.home p {
  margin: auto;
}

/* .home .intro p:first-child {
  text-indent: -4ch;
} */

/* .home .intro p:first-child:first-letter {
  color: var(--color-deco);
  line-height: 0;
  font-size: 8em;
  font-family: var(--font-body);
} */

.book-collection ::marker {
  content: "*";
  font-size: 3em;
  color: var(--color-primary);
}

.book-collection a {
  display: block;
}

.book-collection h2 {
  line-height: 1.2;
  border-bottom: 1px solid currentColor;
}

.book-collection span {
  display: block;
  margin-top: 1.3em;
  margin-left: .7ch;
}

a:hover {
  color: var(--color-deco);
}



/* cheat for the non svg  */
/* 
img {
  mix-blend-mode: multiply;
} */

figcaption {
  font-family: var(--font-interface);
  color: var(--color-primary);
  font-style: normal;
  font-weight: 400;
  font-size: 0.8em;
  margin-top: 1em;
  text-align: left;
  /* max-width: 60%; */

    margin-bottom: 4em;
}

figcaption * {
  font-weight: 400;
  font-style: normal;
}

figure {
  margin-bottom: 5em;
  margin-top: 5em;
}

h1.booktitle{
  margin-bottom: 0px;
}

table p {
  text-indent: 0;
}

td,
th {
  padding-right: 1em;
  padding-bottom: 1em;
}

.next,
.previous {
  position: absolute;
  padding: 2em;
}

:is(.previous, .next) span {
  font-variant: all-small-case;
  color: var(--color-primary);
}

.next {
  right: 0;
  text-align: right;
}

.previous {
  left: 0;
}
.team-authors {
  margin-top: 4em;
}
.team-authors > div,
.biblio > div {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  margin-top: 1em;
}
.team-authors img,
.biblio img {
  width: 200px;
} 
.resources p + p {
text-indent: 0px;
}
@media screen and (max-width:600px) {
.biblio > div {
  flex-direction: column;
  gap: 0px;
}
}

@media screen and (max-width: 1200px) {
  .next,
  .previous {
    position: relative;
  }
}

.show {
  z-index: 3;
}

header {
  background-color: var(--color-background);
  transition: background-color 1000ms;
}

/* hide the running head */

.running-head {
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--color-background);
  margin-top: 100px;
  padding: 0;
  max-width: unset;
  /* margin-bottom: 20em; */
  /* transition: background-color 1000ms; */
  /* border-bottom: 1px solid var(--color-primary); */
  padding: 1em 0;
  box-shadow: 0 3px var(--color-background);
}

.book-chapter header {
  font-family: var(--font-sans);
  font-size: 1em;
  text-align: center;
  margin-top: 2em;
  position: relative;
  z-index: 3;
  background-color: var(--color-background);
  padding-bottom: 1em;
  min-height: 100px;
  margin-top: -5em;
}

.chap-content {
  z-index: -2;
  /* position: relative; */
}

.book-chapter .topbar {
  position: unset;
}

.manuscript-meta label {
  text-transform: uppercase;
  font-size: .8em;
}

.manuscript-meta p {
  text-indent: 0;
}

.manuscript-meta-value::before {
  content: "→ ";
}

.manuscript-meta-value {
  margin-bottom: 2em;
  display: block;
}

.manuscript-meta-value:empty::before {
  content: 'this is an empty field';
  color: var(--color-error);
  display: block;
  /* margin-top: 2em; */
}

article {
  max-width: 70ch;
  margin: 0 auto;
}

#searchResults .chapnum {
  display: block;
  text-transform: uppercase;
  font-size: .6em;
  font-family: var(--font-interface);
}

#searchResults {
  list-style-type: none;
}

#searchField {
  margin: 0 auto;
  border: 0;
  background: transparent;
  padding: 1em ch;
  display: block;
  width: 80%;
  text-align: center;
  font-style: 1.2em;
  border-bottom: 2px solid var(--color-primary);
  color: var(--color-body);
}

.subtoc-title {
  text-transform: uppercase;
  font-size: 1.2em;
  text-align: center;
  color: var(--color-body);
}



button#close {
  position: absolute;
  top: 0px;
  right: -10px;
  font-size: 3em;
  color: var(--color-primary);
  line-height: 1;
}