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


/* ------------------------------------------------------------------ Styles personnalisables */
:root {
  /* font-size & spacing */
	--spacing: 40px;
  --basesize: 4vw;
  /* colors */
  --paleblue: #BEE1F0;
	--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:rgb(0, 132, 255);
}

/*.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/Ecole-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Ecole";
  src: url("fonts/Facade-Ouest.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Ecole";
  src: url("fonts/Facade-Ouest.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

body{
	font-family: "Ecole";
	background:white;
	color:#000000;
}
article {
  position:absolute; 
  inset:0; 
	padding: var(--spacing);
  background: #020024;
  background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
	color: white;
  text-align:left;
	font-size: var(--basesize);
	line-height: 1.25;
  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: 20em; }


/* Taille par défaut des images et vidéos */
/* Taille par défaut des images et vidéos */
img, video, iframe { 
  border: none;
  max-width:100%; 
  max-height:100%; 
  margin:0; 
  display:block;
  position: absolute;
  inset: var(--spacing);
  object-fit: contain;
  z-index: 8;
  height: calc(100% - var(--spacing) * 2);
  width: calc(100% - var(--spacing) * 2);
  object-position: right center;
}
video,
iframe{ width: auto; aspect-ratio: 4/3; inset: unset; right: var(--spacing); top: var(--spacing); position: absolute;}
iframe { background: white; }
video { aspect-ratio: 16/9;}

.map{
  object-position: left;
  margin-top: 10vw;
  max-height: 60%;
}

#insecta{
  margin-top: 15vw;
  margin-left: -70vw;
  max-height: 70%;
}

#arbre{
  margin-top: -5vw;
}

#arbre1{
  max-height: 50%;
  z-index: 99;
  object-position: right;
  margin-top: 25vw;
}

#carte{
  max-height: 70%;
}

.gif{
  max-height: 50%;
  position: absolute;
  margin-right: 5px;
  margin-top: 300px;
}

#stardust{
  margin-top: 10vw;
  max-height: 70%;
}

.medium{
  max-height: 70%;
  margin-top: 10vw;
  object-position: center;
}

#fox{
  max-height: 40%;
  
}

#riri{
  margin-left: 20vw;
}

/* Images “fullscreen” */
.cover img, .cover video, .cover iframe { width:100%; height:100%; object-fit:cover; inset:0 }

/* 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, 0, 234);}
.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 */


/* ------------------------------------------------------------------ Vue grille */
.grid {
  --basesize: calc(2vw / 4.5);
  overflow: auto;
  background: #eee;
  padding: 2em; 
}

.grid .slides {
  position: static;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2em; 
}

.grid article {
  display: flex;
	align-items: flex-start;
	justify-content: flex-start;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  padding: 1em !important;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.grid article::after {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 18px;
  content: attr(data-id);
  background: black;
  color: white; 
  width: 3ch;
  text-align: center;
  empty-cells: 3; 
  line-height: 1.5;
  z-index: 100;
}

.grid .embed { align-self: center; }

.grid .embed::before {
  position: absolute;
  inset: 0;
  content: attr(rel);
  -ms-flex-item-align: center;
  align-self: center;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-size: 2em;
  padding: 2em;
  word-break: break-all;
  margin: 0 auto;
  color: yellow; 
}

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

#bar { 
  position:fixed; 
  bottom:0; 
  height:2px; 
  width:0;
  background:white; 
}
#bar.animated { 
  /* triggered at every slide change in pechakucha mode */
  animation:baranim var(--duration, 20s) linear 1 forwards; 
}
@keyframes baranim {
	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
  }
}