/* définition des variables */

:root {
  --main-font: "Open Sans", sans-serif;
  --couleur-texte: black;
  --couleur-texte-gris: #818181;
  --couleur-fond: white;
  --couleur-marron-clair: #be8181;
  --couleur-marron-fonce: #571709;
  --couleur-marron: #4A1605;
  /*--couleur-beige-navigation: #d3b48c;*/
  --couleur-beige-navigation: #BB9C74;
  /*--couleur-beige-navigation: #AB8554;*/
  --couleur-jaune-agrements: #dab700;
  --couleur-gris-separateur: #bfbfbf;
  --couleur-beige-bordure: #D3B48C;
  --couleur-critiques: #CB4141;
  --couleur-bibliotheques: #DAB700;
  --couleur-babel: #61C05F;
  --couleur-blanc-casse: #FAF5EA;
  --couleur-ego-corpus: #7067D8;
}

body {
  margin: 0 auto;
  max-width: 1920px;
  width: 100%;
  font-size: 18px;
  line-height: 1.6em;
  font-family: var(--main-font);
  background-color: #FAFAFA;
  text-align: justify;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  /*margin: 0 auto 1.5em;*/
  margin: 0 auto;

  nav {
    font-size: 1.2em;
    margin: 1.25em auto;
    padding: 0em 2em;

    ul {
      margin: 0 auto;
      padding: 0;
      display: flex;
      flex-direction: row;
      width: 100%;
      justify-content: space-between;
    }

    li {
      list-style: none;
      padding-left: 0;
    }

    a,
    a:visited,
    a:hover {
      color: var(--couleur-texte);
      text-decoration: none;
      font-weight: normal;
    }

    li.active a,
    li.active a:visited {
      font-weight: bold;
    }

    .logo img {
      height: 1.5em;
    }
  }

  img.bandeau {
    width: 100%;
    max-width: 1920px;
  }

  section.recherche {
    padding: 1em 3em;
    background: var(--couleur-marron-fonce);

    > * {
      width: 100%;
    }

    > form {
      display: grid;
      grid-template-columns: 5fr 4fr;
      gap: 2em;
    }

    #champ-de-recherche {
      height: 3em;
      padding-left: 2em;
      box-sizing: border-box;
      width: 100%;
    }

    #sectionFilter {
      font-size: 0.8em;
      display: flex;
      justify-content: left;
      gap: 1em;
      border: none;
      padding: 0;
      margin: 0 0 0 0;
    }

    #sectionFilter input[type="checkbox"] {
      display: none;
    }

    #sectionFilter label {
      display: inline-block;
      text-decoration: none;
      background-color: white;
      padding: .1em .8em;
      border-radius: 4px;
      color: var(--couleur-marron-clair);
      cursor: pointer;
      user-select: none;
      align-content: center;
    }

    #sectionFilter input[type="checkbox"]:checked + label,
    #sectionFilter label:has(input[type="checkbox"]:checked) {
      color: white;
      background-color: var(--couleur-marron-clair);
    }

    #sectionFilter button {
      background-color: var(--couleur-fond);
      border-radius: 4px;
      border: none;
      outline: inherit;
      cursor: pointer;
      line-height: 0;
    }

    #sectionFilter button img {
      filter: invert(67%) sepia(8%) saturate(1350%) hue-rotate(314deg) brightness(82%) contrast(102%);
    }

    input {
      background: var(--couleur-fond);
      border: 0;
    }
  }
}

nav.breadcrumb {
  padding: 0 3em;

  ol {
    padding: 0;
    font-size: .9em;
    font-weight: 300;
  }

  ol li {
    display: inline;
    padding-left: 0;
  }

  ol li:before {
    content: " / ";
    font-weight: 300;
  }

  /* ol li:first-child:before {
    content: none;
  } */

  ol li:last-child a,
  ol li:last-child a:visited {
    font-weight: 700;
  }

  a,
  a:visited,
  a:hover {
    color: var(--couleur-texte);
    text-decoration: none;
  }
}

nav.menu-secondaire {
  padding: .5em 3em;
  text-align: left;
  background-color: var(--couleur-marron-fonce);

  ul {
    margin: 0;
    padding: 0;
    font-size: 1em;
    display: flex;
    align-items: center;
    gap: 2em;
    list-style: none;
  }

  li {
    padding-left: 0;
  }

  a,
  a:visited {
    color: var(--couleur-fond);
    text-decoration: none;
  }

  li.active a,
  a:hover {
    /*color: var(--couleur-beige-navigation);*/
    border-bottom: 2px solid var(--couleur-fond);
  }
  /*li.active a {*/
  /*  font-weight: bold;*/
  /*}*/
}

