/* ==========================================================================
   VARIABLES & CONFIGURATION
   ========================================================================== */

:root{
    --gray-xdark:#0a0a0a;
    --gray-dark:#717182;
    --gray-default:#e5e5e5;
    --gray-light:#f9fafb;
    --gray-xlight:#faf9fb;
    --color-white:#ffffff;
    --brand-color:#56f1c5;
    --radius-default: 6px;
    --radius-xl: 16px;

    --color01 : hsl(203, 100%, 33%);
    --color01-light: hsl(203, 100%, 95%);
    --color02 : hsl(329, 100%, 33%);
    --color02-light: hsl(329, 100%, 95%);
    --color03 : hsl(23, 100%, 33%);
    --color03-light: hsl(23, 100%, 95%);
    --color04 : hsl(166, 100%, 33%);
    --color04-light: hsl(166, 100%, 95%);
    --color05 : hsl(268, 100%, 33%);
    --color05-light: hsl(268, 100%, 95%);
    --color06 : hsl(0, 0%, 33%);
    --color06-light: hsl(0, 0%, 95%);

}

::selection {
    color: var(--gray-xdark);
    background-color: var(--brand-color);
}

/* Pour Firefox */
::-moz-selection {
    color: var(--gray-xdark);
    background-color: var(--brand-color);
}

body{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    background-color: var(--gray-xlight);
    color: var(--gray-dark);
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

b, strong{
    font-weight: 700;
}
i, em{
    font-style: italic;
    color: inherit;
}
a{
    color:var(--gray-xdark)
}
@media (hover: hover) and (pointer: fine) {
    a:hover{
        color:var(--gray-xdark)
    }
}

.text-small{
    font-size: 12px;
}
.text-big{
    font-size: 18px;
}

h1, h2, h3, h4{
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

h1{
    font-size: 46px;
    line-height: 1.2;
}
h2{
    font-size: 28px;
    line-height: 1.2;
}
h2.pixel::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--brand-color);
    border-radius: 2px;
    margin-right: 10px;
    vertical-align: middle;
    position: relative;
    top: -2px;
    flex-shrink: 0;
}
h3{
    font-size: 20px;
    line-height: 1.2;
    margin-top: 0;
}
h3.pixel::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--brand-color);
    border-radius: 2px;
    margin-right: 10px;
    vertical-align: middle;
    position: relative;
    top: -2px;
    flex-shrink: 0;
}

h4{
    font-size: 16px;
    line-height: 1.2;
}
h4.pixel::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--brand-color);
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    flex-shrink: 0;
}

.before-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--gray-dark);
}

.before-title.pixel::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--brand-color);
    border-radius: 2px;
    flex: 0 0 8px;
}

.bg-white{
    background-color: var(--color-white);
}
.bg-gray-xlight{
    background-color: var(--gray-xlight);
}

.radius-default{
    border-radius: var(--radius-default);
}
.radius-xl{
    border-radius: var(--radius-xl);
}


:not(pre)>code, :not(pre)>kbd, :not(pre)>samp {
    font-family: Consolas, monaco, monospace;
    font-size: 14px;
    color: var(--brand-color);
    white-space: nowrap;
    padding: 2px 6px;
    background: var(--gray-xdark);
}

a.crypted:after {
    content: attr(data-name) "@" attr(data-domain) "." attr(data-tld);
}

/* ==========================================================================
   NEUTRALISER ANIMATION POUR ACCESSIBILITE
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    [uk-scrollspy],
    [data-uk-scrollspy],
    [uk-scrollspy] *,
    [data-uk-scrollspy] * {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   BUTTON
   ========================================================================== */

.bt-text-default{
    color: var(--gray-xdark);
    text-decoration: none;
    font-weight: 400;
}
.bt-text-default i {
    font-size: 12px;
    margin-left: 4px;
    display: inline-block;
    transition: transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .bt-text-default:hover {
        color: var(--gray-xdark);
        text-decoration: none;
    }
    .bt-text-default:hover i {
        transform: translateX(4px);
    }
}

.bt-text-gray{
    color: var(--gray-dark);
    text-decoration: none;
    font-weight: 400;
}
@media (hover: hover) and (pointer: fine) {
    .bt-text-gray:hover {
        color: var(--gray-xdark);
        text-decoration: none;
    }
}

