/* ------------------------------------------------------------------ Styles fonctionnels */
*, *::before,*::after{ box-sizing: border-box; }
body{ margin:0; overflow:hidden; }


/* ------------------------------------------------------------------ Styles personnalisables */
:root {
  /* font-size & spacing */
	--spacing: 50px;
  --basesize: 2.2em;
  /* colors */
  --paleblue: #ffffff;
	--pink: #AF96DC;
	--stone: #E8CEAB;
	--powder: #F8D0C7;
	--yellow: #FDD652;
	--orange: #FF5B13;
	--red: #EF2814;
	--marroon: #855A3C;
	--kaki: #928505;
	--graygreen: #B0B685;
	--green: #00B25B;
	--blue: #1997D7;
	--purple: #7d5bed;
  /* grays */
	--gray: #BEBEBE;
  --darkgray: #333;
  /* variable background color */
  --bgcolor:black;
}

.paleblue {background: var(--paleblue); --bgcolor:var(--paleblue)}
.pink {background: var(--pink); --bgcolor:var(--pink)}
.gray {background: var(--gray); --bgcolor:var(--gray)}
.stone {background: var(--stone); --bgcolor:var(--stone)}
.powder {background: var(--powder); --bgcolor:var(--powder)}
.yellow {background: var(--yellow); --bgcolor:var(--yellow)}
.orange {background: var(--orange); --bgcolor:var(--orange)}
.red {background: var(--red); --bgcolor:var(--red)}
.marroon {background: var(--marroon); --bgcolor:var(--marroon)}
.kaki {background: var(--kaki); --bgcolor:var(--kaki)}
.graygreen {background: var(--graygreen); --bgcolor:var(--graygreen)}
.green {background: var(--green); --bgcolor:var(--green)}
.blue {background: var(--blue); --bgcolor:var(--blue)}
.purple {background: var(--purple); --bgcolor:var(--purple)}
.darkgray {background: var(--darkgray); --bgcolor:var(--darkgray)}


@font-face {
  font-family: "Ecole";
  src: url("fonts/Venus+Acier.otf") format("woff2");
  font-weight: normal;
  font-style: normal;
}




body{
	font-family: "Ecole";
	background:white;
	color:#000;
}
article {
  position:absolute; 
  inset:0; 
	padding: var(--spacing);
  background:#000;
	color: white;
  text-align:left;
	font-size: var(--basesize);
	line-height: 1;
  text-wrap: balance;
  flex-direction: column;
  display:none; 
}

article.visible{ 
  display:flex; 
  align-items: flex-start; 
  justify-content: flex-start; 
}

article > * { margin: 0; }

a { color: currentColor; }
p { max-width: 90vw; font-style: italic; font-size: 0.7em; margin-left:0vw;
  line-height: 1.3em;

z-index: 1;}


.capture{
  margin-left:50vw;
}

.capture2{
  margin-left:60vw;
  z-index: 8;
 
}



h1{z-index: 1;}

#titre{color: #000;}
#titre2{color: #000; margin-left: 0vw;}

.droite{color: rgb(17, 17, 17); margin-left: 40vw;}




#image1{
  margin:0; 
  
  position: absolute;
 z-index: 8;
  width: 40vw;
  padding-left: 1vw;
  padding-top: 30vh;
}


#image2{
   margin:0; 
  z-index: 8;
  position: absolute;
 
  width: 60vw;
  padding-left: 1vw;
  padding-top: 20vh;
}


#image3{
   margin:0; 
  
  position: absolute;
 z-index: 8;
  width: 25vw;
  padding-left: 1vw;
  padding-top: 60vh;
}


#image4{
   margin:0; 
  
  position: absolute;
 z-index: 8;
  width: 55vw;
  padding-left: 1vw;
  padding-top: 20vh;
}


#image5{
   margin:0; 
  
  position: absolute;
 z-index: 8;
  width: 45vw;
  padding-left: 1vw;
  padding-top: 45vh;
}

#image6{
   margin:0; 
  
  position: absolute;
 z-index: 8;
  width: 35vw;
  padding-left: 1vw;
  padding-top: 35vh;
}


#image7{
   margin:0; 
  
  position: absolute;
 z-index: 8;
  width: 25vw;
  padding-left: 1vw;
  padding-top: 25vh;
}


