@charset "utf-8";
/* CSS Document */
header { position:relative; letter-spacing: .75px;  color: #fff; height: 95vh;
display: grid;
  grid-template-columns: repeat(2, 1fr) 80px;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  }

#index header .item1 { grid-area: 1 / 1 / 2 / 2; }
#index header .item2 { grid-area: 1 / 2 / 2 / 3; }
#index header .photo {
  height: 95vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0px 0px;
  grid-template-areas:
    "cadre_color-1 cadre_color-2 cadre_color-3"
    "cadre_color-4 cadre_color-5 cadre_color-6"
    "cadre_color-7 cadre_color-8 cadre_color-9";
  grid-area: 1 / 2 / 2 / 3;
}

#index header .photo .cadre_color-1 { grid-area: cadre_color-1; }
#index header .photo .cadre_color-2 { grid-area: cadre_color-2; }
#index header .photo .cadre_color-3 { grid-area: cadre_color-3; }
#index header .photo .cadre_color-4 { grid-area: cadre_color-4; }
#index header .photo .cadre_color-5 { grid-area: cadre_color-5; }
#index header .photo .cadre_color-6 { grid-area: cadre_color-6; }
#index header .photo .cadre_color-7 { grid-area: cadre_color-7; }
#index header .photo .cadre_color-8 { grid-area: cadre_color-8; }
#index header .photo .cadre_color-9 { grid-area: cadre_color-9; }

#index header .menu { grid-area: 1 / 3 / 2 / 4; }

#index header .item1 .texte {display: grid;  justify-content: center;  align-content: center;  grid-auto-flow: column; position: relative; height: 95vh; margin-left: 5vw;}