.bt-primary,
.media-card a.bt-primary{
    display: inline-block;
    background-color: var(--gray-xdark);
    color: var(--color-white);
    text-decoration: none;
    font-weight: 400;
    padding: 12px 32px;
    border-radius: var(--radius-default);
    transition: border-radius 0.3s ease, opacity 0.3s ease;
    border: 0;
}

@media (hover: hover) and (pointer: fine) {
    .bt-primary:hover,
    .media-card a.bt-primary:hover {
        color: var(--color-white);
        text-decoration: none;
        opacity: 0.8;
        border-radius: var(--radius-xl);
    }
}

.bt-small-outline {
    display: inline-block;
    background-color: transparent;
    color: var(--gray-dark);
    border: 1px solid var(--gray-default);
    border-radius: var(--radius-default);
    text-decoration: none;
    font-weight: 300;
    font-size: 12px;
    line-height: 1;
    padding: 8px 12px;
}
@media (hover: hover) and (pointer: fine) {
    .bt-small-outline:hover {
        color: var(--gray-xdark);
        border: 1px solid var(--gray-dark);
        text-decoration: none;
    }
}
.bt-small-outline i {
    font-size: 10px;
    margin: 0 2px;
}

/* ==========================================================================
   LOGO
   ========================================================================== */

.logo-default{
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 24px;
    color: var(--gray-xdark);
}
.logo-default .icon{
    background-color: var(--gray-xdark);
    width:32px;
    height:32px;
    border-radius: var(--radius-default);
    margin-right:8px;
}

.logo-default .icon svg .sigle {
    fill: var(--color-white);
}

.logo-default .icon svg {
    width: 16px;
    height: auto;
    transform-origin: center;
}

/* Animation au chargement */
.logo-default .icon svg.logo-intro {
    animation: logoSpinIntro 1.4s ease-in-out 1;
}

/* Animation récurrente */
.logo-default .icon svg.logo-pulse {
    animation: logoSpinPulse 1.4s ease-in-out 1;
}

@keyframes logoSpinIntro {
    0% {
        transform: scale(.82) rotate(0deg);
    }

    15% {
        transform: scale(.82) rotate(0deg);
    }

    85% {
        transform: scale(.82) rotate(360deg);
    }

    100% {
        transform: scale(1) rotate(360deg);
    }
}

@keyframes logoSpinPulse {
    0% {
        transform: scale(1) rotate(0deg);
    }

    15% {
        transform: scale(.82) rotate(0deg);
    }

    85% {
        transform: scale(.82) rotate(360deg);
    }

    100% {
        transform: scale(1) rotate(360deg);
    }
}



/* ==========================================================================
   MENU HEADER
   ========================================================================== */

.menu-header,
.menu-header .uk-navbar-container:not(.uk-navbar-transparent) {
    background: var(--gray-xlight);
}

.menu-header.uk-navbar-sticky{
    z-index: 999999;
}


.menu-header .uk-navbar-item, .menu-header .uk-navbar-nav>li>a, .menu-header .uk-navbar-toggle {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 350;
    font-style: normal;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: .25em;
    box-sizing: border-box;
    min-height: 80px;
    text-decoration: none;
}
.menu-header .uk-navbar-nav>li>a {
    height: 100%;
    padding: 0 0;
    color: var(--gray-xdark);
    text-transform: none;
    position: relative;
    padding-bottom: 2px;
}
.menu-header .uk-navbar-nav li a::after {
    content: '';
    position: absolute;
    bottom: 24px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--brand-color);
    transition: width 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
    .menu-header .uk-navbar-nav li a:hover::after{
        width: 100%;
    }
}
.menu-header .uk-navbar-nav li.uk-active a::after {
    width: 100%;
}

.menu-header .uk-navbar-nav>li>a i.fa-chevron-down{
    font-size: 12px;
    margin-left: 4px;
    display: inline-block;
    transition: transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
    .menu-header .uk-navbar-nav>li>a:hover i.fa-chevron-down{
        transform: rotate(180deg);
    }
    .menu-header .uk-navbar-nav > li:hover > a i.fa-chevron-down {
        transform: rotate(180deg);
    }
}