main {
  flex-grow: 1;
}

article.simple {
  width: 70ch;
  margin: auto;
}

article.list {
  width: 70%;

  div.group:not(:first-of-type) {
    margin-top: 3em;
  }

  section.card {
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    color: var(--couleur-texte);
    padding: 1em 1.5em;

    a,
    a:visited {
      text-decoration: none;
      color: var(--couleur-texte);
    }
  }


  section.card.dictionnaires.header {
    font-weight: 700;
    display: grid;
    /*grid-template-columns: 1fr 1fr 1fr;*/
    grid-template-columns: 1fr 2fr fit-content(100px);
  }

  section.card.dictionnaires {
    > a {
      text-decoration: none;
      color: var(--couleur-texte-gris);
      font-size: .8em;
      display: grid;
      /*grid-template-columns: 1fr 1fr 1fr;*/
      grid-template-columns: 1fr 2fr fit-content(100px);
    }

    .language {
      background-color: var(--couleur-marron-clair);
      border-radius: 4px;
      color: white;
      text-align: right;
      font-size: .8em;
      padding: 0 1em;
      min-width: fit-content;
      width: 4em;
    }
  }/* fin liste card dictionnaires */

  section.card.comptes-rendus,
  section.card.entretiens,
  section.card.ressources-scientifiques,
  section.card.manifestations-scientifiques
  {
    > a {
      display: grid;
      grid-template-columns: 6em 1fr;
      gap: 1.5em;
      align-items: center;
    }

    img {
      width: 100%;
    }

    div {
      display: grid;
      grid-template-columns: 1fr 8em;
      align-items: baseline;
    }

    h2 {
      font-size: 1em;
      text-align: left;
    }

    .language {
      background-color: var(--couleur-marron-clair);
      border-radius: 4px;
      color: white;
      text-align: center;
      font-size: .8em;
    }

    .ref,
    .authoriality,
    .summary {
      grid-column: 1/ span 2;
    }

    .date {
      grid-column: 2 / span 1;
      font-size: .8em;
      text-align: center;
    }
    .ref,
    .date {
      margin: 0;
    }
  }
}

main#home {
  margin-top: 4em;
}

main#home > article {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3em;

  aside {
    /*font-size: .8em;*/
    text-align: left;
    grid-column: 1 / span 1;
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 3em;
  }

  aside h2 {
    font-size: 1em;
  }

  aside h2::before {
    content: "";
    border-left: 4px solid var(--couleur-beige-bordure);
    margin-right: .5em;
  }

  aside ul {
    list-style: none;
    padding-left: 0;
  }

  aside li.card {
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    color: var(--couleur-texte);
    padding: 1em;
    margin: 1em 0;
    background-color: white;
  }

  aside a,
  aside a:visited {
    text-decoration: none;
    color: var(--couleur-texte);
  }

  aside .latest {
    a,
    a:visited {
      display: flex;
      flex-direction: column;
    }

    .corpus {
      font-size: .8em;
      background-color: var(--couleur-marron-clair);
      padding: .1em .8em;
      border-radius: 4px;
      color: white;
      align-self: flex-end;
    }
  }

  aside .news {
    a,
    a:visited {
      display: grid;
      grid-template-columns: 2fr 4fr;
      gap: 1em;
      align-items: center;
    }

    img {
      width: 80%;
    }
  }

  aside .links {
    a,
    a:visited {
      display: grid;
      justify-items: center;
    }

    img {
      width: 50%;
    }
  }

  div {
    grid-column: 2 / span 2;
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 3em;

  }

  section.presentation {
    border: 2px solid #bb9c94;
    position: relative;
    padding: 1.5em;
  }

  section.presentation > h1 {
    position: absolute;
    top: -0.65em;
    left: 50%;
    transform: translateX(-50%);
    background: #FAFAFA;
    padding: 0 0.5em;
    font-size: 1.5em;
    color: var(--couleur-marron);
    margin: 0 .5em;
  }

  .sections {
    /*display: grid;*/
    /*grid-template-columns: repeat(4, minmax(0, 1fr));*/
    display: flex;
    flex-direction: column;
    gap:2em;

    .section{
      display: grid;
      grid-template-columns: 2fr 4fr;
      gap: 2em;
    }

    .section img {
      width: 100%;
      height: auto;
      align-self: center;
    }

    header {
      text-align: center;
      /*margin: 1em 0;*/
      margin: 0;
    }

    header h2 {
      display: inline-block;
      position: relative;
      font-size: 1em;
    }

    header h2:before,
    header h2:after {
      content: "";
      position: absolute;
      border-top: 4px solid;
      top: .9em;
      width: 40px;
    }
    header h2:before {
      right: 100%;
      margin-right: 15px;
    }
    header h2:after {
      left: 100%;
      margin-left: 15px;
    }

    .critiques h2:after,
    .critiques h2:before {
      border-color: var(--couleur-critiques);
    }

    .babel h2:after,
    .babel h2:before {
      border-color: var(--couleur-babel);
    }

    .bibliotheques h2:after,
    .bibliotheques h2:before {
      border-color: var(--couleur-bibliotheques);
    }

    .ego-corpus h2:after,
    .ego-corpus h2:before {
      border-color: var(--couleur-ego-corpus);
    }

    p {
      /*font-size: .8em;*/
      line-height: 1.4em;
    }
  }

  .team {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:2em;
    background-color: var(--couleur-blanc-casse);
    padding: 1em 2em;
    /*font-size: .8em;*/

    h2 {
      grid-column: 1 / span 3;
      text-align: center;
    }



  }
}

  .volumen {
    margin: 3em 0 5em;
    border: 2px solid #bb9c94;
    position: relative;
    padding: 1.5em;
  }

  .volumen header {
    position: absolute;
    top: -0.65em;
    left: 50%;
    transform: translateX(-50%);
    background: #FAFAFA;
    padding: 0 0.5em;
    font-size: 1.5em;
    color: var(--couleur-marron);
    margin: 0 .5em;
  }

  .volumen ul {
    list-style: none;
};

