/*
Theme Name: Dupont Blouin 2025
Theme URI: https://github.com/tidythemes/blankslate
Author: Patrick Leblanc
Author URI: https://concept-net.net
Version: 2025.11
Text Domain: blankslate
Domain Path: /languages

*/

/*
 * Fonts
 * Global stuff
 * Nav
 * General Structure
 * Swiper
 * Home-specific
 * Projects
 */

/*
 * ====================================
 * Fonts
 * ------------------------------------
 */


@font-face {
    font-family: 'Reader';
    src: url('fonts/subset-Reader-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Reader';
    src: url('fonts/subset-Reader.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Reader-Medium';
    src: url('fonts/subset-Reader-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
  /*--padding: 1rem;*/
  --titleSize: 1.5rem;
  --subTitleSize: 1.2rem;
  --gray: #cccccc;

  --headerHeight: 0px;
  --footerHeight: 0px;

  --currentSlideTextHeight: 0px;
  --slidesTextBottom: 3.8rem;

  --spaceBetweenMenuItemsDesktop: 1.9rem;
}

@media (max-width: 1450px) {
  :root {
    --spaceBetweenMenuItemsDesktop: 0.7rem;
  }
}

/*
 * ====================================
 * Global stuff
 * ------------------------------------
 */
body {
  font-family: 'Reader', sans-serif;
  font-size: 1.1vh;
  line-height: 1.3;
  box-sizing: border-box;
  padding: 1rem;
  min-height: 100vh;
}

a {
  text-decoration: none;
  color: black;
}

b, strong {
  font-weight: normal;
  font-family: 'Reader-Medium', sans-serif;
}

.wrapper {
  font-size: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding: var(--padding);

  /* Make sure we take the width of the vertical scrollbar into account: */
  width: calc(100vw - (100vw - 100%));

  min-height: 100vh;
}
@media (max-width: 768px) {
  .wrapper {
    padding: 0;
  }
}

.img-responsive {
  width: 100%;
  height: auto !important;
}

.text-align-right {
  text-align: right;
}

@media (max-width: 768px) {
  .mobile-subtitle {
    font-size: var(--titleSize);
    font-family: 'Reader-Medium', sans-serif;
    font-weight: normal;
  }
}

@media (max-width: 768px) {
  .mobile-medium {
    font-family: 'Reader-Medium', sans-serif;
    font-weight: normal;
  }
}

@media (max-width: 768px) {
  .petit-bottom-padding-mobile {
    padding-bottom: 0.4rem;
  }
}

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

.site-title > h1 {
  margin: 0;
}

.menu {
  list-style-type: none;
  display: flex;
  margin-left: 0;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .menu {
    justify-content: flex-end;
  }
}
@media (max-width: 768px) {
  .menu {
    /* By default */
    display: none;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    z-index: 2;
    box-sizing: border-box;
    padding: var(--padding);
    min-height: 300px;
    text-align: left;
  }
}

.is-menu-open .menu {
  display: block !important ;
}

.categs {
  padding-left: 0;
  display: flex;
}
@media (max-width: 768px) {
  .categs {
    display: block;
  }
}


.menu-item- {
  display: none;
}


.categs li {
  list-style: none;
}


.menu-item-, /* project category links */
.menu-item {
  padding-left: var(--spaceBetweenMenuItemsDesktop);
  font-size: var(--titleSize);
}
@media (max-width: 768px) {
  .menu-item-, /* project category links */
  .menu-item {
    padding: 0;
  }
}
  .menu-item-55 /* Français */,
  .menu-item-57 /* English */ {
    padding-left: 0 !important;
  }
@media (max-width: 768px) {
  .menu-item- { /* project category links */
    padding-left: var(--spaceBetweenMenuItemsDesktop);
  }
}
.menu-item- a , /* project category links */
.menu-item a {
  color: var(--gray);
}
@media (min-width: 768px) {
  .home .menu-item- a,
  .home .menu-item a {
    color: white;
  }
  .home .menu-item- a:hover,
  .home .menu-item a:hover {
    color: var(--gray);
  }
}

.menu-item- a:hover , /* project category links */
.menu-item a:hover {
  color: #A2A2A2;
}
.menu-item-.current_page_item a, /* project category links */
.menu-item.current_page_item a {
  color: #000000;
}

.menu-wrapper {
  width: calc(50% - (var(--padding) / 2) );
}
@media (max-width: 768px) {
  .menu-wrapper {
    text-align: right;
  }
}

.menu__button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  font-size: var(--titleSize);
  color: var(--gray);
}
@media (max-width: 768px) {
  .menu__button {
    position: relative;
    top: 5px;
  }
}

::-moz-focus-inner {
  border: 0;
}
.menu__close {
  position: absolute;
  top: var(--padding);
  right: var(--padding);
  z-index: 2;
  background: url('images/close-x.svg') no-repeat left top;
  border: none;
  color: transparent;
}
@media (min-width: 768px) {
  .menu__close ,
  .menu__button {
    display: none;
  }
}

@media (max-width: 768px) {
  .lang-item-en ,
  .lang-item-fr {
    position: absolute;
    bottom: var(--padding);
    right: var(--padding);
  }
}

@media (min-width: 768px) {
  .menu-item-home {
    display: none;
  }
}


/*
 * ====================================
 * Highlighting the categories in the menu
 * ------------------------------------
 */



/*
 * ====================================
 * General Structure
 * ------------------------------------
 */

/* Sticky Footer: */

/* For Desktop: */
.container {
  min-height: calc( 100vh - (var(--headerHeight) + var(--footerHeight) + var(--padding) * 4) );
}
/* For Mobile: */
@media (max-width: 768px) {
  .container {
    min-height: calc( 100vh - (var(--headerHeight) + var(--footerHeight) + var(--padding)) );
  }
}

@media (max-width: 768px) {
  .content {
    padding: 0 var(--padding);
  }
}

.top-border {
  border-top: 1px solid #000;
}
@media (min-width: 768px) {
  .desktop-top-border {
    border-top: 1px solid #000;
  }
}
.fake-top-border {
  border-top: 1px solid transparent;
}
.top-padding {
  padding-top: 0.5rem;
}

.header {
	    background: rgba(0, 0, 0, 0.5);
    padding: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 2rem;
  align-items: flex-start;
}
@media (max-width: 768px) {
  .header {
    background: white;
    align-items: flex-end;
    box-sizing: border-box;
    padding: var(--padding);
    margin-bottom: 0;
    
    /* at least for home */
    position: static;
    width: 100%;
  }
}

@media (min-width: 758px) {
  .branding {
    position: relative;
    top: -1px;
  }
}

.menu-menu-container ,
.menu-menu-in-english-container {
  display: block;
  position: relative;
  top: -0.35rem;
}
@media (max-width: 768px) {
  .menu-menu-container,
  .menu-menu-in-english-container {
    display: none;

    /* at least for home */
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    height: auto;
    min-height: 10vh;

  }
}
.is-menu-open .menu-menu-container,
.is-menu-open .menu-menu-in-english-container {
  display: block;
}


.logo {
  display: block;
  width: 15rem;
  height: 3rem;
  background: url('images/logo-dupont-blouin.svg') no-repeat left top;
  background-size: contain;
  text-indent: -99999px;
}
@media (max-width: 768px) {
  .logo {
    width: 13rem;
  }
}
.home .logo {
   background: url('images/logo-dupont-blouin_white.svg') no-repeat left top;
   background-size: contain;
   cursor: default;
}
@media (max-width: 768px) {
  .home .logo {
    background: url('images/logo-dupont-blouin.svg') no-repeat left top;
     background-size: contain;
  }
}

.flex-columns {
}
@media (min-width: 768px) {
  .flex-columns {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .column.half {
    width: 50%;
  }
  .column.half:first-child {
    padding-right: 1rem;
  }

  .column.fifth {
    width: 20%;
  }

  .column.sixth {
    width: 16.666666%;
  }

  .content-bloc .column.left {
    width: 39%;
  }
  .content-bloc .column.right {
    width: 61%;
  }

  .push-up {
    margin-top: 1rem;
  }
  .push-down {
    margin-bottom: 1rem;
  }
}

.entry-content {
}
@media (max-width: 768px) {
  .entry-content {
    margin-top: calc(2 * var(--padding));
  }
}
.entry-content p {
  margin-top: 0;
}
.entry-content p:last-child {
  margin-bottom: 0;
}

.content-bloc {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.content-bloc:first-child {
  padding-top: 0;
}

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

@media (max-width: 768px) {
  #footer {
    display: none;
  }
}

@media (max-width: 768px) {
  [data-barba-namespace='contact'] #footer {
    display: block;
  }
  [data-barba-namespace='contact'] #copyright .contact-footer {
    display: flex;
    flex-direction: column-reverse;
    border-top: none;
  }
  #copyright .contact-footer a {
    text-decoration: underline;
  }
  [data-barba-namespace='contact'] .social.contact-footer > .column:first-child {
    border-top: 1px solid #000;
  }
}

