:root{
  --fz: 32px;
}
@font-face {
  font-family: 'Inter';
  src: url("font/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url("font/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url("font/Inter-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}




img {
  display: block;
  width: 100%;
  height: auto;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
  margin:0;
}


body{
  margin: 0;
  display:grid;
  background: rgb(38, 38, 38);
  color:#fff;
  font-family: 'Inter', sans-serif;
}

main{
  grid-area: 1/1/-1/-1;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: #244397
}

main:last-child{
  opacity: 0;
  z-index: 9999;
}
main:last-child .feed-item-overlay,main:last-child .feeditem-text{
  opacity: 0;
  transform: translateY(0px);
}

hr{
  margin:1em 0;
  max-width: 600px;
  border: 0;
  border-top: 3px solid rgba(255,255,255,0.5);
}
.t1{
  font-size: calc(var(--fz) * 3);
  margin-bottom:0.75em;
}
.t2{
  font-size: calc(var(--fz) * 1.5);
  margin-bottom:0.75em;
}
.t3{
  font-size: var(--fz);
  margin-bottom:0.75em;

}
.next-slide{
  display: none;
}

.slide-meteo{
  display: grid;
  grid-template-columns:180px 180px repeat(2, 500px) 1fr;
  grid-template-rows: repeat(6, 1fr);
  width: 1920px;
  height: 1080px;
}

.slide-meteo .overlay{
  grid-row: 1/-1;
  grid-column: 1/-1;
  background:  linear-gradient(120deg,rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9));
}

.slide-meteo .desc{
  grid-column: 3/-1;
  grid-row: 2;
  padding: 12px;
}

.slide-meteo .desc .t1{
  margin-bottom: 0.5em;
}
.slide-meteo .day-1{
  grid-row: 3;
  grid-column: 3;
  padding: 24px;
  border-right: 1px solid #fff;
  align-self: center;
}
.slide-meteo .day-2{
  grid-row: 3;
  grid-column: 4;
  padding: 24px;
  border-right: 1px solid #fff;
  align-self: center;

}
.slide-meteo .day-3{
  grid-row: 3;
  grid-column: 5;
  padding: 24px;
  align-self: center;

}
.slide-meteo .sources{
  grid-column: 3/-1;
  grid-row: -2/-1;
  align-self: flex-end;
  padding: 32px 12px;
}

.slide-meteo .wi{
  margin-right: 16px;
}


/* FEED */

.slide-feeditem{
  display:grid;
  grid-template-columns: repeat(5,1fr);
  grid-template-rows: repeat(6,1fr);
  width: 1920px;
  height: 1080px;
}

.slide-feeditem .feeditem-logo{
  grid-column: 1/2;
  grid-row: 1;
  padding:48px;
}

.slide-feeditem .feeditem-img{
  grid-area: 1/1/-1/-1;
}

.slide-feeditem .feeditem-overlay{
  background: linear-gradient(transparent 10%, black 90%);
  grid-area: 1/1/-1/-1;
}

.slide-feeditem .feeditem-text{
  grid-area: -2/1/-1/-2;
  padding:48px;
}

.slide-feeditem .t1{
  font-size: 72px;
  margin-bottom: 0.3em;
  line-height: 1.1;
}

.slide-feeditem .t2{
  font-size: 48px;
  margin-bottom: 0.75em;
  line-height: 1.3;
}

.slide-feeditem .t3{
  font-size: 34px;
  margin-bottom: 0.5em;
}

/* flickr */

.slide-flickr{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.slide-flickr .page{
  grid-area: 1/1/-1/-1;
}

.slide-flickr footer{
  grid-area: 1/1/-1/-1;
  align-self: flex-end;
  justify-self: flex-end;
  padding: 48px;
}

.slide-flickr .t3{
  font-size: 24px;
  margin: 0;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}

/* SENTIWEB */

.slide-sentiwebitem{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  width: 1920px;
  height: 1080px;
  background: #EEF2F3;
  color:#000;
}

.slide-sentiwebitem h1>span{
  display: block;
  font-weight: 400;
}

.slide-sentiwebitem .senticarte{
  background: #FFF;
  padding:48px;
}
.slide-sentiwebitem .feeditem-text{
  padding:48px;
  display: flex;
  flex-direction: column;
}

.slide-sentiwebitem .t1{
  font-size: 56px;
  margin-bottom: 0.3em;
  line-height: 1.1;
  margin-bottom: auto;
}

.slide-sentiwebitem .t2{
  font-size: 48px;
  margin-bottom: 0.75em;
  line-height: 1.3;
}

.slide-sentiwebitem .t3{
  font-size: 34px;
  margin-bottom: 0.5em;
}

.slide-page{
  /* background-color: #11214b; */
  background: #fff;
}
.slide-page>div{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  /* align-content: center;
  justify-content: center; */

  width: 1920px;
  height: 1080px;
}


.slide-page .entete{
  background: #fff url(../img/header-small.svg) no-repeat 20px center;
  height:92px;
  width:100%;
}

.slide-page .entete .heure{
  font-size: 48px;
  color:#999;
  text-align: right;
  line-height: 92px;
  margin-right: 32px;
}



.slide-page .entete-grand{
  background: url(../img/header-large.svg) no-repeat center;
  /* background-size: contain; */
  height:303px;
  width:100%;


}

.image:empty{
  display: none;
}

p:empty{
  height:42px;
  width:42px;
}

.slide-page .une{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  /* gap: 24px; */
  background-color: #244397;
  padding-top:24px;
  align-items:flex-start;
  z-index: 1; 

}

/* .slide-page .une p,
.slide-page .une h1,
.slide-page .une h2,
.slide-page .une h3,
.slide-page .une ul{
  align-self: flex-start;
  max-width: 640px;
  margin:0 auto;
} */

.slide-page .une p,
.slide-page .une ul{
  font-size: var(--fz);
}

.slide-page .une img{
  width: 100%;
  height: auto;
  max-width: 100%;
}


.slide-page .demi{
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: #244397;

  gap: 24px;
  z-index: 1; 

}

.slide-page .tier{
  display: grid;
  grid-template-columns: 1fr 2fr;
  background-color: #244397;

  gap: 24px;
  z-index: 1; 

}

.slide-page .une .text{
  height:100%;
  max-width: 800px;
  margin: auto;
}

.slide-page .text{
  /* display: grid; */
  /* padding:24px 24px 48px; */
  line-height: 1.5;
  /* grid-template-columns: 1fr;
  align-content: center; */

}

.slide-page .demi .petit{
  height:988px;
}

.slide-page .demi .grand{
  height:calc(1080px - 303px);
}

.slide-page .text.petit{
  height:988px;
  padding:24px;

}
.slide-page .text.grand{
  padding:24px;
}


.slide-page .text.aucun{
  padding: 0;
}

.slide-page #progressbar {
  position: absolute;
  width:1880px;
  left:20px;
  top:1050px;
}

/* .slide-page .image.fit, */

.slide-page .image.fit img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
  align-content: stretch;
  margin: 0;
}

/* .slide-page>div{
  border-top:12px solid #ff1e2d;
  background: #fff;
  padding:48px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  color: #333;
  font-size: 36px;
  line-height: 1.5;
} */

.slide-page h1{
  font-size: calc(var(--fz) * 2);
  margin-bottom: 0.3em;
  line-height: 1.1;
}

.slide-page h2{
  font-size: calc(var(--fz) * 1.25);
  margin-bottom: 0.75em;
  line-height: 1.3;
} 
.slide-page h3{
  margin-bottom: 0.5em;
  font-size: var(--fz);
}

.slide-page p{
  font-size: var(--fz);
  margin-bottom: 0.5em;
  max-width: 25em;
}


/* .slide-page .une .text figure>img,
.slide-page .une .text figure{
  width:auto;
  height:auto;
  display: inline-block;
  float:left;
} */

.align-content{
  display: grid;
  /* padding: 24px 24px 48px; */
  grid-template-columns: 1fr;
  align-content: center;  
}

.slide-page .text.listing{
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 24px 24px 48px;
  gap:0 24px;
  width:800px;
  margin: auto;
  align-items: center;
}

.slide-page .text.listing h2{
  grid-column: 1/-1;
}

.slide-page .text.listing hr{
  grid-column: 2/-1;
  margin:6px 0 32px;
  max-width:100%;
}


/* Fallback stuff */
#progressbar{
  background-color: rgba(0, 0, 0, 0.2);
  height:5px;

}

