/*FONTS*/
@font-face {
  font-family: "ArchivoNarrow-Italic";
  src: url("../fonts/ArchivoNarrow-Italic.ttf");
}

@font-face {
  font-family: "ArchivoNarrow-SemiBold";
  src: url("../fonts/ArchivoNarrow-SemiBold.ttf");
}

@font-face {
  font-family: "ArchivoNarrow-Regular";
  src: url("../fonts/ArchivoNarrow-Regular.ttf");
}

@font-face {
  font-family: "ArchivoNarrow-Bold";
  src: url("../fonts/ArchivoNarrow-Bold.ttf");
}

html, * {
  cursor: auto;
}

.cursor {
  display: none;
}

.preZBindery{
  font-size: 4vw;
  font-family: "ArchivoNarrow-SemiBold";
}

.load{ display: none;
  background-color: black;
      z-index: 100000;
      left: 45%;
      width: 49%;
      padding-top: 7%;
      position: fixed;
      overflow: hidden;
      height: 100%;
      color: white;
      border: solid 2pt white;
}
.loadContent{
  font-size: 3vw;
  padding: 4%;
  font-family: "ArchivoNarrow-Bold";
}
.loadColophon{
  padding: 4%;
  font-size: 2vw;
  font-family: "ArchivoNarrow-Bold";
}
/*:::::::ANIMATION:::::::::::::::TEST:::::*/

.spinner {
  transform: rotate(90deg);
  margin-top: 45%;
  width: 100%;
  float: left;
}

.spinner > div {
  opacity: .8;
  text-transform: uppercase;
  font-family: "ArchivoNarrow-Bold";
  width: 50px;
  margin-right: 10%;
  height: 50px;
  background-color: yellow;
    color: white;
  border-radius: 100%;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    transform: rotate(90deg);
    color: white;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
      background-color: cyan;
}

.spinner .bounce2 {
    color: white;
      transform: rotate(-90deg);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
      background-color: magenta;
}

.spinner .bounce4 {
    transform: rotate(90deg);
  color: white;
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
      background-color: #C0C0C0;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(2.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% {
    -webkit-transform: scale(3.0);
    transform: scale(3.0);
  }
}



.📖-running-header {
  font-family: "ArchivoNarrow-Regular";
  text-transform: uppercase;
  color: #C0C0C0;
}

.📖-right .📖-running-header {
  font-size: 2.5vw;
  font-style: italic;
  right: var(--bindery-margin-outer);
  top: 95%;
  text-align: right;
}

.📖-left .📖-running-header {
  font-size: 2.5vw;
  font-style: italic;
}

.titleBook {
  font-family: "ArchivoNarrow-Bold";
  font-size: 20vw;
}

/*
PROJETS QUOI */
h1 {
  font-family: "ArchivoNarrow-Bold";
  font-size: 9vw;
  text-transform: uppercase;
  margin-top: 0%;
  margin-bottom: 1%;
  margin-left: 2%;
  text-align: left;
}

h2 {
  font-family: "ArchivoNarrow-SemiBold";
  font-size: 2.8vw;
  margin: 0%;
}



.texteInfos>span {
  font-family: "ArchivoNarrow-SemiBold";
}

.texteInfos>span:first-child {
  font-size: 3.5vw;
  font-family: "ArchivoNarrow-Italic";
}
.texteInfos{ }
.texteInfos>span:last-child {
  font-size: 3vw;
  text-decoration: underline;
  text-transform: uppercase;
}
.syno{ padding-bottom: 3%;}
.syno>p{
  font-family: "ArchivoNarrow-Italic";
  font-size: 2vw;
  margin-block-start: 0%;
  columns: 1;
  width:85%;
  margin-block-end: 2%;
}
.syno>span:first-child{
  font-family: "ArchivoNarrow-Bold";
  font-size: 2vw;
}
.extraitText{font-family: "ArchivoNarrow-Regular";
font-size: 2vw;}
.extraitText > p{
  font-family: "ArchivoNarrow-Bold";
  font-size: 2.3vw;
  columns: 2;
  margin-block-end: 0%;
}

.articleTexte > .ndbp {
  position: relative;
  display: block;
  margin-top: 10%;
  padding-top: 2%;
  border-top: solid .5pt black;
}

.ndbp>p {
  font-family: "ArchivoNarrow-Regular";
  font-size: 2vw;
  margin-block-start: 0em;
  margin-block-end: .7vw;
}

.ndbp>span {
  float: left;
  padding-right: 1%;
  font-size: 2vw;
  font-family: "ArchivoNarrow-SemiBold";
}

.ndbp>span::after {
  content: " -";
}

/*BIOGRAPHIE LAYOUT*/
.infoPro {
  font-size: 2.3vw;
  font-family: "ArchivoNarrow-Regular";
  columns: 2;
  padding-bottom: 1%;
}

.infoPro>p {
  margin-block-start: 0;
  margin-block-end: 2%;
}

.biogTxt>p {
  /*margin-top: 8%;*/
  font-size: 2.4vw;
  font-family: "ArchivoNarrow-Regular";
}

.CV {
  columns: 2;
}

.titreCV {
  font-size: 2vw;
  text-transform: uppercase;
}

.titreCV:not(:first-child) {
  margin-top: 2vw;
}

.contentCV {
  padding-left: 7%;
  padding-top: 1%;
}