/* ICON MOBILE */
.menu-header .uk-navbar-nav>li.bars>a i{
    font-size: 22px;
}
.menu-header .uk-navbar-nav li.bars a::after {
    display: none;
}
@media (hover: hover) and (pointer: fine) {
    .menu-header .uk-navbar-nav>li.bars>a:hover i{
        opacity: 0.8;
    }
}

/* SOUS MENU */
.menu-header .uk-navbar-dropdown {
    width: 220px;
    padding: 15px 0;
    background: var(--color-white);
    color: var(--gray-xdark);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .15);
    border-radius:var(--radius-xl);
    top: 75px!important;
}

.menu-header .uk-navbar-dropdown .uk-navbar-dropdown-nav>li>a {
    padding: 8px 16px;
    color: var(--gray-xdark);
    text-transform: none;
}

.menu-header .uk-navbar-dropdown-nav {
    font-size: 14px;
}
.menu-header .uk-navbar-dropdown-nav li a::after {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .menu-header .uk-navbar-dropdown .uk-navbar-dropdown-nav>li>a:hover {
        background-color: var(--gray-light);
    }
}
.menu-header .uk-navbar-dropdown .uk-navbar-dropdown-nav>li.uk-active{
    background-color: var(--gray-light);
}

/* MENU MOBILE */

.uk-offcanvas {
    z-index: 999999;
}

#mobile-nav .uk-offcanvas-bar {
    background: var(--gray-xdark);
}
.uk-offcanvas-overlay::before {
    background: rgba(0, 0, 0, .4);
}

#mobile-nav .logo-default .icon{
    background-color: var(--color-white);
    margin-right:0;
}
#mobile-nav .logo-default .icon svg .sigle {
    fill: var(--gray-xdark);
}


#mobile-nav .uk-offcanvas-bar .uk-nav-default>li>a {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 350;
    font-style: normal;
    font-size: 16px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    column-gap: .25em;
    box-sizing: border-box;
    min-height: 36px;
    padding-bottom: 2px;
    text-decoration: none;
    color: var(--color-white);
    position: relative;
}

#mobile-nav .uk-offcanvas-bar .uk-nav-default li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 0;
    height: 2px;
    background: var(--brand-color);
    transition: width 0.25s ease;
}

#mobile-nav .uk-offcanvas-bar .uk-nav-default > li.uk-active > a {
    color: var(--color-white);
}

#mobile-nav .uk-offcanvas-bar .uk-nav-default > li.uk-active > a::after {
    width: 100%;
}

@media (hover: hover) and (pointer: fine) {
    #mobile-nav .uk-offcanvas-bar .uk-nav-default > li > a:hover {
        color: var(--color-white);
    }

    #mobile-nav .uk-offcanvas-bar .uk-nav-default > li > a:hover::after {
        width: 100%;
    }
}

#mobile-nav .uk-offcanvas-bar .uk-nav-default .uk-nav-sub a{
    color: rgba(255, 255, 255, .7);
    padding: 4px 0;
}
#mobile-nav .uk-offcanvas-bar .uk-nav-default .uk-nav-sub > li.uk-active > a {
    color: rgba(255, 255, 255, 1);
}
@media (hover: hover) and (pointer: fine) {
    #mobile-nav .uk-offcanvas-bar .uk-nav-default .uk-nav-sub a:hover{
        color: rgba(255, 255, 255, 1);
    }
}

#mobile-nav .uk-offcanvas-close svg{
    display: none;
}
#mobile-nav .uk-offcanvas-close i{
    font-size: 20px;
    color: rgba(255, 255, 255, .7);
}
@media (hover: hover) and (pointer: fine) {
    #mobile-nav .uk-offcanvas-close i:hover{
        color: rgba(255, 255, 255, 1);
    }
}

#mobile-nav .social a{
    font-size: 18px;
    margin: 0 5px;
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
    #mobile-nav .social a:hover{
        color: rgba(255, 255, 255, 1);
        text-decoration: none;
    }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer{
    background-color: var(--gray-xdark);
    color: var(--gray-default);
}
footer .logo-default{
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    color: var(--color-white);
}
footer .logo-default .icon{
    background-color: var(--color-white);
    width:28px;
    height:28px;
    border-radius: var(--radius-default);
    margin-right:8px;
}
footer .logo-default .icon svg{
    width: 14px;
    height: auto;
}
footer .logo-default .icon svg .sigle {
    fill: var(--gray-xdark);
}

