:root{
  --unit: 18px;
}

::selection {
  background-color: teal;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

html {
  font-family: 'roboto-AP-regular';
  font-size: var(--unit);
}

body {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(17, 1fr);
  gap: 0px 0px;
}

/* global */

h1,
h2,
h3,
h4,
H5,
strong {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-family: 'roboto-AP-bold';
  line-height: 120%;
}

ul,
ul li {
  padding: 0;
  margin: 0;
  list-style: none;
}

a{
  color: inherit
}

em {
  font-style: normal;
  font-family: 'roboto-AP-italic';
}

strong em {
  font-family: 'roboto-AP-boldItalic';
}

p{ 
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1.25rem;
}

p a:hover{
  font-family: 'roboto-AP-italic';
  letter-spacing: 0.025rem;
}

.mobile {
  display: none;
}

main {
  grid-area: 2 / 2 / 18 / 6; 
  overflow-y: auto;
  padding-top: var(--unit);
}

#page-1 main,
#page-1029 main {
  grid-area: 2 / 2 / 13 / 6; 
}

main h2,
main ul {
  padding-left: calc(var(--unit) / 2);
}

main a:hover h3 {
  font-family: 'roboto-AP-boldItalic';
}

main .projet a:hover {
  display: inline-block;
  transform: rotate(1deg);
}

main p {
  max-width: 1200px;
}

main p {
  text-indent: calc(var(--unit) * 2);
}

main p:nth-child(1),
main img+p,
main h1+p,
main h2+p,
main h3+p,
main h4+p,
main h5+p,
main p.video { 
  text-indent: 0;
}

/* Motifs */

.motifs img {
  position: fixed;
  mix-blend-mode: multiply;
  mix-blend-mode: soft-light;
  z-index: 50;
  pointer-events: none;
  transform-origin: center;
}

/* acid pixel */

.acidPixel{
  width: 2px;
  height: 2px;
  background: red;
  animation: color 2s infinite;
  position: fixed;
  left: 8.33VW;
  top: 50vh;
}

@keyframes color {
  0% { background: red;}
  20% { background: blue;}
  30% { background: orange;}
  50% { background: green;}
  70% { background: yellow;}
  80% { background: purple;}
  100% { background: gold;}
}

/* nav */

nav {
  font-family: 'roboto-AP-bold';
  text-align: center;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr 0fr;
  gap: 0px 0px;
  grid-template-areas:
    "logo menu menu menu menu menu"
    ". . . . . .";
  grid-area: 1 / 1 / 2 / 7;
  position: relative;
  z-index: 10;
}

nav a {
  text-decoration: none;
}

nav a:hover {
  font-family: 'roboto-AP-boldItalic';
}

nav .logo{
  grid-area: logo;
}


nav .logo h1 {
  font-size: 2rem; 
}


nav .logo img{
  position: absolute;
  left: var(--unit);
}

nav .logo img:not(.visible){
  display: none;
}

nav > ul {
  grid-area: menu;
  display: flex;
  background: white;
  height: calc(var(--unit) * 3);
}

nav>ul>li{ 
  flex: 1;
  border-left: 1px solid;
}

nav ul li ul {
  background: white;
  border: 1px solid;
  border-top: none;
  margin: 0 -1px;
  max-height: 50vh;
  overflow-y: auto;
}

nav details summary::marker {
  content: '';
}

nav details summary:hover {
  cursor: s-resize;
}

details[open] summary:hover {
  cursor: n-resize;
}

nav ul li ul li{
  padding: calc(var(--unit) / 2) 0;
  border-bottom: 1px dotted;
}

nav ul li ul li:first-of-type{
  border-top: 1px dotted;
}

nav>ul>li:nth-of-type(odd) {
  margin-top: var(--unit);
}

nav .imagesLogo img {
  margin-top: var(--unit);
}

/* Home */

.home main{
  grid-area: 2 / 2 / 12 / 6; 
  font-size: 1.5rem;
}

.home main p {
  font-size: 2rem;
  line-height: 2.5rem;
}

.home main #more {
  cursor: pointer;
}

.home main .more {
  font-family: 'roboto-AP-italic';
  display: none;
  width: calc(50% - var(--unit) / 2);
  border: 2px solid;
  border-radius: 30px;
  padding: var(--unit);
  margin-left: 12.5%;
  position: relative;
}

