@charset "UTF-8";
/*! hyletop main custom style v1.0 | Copyright HYLETOP ® | hyletop.fr */
/*
 * HYLETOP main custom CSS for the website hyletop.fr
 * v1.1 | Last updated: 2026-01-21
 * Copyright © 2026 HYLETOP ® - https://www.hyletop.fr
*/


/*---------------------------------------------------------
# Common css
---------------------------------------------------------*/

/* hyletop specific design */
:root {
    --ht-color-deep-slate: #1B365D;
    --ht-color-tech-silver: #94A3B8;
    --ht-color-crisp-white: #F8FAFC;

    --ht-color-logo-d: #158FA8;
    --ht-color-logo-d-rgb: 21,143, 168;
    --ht-color-logo-c: #1AC2D6;
    --ht-color-logo-c-rgb: 26, 194, 214;

    --bs-font-sans-serif: Roboto, "Trebuchet MS", "Liberation Sans", Arial, "Segoe UI", "San Francisco", -apple-system, system-ui, sans-serif;
}
/* /hyletop specific design */


/* Classic extended 'clearfix' hack to clear some floats (=contain float inside its container)
Override the same element from bootstrap */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix:after {
    clear: both;
}
/* /Classic extended 'clearfix' hack to clear some floats (=contain float inside its container) */


/* Use Fontawesome instead of bootstrap-icon : replace .bi by .fa */
.icon-link > .fa {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  fill: currentcolor;
  transition: 0.2s ease-in-out transform;
}
@media (prefers-reduced-motion: reduce) {
  .icon-link > .fa {
    transition: none;
  }
}
.icon-link-hover:hover > .fa, .icon-link-hover:focus-visible > .fa {
  transform: var(--bs-icon-link-transform, translate3d(0.25em, 0, 0));
}
/* /Use Fontawesome instead of bootstrap-icon : replace .bi by .fa */


/* Extend Bootstrap5 properties */
.display-7 {
    font-weight: 300;
    line-height: 1.2;
    font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
    .display-7 {
        font-size: 2rem;
    }
}

.display-8 {
    font-weight: 300;
    line-height: 1.2;
    font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
    .display-8 {
        font-size: 1.75rem;
    }
}

.fs-4_5 {
  font-size: calc(1.25rem + 0.166666667vw) !important;
}
@media (min-width: 1200px) {
  .fs-4_5 {
    font-size: 1.375rem !important;
  }
}

.fs-5_5 {
  font-size: 1.125rem !important;
}
@media (min-width: 1200px) {
  .fs-5_5 {
    font-size: 1.25rem !important;
  }
}

.modal-95vw {
    --bs-modal-width: 95vw;
}
@media (min-width: 1200px) {
  .modal-95vw {
    --bs-modal-width: 1140px; /* value of .modal-xl ; 1200/1140=95vw */
  }
}

.opacity-10 {
  opacity: 0.1 !important;
}
.opacity-20 {
  opacity: 0.2 !important;
}

.navbar {
    --bs-navbar-brand-padding-x: 0;
}
.navbar-brand {
  padding-right: var(--bs-navbar-brand-padding-x);
  padding-left: var(--bs-navbar-brand-padding-x);
}
/* /Extend Bootstrap5 properties */


/* Triangle above the "t" of hyletop using a bootstrap icon
In this case, "hyletop" is a logo so it must follow the branding */
[class*="ht-hyletop-brand"] {
    position: relative; /* "no static" is required for the absolute position of the accent ; use .position-absolute/-fixed/-sticky */
    font-family: Roboto, "Trebuchet MS", "Liberation Sans", Arial, "Segoe UI", "San Francisco", -apple-system, system-ui, sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important; /* =semibold */
    font-variant: normal !important;
    text-transform: lowercase; /* only "hyletop" allowed */
}
[class*="ht-hyletop-brand"]::after {
    /* from bootstrap icon */
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* positioning the triangle above the "t" */
    position: absolute; /* parent must be in "no static" position */
    content: "\f235"; /* =bootstrap icon "bi-caret-up-fill"  (fontawesome = "fa-caret-up") */
    background: transparent;
    color: inherit;
    font-size: 80%;
    top: -37.5%;
    right: 27.2%; /* valid for "hyletop" and font Roboto semibold */
}