footer h2{
    color: var(--color-white);
    font-size: 16px;
    line-height: 1.2;
}

footer .uk-nav>li>a {
    color: var(--gray-default);
    padding: 3px 0;
    opacity: 0.8;
}
@media (hover: hover) and (pointer: fine) {
    footer .uk-nav>li:hover>a {
        color: var(--gray-default);
        opacity: 1;
    }
}

footer a {
    color: var(--gray-default);
    text-decoration: none;
}

footer .social-list {
    gap: 10px;
}
footer .social-box{
    background-color: rgba(102,102,102,0.5);
    width:36px;
    height:36px;
    border-radius: var(--radius-default);
    color: var(--color-white);
    font-size: 18px;
}
@media (hover: hover) and (pointer: fine) {
    footer a:hover {
        text-decoration: none;
    }
    footer .social-box:hover{
        background-color: var(--gray-dark);
        text-decoration: none;
    }
}

footer .credits{
    font-size: 12px;
    color: var(--gray-dark);
}

@media only screen and (max-width: 960px) {
    footer .logo-default{
        justify-content: center;
    }
}
@media only screen and (max-width: 640px) {
    footer .uk-nav>li>a {
        justify-content: center;
    }
}

/* ==========================================================================
   HEADING
   ========================================================================== */

.heading h1{
    font-size: 52px;
    line-height: 1.1;
}


/* ==========================================================================
   HERO HOMEPAGE
   ========================================================================== */

.hero-homepage p{
    font-size: 18px;
}
.hero-homepage img{
    border-radius: var(--radius-xl);
}
.hero-homepage .h-250{
    height: 250px;
}
.hero-homepage .h-190{
    height: 190px;
}

.hero-homepage .highlight-slide {
    background: linear-gradient(var(--brand-color), var(--brand-color)) no-repeat left 88% / 0% 32%;
    animation: slide-highlight 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.85s;
    padding: 0 2px;
}

@keyframes slide-highlight {
    to { background-size: 100% 32%; }
}

/* ==========================================================================
   CLIENTS HOMEPAGE
   ========================================================================== */