.home main .more .close {
  position: absolute;
  font-size: 75%;
  top: calc(var(--unit) / 1.5);
  right: calc(var(--unit) / 1.5);
}

.home main .more .close:before {
  content: '✕';
}

.home main .more .close:hover {
  transform: scale(1.2);
  cursor: pointer;
}

.home main .more p {
  font-size: 1.25rem;
  line-height: 1.5rem;
}

.home main .more.visible {
  display: block;
}


/* équipes: global */

.artistes main .columns,
.collectifs main .columns,
.projets main .columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
 
.artistes main section,
.collectifs main section,
.projets main section {
 margin: calc(var(--unit) / 4) 0;
}

.artistes main section a:hover img,
.collectifs main section a:hover img,
.projets main section a:hover img {
  display: inline-block;
  transform: rotate(1deg);
 }

.artistes main section h3,
.collectifs main section h3,
.projets main section h3 {
  font-size: 1rem;
  line-height: 1.25rem;
  z-index: 1;
  position: relative;
}

.artistes main section h4{
  font-family: 'roboto-AP-italic';
  line-height: 1.25rem;
}

.artistes main section h4 em{
  font-family: 'roboto-AP-regular';
}

.artistes main section img,
.collectifs main section img,
.projets main section img{
  width: 100%;
  margin: calc(var(--unit) / 4) 0;
}

/* équipe: artistes */

.artistes main .artiste .content {
  font-size: .75rem;
  line-height: .95rem;
}

.artistes main .artiste .socials img{
  height: 30px;
}

/* équipe: partenaires */

.partenaires main .imagesPartenaires {
  text-align: center;
}

.partenaires main .imagesPartenaires img {
  max-height: 100px;
  margin: var(--unit);
}

/* équipe: collectif + projet */

.collectifs main .columns{
  display: initial;
}

.collectifs main .text {
  padding: calc(var(--unit) / 2) 0;
}

.collectifs main section h3 {
  margin-bottom: calc(var(--unit) / 4);
}

.collectifs main h2{
  padding-left: 0;
}

.collectif main,
.Projet main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.collectif main aside,
.Projet main aside {
  grid-column: 1 / 2;
  position: sticky;
  top: 0px; /* À Jyèsiser */
  height: 0;
}

.Projet main aside h2.author-1048{
  color: #FEFB7B;
}

.Projet main aside h2.author-1047 {
  color: #7167BB;
}

.Projet main aside h2.author-1046 {
  color: #70B5B1;
}
.Projet main aside h2.author-1026 {
  color: #AD4B4B;
}

.Projet main aside h2.author-1060 {
  color: #BEFFFD;
}

.collectif main aside a:hover,
.Projet main aside a:hover {
  font-family: 'roboto-AP-italic';
}

.collectif main aside .socials,
.Projet main aside .socials,
.Projet main aside .file {
  display: block;
  padding-left: calc(var(--unit) / 2);
}

.Projet main aside .file:hover {
  font-family: 'roboto-AP-regular';

}

.collectif main aside .socials a,
.Projet main aside .socials a,
.Projet main aside .file a {
  text-decoration: none;
}

.collectif main aside >img{
  width: 50%;
}

.collectif main aside .socials img,
.Projet main aside .socials img {
  height: 30px;
}

.collectif main>img,
.Projet main .content img {
  z-index: 1;
  width: 100%;
  grid-column: 1 / 5;
  padding-bottom: var(--unit);
}

.collectif main .content,
.Projet main .content{
  grid-column: 2 / 5;
  padding: calc(var(--unit) / 2);
  padding-top: 0;
}


/* Projets + projet */

.projets main .en-cours,
.Projet main .en-cours{
  position: absolute;
  transform: scale(.25);
  transform-origin: top right;
  right: 18vw;
  z-index: 1;
}

.projets main h2 {
  margin-bottom: var(--unit);
}

.Projet main .en-cours{
  transform-origin: top left;
  margin-top: 20px;
  right: initial;
}

.projets main .en-cours img,
.Projet main .en-cours img{
  animation: rotate 3s infinite;
}

.projets main .en-cours{
  right: 0;
}