i[class*="ht-hyletop-brand"]::before { /* use : <i class="ht-hyletop-brand"></i> or <i class="ht-hyletop-brand-hover"></i> */
    content: "hyletop";
}

.ht-hyletop-brand-color__cyan::after {
    color: var(--ht-color-logo-c);
}

[class*="ht-hyletop-brand-hover"]::after {
    opacity: 0;
    top: 78%;
    transition: opacity .3s ease-in, top .3s ease-in;
}
.navbar-brand:hover [class*="ht-hyletop-brand-hover"]::after,
.navbar-brand:focus [class*="ht-hyletop-brand-hover"]::after,
[class*="ht-hyletop-brand-hover"]:hover::after,
[class*="ht-hyletop-brand-hover"]:focus::after {
    opacity: 1;
    top: -37.5%;
    transition: opacity .3s ease-out, top .3s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    [class*="ht-hyletop-brand-hover"] {
        transition: none !important;
    }
}
/* /Triangle above the "t" of hyletop */


/* Hyletop logo as a background overlay
Use : <span class="ht-hyletop-logo-overlay"></span>
Alternative : using a img component :
<img src="img/brand/hyletop_logo_overlay.svg" alt="" class="position-absolute top-0 end-0 w-100 h-100 object-fit-cover opacity-10 pe-none">
*/
.ht-hyletop-logo-overlay::before {
    position: absolute; /* parent must be in "no static" position */
    content: " "; /* can't use "url" (image instead of background) because object-fit works only on tags img|video */
    background-color: transparent;
    background-image: url("../img/brand/hyletop_logo_overlay.svg");
    background-origin: padding-box;
    background-clip: padding-box;
    background-position: center;
    background-size: cover;
    opacity: 0.1;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none; /* allow select below the overlay */
}
/* /Hyletop logo as a background overlay */


/* Gradiant on top corner (for a div)
Add margin-top or padding-top to the 1st elt inside to unstick the border and the content.
Drawback for 'rounded': use the --bs-body-bg color for the background */
.ht-border-top-left {
    border-top: 0.125rem solid transparent;
    border-left: 0.125rem solid transparent;
    border-image: linear-gradient(160deg, var(--ht-color-tech-silver), transparent 15%) 1;
}
.ht-border-top-right {
    border-top: 0.125rem solid transparent;
    border-right: 0.125rem solid transparent;
    border-image: linear-gradient(200deg, var(--ht-color-tech-silver), transparent 15%) 1;
}

.ht-border-top-left-r {
    border-top: 0.125rem solid transparent;
    border-left: 0.125rem solid transparent;
    border-radius: 1rem;
    background-image: linear-gradient(var(--bs-body-bg), var(--bs-body-bg)), linear-gradient(160deg, var(--ht-color-tech-silver), transparent 15%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
.ht-border-top-right-r {
    border-top: 0.125rem solid transparent;
    border-right: 0.125rem solid transparent;
    border-radius: 1rem;
    background-image: linear-gradient(var(--bs-body-bg), var(--bs-body-bg)), linear-gradient(200deg, var(--ht-color-tech-silver), transparent 15%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.ht-gradient-box { /* another method for ".ht-border-top-left-r" but less beautifull on the rounded part */
    position: relative; /* "no static" is required because :before is on absolute ; use .position-absolute|-fixed|-sticky */
    border-radius: 1em;
    background: var(--bs-body-bg);
    background-clip: padding-box;
}
.ht-gradient-box:before { /* border outside the content */
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -0.125rem; /* border size */
    border-radius: inherit;
    background: linear-gradient(160deg, var(--ht-color-tech-silver), transparent 15%);
}
/* /Gradiant on top corner (for a div) */



/*---------------------------------------------------------
# Header Section
---------------------------------------------------------*/
#header {
    padding: 0; /* dont' use "p-0" from bootstrap because navbar.toggle adds padding-right=15px */
}

#header .navbar.ht-navbar-bg-trans { /* based on the idea [data-bs-theme=dark] */
    /* from bootstrap ".bg-transparent" : */
    --bs-bg-opacity: 1;
    background-color: transparent !important;
    /* from bootstrap "root dark" : */
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    /* from bootstrap ".navbar-dark, .navbar[data-bs-theme=dark]" : */
    --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.75); /* 0.55 in bottstrap but too transparent */
    --bs-navbar-hover-color: var(--ht-color-logo-c);
    --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.25);
    --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.1);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