#progress {
  background: #fff;
  height:100%;
  transform: scaleX(0);
  /* width:0%; */
}

.slide-pollen{
  display: grid;
  background: #000;
  grid-template-columns: 900px;
  justify-content: flex-end;
  place-items: center;
  height:100%;

}

.slide-pollen .page {
  background: url("../img/wheat-609929_1920.jpg");
  /*https://pixabay.com/fr/bl%C3%A9-pointe-c%C3%A9r%C3%A9ales-grain-champ-609929/*/
}

.slide-pollen .caption {
  text-align: left;
  display: flex;
  background: linear-gradient(300deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.8) 100%);
}

.slide-pollen .pollen-data {
  margin: auto;
  padding-bottom: 300px;
}

.slide-pollen h1, .pollen-item, .slide-pollen span {
  text-align: left;
  font-size: 48px;
  font-weight: 200;
  line-height: 1.5;
}

.slide-pollen h1 {
  font-size: 64px;
}

.slide-pollen span {
  font-size: 32px;
}

.slide-pollen .pollen-name {
  font-size: 48px;
  width: 340px;
  display: inline-block;
  font-weight: 100;
}

.pollen-star-on, .pollen-star-off {
  display: inline-block;
  border-radius: 50%;
  border: 4px solid #fff;
  background: #fff;
  text-indent: 150px;
  width: 30px;
  height: 30px;
  overflow: hidden;
  margin-left: 5px;
}

.pollen-star-off {
  background: transparent;
}

.nav{
  display: none;
}