@import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700&display=swap');

* {
   padding:0;
   margin:0;
}

html, body {
   overflow-x:hidden;
   font-family:'Hind', sans-serif;
   font-weight:300;
   font-size:18px;
}

body {
   overflow-y:visible;

   height:100%;
}

p {
   margin-top:25px;
}

b, strong {
   font-weight:700;
}

a {
   color:#268ab8;
   transition:0.2s;
}

a:hover {
   color:#114258;
   transition:0.2s;
}

img {
   max-width:100%;
   display:block;
}

ul {
   list-style-position:inside;
}

h1, h2, h3, h4 {
   position:relative;
   font-family:'Oswald', sans-serif;
   width:100%;
   z-index:3;
}

h1 {
   color:#268ab8;
   font-weight:400;
   font-size:2.4em;
   text-align:center;
   text-transform:uppercase;
}

h2 {
   color:#114258;
   font-weight:400;
   font-size:1.8em;
   text-align:center;
   margin:0.45em 0 0.7em;
   text-transform:uppercase;
}

h3 {
   color:#114258;
   margin:0.3em 0;
   font-weight:400;
   font-size:1.5em;
   letter-spacing:0.02em;
}

h4 {
   color:#268ab8;
   font-weight:400;
   font-size:1.2em;
   text-align:center;
   margin:1.6em 0;
   letter-spacing:0.04em;
}

h5 {
   color:#268ab8;
   font-weight:500;
   font-size:1.2em;
   letter-spacing:0.03em;
}

main {
   position:relative;
   margin-top:156px;
}

label {
   display:block;
   margin-top:10px;
   width:100%;
}

input, textarea {
   font-family:'Hind', sans-serif;
   max-width:470px;
   width:100%;
   font-size:18px;
   font-weight:300;
   line-height:18px;
   padding:6px 10px;
   box-sizing:border-box;
   border:1px solid #c8c8c8;
}

textarea {
   padding:8px 10px;
   min-height:180px;
   line-height:24px;
}

button {
   font-family:'Oswald', sans-serif;
   font-size:22px;
   color:#fff;
   background-color:#268ab8;
   padding:8px 60px 9px;
   border:0;
   border-radius:4px;
   cursor:pointer;
   transition:0.2s;
}

button:hover,
button:focus {
   background-color:#1c607f;
   transition:0.2s;
}

