/* ------------------------------------------------------------------ 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: #fd89ff;
	--pink: #ffbbf5;
	--stone: #e3abe8;
	--powder: #F8D0C7;
	--yellow: #ff80e6;
	--orange: #ff85df;
	--red: #ff8efd;
	--marroon: #ff81f7;
	--kaki: #ff64ed;
	--graygreen: #ff72e1;
	--green: #ff91d1;
	--blue: #ff8be0;
	--purple: #ff99f0;
  /* grays */
	--gray: #ffbad9;
  --darkgray: #f45dff;
  /* variable background color */
  --bgcolor:rgb(255, 153, 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/Ecole-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

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


@font-face {
    font-family: 'Almendra';
    src: url('fonts/Almendra-Bold.woff2') format('woff2'),
        url('fonts/Almendra-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

#titre{font-family: 'Almendra';}

body{
	font-family: "Ecole";
	background:white;
	color:#ffffff;
}
article {
  position:absolute; 
  inset:0; 
	padding: var(--spacing);
  background:#000;
	color: rgb(255, 255, 255);
  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;}

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

/* ------------------------------------------------------------------ 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
  }
}
 .diap1{width: 30vw;
left: 35%;
top: -5%;

}
  .diap2{width: 30vw;
  left: 67%;
  top: -5%;

}
   .diap3{width: 30vw;
    top: -5%;
}
  .graygreen  p{ 
    padding-bottom: 10pt;
  }
.green p{ 
    padding-bottom: -20pt;
  }

.dip{ padding-right: 60%;}
.vid{z-index: 0;}
h2{ z-index: 3;
font-family: 'Almendra';}


.white{ 
  color: #ffffff;
}

.dessu{ 
  z-index: 3;
  width: 30%;
}
.dessou{z-index: 0;
width: 80%;}
.black { color: #000;}
.para { font-size: 65%;}