@font-face {
  font-family: 'Borges';
  src: url(BorgesBlanca.otf) format(opentype);
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Borges';
  src: url(BorgesBlanca-Italic.otf) format(opentype);
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Borges';
  src: url(BorgesGris.otf) format(opentype);
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Borges';
  src: url(BorgesGris-Italic.otf) format(opentype);
  font-weight: 700;
  font-style: italic;
}
@font-face{
  font-family: "Necto Mono";
  src: url("NectoMono-Regular.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Noto';
  src: url("NotoSansSC-VariableFont_wght.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Xiaowei';
  src: url("ZCOOLXiaoWei-Regular.ttf") format("truetype");
  /* font-weight: 200; */
  font-style: normal;
  font-display: swap;
}
* {
    box-sizing: border-box;
}

*:first-child {
  margin-top: 0;
}

:root {

  --accentcolor: #dc6253;
  --plyr-color-main: var(--accentcolor);
  --magickspacing: 4vh;
  --maxwidth: 50rem;
}
  /* @font-face {
    font-family: 'Borges','Noto';
    src: url(BorgesNegra.otf) format(opentype);
    font-weight: 700;
    font-style: normal;
  }
  @font-face {
    font-family: 'Borges','Noto';
    src: url(BorgesNegra-Italic.otf) format(opentype);
    font-weight: 700;
    font-style: italic;
  } */
  

body {
    font-family: 'Borges','Noto';
    font-size: 1.2em;
    background-color:#f0eadf;
    margin-bottom: auto;
    display: flex;
    flex-direction: column;
    margin: auto;
    line-height: 1.5;
}



a { text-decoration: underline;color: black;}
a:hover{
  text-decoration: underline;
  color: #dc6253;
}


h1, h2, h3 {
  line-height: 1.2;
  margin-top: 0;
  text-wrap: balance;
  align-self: flex-start; 
}

h4 {
  text-transform: uppercase;
  opacity: 60%;
  font-family: "Necto Mono", 'Xiaowei';
  font-weight: 100;
  text-decoration: underline;
  text-underline-offset: .2em;
  /* text-decoration-thickness: 2px; */
  font-size: 1em;
}

h2 {
  font-family: "Necto Mono",'Xiaowei';
  font-weight: 400;
  font-size: 2.5em; 
  font-size: clamp(1.75em, 2.5vw, 2.2em);
}

h3 {
  font-family: "Necto Mono",'Xiaowei';
  font-weight: 400;
  font-size: 1.5em;
  text-decoration: underline;
  text-underline-offset: .2em;
  text-transform: uppercase;
  letter-spacing: .05em;
}
  
hr {
  background: none;
  border: none  ;
  border-top: 1px solid #000;
  margin: 2em 0;
  width: 100%;
}
blockquote {
  max-width: var(--maxwidth);
  margin: auto;
  font-style: italic;
  font-size: 2em;
  /* text-wrap: balance; */
  line-height: 1.2;
}

::selection {
    color: #f0eadf;
    background-color:#dc6253;
}

img{width:100% ; max-width: 100%; max-height: 100%;}

ul,li{list-style:none;}
figcaption{padding: 3px;;opacity: .7;font-size: .65em;letter-spacing: .05em;}

/* -------------------------------------------------------------------- layout */
#header > * , main, .footer > * , .nippet_episodes > *, #blog-article {
  margin: auto;
  max-width: 1600px;
  padding-inline: 40px;
  width: 100%;
}

/* -------------------------------------------------------------------- main */
main{
  gap:50px;
  padding-top: 5em;
  display: flex;
  align-items: start;
  flex-wrap: wrap;
  align-items:baseline;
  justify-content: center;
  align-content: center;
}

main >*{
  flex: 1 0 35%;
  align-self: flex-start;
}

.parteners{
  width: 400px;
  mix-blend-mode: multiply;
}

/* -------------------------------------------------------------------- home */

.banner {
  display: flex;
  align-items: center;
  font-family: "necto mono";
  font-size: 1.4em;
  color: #fdfcb6;
  padding: 1.1vw 0vw 1vw 5vw;
  /* margin-bottom: 1.8vw; */
  transform: rotate(-5deg);
  width: 102vw;
  position: fixed;
  z-index: 11;
  top: 20em;
  left: -0.4vw;
  /* font-size: var(--titre); */
  white-space: nowrap;
  transition: transform 0.3s ease-out;
  background-color: #dc6253;
  box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.1);
  overflow: hidden;

}
.click_close{
  all: unset;
  width: 2em;
  height: 2em;
  }

