/*
    Theme Name:Lotus Marketing
    Theme URI:https://lotusmarketing.ca
    Text Domain: lotus
    Description:Sur mesure
    Version:1.0
    Author:Lotus Marketing
    Author URI:https://lotusmarketing.ca
*/

/* Wordpress */
.wp-block-button__link { background:var(--bg); border-radius: .5em; color:var(--highlight); border:1px solid var(--highlight); font-family: "Public Sans", sans-serif; font-weight: 900; text-transform:uppercase; font-size:0.75em; }
.wp-block-button__link:hover { background:var(--highlight); border-radius: .5em; color:var(--bg); }
.wp-block-cover .wp-block-cover__background { border-radius: .5em;}
.wp-block-cover .wp-block-cover__inner-container .has-large-font-size { font-size: 2em !IMPORTANT; }
.wp-block-columns { margin:3em 0; }
main > .wrapper > .wp-block-columns { margin:0; }
/* .wp-block-columns .wp-block-column h2:first-of-type { margin-top:0; } */
.wp-block-list { list-style: none; }
.wp-block-list li { margin:1em 0; position: relative; padding-left: 30px; }
.wp-block-list li::before { content: ""; position: absolute; left: -5px; top: 15px; width: 20px; height: 20px; transform: translateY(-50%); background: url("images/li.png") no-repeat center center; background-size: contain; }

:where(.wp-block-columns.is-layout-flex) { gap: 6em; }

.wp-block-media-text { margin:4em 0; }
.wp-block-media-text .wp-block-media-text__content {  background:var(--dark) url(images/bg-triangles.png) 50% 50% repeat-x; color:white; position:relative; left:-5em; padding:3em;  }
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { left:5em;}


.is-style-graybleed { background: var(--light); position: relative; box-shadow: 0 0 0 100vmax var(--light); clip-path: inset(0 -100vmax); padding:5em 0; } 
.is-style-bluebleed { background: var(--dark); position: relative; box-shadow: 0 0 0 100vmax var(--dark); clip-path: inset(0 -100vmax); padding:5em 0; color:white; } 
.is-style-orangebleed { background: var(--highlight); position: relative; box-shadow: 0 0 0 100vmax var(--highlight); clip-path: inset(0 -100vmax); padding:5em 0; color:white; } 
.is-style-bluebleed h2 { color: white; }


/* COLORS */
:root {
    --text: #777777;
    --dark: #070c1e; 
    --highlight: #e24207;
    --mid: #CCCCCC;
    --light: #f4f3f3;
}

/* BASIC */
html { scroll-behavior: smooth; }
html, body { margin:0; font-family: "Manrope", sans-serif; color: var(--text); }
body { font-size:1.15em; background:white; }

a { text-decoration: none; color: var(--highlight); border-bottom:1px solid transparent; transition:0.3s; }
a:hover { border-bottom:1px solid var(--highlight); }
a i { padding-right:0.5em; }

h1 { font-family: "Outfit", sans-serif; font-weight: 800; font-size:3.5em; }
h2 { font-family: "Outfit", sans-serif; color:var(--dark); font-weight: 800; font-size:2.75em; }
h3 { font-family: "Outfit", sans-serif; font-weight: 800; font-size:1.5em; }
h4 { font-family: "Outfit", sans-serif;color:var(--highlight); font-weight: 300; letter-spacing: 0.2em; position:relative; padding-left: 25px; display:inline-block; text-transform: uppercase;}
h4::before { content: ' '; background: url(images/triangle.png); width: 39px; height: 32px; display:block; position:absolute; left:0; top:-13px; }
h4 + h2 { margin-top:0; }

strong { font-weight: 900; }
.wrapper { max-width: 1400px; margin:0 auto; padding: 0 40px; position:relative; }
.flex { flex-wrap: wrap; }

.bouton { font-family: "Outfit", sans-serif; text-transform: uppercase; border: 1px solid var(--highlight); color:var(--highlight); padding:1em 6em 1em 2em; font-weight: bold; font-size: 0.65em; position:relative;}
.bouton::before { content: ""; position: absolute; bottom: 0; left: 0; border-top: 23px solid transparent; border-left: 23px solid var(--highlight); }
.bouton::after { content: ">>"; font-size: 1.25em; display: inline-block; position: absolute; right: 0; top: 0; width: 50px; height: 100%; display: flex; justify-content: center; align-items: center; border-left: 1px solid var(--highlight); }
.bouton:hover { background:var(--highlight); color:white; padding-right:7em; }

.bouton.vide { padding-right: 2em; }
.bouton.vide:hover { padding-right:3em; }
.bouton.vide::after { border-left:none; }

