@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&display=swap');

@font-face {
    font-family: 'Scotch Display';
    src: url('../fonts/scotch-display-condensed-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html, body { -webkit-text-size-adjust: 100%;text-size-adjust: 100%;}
body { margin: 0 0; font-size: 16px; font-family: "Open Sans", sans-serif; font-weight: 400;}



#content { overflow: hidden; padding: 0 2rem;}

section , header { position: relative; z-index: 2;}

section { min-height: 30rem;}


footer { position: relative; z-index: 1; background: #F4F6F8; padding: 1px 2rem; box-sizing: border-box; margin:10rem -2rem 0 -2rem; min-height: 20rem; }
footer:after { position: absolute;  transform: skewY(-9.5deg);
  transform-origin:  0 top;
top: 0;
 left: 0;
 width: 100%; 
 padding: 0 0;
 height: 30vw;
 position: absolute;
 content: "";
 background: #F4F5F6;
 z-index: 0;
}


footer:before { position: absolute;  transform: skewY(3.5deg);
  transform-origin:  0 top;
top: -10rem;
 left: 0;
 width: 100%; 
 padding: 0 0;
 height: 10rem;
 position: absolute;
 content: "";
 background: #E2E4E6;
 z-index: 0;
}

footer .center { position: relative; z-index: 3; margin: -2rem auto 3rem auto;}

a { cursor: pointer;}
header { margin:-1rem 0 0 0; height: 6rem;}
header .logo { float: left; }
header menu { float: right; margin:1.25rem 0; padding: 0;}
header menu a { display: inline-block; text-decoration: none; padding: 0.4em 0.2em; margin: 0 0 0 0.4em; line-height: 1em; font-weight: 600; font-size: 100%; color: #FFF; position: relative; white-space: nowrap;}
header menu a:before { position: absolute; content: ""; background: #FFF; left: 0; bottom: 0.2em; width: 0; height: 0.6em; border-radius: 0.2em; opacity: 0.1; transition: width 0.15s, opacity 0.15s;}
@media (pointer: fine) { header menu a:hover:before { width: 100%; opacity: 0.2;} }
header menu a.active:before { width: 100%; opacity: 0.25;}
@media (max-width: 700px) { header menu a:before { display: none;} }

sup { font-size: 60%; padding-left: 0.2em; line-height: 0;}

p.legende { position: relative; padding-left: 1.5em; font-size: 75%; font-weight: 350; opacity: 0.8; line-height: 120%; padding-top: 1rem; margin-top: 3rem;}
p.legende span { position: absolute; left: 0;}
p.legende:before { height: 0.2rem; width: 3.4rem; background: #000D; content: ""; position: absolute; top: 0; margin: -0.2rem 0 0 0; left: 0; border-radius: 0.3rem;}

h1, h2, h3, h4 , h5 , .title {   font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  text-transform: uppercase;
  font-style: normal; line-height: 110%; margin: 1.2em 0 0.6em 0; }

h1 { font-size:350%;   font-weight: 700;  }
.small-block { position: relative; z-index: 2; padding-right: 12rem; margin-top: -2rem;}
.small-block { font-size: 110%;}
.small-block p { max-width: 30em; }


.logo {
  background-color: #FFF;
  -webkit-mask: url(../images/civika.svg) no-repeat center;
  mask: url(../images/civika.svg) no-repeat center;
    display: inline-block; height: 5em; width: 8.5em; text-indent: -5000px; text-decoration: none; 
    margin-left: -0.35rem;
    -webkit-mask-size:contain;
    mask-size:contain;
}

footer { color: #29293d;}
footer .logo { background: #29293d; opacity: 0.75; transition: opacity 0.2s; height: 4em; width: 6.8em; }
footer .logo:hover { opacity: 1; }

footer .columns { display: flex;}
footer .columns .column { width: 50%; font-size: 90%;}
footer .columns .column p { max-width: 20em;}
footer .columns .column + .column { width: 25%; margin-left: 2rem;} 

footer ul { list-style: none; margin: 4rem 0 0 0; padding: 0;}
footer ul strong { display: block; margin-bottom: 0.5rem; font-size: 110%;}
footer ul li a { text-decoration: underline; margin-top: 0.2em; text-decoration-color: #29293d00; text-underline-offset: 0; transition:  text-underline-offset 0.15s, text-decoration-color 0.3s; color: inherit; display: inline-block; position: relative; padding-left: 1em;}
footer ul li a:before { content: "›"; position: absolute; margin-left: -1em;}
footer ul li a:visited { color: inherit;}
footer ul li a:hover { text-decoration-color: #29293d; text-underline-offset: 0.2em;}

p { margin: 1.2em 0;}

.center { margin: 2rem auto; max-width: 1200px; }
h1.main-title { max-width: 10em;}
h1 span { white-space: nowrap;}
#gradient-div {
    margin: auto;
    overflow: hidden;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    animation: gradient 30s ease infinite;
    background-size: 400vw 400vh;
    background-attachment: fixed;
    background-position: 0 0;
    height: 14rem; 
    width: 100%;
    transform: skewY(-9.5deg);
     transform-origin:  0 bottom;
top: 0;
    left: 0;
    position: absolute;
    padding: 5% 0;
}

/* #gradient-div:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 200%; background: url(../images/texture3.png);  opacity: 1; z-index: 5;  transform: skewY(9.5deg); } */


#gradient-div svg { position: absolute; height: auto; min-height: 120%; width: 100%; position: absolute; margin-top: -10%; top: 0; left: 0; opacity: 0.6; mix-blend-mode:lighten;}

a.button { display: inline-block; background: #29293d; color: #FFF; padding: 0.5em 0.8em; border-radius: 1.4em; line-height: 1.1em; font-weight: 600; position: relative; margin: 0.2rem 0.2rem 0.2rem 0; text-decoration: none; }
a.button.arrow { padding-right: 0.3em;}
a.button.arrow span:after { content:"›"; display: inline-block; width: 0.9em;  margin-left: 0.3em; transition: all 0.15s;  }
a.button.arrow:hover span:after  { text-indent: 0.2em; }
header menu a.button { margin-left: 1rem; margin-top: 0; background: #FFF; color: #e73c7e;}
a.button.text { background: transparent; color: #29293d; padding-left: 0.2em; padding-right: 0.1em;}
header menu a.button:before { display: none; }
#gradient-div + header menu a.button:before { display: none; }
#gradient-div + header menu a.button span , #gradient-div + header menu a.button.arrow span:after , .text-gradient {

    @supports (background-clip:text) or (-webkit-background-clip:text) {
        color: transparent;
        animation: gradient 30s ease infinite;
        background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
        background-position: center;
        background-size: 400vw 400vh;
        background-attachment: scroll;
        background-clip: text;
        -webkit-background-clip: text;
      }
  
  
  }

strong { font-weight: 600;}

#device-preview { pointer-events: none; position: absolute; top: -5rem; right: -2rem; width: 49%; height: 38rem; perspective: 1400px; perspective-origin: 50% 40%; }
#device-preview.parallax-3d-active { overflow: visible; }
#device-preview.parallax-3d-active #device-mobile,
#device-preview.parallax-3d-active #device-desktop {
    transform-style: preserve-3d;
    will-change: transform;
    transition: none;
}
@media (prefers-reduced-motion: reduce) {
    #device-preview.parallax-3d-active #device-mobile,
    #device-preview.parallax-3d-active #device-desktop { transform: none !important; will-change: auto; }
}
#device-preview #device-mobile { width: 15rem; height: 30rem; background: #FAFBFC; box-shadow: 0 1.5rem 2.5rem #0014,  0 0 0 1px #0011 inset,  0 0 0.6em 0.25em #0012 inset; margin:4rem 0 0 3rem; border-radius: 2rem; position: absolute; z-index: 2; top: 0; }
#device-preview #device-mobile .screen {  background: #FFF no-repeat center top url(../images/screen-mobile.jpg); background-size: cover;   animation: screen-mobile 15s ease infinite;  }
#device-preview #device-mobile .screen , #device-preview #device-mobile:before  { position: absolute; top: 2%; left: 4%; height: 96%; width: 92%; border-radius: 1.6rem;}
#device-preview #device-mobile:before {  z-index: 2;  content: ""; background: linear-gradient(112deg, rgba(255,255,255,0.4) 0, rgba(255,255,255,1) 8rem, rgba(255,255,255,0) 8.05rem, rgba(0,0,0,0.2) 8.06rem, rgba(0,0,0,0) 11rem);  box-sizing: border-box; border: 0.15rem solid #0003;   border-radius: 1.8rem; opacity: 0.3;  }



#device-preview #device-desktop { width: 56rem; height: 31rem; background: #F2F4F6; background: #F2F4F699;  box-shadow: 0 1.5rem 2.5rem #0014; margin:0 0 0 8rem; border-radius: 1rem; position: absolute; top: 0;}
#device-preview #device-desktop .screen { position: absolute; left: 1.6%; top: 3%; width: 96.6%; height: 94%;  border-radius: 0.6rem; background: #FFF;   }
#device-preview #device-desktop .screen:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%;  border-radius: 0.6rem; background: url(../images/screen-desktop.png) no-repeat 0 0; background-size: cover; content: ""; opacity: 0.75;  }




@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


@keyframes screen-mobile {
	0%,20% {
		background-position: 0 0;
	}

	40% , 60% {
		background-position: 0 50%;
	}

	70% , 80% {
		background-position: 0 100%;
	}

    90%,100% {
		background-position: 0 0;
	}
}




#gradient-div + header { min-height: 8rem;}

/* Header dark — pages intérieures */
header.dark { border-bottom: 1px solid #0001; }
header.dark .logo { background-color: #29293d; }
header.dark menu a { color: #29293d; }
header.dark menu a:before { background: #8B35E9; mix-blend-mode:color-burn; }
header.dark menu a.active:before { opacity: 0.2; }
header.dark menu a.button { background: #29293d; color: #FFF; }
header.dark menu a.button span { color: #FFF !important; background: none !important; -webkit-background-clip: unset; background-clip: unset; animation: none; }
header.dark menu a.button.arrow span:after { color: #FFF !important; background: none !important; animation: none; }





@media (max-width: 1140px) {
    #device-preview { width: 44%; }
}



@media (max-width: 960px) {
    body { font-size: 15px;}
    #device-preview { width: 33%; }
    #gradient-div + header {min-height: 7rem;}
        .no-mobile { display: none; }
}

@media (max-width: 780px) {
    h1 { font-size: 270%;}
    header { position: relative; z-index: 600; }
    #gradient-div + header {min-height: 4rem;}
    header menu { position: fixed; pointer-events: none; box-sizing: border-box; background: #FFF no-repeat 2rem 1.3rem url(../images/civika.svg); background-size:7em auto; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding:6rem 2rem 2rem 2rem; opacity: 0; transition: opacity 0.2s;}

    header menu a { color: #29293d; display: block; border: 1px solid #29293d22; border-width: 1px 0; padding: 1.2rem 0;}
    header menu a + a { border-top-width: 0;}
    header menu a.button { position: absolute; bottom: 2rem; left: 50%; margin: 0 -6em; background: #29293d; color: #FFF; width: 12em; box-sizing: border-box; line-height: 1.5em; border-radius: 2em; text-align: center;   }

      #gradient-div +  header menu a.button span  , #gradient-div + header menu a.button.arrow span:after  {  color: #FFF !important;   background-clip: unset; -webkit-background-clip: unset; animation: none; background: none !important; }
      .small-block {  padding-right: 0.2rem; max-width: 28rem; margin-top: -1rem; font-size: 115%;}
          h1 span { white-space: unset;}
      #device-preview { opacity: 0.75; width: 60%;}
      #device-desktop { display: none;}
      #device-preview #device-mobile .screen { opacity: 0.22;  }
      #device-preview #device-mobile { margin-top: 4rem; left: 3rem; margin-left: 25%; transform: rotate(8deg);}
      #gradient-div { height: 15rem; }

      #toggleMenu { position: absolute; right: 0; background: #FFF3; top: 0.75rem; height: 32px; width: 46px; border-radius: 2rem; z-index: 20; transition: background-color 0.2s;}


      #toggleMenu span { position: absolute; width: 18px; height: 2px; background: #FFF; border-radius: 0.3rem; left: 50%; margin: -1px -9px; top: 11px; transition: all 0.2s;}
      #toggleMenu span + span { top:50%;}
      #toggleMenu span + span + span { top: auto; bottom:11px;  }

      body.menu-open #toggleMenu span  { background: #29293d }
      body.menu-open #toggleMenu { background: #29293d14;  }

      body.menu-open { overflow: hidden;}

      body.menu-open #toggleMenu span:nth-child(1) { transform: rotate(45deg); top: 50%; }
      body.menu-open #toggleMenu span:nth-child(2) { opacity: 0; }
      body.menu-open #toggleMenu span:nth-child(3) { transform: rotate(-45deg); bottom: 50%; }
    body.menu-open header menu { opacity: 1; pointer-events: fill; }
    header.dark #toggleMenu { background: rgba(41,41,61,0.08); }
    header.dark #toggleMenu span { background: #29293d; }
    body.menu-open header.dark #toggleMenu { background: rgba(41,41,61,0.08); }

    footer .columns { display: block; text-align: center;} 
    footer .columns .column , footer .columns .column + .column { width: auto; }
    footer .columns .column + .column { margin-left: 0;}
    footer .columns .column p { max-width: 100%;}
    footer .columns .column ul { margin-top: 2rem;}
    footer { margin-top: 13rem;}
    footer .center { margin-top: -6rem;}
    footer .columns .column ul li strong { margin-bottom: 1rem;}
    footer .columns .column ul li a { display: block; padding: 0.6rem 0.5rem; background: #FFFA; border-radius: 0.4rem; margin: 0.2rem 0; text-decoration: none;}
footer ul li a:before { display: none;}
  }


@media (max-width: 490px) {
    h1 { font-size: 8.5vw;}
    body { font-size: 14px;}
    #gradient-div { height: 13rem; }
}



@media (max-width: 370px) {

    body { font-size: 13px;}

}