/*
#@0
#@1
#@2
*/
/* =========== */
/* PAGE STYLES */
/* =========== */
/* ============= */
/*  CUSTOM VARS  */
/* ============= */
/*	////
	SCSS
	//// */
/*	//// 
	TEXT
	//// */
/*	////
	URLS
	//// */
/*	/////
	FILES
	///// */
/*	/////
	FONTS
	///// */
/*	/////
	SIZES
	///// */
/*	//////
	COLORS
	////// */
/* SHARED WITH BACKOFFICE RTE : add $c_ */
/* ------------------------------------ */
/* ============= */
/* SHARED STYLES */
/* ============= */
/*	********
	 FOOTER
	******** */
footer {
  position: fixed;
  z-index: 10;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: #f2f2f2;
  padding: 15px 30px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
}
/*	FOOTER ELEMENTS
		--------------- */
/* > Section size */
#contact_details, #legals, #lang_and_social {
  width: 30vw;
}
/* > Links */
footer a {
  display: inline-block;
  color: #231f20;
  transition: color 300ms;
}
/* ***** HOVER ***** */
footer a:hover, footer a.active {
  color: #c69838;
}
/*	LEFT INFORMATIONS
		----------------- */
/* > Logo */
#footer_logo {
  width: calc(30vw - 250px);
  height: 70px;
  padding: 10px 20px;
  background: white;
  object-fit: contain;
  object-position: center center;
}
/* > Contact summary */
#contact_summary {
  display: inline-block;
  width: 200px;
  margin-left: 12px;
  padding: 5px 0 5px 12px;
  border-left: 1px solid #231f20;
  line-height: 0.8rem;
  white-space: nowrap;
}
/*	LANG AND SOCIAL
		--------------- */
/* > Links */
#lang_and_social a {
  margin: 0 3px;
}
/* > Back home link */
#home_back {
  margin-right: 20px !important;
}
/* > Lang first link */
.first_social {
  margin-left: 20px !important;
}
/*	LEGALS
		------ */
.legals_links {
  margin-top: 5px;
  width: 100%;
  text-align: right;
}
/*	*******
	 POPIN
	******* */
#popin {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(242, 240, 242, 0.9);
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  -webkit-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
}
#popin i, #popin em {
  position: fixed;
  z-index: 15000;
  top: 20px;
  right: 20px;
  font-size: 2.5rem;
  cursor: pointer;
}
#popin strong {
  font-weight: 600;
}
#popin a {
  color: #c69838;
  text-decoration: underline;
}
#popin .box {
  width: 900px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
/* MODEL 1
	   ------- */
#popin.model_1 .text, #popin.model_2 .text {
  width: 100%;
  height: 500px;
  padding: 30px;
  background-color: rgba(35, 31, 32, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-size: 0.9rem;
  line-height: 1.4rem;
  color: #fff;
  position: relative;
}
#popin .overflow {
  width: calc(50% - 30px);
  padding-right: 10px;
  height: 100%;
  overflow: auto;
}
#popin .overflow.full {
  width: 100%;
}
/* width */
#popin .overflow::-webkit-scrollbar {
  width: 10px;
  cursor: pointer;
}
/* Track */
#popin .overflow::-webkit-scrollbar-track {
  background: white;
}
/* Handle */
#popin .overflow::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
/* Handle on hover */
#popin .overflow::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}
#popin.model_1 img {
  display: block;
  width: 50%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  right: 0;
}
/* MODEL 2
	   ------- */
#popin.model_2 .text {
  width: 100%;
  padding: 30px;
  margin: 60px;
}
#popin.model_2 img {
  display: none;
}
/*	*****
	 TAC
	***** */
