/* ------------------------------------------------------------------ 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;
  --fonduesavoyarde: rgb(246, 136, 40) ;
	--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;
  --white: #ffffff;
  /* variable background color */
  --bgcolor:rgb(255, 255, 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)}
.white {background: var(--white); --bgcolor:var(--white)}

@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;
}

body{
	font-family: "Ecole";
	background:white;
	color:#000;
}
article{
  position:absolute; 
  inset:0; 
	padding: var(--spacing);
  background:#74cbbb;
	color: rgb(246, 136, 40);
  text-align:left;
	font-size: var(--basesize);
	line-height: 1.25;
  text-wrap: balance;
  display:none; 
}
article:not(.illus,.illusmall){
  flex-direction: column;
}

.illus{
  flex-direction: row;
  justify-content: space-around;
  gap: 1em;}
.illusmall{
  flex-direction: row;
  gap: 0.5em;}

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 { 
  max-width:100%; 
  max-height:100%; 
  border: none;
  margin:0; 
  display:block;
  inset: var(--spacing);
  object-fit: contain;
  z-index: 8;
}


.canicule{
  width: 70%;
  height: 70%;
  margin-left: 10px;
}

.videoo{
  width: 50%;
  height: 50%;
  margin-left: 700px;
  margin-top: 80px;
}

img.small {
  position: relative;      
  width: 40%;              

  margin: auto;            
  inset: unset;            
  display: block;
}

img.medium {
  position: relative;
  width: 70%;
  height: auto;
  margin: auto;
  inset: unset;
  display: block;
}

img.right {
  position: relative;   
  margin-left: auto;    
  margin-right: 10px;
  margin-bottom: 10px;
  display: block;
  inset: unset;         
}

.deuxcolonnes{
  display: flex;
  flex-direction: row;
}


/* video{
  height: calc(100% - var(--spacing) * 2);
  width: calc(100% - var(--spacing) * 2);
   aspect-ratio: 16/9;
} */

/* video,
iframe{ width: auto; aspect-ratio: 4/3; inset: unset; right: var(--spacing); top: var(--spacing);} */
iframe { background: white; }

/* 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;margin-bottom: 0.4em;}
.verysmalltext {font-size: calc(.50 * var(--basesize)); line-height:1.6;max-width: 30em;margin: -0.7em 0 0.4em 0;}
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: black;}
.whitetext {color: white;}
.pinktext  {color: #AF96DC;}

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

}

.signature{right: 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 (orientation:portrait) and (media:scren) {
  main {
    scroll-snap-type: y mandatory;
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100vh;
  }
  article { 
    scroll-snap-align: start;
    position:relative; inset:unset; height: 100vh; 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;
  }
}