@import url('https://rsms.me/inter/inter.css');

:root{
  --unit: 17.5px;
  --unit-horizontal: 1.43vw;
}

::selection {
  background-color: black;
  color: white;
}

html { font-family: 'Inter', sans-serif; }

@supports (font-variation-settings: normal) {
  html { font-family: 'Inter var', sans-serif; }
}

html{
  font-size: 14px;
  line-height: 17px;
}

body {
  margin: var(--unit) var(--unit-horizontal);
  margin-top: 0;
  font-weight: 650;
  overflow-y: scroll;
}

h1,
h2,
h3,
h4{
  font-size: 1rem;
  margin: 0;
  padding: 0;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

.thinsp{
  letter-spacing: -0.15rem;
}

sup {
  line-height: 0;
}

p {
  margin: 0;
  margin-left: 1fr;
  text-indent:var(--unit-horizontal);
}


p:nth-of-type(1),
p.is-empty + p {
  text-indent: 0px;
}


sup {
  line-height: 0;
}

ul {
margin: 0;
padding: 0;
margin-left: var(--unit-horizontal);
}

ul li{
  list-style: none;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(65, 1fr);
}

.list {
  grid-template-columns: repeat(65, 1fr);
}
.list:hover,
.list.is-open~.list:hover,
.list.is-open~.list.is-open~.list:hover {
  cursor: s-resize;
  text-decoration: underline;
}

.list.is-open~.list:not(.list.is-open) {
  position: relative;
  z-index: 6;
  background: white;
}

.list:nth-child(1) {
  padding-top: 2px;
}

.list.is-open {
  position: sticky;
  top: 60px;
  background: white;
  z-index: 5;
  cursor: n-resize;
}

.list.is-open{
  border-top: 0;
  padding-top: 0;
  margin-top: -(var(--unit));
}

.list div{
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

.list .title{
  text-align: center;
}

.list .dates,
.list .code{
  text-transform: uppercase;
}

.hidden {
  display: none;
}

.visible {
  display: grid;
}

.nav {
  position: fixed;
  top: 0;
  left: var(--unit-horizontal);
  right: var(--unit-horizontal);
  background: white;
  z-index: 10;
  padding: 0px;
  padding-bottom: calc(var(--unit) /1);
  padding-top: calc(var(--unit) /2);
}

.wrapper.nav br {
  display: none;
}

.nav a{
  display: block;
}

.nav .infos-content {
  display: none;
}

.nav .infos-content.visible {
  display: initial;
  padding-bottom: var(--unit);
}

.titles {
  background: white;
  position: fixed;
  left: var(--unit-horizontal);
  right: var(--unit-horizontal);
  top: calc(var(--unit) * 4);
  z-index: 10;
  border-bottom : 1px solid;
  border-top: 1px solid;
}

.titles.has-padding {
  padding-bottom: var(--unit);
}

.titles div{
  margin-top: -1px;
}

.titles .title{
  text-align: center;
}

main {
  margin-top: calc(var(--unit) * 4 - 1px);
  margin-bottom: calc(var(--unit) * 2);
}

main.infos {
  margin-top: calc(var(--unit) * 4 - 1px);

}


main h2.in-progress{
  font-size: 3rem;
  padding-top: var(--unit-horizontal);
  font-weight: 350;
}

.grid {
  position: fixed;
  left: var(--unit-horizontal);
  right: var(--unit-horizontal);
  background-color: transparent;
  height: 100%;
  top: -3px;
  z-index: 15;
  color: lightblue;
  /* background-image: url('../img/ligneDeBase2.svg'); */
  pointer-events: none;
}

.grid div {
  outline: 1px solid;
  margin: 5px 0;
  font-size: 12px;
  display: none;
}

.mainImage img {
  max-width: 100%;
}

.mainImage iframe {
  width: 100% !important;
  background-color: black;
}

.images {
  margin-bottom: var(--unit);
}

.images img {
  max-height: 80vh;
  max-width: 50vw;
  max-width: calc(50vw - (var(--unit-horizontal) * 2));
  margin-right: calc(var(--unit-horizontal) / 2);
  margin-top: calc(var(--unit) / 2);
}
.wrapper.about br{
  display: none;
}

.wrapper.about img{
  max-width: 100%;
}

.one {
  grid-column: 1 / 66;
}

.two {
  grid-column: 1 / 33;
}

.two2 {
  grid-column: 34 / 66;
}

.three {
  grid-column: 1/22;
}

.three2 {
  grid-column: 23/44;
}

.three3 {
  grid-column: 45/66;
}

.six {
  grid-column: 1/11;
}

.six1to2 {
  grid-column: 1/22;
}

.six2 {
  grid-column: 12/22;
}

.six2to3 {
  grid-column: 12/33;
}
.six2to6 {
  grid-column: 12/68;
}
.six3 {
  grid-column: 23/33;
}

.six3to5 {
  grid-column: 23/56;
}

.six4 {
  grid-column: 34/44;
}

.six5 {
  grid-column: 45/56;
}

.six6 {
  grid-column: 57/68;
}

.eleven {
  grid-column: 1/6;
}

.eleven1to2 {
  grid-column: 1/12;
}

.eleven1to3 {
  grid-column: 1/18;
}

.eleven2 {
  grid-column: 7/12;
}

.eleven2to3 {
  grid-column: 7/18;
}

.eleven2to4 {
  grid-column: 7/24;
}

.eleven2to5 {
  grid-column: 7/30;
}

.eleven2to6 {
  grid-column: 7/36;
}

.eleven2to8 {
  grid-column: 7/44;
}

.eleven2to10 {
  grid-column: 7/56;
}

.eleven2to11 {
  grid-column: 7/68;
}

.eleven3 {
  grid-column: 13/18;
}

.eleven3to5 {
  grid-column: 13/30;
}
.eleven3to6 {
  grid-column: 13/36;
}

.eleven4 {
  grid-column: 19/24;
}

.eleven4to5 {
  grid-column: 19/30;
}

.eleven4to6 {
  grid-column: 19/36;
}

.eleven4to7 {
  grid-column: 19/27;
}

.eleven4to6 {
  grid-column: 19/36;
}

.eleven4to10 {
  grid-column: 19/36;
}

.eleven5 {
  grid-column: 25/30;
}
.eleven5to6 {
  grid-column: 25/36;
}

.eleven5to7 {
  grid-column: 25/42;
}

.eleven6 {
  grid-column: 31/36;
}
.eleven6to7 {
  grid-column: 31/42;
}
.eleven6to8 {
  grid-column: 31/48;
}

.eleven6to9 {
  grid-column: 31/54;
}

.eleven7 {
  grid-column: 37/42;
}

.eleven7to8 {
  grid-column: 37/48;
}

.eleven7to9 {
  grid-column: 37/54;
}

.eleven7to10 {
  grid-column: 37/60;
}

.eleven7to11 {
  grid-column: 37/66;
}

.eleven8 {
  grid-column: 43/48;
}

.eleven8to9 {
  grid-column: 43/54;
}

.eleven8to10 {
  grid-column: 43/60;
}

.eleven8to11 {
  grid-column: 43/66;
}

.eleven9 {
  grid-column: 49/54;
}

.eleven9to10 {
  grid-column: 49/60;
}

.eleven9to11 {
  grid-column: 49/66;
}

.eleven10 {
  grid-column: 55/60;
}

.eleven10to11 {
  grid-column: 55/66;
}

.eleven11 {
  grid-column: 61/66;
}

@media screen and (max-width: 1500px) {
  .six2to3{
    grid-column: 12/36;
  }
  .wrapper.about .eleven7to9{
    grid-column: 37/66;
  }

}

@media screen and (max-width: 1300px) {
  .wrapper {
    display: grid;
    grid-template-columns: repeat(65, .5fr);
  }
  .six2to3{
    grid-column: 12/44;
  }
}

@media screen and (max-width: 1000px) {
  .six2to3{
    grid-column: 1/44;
  }
  .eleven2to6{
    grid-column: 7/54;
  }
  .eleven8to10 {
    grid-column: 55/65;
  }

  .wrapper.about .eleven2to6 {
    grid-column: 7/36;
  }

}

@media screen and (max-width: 600px) {
  
  main {
    margin-top: 0;
  }

  main.infos {
    margin-top: 0;
  }

  .wrapper {
    display: grid;
    grid-template-columns: repeat(6, .5fr);
  }

  .wrapper.nav {
    display: block;
    position: relative;
    column-count: 2;
  }

  .wrapper.nav br {
    display: initial;
  }

  .wrapper.about {
    display: flex;
    flex-direction: column;
  }

  .wrapper.about br{
    display: initial;
  }


  .wrapper.about div:nth-of-type(1) {
    order: 1;
  }

  .wrapper.about div:nth-last-of-type(1) {
    order: -1;
  }

  .wrapper.about ul{
    margin-left: 74px;
  }

  .wrapper.nav div:nth-of-type(1) {
    margin-bottom: var(--unit-horizontal);
  }

  .images img {
    width: 100%;
    height: auto;
    max-width: none;
    margin-top: calc(var(--unit) / 6);
  }

  .titles{
    display: none;
  }
  
  .six{
    grid-column: 1/4;
  }

  .six2{
    grid-column: 4;
  }

  .six3{
    grid-column: 6;
  }

  .six2to3,
  .eleven2to6,
  .eleven8to10 {
    grid-column: 1/7;
    padding-right: var(--unit-horizontal);
  }

  .list div:not(.list div.title):not(.list div.code):not(.list div.dates){
    display: none;
  }

  .list .code{
    grid-column: 1/2;
  }

  .list .title{
    grid-column: 2/6;
  }

  .list .dates{
    grid-column: 6;
  }

}