@charset "UTF-8";
/* CSS Document */
/* ================================================

  Fichier    :   css_Layouts.css
  Application:   Layout Template
                 Pour la gestion du template:
                 PY-Architecture

  Auteur     :   . Ricardo Bandeira
  Version    :   1 
  Date       :   31/10/2023

  Notes     :
                * tpl est la désignation de template 
                  et sera utilisé pour désigner les blocs de position (les sections du template) 
								* norme BEM Bloc__Element-name_modificateur-name_modificateur-valeur 
								  exemple: .tpl__inner
								  block-name__elem-name_mod-name_mod-val
                * Espace de noms (Name spaces)
                  .u-   Utilitaires
                  .ui-  User interface
                  .l-   Layout



	// Index des sections:
    @grp Global
    @grp Header

    @grp Accueil
      @grp Intro
      @grp Suite

    @grp MainContent
    @grp Article

    @Grp Projets
      Équipement
      Résidentiel
      Décoration
      Jardin

    @Grp Vision
    @Grp Agence
    @Grp Formulaire


    @grp Page_Erreur 
    @grp Pied de Page (ppg) 

================================================ */
/* @Grp Global ========================================================== */
.tpl__inner,
.projet__container,
.article__body,
.blog-items,
.pagenavigation {
  position: relative;
  width: 95%;
  max-width: var(--inner_max-width);
  margin: var(--u-margin-centered);
  padding: var(--inner_padding);
}

.wrapper__footer .inner.tpl__footer-A.tpl__inner,
.home-presentation__content .inner.tpl__footer-A.tpl__inner {
  padding: 1rem 0;
}

.container, .tck-container {
  max-width: initial;
}

#wrapper__footer {
  z-index: 3;
}

/* Slideshow CK */
.camera_wrap .camera_pag .camera_pag_ul li {
  --_size:1.5rem;
  position: relative;
  background-color: #fff;
	width: var(--_size);
	height: var(--_size);
	margin: 0 0 0 var(--_size);
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
  border: 1px #000 solid;
}
.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent,
.camera_wrap .camera_pag .camera_pag_ul li:hover {
  background-color: #000;
}
.camera_wrap .camera_pag .camera_pag_ul li > span { display: none; }
.camera_prevThumbs, 
.camera_nextThumbs, 
.camera_prev, 
.camera_next, 
.camera_commands, 
.camera_thumbs_cont {
	background: rgba(255, 255, 255, 1);
}

/* @Grp Global (FIN) ==================================================== */
/* @Grp Header ========================================================== */
#wrapper__header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background-color: var(--color_blanc);
  z-index: 2000;
  transition: all 0.36s ease-in;
}

.wrapper__header {
  position: relative;
  background-color: transparent;
  height: auto;
  transition: all 0.36s ease-in;
}

.pg_accueil #wrapper__header,
.pg_panorama #wrapper__header{
  background-color: transparent;
}

#wrapper__header:hover,
.pg_accueil #wrapper__header.header--is-visible.header--is-black{
  background-color: var(--color_blanc);
}
.pg_accueil #wrapper__header:hover {  background-color: transparent; }


body.pg_panorama.pg_panorama--black #wrapper__header {
  background-color: var(--color_blanc);
  transition: all 0.36s ease-in;
}
body.pg_panorama #wrapper__header {
  background-color: transparent;
  transition: all 0.36s ease-in;
}

.header__main {
  position: relative;
}

/* LOGO ==== */
.menu-main__link.menu-main__logo {
  display: block;
  position: relative;
  background-image: url(/images/_Design/logo-main_noir--small.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 50% 50%;
  width: var(--logo-main_width--reduced);
  height: var(--logo-main_heigth--reduced);
  margin: 20px auto 0 auto;
  transition: all 0.5s ease-in;
}

.pg_accueil .menu-main__link.menu-main__logo,
body.pg_panorama .menu-main__link.menu-main__logo {
  background-image: url(/images/_Design/logo-main_blanc_signature.svg);
}


.pg_accueil #tpl__menu-main .menu-main__link.menu-main__logo,
.pg_accueil .header--is-visible .menu-main__link.menu-main__logo,
.pg_panorama #tpl__menu-main .menu-main__link.menu-main__logo {
  background-image: url(/images/_Design/logo-main_blanc--small.svg);
}

