@charset "utf-8";
/* CSS Document */
/* FONTS */

#index .slogan:before {color: #d2d2d2;content: "“"; font-size: 9rem; display: block;}
#index .slogan { max-width: 60vw; text-align: center; margin: 80px auto; letter-spacing: 0.75px; color: #6f7072; font: 400 2.4rem/4.8rem "Playfair Display";}
#index .slogan span { display: block; color: #d2d2d2; font: 400 14px/16px "Roboto"; margin-top: 20px;}

#index .casestudies { display:grid; grid-template-columns:45% 1fr; position:relative; margin: 120px auto; width: 90vw; max-width: 1600px;  font: 400 1.4rem/2.4rem "Roboto"; background: linear-gradient(90deg, rgba(242,242,242,1) 0%, rgba(242,242,242,1) 90%, rgba(255,255,255,1) 90%, rgba(255,255,255,1) 100%); padding-bottom: 70px; }

#index .casestudies:before {    content: "";    display: block;    position: absolute;    top: 0;    left: -10000px;    bottom: 0;    width: 10000px;    background:rgba(242,242,242,1);}

#index .casestudies .texte 		{ background: url(../images/accueil-bckgrd-case-halloween.webp) right 50% no-repeat; display: grid;
  justify-content: center;  align-content: center;  grid-auto-flow: column; letter-spacing: 0.75px; padding-right: 100px;}
#index .casestudies .texte h3 			{ font: 400 5.5rem/7.5rem "Playfair Display";}
#index .casestudies .texte h3 strong 	{ font-weight: normal; color: #d88a5f;}
#index .casestudies .texte p 	{ margin: 50px 0 30px 0; line-height: 28px;}

a.link { height: 60px;    display: inline-block;    padding: 0 30px;    border-radius: 5px; line-height: 60px; border: 1px solid #c5c5c5;    text-transform: uppercase; background-image: linear-gradient(to left, transparent, transparent 50%, #fff 50%, #fff);
  background-position: 100% 0;
  background-size: 200% 100%; font-size: 1.4rem;} 

#index .casestudies .texte a em { font-style: normal; opacity: 1;}
#index .casestudies .texte a:before { content: "Voir la galerie"; opacity: 0; position: absolute;}


#index .casestudies .photo { position: relative; letter-spacing: 0.75px;}
#index .casestudies .photo .date { text-transform: uppercase; line-height: 70px; font-size: 1.4rem;}
#index .casestudies .photo .date span { color: #7b7a7a; margin-left: 15px;}
#index .casestudies .photo .date span:before {color: #d88a5f;content: "#";}
#index .casestudies .photo img {max-width: 100%}

#index .casestudies .photo .item-info { background: #fff; position: relative; text-align: left; padding: 20px; margin: -100px 0 0 10vw; }
#index .casestudies .photo .item-info h4 { margin: 20px 0; font: 400 3rem/4rem "Playfair Display";}