#header .navbar.ht-navbar-bg-white { /* based on the idea [data-bs-theme=light] */
    /* from bootstrap ".bg-white" : */
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
    /* from bootstrap "root light" : */
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    /* from bootstrap (adaptation) ".navbar-toggler" : */
    border-bottom: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
    /* from bootstrap ".navbar-dark, .navbar[data-bs-theme=light]" : */
    --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65);
    --bs-navbar-hover-color: var(--ht-color-logo-c);
    --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
    --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
#header .ht-navbar-transition-start .navbar-toggler-icon,
[data-bs-theme=dark] .ht-navbar-bg-white .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 767.98px) {
    #header .navbar-collapse.collapsing,
    #header .navbar-collapse.collapse.show { /*trick : force bg when toggler opened + no scroll */
        padding: 0 1.5rem;
        margin-top: 5px;
        border-bottom-right-radius: var(--bs-border-radius-lg);
        border-bottom-left-radius: var(--bs-border-radius-lg);
        /* from bootstrap "root light" : */
        --bs-emphasis-color: #000;
        --bs-navbar-color: rgba(0, 0, 0, 0.55);
        /* from bootstrap ".bg-white" : */
        --bs-bg-opacity: 1;
        background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
    }
}

#header .ht-navbar-transition-start { /* slow transition to switch bg from 'white' to 'trans' at startup
                        (start with white bg if js not activated ; see 'main.js' to remove it with same timeout) */
    --ht-navbar-transition-delay: 1s;
    --ht-navbar-transition-duration: 1s;
    --ht-navbar-transition-function: ease-in;
}
#header .ht-navbar-transition { /* same speed, function, delay that ".collapsing" from bootstrap */
    transition: all
                var(--ht-navbar-transition-duration, 0.75s)
                var(--ht-navbar-transition-function, ease)
                var(--ht-navbar-transition-delay, 0s);
}
@media (prefers-reduced-motion: reduce) {
    #header .ht-navbar-transition {
        transition: none;
    }
}

#header .navbar {
    --bs-navbar-toggler-padding-x: 0.5rem;
    --bs-navbar-brand-padding-x: var(--bs-navbar-brand-padding-y);
}

#header .ht-navbar-brand {
    --bs-navbar-brand-padding-x: calc(2 * var(--bs-navbar-brand-padding-y));
    border-radius: calc(2 * var(--bs-navbar-brand-padding-y));
    line-height: 1.5;
    /*box-shadow: 0 0 1rem var(--bs-white);*/
    /* from bootstrap ".bg-white" : */
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
}

#header .btn-outline-light,
#header .btn-outline-dark {
    --bs-btn-hover-color: var(--ht-color-logo-c);
    --bs-btn-active-color: var(--ht-color-logo-c);
    --bs-btn-hover-border-color: var(--ht-color-logo-c);
    --bs-btn-active-border-color: var(--ht-color-logo-c);
}
#header .btn-outline-dark {
    --bs-btn-border-color: var(--ht-color-logo-d);
    --bs-btn-disabled-border-color: var(--ht-color-logo-d);
}