.pg_accueil .menu-main__link.menu-main__logo {
  width: var(--logo-main_width);
  height: var(--logo-main_heigth);
}


/* Le menu logo n'est pas visible par défaut */
  #tpl__logo-main{ display: none;} 
/* Le menu logo est visible dans la page d'accueil lorsque le header n'est pas visible */
  .pg_accueil :not(.header--is-visible) #tpl__logo-main{ display: block; }
/* Si le header est visible on masque le logo */
  .pg_accueil .header--is-visible #tpl__logo-main{ display: none; }



body.pg_panorama.pg_panorama--black #tpl__menu-main .menu-main__link.menu-main__logo,
body.pg_panorama.pg_panorama--black .menu-main__link.menu-main__logo {
  background-image: url(/images/_Design/logo-main_noir--small.svg);
  transition: all 0.36s ease-in;
}


body.pg_panorama .menu-main__link.menu-main__logo {
  background-image: url(/images/_Design/logo-main_blanc--small.svg);
  transition: all 0.36s ease-in;
}

.mdl__logo-main ul,
.mdl__logo-main li {
  margin-left: 0;
}

.header--is-visible {
  transition: all 0.36s ease-in;
}
.header--is-visible .menu-main__link.menu-main__logo {
  width: var(--logo-main_width--reduced);
  height: var(--logo-main_heigth--reduced);
}


/* MENU ==== */
#tpl__menu-main {
  --_min-width: 250px;
  position: relative;
  background-color: var(--color_blanc);
  width: 100%;
  transition: all 0.3s ease-in;
  z-index: 2;
}
#tpl__menu-main .lien-home.logo-main {
  padding: 0;
  margin: 0;
  max-height: var(--header_heigth);
}

.pg_panorama #tpl__menu-main,
.pg_panorama #tpl__menu-main a:link {
  background-color: transparent;
  color: var(--color_blanc);
  transition: all 0.36s ease-in;
}

.pg_panorama--black #tpl__menu-main,
.pg_panorama--black #tpl__menu-main a:link {
  background-color: var(--color_blanc);
  color: var(--color_noir);
  transition: all 0.36s ease-in;
}

.pg_panorama #wrapper {
  padding-top: 0;
}

.pg_accueil .wrapper__header #tpl__menu-main {
  transform: translateY(-100%);
  transition: all 0.3s ease-in;
}

.pg_accueil .header--is-visible #tpl__menu-main {
  background-color: transparent;
  transform: translateY(0%);
  transition: all 0.3s ease-in;
}
#tpl__menu-main{ --_menu_border: 1px #737373 solid; }
#tpl__menu-main ul.menu > li > a,
#tpl__menu-main ul.menu > li > span.separator,
#tpl__menu-main ul.nav > li > a,
#tpl__menu-main ul.nav > li > span.separator {
  font-size: 1.8rem;
  text-align: center;
  line-height: 1.2em;
  min-width: var(--_min-width);
  margin: 0.6em 0;
  padding: 0 0.3em;
  border-right: var(--_menu_border);;
}

#tpl__menu-main ul.menu > li:last-child > a,
#tpl__menu-main ul.menu > li:last-child > span.separator,
#tpl__menu-main ul.nav > li:last-child > a,
#tpl__menu-main ul.nav > li:last-child > span.separator {
  border-right: 0;
}

#tpl__menu-main ul.menu,
#tpl__menu-main ul.nav,
#tpl__menu-main ul.maximenuck {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.pg_accueil .header--is-black #tpl__menu-main .menu-main__link.menu-main__logo,
#tpl__menu-main .menu-main__link.menu-main__logo {
	background-image: url(/images/_Design/logo-main_noir--small.svg);
	background-size: 100px 33px;
	background-position: 50% 4px;
	width: 120px;
	min-width: auto;
	border-right: 0;
	height: 45px;
	margin: 0;
}
.pg_accueil .header--is-visible.header--is-black .menu-main__link.menu-main__logo{
  background-image: url(/images/_Design/logo-main_noir--small.svg);
}
.pg_panorama.pg_panorama--black #tpl__menu-main .menu-main__link.menu-main__agence__link,
#tpl__menu-main .menu-main__link.menu-main__agence__link {
  border-left: var(--_menu_border);
}
.pg_panorama #tpl__menu-main .menu-main__link.menu-main__agence__link {
	border-left-color: var(--color_blanc);
}