@media (max-width: 768px) {
  .footer {
    padding: 0 var(--padding);
  }
}
.footer a {
  text-decoration: underline;
  color: black;
}
.footer a:hover {
  text-decoration: none;
}

.social-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 9px;
  background-position: left top;
  background-repeat: no-repeat;
  text-indent: -99999px;
  opacity: 0.2;
}
@media (max-width: 768px) {
  .social-icon {
    opacity: 1;
    margin-right: 6px;
  }
}
.social-icon:hover {
  opacity: 1;
}
.social-icon--facebook {
  background-image: url('images/icon-fb-black.svg');
}
.social-icon--instagram {
  background-image: url('images/icon-instagram-black.svg');
}
.social-icon--linkedin {
  background-image: url('images/icon-linkedin-black.svg');
}

.home .footer {
  position: absolute;
  left: 0;
  top: 100vh;
  width: 100%;
  height: 3rem;
  padding: 1rem;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .home .footer {
    position: static;
  }
}

.footer .footer-widget .textwidget > p {
  margin-top: 0;
}

@media (max-width: 768px) {
  .footer .footer-widget .textwidget > p {
    line-height: 1.9rem;
  }
  .contact-footer {
    padding-left: var(--padding);
    padding-right: var(--padding);
  }
  .footer > .contact-footer {
    padding-left: 0;
    padding-right: 0;
  }
  .contact-footer > .column {
    padding-top: 1rem;
    padding-bottom: 0.7rem;
  }
}