@media (min-width:1201px) {
a.link:hover { background-position: 0 0; color: #d88a5f;}
}

#page .slogan:before {color: #d2d2d2;content:url(../images/slogan-masque-jason.webp) ; display: block;}
#page .slogan.leatherface:before {color: #d2d2d2;content:url(../images/slogan-masque-leatherface.png) ; display: block;}
#page .slogan { max-width: 60vw; text-align: center; margin: 120px auto; letter-spacing: 0.75px; color: #6f7072; font: 400 2.4rem/4.8rem "Playfair Display";}


#page .grid-2_photo { display:grid; grid-template-columns:repeat(2,1fr); position:relative; column-gap: 20px;  row-gap: 20px; margin: 80px 0;}
#page .grid-2_photo div  { position: relative;}
#page .grid-2_photo div img { max-width: 100%; height: auto; position: relative;}

#page .grid-3_photo { display:grid; grid-template-columns:repeat(3,1fr); position:relative; margin: 80px 0; grid-gap: 30px;}
#page .grid-3_photo div img { max-width: 100%; height: auto; position: relative;}

#page .grid-4_photo { display:grid; grid-template-columns:repeat(4,1fr); position:relative; margin: 80px 0; grid-gap: 30px;}
#page .grid-4_photo div img { max-width: 100%; height: auto; position: relative;}

#page .grid-2_texte { display:grid; grid-template-columns:40% 1fr; position:relative; column-gap: 80px; margin: 100px 0; color: #6f7072;}
#page .grid-2_texte:before {    content: "";    display: block;    position: absolute;    top: 0;    left: -10000px;    bottom: 0;    width: 10000px;    background:rgba(242,242,242,1);}
#page .grid-2_texte.white:before {    background:rgba(255,255,255,1);}
#page .grid-2_texte div:nth-child(1) {background: rgba(242,242,242,1); padding: 40px;display: grid;  justify-content: center;  align-content: center;  grid-auto-flow: column;}
#page .grid-2_texte.white div:nth-child(1) {    background:rgba(255,255,255,1); padding: 0 40px 0 0;    align-content: inherit;}
#page .grid-2_texte div:nth-child(2) p:last-of-type { margin-bottom: 0;}

#page .titre { font: 400 3rem/4.5rem "Playfair Display";}
#page .chapo { font: 700 1.6rem/2.4rem "Roboto"; margin-bottom: 40px;}
#page p 	 { font: 400 1.6rem/2.4rem "Roboto"; margin-bottom: 40px;}

#page .item-info { font: 400 1.8rem/2.4rem "Roboto"; color: #6f7072; padding: 40px;}
#page .item-info strong { letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 20px; display: block;}


#page .content-bckgrd { width: 100%; margin: 100px 0; padding: 10vh 0; background: #f1eeec;}


#page .photo-intro { position: relative; display: grid;}
#page .photo-intro img { max-width: 100%; height: auto; justify-self: end;} 
#page .photo-intro.reverse img { justify-self: start;} 
#page .photo-intro .texte { position: relative;    z-index: 1;    background: #fff;    width: 600px;    padding: 40px;    margin-top: -200px;} 
#page .photo-intro.reverse .texte { justify-self: end;} 
#page .photo-intro .texte h3 {color: #6f7072; font: 400 4rem/4rem "Playfair Display";}
#page .photo-intro .texte span { color: #d88a5f; font-size: 20px; display: block;}
#page .photo-intro .texte p { margin-top: 40px; margin-bottom: 0;}
#page .photo-intro .texte em { color: #d88a5f; font: 400 1.6rem/4rem "Playfair Display";}

#page .photo-intro .texte-plus    { margin-top: 40px; margin-bottom: 0; max-width: 100%; margin-right: 30%; margin-left: 0;}
#page .photo-intro .texte-plus p  { margin-top: 40px; margin-bottom: 0;}
#page .photo-intro .texte-plus h4 { color: #d88a5f; font: 400 3rem/4rem "Playfair Display";}


#page .content-bckgrd .photo-intro .texte-plus.reverse { text-align: right; margin-right: 0; margin-left: 30%; margin-top: 80px; margin-bottom: 80px; background: #fff; position: relative; padding-top: 40px; padding-bottom: 40px; padding-left: 40px; }
#page .content-bckgrd .photo-intro .texte-plus.reverse:after {content: "";    display: block;    position: absolute;    top: 0;    right: -10000px;    bottom: 0;    width: 10000px;    background: rgba(255,255,255,1);}
	
#page .photo-intro .texte-plus.reverse { background: #f1eeec;text-align: right; margin-right: 0; margin-left: 30%; margin-top: 80px; margin-bottom: 80px; position: relative; padding-top: 40px; padding-bottom: 40px; padding-left: 40px;}
#page .photo-intro .texte-plus.reverse:after {background:#f1eeec;content: "";    display: block;    position: absolute;    top: 0;    right: -10000px;    bottom: 0;    width: 10000px;    }	

#page .grid-3_photo.txt { margin: 0; padding: 80px 0;}
#page .grid-3_photo.txt div {position: relative;}

#page .grid-3_photo.txt .item-info {
    background: rgba(255,255,255,.95);
    position: relative;
    width: 80%;
    padding: 10px;
    margin: -130px auto 0 auto;
    font: 400 1.4rem/2.8rem "Roboto";
	text-align: center;
}
#page .grid-3_photo.txt .item-info h4 {font: 400 2.2rem/3rem "Playfair Display";}
#page .grid-3_photo.txt .item-info a {    text-transform: uppercase;    color: #d88a5f;}