.mdl__menu-main {
  position: relative;
}
.mdl__menu-main .menu-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mdl__menu-main a.menu-main,
a.main-menu__link {
  color: var(--color_noir);
}

.mod-menu__sub.list-unstyled.small,
#tpl__menu-main ul.nav li ul {
  width: auto;
  padding: 0;
}
.pg_accueil #tpl__menu-main ul.nav li ul{
  background-color: transparent;
}

.nav_main {
  background-color: transparent;
  width: auto;
}

.c-main_menu {
  display: flex;
  justify-content: center;
  list-style: none;
}

.c-main-menu_item {
  padding: 0.7em 1.5em;
  min-width: var(--_min-width);
  margin: 0 auto;
}

.nav-item a:link {
  color: var(--color_noir);
  font-size: 1.8rem;
  font-weight: 300;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.5em;
  min-width: var(--_min-width);
}

.pg_accueil .header--is-visible #tpl__menu-main {
	--_menu_border: 1px var(--color_blanc) solid;
}
.pg_accueil .header--is-visible .nav-item a:link {
  color: var(--color_blanc);
}

.nav-item.current > a:link,
.nav-item.active > a:link {
  font-weight: 600;
  text-decoration: none;
}

.nav-item:hover > a {
  font-weight: 600;
  text-decoration: none;
}

#tpl__menu-main .mod-menu__sub.list-unstyled.small .nav-item a {
  padding: 0 7px;
}

.main-menu a,
body.pg_panorama.pg_panorama--black .main-menu a {
  color: var(--color_noir);
  font-size: 1.6rem;
  font-weight: 300;
  min-width: var(--_min-width);
}
.pg_accueil .main-menu a,
body.pg_panorama .main-menu a {
  color: var(--color_blanc);
}

.pg_accueil .header--is-visible.header--is-black .main-menu a{
  color: var(--color_noir);  
}


#tpl__menu-main ul.menu li:hover > ul,
#tpl__menu-main ul.menu li:hover ul li:hover > ul,
#tpl__menu-main ul.menu li:hover ul li:hover ul li:hover > ul,
#tpl__menu-main ul.menu li:hover ul li:hover ul li:hover ul li:hover > ul,
#tpl__menu-main ul.menu li:focus > ul,
#tpl__menu-main ul.menu li:focus ul li:focus > ul,
#tpl__menu-main ul.menu li:focus ul li:focus ul li:focus > ul,
#tpl__menu-main ul.menu li:focus ul li:focus ul li:focus ul li:focus > ul,
#tpl__menu-main ul.nav li:hover > ul, #tpl__menu-main ul.nav li:hover ul li:hover > ul,
#tpl__menu-main ul.nav li:hover ul li:hover ul li:hover > ul,
#tpl__menu-main ul.nav li:hover ul li:hover ul li:hover ul li:hover > ul,
#tpl__menu-main ul.nav li:focus > ul, #tpl__menu-main ul.nav li:focus ul li:focus > ul,
#tpl__menu-main ul.nav li:focus ul li:focus ul li:focus > ul,
#tpl__menu-main ul.nav li:focus ul li:focus ul li:focus ul li:focus > ul {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

#tpl__menu-main ul.menu li li:hover > a,
#tpl__menu-main ul.menu li li:hover span.separator,
#tpl__menu-main ul.menu li li:focus > a,
#tpl__menu-main ul.menu li li:focus span.separator,
#tpl__menu-main ul.nav li li:hover > a,
#tpl__menu-main ul.nav li li:hover span.separator,
#tpl__menu-main ul.nav li li:focus > a,
#tpl__menu-main ul.nav li li:focus span.separator {
  background-color: transparent;
}