.click_close::before { content: "\2715";   color: #fdfcb6;}
.home-intro{align-self:flex-start; max-width: 28vw;}
.home-intro h3 {
  text-decoration: none;
  strong {
    font-weight: normal;
    text-decoration: underline;
  }
  em  {
    display: block;
    text-transform: none;
    font-style: normal;
  }
}

.meta {
  font-family: "Necto Mono",'Xiaowei';
  opacity: .6;
  font-size: .85em;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.link_no_deco{text-decoration: none;}

  
.intro {
  font-size: 1.5em;
}
.nippet_title{
  font-family: 'Necto mono';
  font-weight: 100;
  font-size: clamp(1.25em, 2.5vw, 2em);
  line-height: 1;
}

.autrice{grid-column:span 2 ;}
.home_description{grid-column-start: 2; grid-column-end: 4; margin-bottom: 10vh;}
.infohome{grid-column: span 3;}
.gallery{ position:relative; aspect-ratio: 9 / 13; max-width:30vw;}
.apropo_gallery{position:relative; aspect-ratio: 16 / 9;max-height:30vw;}
.gallery_projection{position:relative; aspect-ratio: 4 / 3;max-height:30vw;}
/* this is for the gallery */
.slide {
  /* typo */
  color: rgba(255,255,255,.6);
  font-style: italic;
  font-size: 1.5em;
  padding: 0;
  margin: 0;
  /* background: #000; */
  /* position des slides */
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0;
  bottom: 0;
  /* masquées par défaut */
  opacity: 0;
  z-index: 1;
  transition: opacity 1s;
  /* centrage des éléments par défaut */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* bordure minimum de 20px, de 3vw si possible, et maximum de 50px */
  /* border: clamp(20px, 3vw, 50px) solid black; */
}

.slide figcaption{
  color: rgb(43, 43, 43);
}


/* la slide visible */
.visible {
    opacity: 1;
    z-index: 2;
}

/* style par défaut pour toutes les images */

/* les slides peuvent recevoir les class : cover, contain, left, right, bottom, medium, small, tiny */
/* les règles suivantes déterminent la mise en page de ces différentes classes combinées  */
.slide img { width: 100%; height: 100%; object-fit: cover;}
.contain img { width: 100%; height: 100%; object-fit: contain;}
.left img {object-position: 0 0;}
.right img {object-position: 100% 0;}

.bottom img,
.bottom.center img {object-position: 50% 100%;}
.bottom.left img {object-position: 0 100%;}
.bottom.right img {object-position: 100% 100%;}

.medium { padding: 12.5vh 12.5vw }
.small { padding: 18vh 18vw }
.tiny { padding: 22vh 22vw }

.slide.medium.left,
.slide.tiny.left,
.slide.small.left { justify-content: flex-start;}
.slide.medium.right,
.slide.tiny.right,
.slide.small.right { justify-content: flex-end;}

/* la navigation est par dessus les slides */

.gallery_nav {

  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 3;
  /* pour que les deux liens occupent tout l’espace */
  justify-content: stretch;
}
.gallery_nav a { 

  font-size: 3em;
  flex: 1; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  opacity: 0; 
}
/* lien “suivant” deux fois plus grand que le lien “précédant” */
.gallery_nav a:nth-child(2) { flex: 1;}
.gallery_nav a:hover { opacity: 1;
  text-decoration: dashed;
  /* font-family: "Necto Mono",'Xiaowei'; */}
/* for the gallery end */

.nippet{
  border-top: solid 1px #555;
  display: grid;
  grid-template-columns: auto auto auto;
  padding: var(--magickspacing) 0;
  margin: auto 5ch auto 5ch;
  gap: 6ch;
}
.nippet:nth-child(4n) {
  flex-basis: 100%;
}
.nippet *:hover{
  color: #dc6253;
}
.nippet_episodes{
  padding-top: var(--magickspacing);
  border-top: dashed 1px #555;
  display: flex;
  flex-direction: column;
  gap: 5vh;
}
.nippet_episodes *{
  margin-top: 0;
}
.episode{
  display: grid;
  grid-template-columns: 40% auto;
  gap: 5vh;
  padding-bottom: var(--magickspacing);
  border-bottom: dashed 1px #555;
  scroll-margin-top: var(--magickspacing);
}
.episode:last-child{
  border-bottom: none
}


/* .episode_layout{
  display: flex;
  flex-direction: row;
  padding: 10vh;
  gap: 10vh;
} */

/* about film player */
/* .episode_layout {

  margin: auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3em;
} */

.player {
  grid-column: span 3;
  background: #ccc;
  aspect-ratio: 16 / 9;
  position: relative;
} 

.details {
  background: #eee;
}

#iframe {
  position:absolute;top:0;left:0;width:100%;height:100%;
} 

.video_cover{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit: cover;
}

#overlay {
  /* padding: 2em; */
  position: absolute;
  /* width: 100%;
  height: 101%; */
  top: 50%;
  left: 50%;
  padding: var(--magickspacing);
  border-radius: .25em;
  background: rgba(255,255,255,.7);
  background: #f0eadfc9;
  transform: translate(-50%,-50%);
  align-items: center;
  backdrop-filter: blur(8px);
  gap: .5em;
  flex-direction: column;
  display: flex;
  justify-content: center;
}
#overlay.hidden {
  display: none;
}
#overlay h3 {
  text-align: center;
}
#overlay div {
  text-align: center;
}
/* .input_frame,
#overlay button,
#overlay a {
  all:unset;
  text-decoration: none;
  color: currentColor;
  appearance: none;
  background: none;
  border-radius: 2em;
  text-transform: uppercase;
  font: inherit;
  border: 1px solid #dc6253;
  padding: .2em 1em;
} */