#tarteaucitronAlertBig {
  background-color: #231f20 !important;
  /* couleur de fond */
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}
/* Boutons Accepter / Refuser tout */
.tarteaucitronAllow {
  background-color: #bf9a4a !important;
}
.tarteaucitronDeny {
  background-color: #C1292E !important;
}
/* ======================= */
/* ======================= */
/* RESPONSIVE BREAK POINTS */
/* ======================= */
/* ======================= */
/* ---------- BIG DESKTOP ---------- */
/* ---------- BIG TABLET LANDSCAPE (1000) ---------- */
/* ---------- TABLET LANDSCAPE (900) ---------- */
@media screen and (max-width: 1050px) {
  footer {
    height: auto;
  }
  #contact_details, #legals, #lang_and_social {
    width: 100vw;
  }
  #contact_details {
    justify-content: center;
    margin-bottom: 20px;
  }
  #footer_logo {
    width: 200px;
  }
  #lang_and_social {
    margin-bottom: 20px;
    font-size: 0.8rem;
  }
  #legals.fxje {
    justify-content: center;
  }
}
/* ---------- TABLET PORTRAIT AND SMARTPHONE LANDSCAPE (720) ---------- */
/* ---------- SMARPHONE LANDSCAPE (600) ---------- */
/* ---------- SMARPHONE PORTRAIT (350) ---------- */
@media screen and (max-width: 450px) {
  /* MODEL 1 */
  /* MODEL 2 */
  footer {
    position: relative;
    bottom: auto;
    left: auto;
  }
  #contact_summary {
    width: 100%;
    margin-left: 0;
    margin-top: 15px;
    padding: 5px 0;
    border-left: none;
    text-align: center;
  }
  #home_back, .first_social {
    margin: 0 !important;
  }
  #languages {
    width: 100%;
    margin: 20px 0;
    text-align: center;
    font-size: 1rem;
  }
  .fab {
    font-size: 1.5rem;
  }
  #popin .box {
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
  }
  #popin.model_1 .text, #popin.model_2 .text {
    height: 400px;
  }
  #popin.model_1 .text, #popin.model_2 .text {
    padding: 30px;
  }
  #popin.model_1 img, #popin.model_2 img {
    display: none;
  }
  .legals_links {
    text-align: center;
  }
}
/* ---------- MOBILE PORTRAIT (320) ---------- */
/* =========== */
/* PAGE STYLES */
/* =========== */
/*	******
	 TEXT
	****** */
/* > Inline bloc */
.text.bigger {
  font-size: 1.0625rem;
  line-height: 1.3rem;
}
/* ======================= */
/* ======================= */
/* RESPONSIVE BREAK POINTS */
/* ======================= */
/* ======================= */
/* ---------- BIG DESKTOP ---------- */
/* ---------- BIG TABLET LANDSCAPE (1000) ---------- */
/* ---------- TABLET LANDSCAPE (900) ---------- */
/* ---------- TABLET PORTRAIT AND SMARTPHONE LANDSCAPE (720) ---------- */
/* ---------- SMARPHONE LANDSCAPE (600) ---------- */
/* ---------- SMARPHONE PORTRAIT (350) ---------- */
/* ---------- MOBILE PORTRAIT (320) ---------- */
/*	**************
	 PAGE CONTENT
	************** */
/*	FRAMEWORK
		--------- */
/* VAR */
#text_main {
  width: 25%;
  height: 60vh;
}
#img6 {
  width: 75%;
  height: 60vh;
}
/* VAR */
/* VAR */
#img7 {
  width: 20%;
  height: 50vh;
}
#img8 {
  width: 20%;
  height: 50vh;
}
#img9 {
  width: 20%;
  height: 50vh;
}
#img10 {
  width: 20%;
  height: 50vh;
}
#img11 {
  width: 20%;
  height: 50vh;
}
#img12 {
  width: 40%;
  height: 60vh;
}
#text_ps {
  width: 20%;
  height: 60vh;
}
#img13 {
  width: 40%;
  height: 60vh;
}
/*	POPIN
		----- */