#tpl__menu-main .menu-main__link.projet__link + .mod-menu__sub.list-unstyled.small,
#tpl__menu-main .menu-main__link.vision__link + .mod-menu__sub.list-unstyled.small {
  background-color: transparent;
  width: 100%;
  max-width: initial;
  box-shadow: none;
  z-index: 2000;
}

/* Pour afficher le sous menu de la page active */
body:not(.pg_panorama) #tpl__menu-main .nav-item.active .mod-menu__sub.list-unstyled.small {
  position: fixed;
  display: flex;
  justify-content: center;
  left: 0;
  right: 0;
  z-index: 1;
}

#tpl__menu-main ul.menu li:hover .menu-main__link.projet__link + .mod-menu__sub.list-unstyled.small,
#tpl__menu-main .pg_projet .menu-main__link.projet__link + .mod-menu__sub.list-unstyled.small,
#tpl__menu-main ul.menu li:hover .menu-main__link.vision__link + .mod-menu__sub.list-unstyled.small,
#tpl__menu-main .pg_vision .menu-main__link.vision__link + .mod-menu__sub.list-unstyled.small {
  /* Gestion du Z-Index du sous-menu actif */
  z-index: 5;
}

.equipement__link,
.residentiel__link,
.decoration__link,
.jardin__link {
  position: relative;
}

.pg_panorama #tpl__menu-main ul.menu > li > a,
.pg_panorama #tpl__menu-main ul.menu > li > span.separator,
.pg_panorama #tpl__menu-main ul.nav > li > a,
.pg_panorama #tpl__menu-main ul.nav > li > span.separator {
  border-right-color: var(--color_blanc);
}

.pg_panorama.pg_panorama--black #tpl__menu-main ul.menu > li > a,
.pg_panorama.pg_panorama--black #tpl__menu-main ul.menu > li > span.separator,
.pg_panorama.pg_panorama--black #tpl__menu-main ul.nav > li > a,
.pg_panorama.pg_panorama--black #tpl__menu-main ul.nav > li > span.separator {
  border-right-color: var(--color_noir);
}

.pg_panorama.pg_panorama--black #tpl__menu-main .mod-menu__sub.list-unstyled.small,
#tpl__menu-main .mod-menu__sub.list-unstyled.small {
  width: 100%;
  box-shadow: none;
  justify-content: center;
  max-width: initial;
  z-index: 2000;
}

.pg_panorama #tpl__menu-main .mod-menu__sub.list-unstyled.small {
  background-color: transparent;
  color: var(--color_noir);
}
.pg_panorama.pg_panorama--black #tpl__menu-main .mod-menu__sub.list-unstyled.small {
  background-color: var(--color_blanc);
}

/* @Grp Header (FIN) ==================================================== */
/* @Grp Wrapper Intro =================================================== */
#tpl__intro {
  display: none;
  position: relative;
  z-index: 1;
}

.pg_accueil #tpl__intro {
  display: block;
  position: relative;
  background-image: url(/images/_Media/Intro/acc-intro.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 100vh;
  height: 100dvh;
  transition: all 0.3s ease-in;
  z-index: 10;
}

@keyframes tpl__intro--is-hidden {
  0% {
    opacity: 1;
  }
  100% {
    height: 0;
    opacity: 0;
  }
}
.pg_accueil .header--is-visible + #wrapper #tpl__intro {
  animation: tpl__intro--is-hidden;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in;
  transition: all 0.3s ease-in;
}

.pg_accueil .header--is-visible + #wrapper #tpl__intro .c-date {
  display: none;
}

.u-bar-progress__container {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  z-index: 2;
}

.u-bar-progress {
  background-color: var(--color_blanc);
  width: 0%;
  height: 100%;
}

.acc-intro__visuel {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  padding: 10vh;
  font-size: 4rem;
  color: var(--color_blanc);
}

.c-date {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 250px;
}

.c-date__container {
  position: relative;
  color: #fff;
  width: 50px;
  border: 3px #fff solid;
  margin: 0 auto 40px auto;
}

.c-date .fleche-bas {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  animation: c-date__fleche-anim-bas;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  animation-timing-function: ease-in-out;
  transition: all 0.5s ease-in;
}