.clients-homepage .uk-panel{
    height: 110px;
    background: var(--color-white);
    border-radius: var(--radius-xl);
}
.clients-homepage .uk-panel img{
    max-width: 100px;
    max-height: 36px;
    width: auto;
    height: auto;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

/* ==========================================================================
   ICON BOX
   ========================================================================== */

.icon-box{
    background-color: var(--gray-xdark);
    width:48px;
    height:48px;
    border-radius: var(--radius-default);
    color: var(--color-white);
    font-size: 18px;
}
.icon-box.light{
    background-color: var(--gray-xlight);
    color: var(--gray-dark);
    font-size: 18px;
}
.icon-box.transparent{
    background-color:transparent;
    color: var(--gray-dark);
    font-size: 24px;
}
.icon-box.small{
    background-color: var(--gray-xdark);
    width:36px;
    height:36px;
    border-radius: var(--radius-default);
    color: var(--color-white);
    font-size: 14px;
}

/* ==========================================================================
   MEDIA CARD
   ========================================================================== */


.media-card .h-190{
    height: 190px;
}
.media-card .uk-card {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
}
.media-card .uk-card-body {
    padding: 24px;
}

.media-card.bg-white .uk-card {
    background-color: var(--gray-xlight);
}

.media-card .uk-cover-container {
    overflow: hidden;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* si lien sur card */

.media-card a {
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
}

.media-card .uk-cover-container img {
    transition: transform 0.45s ease;
    border-radius: 0;
}

.media-card a p{
    color: var(--gray-dark);
}

@media (hover: hover) and (pointer: fine) {
    .media-card a:hover {
        text-decoration: none;
    }
    .media-card a:hover .uk-card .uk-cover-container img {
        transform: scale(1.08);
    }
    .media-card a:hover .bt-text-default i {
        transform: translateX(4px);
    }
}




/* ==========================================================================
   MEDIA GRID
   ========================================================================== */

.media-grid img{
    border-radius: var(--radius-xl);
}
.media-grid .square-xsmall{
    width: 96px;
    height: 96px;
}
.media-grid .square-small{
    width: 280px;
    height: 280px;
}
.media-grid .square-big{
    width: 460px;
    height: 460px;
}

@media only screen and (max-width: 1200px) {
    .media-grid .square-big{
        width: 320px;
        height: 320px;
    }
}
@media only screen and (max-width: 960px) {
    .media-grid .square-small{
        width: 190px;
        height: 190px;
    }
    .media-grid .square-big{
        width: 240px;
        height: 240px;
    }
    .media-grid .square-big.expand{
        height: 240px;
        width: 100%;
    }
}
@media only screen and (max-width: 640px) {
    .media-grid .square-small{
        height: 190px;
        width: 100%;
    }
    .media-grid .square-big{
        height: 240px;
        width: 100%;
    }
}

/* ==========================================================================
   LISTE CHECK
   ========================================================================== */


.uk-list.list-check li {
    position: relative;
    padding-left: 28px;
}

.uk-list.list-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25em;
    width: 16px;
    height: 16px;
    background-color: currentColor;

    -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48IS0tIUZvbnQgQXdlc29tZSBQcm8gdjcuMy4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDI2IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik0zMjAgNTc2QzE3OC42IDU3NiA2NCA0NjEuNCA2NCAzMjBDNjQgMTc4LjYgMTc4LjYgNjQgMzIwIDY0QzQ2MS40IDY0IDU3NiAxNzguNiA1NzYgMzIwQzU3NiA0NjEuNCA0NjEuNCA1NzYgMzIwIDU3NnpNMzIwIDExMkMyMDUuMSAxMTIgMTEyIDIwNS4xIDExMiAzMjBDMTEyIDQzNC45IDIwNS4xIDUyOCAzMjAgNTI4QzQzNC45IDUyOCA1MjggNDM0LjkgNTI4IDMyMEM1MjggMjA1LjEgNDM0LjkgMTEyIDMyMCAxMTJ6TTM5MC43IDIzMy45QzM5OC41IDIyMy4yIDQxMy41IDIyMC44IDQyNC4yIDIyOC42QzQzNC45IDIzNi40IDQzNy4zIDI1MS40IDQyOS41IDI2Mi4xTDMwNy40IDQzMC4xQzMwMy4zIDQzNS44IDI5Ni45IDQzOS40IDI4OS45IDQzOS45QzI4Mi45IDQ0MC40IDI3NiA0MzcuOSAyNzEuMSA0MzNMMjE1LjIgMzc3LjFDMjA1LjggMzY3LjcgMjA1LjggMzUyLjUgMjE1LjIgMzQzLjJDMjI0LjYgMzMzLjkgMjM5LjggMzMzLjggMjQ5LjEgMzQzLjJMMjg1LjEgMzc5LjJMMzkwLjcgMjM0eiIvPjwvc3ZnPg==") no-repeat center / contain;
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48IS0tIUZvbnQgQXdlc29tZSBQcm8gdjcuMy4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UpIENvcHlyaWdodCAyMDI2IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik0zMjAgNTc2QzE3OC42IDU3NiA2NCA0NjEuNCA2NCAzMjBDNjQgMTc4LjYgMTc4LjYgNjQgMzIwIDY0QzQ2MS40IDY0IDU3NiAxNzguNiA1NzYgMzIwQzU3NiA0NjEuNCA0NjEuNCA1NzYgMzIwIDU3NnpNMzIwIDExMkMyMDUuMSAxMTIgMTEyIDIwNS4xIDExMiAzMjBDMTEyIDQzNC45IDIwNS4xIDUyOCAzMjAgNTI4QzQzNC45IDUyOCA1MjggNDM0LjkgNTI4IDMyMEM1MjggMjA1LjEgNDM0LjkgMTEyIDMyMCAxMTJ6TTM5MC43IDIzMy45QzM5OC41IDIyMy4yIDQxMy41IDIyMC44IDQyNC4yIDIyOC42QzQzNC45IDIzNi40IDQzNy4zIDI1MS40IDQyOS41IDI2Mi4xTDMwNy40IDQzMC4xQzMwMy4zIDQzNS44IDI5Ni45IDQzOS40IDI4OS45IDQzOS45QzI4Mi45IDQ0MC40IDI3NiA0MzcuOSAyNzEuMSA0MzNMMjE1LjIgMzc3LjFDMjA1LjggMzY3LjcgMjA1LjggMzUyLjUgMjE1LjIgMzQzLjJDMjI0LjYgMzMzLjkgMjM5LjggMzMzLjggMjQ5LjEgMzQzLjJMMjg1LjEgMzc5LjJMMzkwLjcgMjM0eiIvPjwvc3ZnPg==") no-repeat center / contain;
}

.uk-list.list-check>*>ul, .uk-list.list-check>:nth-child(n+2) {
    margin-top: 16px;
}

/* ==========================================================================
   LISTE INLINE
   ========================================================================== */

ul.list-inline{
    padding: 0;
    margin: 0;
}
ul.list-inline>li{
    display: inline-block;
    margin: 0 10px 10px 0;
}

/* ==========================================================================
   LABEL
   ========================================================================== */

.label-default {
    display: inline-block;
    padding: 6px 12px;
    background: var(--gray-xlight);
    line-height: 1.2;
    font-size: 12px;
    color: var(--gray-xdark);
    vertical-align: middle;
    white-space: nowrap;
    border-radius: var(--radius-default);
    text-transform: capitalize;
}
.label-default.white {
    background: var(--color-white);
    color: var(--gray-xdark);
}

/* COLOR LABEL */


.label-default.color01 {
    background: var(--color01-light);
    color: var(--color01);
}
.label-default.color02 {
    background: var(--color02-light);
    color: var(--color02);
}
.label-default.color03 {
    background: var(--color03-light);
    color: var(--color03);
}
.label-default.color04 {
    background: var(--color04-light);
    color: var(--color04);
}
.label-default.color05 {
    background: var(--color05-light);
    color: var(--color05);
}
.label-default.color06 {
    background: var(--color06-light);
    color: var(--color06);
}


/* ==========================================================================
   REFERENCES
   ========================================================================== */


.references .uk-subnav-pill>.uk-active>a {
    background-color: var(--gray-xdark);
    color: var(--color-white);
}
.references .uk-subnav-pill>*>:first-child {
    padding: 8px 16px;
}
.references .uk-subnav>*>:first-child {
    display: flex;
    align-items: center;
    column-gap: 10px;
    color: var(--gray-dark);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.1;
    text-transform: capitalize;
    background-color: var(--color-white);
    border-radius: var(--radius-xl);
    margin-bottom: 10px;
}
@media (hover: hover) and (pointer: fine) {
    .references .uk-subnav>*>:first-child:hover {
        color: var(--gray-xdark);
    }
    .references .uk-subnav-pill>.uk-active>a:hover {
        color: var(--color-white);
    }
}
.references .uk-subnav-pill>* {
    padding-left: 12px;
}
.references .tri-az{
    padding: 6px 0;
    margin: 0 0 6px 10px;
}
.references .tri-az i{
    font-size: 18px;
    margin-right: 4px;
}
@media only screen and (max-width: 640px) {
    .references .tri-az{
        margin: 0;
    }
}

.references .uk-accordion li{
    border-bottom: 2px solid var(--gray-xdark);
}
.references .uk-accordion li a{
    padding: 16px 6px 16px 16px;
}
.references .uk-accordion>:nth-child(n+2) {
    margin-top: 0;
}
.references .uk-accordion li.uk-open{
    background-color: var(--color-white);
}

.references .uk-accordion li .label-default.white {
    background: var(--color-white);
    color: var(--gray-dark);
}
.references .uk-accordion li.uk-open .label-default.white {
    background: var(--gray-xlight);
}

.references .uk-accordion-content {
    margin-top: 0;
    padding: 0 6px 16px 16px;
}

@media (hover: hover) and (pointer: fine) {
    .references .uk-accordion li:hover{
        background-color: var(--color-white);
    }
    .references .uk-accordion li:hover .label-default.white {
        background: var(--gray-xlight);
    }
}

.references .qty-ref{
    display: inline-block;
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    line-height: 1.1;
    color: var(--gray-dark);
}

.references .client{
    display: inline-block;
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 22px;
    line-height: 1.1;
    color: var(--gray-xdark);
    margin-right: 10px;
}
.references .collab{
    display: inline-block;
    font-size: 14px;
    line-height: 1.1;
    color: var(--gray-dark);
}

.references span.link{
    text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
    .references span.link:hover{
        color: var(--gray-xdark);
    }
}

.references .uk-accordion-title i {
    font-size: 16px;
    color: var(--gray-dark);
    margin-right: 6px;
    top: -1px;
    position: relative;
}
@media (hover: hover) and (pointer: fine) {
    .references .uk-accordion-title i:hover {
        color: var(--gray-xdark);
    }
}
.references .uk-accordion-title::before {
    content: "";
    width: 18px;
    height: 18px;
    margin-left: 10px;
    margin-top: 5px;
    float: right;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48IS0tIUZvbnQgQXdlc29tZSBQcm8gdjcuMy4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDI2IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik0zNDQgMTIwQzM0NCAxMDYuNyAzMzMuMyA5NiAzMjAgOTZDMzA2LjcgOTYgMjk2IDEwNi43IDI5NiAxMjBMMjk2IDI5NkwxMjAgMjk2QzEwNi43IDI5NiA5NiAzMDYuNyA5NiAzMjBDOTYgMzMzLjMgMTA2LjcgMzQ0IDEyMCAzNDRMMjk2IDM0NEwyOTYgNTIwQzI5NiA1MzMuMyAzMDYuNyA1NDQgMzIwIDU0NEMzMzMuMyA1NDQgMzQ0IDUzMy4zIDM0NCA1MjBMMzQ0IDM0NEw1MjAgMzQ0QzUzMy4zIDM0NCA1NDQgMzMzLjMgNTQ0IDMyMEM1NDQgMzA2LjcgNTMzLjMgMjk2IDUyMCAyOTZMMzQ0IDI5NkwzNDQgMTIweiIvPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.references .uk-open>.uk-accordion-title::before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48IS0tIUZvbnQgQXdlc29tZSBQcm8gdjcuMy4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDI2IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik05NiAzMjBDOTYgMzA2LjcgMTA2LjcgMjk2IDEyMCAyOTZMNTIwIDI5NkM1MzMuMyAyOTYgNTQ0IDMwNi43IDU0NCAzMjBDNTQ0IDMzMy4zIDUzMy4zIDM0NCA1MjAgMzQ0TDEyMCAzNDRDMTA2LjcgMzQ0IDk2IDMzMy4zIDk2IDMyMHoiLz48L3N2Zz4=);
}