/* VAR */
#popin_button {
  width: 40%;
  border: 10px solid white;
  height: 60px;
}
/* > Popin container */
#popin_grange {
  background: white;
  position: fixed;
  z-index: 20;
  bottom: 100px;
  left: 50px;
  border-width: 20px 0;
  border-style: solid;
  border-color: white;
  width: -webkit-calc(100vw - 115px);
  width: calc(100vw - 115px);
  max-height: 70%;
  overflow: auto;
  font-size: 0.875rem;
  line-height: 1.1rem;
  display: none;
}
/* > Popin structure */
#left_content {
  width: 45%;
}
/* > Contrat */
#text_main_popin, #contrat {
  width: 100%;
  padding: 20px;
  background: #e5ddd2;
  margin-bottom: 20px;
}
#contrat {
  margin-bottom: 0;
}
#contrat .clean {
  border: none;
}
#contrat picture, #contrat img {
  display: inline-block;
  margin-right: 20px;
  width: 175px;
  height: 220px;
  object-fit: cover;
}
#contrat span {
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.4rem;
}
#right_content {
  width: -webkit-calc(55% - 110px);
  width: calc(55% - 110px);
  margin-left: 20px;
}
/* >> Close */
.close {
  position: fixed;
  z-index: 30;
  top: calc(20% + 10px);
  right: 95px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #e1e2e3;
  color: #c69838;
  cursor: pointer;
  font-size: 3rem;
  padding: 3px 0 0 0;
  transition: color 300ms;
  margin-bottom: 20px;
  border: none;
}
/* ***** HOVER ***** */
.close:hover {
  color: #231f20;
}
/* >> Inner container */
#inner_content {
  background: #e5ddd2;
  padding: 10px;
}
#left_text, #right_text {
  width: 100%;
  padding: 10px;
}
/* > Popin format */
#popin_grange .maintext h1:first-child, #popin_grange .maintext h2:first-child, #popin_grange .maintext h3:first-child, #popin_grange .maintext h4:first-child {
  display: inline-block;
  background: #231f20;
  color: white;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 35px 8px;
}
#popin_grange .maintext h1:not(:first-child), #popin_grange .maintext h2:not(:first-child), #popin_grange .maintext h3:not(:first-child), #popin_grange .maintext h4:not(:first-child), #popin_grange .maintext strong {
  font-weight: 700;
}
/*	LINK
		---- */
#link {
  width: 60%;
  border: 10px solid white;
  height: 60px;
}
/* ======================= */
/* ======================= */
/* RESPONSIVE BREAK POINTS */
/* ======================= */
/* ======================= */
/* ---------- BIG DESKTOP ---------- */
/* ---------- BIG TABLET LANDSCAPE (1000) ---------- */
/* ---------- TABLET LANDSCAPE (900) ---------- */
/* ---------- TABLET PORTRAIT AND SMARTPHONE LANDSCAPE (720) ---------- */
/* ---------- SMARPHONE LANDSCAPE (600) ---------- */
/* ---------- SMARPHONE PORTRAIT (350) ---------- */
@media screen and (max-width: 450px) {
  #text_main, #img6, #img7, #img8, #img9, #img10, #img11, #img12, #text_ps, #img13, #popin_button, #link {
    width: 100%;
    height: auto;
  }
  #popin_button, #link {
    justify-content: center;
  }
  .mainlink {
    padding-left: 20px;
    padding-right: 20px;
  }
  #popin_grange {
    bottom: 0;
    left: 0;
    width: 100vw;
    padding: 0 20px;
    max-height: calc(100vh - 110px);
  }
  #left_content, #right_content {
    width: 100%;
    margin-left: 0;
  }
  #contrat {
    margin-bottom: 20px;
  }
  #left_text, #right_text {
    width: 100%;
  }
  #popin_grange .maintext h2:first-child {
    padding-left: 20px;
    padding-right: 20px;
  }
  .close {
    top: 140px;
    right: 30px;
    background: white;
  }
}
/* ---------- MOBILE PORTRAIT (320) ---------- */