@keyframes c-date__fleche-anim-bas {
  0% {
    transform: translateY(0%);
  }
  15% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(50%);
  }
}
.c-date__item {
  position: relative;
  color: #fff;
  text-align: center;
}

.c-date__item:first-child::after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color_blanc);
  width: 95%;
  height: 2px;
  margin: 0 auto;
  z-index: 2;
}

.c-date__title {
  position: absolute;
  bottom: 0;
  text-align: center;
  color: var(--color_blanc);
  letter-spacing: 1.35em;
  font-size: 2.9rem;
  text-transform: uppercase;
  line-height: 2.6em;
  width: 100%;
}

.c-date__ville {
  color: var(--color_blanc);
  text-align: center;
  letter-spacing: 1em;
  text-transform: uppercase;
  font-size: 2.2rem;
}

.c-date__ville.c-date--fixed-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100px;
  z-index: 1;
}

.c-date__ville.c-date--fixed-bottom img {
  display: block;
  margin: 0 auto;
}

.c-date__ville.c-date--fixed-bottom img.fleche-haut {
  margin: 0 auto;
  animation: c-date__fleche-anim-haut;
  animation-duration: 1.5s;
  /*animation-delay: 0s;*/
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  animation-timing-function: ease-in-out;
  transition: all 0.5s ease-in;
}

@keyframes c-date__fleche-anim-haut {
  0% {
    transform: translateY(0%);
  }
  15% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-50%);
  }
}
/* @Grp Wrapper Intro (FIN) ============================================= */
/* @Grp Wrapper Main ==================================================== */
  #wrapper {
    position: relative;
    padding-top: var(--header_heigth);
    z-index: 2;
  }

.pg_accueil #wrapper {
  padding-top: 0;
}

.inner.wrapper {
  max-width: initial;
  margin: 0 auto;
}

.pg_accueil .inner.wrapper {
  max-width: initial;
}

/* @Grp Wrapper Main (FIN) ============================================== */





/* @Grp Accueil ========================================================= */
.pg_accueil .maincontent {
  position: relative;
  width: 100%;
}

.home-presentation {
  --_home-presentation_height:300px;
  position: relative;
  background-color: transparent;
  position: relative;
  background-image: url(/images/_Media/Intro/acc-intro-suite.jpg);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 3;
  transition: all 4s ease-in;
}

.home-presentation__container {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: var(--_home-presentation_height);
  height: 100%;
  overflow: hidden;
  z-index: 5;
}

.home-presentation__content {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--color_blanc);
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 115px 0 0 0;
  transform: translateY(100%);
  z-index: 2;
  transition: all 0.8s ease-in;
}
.home-presentation__content * {
  color: var(--color_text-courant);
}
.home-presentation__content > .inner {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 90%;
  margin: 0 auto;
  max-width: var(--inner_max-width);
  padding-top: 60px;
  height: 100%;
}
.home-presentation__content p {
  line-height: 2;
  letter-spacing: 0.3em;
}
.home-present--is-hovered .home-presentation__content > .inner {
  justify-content: flex-start;
}

.home-presentation__container.home-present--is-hovered .home-presentation__content {
  padding-top: 60px;
  transform: translateY(0%);
  transition: all 0.3s ease-in;
}


/* @Grp Accueil (FIN) =================================================== */





/* @Grp Maincontent ===================================================== */
  .maincontent {
    position: relative;
    min-height: 300px;
  }
  .article__citation_container {
    width: 60%;
    margin: 2em auto;
  }
/* @Grp Maincontent (FIN) =============================================== */






/* @Grp Blog de Catégories ========================================================== */
.com-content-category-blog__item.blog-item.tck-article {
  position: relative;
  overflow: hidden;
}
.com-content-category-blog__item.blog-item.tck-article:hover .item-content {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease-in;
}
.com-content-category-blog__item.blog-item.tck-article:hover .item-content h3 {
  transition: all 0.3s ease-in;
}
.blog-item figure { margin: 0;}
.blog-item {
  margin-bottom: 2%;
  font-size: 0;
}
.blog-item .article__intro {
  position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
  transform-origin: 50% 50%;
	background-color: rgba(0,0,0,0.1);
  transition: all 0.3s ease-in-out;
}
.blog-item:hover .article__intro {
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: rgba(0,0,0,0.5);
  transition: all 0.3s ease-in-out;
}
/*
  .article__intro .item-content{
*/
.pg_equipement .item-content,
.pg_residentiel .item-content,
.pg_decoration .item-content,
.pg_jardin .item-content{
  position: absolute;
}