#page .link.back { margin: 0 auto;     font-family: "Roboto"; display: table;}

/*** cadre color ***/
.cadre_color-1 {background: url("../images/noise.webp") #1f212f;}
.cadre_color-2 {background: url("../images/noise.webp") #80120d;}
.cadre_color-3 {background: url("../images/noise.webp") #4f544f;}
.cadre_color-4 {background: url("../images/noise.webp") #433326;}
.cadre_color-5 {background: url("../images/noise.webp") #2d252d;}
.cadre_color-6 {background: url("../images/noise.webp") #1a2233;}
.cadre_color-7 {background: url("../images/noise.webp") #262626;}
.cadre_color-8 {background: url("../images/noise.webp") #0b1626;}
.cadre_color-9 {background: url("../images/noise.webp") #121214;}


@media (max-width:1366px) {
	#index .casestudies .texte h3 { font: 400 4rem/6rem "Playfair Display";}
	#index .casestudies .photo .item-info h4 { font: 400 2.4rem/3.5rem "Playfair Display";}
}

@media (max-width:992px) {
	#index .casestudies {grid-template-columns:1fr; background: linear-gradient(90deg, rgba(242,242,242,1) 0%, rgba(242,242,242,1) 80%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%);}
	#index .casestudies .photo {grid-area: 1;}
	#index .casestudies .texte { background: none; padding-right: 25vw;    margin-top: 40px;}
	#index .casestudies .texte p { display: none;}
	#index .casestudies .texte h3 { margin-bottom: 30px;}
	#page .photo-intro .texte { margin-top: -150px;}
	#page .grid-3_photo.txt .item-info {margin: -100px auto 0 auto;}
	#page .slogan { margin: 80px auto;}
}
@media (max-width:768px) {
	#page .item-info { padding: 40px 0;}
	#page .grid-3_photo {grid-gap: 10px;}
	#page .grid-4_photo {    grid-template-columns: repeat(2,1fr);}
	#page .photo-intro .texte, #page .photo-intro.reverse .texte { width: 70%; margin-top: -50px;}
	#page .grid-3_photo.case-studies {grid-gap: 30px; grid-template-columns: repeat(2,1fr);}
	#page .grid-3_photo.case-studies div:nth-child(3) { display: none;}		
	#page .content-bckgrd .photo-intro .texte-plus.reverse, #page .photo-intro .texte-plus.reverse { margin-left: 20%; padding-right: 40px;}	
}

@media (max-width:600px) {
	#page .grid-2_photo {grid-template-columns: 1fr;}
	#page .grid-2_texte {grid-template-columns: 1fr;}
	#page .grid-2_texte div:nth-child(2) { padding: 40px;}	
	#page .grid-3_photo.case-studies {grid-gap: 10px;}
}

@media (max-width:400px) {
	#index .casestudies {
    grid-template-columns: 1fr;
    background: linear-gradient(90deg, rgba(242,242,242,1) 0%, rgba(242,242,242,1) 95%, rgba(255,255,255,1) 95%, rgba(255,255,255,1) 100%);}
	#page .grid-4_photo, #page .grid-3_photo {    grid-template-columns: 1fr;}
}