/* souvenirs */

.souvenirs main div.souvenir {
  margin: 10px 0;
}

.souvenirs main div.souvenir .date,
.souvenirs main div.souvenir .event {
  border: 1px solid black;
  padding: 3px;
}

.souvenirs main div.souvenir .event.author-1048 {
  background: #FEFB7B;
}

.souvenirs main div.souvenir .event.author-1047 {
  background: #7167BB;
}

.souvenirs main div.souvenir .event.author-1046 {
  background: #70B5B1;
}

.souvenirs main div.souvenir .event.author-1026 {
  background: #AD4B4B;
}

.souvenirs main div.souvenir .event.author-1060 {
  background: #BEFFFD;
}

.souvenirs main div.souvenir .date {
  text-transform: uppercase;
  background: black;
  color: white;
}
.souvenirs main div.souvenir .content {
  margin: calc(var(--unit) / 2);
}

.souvenirs main div.souvenir iframe {
  width: 50%;
  margin-top: calc(var(--unit) / 2);
  border: 1px solid;
}

.souvenirs main div.souvenir img {
  max-height: 40vh;
  padding: calc(var(--unit) / 2);
}

.souvenirs main div.souvenir .credits,
.souvenirs main div.souvenir a:hover {
  font-family: 'roboto-AP-italic';
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
  
}

/* projets */

.projets main {
  overflow-x: hidden;
}

.projets main .projet {
  position: relative;
}

.Projet main .images{
  grid-column: 2/5;
  margin: calc(var(--unit) / 2);
}

.Projet main .images img{
  cursor: pointer;
}

.Projet main aside .file {
  font-family: 'roboto-AP-italic';
  line-height: 2rem;
}

.Projet main aside .file:before{
  content: '⤻ ';
}

.Projet main .content iframe {
  /* margin-left: 16.5%; */
  width: 66%;
  margin-top: calc(var(--unit) / 2);
  border: 1px solid;
}

.Projet main .slider{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(20, 20, 20, 0.8);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--unit);
  display: none;
}

.Projet main .slider.visible{
  display: flex;

}

.Projet main .slider .button{
  font-size: 3rem;
  color: white;
}

.Projet main .slider .button:hover{
  cursor: pointer;
  transform: scaleX(1.5);
  display: inline-block;
}

.Projet main .slider .button.close{
  position: fixed;
  top: var(--unit);
  right: var(--unit);
}

.Projet main .slider .button.prev:before{
  content: '⎨';
}

.Projet main .slider .button.next:before{
  content: '⎬';
}

.Projet main .slider .button.close:before{
  content: '✕';
}

.Projet main .slider figure{

  display: none;
}

.Projet main .slider figure img{
  max-height: 80vh;
  max-width: 80vw;
}
.Projet main .slider figure figcaption{
  color: white;
  text-align: right;
  font-size: .75rem;
  line-height: .75;
  font-family: 'roboto-AP-italic';
}


.Projet main .slider figure.visible {
  display: initial;
}


/* timeline */

.timeline {
  grid-area: 13 / 1 / 18 / 7; 
  border-top: 1px solid;
  display: flex;
  align-items: start;
  overflow-x: auto;
  overflow-y: hidden;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
  cursor: ew-resize;
}

.timeline .line {
  display: inline-flex;
  flex-direction: row;
}

.timeline .line .day {
  transition: height .5s;
  width: 1vw;
  height: 3vh;
  border-left: 1px dotted transparent;
}

.timeline .line.real-line .day {
  border-left-color: black;
  border-bottom: 1px solid;
  height: 1.5vh;
}

.timeline .line .day.today {
  border-left-color: red;
  border-left-style: solid;
}

.timeline .line .newMounth {
  border-left: 1px solid;
  height: 3vh;
}

.timeline .line .newMounth span {
  padding: 0 5px;
  margin-left: -1px;
  background: black; 
  color: white;
  display: inline-block;
  text-transform: uppercase;
}

.timeline .line .newMounth .year {
  position: fixed;
  left: 0;
  bottom: 0;
  display: none;
}

.timeline .line.events .event {
  border: 1px solid;
  position: absolute;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 250px;
  overflow: hidden;
  margin-left: -1px;
  background: white;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-right: 5px;
}