.left.item-image {
  position: relative;
  width: 100%;
  height: 100%;
}
.left.item-image a:link {
  display: block;
  z-index: 2;
}

.item-content {
  position: relative;
  background-color: rgba(0, 0, 0, 0);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  padding: 0;
  opacity: 1;
  z-index: 1;
  transition: all 0.4s ease-in;
}

.tck-article-body {
  align-self: stretch;
  height: 100%;
}

.article__intro {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.article__intro h3 {
  color: var(--color_noir);
  text-align: center;
  transition: all 0.4s ease-in;
}

p.readmore.tck-readmore {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
}
p.readmore.tck-readmore .btn.btn-secondary {
  display: block;
  height: 100%;
  background: none;
  overflow: hidden;
  text-indent: -900vw;
}

/* @Grp Blog de Catégories (FIN) ==================================================== */
/* @Grp Article ========================================================== */
.article {
  position: relative;
}

.view-category .article__intro h3 {
  color: #fff;
}

.article__panorama {
  position: relative;
  width: 100%;
  /* height: 93vh; */
  z-index: 1;
}
.article__panorama img {
  position: relative;
}

.article__heading {
  position: relative;
  /* height: var(--header_heigth);*/
  transform: translateY(-65%);
  z-index: 3;
}
.article__heading .article__date,
.article__heading .article__header {
  font-size: 1.9rem;
  text-transform: uppercase;
  padding: 0;
}
.article__heading .article__date {
  color: #fff;
  width: 50%;
  height: 50%;
  margin: 0 0 0 50%;
}
.article__heading .article__header {
  text-align: right;
  color: #fff;
  background-color: #000;
  width: 100%;
  margin: 0 auto;
}
.article__heading .article__header span.article__header {
  text-align: left;
  color: #000;
  background-color: #fff;
  width: 50%;
  height: 100%;
}
.article__heading .article__header span.article__header .cadre {
  padding: 1px 4px;
  margin: 0 4px 0 0;
  border: 1px #000 solid;
}

.article__body {
  padding-top: 50px;
  z-index: 2;
}

.article__container {
  padding: 2em 0;
}

.article__header {
  padding: 0;
}
.article__header--right{ order: 2; }
.article__header--right .article__header{
  text-align: right;
}

.col--gauche .article__header,
h4.article__header {
  text-align: left;
}
.col--droite .article__header{
text-align: left;
}

.col--droite.u-flex-item {
  margin: 0 0 0 50%;
}

/* @Grp Article (FIN) ==================================================== */





/* @Grp Projets ========================================================= */
#tpl__top-bar {
  display: none;
}

.pg_accueil .maincontent {
  display: block;
}
.pg_accueil #tpl__top-bar.scroll {
  top: 0;
  transform: translateY(0);
  transition: all 4s ease-in;
}

.vignettes__container{ padding-bottom: 2em; }

.vignettes__list-container{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}

.vignettes__list-item_container {
  position: relative;
  font-size: 0; /* fix the space in the code for relevant height content */
  line-height: 0;
}

.vignettes__list-item {
  position: relative;
  flex-grow: 1;
  flex-basis: 24%;
  flex-shrink: 1;
  min-width: 210px;
  max-width: 50%;
  padding: 2.5em 0 0 0;
  margin-right: 1em;
  overflow: hidden;
}
/* .vignettes__list-item:first-child { padding-left: 0; }*/
.vignettes__list-item:last-child { margin-right: 0; }

.vignettes__body { padding-top: 2.5em; }
.vignettes__body .u-btn { margin-top: 2em; }



