/* Core Stuff */
@import url("fonts.css");

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

:root{
    font-size: calc(1rem + ((1vw - .48rem) * 1.389));
    --vive:#876bda;
    --terne:#999999;
    --t-p:.6rem;
    --t-m:.75rem;
    --t-g:1.9rem;
    --g-n:375;
    --g-b:700;
}



html {
	scroll-behavior: smooth;
}

body {
    font-size: .7rem;
    line-height: 1.2;
    color: #606d6e;
    padding: 0 .5em 1em .5em;
    font-family: "Rubik";
    counter-reset: sidenote-counter;
}

body::-webkit-scrollbar, .filtres-fenetre::-webkit-scrollbar {
  width: 10px;
  height: 2px;
}
body::-webkit-scrollbar-track, .filtres-fenetre::-webkit-scrollbar-track {
  background-color: var(--terne);
}
body::-webkit-scrollbar-thumb, .filtres-fenetre::-webkit-scrollbar-thumb {
  background-color: var(--vive);
}

p{
    line-height: 1.2;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--vive);
    font-family: "Rubik";
}

a {
    color: var(--vive);
    text-decoration: none;
}
a:hover {
    color: var(--terne);
}
a.terne{
  color: var(--terne);
}
a.terne:hover{
  color: var(--vive) ;
}
.terne{
    color: var(--terne) ;
}


/* Styles */
h1{
    font-size: var(--t-g);
    color:var(--vive);
    font-family: "Sharp";
    line-height: 1.1;
}
h2{
    font-size: var(--t-m);
    color:var(--vive);
    font-family: "Sharp";
    margin: 0;
    line-height: 1.1;
}
.boutton{
    cursor: pointer;
}
.boutton:hover{
    color: var(--terne);
}
.rubik-fine{
  font-family: "Rubik";
  font-variation-settings: "wght" var(--g-n);
}


/* HEADER */
header{
    position: sticky;
    top:0;
    padding:1em .5em 1em .5em;
    margin-bottom:1em;
    background:white;
    z-index: 9999;
}
.nonclicable{
  pointer-events: none;
}
.no-margin-header{
  padding:1em .5em 1em .5em;
  margin-bottom: 0;
}

header .large-4{
    padding-right: 2em;
}
header .large-3{
    padding-right: 1em;
}
header .large-2 h2{
    font-variation-settings: "wght" var(--g-n);
}
header p{
    margin-bottom:1em;
}
header h2.nom{
    color:var(--terne);
}
.titre-glossaire{
    margin-right: 3em;
}
.champs{
    font-size: var(--t-m);
    font-variation-settings: "wght" var(--g-b);
    line-height: 1.1;
}
header .large-12{
    margin:1em 0 0 0;
    font-size: var(--t-m);
    font-variation-settings: "wght" var(--g-b);
}
.liste-glossaire{
    color:var(--vive);
    font-family: "Sharp";
    text-transform: capitalize;
}
.liste-glossaire-actif{
    font-size: var(--t-p);
    font-variation-settings: "wght" var(--g-n);
}
.entree-liste-glossaire::after{
  content:'(⤤)'
}
.liste-glossaire-actif:has(.large-3){
  margin-top: 1em;
}

.liste-glossaire-actif .large-3:nth-child(2), .liste-glossaire-actif .large-3:nth-child(3){
  padding: 0em .4em 0em .4em;
}
.liste-glossaire-actif .large-3:nth-child(1){
  padding: 0em .4em 0em 0em;
}
.liste-glossaire-actif .large-3:nth-child(4){
  padding: 0em 0em 0em .7em;
}
.item-glossaire.terne{
  color:var(--terne);
}
.item-fonction.terne{
  color:var(--terne);
}

.liste-liens-menu{
    list-style-type: none;
    margin:0;
    line-height: 1.2;
}
.effacer{
  display:none;
}
/* GLOSSAIRE */
.liste-entrees-glossaire{
    columns:4;
}
.entree-glossaire, .entree-globale-lettre{
    /* -webkit-column-break-inside: avoid; */
    break-inside: avoid;
}
.hide-not-glossaire{
    display:none;
}

.lettre-glossaire{
    font-size: 7rem;
}

/* CV */
.liste-cv{
    columns:4;
    column-fill: balance;
}
.partie-cv{
  break-inside: avoid;
}
.entree-cv{
    page-break-inside: avoid;
}
.entree-cv{
    font-size:var(--t-p);
}
.biographie{
    font-size: var(--t-m);
    margin-bottom:1em;
    max-width:60em;
}
.portrait{
  width: 17em;
  height: 17.3em;
  object-fit: cover;
  float: left;
  margin-right: 1em;
  margin-bottom:1em;
  margin-top: .25em;
}
.chapeau-info{
  font: inherit;
  font-weight: var(--g-b);
  font-size: var(--t-p);
}

/* Projet */
.chapeau{
  font-size:var(--t-m);
}

.sidenote {
  font-size: var(--t-p);
  position: relative;
  float: left;
  clear: left;
  margin-left: -24vw;
  top: -.3rem;
  width: 20em;
  margin-top: 1em;
}
blockquote .sidenote{
  margin-left:-39vw;
}
.sidenote-number {
  counter-increment: sidenote-counter;
}
/* Counter before the sidenote in the margin. */
.sidenote::before {
  content: counter(sidenote-counter)"\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
  position: relative;
  vertical-align: baseline;
  font-weight: bold;
}
/* Counter in the main body. */
.sidenote-number::after {
  content: counter(sidenote-counter);
  vertical-align: super;
  font-size: 0.7em;
  font-weight: bold;
  margin-right: 0.5rem;
}