.timeline .line.events .event:hover {
  z-index: 10;
  cursor: help;
}

.timeline .line.events .event:hover .the-title {
  font-family: 'roboto-AP-boldItalic';
}

.timeline .line.events .event.author-1048:hover,
.timeline .line.events .event.author-1048 + .event-open > .date,
.timeline .line.events .event.author-1048 .the-hour {
  background: #FEFB7B;
}

.timeline .line.events .event.author-1047:hover,
.timeline .line.events .event.author-1047 + .event-open > .date,
.timeline .line.events .event.author-1047 .the-hour {
  background: #7167BB;
}

.timeline .line.events .event.author-1046:hover,
.timeline .line.events .event.author-1046 + .event-open > .date,
.timeline .line.events .event.author-1046 .the-hour {
  background: #70B5B1;
}
.timeline .line.events .event.author-1026:hover,
.timeline .line.events .event.author-1026 + .event-open > .date,
.timeline .line.events .event.author-1026 .the-hour {
  background: #AD4B4B;
}

.timeline .line.events .event.author-1060:hover,
.timeline .line.events .event.author-1060 + .event-open > .date,
.timeline .line.events .event.author-1060 .the-hour {
  background: #BEFFFD;
}

.timeline .line.events .event .the-day {
  padding: 0 5px;
  background: black; 
  color: white;
}

.timeline .line.events .event .the-hour {
  font-family: 'roboto-AP-italic';
  transform: rotate(-7deg) scale(.8);
  display: inline-block;
}

.timeline .line.events .event .the-title {
  border-left: 1px dashed;
  padding-left: 5px;
}

.timeline .line.events .line {
  border-left: 1px solid;
  margin-left: -1px;
  position: absolute;
}

.timeline .line.events .line-one{
  height: 6vh;
}

.timeline .line.events .line-two{
  height: 9vh;
}

.timeline .line.events .line-three{
  height: 12vh;
}

.timeline .line.events .line-four {
  height: 3vh;
  margin-top: -3vh;
}

.timeline .line.events .line-five {
  height: 6vh;
  margin-top: -6vh;
  z-index: -1;
}

.timeline .line.events .line-six {
  height: 9vh;
  margin-top: -9vh;
  z-index: -2;
}
.timeline .event-open {
  position: fixed;
  border-left: 1px solid;
  border-top: 1px solid;
  right: 0;
  bottom: -1px;
  background: white;
  display: none;
  overflow-y: auto;
  z-index: 15;
  height: 29.3vh;
  width: 25vw;
}


.timeline .event-open .close {
  position: absolute;
  right: calc(var(--unit) / 2);
  line-height: 1.75rem;
}

.timeline .event-open .close:before {
  content: '✕';
}

.timeline .event-open .close:hover {
  transform: scale(1.2);
  cursor: pointer;
}

.timeline .event-open.is-open {
  display: block;
}
.timeline .event-open > * {
  padding: calc(var(--unit) / 4) calc(var(--unit) / 2);
}

.timeline .event-open h1 {
  font-size: 1.25rem;
  line-height: 1.2em;
}

.timeline .event-open a:hover {
  font-family: 'roboto-AP-italic';
}

.timeline .event-open > .date{
  padding: 0;
  border-bottom: 1px solid;
}

.timeline .event-open > .date .hour{
  padding-left: calc(var(--unit) / 2);
}

.timeline .event-open > .date .date{
  background: black;
  color: white;
  padding: 5px;
  display: inline-block;
  text-transform: uppercase;
}


/* Contact */

.contact main {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.contact main > * {
  width: calc(100% - var(--unit));
  padding: calc(var(--unit) / 2);
}

.contact main img {
  grid-column: 1 / 4;
}

.contact main section {
  grid-column: 4 / 7;
}

/* footer */

footer {
  font-size: 0.75rem;
  grid-area: 16 / 1 / 18 / 2; 
  align-self: end;
  text-align: left;
  padding: calc(var(--unit) / 2);
}

#page-1 footer,
#page-1029 footer {
  grid-area: 11 / 1 / 13 / 2; 
}


footer p {
  margin-bottom: calc(var(--unit) / 4);
}

footer img {
  height: 30px;
}