progress::-webkit-progress-bar {background-color:#e0e0e0; width: 100%;}
progress {background-color:#e0e0e0;}

/* value: */
progress::-webkit-progress-value {background-color:#7ec3e5 !important;}
progress::-moz-progress-bar {background-color:#7ec3e5 !important;}
progress {color:#7ec3e5;}

.container {
   max-width:1280px;
   width:100%;
   padding:0 25px;
   box-sizing:border-box;
   margin:0 auto;
}

.row {
   display:flex;
   display:-ms-flexbox;
   -ms-flex-wrap:nowrap;
   flex-wrap:nowrap;
   width:100%;
}

.entry-title {
   position:relative;
   padding:2.4em 0;
   width:100%;
}

.entry-content h2 {
   margin-bottom:40px;
}

.entry-content-line-height h2 {
   margin-bottom:40px;
}

.entry-content h2 {
   margin-bottom:40px;
}

.col-2 {
   max-width:50%;
   width:100%;
   float:left;
   padding:0 20px;
   box-sizing:border-box;
}

.col-3 {
   max-width:33.333%;
   width:100%;
   float:left;
   padding:0 20px;
   box-sizing:border-box;
}

.ligne-grise {
   background-color:#b9b9b9;
   height:1px;
   width:50%;
   max-width:600px;
   margin:0 auto;
   opacity:0.4;
}

#espace-client-arriere-plan {
   position:fixed;
   top:0;
   display:block;
   width:100%;
   height:100%;
   background-color:rgba(130,130,130,0.8);
   visibility:hidden;
   opacity:0;
   transition:0.8s;
   z-index:10;
}

#espace-client-arriere-plan.actif {
   visibility:visible;
   opacity:1;
   transition:0.4s;
}

.espace-container {
   position:relative;
   background-color:#fff;
   border-radius:20px;
   max-width:460px;
   padding:30px 50px 50px;
   box-sizing:border-box;
   top:-300px;
   left:50%;
   transform:translate(-50%, -200%);
   transition:0.3s;
}

.espace-container.actif {
   top:50%;
   left:50%;
   margin:0;
   transform:translate(-50%, -50%);
   transition:0.3s;
}

.espace-container button {
   margin-top:40px;
}

.espace-container form {
   margin-top:30px;
}

.x {
   position:absolute;
   top:20px;
   right:40px;
   font-size:32px;
   font-weight:900;
   color:#fff;
   cursor:pointer;
   transition:0.8s;
}

.x:hover,
.x:focus {
   color:#000;
   transition:0.8s;
}

.fermer {
   display:none;
   color:#de5656;
   font-size:26px;
   text-align:center;
   font-weight:500;
   margin-top:40px;
}

.erreur {
   font-size:14px;
   text-align:center;
   color:#de5656;
}

/*-----------------------------------------------------------
-------------------------------------------------------------
Sections
-------------------------------------------------------------
-----------------------------------------------------------*/

.carrousel {
   position:relative;
}

.carrousel img {
   position:absolute;
   border:1px solid #e7e7e7;
   border-radius:16px;
   max-width:100%;
}

.section-001 {
   position:relative;
   background-color:#ececec;
   padding-bottom:70px;
   z-index:1;
}

.section-001 h1 {
   opacity:0;
   transform:translateX(60%);
}

.section-001 h3 {
   opacity:0;
   transform:translateX(60%);
}

.section-001 .row {
   margin:0 auto;
   max-width:880px;
}

.section-001 img {
   position:relative;
   top:0px;
   float:right;
   max-width:400px;
}

.section-002 {
   position:relative;
   padding-bottom:70px;
   z-index:2;
}

.section-003 {
   background-color:#ececec;
   position:relative;
   padding-bottom:70px;
   z-index:0;
}

.section-contact-titre {
   background-color:#ececec;
}

.section-contact {
   position:relative;
   padding-bottom:70px;
   z-index:2;
}

.section-contact .container {
   max-width:1020px;
}

.section-contact a {
   font-size:24px;
   line-height:40px;
}

.section-contact a[href="tel:514 680-4203"] {
   text-decoration:none;
}

.section-004 {
   position:relative;
   width:100%;
   z-index:2;
}

.section-004 .container {
   display:inline-grid;
   grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
   align-items:center;
   padding:80px 40px;
   box-sizing:border-box;
   margin:0 auto;
   max-width:100%;
   width:100%;
}

.section-004 img {
   display:block;
   max-width:50%;
   margin:0 auto;
}

.section-005 {
   position:relative;
   background-color:#ececec;
   z-index:1;
}

.section-006 {
   position:relative;
   padding-bottom:70px;
   z-index:2;
}

.section-006 .col-2 {
   padding:0;
}

.section-006 .entry-content {
   max-width:560px;
}

.section-006 div,
.section-006 input,
.section-006 h3,
.section-006 progress {
   display:block;
}

.section-006 input,
.section-006 textarea {
   max-width:560px;
}

.section-006 h3 {
   max-width:560px;
   line-height:30px;
}

.section-musique {
   position:relative;
   padding-bottom:70px;
   z-index:2;
}

#canvas-musique {
   max-width:1280px;
   background-image:linear-gradient(#146781, #88cde2);
   filter:blur(1px) contrast(1);
}

#titre-barre {
   position:relative;
   float:left;
   border:0;
   border-radius:10px;
   max-width:560px;
   margin:10px 0;
   width:100%;
   height:8px;
}

#description-barre {
   position:relative;
   float:left;
   border:0;
   border-radius:10px;
   max-width:560px;
   margin:10px 0;
   width:100%;
   height:8px;
}

#afficher-titre,
#afficher-description {
   font-size:16px;
   font-weight:700;
}

#tps {
   margin-top:8px;
}

