/*
    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-buttons { margin-top:3em; }
.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; }
.wp-block-columns .wp-block-column h2:first-of-type { margin-top:0; }
.wp-block-list { list-style: none; }
.wp-block-list li { margin:.5em 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; opacity: 0.25; }

.is-style-fullbleed { color:var(--bg); background: var(--text); position: relative; box-shadow: 0 0 0 100vmax var(--text); clip-path: inset(0 -100vmax); padding:5em 0; } 

.wp-block-accordion-heading .wp-block-accordion-heading__toggle-title { transition:0.3s; }
.wp-block-accordion-heading:hover .wp-block-accordion-heading__toggle-title { text-decoration: none; color:var(--highlight); }
.wp-block-accordion-panel { padding: 0 2em; }

/* Custom wordpress */
.wp-block-group-is-layout-grid { gap:3em; }
.wp-block-group-is-layout-grid .wp-block-group { border:1px solid var(--highlight); border-radius: 1em; padding:2em; }
.wp-block-group-is-layout-grid .wp-block-group h2 { margin-top:0; }
.wp-block-group-is-layout-grid .wp-block-image img { border-radius: 1em; }

/* COLORS */
:root {
    --text: #FFFFFF; 
    --highlight: #deb408;
    --bg: #01051e;
}

/* BASIC */
html { scroll-behavior: smooth; }
html, body { margin:0; font-family: "Outfit", sans-serif; color: var(--text); }
body { font-size:1.25em; background: linear-gradient(#01051e, #0b1339); background-attachment: fixed; line-height: 1.5; font-weight: 200; }
main { margin-top:4em; }

a { text-decoration: none; color: var(--highlight); border:1px solid transparent; transition:0.5s; padding:.15em .5em;  }
a:hover {  border-color:var(--highlight); border-radius: .5em; }

h1 { font-weight: 900; font-size:2em; margin:2em 0 1em 0; text-transform: uppercase; letter-spacing: 0.1em; }
h2 { font-weight: 900; font-size:1.75em; margin-top:3em; text-transform: uppercase; letter-spacing: 0.1em;}
h3 { font-weight: 900; font-size:1.5em; margin-top:2em; text-transform: uppercase; letter-spacing: 0.1em; }

/* Petite animation de comete en dessous des h1 */
h1 { position: relative; }
h1::after { animation: growLine 2s  cubic-bezier(0, 0.5, 0.3, 1) forwards; content: ''; height: 3px; background: var(--highlight); display: block; width: 200px; margin-top: 0.5em; }
h1::before { content: ''; position: absolute; left: 200px; top: 99%; width: 10px; height: 10px; background: var(--highlight); border-radius: 50%; box-shadow: 0 0 10px var(--highlight); animation: moveCircle 2s cubic-bezier(0, 0.5, 0.3, 1) forwards; transform: translate(-50%, -50%); }
@keyframes growLine { from { width: 0px; } to { width: 300px; } }
@keyframes moveCircle { from { left: 0px; } to { left: 300px; } }

img { max-width: 100%; }
strong { font-weight: 600; }
.wrapper { max-width: 1400px; margin:0 auto; padding: 0 15px; }

/* MENU */
.t-film nav { background:rgba(0,0,0,.25); }
nav { text-align:right; background:#01051eFF; padding:.5em 0 0 0; position:fixed; top:0px; right:0; left:0; z-index:1000; border-bottom:1px solid #deb3085f; transition:0.8s; height: 70px; font-size:0.9em; }
nav.scrolled { background:#01051eFF; }
nav .wrapper { position:relative; }
nav .menuwrapper { display:inline-block; }
nav .lang { text-transform: uppercase; opacity:0.5;}
nav .lang:hover { opacity:1; }
nav ul li { display:inline-block; margin-left:1em; }
nav ul li a { text-transform: uppercase; padding:1em; font-weight: 500; font-size:0.9em; }
nav .current-menu-item a { border-color:var(--highlight); border-radius:0.5em; }

nav .logo { position:absolute; left:0; width: 130px; border:none !IMPORTANT;  }
/* nav .logo { float:left; font-size:2.5em; font-weight: 900; } */

.sidebar { background:white; background: radial-gradient(#000, #222); border-left: 15px solid var(--highlight); width: 95%; padding: 2%; position:fixed; z-index: 9999; right:-103%; top:0; bottom:0; overflow-y: scroll; box-shadow:0 0 5px rgba(0,0,0,0.5); transition:1s; transition-timing-function: cubic-bezier(.27,1.05,.73,1); }
.sidebar .logo img { width: 200px; }
.sidebar ul { list-style-type: none; padding:0; margin-top:5em; }
.sidebar ul li { display:block; border-bottom: 1px solid #444; text-align: left; transition:0.3s; }
.sidebar ul li a { border:none; color:white; display:block; padding:0.5 0;}
.sidebar ul li:hover { border-bottom-color: var(--highlight); }
.sidebar ul li:hover a { color: var(--highlight); }
.sidebar .menuwrapper { display:block; }

.sidebar.show { right:0; transition:1s; transition-timing-function: cubic-bezier(.27,1.05,.73,1); }
.sidebar .close { position:absolute; cursor:pointer; right: 20px; top:20px; width: 50px; height: 50px; }
.sidebar .close div { background: #fff; width: 40px; height: 2px; margin: 12px 0; border-radius:1px;  transition:.5s; position:absolute; }
.sidebar .close div:nth-of-type(1) { transform: rotate(-45deg); transition:.5s; }
.sidebar .close div:nth-of-type(2) { transform: rotate(45deg);  transition:.5s; }
.sidebar .close:hover div:nth-of-type(2) { background-color: var(--highlight); transform:scale(1.3) rotate(45deg); }


/* ACCUEIL */
.boxes { display:flex; flex-wrap:wrap; justify-content: space-between; }
.boxes .box { width: 49%; aspect-ratio: 16/9; background-size: 105%; background-position: 50% 50%; box-sizing: border-box; padding:2em; position:relative; border-radius: .5em; transition:0.6s; color:var(--text); border:0px !IMPORTANT; }
.boxes .box .overlay { display: flex; flex-wrap:wrap; justify-content: center; align-items: center; background:rgba(0,0,0,.25); position:absolute; top:0; right:0; left:0; bottom:0; border-radius: .5em; transition:0.3s; }
.boxes .box .titre { text-align:center; transition:0.5s; position:absolute; padding:3em; }
.boxes .box .titre h2 { margin-top:0;}
.boxes .box .info { display:flex; visibility: hidden; opacity:0; padding:3em; text-align:center; transition:0.5s; }
.boxes .box:hover { background-size: 110%; border:0px solid transparent; }
.boxes .box:hover .overlay {background:rgba(0,0,0,.5); }
.boxes .box:hover .info { visibility: visible; opacity:1; }
.boxes .box:hover .titre { opacity:0; visibility: none;}

/* BANNER */
.nobanner { height:100px; }

/* FILM */
.t-film .banner { aspect-ratio: 16/7; background-size: cover; background-position:50% 0%; position:relative; background-attachment: fixed; background-size:100%; }
.t-film .banner .gradient {background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 100%); height:20vh; position:absolute; bottom:0; left:0; right:0;}
.t-film .banner .poster { position: absolute; width: 20%; right:2em; bottom:-3em; box-shadow: 0 0 10px rgba(0,0,0,.5); border-radius: 1em; }
.t-film .banner .trailer { position: absolute; right:20%; margin-right:3em; bottom:2em; color:white; font-weight: 500; font-size:0.9em; }
.t-film .banner .trailer:hover { border-color:white; }
.t-film main .flex { display: flex; justify-content: space-between; }
.t-film main .flex .col.left { width: 55%; }
.t-film main .flex .col.left h1 { margin-top:0; }
.t-film main .flex .col.right { width: 35%; padding-top:5em; }
.t-film main .flex .informations .information { border:1px solid var(--highlight); border-radius: 1em; padding:1em; text-align:center; margin-bottom:2em; }
.t-film main .flex .informations .information .info { font-size:1.75em; font-weight: 900; text-transform: uppercase; }

/* NOUVELLES */
.t-nouvelles .nouvelles { display:flex; flex-wrap:wrap; }
.t-nouvelles .nouvelles .nouvelle { width:25%; padding:3%; margin:1%; border:1px solid #777; border-radius: 1em; }
.t-nouvelles .nouvelles .nouvelle:hover { border-color:var(--highlight); }
.t-nouvelles .nouvelles .nouvelle .date { font-size:0.8em; color:white; display:block;  }
.t-nouvelles .nouvelles .nouvelle .titre { font-weight: 500; }

/* NOUVELLE */
.t-nouvelle .back { margin-top:4em; font-size:0.8em; }
.t-nouvelle .image-article { float:right; border-radius: 3em; margin:0 0 2em 4em; }


/* CONTACT */
.t-contact main .flex { display:flex; justify-content: space-between; }
.t-contact main .flex .col.left { width:50%; }
.t-contact main .flex .col.right { width:40%; }


form { text-align: center; font-size:1em; }
form label { display:block; padding:2em 1em; border-bottom: 1px solid var(--highlight); width:100%; box-sizing: border-box;}
form label:last-of-type { border-bottom:none; }
form label ::placeholder { opacity:0.25; }
form .warning { border:1px solid red; }
form .confirmation { display:none; }

input, textarea { font-size:1em; font-family: inherit; border:1px solid #ffffff; padding:1em 0.5em; margin-top:.75em; text-align: center; color:#333; border-bottom: 1px solid #333; width: 100%; box-sizing: border-box; border-radius:5px; transition:0.5s; }
textarea { text-align: left; font-size:0.8em; height:100px; }
input[type=text]:focus { outline:0; border:1px solid var(--highlight); transition:0.5s; }
.submit { padding:1em;  cursor:pointer; border-radius:.5em; }
.submit:hover { padding:1em; background:var(--highlight); color:#fff; }


/* FOOTER */
footer { text-align: center; padding: 3em 0; margin-top:5em; border-top:1px solid #deb3085f;  letter-spacing:0.2em; }
footer .logo { max-width: 150px; margin-bottom:1em;}
footer .copyrights { font-size:0.65em;  opacity:0.35; margin-top:2em; }

/* RESPONSIVE */
@media only screen and ( max-width:1100px ) {
    .boxes .box { width: 100%; margin:1em 0;  }
}

@media only screen and ( max-width:1000px ) {
    .wp-block-group.is-layout-grid { display:block; }
    .wp-block-group.is-layout-grid > * { margin:2em 0; }

    nav .desktop { display:none; }
    nav .hamburger { width: 75px; float:right; cursor:pointer; }
    nav .hamburger div { background:white; height:3px; margin-top:12px; transition:0.4s;}
    nav .hamburger:hover div:nth-of-type(2) { background:var(--highlight); transform:scale(1.2); }

    .t-contact main .flex { flex-wrap: wrap; }
    .t-contact main .flex .col.left, .t-contact main .flex .col.right { width: 100%; }
}

@media only screen and ( max-width:800px ) {
    .t-nouvelles .nouvelles .nouvelle { width: 100%; padding:2em; margin:.75em 0; }
    .t-film main .flex { flex-wrap: wrap;}
    .t-film main .flex .col { width: 100% !IMPORTANT; }
}

@media only screen and ( max-width:600px ) {
    h1 { font-size:1.35em; }
    h2 { font-size:1.25em; }
    h3 { font-size:1.15em; }

    .boxes .box .titre h2 { font-size:1em; }
}


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