/* main { background: var(--light); } */
main ul, footer ul { list-style: none; }
main ul li, footer ul li { margin:.5em 0; position: relative; padding-left: 30px; transition:0.3s; }
main ul li::before, footer ul li::before { content: ""; position: absolute; top: 12px; width: 15px; height: 15px; transform: translate(-25px, -50%); background: url("images/li.png") no-repeat center center; background-size: contain; transition:0.5s; }

footer ul li:hover::before { transform: translate(-20px, -50%); }
footer ul li:hover { padding-left:33px;}

/* MENU */
nav a { color:var(--text); font-family: "Outfit", sans-serif; }
nav a:hover { color:var(--highlight); }
nav a i { color:var(--highlight); }

nav .top { border-bottom: 1px solid var(--mid); font-size:0.75em; }
nav .top a { padding: 0.5em 1em; display:inline-block; }
nav .top .carriere { color:white; float:right; letter-spacing: 0.1em; padding-left: 100px; background: url(images/losange.png) 50px no-repeat, url(images/losange25.png) 30px no-repeat, url(images/losange25.png) 10px no-repeat; }
nav .top .carriere:hover { background-position: 30px, 15px, 0px; }
nav .top .carriere i { color:white; }

nav .main { padding: 0 2em; text-align:right; height:100px; }
nav .main .logo { float:left; }
nav .main .logo img { width: 200px; }
nav .main .bouton { float:right; margin-top:1em; }
nav .main ul { padding-top:1.25em; }
nav .main ul li { display:inline-block; margin-right:3em; }
nav .main ul li.current_page_item a { color:var(--highlight); border-bottom: 1px solid var(--highlight); }

nav .sidebar { background: var(--dark); width: 96%; padding: 2%; position:fixed; z-index: 9999; right:-103%; top:0; bottom:0; overflow-y: scroll; transition:1s; transition-timing-function: cubic-bezier(.27,1.05,.73,1); }
nav .sidebar.show { right:0; transition:1s; transition-timing-function: cubic-bezier(.27,1.05,.73,1); }
nav .sidebar .close { font-size:1.5em; cursor:pointer; }
nav .sidebar a { color:white; font-weight: 500; }
nav .sidebar a:hover, nav .sidebar .current_page_item a { color:white; }
nav .sidebar ul { list-style-type: none; padding:0; }
nav .sidebar ul li { display:block; font-size:2em; margin-top:0.5em; margin-right:1em;  }
nav .sidebar .sidelogo img { max-width:45%; margin-right:2em; filter: brightness(0) invert(1); }
nav .sidebar .bouton { display:block !IMPORTANT; margin:5em 3em; }