.vignettes__list-item h4 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.2rem;
  color: var(--color_blanc);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.8em;
  padding: 0;
  z-index: 1;
  transition: all 0.2s ease-in-out;
}
.vignettes__list-item h4 a:link {
  display: block;
  color: var(--color_blanc);
  text-align: center;
  width: 100%;
  height: 100%;
  font-size: 2.5rem;
  font-weight: 400;
  padding: 25% 0;
  line-height: 3.6em;
}
.vignettes__list-item h4 a:hover {
	text-decoration: none;
	background-color: rgba(0,0,0,0.5);
  transition: all 0.2s ease-in-out;
}

.vignettes__list-item h4:hover + .vignettes__link img {
  transform-origin: 50% 0%;
  transform: scale(1.03, 1.03);
  filter: grayscale(55%);
  transition: all 0.2s ease-in-out;
}

.projet .vignettes__list-item h4 a {
  font-size: 2.3rem;
  letter-spacing: 0.4em;
}

.visions .vignettes__list-item h4 a {
  font-size: 2.5rem;
  letter-spacing: 0.8em;
}



.vignettes__list-item h4 a:link {
  color: var(--color_blanc);
  transition: all 0.3s ease-in-out;
}

.vignettes__link,
a.vignettes__link {
  display: block;
  position: relative;
  color: var(--color_blanc);
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.vignettes__link img {
  transition: all 0.2s ease-in-out;
}

/* Équipement  ==== */
/* Résidentiel  ==== */
/* Décoration  ==== */
/* Jardin  ==== */
/* @Grp Projets (FIN) =================================================== */
/* @Grp Vision ========================================================== */
/* XXX  ==== */
/* @Grp Vision (FIN) ==================================================== */



/* @Grp Agence ========================================================== */
/* @Grp Agence (FIN) ==================================================== */





/* @Grp Contact ========================================================== */
  .article.contact .article-section__content .contact__visuel { width: 100%;  }
/* @Grp Contact (FIN) ==================================================== */



/* @Grp Formulaire ====================================================== */
/* @Grp Formulaire (FIN) ================================================ */




/* @Grp Pied de page ==================================================== */
#menu-footer,
.menu-footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  max-width: 60%;
  margin: 0 auto;
}

.menu-footer li {
  display: block;
  margin: 0;
  min-width: 300px;
  flex-basis: 30%;
}

.menu-footer li:nth-child(1) a:link {
  text-align: right;
}

.menu-footer li:nth-child(2) {
  flex-basis: 10%;
  min-width: 10%;
}

.menu-footer li:nth-child(3) a:link {
  text-align: left;
}

.menu-footer__link,
.menu-footer__link:link,
.menu-footer__link:visited,
.menu-footer .nav-item a:link {
  display: block;
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--color_link);
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
}

.menu-footer__link:hover,
.menu-footer .nav-item a:link:hover {
  text-decoration: underline;
  color: var(--color_noir);
}

/* @Grp Pied de page (FIN) ============================================== */
/* @Grp Footer ========================================================== */
#wrapper__footer {
  background-color: transparent;
  transition: all 0.3s ease-in;
}

.pg_accueil #wrapper__footer:not(.footerMain--is-visible) {
  transform: translateY(150%);
  transition: all 0.3s ease-in;
}
.pg_accueil #wrapper__footer.footerMain--is-visible {
  height: 200px;
  transform: translateY(0);
  transition: all 0.3s ease-in;
}
.pg_accueil #wrapper__footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1500;
}
.pg_accueil #wrapper__footer:hover, .pg_accueil #wrapper__footer.footerMain--is-visible {
  transform: translateY(0%);
  transition: all 0.3s ease-in;
}
.pg_accueil #wrapper__footer .tpl__footer-A.tpl__inner {
  padding: 0;
}
.pg_accueil .mdl__menu-footer {
  position: relative;
}
.pg_accueil .menu-footer {
  transform: translateY(150%);
  transition: all 0.3s ease-in;
}
.pg_accueil .menu-footer.menu-footer--is-hovered {
  transform: translateY(0%);
  transition: all 0.3s ease-in;
}
.pg_accueil .footerMain--is-visible .wrapper__footer {
  position: relative;
  display: flex;
  justify-content: end;
  flex-direction: column;
  height: 100%;
}
.pg_accueil .footerMain--is-visible .wrapper__footer .tpl__footer-A.tpl__inner {
  max-width: initial;
  width: auto;
}