#header .ht-btn-contact,
#header .navbar-toggler {
    background-color: rgba(var(--bs-white-rgb), 0.2) !important;
}
#header .ht-navbar-bg-white .ht-btn-contact {
    background-color: rgba(var(--ht-color-logo-c-rgb), 0.1) !important;
}

#header .ht-btn-contact {
    --bs-btn-padding-x: 0.5rem;
}

#header .ht-btn-contact.icon-link .bi::before {
    vertical-align: 0.125em;
}


#header .ht-navbar-brand-img {
    width: auto;
    height: calc(1.5rem * 1.33333333333); /* 1.5=line-height of ".ht-navbar-brand" ; 1.3333 due to the image */
}
.ht-hyletop-brand-hover__header-img {
    font-size: 1.5rem; /* 1.5=line-height of ".ht-navbar-brand" */
    line-height: 1;
}
.ht-hyletop-brand-hover__header-img::after {
    right: 19.3%;
}
.navbar-brand:hover .ht-hyletop-brand-hover__header-img::after,
.navbar-brand:focus .ht-hyletop-brand-hover__header-img::after,
.ht-hyletop-brand-hover__header-img:hover::after,
.ht-hyletop-brand-hover__header-img:focus::after {
    top: -15.5%;
}



/*---------------------------------------------------------
# Main Section
---------------------------------------------------------*/

section,
.ht-section {
    padding-top: 5.5rem;
}

.ht-list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-border-width: 0px;
    --bs-list-group-item-padding-y: 0.25rem;
    margin-bottom: 1rem;
}
@media (min-width: 1200px) {
    .ht-list-group  {
        --bs-list-group-item-padding-y: 0.5rem; /* =bootstrap value */
    }
}


/*---------------------------------------------------------
# Hero Section
---------------------------------------------------------*/
.ht-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 80px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ht-color-deep-slate);
}

.ht-hero-bg-img::before {
    position: absolute; /* parent must be in "no static" position */
    content: " "; /* can't use "url" (image instead og background) because object-fit work on tag img|video */
    background-color: transparent;
    background-image: url("../img/bg/hero-bg.jpg");
    background-origin: padding-box;
    background-clip: padding-box;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.4;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none; /* allow select below the image */
}

.ht-hero-bg2.ht-hero { min-height: 30vh; }
.ht-hero-bg2 .ht-hero-bg-img::before { opacity: 0.2; background-image: url("../img/bg/hero-bg2.jpg"); }
.ht-hero-bg2.ht-hyletop-logo-overlay::before { opacity: 0.05; background-image: url("../img/brand/hyletop_logo_overlay2.svg"); }
.ht-hero:not(.ht-hero-bg2) .ht-scroll-bounce { --ht-scroll-bounce-offsety: -1rem; }
@media (max-width: 767.98px) { .ht-hero:not(.ht-hero-bg2) .ht-scroll-bounce { --ht-scroll-bounce-offsety: -2.2rem; } }

/* Bouncing scroll icon */
@keyframes HTbounce {
    0%, 100% {
        transform: translateY(calc(0rem + var(--ht-scroll-bounce-offsety)));
    }
    40% {
        transform: translateY(calc(-1rem + var(--ht-scroll-bounce-offsety)));
    }
}
.ht-scroll-bounce { 
    --ht-scroll-bounce-offsety: 0rem;
    position: absolute; /* must be contained inside a "no static" component */
    z-index: 10;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    min-height: 1rem;
    text-align: center;
    margin: 0 auto;
}
.ht-scroll-bounce a {
    --bs-link-opacity: 0.7;
    text-decoration: none;
}
.ht-scroll-bounce span { 
    animation-name: HTbounce;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
    .ht-scroll-bounce span {
        animation: none;
    }
}
/* /Bouncing scroll icon */


/*---------------------------------------------------------
# Portfolio Section
---------------------------------------------------------*/