#tvq::before {
   content:"TVQ : ";
   font-weight:700;
}

#montant-avec-taxes::before {
   content:"Montant total : ";
   font-weight:700;
}

#tps::before {
   content:"TPS : ";
   font-weight:700;
}

#trigonometrie {
   background-image:linear-gradient(to left, #268ab8, #8cc9e5);
   height:800px;
   padding-bottom:0;
}

#trigonometrie .entry-content {
   background-color:#fff;
   box-shadow:3px 3px 10px #707070;
   padding:20px 50px 40px;
   box-sizing:border-box;
}

#trigo {
   background-color:#fff;
   float:right;
}

.col-2-trigo-1 {
   max-width:50%;
   width:100%;
   float:left;
}

.col-2-trigo-2 {
   max-width:50%;
   width:100%;
   float:left;
}

#liens img {
   max-width:450px;
}

#services .col-2 {
   padding:0 30px;
}

#services .entry-content {
   line-height:22px;
}

.dessous-stripe {
   background-color:#fff;
   margin-top:42px;
   box-shadow:3px 3px 10px #b9b9b9;
   padding:7px 50px 34px;
   box-sizing:border-box;
}

.semi-section-001,
.semi-section-002 {
   padding:30px 0;
   box-sizing:border-box;
}

.semi-section-001 a,
.semi-section-002 a {
   display:content;
}

.semi-section-001 img {
   margin:20px 0;
   float:right;
}

.semi-section-002 {
   background-color:#ececec;
}

.semi-section-002 img {
   margin:20px 0;
   float:left;
}

.liste {
   margin-top:40px;
   text-align:center;
   font-size:26px;
   line-height:40px;
}

.h1-class,
.h3-class {
   transform:translateX(60%);
   opacity:0;
}

.h1-class.actif,
.h3-class.actif {
   transform:translateX(0);
   opacity:1;
   transition:0.5s;
}

.boite-animation {
   position:absolute;
   display:block;
   right:20px;
   margin-top:-320px;
   z-index:1;
}

.roue {
   position:relative;
   background-image:url(images/roue-dentelee-defilement-web.png);
   background-size:100%;
   width:200px;
   height:198px;
   z-index:1;
}

#roue-dentelee {
   -webkit-animation:dentelee 20s linear infinite;
   animation:dentelee 20s linear infinite;
}

#roue-dentelee-deux {
   top:-117px;
   left:-170px;
   -webkit-animation:dentelee-deux 20s linear infinite;
   animation:dentelee-deux 20s linear infinite;
}

@-webkit-keyframes dentelee {
   0% {-webkit-transform:rotate(0deg);}
   100% {-webkit-transform:rotate(360deg);}
}

@keyframes dentelee {
   0% {transform:rotate(0deg);}
   100% {transform:rotate(360deg);}
}

@-webkit-keyframes dentelee-deux {
   0% {-webkit-transform:rotate(0deg);}
   100% {-webkit-transform:rotate(-360deg);}
}

@keyframes dentelee-deux {
   0% {transform:rotate(0deg);}
   100% {transform:rotate(-360deg);}
}

/*-----------------------------------------------------------
-------------------------------------------------------------
Header & Navigation
-------------------------------------------------------------
-----------------------------------------------------------*/

header {
   position:fixed;
   width:100%;
   top:0;
   background-color:#fff;
   z-index:9;
}

.logo {
   padding:10px 0;
   max-width:unset;
}

#logo-blanc {
   display:none;
   max-height:156px;
   transition:0.8s;
}

#nav-principale {
   width:100%;
}

#nav-principale ul {
   float:right;
}

#nav-principale ul li {
   display:inline-block;
   font-size:20px;
   font-weight:500;
   line-height:154px;
   margin:0 20px;
}

#nav-principale ul li a {
   color:#1b5f7f;
   text-decoration:none;
}

#nav-principale span {
   position:relative;
   display:block;
   margin:0 auto;
   top:-67px;
   width:0;
   height:2px;
   background-color:#1b5f7f;
   transition:0.5s;
}