/*
 * ====================================
 * Page-specific
 * ------------------------------------
 */

/* Contact */
.contact-content a:hover ,
#copyright a:hover {
  text-decoration: underline;
}
.equipe__membres > .flex-columns {
  display: flex; /* For mobile */
  justify-content: flex-start;
}
@media (max-width: 768px) {
  .equipe__membres {
    margin-top: 0.2rem;
  }
}
.equipe__membre {
  max-width: 176px;
}
@media (max-width: 768px) {
  .equipe__membre:first-child {
    margin-right: var(--padding);
  }
}
@media (max-width: 768px) {
  .membre__name {
    display: none;
  }
}

@media (min-width: 768px) {
  .prix-et-mention--header .column {
    padding-bottom: 0.4rem;
  }
}
.contact-footer a {
  color: #000;
}
.contact-footer > .column,
.prix-et-mention > .column {
  padding-top: 1rem;
}
.home .contact-footer > .column {
  padding-top: 0;
}
@media (min-width: 768px) {
  [data-barba-namespace="projects"] .contact-footer > .column ,
  [data-barba-namespace="project"] .contact-footer > .column ,
  [data-barba-namespace="projects-category"] .contact-footer > .column {
    padding-top: 0;
  }
}
.prix-et-mention > .left.column {
  border-top-color: transparent;
}
.prix-et-mention > .right.column {
  padding-bottom: 1rem;
}
@media (max-width: 768px) {
  .contact-left-image {
    display: none;
  }
}

/*
 * ====================================
 * Swiper
 * ------------------------------------
 */

@media (max-width: 768px) {
  .swiper-wrapper {
    display: block;
    height: auto;
  }
}


.flickity-prev-next-button {
  top: 0;
  height: 100vh;
  width: 50%;
}
.flickity-prev-next-button.previous {
  left: 0;
  cursor: url(images/cursor-left.png), crosshair;
  height: calc(100vh - (var(--slidesTextBottom) + var(--currentSlideTextHeight)));
}
.flickity-prev-next-button.next {
  right: 0;
  cursor: url(images/cursor-right.png), crosshair;
}

@media (max-width: 768px) {
  .flickity-prev-next-button {
    display: none;
  }
}
.flickity-prev-next-button::after {
  content: none;
}
.flickity-prev-next-button {
  transform: unset;
}
.flickity-button-icon {
  display: none;
}
.flickity-button,
.flickity-button:hover {
  background: none;
}