#image8{
   margin:0; 
  
  position: absolute;
 z-index: 8;
  width: 45vw;
  padding-left: 1vw;
  padding-top: 25vh;
}




#image9{
   margin:0; 
  
  position: absolute;
 z-index: 8;
  width: 15vw;
  padding-left: 1vw;
  padding-top: 25vh;
}
























/* Taille du texte */
small, .smalltext{ font-size: calc(.75 * var(--basesize)); line-height:1.4}
h2, .bigtext{ font-size: calc(1.5 * var(--basesize)); line-height:1.1}
h1, .hugetext{ font-size: calc(2.5 * var(--basesize)); line-height:1}

/* Text color */
.blacktext {color: rgb(255, 255, 255);}
.whitetext {color: white;}

/* intégration youtube, vimeo, etc. */
.embedded {	background: white; position: absolute; inset: var(--spacing);}
.embedded iframe { position: absolute; inset: 0; width: 100%; height: 100%; }


/* background-color on text content (when following img, video or iframe) */
article p:has(img) ~ *,
article p:has(video) ~ *,
article iframe ~ * {
  position: relative;
  z-index: 10;
}
article p:has(img) ~ * span,
article p:has(video) ~ * span,
article:has(iframe) * span {
  background: var(--bgcolor, black);
  border-radius: .5em;
  box-decoration-break: clone;
  padding: .05em .25em;
}
/* trick to put last paragraph at the bottom */
article p:last-of-type:not(p:first-child){
  position: absolute;
  bottom: calc(var(--spacing) * 2);
}



/* ------------------------------------------------------------------ Timer animation */

#bar { 
  position:absolute; 
  z-index: 0;
  bottom:0; 
  height:100vh; 
  width:0;
  background:rgb(17, 17, 17); 
}
#bar.animated { 
  /* triggered at every slide change in pechakucha mode */
  animation:baranim var(--duration, 10s) linear 1 forwards; 
}
@keyframes baranim {
	100% {width:100%; }
}



#bar2 { 
  position:absolute; 
  z-index: 10;
  bottom:0; 
  height:1vh; 
  width:0;
  background:rgb(255, 255, 255); 
}
#bar2.animated2 { 
  /* triggered at every slide change in pechakucha mode */
  animation:baranim2 var(--duration, 20s) linear 1 forwards; 
}
@keyframes baranim2 {
	100% {width:100%; }
}



















/* ------------------------------------------------------------------ Print / PDF */
@media print {
  @page {
    margin: 0;
    size: 29.7cm 21cm;
    margin: 1cm;
    
  }
  body {
    --basesize: 14pt;
    --spacing: .5cm;
    overflow: auto;
    margin: 0;
  }
  main {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* hardcoded height… */
    grid-template-rows: 9cm;
    gap: 1cm; 
  }
  article {
    position: relative;
    inset: unset;
    display: flex;
    align-items: flex-start; 
    justify-content: flex-start; 
    margin: 0;
    /* hardcoded height… */
    height: 9cm;
  }
  #bar  { display: none; }
  .embedded::before {
    content: attr(rel);
    z-index: 2;
    position: absolute;
    bottom: 0;
    left: 0;
    color: white;
    background: #000;
    padding: .5em .75em;
    font-size: .5em;
  }
}


/* ------------------------------------------------------------------ Repsonsive mobile (portrait) view */

@media screen and (orientation:portrait) {
  main {
    scroll-snap-type: y mandatory;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100dvh;
  }
  article { 
    scroll-snap-align: start;
    position:relative; inset:unset; min-height: 100dvh; display:flex; align-items: flex-start-start; justify-content: flex-start; }
  article::before{
    content:"" ;
    display: block;
    border-bottom: 1px solid rgba(0,0,0,.4);
    left: calc(-1 * var(--spacing));
    right: calc(-1 * var(--spacing));
    width: calc(100% + var(--spacing) * 2);
    bottom: 0;
    position: absolute;
  }
  .smalltext {
    font-size: calc(.75 * var(--basesize));
  }
}

@media (max-width:450px) {
  :root {
    --basesize: 16px;
    --spacing: 20px
  }
}