#nav-principale ul li a:hover + span {
   width:100%;
   transition:0.5s;
}

#nav-outils {
   position:relative;
   background-color:#0c3a58;
   width:100%;
   transition:0.2s;
   z-index:8;
}

#nav-outils ul {
   display:inline-grid;
   width:100%;
   grid-template-columns:auto auto auto auto;
   align-items:center;
   margin:0 auto;
}

#nav-outils li {
   display:block;
   float:left;
   margin:0 30px;
   list-style:none;
   text-align:center;
   font-size:20px;
   line-height:42px;
   transition:0.2s;
}

#nav-outils ul li a {
   font-weight:400;
   color:#fff;
   text-decoration:none;
   transition:0.2s;
}

#nav-outils ul li a:hover,
#nav-outils ul li a:focus {
   font-weight:700;
   transition:0.2s;
}

/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
Navigation (Hamburger / Adaptatif)
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.menu-container {
   position:relative;
   top:49px;
   display:none;
   float:right;
   margin-top:6px;
   cursor:pointer;
}

.bar1, .bar2, .bar3 {
   width:44px;
   height:5px;
   background-color:#717171;
   border-radius:3px;
   margin:8px 0;
   transition:0.4s;
}

.change .bar1 {
   -webkit-transform:rotate(-45deg) translate(-8px, 9px);
   transform:rotate(-45deg) translate(-8px, 9px);
}

.change .bar2 {
   opacity:0;
}

.change .bar3 {
   -webkit-transform:rotate(45deg) translate(-8px, -12px);
   transform:rotate(45deg) translate(-8px, -12px);
}

.bascule {
   width:100%;
   position:absolute;
   z-index:99;
   opacity:0.94;
}

#hamburger {
   position:fixed;
   width:100%;
   top:156px;
   transform:translateY(-130%);
   visibility:hidden;
   z-index:8;
   transition:0.5s;
}

#hamburger.actif {
   transform:translateY(0);
   visibility:visible;
   transition:0.5s;
}

#hamburger ul {
   list-style-type:none;
   margin:0;
   padding:0;
}

#hamburger li {
   background-color:#393939;
   line-height:60px;
   border-bottom:1px solid #606060;
}

#hamburger li:last-child {
   border-bottom:none;
}

#hamburger li a {
   color:#fff;
   cursor:pointer;
   border:none;
   text-align:left;
   outline:none;
   font-size:22px;
   font-weight:400;
   transition:0.4s;
   text-decoration:none;
   display:block;
   padding:2px 0px 0 0;
   text-align:center;
}

#hamburger li a:hover {
   background-color:#171717;
}

#hamburger li a:focus {
   background-color:#171717;
}

#hamburger li button {
   color:#fff;
   background-color:#393939;
   line-height:60px;
   font-size:22px;
   font-weight:400;
   width:100%;
}

#hamburger li button:hover,
#hamburger li button:focus {
   background-color:#171717;
}

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

footer {
   position:relative;
   background-color:rgba(23,81,117,0.3);
   color:#fff;
   font-size:20px;
   height:360px;
   z-index:7;
}

#canvas-footer {
   position:absolute;
   z-index:1;
}

footer .entry-content {
   margin-top:80px;
}

footer h2,
footer h5 {
   color:#fff;
   text-align:left;
}

footer a {
   color:#fff;
}

footer a[href="tel:514 680-4203"] {
   text-decoration:none;
   font-size:22px;
}

footer a:hover,
footer a:focus {
   color:#7eb5d8;
}

#canvas-footer {
   width:100%;
   height:400px;
}

/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
Stripe
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.StripeElement {
   box-sizing:border-box;
   max-width:600px;
   height:40px;
   margin:0 auto;
   padding:10px 12px;
   border:1px solid transparent;
   border-radius:4px;
   background-color:white;
   box-shadow:0 1px 3px 0 #e6ebf1;
   -webkit-transition:box-shadow 150ms ease;
   transition:box-shadow 150ms ease;
}

.StripeElement--focus {
   box-shadow:0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
   border-color:#fa755a;
}