#overlay form {
  display: none;

}

#overlay.code > * {
  display: none;
}
#overlay.code form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* end of film player */

.button{
  all: unset;
  color: #f0eadf;
  font-family: "Necto Mono",'Xiaowei';
  padding: 1vh;
  font-size: 1.5ch;
}
.nav article:nth-child(2) *{
    padding: 20px;
    }

/* .nav article:nth-child(3) *{
    padding-left: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='10' cx='10' cy='10' fill='tomato'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
} */


/* -------------------------------------------------------------------- navigation */
.logo{
    width: 10em;
}
#header {
  
    border-bottom: 1px solid black;
}
nav{position: sticky; top: 0; overflow: hidden;}
.nav{
    padding-block: 20px;
    font-family: "Necto Mono",'Xiaowei';
    margin: 2em auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.nav a {
  text-underline-offset: .2em;
}
.footer{
    border-top: 1px solid black ;
    padding-top: 5vh;
    margin-top: 5vh;
}
.footer-content {
  padding-block: 20px;
  font-family: "Necto Mono",'Xiaowei';
  margin: 2em auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid black;
  border-bottom: none;
  width: 100%;
}


.footer-links {display: flex; flex-direction: column; justify-content: start;gap: 0.8em;} 

.footer :first-child {
  margin-top: 0;
}

@media (max-width: 600px ){
  .footer-content {
    padding-block: 20px;
    margin: 2em auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-bottom: 1px solid black;
    border-bottom: none;
    width: 100%;
  }
  
}


/* -------------------------------------------------------------------- carte */
.main-films  h2 {

}

iframe{ width:1920px; height:1080px }

.main-films{
  padding: 2em;
  gap:2em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.main-films >*{
  flex: 30%;
}
.cartoinfohidden{display: none;}
.cartoinfohidden h3 {
  font-size: 1em;
  margin: 0;
}
.cartoinfohidden h2 {
  margin: .5em 0;
}
#markers * { cursor: pointer;}
.cartoinfohidden.visible{display: block;}
.hovered > p {
  display: none;
}
#markers g {
  fill: #fdfcb6;
}
#markers g:hover{
 fill:#dc6253;
}
/* -------------------------------------------------------------------- articles */

.blink {
  animation: blinker 2s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}


/* -------------------------------------------------------------------- articles */

#blog-article header{
   margin: var(--magickspacing) auto;
   max-width: var(--maxwidth);
}
.blog-article-figure {
  margin: 0 -40px;
}
.blog-article-figure.small-figure {
   margin: 0 auto;
   max-width: 55em;
}
.articles-intro, 
.articles-keywords {
  grid-column: 2/span3;
  
}
.articles-intro p {
    max-width: var(--maxwidth);
}
.keywords{
    font-family: "Necto Mono",'Xiaowei';
    font-size: .85em;
    letter-spacing: .05em;
    margin-top: -0.5rem;
    padding: 0;
    display: flex;
    gap: 0 .5em;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: flex-start;

}
.keywords_word, #keywords_article > li, #keywords_blog > li{
    font-family: "Necto Mono",'Xiaowei';
    font-size: .5em;
    letter-spacing: .05em;
    margin-top: 1ch;
    font-size: 0.9rem;
    padding: .5em 1em .35em;
    border:1px solid #dc6253;
    border-radius: 4ch;
    text-decoration: none;
    background-color: rgb(253, 252, 182);
}
/* comment: 这时候可以加grid,在每个页面上，同样的元素占不同的位置 */
#keywords_blog { 
  gap: 20px; 
  display:flex ; 
}
.keywords_word:not(#code):hover{

    color: #f0eadf;
    border:1px solid #dc6253;
    border-radius: 4ch;
    background-color: #dc6253;
    text-decoration: none;
}

.blog_maintext{
   margin: var(--magickspacing) auto;
   max-width: var(--maxwidth);
}
#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #dc6253;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
  }
  
#myBtn:hover {
    background-color: #555;
  }


a rect, a polygon {
    fill: red;
  
  
}
a:hover {
      fill: blue;
    }


@media (max-width: 600px) {
  body{
    font-size: 1em;
  }

  nav{position: sticky; top: 0; overflow: hidden;}

.nav{

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 20px;

}

.nav article:nth-child(2) *{
  padding: 5px;
  }

  .nav article:nth-child(3) *{
    font-size: 0.8em;
    font-weight: 700;
    text-decoration: none;
}
.home-intro{align-self:flex-start; max-width: 100vw;}

main{
  display: flex;
  flex-direction: column;
  align-items: center;
}

main :nth-child(3)
{

  order: 4;
}

iframe{max-height: 200px; width: 100vw;}

.gallery, .gallery_projection{
min-width: 20em;
min-height: 15em;
align-self: center;
}

.apropo_gallery{
min-width: 15em;
min-height: 10em;
align-self: center;
}

.footer-links{
  display: none;
}

.main-films >*{
  flex: 100%;
}

.episode{
  display: block;

}
}