main > article.recherche {
  display: grid;
  grid-template-columns: 3fr 6fr;
  gap: 2em;

  header {
    grid-column: 1 / span 2;
  }

  input#searchBox {
    grid-column: 1 / span 2;
    height: 3em;
    padding-left: 2em;
    box-sizing: border-box;
    width: 100%;
    margin: auto;
  }

  .filters {
    padding: 1em;
    border: 1px solid var(--couleur-gris-separateur);
    border-radius: 4px;
    background-color: var(--couleur-fond);
    height: fit-content;
  }

  .filters fieldset {
    display: flex;
    flex-direction: column;
    border: none;
  }

  .filters fieldset label:not(:first-of-type) {
    padding-left: 2em;
  }
}

main > article {
  width: 90%;
  max-width: 1455px;
  margin: auto;
  /*text-align: left;
  font-size: .8em;*/

  > header {
    max-width: 50%;
    text-align: center;
  }

  > header h1 {
    display: inline-block;
    position: relative;
    line-height: 1.2;
  }

  > header h1:before,
  > header h1:after {
    content: "";
    position: absolute;
    border-top: 4px solid var(--couleur-bibliotheques);
    top: .6em;
    width: 2em;
  }

  > header h1:before {
    right: 100%;
    margin-right: 15px;
  }

  > header h1:after {
    left: 100%;
    margin-left: 15px;
  }

  > header h2 {
    text-align: center;
  }

}

.sectionHome{
  width: 70ch;
}

section.pdf {
  width: 70ch;
  margin: 0 auto 4em;
  text-align: right;

  img {
    width: 30px;
  }
}

.critiques h1:after,
.critiques h1:before {
  border-color: var(--couleur-critiques);
}

.babel h1:after,
.babel h1:before {
  border-color: var(--couleur-babel);
}

.ego-corpus h1:after,
.ego-corpus h1:before {
  border-color: var(--couleur-ego-corpus);
}

section.front {
  margin:auto;
  font-size: .8em;
  width: 50%;
}

article.critiques section.front {
  width: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2em;

  img {
    width: 100%;
    height: auto;
  }
}

section.back {
  width: 70ch;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 1em;

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--couleur-gris-separateur);
    border-radius: 4px;
    background-color: var(--couleur-fond);
  }

  li {
    text-align: left;
    padding: 0 .2em;
    border-bottom: 1px solid var(--couleur-gris-separateur);
  }

  li:last-child {
    border-bottom:none;
  }

  section.citation {
    grid-column: 1 / span 3;
  }

  section.authors {
    grid-column: 1 / span 3;

    ul {
      background-color: #fafafa;
      border: none;
    }
    li {
      border: none;
    }
  }
  hr{
    width: 100%;
  }
  section.index {
    grid-column: 1/ span 3;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 2em;

    > h2 {
      grid-column: 1/ span 3;
    }
  }
}