.StripeElement--webkit-autofill {
   background-color:#fefde5 !important;
}

label[for="card-element"] {
   margin-top:20px;
   float:none;
}

#card-element {
   margin-top:20px;
}

#payment-form label {
   font-size:20px;
   text-align:center;
}

.payment-form button {
   display:block;
   margin:0 auto;
}

#payment-form .erreur {
   margin-top:8px;
}

.payment-form {
   margin-top:30px;
}

#prevent:focus {
   background-color:#268ab8;
}

/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
Adaptatif
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

@media screen and (max-width:1640px) {

   #trigonometrie {
      height:auto;
   }

   #trigonometrie .row {
      -ms-flex-wrap:wrap;
      flex-wrap:wrap;
   }

   #trigonometrie .col-2-trigo-1 {
      max-width:100%;
      padding:0 40px;
   }

   #trigonometrie .col-2-trigo-2 {
      max-width:100%;
      margin-top:60px;
   }

   #trigo {
      height:800px;
      float:unset;
      margin:0 auto;
      display:block;
   }

   #liens {
      clear:both;
   }

}

@media screen and (max-width:1120px) {

   .section-004 .container {
      grid-template-columns:1fr 1fr 1fr 1fr;
   }

   .section-004 img {
      margin:30px auto;
   }

   footer .row {
      -ms-flex-wrap:wrap;
      flex-wrap:wrap;
   }

   footer .col-3 {
      max-width:100%;
      padding:0;
   }

   #espace-client-arriere-plan {
      position:absolute;
      height:100%;
   }

}

@media screen and (max-width:1024px) {

   #liens img {
      max-width:100%;
   }

}

@media screen and (max-width:880px) {

   #nav-principale ul {
      display:none;
   }

   .menu-container {
      display:block;
   }

   .container {
      padding:0 40px;
   }

   #index .section-001 .row {
      -ms-flex-wrap:wrap;
      flex-wrap:wrap;
   }

   #index .section-001 .col-2 {
      max-width:100%;
   }

   #index .section-001 .col-2 img {
      margin:30px auto 0;
      float:unset;
   }

   #canvas-footer {
      left:-80%;
      width:180%;
   }

   #services section .row {
      -ms-flex-wrap:wrap;
      flex-wrap:wrap;
   }

   #services section .col-2 {
      max-width:100%;
   }

   #services section .carrousel {
      display:none;
   }

   #contact .container {
      padding:0 20px;
   }

   #contact .row {
      -ms-flex-wrap:wrap;
      flex-wrap:wrap;
   }

   #contact .col-2 {
      max-width:100%;
   }

   #contact .entry-content {
      margin-top:80px!important;
   }

   #nav-outils {
      display:none;
   }

   #liens .container {
      padding:0 20px;
   }

}

@media screen and (max-width:800px) {

   #trigonometrie {
      display:none;
   }

}

@media screen and (max-width:680px) {

   .section-004 .container {
      grid-template-columns:1fr;
   }

   #liens .row {
      -ms-flex-wrap:wrap;
      flex-wrap:wrap;
   }

   #liens .col-2 {
      max-width:100%;
   }

}

@media screen and (max-width:580px) {

   .entry-content img {
      max-width:100%;
   }

   .entry-title h1 {
      font-size:2.1em;
   }

   .espace-container.actif {
      position:relative;
      top:0;
      left:0;
      max-width:100%;
      transform:translate(0,0);
   }

   .fermer {
      display:block;
   }

}

@media screen and (max-width:460px) {

   body {
      word-break:break-word;
   }

   header {
      height:156px;
   }

   header .container {
      padding:0 20px;
   }

   .logo {
      max-width:190px;
   }

   #services section .col-2 {
      padding:0;
   }

   #services section .col-2 img {
      max-width:100%!important;
   }

}

@media screen and (max-width:360px) {

   .entry-title h1 {
      font-size:1.6em;
   }

   .entry-title h3 {
      margin-top:30px;
   }

   #services .entry-content h2 {
      line-height:38px;
   }

   footer h2 {
      font-size:1.6em;
   }

}