/*---------------------- Coded by yv (凸ಠ益ಠ)凸 ------------------------*/



@font-face {
  font-family: 'tt-commons-pro';
  src: url('../font/TTCommonsPro-Bd.woff2');
  font-weight: normal;
  font-style: normal;
}


/*---------------------- General ------------------------*/


:root{
  --background: white;
  --couleur: #000000;

  --sp-3xs: clamp(0.48rem, 0.01vw + 0.48rem, 0.49rem);
  --sp-2xs: clamp(0.58rem, 0.08vw + 0.56rem, 0.61rem);
  --sp-xs: clamp(0.69rem, 0.17vw + 0.65rem, 0.76rem);
  --sp-sm: clamp(0.83rem, 0.31vw + 0.76rem, 0.95rem);
  --sp-base: clamp(1rem, 0.5vw + 0.88rem, 1.19rem);
  --sp-md: clamp(1.2rem, 0.76vw + 1.01rem, 1.48rem);
  --sp-lg: clamp(1.44rem, 1.11vw + 1.16rem, 1.86rem);
  --sp-xl: clamp(1.2rem, 1.2vw + 1.33rem, 2.2rem);
  --sp-2xl: clamp(2.07rem, 1.2vw + 1.52rem, 2.9rem);
  --sp-3xl: clamp(2.49rem, 3.03vw + 1.73rem, 3.62rem);
  --sp-4xl: clamp(2.99rem, 4.12vw + 1.96rem, 4.53rem);
  --sp-5xl: clamp(3.5rem, 4.8vw + 5rem, 10rem);

}

* {
  font-family: "tt-commons-pro", Helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: var(--sp-xl);
  color: var(--background);
  line-height: 1.05;


  
}


html {
    background-color: var(--background);

}

body {
  
  width: 100vw;
  height: 100svh;
  padding: 0.8rem;

  display: flex;
  flex-direction: column;
  justify-content: space-between; 


}






  a:link { 
    text-decoration: none; 
  } 
  a:visited { 
    text-decoration: none; 
  } 
  a:hover { 
    text-decoration: none; 
  } 
  a:active { 
    text-decoration: none; 
  }





  

/*---------------------- Header & Footer ------------------------*/

header, footer{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

header > div, footer > div {
  margin-right: 4rem;
}

.header-projet{
  display: flex;
}



/*---------------------- Footer ------------------------*/

footer div{
  margin-top: 1rem;
}


/*---------------------- Nav ------------------------*/

nav, footer{
  z-index: 50;
}


/*---------------------- Typo ------------------------*/

.circled-number {
  -moz-font-feature-settings: "ss09" 1; -webkit-font-feature-settings: "ss09" 1; font-feature-settings: "ss09" 1;
  display: inline;

}

.circled-number:hover, .circled-number:active {
  -moz-font-feature-settings: "ss10" 1; -webkit-font-feature-settings: "ss10" 1; font-feature-settings: "ss10" 1;


}

em {
  text-decoration: underline;
}


/*---------------------- Aside  ------------------------*/

aside div {
  display: none;
}



/*---------------------- Img ------------------------*/

iframe {
  width: 100%;
  height: 80vh;
  padding: 1% 5% 1% 5%;
}



.circled-number iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;    /*---------------------- none ------------------------*/
  vertical-align: middle;


}


#A999{
  display: none;
}




/*---------------------- Tablet ------------------------*/


@media only screen and (min-device-width : 431px) and (max-device-width : 710px) {

  * {
    font-family: "tt-commons-pro", Helvetica, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: var(--sp-xl);

    
}



}





/*---------------------- Mobile ------------------------*/


@media only screen and (max-width : 430px) {

  * {
    font-family: "tt-commons-pro", Helvetica, sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: var(--sp-md);
  }

  footer div:nth-child(n+2){
    display: none;
  }

  aside {
    font-size: var(--sp-base);

  }

  #P004, #P005, #P009, #P010, #P012 {
    display: none;
  }

  #A999 {
    display: inline;
  }

}






/*---------------------- Cursor ------------------------*/



.circled-number:hover {
  cursor: grab;
}

.footer-contact a:hover, .footer-contact a:active {
  cursor: progress;
}

::selection {
  background-color: white;
}


/*---------------------- blend ------------------------*/

iframe {
  filter: invert(1);
  z-index: -50 !important;
}

header>*, footer, aside{
  background-color: black;
  mix-blend-mode: exclusion;
}

iframe > *::after, .vp-center::after, body.vp-center::after {
  z-index: -50 !important;
}

.circled-number iframe.active {
  pointer-events: none;
}