/* BANNER */
.banner { background:#eee 50% 50% no-repeat; background-size:cover; background-attachment: fixed; aspect-ratio: 16/6; padding:15% 10% 10% 10%; position:relative; }
.banner.noimage { aspect-ratio: 32/6;  background: var(--dark) url(images/bg-triangles.png) 50% 100% repeat-x;  }
.banner .overlay { position:absolute; top:0; right:0; left:0; bottom:0; opacity:0.75; background:var(--dark); z-index:1; }
.banner h1 { color:white; font-size:4vw; margin-right: 50%; margin-top:0em; position:relative; z-index:10; }
.banner h4 {  margin-right: 45%; position:relative; z-index:10;}
.banner .bouton { position:relative; z-index:10; }


/* SOUS-MENU */
.sousmenu { position:relative; z-index: 100; text-align:center; background:var(--highlight); display:flex; padding:0.5em; }
.sousmenu a { padding: 1em 2em; display:inline-block; margin:0.5em; color:white; font-family: "Outfit", sans-serif; text-transform: uppercase; font-weight: bold; letter-spacing: 0.2em; font-size:0.8em; position:relative; border:0px !IMPORTANT; width: 100%; }
.sousmenu a.on::before { content: ""; position: absolute; bottom: 0; left: 0; border-top: 23px solid transparent; border-left: 23px solid white; opacity:.2 }
.sousmenu a.on, .sousmenu a:hover { background:var(--dark); border-color:var(--dark); }

/* ACCUEIL */
.marquee { color:white; font-size:7em; font-family: "Outfit", sans-serif; padding:0.25em 0; font-weight: bold; overflow: hidden; white-space: nowrap; text-shadow: -1px -1px 0 var(--mid), 1px -1px 0 var(--mid), -1px  1px 0 var(--mid), 1px  1px 0 var(--mid); }
.marquee-content { display: inline-block; animation: scroll 15s linear infinite; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee .marquee-content span { word-spacing: .5em; }

.t-home .apropos { background: var(--light) url(images/bg-triangles-gris-top-left.png) top left repeat-x; padding:3em 0; }

.t-home .services { background: var(--dark); padding:5em 0; } 
.t-home .services h2 { color:white;} 

.t-home .services .service { display:flex; justify-content: space-between; align-items: center; border-top:1px solid var(--text); padding:2em; position:relative; background-position:50%; background-size:cover; transition:0.5s; }
.t-home .services .service::before { content:""; position:absolute; top:0; left:0; right:0; bottom:0; background:var(--dark); z-index:1; transition:0.3s; }
.t-home .services .service:last-of-type { border-bottom:1px solid var(--text); }
.t-home .services .service > div { position:relative; z-index:2; }
.t-home .services .service .col1 { width: 50%; font-family: "Outfit", sans-serif; }
.t-home .services .service .col2 { width: 30%; transition:0.3s;  }
.t-home .services .service .col3 { width: 10% ; }
.t-home .services .service .numero { color:var(--highlight); }
.t-home .services .service .titre { font-size: 2em; font-weight: 800; letter-spacing: 0.1em; transition:0.3s; }
.t-home .services .service:hover { color:white; padding: 2em 3em; }
.t-home .services .service:hover::before { opacity: 0.85;}
.t-home .services .service:hover .bouton { background:var(--highlight); color:white; }

.t-home .gallery { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; padding:20px; }
.t-home .gallery .image { background-size: cover; background-position: 50%; min-height: 400px; height: 100%; transition:5s; position:relative; }
.t-home .gallery > a { border: 0px !important; }
.t-home .gallery a:nth-of-type(2) { grid-column: 3; grid-row: 1 / span 2; }
.t-home .gallery .imagetitre { background: var(--dark) url(images/bg-triangles.png) 50% 50% no-repeat; padding:3em 15%; }
.t-home .gallery .imagetitre h2 { background:var(--dark); color:white; margin-bottom:2em; }
.t-home .gallery .image .overlay { position:absolute; top:0; bottom:0; left:0; right:0; opacity: 0; background:var(--dark); color:white; font-family: "Outfit", sans-serif; font-weight: 800; font-size:3em; display: flex; align-items: center; justify-content: center; transition:0.5s; }
.t-home .gallery .image:hover .overlay { opacity: 0.5; }

.t-home .pourquoi { background: var(--dark) url(images/bg-triangles.png) 50% 100% repeat-x; padding:5em 0; text-align: right; position:relative; overflow: hidden; } 
.t-home .pourquoi .bgjsl { font-size:45em; font-family: "Outfit", sans-serif; font-weight: 900; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:0; opacity:0.2; }
.t-home .pourquoi h2 { color:white; } 
.t-home .pourquoi dl { width: 50%; text-align: left; color:var(--dark); margin-top:10em }
.t-home .pourquoi .spacer { height: 15px; }
.t-home .pourquoi dl dt { background:white; padding:1em 2em 1em 1em; font-weight: bold; cursor:pointer; display:flex; align-items:center; }
.t-home .pourquoi dl dt i { transition:0.3s; }
.t-home .pourquoi dl dt.on i, .t-home .pourquoi dl dt:hover i { background:var(--dark); }
.t-home .pourquoi dl dt i { background:var(--highlight); color:white; padding:0.5em; margin-right:1em; }
.t-home .pourquoi dl dd { background:white; padding:1em 2em 2em 3em; margin:0; }

/* CERTIFICATIONS */
.certifications { margin: 3em 0; }
.certifications img { filter: grayscale(100%); opacity:0.7; max-height: 75px; margin:0 75px; transition:0.5s; }
.certifications img:hover { filter: grayscale(0); }

/* T-RÉALISATIONS */
.t-realisations .gallery { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 20px; padding:20px; }
.t-realisations .gallery .image { background-size: cover; background-position: 50%; min-height: 400px; transition:5s; position:relative; }
.t-realisations .gallery .image .overlay { position:absolute; top:0; bottom:0; left:0; right:0; opacity: 0; background:var(--dark); color:white; font-family: "Outfit", sans-serif; font-weight: 800; font-size:3em; display: flex; align-items: center; justify-content: center; transition:0.5s; }
.t-realisations .gallery .image:hover .overlay { opacity: 0.5; }

/* RÉALISATION */
.t-single .banner { aspect-ratio: 16/9; }
.t-single .banner .overlay { opacity:0.5; }
.t-single .description { background:var(--highlight) url(images/bg-triangles.png) 50% 50% repeat-x; position:relative; top:-5em; color:white; padding: 10%; z-index:200; }
.t-single .description h2:first-of-type { margin-top:0; color:white; }

/* EMPLOIS */
.t-emplois .listes { background:var(--dark) url(images/bg-triangles.png) 50% 50% repeat-x;  }

.t-emplois main .flex { display:flex; flex-wrap: wrap;  justify-content: space-between;}
.t-emplois main .flex .col { padding:7em 5%; }
.t-emplois main .flex .col.left { width: 30%; }
.t-emplois main .flex .col.left h2 { font-size:2em; color: white; text-transform: uppercase; }
.t-emplois main .flex .col.left h2 span { color: var(--highlight); }
.t-emplois main .flex .col.right { width: 50%; }
.t-emplois main .flex .col .largetitle { font-size:2.5em; font-weight: 900; }
.t-emplois main .flex .col .largetitle span { color:var(--highlight); }

.t-emplois main dl { width: 100%; text-align: left; color:var(--dark); }
.t-emplois main .spacer { height: 15px; }
.t-emplois main dl dt { background:white; padding:1em 2em 1em 1em; font-weight: bold; cursor:pointer; display:flex; align-items: center;}
.t-emplois main dl dt i { transition:0.3s; }
.t-emplois main dl dt.on i, .t-emplois main dl dt:hover i { background:var(--dark); }
.t-emplois main dl dt i { background:var(--highlight); color:white; padding:0.5em; margin-right:1em; }
.t-emplois main dl dd { background:white; padding:1em 2em 2em 3em; margin:0; }


/* CONTACT */
.form { background: white; padding:3em; box-shadow: 0 0 10px rgba(0,0,0,.05);   }
.form input, .form textarea { background:var(--light); border: 1px solid var(--mid); font-family: inherit; font-size:1em; padding:1em 2em; box-sizing: border-box; width: 100%; margin-bottom:1em; transition:0.3s; }
.form button { cursor: pointer; transition:0.3s; }
input[type="text"]:focus, input[type="email"]:focus,  textarea:focus { border-color: var(--highlight); outline: none; color:var(--highlight); border-right:20px solid var(--highlight); }

/* FOOTER */
footer { background: url(images/bg-triangles.png), url(images/footer-bg.jpg); background-size: 75%, cover; background-repeat: repeat-x, no-repeat; background-position: 0 100%, 50% 50%; color:white; padding:600px 0 2em 0; border-top:1px solid #777; }
footer .cols { display:flex; }
footer .cols .col { width: 33.33%; }
footer .cols .col:last-of-type { padding-top:35px; text-align:center; }

footer a { color:var(--mid); }
footer a:hover { color:var(--highlight); }
footer h3 span { color:var(--highlight); }
footer ul { padding-left: 0px; }
footer .rbq { margin-top:2em; font-weight: bold;}

footer .copyrights { text-align:center; font-size:0.65em; margin-top:2em; color:var(--text); letter-spacing: 0.1em;}
footer .copyrights a { opacity:0.5; }
footer .copyrights a:hover { opacity:1; }

/* RESPONSIVE */
@media only screen and ( max-width:1250px ) {
    nav .main .bouton { display:none; }
}

@media (max-width: 1130px) {
  .t-home .gallery, .t-realisations .gallery { grid-template-columns: 1fr; grid-template-rows: auto; }
  .t-home .gallery a:nth-of-type(2) { grid-column: auto; grid-row: auto; }
  .t-home .gallery > *:nth-child(2) { order: -1; }
}

@media only screen and ( max-width:1030px ) {
    .wrapper { padding:0 15px; }
    nav .top a:nth-of-type(3) { display:none; }
    nav .main { height: 75px; }
    nav .main .desktop { display:none; }
    nav .main .logo { margin-top: .5em; }
    nav .main .logo img { width: 125px; }
    nav .main .hamburger { float:right; width: 75px; cursor:pointer; }
    nav .main .hamburger div { background:var(--highlight); height:2px; margin-top:17px; }

    .t-home .pourquoi dl { width: auto; }
    .wp-block-media-text .wp-block-media-text__content {  position:initial;  }
}

@media only screen and ( max-width:1000px ) {
    .t-emplois main .flex .col.left, .t-emplois main .flex .col.right { width: 100%; padding:10% 5%; }

    

    footer .cols { flex-wrap: wrap; text-align:center; }
    footer .cols .col { width: 100%; }
}

@media only screen and ( max-width:800px ) {
    .banner h1 { margin-right: 0%; font-size:5vw; }
    .banner h4 {  margin-right: 0%; }
    .t-home .services .service { flex-wrap:wrap; }
    .t-home .services .service .col1, .t-home .services .service .col2, .t-home .services .service .col3 { width: 100%; margin-bottom:2em;  }
    .t-home .pourquoi { text-align:center; }
}

@media only screen and ( max-width:610px ) {
    :where(.wp-block-columns.is-layout-flex) { gap: 2em; }

    nav .main { padding: 0 1em; }
    nav .top .carriere { display:none; }
    .sousmenu { flex-wrap:wrap; }

    .t-realisations .gallery .image .overlay { opacity: 0.5; }
    .reversemobile { flex-direction: column-reverse;}
}

/* POUR L'IMPRESSION */
@media print { 
    nav, footer { display:none; }
}