.references .uk-accordion ul.list-inline li {
    border-bottom: 0;
}

.references ul.list-info{
    padding: 0;
    margin: 0;
    font-size: 12px;
}
.references ul.list-info>li{
    display: inline-block;
    margin: 0 10px 10px 0;
}

.references ul.list-info>li .color01 {
    color: var(--color01)
}
.references ul.list-info>li .color02 {
    color: var(--color02)
}
.references ul.list-info>li .color03 {
    color: var(--color03)
}
.references ul.list-info>li .color04 {
    color: var(--color04)
}
.references ul.list-info>li .color05 {
    color: var(--color05)
}
.references ul.list-info>li .color06 {
    color: var(--color06)
}

.references .uk-checkbox:focus{
    background-color: rgba(0, 0, 0, 0);
    outline: 0;
    border-color: var(--gray-xdark);
}
.references .uk-checkbox:checked, .references .uk-checkbox:indeterminate{
    background-color: var(--gray-xdark);
    border-color: transparent;
}


#references-results {
    scroll-margin-top: 200px;
}
@media only screen and (max-width: 960px) {
    #references-results {
        scroll-margin-top: 240px;
    }
}

/* ==========================================================================
   OPEN SOURCE
   ========================================================================== */

.open-source .uk-list>*>ul, .open-source .uk-list>:nth-child(n+2) {
    margin-top: 4px;
}
.open-source h5 {
    font-size: 12px;
    font-weight: 300;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--gray-dark);
    margin-bottom: 10px;
}