header .item1 .texte .logo { color: #d88a5f; font: 400 3rem/3rem "Playfair Display"; display: inline-block;}
header .item1 .texte .logo span { color: #fff; font: 400 1.2rem/2.4rem "Roboto"; text-transform: uppercase; display: block; margin-left: 80px;}
header .item1 .texte .logo:before {content:url(../images/picto-chengdu.svg);  position:relative; top: 30px; padding: 0 10px 0 0;}

header .item1 .texte .intro-page {font: 400 4.5rem/6rem "Playfair Display"; padding-right: 5vw; margin: 100px 0;}
header .item1 .texte .intro-page a { color: #d88a5f;}
header .item1 .texte .intro { font: 400 1.6rem/2.4rem "Roboto"; display:grid; grid-template-columns:auto auto;}
header .item1 .texte .intro div:nth-child(1) { color: #d88a5f;font: 400 10rem/3rem "Playfair Display"; margin-right: 20px;}
header .item1 .texte .intro div:nth-child(2) { padding-right: 10vw; }
header .item1 .texte .intro div:nth-child(2) a { color: #d88a5f;}

header .item1 .header-link-plus { color: #fff; font: 400 12px/24px "Roboto"; position: absolute; bottom: 0; right:50%; transform: rotate(270deg) translateX(100%); transform-origin: 100% 100%;  border-top:2px solid rgba(216,138,95,1.00); letter-spacing: 2px; padding: 10px 0 10px 20px; margin-right: 40px;}

header .photo div { overflow: hidden;     display: flex;    align-items: flex-end;    justify-content: center;}



#page header { display:grid; grid-template-columns:1fr 80px; position:relative; letter-spacing: .75px;  color: #fff; height: 95vh;}
#page header .item1 .texte { position: relative; margin-left: 5vw; margin-top: 10px; width: 100%;}
#page header .menu:after 	{ content: "";    display: block;    position: absolute;    top: 0;    right: -10000px;    bottom: 0;    width: 10000px;    background:rgba(255,255,255,1); z-index: 15;}
#page header .item1 .texte .intro-page { width: 50%; text-shadow: 2px 1px 3px #000;}
#page header .item1 .texte .intro-page em { font: 400 1.6rem/2.4rem "Roboto"; display:block; text-transform: uppercase; margin-bottom: 10px;}
#page header .arrow_bottom	{ width: 50px; height: 50px; background: url(../images/arrow-bottom.svg) 50% 50% no-repeat #fff; border-radius: 30px; background-size: 30px; position: absolute; bottom: 5vh; left:50%; margin-left: -25px;}


/** BACKGROUND **/
.header_bckgrd-case {  background: url(../images/bckgrd-case-jason-2.webp) 50% 50% no-repeat; background-size: cover;}
.header_bckgrd-next {  background: url(../images/bckgrd-next.webp) 50% 50% no-repeat; background-size: cover;}
.header_bckgrd-case-1 {  background: url(../images/bckgrd-necromonicon.webp) left bottom no-repeat; background-size: cover;}
.header_bckgrd-galerie {  background: url(../images/bckgrd-galerie.webp) 50% bottom no-repeat; background-size: cover;}
.header_bckgrd-materiel {  background: url(../images/bckgrd-materiel.webp) left top no-repeat; background-size: cover;}
.header_bckgrd-blog {  background: url(../images/bckgrd-blog.webp) 30% bottom no-repeat; background-size: cover;}
.header_bckgrd-halloween {  background: url(../images/bckgrd-halloween.webp) 50% bottom no-repeat; background-size: cover;}
.header_bckgrd-jason {  background: url(../images/bckgrd-jason.webp) 50% 50% no-repeat; background-size: cover;}
.header_bckgrd-freddy-jason {  background: url(../images/bckgrd-freddy-jason.jpg) left top no-repeat; background-size: cover;}
.header_bckgrd-leatherface {  background: url(../images/bckgrd-leatherface-1.jpg) 50% 50% no-repeat; background-size: cover;}
.header_bckgrd-jason-2 {  background: url(../images/bckgrd-case-jason-3.jpg) 50% 50% no-repeat; background-size: cover;}
.header_bckgrd-buffy-1 {  background: url(../images/bckgrd-case-buffy-1.jpg) 50% 50% no-repeat; background-size: cover;}
.header_bckgrd-blog-pierre {  background: url(../images/bckgrd-blog-pierre.png) right 50% no-repeat; background-size: cover;}
.header_bckgrd-blog-bois {  background: url(../images/bckgrd-blog-bois.png) right 50% no-repeat; background-size: cover;}
.header_bckgrd-blog-nature {  background: url(../images/bckgrd-blog-nature.png) right bottom no-repeat; background-size: cover;}

/** MENU **/

header .menu { width: 80px; color: #000; background: #fff; text-align: center; position: relative; z-index: 10;}
header .menu .header-menu	{ display: block; position: relative; width: 80px;}
header .menu .header-menu .header-titre	{  transform: rotate(270deg) translate(-100%,0); transform-origin: 0 0; text-transform: uppercase;  font: 400 14px/24px "Roboto"; letter-spacing: 2px; white-space: nowrap; display: inline-block; margin-left: 28px; }
header .menu .header-menu .header-titre	span { color: #d9d9d9; font: 400 24px/24px "Roboto";}
header .menu .header-rs { position: absolute; bottom: 8vh; width: 80px; text-align: center;}

.open_menu 	{ width:28px; height:28px; position:relative; cursor:pointer; transition:background 400ms ease-in-out;  margin: 20px auto;}

.open_menu div { width:28px; height:2px; background:#000; position:absolute; left:0; top:10px;}
.open_menu div, .open_menu div::before, .open_menu div::after {
  display: block;
  width: 28px;
  height: 2px;
  background-color: #000;
  outline: 1px solid transparent;
  -webkit-transition-property: background-color, -webkit-transform;
  -moz-transition-property: background-color, -moz-transform;
  -o-transition-property: background-color, -o-transform;
  transition-property: background-color, transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.open_menu div::before, .open_menu div::after {  position: absolute;  content: "";}
.open_menu div::before {  top: -9px;}
.open_menu div::after {  top: 9px;}
.open_menu.clicked span {  background-color: transparent;}
.open_menu.clicked div::before {
  -webkit-transform: translateY(9px) rotate(45deg);
  -moz-transform: translateY(9px) rotate(45deg);
  -ms-transform: translateY(9px) rotate(45deg);
  -o-transform: translateY(9px) rotate(45deg);
  transform: translateY(9px) rotate(45deg);
}
.open_menu.clicked div::after {
  -webkit-transform: translateY(-9px) rotate(-45deg);
  -moz-transform: translateY(-9px) rotate(-45deg);
  -ms-transform: translateY(-9px) rotate(-45deg);
  -o-transform: translateY(-9px) rotate(-45deg);
  transform: translateY(-9px) rotate(-45deg);
}
.open_menu.clicked div { background-color: #fff;}
.open_menu.clicked div:before, .open_menu.clicked div:after {
  background-color: #000;
}

.header-nav { position: absolute;  top: -95vh;  right: 0;  width: 100%;  opacity: 0; font: 400 1.6rem/2.4rem "Roboto"; color: #6f7072; display:grid; grid-template-columns:25% 35% auto;  height: 95vh; z-index: 1;}

.header-nav-menu { opacity: 0;}

.header-nav>div:nth-child(1) { background:rgba(0,0,0,0.75); }
.header-nav>div:nth-child(2) { background: url(../images/bckgrd-header-menu-1.webp) 60% 50% no-repeat; background-size: cover; border-right: 20px solid #d88a5f;}
.header-nav>div:nth-child(3) { display: grid; align-content: center;  grid-auto-flow: column; background: #f4f4f4; }

.header-nav>div:nth-child(3) ul { margin: 0 0 0 0; padding: 0;}
.header-nav>div:nth-child(3) ul li { list-style: none;font: 400 3rem/3rem "Roboto"; margin: 3vh 0; text-transform: uppercase;white-space: nowrap;}
.header-nav>div:nth-child(3) ul li a { border-bottom:1px solid rgba(216,138,95,0);}

.header-nav>div:nth-child(3) ul li a.active { border-bottom:1px solid rgba(216,138,95,1.00); color: rgba(216,138,95,1.00);}

@media (min-width:1201px) {
	.header-nav>div:nth-child(3) ul li a:hover { border-bottom:1px solid rgba(216,138,95,1.00); color: rgba(216,138,95,1.00);}
	header .item1 .header-link-plus:hover {color: rgba(216,138,95,1.00);border-top:2px solid rgba(255,255,255,1.00);}
	#page header .arrow_bottom:hover {background: url(../images/arrow-bottom.svg) 50% 50% no-repeat rgba(216,138,95,1.00);}
}
@media (max-width:1200px) {
	.header-nav {    grid-template-columns: 15% 40% auto;}
	header .item1 .texte .intro { display: none;}
	#page header .item1 .texte .intro-page { width: 70%;}
}

@media (max-width:800px) {
	header, #index header .item1 .texte { height: inherit;}
	
	header { grid-template-columns: 1fr }
	#index header .item1 { grid-area: auto; }
	#index header .item2 { grid-area: auto; }
	#index header .photo {  grid-area: 2;}
	#index header .menu { grid-area: 1; }
	
	header .menu .header-rs { display: none;}
	.header-link-plus { display: none;}	
	header .menu {position: absolute;    right: 0;    top: 0; width: 60px; background:none; border:1px solid rgba(255,255,255,.15)}
	header .menu .header-menu { width: 60px;}
	header .menu .header-menu .header-titre { display: none;}
	.open_menu {margin: 20px auto 15px auto;}
	.open_menu div, .open_menu div::before, .open_menu div::after { background-color: #fff;}
	.open_menu.active div { background: rgba(0,0,0,0);}
	.header-nav { grid-template-columns: 1% 50% 1fr;}
}
@media (max-width:600px) {
	.header-nav { grid-template-columns: 1% 50% 1fr; height: 500px;}
	.header-nav>div:nth-child(3) ul li {    font: 400 2rem/2rem "Roboto";}
	#page header .item1 .texte .intro-page {    width: 80%;}
	header .item1 .texte .intro-page {font: 400 3.5rem/5rem "Playfair Display";}
	#page header .item1 .texte .intro-page {    width: 100%;}
}