section.text {
  counter-reset: paragraph;
  margin: auto;
  width: 70ch;


  h2,
  h3 {
    margin: 2.5em auto 1.5em;
  }

  p,
  ul,
  ol,
  .csl-entry {
    line-height: 1.5em;
    text-align: justify;
  }

  p {
    margin-bottom: 1.5em;
  }

  .csl-entry {
    margin-bottom: 0.75em;
  }


  p::before {
    margin: auto;
    opacity: 0.5;
    content: counter(paragraph);
    counter-increment: paragraph;
    position: absolute;
    text-align: right;
    margin-left: -2.5rem;
    font-size: 0.75rem;
  }

  .numberOff p::before {
    content: none;
    counter-increment: none;
  }

  u,
  .underline {
    text-decoration: underline;
  }

  .alignCenter p,
  p.alignCenter {
    text-align: center;
  }

  .alignRight p,
  p.alignRight {
    text-align: right;
  }

  /* @rmq à tester pour les images dans les articles */
  /*img {*/
  /*  margin: auto;*/
  /*  width: 60%;*/
  /*}*/

  figure {
    margin: 1.5em auto;
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: center;

    figcaption {
      font-size: .9em;
      text-align: center;
      line-height: 1.2em;
    }
  }

  #bibliographie ~ p::before,
  #bibliography ~ p::before,
  .biblio ~ p::before {
    content: none
  }

  blockquote {
    font-size: .9em;
  }

  blockquote > p::before,
  .footnotes ol li > p::before {
    content: none;
  }

  .footnotes {
    font-size: .9em;
  }

  .footnotes ol {
    padding-left: 1em;
  }

  .footnotes li p {
    margin: .8em 0;
  }

  a.footnote-ref,
  a.footnote-ref:visited,
  a.footnote-ref:hover,
  a.footnote-back,
  a.footnote-back:visited,
  a.footnote-back:hover {
    color: var(--couleur-critiques);
    text-decoration: none;
    font-weight: bold;
  }

  .footnotes > hr {
    margin: 2.5em auto 1.25em auto;
  }
}

.actualites section.text p:before {
    content: none;
    counter-increment: none;
}


h1 {
  text-align: center;
}

h2,
h3,
h4 {
  text-align: left;
  color: var(--couleur-marron);
}

a,
a:visited {
  color: var(--couleur-beige-navigation);
  text-decoration: none;
  font-weight: 500;
}

sup {
  font-size: 0.8em;
  line-height: 0em;
}

.smallcaps {
  font-variant: small-caps;

}



hr {
  margin: 2em auto 3em;
  height: 0px;
  border: none;
  border-top: 1px solid var(--couleur-gris-separateur);
}

footer {
  text-align: center;
  margin-top: 1.25em;

  a,
  a:visited,
  a:hover {
    color: var(--couleur-fond);
    text-decoration: none;
  }

  nav {
    background: var(--couleur-beige-navigation);

    ul {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      list-style: none;
    }

    li {
      line-height: 1em;
      padding: .5em;
    };
  }

  section.logos {
    padding: 0 1em;
  }

  section.logos ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  section.logos img {
    max-height: 35px;
    width: auto;
    object-fit: contain;
  }
}

#ego-corpus-gallery {
  display: flex;
  flex-direction: column;
  gap: 1em;

  .ego-corpus-item {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    gap: 2em;
    width: 70%;
    margin: auto;
  }

  p {
    text-align: left;
  }

  p:has(img) {
    /*height: 250px;*/
  }

  img {
    width:  100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
  }
}

a.backtotop,
a.backtotop:visited,
a.backtotop:link {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background-color: var(--couleur-beige-navigation);
  color: var(--couleur-fond);
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  text-decoration: none;
  font-size: 1.5rem;
  z-index: 1000;
}

/* a.backtotop:hover { */
/*   background-color: var(--color-faded); */
/* } */

table, th, td {
  border: 1px solid var(--couleur-texte);
}

table {
  border-collapse: collapse;
}

@media (max-width: 1512px) {
  body{
    max-width: 1512px;
    font-size: 16px;
  }
 /* end header max width 1512 */

  main#home {
    header {
      grid-column: 1 / span 1;
    }

    aside {
      grid-column: 1 / span 1;
      order: 1;
      display: flex;
    }

    section.presentation {
      grid-column: 2;
    }
  }
}

@media (max-width: 1250px) {
  body{
    max-width: 1250px;
    font-size: 14px;
  }
}