.open-source .title strong {
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    line-height: 1.2;
    color: var(--gray-xdark);
}

/* ==========================================================================
   BLOG
   ========================================================================== */

.blog h2{
    font-size: 20px;
}
.blog .before-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--gray-dark);
}
.blog .before-title.pixel::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--brand-color);
    border-radius: 1px;
    flex: 0 0 6px;
}
.blog p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.blog hr {
    overflow: visible;
    text-align: inherit;
    margin: 0px 0 14px 0;
    border: 0;
    border-top: 1px solid var(--gray-default)
}
.blog .card-bottom{
    font-size: 12px;
}
.blog a .date,
.blog .date{
    color: var(--gray-dark);
    font-size: 12px;
}

.blog .uk-pagination>*>* {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    column-gap: 5px;
    padding: 4px;
    color: var(--gray-xdark);
    background-color: var(--color-white);
    border-radius: var(--radius-default);
    margin: 0 4px;
    font-size: 12px;
    font-weight: 500;
}
.blog .uk-pagination>.uk-active>* {
    color: var(--color-white);
    background-color: var(--gray-xdark);
}
.blog .uk-pagination>.uk-disabled>* {
    color: var(--gray-dark);
    background-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
    .blog .uk-pagination>*>*:hover {
        color: var(--color-white);
        background-color: var(--gray-xdark);
    }
}