.contenu {
  margin-block-end: 0em;
  margin-block-start: 0em;
}

.contenu span {
  font-size: 1.5vw;
}

.contenu>.date01 {
  font-family: "ArchivoNarrow-Bold";
  font-kerning: 10em;
}

.contenu>.date02 {
  font-family: "ArchivoNarrow-Bold";
  font-kerning: 10em;
}

.contenu>.titre {
  font-family: "ArchivoNarrow-Regular";
  text-transform: uppercase;
}

.contenu>.lieu {
  font-family: "ArchivoNarrow-Italic";
}

.motivTxt {
  font-family: "ArchivoNarrow-Regular";
}

.motiv>p {
  font-size: 2.7vw;
  font-family: "ArchivoNarrow-Regular";
}

/* CARTEL DESIGN */
.cartel {
  padding: 2%;
  width: 100%;
  position: fixed;
      bottom: 3%;
}

.articlePubli {
  position: relative;
  margin-top: 3vw;
  display: none;
}

.articleName {
  display: flex;
  flex-direction: column;
  line-height: 10vw;
  padding-top: 1%;
  margin-right: 7%;
}

/*titre*/
.articleTitre {
  font-size: 7vw;
  font-family: "ArchivoNarrow-Bold";
  text-transform: uppercase;
  /*border-top: solid .3pt black; */
}

/*date*/
.articleDate {
  font-size: 7vw;
  font-family: "ArchivoNarrow-Regular";
  margin-top: -4%;
}

.cartelResultat {
  margin: 0;
  display: flex;
}

.articleCaract{
    border-top: 0.5pt solid black;
}

.operation {
  padding: 0%;
  margin: 0%;
  font-family: "ArchivoNarrow-Bold";
  font-size: 2vw;
  display: none; /*flex;*/
  width: 15%;
}

.resultat {
  font-family: "ArchivoNarrow-Bold";
  font-size: 3.5vw;
  padding: 0;
  text-align: left;
  margin-right: 8vw;
}

.sf {
  font-family: "ArchivoNarrow-Bold";
  font-size: 7vw;
  padding: 32pt;
  position: absolute;
  right: 0;
  z-index: 1000;
  bottom: 0;
}

.legendary {
  font-family: "ArchivoNarrow-Regular";
  font-size: 2vw;
  width: 100%;
  color: #C0C0C0;
}
/*
.legendary::before {
  content: "• ";
} */

.legendaryPlus {
  font-family: "ArchivoNarrow-Regular";
  font-size: 2vw;
  color: #C0C0C0;
}

.legendaryPlus::before {
  content: " ";
}

.legendaryBig {
  font-family: "ArchivoNarrow-Regular";
  font-size: 2vw;
  bottom: 107vw;
  transform: rotate(-90deg);
  left: 84vw;
  width: 100%;
  color: #C0C0C0;
}

.imgFirst {
  width: 100%;
  height: 100%;
  margin-left: 0%;
}
.imgProjet{

}
.figFirst{
    /*  margin-top: -12%;*/
      margin-left: 1%;
      width: 95%;
}
.figSecond{
  /*    margin-top: 10%;*/
      margin-left: 1%;
      width: 95%;
}

.imgPlus {
  position: relative;
  display: block;
  width: 100%;
  margin-left: 1%;
  margin-top: 10%;
}

.figure {
  width: 100%;
  z-index: 10;
}

.figure01 {
  width: 100%;
}

.bigFigure {}

.bigFig {
  width: 110%;
  margin-top: 0%;
  margin-left: -3%;
}

figcaption {
  font-family: "ArchivoNarrow-Bold";
  font-size: 7vw;
  z-index: 1000;
}
.titrePortfolio{
  position: absolute;
}

.couvertureImgSize {

  /*width: 90%;
      margin-top: -12%;
      margin-left: -15%; */
}


.couvertureImgSizeBack {
  z-index: 100;
  margin: 0%;

  width: 90%;
}
.Front{  }
.Front > span{ font-size: 10vw; font-family: "ArchivoNarrow-Bold";}
.Front > span:last-child { position: fixed; bottom: 2%;}
.imgCover{ width: 100%; position: relative; display: block;}

.infoColophon {
  z-index: 1000;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.infoColophon p {
  font-family: "ArchivoNarrow-Regular";
  color: white;
  font-size: 3vw;
  text-align: center;
}

/* RESPONSIVE */
/* :::::::TABLETTE::::::::::::: */
/*::::::TEST:::::::*/
@media screen and (max-width: 819px) {
  .articleTitre {
    font-size: 10vw;
  }

  .articleDate {
    font-size: 10vw;
  }

  .cartel {
    padding: 2%;
    width: 100%;
    position: relative;
    top: 8vw; }

  .resultat {
    font-size: 5vw;
    margin-left: 15vw;
    margin-right: 8vw;
  }

  .operation {
    font-size: 5vw;
  }

  .texteInfos > span:first-child {
    font-size: 5vw;
  }

  .texteInfos > span:last-child {
    font-size: 8vw;
  }

  .articleTexte>p {
    font-size: 3vw;
  }

  .📖-right .📖-running-header {
  font-size: 4vw;
  }

  .📖-left .📖-running-header {
  font-size: 4vw;

}
@media screen and (min-width: 600px) and (max-width: 959px) {

}

}