/* 
.swiper-button-prev {
  left: 0;
  cursor: url(images/cursor-left.png), crosshair;
}
.swiper-button-next {
  right: 0;
  cursor: url(images/cursor-right.png), crosshair;
}

.swiper-button-prev ,
.swiper-button-next {
  top: 0;
  height: 100vh;
  width: 50%;
}
@media (max-width: 768px) {
  .swiper-button-prev ,
  .swiper-button-next {
    display: none;
  }
}
.swiper-button-prev::after ,
.swiper-button-next::after {
  content: none;
} */

/*
 * ====================================
 * Home-specific
 * ------------------------------------
 */

.home {
  /*overflow-x: hidden;*/ /* I didn't have vw/vh when I was a young lad, and didn't have those problems either */
}

/* .home .swiper-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
}
@media (max-width: 768px) {
  .home .swiper-container {
    position: relative;
    height: auto;
    min-height: 100vh;
  }
} */

.flickity-page-dots {
  display: none;
}
@media (max-width: 768px) {
  .full-size-carousel {
    padding: 0;
  }
}

@media (min-width: 768px) {
  .full-size-carousel {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

.home .carousel-cell {
}
@media (max-width: 768px) {
  .home .carousel-cell {
    position: static;
    height: 100%;
  }
}

.home .slide__content {
  display: block;
  width: 100%;
  
  overflow-y: hidden;
  /* position: absolute; */
}
@media (min-width: 768px) {
  .home .slide__content {
    height: 100vh;
  }
}
@media (max-width: 768px) {
  .home  .slide__content {
    max-height: 100%;
    position: relative;
    top: 0;
    left: 0;
  }
} 

.home .slide__content .slideContent__info {
  display: block;
  position: absolute;
  left: 1rem;
  bottom: var(--slidesTextBottom);
  color: white;
  width: 25rem;
  z-index: 11;
}
@media (min-width: 768px) {
  .home .slide__content .slideContent__info {
    width: 50vw;
  }
}
@media (max-width: 768px) {
  .home .slide__content .slideContent__info {
    bottom: unset;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: var(--padding);
  }
}

.home .carousel-cell .slideInfo__title {
  display: block;
  font-size: 4rem;
  width: 25rem;
  line-height: 1;
}
@media (max-width: 768px) {
  .home .carousel-cell .slideInfo__title {
    box-sizing: border-box;
    font-size: var(--titleSize);
    width: calc(100% - var(--padding) * 3);
  }
}
@media (min-width: 768px) {
  .home .carousel-cell .slideInfo__title {
    margin-bottom: 22px;
  }
}

.home .carousel-cell .slideInfo__more {
  display: block;
  font-size: 1rem;
  line-height: 1;
}
@media (max-width: 768px) {
  .home .carousel-cell .slideInfo__more {
    display: none;
  }
}

@keyframes bouncingArrow {
  0% {
    transform: translateX(0);
  }
  84% {
    transform: translateX(0);
  }
  88% {
    transform: translateX(10px);
  }
  92% {
    transform: translateX(0);
  }
  96% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes arrowGoesRightAndComesBack {
  0% {
    left: -1px;
  }
  50% {
    left: 10px;
  }
  51% {
    left: -10px;
  }
  100% {
    left: -1px;
  }
}
@media (min-width: 768px) {
  .home .slideInfo__more .arrow {
    overflow: hidden;
    position: relative;
    position: relative;
    width: 1rem;
    display: inline-block;
    height: 0.8rem;
    top: 1px;
    animation-name: bouncingArrow;
    animation-iteration-count: infinite;
    animation-duration: 4s;
  }
  .home .slideInfo__more .arrow::after {
    content: '>';
    position: absolute;
    left: -1px;
  }
  .home .slideContent__info:hover .slideInfo__more .arrow::after {
    animation: arrowGoesRightAndComesBack ease-in-out 0.4s;
  }
}

.home .slide__content .slideContent__pic {
}
@media (max-width: 768px) {
  .home .slide__content .slideContent__pic {
    display: block;
  }
  .home .slide__content .slideContent__pic img {
    display: block;
  }
}

.home picture {
  width: 100%;
  height: 100%;
}
.home img {
  width: 100vw;
  
  object-fit: cover;
}
@media (min-width: 768px) {
  .home img {
    height: 100vh;
  }
}

.home .header {
  /* Make the menu visible: */
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .home .header {
    z-index: 12;
  }
}

@media (max-width: 768px) {
  .home #footer {
    display: flex;
    flex-direction: column;
    font-size: var(--titleSize);
  }
  .home #footer .social.contact-footer {
    order: 5;
  }
  .home #footer #copyright {
    display: none;
  }

  .home #footer #text-2 .textwidget a {
    display: none;
  }
  
  .home #footer #text-2 .textwidget p {
    margin-bottom: 0;
  }
}