/* ==========================================================================
   ARTICLE
   ========================================================================== */

.article .h-320{
    height: 320px;
}
.article .nfo{
    font-size: 12px;
}
.article .nfo i{
    margin-right: 4px;
}
.article .uk-pagination>*>* {
    display: flex;
    align-items: center;
    column-gap: .25em;
    padding: 5px 10px;
    color: var(--gray-dark);
}
@media (hover: hover) and (pointer: fine) {
    .uk-pagination>*>:hover {
        color: var(--gray-xdark);
        text-decoration: none;
    }
}


/* ==========================================================================
   CONTENT
   ========================================================================== */


.content a {
    color: var(--gray-xdark);
}

.content code, .content .ql-code-block-container {
    font-family: Consolas, monaco, monospace;
    color: var(--gray-xdark);
    background: var(--gray-light);
    padding: 2px 6px;
    border-radius: 4px;
}

.content pre, .content .ql-code-block {
    font: 14px / 1.4 Consolas, monaco, monospace;
    color: var(--brand-color);
    -moz-tab-size: 4;
    tab-size: 4;
    overflow: auto;
    padding: 20px;
    border: 0;
    border-radius: var(--radius-default);
    background: var(--gray-xdark);
    max-height:300px;
}

.content blockquote{
    margin-left: 20px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    font-style: normal;
    color: var(--gray-dark);
    padding: 6px 0 6px 20px;
    border-color: var(--gray-xdark);
    border-left-style: solid;
    border-left-width: 4px;
}

/* ==========================================================================
   AJOUT POUR EDITEUR QUILL
   ========================================================================== */

.content .ql-align-justify{
    text-align: justify;
}
.content .ql-align-center{
    text-align: center;
}
.content .ql-align-right{
    text-align: right;
}
.content .ql-align-left{
    text-align: left;
}
.content .ql-video {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}
.content .ql-size-small{
    font-size: 12px;
    line-height: 1.6;
}
.content .ql-size-large{
    font-size: 16px;
    line-height: 1.6;
}
.content .ql-size-huge{
    font-size: 18px;
    line-height: 1.6;
}


/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact h2{
    font-size: 20px;
    line-height: 1.2;
    margin-top: 0;
}
.contact h2.pixel::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--brand-color);
    border-radius: 2px;
    margin-right: 10px;
    vertical-align: middle;
    position: relative;
    top: -2px;
    flex-shrink: 0;
}
.contact h3{
    font-size: 16px;
    line-height: 1.2;
    margin-top: 0;
}
.contact a{
    color: var(--gray-dark);
}
@media (hover: hover) and (pointer: fine) {
    .contact a:hover{
        color: var(--gray-xdark);
    }
}
.contact .uk-input{
    height: 40px;
    vertical-align: middle;
    border-radius: var(--radius-default);
}
.contact .uk-input:focus, .contact .uk-select:focus, .contact .uk-textarea:focus {
    outline: 0;
    background-color: #fff;
    color: var(--gray-dark);;
    border-color: var(--gray-xdark);
}
.contact .uk-textarea {
    padding-top: 6px;
    padding-bottom: 6px;
    vertical-align: top;
    border-radius: var(--radius-default);
}