.ht-portfolio-row:not(:first-of-type) {
    margin-top: 1.5rem !important; /* =.mt-4 from bootstrap */
}
@media (min-width: 768px) { /* col-md inside the row */ 
    .ht-portfolio-row:not(:first-of-type) {
        margin-top: 3rem !important; /* =.mt-5 from bootstrap */
    }
}

.ht-portfolio .ht-img-project {
    position: relative; /* "no static" is required for the absolute position of the blur ; use .position-absolute|-fixed|-sticky */
    display: inline-block;
    padding: 0;
    background-clip: padding-box;
    overflow: hidden;
    width: 100%; /* expand the image to fill the column */
}
.ht-portfolio .ht-img-project:after { /* blur around the image */
    --ht-gradient-stop: 15%; /* must be increased if "ht-img-project has padding */
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    background-image:
        linear-gradient(0deg, var(--bs-body-bg), transparent var(--ht-gradient-stop)),
        linear-gradient(90deg, var(--bs-body-bg), transparent var(--ht-gradient-stop)),
        linear-gradient(180deg, var(--bs-body-bg), transparent var(--ht-gradient-stop)),
        linear-gradient(270deg, var(--bs-body-bg), transparent var(--ht-gradient-stop)),
        linear-gradient(45deg, var(--bs-body-bg), transparent var(--ht-gradient-stop)),
        linear-gradient(135deg, var(--bs-body-bg), transparent var(--ht-gradient-stop)),
        linear-gradient(225deg, var(--bs-body-bg), transparent var(--ht-gradient-stop)),
        linear-gradient(315deg, var(--bs-body-bg), transparent var(--ht-gradient-stop));
    background-origin: border-box;
    background-clip: padding-box;
}
.ht-portfolio .ht-img-project img { /* expand the image to fill the column */
    width: 100%;
    object-fit: cover;
}

.ht-portfolio-info {  /* container for the info button for modal over the image */
    position: absolute; /* parent must be in "no static" position */
    z-index: 10;
    bottom: 0;
    right: 0;
    left: 0;
    width: 50%;
    height: 5rem;
    text-align: center;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    background: radial-gradient(#fff, transparent);
}

.ht-portfolio .ht-btn-portfolio-modal {
    --bs-btn-padding-x: 0rem;
    --bs-btn-font-weight: 700;
    --bs-link-color: var(--ht-color-logo-d);
    --bs-link-hover-color: var(--ht-color-logo-c);
    text-decoration: none;
}
.ht-portfolio .ht-btn-portfolio-modal.icon-link .bi::before {
    vertical-align: 0.125em;
}

.ht-portfolio .modal {
    --bs-modal-header-border-color: var(--ht-color-logo-d);
    --bs-modal-footer-border-color: var(--ht-color-logo-d);
    --bs-modal-header-bg: var(--ht-color-logo-c-rgb);
    --bs-modal-footer-bg: var(--ht-color-logo-c-rgb);
}

.ht-portfolio .modal-content .modal-header {
    background-color: rgba(var(--bs-modal-header-bg), 0.1);
}
.ht-portfolio .modal-content .modal-footer {
    background-color: rgba(var(--bs-modal-footer-bg), 0.1);
}

/*---------------------------------------------------------
# Footer Section
---------------------------------------------------------*/
.ht-footer {
    color: var(--ht-color-crisp-white);
    margin-top: 5rem;
    padding: 0; /* dont' use "p-0" from bootstrap to be consistent with #header */
}

.ht-btn-social {
    font-weight: 600;
    transition: .5s;
    border-radius: 50%;
}
@media (prefers-reduced-motion: reduce) {
    .ht-btn-social {
        transition: none;
    }
}

.ht-btn-social-tooltip {
    --bs-tooltip-max-width: 600px;
    --bs-body-bg: #212529; /* dark theme */
    --bs-emphasis-color: #fff; /* dark theme */
    --bs-tooltip-color: var(--bs-body-bg);
    --bs-tooltip-bg: var(--bs-emphasis-color);
}