.footer-menu__Instagram {
  width: 40px;
  height: 40px;
  background-image: url(/images/_Design/instagram-noir.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  margin: 0 auto;
}

/* @Grp Footer (FIN) ==================================================== */
/* REVENIR POUR CHANGER CETTE DECLARATION */
/* @Grp Header ========================================================== */
.u-is-reduced {
  /*
    --header_heigth:var(--header_heigth--reduced); 
    --logo-main_width:var(--logo-main_width--reduced) ;
  --logo-main_heigth:var(--logo-main_heigth--reduced);
    transition: all 0.36s ease-in;
    */
}

/* @Grp Header (FIN) ==================================================== */
/* @Grp Intro ========================================================== */
/* Slideshow Accueil */
.pg_accueil .tpl__top-position {
  width: 100%;
  margin: 0 auto;
  background-color: var(--color_gris-clair);
}

.mdl__slideshow-accueil {
  width: 100%;
  margin: 0 auto;
  max-width: var(--inner_max-width_header);
}

#camera_wrap_110 .camera_caption > div {
  background-color: transparent;
  color: var(--color_gris-blanc);
  height: 100%;
}
#camera_wrap_110 .camera_caption_title {
  font-size: 8rem;
  color: var(--color_blanc);
}
#camera_wrap_110 .camera_caption_desc {
  font-size: 3rem;
  color: var(--color_gris-blanc);
}
#camera_wrap_110 .camera_commands {
  height: 100%;
  top: 0;
  margin-top: 0;
}
#camera_wrap_110 .camera_white_skin .camera_commands > .camera_play,
#camera_wrap_110 .camera_commands > .camera_play {
  background-image: url(../images/camera_skins.png);
  height: 100px;
  width: 40px;
  background-position: 0;
  background-color: #d78416;
}

/* @Grp Intro (FIN) ==================================================== */
/* @Grp Banniere ========================================================== */
.tpl__banniere {
  background-image: url(/images/_Medias/bannieres/bg-devis-gratuit.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  width: 100%;
  margin-top: var(--u-espace_section);
  padding: 2em 0;
}

.pg_accueil .tpl__banniere {
  background-image: url(/images/_Medias/bannieres/bg-ban_accueil.jpg);
}

.pg_projets .tpl__banniere {
  background-image: url(/images/_Medias/bannieres/bg-ban_projets.jpg);
}

.pg_travaux .tpl__banniere {
  background-image: url(/images/_Medias/bannieres/bg-ban_travaux.jpg);
}

.pg_ravalement .tpl__banniere {
  background-image: url(/images/_Medias/bannieres/bg-ban_ravalement.jpg);
}

.pg_cheminee .tpl__banniere {
  background-image: url(/images/_Medias/bannieres/bg-ban_cheminee.jpg);
}

.pg_elagage .tpl__banniere {
  background-image: url(/images/_Medias/bannieres/bg-ban_elagage.jpg);
}

.pg_nettoyage .tpl__banniere {
  background-image: url(/images/_Medias/bannieres/bg-ban_nettoyage.jpg);
}

.pg_toiture .tpl__banniere {
  background-image: url(/images/_Medias/bannieres/bg-ban_toiture.jpg);
}

.pg_etancheite .tpl__banniere {
  background-image: url(/images/_Medias/bannieres/bg-ban_etancheite.jpg);
}

.banniere__container .u-btn_container {
  text-align: center;
  width: 60%;
  margin: 2em auto;
}
.banniere__container a.u-btn__phone,
.banniere__container a.u-btn__phone:link {
  display: inline-block;
  background-image: var(--color_btn);
  font-size: 2.4rem;
  color: var(--color_blanc);
  background-color: transparent;
  border-color: var(--color_blanc);
}
.banniere__container a.u-btn__phone :hover,
.banniere__container a.u-btn__phone:link :hover {
  background-image: var(--color_btn--hover);
}

/* @Grp Banniere (FIN) ==================================================== *//*# sourceMappingURL=css_Layouts.css.map */