/*
 * ====================================
 * Projects
 * ------------------------------------
 */

.subcategory-menu {
  padding: 0;
  margin: 0;
  display: flex;
}
@media (min-width: 768px) {
  .subcategory-menu {
    overflow: hidden;
  }
}
@media (max-width: 768px) {
  .subcategory-menu {
    padding-top: 1.7rem;
    padding-bottom: 1.7rem;
  }
  [data-barba-namespace='home'] .subcategory-menu,
  [data-barba-namespace='contact'] .subcategory-menu {
    display: none;
  }
}
@media (min-width: 768px) {
  .subcategory-menu li {
    transform: translateY(-20px);
  }
}
.subcategory-menu li a {
  color: var(--gray);
}
@media (min-width: 768px) {
  .subcategory-menu li a:hover {
    color: #A2A2A2;
  }
}

/* choose which one we use */
.subcateg--mobile {
  display: none;
}
@media (max-width: 768px) {
  .subcateg--mobile {
    display: flex;
    font-size: var(--subTitleSize);
    padding-left: var(--padding);
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  [data-barba-namespace='project'] .subcateg--mobile {
    display: none;
  }
}
@media (max-width: 768px) {
  .subcategory-menu li a {
    font-size: var(--subTitleSize);
  }
}
.subcateg--desktop {

}
@media (max-width: 768px) {
  .subcateg--desktop {
    display: none;
  }
}


.subcategory-menu li {
  list-style: none;
  margin-right: var(--spaceBetweenMenuItemsDesktop);
}

.piece {
  display: block;
}
@media (max-width: 768px) {
  .piece {
    /*padding: var(--padding);*/
    padding-bottom: calc(var(--padding) * 2);
  }
}

@media (max-width: 768px) {

  .is-only-images .pieceContent .project__text {
    display: none;
  }

  /* Enlever les images : */
  .is-only-text .pieceContent .piece--full {
    display: none;
  }

}

.piece__image {
  display: block;
  overflow-y: hidden;
}
.pieceImage__element {
  width: 100%;
  height: auto !important;
  display: block;
}
.piece__title {
  display: block;
  color: black;
  padding-top: 0.7rem;
  padding-bottom: var(--titleSize);
}
@media (max-width: 768px) {
  .piece__title {
    padding-top: 0.4rem;
    padding-bottom: 0;
    height: auto;
  }
}

.mobile-title {
  display: none;
}
@media (max-width: 768px) {
  .mobile-title {
    display: block;
    text-align: center;
    font-size: var(--titleSize);
    font-weight: normal;
    font-family: 'Reader-Medium', sans-serif;
    margin-bottom: 0.8rem;
    padding: 0 var(--padding);
  }
  .mobile-title.push-up {
    margin-top: 1.7rem;
  }
}

.project__title {
  font-weight: normal;
  font-size: 2rem;
  border-bottom: 1px solid black;
}
@media (max-width: 768px) {
  .project__title {
    display: none;
  }
}
.project__title,
.project__text > p:first-child {
  margin-top: 0;
}

.piece--full {
  margin-bottom: 1rem;
}

.mobile-content-toggle {
  display: none;
}
@media (max-width: 768px) {
  .mobile-content-toggle {
    display: flex;
    padding-left: var(--padding);
    margin-top: 32px;
  }
}
.mobile-content-toggle li {
  list-style: none;
  margin-right: var(--padding);
}
.mobile-content-toggle a {
  color: var(--gray);
  font-size: var(--subTitleSize);
  font-weight: normal;
}

.is-only-text .mobile-content-toggle .contentBtn--text {
  color: #000;
}
.is-only-images .mobile-content-toggle .contentBtn--images {
  color: #000;
}