/*
   Theme Name: 2018
   Author: Paul-Studio
   Version: 0.2
   Template: twentytwelve
   */

   /* ==========================================================================
      IMPORTS
      ABC 7 7085 5232
      NIS 6 5137 4927
      LMA 6 4826 9105
      ========================================================================== */

   @import url("twentytwelve/style.css");
   @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Pacifico&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');


   /* ==========================================================================
      ICON FONT
      ========================================================================== */

   @font-face {
     font-family: 'icomoon';
     src: url('fonts/icomoon.eot');
     src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
          url('fonts/icomoon.ttf') format('truetype'),
          url('fonts/icomoon.woff') format('woff'),
          url('fonts/icomoon.svg#icomoon') format('svg');
     font-weight: normal;
     font-style: normal;
   }

   [class^="icon-"], [class*=" icon-"] {
     font-family: 'icomoon' !important;
     font-style: normal;
     font-weight: normal;
     text-transform: none;
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }

   .icon-eye:before { content: "\e900"; }
   .icon-eye-closed:before { content: "\e901"; }
   .icon-rwd:before { content: "\e902"; }
   .icon-facebook:before { content: "\ea90"; }
   .icon-behance:before { content: "\eaa8"; }
   .icon-linkedin2:before { content: "\eaca"; }


   /* ==========================================================================
      TITLES & TYPOGRAPHY
      ========================================================================== */

   html, body {
     margin: 0;
     font-family: 'Montserrat', sans-serif;
     background-color: #f9f9f6;
   }

   h1 {
     color: #191919;
     font-size: 2.5em;
     text-transform: uppercase;
     line-height: .9em;
     margin: 0.83em 0;
   }

   body:not(.home) h1 {
     color: #fff;
     text-shadow: 0px 6px 11px rgba(0, 0, 0, 0.34);
   }

   h4, .playfairFont {
     font-family: "Playfair Display", serif;
     font-weight: 500;
     font-style: italic;
   }

   a {
     color: #333;
     text-decoration: none;
   }

   a:hover {
     text-decoration: none !important;
   }

   ul, ol {
     margin: 0;
     padding: 0;
     list-style: none;
   }


   /* ==========================================================================
      GLOBAL ANIMATIONS
      ========================================================================== */

   @keyframes fadeDown {
     0%   { opacity: 0; transform: translateY(-50px); }
     100% { opacity: 1; transform: translateY(0); }
   }

   .start-effect > .smooth {
     animation: fadeDown .7s both;
   }

   @keyframes bounce {
     0%,20%,50%,80%,100% { transform: translateY(0); }
     40% { transform: translateY(-8px); }
     60% { transform: translateY(-3px); }
   }

   @keyframes slide {
     0%   { clip: rect(0, 80px, 50px, 80px); }
     30%  { clip: rect(0, 80px, 50px, 80px); }
     50%  { clip: rect(0, 80px, 50px, 0); }
     80%  { clip: rect(0, 80px, 50px, 0); }
     100% { clip: rect(0, 0, 50px, 0); }
   }

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

   @keyframes downMotion {
     0%,100% { transform: translateY(-15px); }
     50%     { transform: translateY(0); }
   }

   @keyframes upMotion {
     0%,100% { transform: translateY(15px); }
     50%     { transform: translateY(0); }
   }


   /* ==========================================================================
      BODY OPENING ANIMATION
      ========================================================================== */

   body:before,
   body:after {
     content: "";
     position: fixed;
     top: 0; left: 0;
     width: 100%;
     height: 100%;
     z-index: 99;
     transition: .5s ease-out;
   }

   body:after {
     background-color: #fff;
     transition-delay: .4s;
   }

   body:before {
     background-color: #1d2327;
     transition-delay: .8s;
   }

   body.start:after,
   body.start:before {
     width: 0;
   }


   /* ==========================================================================
      HEADER & LOGO
      ========================================================================== */

   header {
     width: 100%;
     position: fixed;
     top: 0; right: 0;
     z-index: 202;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     transition: .5s ease-out;
   }

   .start header {
     width: 80px;
     justify-content: space-between;
   }

   #logo {
     transition: .5s ease-out;
     position: relative;
   }

   .start #logo svg {
     height: 80px;
   }

   .bounce,
   .start #logo:hover .bounce {
     animation: bounce 1.5s infinite;
   }


   /* ==========================================================================
      HELLO. Animation
      ========================================================================== */

   .playfairFont.fantaisie {
       display: inline-block;
       font-size: 1em;
       line-height: 1.2;
       animation: fontAlternation 2s infinite forwards;
       font-family: 'Playfair Display', serif;
       font-weight: 700;
       font-style: italic;
       transition: all 0.5s ease-in-out;
   }

   @keyframes fontAlternation {
    0% {
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #FF6B6B;
        transform: translateY(0px);
        opacity: 1;
    }
    10% {
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #FF6B6B;
        transform: translateY(0px);
        opacity: 1;
    }
    15% {
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #FF6B6B;
        transform: translateY(-4px);
        opacity: 0;
    }
    15.1% {
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        font-style: italic;
        color: #4ECDC4;
        transform: translateY(4px);
        opacity: 0;
    }
    25% {
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        font-style: italic;
        color: #4ECDC4;
        transform: translateY(0px);
        opacity: 1;
    }
    35% {
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        font-style: italic;
        color: #4ECDC4;
        transform: translateY(0px);
        opacity: 1;
    }
    40% {
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        font-style: italic;
        color: #4ECDC4;
        transform: translateY(-4px);
        opacity: 0;
    }
    40.1% {
        font-family: 'Pacifico', cursive;
        text-transform: lowercase;
        font-weight: 400;
        font-style: normal;
        color: #45B7D1;
        transform: translateY(4px);
        opacity: 0;
    }
    50% {
        font-family: 'Pacifico', cursive;
        text-transform: lowercase;
        font-weight: 400;
        font-style: normal;
        color: #45B7D1;
        transform: translateY(0px);
        opacity: 1;
    }
    60% {
        font-family: 'Pacifico', cursive;
        text-transform: lowercase;
        font-weight: 400;
        font-style: normal;
        color: #45B7D1;
        transform: translateY(0px);
        opacity: 1;
    }
    65% { /* Glisse et disparaît */
        font-family: 'Pacifico', cursive;
        text-transform: lowercase;
        font-weight: 400;
        font-style: normal;
        color: #45B7D1;
        transform: translateY(-4px);
        opacity: 0;
    }
    65.1% {
        font-family: 'Oswald', sans-serif;
        font-weight: bold;
        font-style: normal;
        color: #FED766;
        transform: translateY(4px);
        opacity: 0;
    }
    75% {
        font-family: 'Oswald', sans-serif;
        font-weight: bold;
        font-style: normal;
        color: #FED766;
        transform: translateY(0px);
        opacity: 1;
    }
    85% {
        font-family: 'Oswald', sans-serif;
        font-weight: bold;
        font-style: normal;
        color: #FED766;
        transform: translateY(0px);
        opacity: 1;
    }
    90% { /* Glisse et disparaît */
        font-family: 'Oswald', sans-serif;
        font-weight: bold;
        font-style: normal;
        color: #FED766;
        transform: translateY(-4px);
        opacity: 0;
    }
    90.1% {
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #FF6B6B;
        transform: translateY(4px);
        opacity: 0;
    }
    100% {
        font-family: 'Roboto', sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #FF6B6B;
        transform: translateY(0px);
        opacity: 1;
    }
}

   /* ==========================================================================
      BURGER MENU
      ========================================================================== */

   .burger {
     display: none;
     opacity: 0;
     height: 60px;
     width: 60px;
     position: relative;
     border-radius: 50%;
     cursor: pointer;
     transition: .25s ease-out;
   }

   .start .burger {
     display: block;
     opacity: 1;
   }

   .burger:before,
   .burger:after {
     content: "";
     position: absolute;
     width: 25px;
     height: 2px;
     background: #b5434a;
     border-radius: 4px;
     left: 0; right: 0;
     margin: auto;
     transition: .25s ease-out;
   }

   .burger:before { top: 25px; }
   .burger:after  { top: 37px; }

   .burger:hover:before,
   .burger:hover:after {
     top: 50%;
     width: 25px;
   }

   .burger:hover:before { transform: rotate(-180deg); }
   .burger:hover:after  { transform: rotate(90deg); }

   .is-open .burger {
     transform: translateX(-1rem);
   }

   .burger:hover:before,
   .burger:hover:after {
     transform: rotate(45deg);
     width: 17px;
   }

   .is-open .burger:after {
     transform: rotate(-45deg);
     width: 17px;
   }


   /* ==========================================================================
      MENU OVERLAY
      ========================================================================== */

   .menu {
     position: fixed;
     top: 0; right: 0; bottom: 0;
     background-color: #f9f9f6;
     text-align: center;
     z-index: 21;
     width: 100%;
     padding: 1rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
     box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
     transform: translateX(100%);
     transition: transform .8s cubic-bezier(.25,.05,.1,.94);
   }

   .is-open .menu {
     transform: translateX(0);
   }


   /* ==========================================================================
      BUTTONS
      ========================================================================== */

   .btnCircle {
     display: inline-block;
     position: relative;
     z-index: 1;
     margin-top: 1rem;
     color: #b5434a;
   }

   .btnCircle span {
     position: relative;
     z-index: 2;
   }

   .btnCircle svg {
     pointer-events: none;
     position: absolute;
     top: -6px; left: -12px;
     width: calc(100% + 24px);
     height: calc(100% + 12px);
   }

   .btnCircle svg * {
     --path-lenght: 367;
     stroke-width: 2px;
     stroke-dasharray: var(--path-lenght);
     transition: stroke-dashoffset .5s;
   }

   a.btnCircle svg * { stroke-dashoffset: var(--path-lenght); }
   a.btnCircle:hover   svg * { stroke-dashoffset: 0; }

   .btnCircle:hover { color: #9c3b41; }


   /* ==========================================================================
      UTILITIES
      ========================================================================== */

   .bg-custom { background: #b5434a; }

   .bg-cover {
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
   }

   .mt-8 { margin-top: 8rem; }
   .py-8 { padding: 8rem 0; }

   .h-100vh { height: 100vh; }


   /* ==========================================================================
      NEXT PROJECT
      ========================================================================== */

      .col-projet-suivant {
          position: relative;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          overflow: hidden;
      }

      .col-projet-suivant::before {
          content: "";
          position: absolute;
          inset: 0;
          background: rgba(0,0,0,0.35);
          transition: background 0.4s ease;
          z-index: 1;
      }

      .col-projet-suivant::after {
          content: "";
          position: absolute;
          inset: 0;
          background-image: inherit;
          background-size: 105%;
          background-position: center;
          transition: transform 0.7s ease, opacity 0.5s ease;
          z-index: 0;
          transform: scale(1);
      }

      .col-projet-suivant h3 {
          position: relative;
          z-index: 2;
          color: #fff;
      }

      .col-projet-suivant:hover::after {
          transform: scale(1.12);
      }

      .col-projet-suivant:hover::before {
          background: rgba(0,0,0,0.5);
      }



   /* ==========================================================================
      SWIPER
      ========================================================================== */

   .swiper-container { height: 50vh; }

   .swiper-container .swiper-slide {
     display: flex;
     align-items: end;
     padding: 1rem;
     font-weight: bold;
     color: #fff;
   }

   .swiper-wrapper {
     transition-timing-function: linear !important;
   }


   /* ==========================================================================
      DECORATIVE ILLUSTRATIONS
      ========================================================================== */

   .relative .fixed {
     position: absolute;
     z-index: 1;
     top: 1rem;
     left: 1rem;
     margin: 3rem 0;
   }

   .relative .fixed.hand {
     top: 35%;
     left: 27%;
     height: 40%;
   }

   .relative .fixed.trust {
     top: -2rem;
     right: 1rem;
     left: auto;
     height: 46%;
   }

   .move  { animation: downMotion 4s ease-in-out infinite; }
   .move2 { animation: upMotion   6s ease-in-out infinite; }
   .rotate { animation: rotate 8s linear infinite; }

   .illu img {
     filter: drop-shadow(0 0.2rem 0.15rem rgba(0,0,0,.2));
     transition: .3s ease;
   }

   .fixed.hand:hover,
   .fixed.trust:hover {
     filter: drop-shadow(0 1rem 0.85rem rgba(0,0,0,.4));
   }


   /* ==========================================================================
      RESPONSIVE
      ========================================================================== */

   @media (min-width: 992px) {

     h1 { font-size: 7em; margin: .5em 0; }

     .modal h2 { font-size: 1.5em; }

     .nextSection,
     .accueilBtn { display: block; }

     .menu { width: 100%; }

     .nav-menu { font-size: 2rem; }


   }

   .start header {
     width: auto;
     height: auto;
     flex-direction: row-reverse;
     padding: 1rem;
   }

   @media only screen and (max-width: 991px) {
     .h-100vh {
       padding-top: 2rem;
       padding-bottom: 2rem;
     }
   }
   @media only screen and (max-width: 414px) {
     h1{
       font-size: 6vw;
     }
     #qui h3 {
       font-size: 5vw;
       margin:.5em 0;
     }
     .modal .col-md-10{
       margin-top:7em;
     }
     .modal h3 {
       font-size: 1.1em;
     }
     .menu a {
       padding:0;
     }
   }

     h1 { font-size: 6vw; }

     #qui h3 {
       font-size: 5vw;
       margin: .5em 0;
     }

     .modal .col-md-10 { margin-top: 7em; }

     .modal h3 { font-size: 1.1em; }

     .menu a { padding: 0; }
   }


   /* ==========================================================================
      SCROLLBAR
      ========================================================================== */

   ::-webkit-scrollbar {
     width: 5px;
   }

   ::-webkit-scrollbar-track {
     background: #f1f1f1;
     border-radius: 10px;
   }

   ::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 10px;
   }