blockquote{
  font-size: var(--t-m);
  border:0;
  line-height: inherit;
  padding: 0 0 0 12em;
}
blockquote p{
  color:var(--vive);
  line-height: inherit;
}
.content-projet>p>img{
  margin:auto;
  display: block;
  object-fit: contain;
}
.content-projet>p>img.img-portrait{
  height: 80vh;
}
.content-projet>p>img.img-landscape{
  width: 80%;
}

img+del{
  text-align: center;
  display: block;
  text-decoration: none;
  font-size: var(--t-p);
  margin-top: .5rem;
}

  /* VRAI */
* {
    line-height: 1;
}

  body{
    color:var(--vive);
    font-variation-settings: "wght" var(--g-n);
  }

  h6{
    font-size: var(--t-p);
    line-height: 1.2;
  }

  .article-item{
    padding:0em .4em 0em .4em;
  }
  /* .article-item:nth-child(4n-1){
    padding: 0 .25em 0 .5em;
  }
  .article-item:nth-child(4n-2){
    padding: 0 .5em 0 .25em;
  }
  .article-item:nth-child(4n-3){
    padding: 0 0.75em 0 0;
  }
  .article-item:nth-child(4n){
    padding: 0 0 0 0.75em;
  } */
  .article-item h6{
    margin-top: .5em;
  }
  .fiche{
    background-size: cover;
    background-position: center;
    width:100%;
    height: 32vw;
    border-radius: .2rem;
    transition:.35s box-shadow;
    cursor: pointer;
    position:relative;
  }
  .fiche:hover{
    box-shadow: 1px 1px 15px 5px var(--terne);
  }
  .empty{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10em;
    display:none;
  }
  .question-fiche{
    overflow: hidden;
    font-size:var(--t-m);
    height: 100%;
    border-radius: .2rem;
    padding: 1em;
    background:var(--vive);
    opacity: 0;
    transition:.35s opacity;
    display:block;
    color:var(--terne) !important;
    text-align: center;
    line-height: 1.1;
    position: absolute;
    top:0;
    width: 100%;

  }
  .question-fiche:hover{
    opacity: 1;
  }
  .question-fiche a{
    color:var(--terne);
  }

  .question-fiche-article{
    font-size:var(--t-m);
    height: 100%;
    border-radius: .2rem;
    padding: 1em;
    background:var(--vive);
    opacity: 1;
    transition:.35s opacity;
    display:block;
    color:var(--terne) !important;
    text-align: center;
    line-height: 1;
    position: absolute;
    top:0;
    width: 100%;
  }
  .question-fiche-article:hover{
    opacity: 0;
  }
  .question-fiche-article a{
    color:var(--terne);
  }

  .titre-grille-projet .categorie-projet{
    text-transform: capitalize;
  }
  .sidenotes-portable{
    display:none;
  }
  .hide-ordi{
    display:none;
  }

  @media only screen and (max-width: 889px) {
  body {
    font-size: 1.7rem;
  }
  .hide-ordi{
    display:block;
  }
  .news-port{
    position: fixed;
    bottom:0;
    background: white;
    padding-top:.5em;
    width: 100vw;
  }
  .champs,.container-liste-glossaire{
    display: none;
  }
  .container-liste-glossaire{
    padding-bottom: .5em;
  }
  .hide-port{
    display: none !important;
  }

  .fiche{
    width:100%;
    height: 125vw;
  }

  :root{
    --t-p:1.4rem;
    --t-m:2.4rem;
    --t-g:3.2rem;
  }
  header{
    padding:.5em 0em 0 0em;
  }
  .fonctions{
    margin-top: .5em;
  }
  /* header>*:not(.silvia){
    display:none;
  } */
  .article-item {
    padding: 1em .4em 0em .4em;
}
  blockquote{
    padding: 0 0 0 2em;
    font-size: inherit;
    border-left:1px dotted white;
    font-style:italic;
  }
  .content-projet .sidenote{
    display:none;
  }
  .sidenotes-portable{
    counter-reset: sidenote-counter;
    border-top:1px solid var(--terne);
    left:0;
    position: fixed;
    bottom:0;
    background: white;
    padding: .4em .4em .4em .4em;
    width:100%;
  }
  .sidenotes-portable:has(.note-visible){
    display: block;
  }

  .note-visible{
    line-height: 1;
  }
  .sidenotes-portable .sidenote{
    position: relative;
    float: none;
    clear: none;
    margin-left: 0;
    top: 0;
    width: auto;
    margin-top: 0;
  }
  .note-visible+.note-visible{
    margin-top: .5em;
  }
  .sidenotes-portable .sidenote-number::after{
    display: none;
  }
  .sidenotes-portable .sidenote::before{
    display:none;
  }
  .nombre{
    margin-right: 3em;
  }
  .sidenotes-portable .sidenote-number{
    display: none;
  }
  .note-visible{
    display: block !important;
  }
  .informations-projet {
    padding-left: 0 !important;
    margin-bottom: 1em;
  }
  .informations-projet>div{
    height: auto !important;
  }
  .liste-cv,.liste-entrees-glossaire {
    columns:1;
  }
  .portrait {
    width:100%;
    height: 17em;
  }
  .menu-port{
    text-align: right;
  }
  .content-projet{
    padding-bottom: 4em;
  }
  .content-projet>p>img.img-portrait{
    height: 70vh;
  }
  .content-projet>p>img.img-landscape{
    width: 90%;
  }
}