@charset "UTF-8";

body, html{
    padding: 0;
    height: 0;
}
video#bgvid {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
}

img#svglogo{
    position: absolute;
    z-index: 10000;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
    mix-blend-mode: overlay;    
}
@media (max-width: 1200px) {
    img#svglogo{
        width: 150vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    video#bgvid {
        display: none;
    }

    header.header-2 > .page-header {
        background: #00243b url("../img/curved-images/curved11.jpg") center / cover no-repeat;
    }
}


body.index-page .page-header, body.mentions-page .page-header {
    /* mix-blend-mode: exclusion; */
    mix-blend-mode: luminosity;
}

nav{
    backdrop-filter: unset!important;
}
.navbar .navbar-brand {
    font-size: 1.25rem;
}
#navigation ul{
    flex-direction: row-reverse !important;
}

.text-gradient.text-deework{
    background-image: linear-gradient(310deg, #00243b, #007aae);
}

.bg-deework{
    background-image: linear-gradient(310deg, #00243b, #007aae);
}

.btn-deework {
  background-color: #00243b;
  border-color: #007aae;
  color: #ffffff;
}

.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.oblique {
  right: -18rem !important;
}

.sticky-top-100 {
    top: 100px !important;
}

.bg-home-illus {
    background-image: url('../img/home_illus.png');
}

.bg-curved11 {
    background-image: url('../img/curved-images/curved11.jpg');
}

.bg-print-support {
    background-image: url('../img/illustrations/print.png');
    background-repeat: no-repeat;
    background-position: 29vw 17vh;
}

.bg-dev {
}

.bg-formation-cms {
    background-image: url('../img/illustrations/formation-cms.png');
    background-repeat: no-repeat;
    background-position: -1vw bottom;
}

.bg-formation-outils-collab {
    background-image: url('../img/illustrations/workspace.png');
    background-repeat: no-repeat;
    background-position: right bottom;
}

.bg-cms-illus {
    background-image: url('../img/illustrations/CMS.png');
    background-position: -125px;
}

.bg-flower-header {
    background-image: url('../img/illustrations/dev-logiciel.png');
}

#intrologo{
    height: 25vh;
    margin-top: 35vh;
}
#bloc1, #bloc2, #bloc3, #bloc4 {
    transform-box: fill-box;
    transform-origin: bottom left;
    transform: scaleY(0);
}

#bloc1 { animation: bouncy 1s cubic-bezier(0.34,1.56,0.64,1) 0.1s forwards 1, colorShift 1s ease-in-out 1.5s forwards 1, colorShift 1s ease-in-out 22.1s forwards 1; }
#bloc2 { animation: strict 1.25s cubic-bezier(0.34,1.56,0.64,1) 0.5s forwards 1, colorShift 1s ease-in-out 1.7s forwards 1, colorShift 1s ease-in-out 21.9s forwards 1; }
#bloc3 { animation: bouncy 1s cubic-bezier(0.34,1.56,0.64,1) 0.9s forwards 1, colorShift 1s ease-in-out 1.9s forwards 1, colorShift 1s ease-in-out 21.7s forwards 1; }
#bloc4 { animation: bouncy 0.75s cubic-bezier(0.34,1.56,0.64,1) 1.3s forwards 1, colorShift 1s ease-in-out 2.1s forwards 1, colorShift 1s ease-in-out 21.5s forwards 1; }

@keyframes bouncy {
    0%   { transform: scaleY(0)    scaleX(1);    }
    40%  { transform: scaleY(1.08) scaleX(0.93); }
    60%  { transform: scaleY(0.95) scaleX(1.04); }
    75%  { transform: scaleY(1.03) scaleX(0.98); }
    90%  { transform: scaleY(0.99) scaleX(1.01); }
    100% { transform: scaleY(1)    scaleX(1);    }
}

@keyframes strict {
    0%   { transform: scaleY(0)    scaleX(1);    }
    100% { transform: scaleY(1)    scaleX(1);    }
}

@keyframes colorShift {
    0%   { fill: #000000; }
    25%  { fill: #0077aa; }
    50%  { fill: #004363; }
    75%  { fill: #002840; }
    100% { fill: #000000; }
}

.intro-panel{
    transition: all 0.25s ease-in;
}
.bg-black{
    background-color: #000000;
}
#intro-container{
    z-index: 999999;
}
#intro-container.ended #panel-left{
    transform: translateX(-100vw);
}
#intro-container.ended #panel-right{
    transform: translateX(100vw);
}

#intro-veil {
    position: fixed;
    inset: 0;
    background-color: #000000;
    z-index: 999998;
    opacity: 0;
    pointer-events: none;
}
#intro-veil.veil-visible {
    opacity: 0.85;
}
#intro-veil.veil-fading {
    opacity: 0;
    transition: opacity 1s ease-out;
}

.curved-fade {
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}
#curved-fade-a {
    opacity: 1;
}

.curved-fade-logo-wrap {
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: overlay;
}
.curved-fade-logo {
    height: 80%;
    width: auto;
    mix-blend-mode: overlay;
}
.pull-up{
    margin-top: -265px !important;
    background: #ffffff;
    padding: 40px 20px;    
}


@media (max-width: 768px) {
    #navigation ul{
          flex-direction: column-reverse !important;
    }
}