/*
Theme Name: Updata
Template: twentytwentyfive
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: Jean-François Arbour
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog
*/

:root {
    --color--white: #ffffff;
    --color--gray50: #f1f1f1;
    --color--gray100: #ebebeb;
    --color--gray200: #dadada;
    --color--gray400: #8b8b8b;
    --color--gray700: #4f4f4f;
    --color--gray800: #3d3d3d;
    --color--gray800--transparent: rgba(61, 61, 61, 0.8);
    --color--black: #222222;
    --color--blue: #0047c7;
    --color--lightblue: #4f85e9;
    --color--orange: #ff6727;
    --color--yellow: #ffcf00;
    --color--pink: #d583ca;
    --color--purple: #8959cc;
    --color--error: #f14700;
    /* --font-family--primary: 'Literata'; */
    --font-family--primary: 'argent-cf, serif';
    --font-family--secondary: 'DM Sans';
    --spacing--section: clamp(90px, 12vw, 145px);
    --spacing--banner: clamp(50px, 10vw, 130px);
    --spacing--small: clamp(60px, 9vw, 110px);
    --padding--section: clamp(20px, 5vw, 60px);
}

:where(.wp-site-blocks) > * {
    margin-block-start: 0;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img {
    display: block;
}

html, body {
    overflow-x: hidden;
    position: relative;
    width: 100%;
}

body {
    padding: 0;
    background-color: var(--color--black);
    color: var(--color--white);
}

nav.is-layout-flex {
    gap: 40px;
}

hr {
    margin: 0;
}

h1 {
    margin: 0;
    font-family: var(--font-family--primary);
    font-style: normal;
    font-weight: 300;
    font-size: clamp(40px, 8vw, 75px);
    line-height: 1.1;
}

h1.article {
    font-size: 63px;
}

h1 > strong,
h2 > strong,
h3 > strong {
    font-weight: 700;
    font-style: italic;
}

h2 {
    margin: 0;
    font-family: var(--font-family--primary);
    font-style: normal;
    font-weight: 300;
    font-size: clamp(29px, 6vw, 47px);
    line-height: 1.15;
}

h3 {
    margin: 0;
    font-family: var(--font-family--primary);
    font-weight: 300;
    font-style: normal;
    font-size: clamp(22px, 4vw, 32px);
    line-height: 1.15;
}

h4 {
    text-transform: uppercase;
    margin: 0;
    font-family: var(--font-family--secondary);
    font-weight: 400;
    font-size: clamp(13px, 2vw, 18px);
    line-height: 1.25;
}

a {
    color: var(--color--blue);
    text-decoration: underline;
}

.wp-block-post-title > a,
.taxonomy-category > a,
a.card-link {
    color: inherit;
    text-decoration: none;
}

a.on-black-bg {
    color: var(--color--white);
}

a.btn,
a:not(.card-link):hover {
    text-decoration: none;
}

.wp-block-post-title > a:hover,
.language-button > a:hover,
.taxonomy-category > a:hover {
    color: inherit;
}

@media (max-width: 992px) {
    h2 {
        font-weight: 300;
    }

    h3 {
        font-weight: 300;
        font-style: light;
    }
}

.title-strong {
    font-weight: 700;
    font-style: italic;
}

p, li,
.black-cards-grid-heading,
.wp-block-post-date {
    font-family: var(--font-family--secondary);
    font-size: clamp(16px, 3vw, 19px);
    font-weight: 300;
    line-height: 1.4;
    margin: 0;
}

.black-cards-heading > p,
p.large {
    font-size: clamp(19px, 4vw, 22px);
    font-weight: 300;
}

p.regular {
    font-size: 20px;
    line-height: 1.25;
}

p.small {
    font-size: 17px;
    line-height: 1.35;
}

p.libelle {
    font-family: var(--font-family--primary);
    font-weight: 300;
    font-size: 22px;
    line-height: 1.1;
}

/* h3.title to adapt for old industry cards */
h3.title,
.testimony {
    font-family: var(--font-family--primary);
    font-weight: 300;
    font-size: 25px;
    line-height: 1.3;
}

.testimony.centered {
    text-align: center;
}

p.form-field-description {
    color: var(--color--gray700);
    font-size: 14px;
    margin-top: -5px;
    margin-bottom: 4px;
}

@media (max-width: 992px) {
    p.regular {
        font-size: clamp(16px, 3vw, 20px);
        line-height: 1.35;
    }

    p.large {
        font-size: clamp(19px, 4vw, 22px);
    }
}

span.required {
    color: var(--color--blue);
}

span.optional {
    font-size: 15px;
    font-style: italic;
}

label {
    display: block;
    color: var(--color--black);
    font-family: var(--font-family--secondary);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.35;
    margin-bottom: 4px;
}

@media (max-width: 768px) {
    .hide-on-small-screen {
        display: none !important;
    }
}

@media (max-width: 992px) {
    .hide-on-medium-screen {
        display: none !important;
    }
}

@media (min-width: 993px) {
    .hide-on-large-screen {
        display: none !important;
    }
}

@media (max-width: 824px) {
    .hide-below-824 {
        display: none !important;
    }
}

.hsfc-Button,
.btn {
  font-family: var(--font-family--secondary);
  font-size: 17px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.35;
  height: 50px;
  border-radius: 100px;
  display: inline-flex;
  padding: 20px 25px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  width: fit-content;
  cursor: pointer;
  position: relative;
  padding: 20px 25px;
  overflow: hidden;
  transition:
      all 0.3s ease,
      border 0s ease !important;
}

.hsfc-Button:hover,
.btn:hover {
  padding-right: 60px !important;
  border: none;
  background: var(--color--yellow);
  color: black;
}

.hsfc-Button::after,
.btn::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 14px;
  opacity: 0;
  transition: width 0.3s ease, opacity 0.3s ease;
  background-image: url('https://updata.ca/wp-content/uploads/2025/07/arrow-long.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  overflow: hidden;
}

.hsfc-Button:hover::after,
.btn:hover::after {
  width: 32.5px;
  opacity: 1;
}

.btn-download:hover {
    padding-right: 48px;
}

.btn-download::after {
    background-image: url('https://updata.ca/wp-content/uploads/2025/07/icon-download.svg');
    height: 19px;
}

.btn-download:hover::after {
    width: 18px;
}

.btn-decouverte:hover {
    padding-right: 42px;
}

.btn-decouverte::after {
    background-image: url('https://updata.ca/wp-content/uploads/2025/07/arrow-down.svg');
    height: 14.88px;
}

.btn-decouverte:hover::after {
    width: 14px;
}

.procedes-ia-banner a,
.btn-primary {
  border: none;
  background: var(--color--blue);
  color: white;
}

.btn-secondary {
  border: 1px solid var(--color--blue);
  background: transparent;
  color: var(--color--blue);
}

.btn-arrow {
    width: 40px;
    height: 40px;
    border: 1px solid var(--color--black);
    border-radius: 50%;
    padding: 0;
    background-color: transparent;
    transition: background-color 0.3s ease;
}

a.btn-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
}

.btn-arrow:hover {
    border: none;
    background-color: var(--color--yellow);
}

button {
    font-family: var(--font-family--secondary);
    font-size: 17px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.35;
    height: 50px;
    border-radius: 100px;
    display: inline-flex;
    padding: 20px 25px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    width: fit-content;
    cursor: pointer;
}

button p {
    font-family: var(--font-family--secondary);
    font-size: 17px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.35;
}

@media (max-width: 768px) {
    button {
        font-size: 15px;
        height: 48px;
    }

    button p {
        font-size: 15px;
    }
}

button:active {
    outline: none;
}

button.is-outlined {
    background-color: transparent;
    color: var(--color--white);
    border: 1px solid var(--color--white);
}

.has-primary-buttons button {
    background-color: var(--color--blue);
    color: var(--color--white);
}

.btn-back {
    position: relative;
    background-color: transparent;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-back:not(.btn-pagination) {
    margin-top: 30px;
    color: var(--color--white);
    border: 1px solid var(--color--white);
}

.btn-pagination {
    color: var(--color--blue);
    border: 1px solid var(--color--blue);
    border-radius: 100px;
    padding: 20px 25px;
    font-family: var(--font-family--secondary);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.35;
    height: 50px;
    display: inline-flex;
    align-items: center;
}

.btn-back:hover {
  padding-left: 60px;
  border: none;
  background-color: var(--color--yellow);
  color: black;
}

.btn-back::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  width: 0;
  height: 14px;
  opacity: 0;
  transition: width 0.3s ease, opacity 0.3s ease;
  background-image: url('https://updata.ca/wp-content/uploads/2025/07/arrow-long.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  overflow: hidden;
}

.btn-back:hover::before {
  width: 32.5px;
  opacity: 1;
}

@media (max-width: 768px) {
    .btn-back:not(.btn-pagination) {
        margin-top: 10px;
    }
}

.long-button {
    text-wrap: nowrap;

    &:hover {
        padding: 0 90px 0 50px;
    }
}

.megamenu-mobile-first-btn,
.button--header {
    min-width: 161px;
    outline: none;
    transition: all 0.3s ease;
    position: relative;
    z-index: 4;
}

.button--header {
    max-height: 40px;
}

.megamenu-mobile-first-btn:hover:not(.active),
.button--header:hover:not(.active) {
    background-color: var(--color--gray800);
}

.megamenu-mobile-first-btn.active,
.button--header.active {
    border: 1px solid transparent;
    background-color: var(--color--blue);
}

.megamenu-mobile-first-btn::after,
.button--header::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("https://updata.ca/wp-content/uploads/2025/06/caret_down.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
}

.megamenu-mobile-first-btn.active::after,
.button--header.active::after {
    transform: rotateX(180deg);
}

.contact-menu,
.contact-menu-mobile {
    position: absolute;
    top: 5px;
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        max-height 0.3s ease;
}

.contact-menu.active,
.contact-menu-mobile.active {
    opacity: 1;
    visibility: visible;
    max-height: 100px;
}

.contact-menu-item {
    font-size: 17px;
    font-weight: 400;
    font-style: normal;
    font-family: var(--font-family--secondary);
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
}

.contact-menu-item:hover {
    background-color: var(--color--gray50);
    color: var(--color--blue);
}

.contact-menu a,
.contact-menu-mobile a,
.language-button a,
.wp-block-navigation a {
    color: inherit;
    text-decoration: none;
}

.header-logo {
    filter: invert(1) brightness(2);
}

.header-content img,
.header-content-mobile img {
    transform: translateY(4px);
}

.section-container {
    display: flex;
    justify-content: center;
}

.section-inner {
    max-width: 1440px;
    width: 100%;
    padding: 0 var(--padding--section);
}

.section--background-image--left {
    position: absolute;
    left: -240px;
    height: min(1001px, 75vw);
}

.section-divider {
    width: 0;
    transition: width 0.5s ease;
}

.section-divider.is-visible {
    width: 50vw;
}

@media (max-width: 992px) {
    .section--background-image--left {
        height: min(900px, 125vw);
        width: min(800px, calc(230px + 100vw));
        left: -330px;
    }
}

@media (max-width: 768px) {
    .section-divider.is-visible {
        width: 90vw;
    }
}

.padding-large-v {
    padding-top: var(--spacing--section);
    padding-bottom: var(--spacing--section);
}

.padding-banner-v {
    padding-top: var(--spacing--banner);
    padding-bottom: var(--spacing--banner);
}

.padding-small-v {
    padding-top: var(--spacing--small);
    padding-bottom: calc(var(--spacing--small) - 40px);
}

.padding-medium-v {
    padding-top: calc(var(--spacing--section) - 27px);
    padding-bottom: var(--spacing--section);
}

.padding-besoins-notre-approche {
    padding-top: calc(var(--spacing--section) + min(15vw, 215px));
    padding-bottom: var(--spacing--section);
}

.banner__mon-premier-ia > .section-inner {
    padding-bottom: 170px;
}

.banner__si-on-parlait > .section-inner {
    padding-bottom: calc(var(--spacing--section) - 30px);
}

@media (max-width: 1333px) {
    .padding-besoins-notre-approche {
        padding-top: calc(var(--spacing--section) + 275px);
    }
}

@media (max-width: 992px) {
    .padding-besoins-notre-approche {
        padding-top: calc(var(--spacing--section) + 312px);
    }
    .banner__si-on-parlait + .section-container > .section-inner {
        padding-top: calc(var(--spacing--banner) + 50px);
    }
}

@media (max-width: 1336px) {
    .padding-banner-v {
        padding-top: calc(var(--spacing--section) - 60px);
    }
    .padding-medium-v:not(.section-premier-ia-team) {
        padding-top: calc(var(--spacing--section) - 87px);
    }
}

@media (max-width: 768px) {
    .padding-medium-v {
        padding-top: 60px;
    }
    .padding-besoins-notre-approche {
        padding-top: calc(var(--spacing--section) + clamp(270px, 45vw, 312px));
    }
    .banner__si-on-parlait + .section-container > .section-inner {
        padding-top: 305px;
    }
}

@media (max-width: 663px) {
    .banner__si-on-parlait + .section-container > .section-inner {
        padding-top: 47vw;
    }
}

.float {
    --size: clamp(66px, 10vw, 141px);
    --amp: calc(var(--size) * 0.08);  /* how far it can wander (~8% of size) */
}

.gradient-ball {
    width: var(--size, clamp(66px, 10vw, 141px));
    height: var(--size, clamp(66px, 10vw, 141px));

    will-change: transform;
}

.float-x {
    animation: driftX var(--dur-x, 9.7s) ease-in-out var(--delay-x, 0s) infinite;
    will-change: transform;
}

.float-y {
    animation: driftY var(--dur-y, 12.3s) ease-in-out var(--delay-y, 0s) infinite;
    will-change: transform;

    @media (min-width: 769px) {
        /* Only float vertically on smaller screens */
        &:has(.banner--gradient-ball__premier-ia) {
            animation: none;
        }
    }
}

.tilt {
    animation: tilt var(--dur-tilt, 18s) ease-in-out var(--delay-tilt, 0s) infinite;
}

.tilt-translate-rotate {
    animation: tiltTranslateRotate var(--dur-tilt, 18s) ease-in-out var(--delay-tilt, 0s) infinite;
}

@keyframes driftX {
  0%   { transform: translateX(0%); }
  20%  { transform: translateX(calc(var(--amp) *  0.5)); }
  40%  { transform: translateX(calc(var(--amp) * -0.4)); }
  60%  { transform: translateX(calc(var(--amp) *  0.9)); }
  80%  { transform: translateX(calc(var(--amp) * -0.7)); }
  100% { transform: translateX(0%); }
}
@keyframes driftY {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(calc( var(--amp) * -0.6)); }
  50%  { transform: translateY(calc( var(--amp) *  0.4)); }
  75%  { transform: translateY(calc( var(--amp) * -1.0)); }
  100% { transform: translateY(0); }
}

@keyframes tilt {
    0%, 100% { transform: rotate(-2deg); }
    50%      { transform: rotate( 2deg ); }
}
@keyframes tiltTranslateY {
    0%, 100% { transform: translateY(-100%) rotate(-2deg); }
    50%      { transform: translateY(-100%) rotate( 2deg); }
}
@keyframes tiltTranslateRotate {
    0%, 100% { transform: translateX(50%) rotate(88deg); }
    50%      { transform: translateX(50%) rotate(92deg); }
}
@keyframes tiltTranslateNeg {
    0%, 100% { transform: translateX(-50%) rotate(-2deg); }
    50%      { transform: translateX(-50%) rotate( 2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .float-x, .float-y, .gradient-ball { animation: none !important; }
}

.header-content {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 106px;
    gap: 30px;
}

.header-navigation-container {
    display: flex;
    gap: 78px;
    align-items: center;
}

.header-buttons {
    display: flex;
    align-items: center;
    gap: 25px;
}

@media (max-width:1229px) {
    .header-navigation-container{
        gap:44px;
    }

    .header-buttons {
        gap: 18px;
    }
}

.header-content-mobile {
    display: flex;
    align-items: center;
    gap: clamp(21px, 6vw, 40px);
    padding-top: clamp(25px, 6vw, 40px);
    position: relative;
    z-index: 4;
}

.header-logo-container {
    display: flex;
    align-items: center;
}

.hamburger-menu {
    cursor: pointer;
    background-image: url('https://updata.ca/wp-content/uploads/2025/07/hamburger-menu.svg');
    background-position: center;
    background-repeat: no-repeat;
    width: 77px;
    height: 45px;
}

.hamburger-menu.active {
    background-image: url('https://updata.ca/wp-content/uploads/2025/08/hamburger-menu-open.svg');
}

.megamenu-mobile-container {
    margin-top: 19px;
    opacity: 0;
    visibility: hidden;
    height: 0;
    display: flex;
    flex-direction: column;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        max-height 0.3s ease;
}

.megamenu-mobile-container.active {
    height: auto;
    min-height: fit-content;
    opacity: 1;
    visibility: visible;
}

.contact-menu-mobile-wrapper {
    position: relative;
    z-index: 4;
    top: 10px;
}

.megamenu-mobile-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* mobile megamenu blurry background */
.megamenu-mobile-contact-menu-overlay::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show overlay when menu is active */
.contact-menu-mobile.active ~ * .megamenu-mobile-contact-menu-overlay::after,
.megamenu-mobile-contact-menu-overlay:has(.contact-menu-mobile.active)::after {
    Opacity: 1;
    visibility: visible;
}

.updata-megamenu-mobile-image {
    position: absolute;
    right: -170px;
    top: 160px;
    z-index: -1;
}

.footer-gradient-ball {
    position: absolute;
    left: var(--padding--section);
}

.footer-card-container {
    display: flex;
    gap: 30px;
}

.footer-card {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color--black);
    background-color: var(--color--white);
    width: 100%;
    border-radius: 8px;
    padding: clamp(35px, 6vw, 45px) clamp(25px, 5vw, 35px);
    z-index: 1;
}

.footer-card-form input {
    width: 100%;
    height: 50px;
    border: none;
    border-bottom: 1px solid var(--color--black);
    margin-bottom: 4px;
    font-size: 17px;
    padding: 0 12px;
}

.footer-card-form input:focus {
    outline: none;
    border-bottom: 2px solid var(--color--blue);
}

.footer-card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    gap: clamp(30px, 4vw, 40px);
}

.footer-card-form {
    display: flex;
    width: 100%;
    gap: 17px;
}

.footer-content {
    padding: var(--spacing--section) 0;
}

.footer-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: clamp(65px, 15vw, 145px);
    gap: clamp(35px, 4vw, 56px);
    text-align: center;
}

.footer-contact-section {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 245px;
    margin-top: 54px
}

.footer-contact-section-heading {
    display: flex;
    justify-content: space-between;
}

.footer-contact-section-address {
     display: flex;
     flex-direction: column;
     gap: 30px;
}

.footer-bottom {
    position: relative;
    z-index: 1;
    margin-bottom: 45px;
}

.footer-bottom p {
    font-size: 15px;
}

.footer-bottom-divider {
    display: flex;
    align-items: center;
    gap: 53px;
}

.footer-bottom-copyright {
     margin-top: 14px;
     display: flex;
     justify-content: space-between;
     padding-right: 100px;
}

.footer-bottom-copyright-content {
    display: flex;
    align-items: center;
    gap: 35px;
}

.footer-social-buttons-container {
    display: flex;
    gap: 13px;
}

.footer-social-button {
    width: 40px;
    height: 40px;
    border: 1px solid var(--color--white);
    background-color: inherit;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.footer-social-button:hover {
    filter: brightness(0.9);
    background-color: var(--color--gray800);
    transform: scale(1.05);
}

.footer-chat-button {
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}

.footer-chat-button:hover {
    transform: scale(1.05);
    filter: brightness(0.9);
}

.footer-planet {
    object-fit: cover;
    position: absolute;
    right: 0;
    top: 26%;
    right: 0;
    height: clamp(430px, 80vw, 734px);
    width: clamp(215px, 40vw, 367px);
}

.banner-planet-image-container {
    object-fit: cover;
    position: absolute;
    width: clamp(215px, 30vw, 440px);
    right: 0;
}

.banner-planet-image {
    transform: translate(0, 3px);
}

@media (max-width: 768px) {
    .banner-planet-image {
        transform: translate(25%, 3px);
    }
}

.header-mobile {
    display:none;
}

@media (max-width: 1336px) {
    .header-mobile {
        display:block;
    }
    .header-desktop {
        display:none;
    }
}

@media (max-width: 768px) {
    .footer-planet {
        transform: translateX(25%);
    }
    .footer-content {
        padding-bottom: 0;
    }
    .footer-card-container {
        flex-direction: column;
    }
    .footer-card-content,
    .footer-card-content p,
    .footer-card-container button {
        width: 100%;
    }
    .footer-card-form {
        flex-direction: column;
        align-items: center;
    }
    .footer-contact-section {
        flex-direction: column;
        gap: 30px;
    }
    .footer-bottom-divider {
        margin: 30px 0;
        gap: 30px;
    }
    .footer-bottom-copyright {
        align-items: flex-end;
        padding-right: 0;
    }
    .footer-bottom-copyright-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }
    .footer-social-buttons-container {
        gap: 18px;
    }
}

@media (min-width: 768px) {
    .footer-contact-section-heading {
        flex-direction: column;
    }
    .footer-contact-section-address {
        flex-direction: row;
        gap: 75px;
    }
}

.top-banner-image {
    width: 597px;
    height: 597px;
    border-radius: 50%;
}

.calendar-section-heading {
    margin-top: 40px;
    max-width: 51%;
}

@media (max-width: 1360px) {
    .calendar-section-heading {
        max-width: 54%;
    }
}

@media (max-width: 992px) {
    .calendar-section-heading {
        margin-top: 40px;
        max-width: 100%;
    }
}

.calendar-container {
    display: flex;
    gap: 80px;
    margin-top: clamp(50px, 6vw, 93px);
}

.calendar-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 40%;
    gap: 30px;
}

.calendar-heading {
    display: flex;
    gap: 30px;
    align-items: center;
}

.calendar-divider {
     position: relative;
     width: 200%;
     transform: translateX(-50%) scaleX(0);
     transform-origin: left;
     transition: transform 0.5s ease;
}

.calendar-text-content:has(.is-visible) {
    hr {
        transform: translateX(-50%) scaleX(1);
    }
}

.calendar-form {
    border-radius: 8px;
}

.calendar-stock-image {
    width: 761.17px;
    height: 572px;
}

@media (max-width: 1240px) {
    .calendar-container {
        flex-direction: column;
        gap: 60px;
    }

    .calendar-content {
        max-width: 100%;
        gap: 20px;
    }

    .calendar-heading {
        margin-bottom: 20px;
    }
}

.contact-methods {
    display: flex;
    gap: 25px;
    margin-top: 43px;
}

.contact-method-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    align-items: center;
    background-color: var(--color--gray50);
    color: var(--color--black);
    padding: 45px 30px 40px;
    gap: 30px;
    transition: background-color 0.3s ease-out, color 0.3s ease-out;
}

.contact-method-card img {
    transition: filter 0.3s ease-out;
}

.black-on-hover {
    transition: background-color 0.3s ease-out, color 0.3s ease-out;
}

.black-on-hover:hover {
    background-color: var(--color--black);
    color: var(--color--white);
}

.black-on-hover:hover img {
    filter: brightness(0) invert(1);
}

.black-on-hover i {
    transition: color 0.3s ease-out;
}

.black-on-hover:hover i {
    color: var(--color--white);
}

.black-on-hover:hover .btn {
    border: none;
    background-color: var(--color--blue);
    color: var(--color--white);
    transition: all 0.3s ease-out;

    &:hover {
        background-color: var(--color--yellow);
        color: var(--color--black);
    }
}

.contact-method-card-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
}

@media (max-width: 992px) {
    .contact-methods {
        flex-direction: column;
        align-items: center;
    }

    .contact-method-card-icon {
        width: 40px;
        height: auto;
    }

    .contact-method-card {
        width: min(691.2px, 100%);
        gap: 25px;
    }

    .contact-method-card-title {
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .contact-method-card button,
    .contact-method-card > a {
        width: 100%;
    }
}

.black-cards-grid-heading {
    display: flex;
    flex-direction: column;
    gap: 37px;
    max-width: 60%;
}

.black-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.black-cards-grid-item {
    position: relative;
    background-color: var(--color--black);
    color: var(--color--white);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 15px;
    padding: 40px 30px 40px;
    transition: background-color 0.3s ease, color 0.3s ease
}

.black-cards-grid-item.active {
    background-color: var(--color--gray50);
    color: var(--color--black);
}

.black-cards-grid-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://updata.ca/wp-content/uploads/2025/07/gradient-card.png');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.3s ease-in;
    pointer-events: none;
}

.black-cards-grid-item.active:hover::before {
    opacity: 1;
}

.black-cards-grid-item.active > * {
    position: relative;
    z-index: 1;
}

.black-cards-grid-item.active button {
    transition: border 0.3s ease, color 0.3s ease;
}

.black-cards-grid-item.active:hover button {
    border: 1px solid var(--color--black);
    color: var(--color--black);
}

.black-cards-grid-item.active img {
    transition: filter 0.3s ease-in;
}

.black-cards-grid-item.active:hover img {
    filter: grayscale(100%) brightness(0.4) contrast(1.5) hue-rotate(0deg);
}

.black-card i,
.black-cards-grid-item i {
    font-size: 60px;
    color: var(--color--gray700);
}

p.fg-blue i,
.service-post-cards i {
    color: var(--color--blue);
}

.black-cards-grid-icon {
    width: 65px;
}

@media (max-width: 992px) {
    .black-cards-grid-heading {
        max-width: 100%;
    }

    .black-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .black-cards-grid-icon {
        width: 55px;
    }

    .black-card i,
    .black-cards-grid-item i {
        font-size: 50px;
    }
}

@media (max-width: 768px) {
    .black-cards-grid {
        grid-template-columns: 1fr !important;
    }

    .black-cards-grid-item {
        gap: 20px;
    }

    .black-cards-grid-icon {
        width: 45px;
    }
}

.black-cards-section {
    display: flex;
    flex-direction: column;
    margin: 130px 0;
    gap: 125px;
}

.black-cards-heading {
    max-width: 57%;
}

.black-cards-container {
    display: flex;
    gap: 30px;
}

.black-card {
    flex: 1;
    min-height: 195px;
    background-color: var(--color--black);
    color: var(--color--white);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;
}

.filter-dark-gray {
    filter: brightness(0) saturate(100%) invert(29%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(89%);
}

.filter-blue {
    filter: brightness(0) saturate(100%) invert(21%) sepia(100%) saturate(2000%) hue-rotate(220deg) brightness(85%) contrast(107%);
}

@media (max-width: 768px) {
    .black-cards-section {
        margin: 60px 0 80px 0;
        gap: 60px;
    }

    .black-cards-heading {
        max-width: 80%;
    }

    .black-cards-container {
        flex-direction: column;
    }
}

.section-procedes {
    padding-top: 72px;
}

.procedes-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: min(6vw, 72px);
}

.procedes-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
    flex: 0.4;
}

.procedes-container--secteur {
    margin-top: calc(var(--spacing--section) + 80px);
}

.procedes-content--secteur {
    flex: 0.8;
}

.procedes-divider {
    width: 0;
    position: absolute;
    left: 0;
    top: 0;
    transition: width 0.5s ease;

    &.is-visible {
        width: 45%;
    }
}

.besoin-results-heading {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 60px;
    margin-bottom: 22px;

    h2 {
        transform: translateX(-100%);
        transition: transform 0.5s ease;
    }

    hr {
        position: absolute;
        width: 100vw;
        transform: translateX(100%);
        transition: transform 0.5s ease;
    }

    &.is-visible {
        h2 {
            transform: translateX(0);
        }

        hr {
            transform: translateX(0);
        }
    }
}

.procedes-accordion {
    flex: 0.49;
}

@media (max-width: 992px) {
    .section-procedes {
        padding-top: 48px;
    }

    .procedes-container {
        flex-direction: column;
        gap: 94px;
    }

    .procedes-container--secteur {
        margin-top: var(--spacing--section);
    }

    .procedes-content {
        gap: 25px;
    }

    .procedes-divider {

        &.is-visible {
            width: 90vw;
        }
    }

    .procedes-ia-banner {
        margin-top: -10%;
    }
}

@media (max-width: 768px) {
    .procedes-container {
        gap: 70px;
    }
}

.section-procedes-histoire {
    padding-top: 300px;
}

.procedes-histoire-text {
    width: 65%;
}

.procedes-histoire-container {
    display: flex;
    flex-direction: column;
    gap: 66px;
    margin-top: 71px;
}

.procedes-histoire {
    display: flex;
    justify-content: space-between;
}

.procedes-histoire-heading {
    flex: 0.42;
    display: flex;
    flex-direction: column;
    gap: 46px;
}

@media (max-width: 992px) {
    .procedes-histoire-container {
        gap: 30px;
    }

    .procedes-histoire-text {
        width: 80%;
    }

    .procedes-histoire {
        flex-direction: column;
        gap: 50px;
    }

    .procedes-histoire-heading {
        gap: 25px;
    }

    .procedes-histoire-heading button {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    .section-procedes-histoire {
        padding-top: min(690px, 105vw);
    }
}

@media (max-width: 520px) {
    .section-procedes-histoire {
        padding-top: 110vw;
    }
}

.livre-blanc-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "image content"
        "image content"
        "image cta-button";
    grid-column-gap: min(8vw, 100px);
    grid-row-gap: 35px;
}

.livre-blanc-image-area {
    grid-area: image;
    display: flex;
    align-items: center;
}

.livre-blanc-content-area {
    grid-area: content;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 35px;
}

.livre-blanc-cta-area {
    grid-area: cta-button;
}

.livre-blanc-image {
    width: 100%;
}

@media (max-width: 992px) {
    .livre-blanc-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "image"
            "cta-button";
    }

    .livre-blanc-image-area {
        justify-content: center;
    }

    .livre-blanc-cta-area {
        justify-content: center;
    }

    .livre-blanc-image {
        width: 80%;
    }
}

@media (max-width: 768px) {
    .livre-blanc-button {
        width: 100%;
    }
}

.premier-ia-reussite-heading {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     gap: 160px;

     hr {
         transform: translateX(100%);
         transition: transform 0.5s ease;
     }

     &.is-visible {
         hr {
             transform: translateX(0);
         }
     }
}

.black-caroussel-section {
    margin-top: 113px;
    display: flex;
    align-items: flex-end;
    gap: 71px;
}

.black-caroussel-text {
    display: flex;
    flex-direction: column;
    gap: 35px;
    min-width: 38%;
}

.black-caroussel-arrows {
    position: absolute;
    right: 0;
    bottom: 235px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
}

.black-caroussel-wrapper {
    overflow-x: hidden;
}

.black-caroussel {
    display: flex;
    gap: 30px;
}

.black-caroussel-item {
    flex: 1;
    height: 195px;
    min-width: clamp(206px, 60vw, 362px);
    background-color: var(--color--black);
    color: var(--color--white);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    justify-content: center;
    align-items: center;
    padding: 30px 20px;

    i {
        font-size: 50px;
        color: var(--color--gray700);
    }
}

@media (max-width: 992px) {
    .black-caroussel-section {
        margin-top: clamp(50px, 8vw, 113px);
        flex-direction: column;
        align-items: flex-start;
    }

    .black-caroussel-text {
        gap: 20px;
    }

    .black-caroussel-arrows {
        bottom: 215px;
    }
}

@media (max-width: 768px) {
    .black-caroussel-arrows {
        bottom: 50%;
    }

    .black-caroussel-item {
        height: unset;
        min-height: 195px;
        padding: 25px 15px;
    }
}

.step-cards-tall-title {
    margin: 144px 0 78px;
}

.step-cards-tall-container {
    width: 100%;
    display: flex;
    gap: 30px;
}

.step-card-tall {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 28px;
    background-color: var(--color--white);
    border-radius: 8px;
    position: relative;
    padding: 50px 20px 30px;
}

.step-card-tall-circle {
    position: absolute;
    top: -25px;
    border-radius: 50%;
    background-color: var(--color--black);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-card-tall-divider {
    width: 100%;
}

.step-card-tall-content {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

@media (max-width: 1100px) {
    .step-cards-tall-title {
        margin: 80px 0 60px;
    }

    .step-cards-tall-container {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .step-card-tall {
        max-width: 691.2px;
    }
}

@media (max-width: 768px) {
    .step-cards-tall-container {
        gap: 50px;
    }

    .step-card-tall {
        width: 100%;
    }
}

.section-2columns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 50px;
    gap: 40px;
}

.section-2columns--image {
    border-radius: 8px;
    overflow: hidden;
    width: min(50vw, 555px);
}

.section-2columns--content {
    max-width: 43%;

    &:has(.is-visible) {
        hr {
            transform: translateX(0);
        }
    }
}

.section-2columns--content > h2 {
    margin-bottom: 25px;
}

.section-2columns--content > p {
    padding-right: var(--padding--section);
}

.section-2columns--content > hr {
    margin: 41px 0 27px 0;
    width: 100vw;
    transform: translateX(100%);
    transition: transform 0.5s ease;
}

.section-2columns--content a {
    margin-top: 25px;
}

@media (max-width: 992px) {
    .section-2columns {
        flex-direction: column;
        align-items: center;
        margin-top: 30px;
    }

    .section-2columns--image {
        width: min(100%, 555px);
    }

    .section-2columns--content {
        max-width: 100%;
    }

    .section-2columns--content > h2 {
        margin-bottom: 30px;
    }
}

.projets-grid,
.projets-grid-item-wrapper{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 76px 30px;
}

.projets-grid-item {
    display: flex;
    flex-direction: column;
}

.projets-grid-item .wp-block-post-featured-image {
    border-radius: 8px;
    overflow: hidden;
}

.projets-grid-item .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 644 / 353;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.projets-grid-item-divider {
    margin-bottom: 8px;
    width: 0;
    visibility: hidden;
    border: none;
    height: 1px;
    background: var(--color--black);

    transition: width 0.3s ease-in, visibility 0.3s;
}

.projets-grid button {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s ease, opacity 0.3s ease;
}

ul.projets-grid > .wp-block-post:hover .wp-block-post-featured-image img,
.projets-grid-item:hover .wp-block-post-featured-image img {
    transform: scale(1.03);
}

ul.projets-grid > .wp-block-post:hover > .projets-grid-item-divider,
.projets-grid-item:hover > .projets-grid-item-divider {
    visibility: visible;
    width: 100%;
}

ul.projets-grid > .wp-block-post:hover button,
.projets-grid-item:hover button {
    visibility: visible;
    opacity: 1;
}

.projets-grid-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 68px;
}

.blog-pagination {
    display: flex;
    gap: 20px;
}

@media (max-width: 992px) {
    .projets-grid {
        gap: 45px 30px;
    }
}

@media (max-width: 768px) {
    .projets-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.history-cards-section {
    display: flex;
    flex-direction: column;
    margin-top: 278px;
    gap: 50px;
}

.history-cards-container {
    display: flex;
    gap: 19px;
}

.history-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.history-card figure {
    border-radius: 8px;
    overflow: hidden;
}

.history-card-image {
    width: 100%;
    height: 353px;
    transition: transform 0.3s ease;
}

.history-card-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.history-card-category {
    background-color: var(--color--gray200);
    font-family: var(--font-family--secondary);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.35;
    border-radius: 5px;
    padding: 4px 11px 5px;
    margin-block: 16px;
    width: fit-content;
}

.history-card-divider {
    width: 0;
    visibility: hidden;
    transition: width 0.3s ease, visibility 0.3s ease;
}

.history-card button {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s ease, opacity 0.3s ease;
}

.history-card:hover .history-card-image {
    transform: scale(1.03);
}

:is(.wp-block-post, .projets-grid-item, .history-card):hover .history-card-category {
    background-color: var(--color--gray50);
}

:is(.wp-block-post, .projets-grid-item, .history-card):hover .history-card-category.bg-black {
    background-color: var(--color--gray800);
}

.history-card:hover .history-card-divider {
    visibility: visible;
    width: 100%;
}

.history-card:hover button {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 992px) {
    .history-cards-section {
        margin-top: 100px;
    }

    .history-cards-container {
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }

    .history-card-image {
        height: unset;
    }
}

@media (max-width: 768px) {
    .history-cards-container {
        width: 100%;
    }
}

.article-category {
    padding: 7px 11px;
    border-radius: 5px;
    background-color: var(--color--gray50);
    width: fit-content;
    font-family: var(--font-family--secondary);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.35;
}

.hero-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.hero-banner > h4 {
    font-size: 25px;
    font-weight: 300;
}

.hero-banner a {
    margin-top: 30px;
}

.hero-banner--balls-container {
    position: relative;
}

.hero-banner--left-ball-container {
    position: absolute;
    left: 5%;
}

.hero-banner--right-ball-container {
    position: absolute;
    right: 0;
    top: 60px;
    transform: translate(50%, 0) rotate(90deg);
}

.hero-banner--hero-image {
    width: 100%;
}

.hero-banner--white-banner {
     background-color: var(--color--white);
     color: var(--color--black);
     border-radius: 8px;
     width: 100%;
     margin-top: -12px;
     z-index:1;
     position:relative;
}

@media (max-width: 768px) {
    .hero-banner > h4 {
        font-size: 18px;
    }
    .hero-banner--white-banner {
        margin-top: 36px;
        margin-bottom: 470px;
    }
    .hero-banner--hero-image {
        width: unset;
        height: clamp(217px, 29vw, 289px);
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .hero-banner--balls-container {
        position: unset;
    }
    .hero-banner--left-ball-container {
        top: 25px;
        left: 0;
        transform: translateX(-50%);
    }
    .hero-banner--right-ball-container {
        top: max(51vw, 270px);
        z-index: 1;
    }
}

@media (max-width: 694px) {
    .hero-banner--white-banner {
        margin-bottom: 64vw;
    }
}

@media (max-width: 550px) {
    .hero-banner--white-banner {
        margin-bottom: 58vw;
    }
}

@media (max-width: 436px) {
    .hero-banner--white-banner {
        margin-bottom: 48vw;
    }
}

@media (max-width: 459px) {
    .hero-banner--right-ball-container {
        top: 360px;
    }
}

.hero--inner {
    margin: 70px 74px 140px;
    display: flex;
    gap: min(179px, 11vw);
}

.hero--content {
    display: flex;
    flex-direction: column;
    flex: 1.4;
    gap: 35px;
}

.hero-links-container {
    flex: 1;
}

ul.updata-hero-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

ul.updata-hero-links li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 100px;
    padding: 10px 15px;
    cursor: pointer;
    width: 100%;
    gap: 15px;
}

ul.updata-hero-links li::after {
    content: "";
    width: 32px;
    height: 14px;
    background-image: url("https://updata.ca/wp-content/uploads/2025/06/ArrowRight.svg");
    background-size: 32.5px 14px;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

ul.updata-hero-links span {
    font-family: var(--font-family--secondary);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
}

ul.updata-hero-links li:hover {
    background-color: var(--color--gray800);
}

@media (max-width: 992px) {
    .hero--inner {
        flex-direction: column;
        gap: 94px;
        margin: 46px 0 90px;
        align-items: flex-start;
    }

    .hero--content {
        gap: 22px;
    }

    .hero-links-container {
        width: 100%;
    }
}

.homepage-story--container {
    display: flex;
    align-items: flex-end;
    gap: 80px;
    margin-top: 20px;
    margin-bottom: 40px;
}

.homepage-story--image {
    height: auto;
    width: 50%;
    border-radius: 8px;
    object-fit: cover;
}

.homepage-story--title {
    margin-top: 75px;
}

.homepage-story--buttons {
    display: flex;
    flex-direction: column;
    gap: 75px;
    margin-top: 20px;
}

.homepage-story--button {
    color: var(--color--blue);
    border: 1px solid var(--color--blue);
    background-color: transparent;
}

@media (max-width: 992px) {
    .homepage-story--container {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        margin-top: 40px;
        margin-bottom: 46px;
    }

    .homepage-story--image {
        width: 100%;
    }

    .homepage-story--divider {
        position: relative;
    }

    .homepage-story--title {
        margin-top: 30px;
    }

    .homepage-story--buttons {
        flex-direction: row;
        gap: unset;
        justify-content: space-between;
        align-items: center;
    }

    .homepage-story--button-text {
        display: none;
    }

    .homepage-story--buttons > .btn-arrow:not(:hover) {
        filter: brightness(0) saturate(100%) invert(27%) sepia(96%) saturate(1729%) hue-rotate(215deg) brightness(96%) contrast(101%);
    }
}

.language-button {
    font-family: var(--font-family--secondary);
    font-size: 17px;
    font-style: normal;
    line-height: 1.35;
    font-weight: 400;
    background-color: transparent;
    border: none;
    color: var(--color--white);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.updata-megamenu-mobile span,
.language-button:hover {
    font-size: 19px;
}

.logo-caroussel-container {
    display: flex;
    align-items: center;
    gap: 60px;
    width: 100%;
    z-index: 1;
}

.logo-caroussel-wrapper {
    overflow: hidden;
}

.logo-caroussel-grid {
    display: grid;
    grid-auto-flow: column;
    gap: 10px 50px;
    width: max-content;
    justify-items: center;
    align-items: center;
}

.logo-caroussel-grid img {
    filter: grayscale(100%);
}

@media (max-width: 992px) {
    .logo-caroussel-wrapper {
        margin-inline: auto;
    }
    .logo-caroussel-grid {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, 1fr);
    }

    .logo-caroussel-grid img {
        max-width: 20vw;
    }
}

.logo-caroussel-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 57px;
}

.testimony-cards-container {
    padding-top: var(--spacing--section);
    margin-bottom: -135px;
}

.testimony-cards-arrows {
    display: none;
}

.testimony-cards-inner {
    display: flex;
    gap: 30px;
}

.testimony-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 35px;
    height: fit-content;
    align-items: center;
    background-color: var(--color--gray50);
    border-radius: 8px;
    padding-block: 40px;

    --max-image-width: 80%;
    --max-image-height: 107px;
}

.testimony-card-image {
    max-height: var(--max-image-height);
    max-width: var(--max-image-width);
    z-index: 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.testimony-card-content {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-inline: 35px;
}

@media (max-width: 992px) {
    .logo-caroussel-section {
        align-items: flex-start;
        margin-top: 0;
    }

    .testimony-cards-arrows {
        display: flex;
        justify-content: flex-end;
        gap: 15px;
        margin-bottom: clamp(10px, 3vw, 30px);
    }

    .testimony-cards-container {
        margin-bottom: -50px;
    }

    .testimony-cards-inner {
        gap: 20px;
    }

    .testimony-card {
        flex: unset;
        min-width: clamp(262px, 60vw, 420px);
    }

    .testimony-card-content {
        padding-inline: 25px;
    }
}

@media (max-width: 768px) {
    .testimony-cards-container {
        margin-bottom: 0;
    }
}

.notre-approche-heading {
     display: flex;
     flex-direction: column;
     gap: 14px;
}

.notre-approche-heading h2 {
    transform: translateX(-100%);
    transition: transform 0.5s ease-out;
}

.notre-approche-heading hr {
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s ease-out;
}

.notre-approche-heading .is-visible {
    h2 {
        transform: translateX(0);
    }

    hr {
        transform: scaleX(1);
    }
}

.notre-approche-paragraph {
    margin-top: 30px;
    width: 66%;
}

.step-cards-container {
    margin-top: 62px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 47px 30px;
}

.step-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.step-card-circle {
    position: absolute;
    top: -25px;
    border-radius: 50%;
    background-color: var(--color--black);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-card-content {
    width: 100%;
    display: flex;
    height: 100%;
    padding: 45px 35px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 10px;
    border-radius: 8px;
    background: var(--color--white);
}

.step-cards-button-container {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     margin-top: 60px;
}

@media (max-width: 992px) {
    .notre-approche-paragraph {
        width: 100%;
    }

    .step-cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .notre-approche-heading {
        gap: 0;
    }

    .notre-approche-paragraph {
        margin-top: 20px;
    }

    .step-cards-container {
        grid-template-columns: 1fr;
    }

    .step-card-content {
        padding: 35px 30px;
    }

    .step-card-circle {
        width: max(40px, 7vw);
        height: max(40px, 7vw);
    }

    .step-cards-button-container {
        margin: 40px 0 13px 0;

        div, .btn {
            width: 100%;
        }
    }
}

.contact-form-section {
    display: flex;
    align-items: flex-start;
    margin-top: 71px;
    gap: 82px;
}

/* variables for the hubspot form */
.hs-form-html {
    --hsf-background__padding: 0px;
    --hsf-button__font-weight: 500;
    --hsf-button--hover__background-color: var(--color--yellow);
    --hsf-button--hover__color: var(--color--black);
}

.meetings-iframe-container {
    width: 100%;
    margin: -16px -50px -32px 0;  /* To cancel the calendar's padding within the iframe */
}

@media (max-width: 992px) {
    .contact-form-section {
        flex-direction: column;
        align-items: center;
        margin-top: 35px;
    }
}

.form-parlez-nous {
    margin-top: var(--padding--section);
}

.form-parlez-nous-heading {
    display: flex;
    justify-content: space-between;
}

.form-parlez-nous-divider {
    margin: 36px 0;
}

.form-parlez-nous-heading > * {
    flex: 1;
}

@media (max-width: 768px) {
    .form-parlez-nous-heading {
        flex-direction: column;
        gap: 25px;
    }

    .form-parlez-nous-divider {
        margin: 30px 0;
    }
}

.banner-regular {
    min-height: 436px;
    background-color: var(--color--black);
    color: var(--color--white);
    max-width: 1440px;
}

.banner-tall {
    height: 670px;
    background-color: var(--color--black);
    color: var(--color--white);
    max-width: 1440px
}

.black-banner-container {
    display: flex;
    justify-content: space-between;
}

.black-banner {
    position: relative;
    display: flex;
    align-items: center;
    padding: clamp(36px, 10vw, 120px) 0;
}

.black-banner-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 45%;
}

.black-banner-content-large {
    display: flex;
    flex-direction: column;
    gap: 45px;
    width: min(48vw, 691px);
}

.contact-banner-content {
    max-width: 40%;
}

.black-banner-text {
    display: flex;
    flex-direction: column;
    gap: 19px;
    width: 80%;
}

.black-banner-icon {
    width: clamp(40px, 7vw, 88px);
    filter: grayscale(100%);
}

.black-banner-image-container {
    position: absolute;
    top: 0;
    right: 0;
}

.black-banner-image-container img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.procedes-banner {
    padding-top: clamp(70px, 12vw, 83px);
}

.secteur-banner {
    padding-bottom: clamp(120px, 14vw, 175px);
}

.procedes-banner-content {
    gap: 48px;
    max-width: 70%;
}

.procedes-banner-text {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

@media (max-width: 1333px) {
    .procedes-banner-image-container {
        right: -64px;
    }
}

@media (max-width: 1240px) {
    .procedes-banner-image-container {
        right: -128px;
    }
}

@media (max-width: 1172px) {
    .procedes-banner-image-container {
        right: -200px;
    }
}

@media (max-width: 992px) {
    .black-banner-image-container {
        top: -22px;
        height: max(74vw, 470px);
    }

    .procedes-banner-image-container {
        right: -64px;
    }

    .procedes-banner-content {
        gap: 25px;
        max-width: 55%;
    }

    .procedes-banner-text {
        gap: 20px;
    }

    .contact-banner-content {
        max-width: 60%;
    }
}

@media (max-width: 768px) {
    .procedes-banner-image-container {
        top: 0;
        right: min(-20vw, -160px);
    }

    .procedes-banner-content {
        max-width: 65%;
    }

    .procedes-banner .black-banner-icon {
        transform: translateY(10px);
    }
}

.black-banner-image {
    position: absolute;
    right: 0;
    top: 0;
}

.banner-background-image {
    height: 927.67px;
}

@media (max-width: 1336px) {
    .banner-background-image {
        top: -41px;
    }
}

@media (max-width: 992px) {
    .banner-background-image {
        right: -100px;
        height: 727.67px;
    }
}

@media (max-width: 768px) {
    .banner-background-image {
        display: none;
    }
}

.banner-round-image {
    width: clamp(245px, 35vw, 500px);
    height: clamp(245px, 35vw, 500px);
}

.banner-round-image-small {
    width: clamp(215px, 37vw, 524px);
    height: clamp(215px, 37vw, 524px);
    position: absolute;
    right: 0;
    top: 20px;
}

.black-banner-circle-image {
    position: absolute;
    top: 145px;
    left: 29.5%;
    width: 37%;
    transform: rotate(180deg);
}

.banner-image-large {
    display: block;
    width: clamp(321px, 45vw, 597px);
}

.banner-image-container-large {
    position: absolute;
    right: 0;
    transform: translate(0, 12%);
}



.banner__si-on-parlait h1,
.banner__mon-premier-ia h1,
.banner__vos-besoins h1 {
    text-wrap: nowrap;
}

@media (max-width: 992px) {
    .banner__mon-premier-ia h3,
    .banner__vos-besoins h3 {
        text-wrap: nowrap;
    }
}

.banner__mon-premier-ia .banner-image-container-large,
.banner__vos-besoins .banner-image-container-large {
    --image-width: clamp(321px, 45vw, 597px);
    transform: translateY(50%);
    bottom: 0;
}

.banner__si-on-parlait .banner-image-container-large {
    --image-width: clamp(321px, 42vw, 597px);
    transform: translateY(38%);
    bottom: 0;
    right: var(--padding--section);
}

.banner__vos-besoins .banner-image-container-large {
    --image-offset: 8px;
    left: calc(min(1440px, 100vw) - var(--image-width) - var(--image-offset) - var(--padding--section));
}

.banner__mon-premier-ia .banner-image-container-large {
    --image-offset: 31px;
    right: calc(var(--padding--section) + var(--image-offset));
}

.banner-image-wrapper {
    position: absolute;
    left: var(--image-offset);
    bottom: -1px;
    width: var(--image-width);
}

.banner__vos-besoins .banner-image-large {
    display: block;
    position: relative;
    z-index: 1;
}

.banner__mon-premier-ia .banner-image-large {
    position: absolute;
    right: calc(-1 * var(--image-offset));
    bottom: -1px;
    width: var(--image-width);
}

.banner__si-on-parlait .banner-image-large {
    width: var(--image-width);
}

.banner__mon-premier-ia .banner--gradient-ball,
.banner__vos-besoins .banner--gradient-ball {
    display: block;
    width: min(10vw, 141px);
    z-index: 1;
    position: relative;
}

.banner__vos-besoins .gradient-ball__top-right {
    position: absolute;
    top: 15px;
    right: 27px;
    transform: rotateY(180deg) rotate(90deg);
}

.projets-banner-container {
    gap: 115px;
}

.blog-post-banner {
    padding: 60px 0 100px;
}

.blog-post-spacing--large {
    margin-bottom: 40px;
}

.blog-post-content {
    max-width: 63.5%;
}

.blog-post-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-post-list {
    display: flex;
    flex-direction: column;
    gap: 45px;
}

.blog-post-list-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-post-list-item > ul {
    list-style-type: disc;
    list-style-position: inside;
}

.blog-post-list-item > ul li {
    position: relative;
    padding-left: 10px;
}

.blog-post-list-item > ul li::marker {
    font-size: 0.7em;
}

.blog-post-text {
    white-space: pre-line;
}

.blog-post-divider {
    margin: 100px 0 40px;
}

.blog-post-planet {
    position: absolute;
    right: 0;
    transform: translateY(760px);
}

.blog-post-cta {
    margin-top: 65px;
    background: var(--color--gray50);
    border-radius: 8px;
    padding: clamp(25px, 6vw, 50px) clamp(45px, 8vw, 90px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(15px, 4vw, 30px);
}

@media (max-width: 1196px) {
    .blog-post-planet {
        right: -100px;
    }
}

@media (max-width: 992px) {
    .blog-post-planet {
        width: max(30%, 250px);
    }
}

@media (max-width: 543px) {
    .blog-post-planet {
        right: -140px;
    }
}

.blog-banner-content {
    max-width: 60%;
    position: relative;
    z-index: 2;
}

.blog-banner-filter-container {
    margin-top: 84px;
}

.blog-banner-filter-heading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-banner-filter-heading > h4 {
    font-size: 14px;
}

.blog-banner-filter-categories {
    display: flex;
    margin-top: 19px;
    flex-wrap: wrap;
    gap: 12px;
}

.blog-banner-filter-category {
    padding: 4px 11px 5px;
    border-radius: 5px;
    background-color: var(--color--gray800);
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.blog-banner-filter-category:hover:not(.active) {
    background-color: var(--color--gray700);
    transform: scale(1.05);
}

.blog-banner-filter-category.active {
    background-color: var(--color--blue);
}

.blog-banner-category-date {
    display: flex;
    align-items: center;
    gap: 25px;
}

.blog-banner-category {
    font-family: var(--font-family--secondary);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.35;
    background: var(--color--gray800);
    border-radius: 5px;
    padding: 4px 11px 5px;

}

.blog-banner-author-container {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 55px;
}

.blog-banner-author {
    font-family: var(--font-family--secondary);
    font-weight: 500;
    font-style: normal;
    font-size: 17px;
    line-height: 1.35;
}

.blog-banner-author > strong {
    font-weight: 700;
    font-style: italic;
}

.planet-banner-content {
    gap: 30px;
}

@media (max-width: 992px) {
    .projets-banner-container {
        gap: 60px;
    }

    .planet-banner-content {
        max-width: 100%;
    }

    .planet-banner-content > p {
        width: 65%;
    }

    .projets-banner-content > p {
        width: 100%;
    }

    .black-banner-content-large {
        gap: 25px;
    }

    .black-banner-text {
        gap: 15px;
    }
}

@media (max-width: 768px) {
    .black-banner-container {
        flex-direction: column;
        padding-bottom: 50vw;
    }

    .black-banner-content-large {
        width: 100%;
    }

    .black-banner-text {
        width: unset;
    }

    .banner-image-container-large {
        right: unset;
        bottom: 0;
        transform: translateY(min(55vw, 320px));
    }

    .banner__si-on-parlait .banner-image-container-large,
    .banner__vos-besoins .banner-image-container-large,
    .banner__mon-premier-ia .banner-image-container-large {
        --image-width: min(calc(100vw - 2 * var(--padding--section)), 597px);
    }

    .banner__si-on-parlait .banner-image-container-large {
        left: calc(50vw - 0.5 * var(--image-width));
    }

    .banner__vos-besoins .banner-image-container-large {
        left: calc(50vw - var(--image-offset) - 0.5 * var(--image-width));
    }

    .banner__mon-premier-ia .banner-image-container-large {
        right: calc(50vw + var(--image-offset) - 0.5 * var(--image-width));
    }

    .banner__si-on-parlait .banner--gradient-ball,
    .banner__mon-premier-ia .banner--gradient-ball,
    .banner__vos-besoins .banner--gradient-ball {
        width: 18.33vw;
    }

    .banner__mon-premier-ia .black-banner-container {
        padding-bottom: 62vw;
    }

    .banner__vos-besoins .black-banner-container {
        padding-bottom: 534px;
    }

    .banner-image-large {
        width: 100%;
    }

    .planet-banner-container {
        align-items: flex-start;
        padding-bottom: 0;
    }

    .projets-banner-card {
        max-width: 100%;
    }
}

@media (max-width: 662px) {
    .banner__vos-besoins .black-banner-container {
        padding-bottom: 80vw;
    }
}

@media (max-width: 565px) {
    .banner-round-image-small {
        transform: translateX(calc(var(--padding--section) + 35%));
    }

    .banner__mon-premier-ia .black-banner-container {
        padding-bottom: 57vw;
    }
}

@media (max-width: 443px) {
    .banner__mon-premier-ia .black-banner-container {
        padding-bottom: 50vw;
    }
}

.banner-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60px 80px 60px;
}

.banner-content {
    display: flex;
    flex-direction: column;
    width: min(60%, 500px);
    gap: 25px;
}

.banner-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 768px) {
    .banner__mon-premier-ia h2 {
        text-wrap: nowrap;
    }
}

.banner-image-container {
    position: absolute;
    bottom: 0;
    right: 34%;
    transform: translateY(50%);
}

.banner--gradient-ball__premier-ia {
    display: block;
    width: min(10vw, 141px);

    @media (max-width: 768px) {
        animation: tilt var(--dur-tilt, 18s) ease-in-out var(--delay-tilt, 0s) infinite;
    }
}

.banner-image {
    width: 370%;
    position: absolute;
    bottom: -40px;
    left: 10px;
}

.banner--gradient-ball {
    width: 25%;
}

@media (max-width: 1143px) {
    .banner-image-container {
        right: 32%;
    }
    .banner--gradient-ball__premier-ia {
        width: 9vw;
    }
}

@media (max-width: 992px) {
    .banner-image-container {
        right: 34%;
    }
    .banner--gradient-ball__premier-ia {
        width: 10vw;
    }
}

@media (max-width: 768px) {
    .banner-container {
        flex-direction: column;
        padding: 32px 27px 106px;
    }
    .banner-content {
        width: 100%;
        gap: 25px;
    }
    .banner-text {
        gap: 20px;
    }
    .banner-image-container {
        position: absolute;
        width: calc(100% - 15vw);
        right: 50%;
        top: 20%;

        transform: translate(50%, 72%);
    }
    .banner-image {
        width: min(100%, 521px);
        display: block;
        position: relative;
        bottom: unset;
        left: 50%;
        transform: translateX(-50%);
    }
    .banner--gradient-ball__premier-ia {
        position: absolute;
        width: 25%;

        animation: tiltTranslateY var(--dur-tilt, 18s) ease-in-out var(--delay-tilt, 0s) infinite;
    }
    .banner--gradient-ball {
        width: 25%;
    }
}

.circle {
    width: 10px;
    height: 10px;
    background-color: var(--color--orange);
    border-radius: 50%;
}

.section-title-container {
    width: fit-content; /* So the animation doesn't change the title layouts */
}

.section-title {
    position: relative;
    padding-left: 1.4rem;
    white-space: nowrap;
    overflow: hidden;
    margin-inline: auto;
    border-right: .15em solid var(--color--orange);
}

.section-title.is-visible {
    --typing-dur: 0.8s;  /* typing duration */
    --hold-dur: 1s;      /* how long the caret stays after typing */
    --caret-lifetime: calc(var(--typing-dur) + var(--hold-dur));

    animation:
        typing var(--typing-dur) steps(40, end) forwards,
        blink-caret 0.5s step-end infinite,
        remove-caret 0s linear var(--caret-lifetime) forwards;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    50% { border-right-color: transparent; }
}

@keyframes remove-caret {
    to { border-right-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .section-title.is-visible {
        animation: none;
        border-right: 0;
    }
}

.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: var(--color--orange);
    border-radius: 50%;
}

@media (max-width: 768px) {
    .section-title::before {
        width: 8px;
        height: 8px;
    }
}

.half-overlap-down {
    transform: translateY(50%);
    position: relative;
    z-index: 1;
}

.half-overlap-up {
    transform: translateY(-50%);
}

.flex-row {
    display: flex;
    align-items: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blurry {
    opacity: 0.8;
    background-filter: blur(15px);
}

.padding-card {
    padding: 20px;
}

.rounded-8 {
    border-radius: 8px;
}

.rounded-full {
    border-radius: 50%;
}

.is-relative {
    position: relative;
}

.is-absolute {
    position: absolute;
}

.full-width {
    width: 100%;
}

.half-width {
    width: 50%;
}

.no-overflow-x {
    overflow-x: hidden;
}

.rotate-clockwise {
    transform: rotate(90deg);
}

.first-layer {
    z-index: 1;
}

.second-layer {
    z-index: 2;
}

.front-img-on-orange {
    margin-top: -300px;
}

.section-onglets {
    padding-top: var(--spacing--section);
}

.onglets-menu-heading {
    padding: var(--spacing--banner) 0 86px;
}

@media (max-width: 1336px) {
    .onglets-menu-heading {
        padding: calc(var(--spacing--banner) + 30px) 0 86px;
    }
}

.onglets-menu-divider {
    width: 100vw;
}

.onglets-menu {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.onglet-icon {
    width: 38px;
    height: 38px;
    margin-right: 30px;
}

.onglet-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.onglet-item {
    display: flex;
    width: clamp(500px, 42vw, 600px);
    height: 123px;
    padding: 30px 80px 30px 60px;
    align-items: center;
    margin-left: -60px;
    border-radius: 0 100px 100px 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

@media (max-width: 1152px) {
    .onglet-container.active .onglet-icon {
        margin-right: 5px;
    }
    .onglet-container.active .onglet-item {
        padding: 20px 40px 20px 40px;
    }
    .onglet-container.active .onglet-item-text {
        gap: 15px;
    }
}

.onglet-item-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.onglet-item:hover {
    background-color: var(--color--gray50);
}

.onglet-container.active .onglet-item {
    gap: 15px;
    width: min(774px, 54vw);
    background-image: url(https://updata.ca/wp-content/uploads/2025/06/Frame-191.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.onglet-container.active .onglet-icon {
    filter: grayscale(100%) brightness(0.4) contrast(1.5) hue-rotate(0deg);
}

.onglet-container.active .onglet-item-text {
    gap: 30px;
    justify-content: space-between;
}

.onglet-item-button {
    display: none;
}

.onglet-container.active .onglet-item-button {
    display: flex;
}

.onglet-item-button-text {
    display: flex;
    border-radius: 100px;
    padding: 0 25px;
    text-wrap: nowrap;
    border: 1px solid var(--color--black);
    background: none;
    position: relative;
    overflow: hidden;
    transition:
        padding-right 0.3s ease,
        background-color 0.3s ease;
}

.onglet-content-container {
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 40%;
    gap: 31px;
    position: absolute;
    background: var(--color--white);
    z-index: 2;
    padding: 0 1rem 1rem;
    border-radius: 8px;
    right: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.onglet-container.active .onglet-content-container {
    opacity: 1;
    visibility: visible;
}

.onglet-content-container--divider {
    width: 100vw;
}

.onglet-content-inner {
    display: flex;
    flex-direction: column;
    gap: 38px;
    width: 75%;
}

.onglet-content-text {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.onglet-content-list {
     display: flex;
     flex-direction: column;
     gap: 15px;
}

.onglet-content-list-item {
     background-color: var(--color--gray50);
     border-radius: 5px;
     padding: 15px 20px;
}

.onglet-content-button {
    display: none;
}

@media (max-width: 992px) {
    .onglet-container {
        flex-direction: column;
        gap: 25px;
    }

    .onglets-menu-heading {
        padding-bottom: 0;
    }

    .onglets-menu-divider {
        margin: clamp(28px, 8vw, 43px) 0;
    }

    .onglets-menu {
        align-items: center;
    }

    .onglet-item {
        width: 100%;
        height: clamp(48px, 10vw, 82px);
        border-radius: 100px;
        margin-left: 0;
        padding: 13px 20px 14px 20px;
        gap: 10px;
        background-color: var(--color--gray100);
    }

    .onglet-item:hover {
        background-color: var(--color--gray200);
    }

    .onglet-icon {
        height: 30px;
        width: auto;
        margin-right: 10px;
    }

    .onglet-item h3 {
        font-family: var(--font-family--secondary);
        font-size: clamp(15px, 3vw, 20px);
    }

    .onglet-container.active .onglet-item {
        width: 100%;
        border-radius: 100px;
        margin-left: 0;
        gap: 10px;
        background-position: center;
    }

    .onglet-item-text {
        width: 100%;
    }

    .onglet-item-button {
        display: block;
        border: none;
        background-color: transparent;
        background-image: url("https://updata.ca/wp-content/uploads/2025/06/caret_down.svg");
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
        filter: invert(1);
        transition: transform 0.3s ease;
        width: 28px;
        height: 28px;
    }

    .onglet-container.active .onglet-item-button {
        transform: rotateX(180deg);
    }

    .btn.onglet-item-button:hover {
        padding-right: 25px;
        border: initial;
        background-color: transparent;
        background-image: url("https://updata.ca/wp-content/uploads/2025/06/caret_down.svg");
        background-repeat: no-repeat;
        background-size: 30%;
        background-position: center;
        color: initial;
    }

    .btn.onglet-item-button-text::after {
        display: none;
    }

    .onglet-item-button-text {
        display: none;
    }

    .onglet-content-container {
        visibility: hidden;
        opacity: 0;
        max-height: 0;
        position: relative;
        width: 100%;
        padding: 0;
        transform: none;
        transition: visibility 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
    }

    .onglet-container.active .onglet-content-container {
        max-height: 500px;
    }

    .onglet-content-container--divider {
        display: none;
    }

    .onglet-content-inner {
        width: 100%;
        gap: 20px;
    }

    .onglet-content-text {
        gap: 16px;
    }

    .onglet-content-list {
        gap: 10px;
    }

    .onglet-content-list-item {
        padding: 12px;
    }

    .onglet-content-button {
        display: block;
        width: 100%;
        border-radius: 100px;
        border: 1px solid var(--color--blue);
        color: var(--color--blue);
        background-color: transparent;
        padding: 10px 0;
        margin-bottom: 12px;
    }
}

@media (max-width: 768px) {
    .onglets-menu-heading {
        padding-top: calc(var(--spacing--section) + 7vw);
    }

    .onglet-item-button {
        width: 20px;
        height: 20px;
    }

    .onglet-icon {
        height: 24px;
    }

    .onglet-container.active .onglet-item {
        padding: 20px 40px 20px 30px;
    }

    .onglets-menu {
        gap: 10px;
    }

    .onglet-content-container {
        padding: 0 5px;
    }
}

.fg-blue {
    color: var(--color--blue);
}

.fg-white {
    color: var(--color--white);
}

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

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

.bg-gray50 {
    background-color: var(--color--gray50);
    color: var(--color--black);
}

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

.gradient-bg {
    color: var(--color--black);
    position: relative;
    overflow: hidden;

    --drift-duration: 12s;
    --drift-scale: 1.06;

    &::before {
        content: "";
        position: absolute;
        inset: -6%;
        background: url("https://updata.ca/wp-content/uploads/2025/06/Gradient-1.png") center/cover no-repeat lightgray;
        transform-origin: center;
        transform: translate3d(0, 0, 0) scale(var(--drift-scale));
        animation: bg-drift var(--drift-duration) ease-in-out infinite;
        will-change: transform;
        z-index: 0;
        pointer-events: none;
    }

    & > * {
        position: relative;
        z-index: 1;
    }
}

@keyframes bg-drift {
    0%   { transform: translate3d(0%, 0%, 0) rotate(0deg) scale(var(--drift-scale)); }
    25%  { transform: translate3d(2%, -1%, 0) rotate(1deg) scale(var(--drift-scale)); }
    50%  { transform: translate3d(1%, 2%, 0) rotate(2deg) scale(var(--drift-scale)); }
    75%  { transform: translate3d(-2%, 1%, 0) rotate(1deg) scale(var(--drift-scale)); }
    100% { transform: translate3d(0%, 0%, 0) rotate(0deg) scale(var(--drift-scale)); }
}

@media (prefers-reduced-motion: reduce) {
    .gradient-bg::before { animation: none; }
}

.horizontal-line {
    height: 1px;
    background: var(--color--black);
    border: none;
    margin: 0;
}

.procedes-container {
    .line-right-aligned {
        width: 100vw;
        top: 0;
        left: 0;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.5s ease;
    }

    &:has(h2.is-visible) {
        .line-right-aligned {
            transform: scaleX(1);
        }
    }
}

.contact-cta-banner-container {
    margin-top: -125px;
}

.updata-contact-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "image header"
        "image description"
        "image cta-section";
    grid-column-gap: 70px;
    grid-row-gap: 30px;
    align-items: start;
    padding: 60px;
    color: var(--color--white);
    background-color: var(--color--black);
    border-radius: 8px;
}

.updata-contact-card--image {
    grid-area: image;
    width: clamp(98px, 26vw, 345px);
    height: clamp(98px, 26vw, 345px);
    border-radius: 50%;
    align-self: center;
}

.updata-contact-card--image img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.updata-contact-card--header {
    grid-area: header;
}

.updata-contact-card--text {
    grid-area: description;
}

.updata-contact-card--cta-section {
    grid-area: cta-section;
    background: var(--color--gray800);
    padding: 30px 25px;
    border-radius: 8px;
}

.updata-contact-card--cta-section h3 {
    margin-bottom: 20px;
}

.updata-contact-card--buttons {
    width: fit-content;
    border-radius: 100px;
    border-color: var(--color--blue);
    border-width: 1px;
    border-style: solid;
    display: flex;
    overflow: hidden;
    position: relative;
}

.updata-contact-card--button {
    color: var(--color--white);
    background: transparent;
    border: none;
    padding: 0 30px;
    position: relative;
    z-index: 2;
    border-radius: 100px;
    cursor: pointer;
    transition: background-color 0.3s ease-out;
}

.slider-bg {
    position: absolute;
    width: calc(33.33% + 22px);
    top: 0;
    left: 0;
    height: 100%;
    background: var(--color--blue);
    border-radius: 100px;
    transition: all 0.3s ease;
    z-index: 1;
    opacity: 1;
}

.updata-contact-card--buttons > *:nth-child(1):hover {
    left: 0;
}

.updata-contact-card--buttons > *:nth-child(2):hover ~ .slider-bg {
    left: calc(33.33% + 18px);
}

.updata-contact-card--buttons > *:nth-child(3):hover ~ .slider-bg {
    left: calc(66.66% + 30px);
}

@media (max-width: 1333px) {
    .contact-cta-banner-container {
        margin-top: -205px;
    }

    .updata-contact-card--cta-section {
        padding: 25px;
    }

    .updata-contact-card--cta-section h3 {
        margin-bottom: 23px;
    }

    .updata-contact-card--buttons {
        display: flex;
        flex-direction: column;
        border: none;
        border-radius: 0;
        width: 100%;
        gap: 12px;
    }

    .updata-contact-card--button {
        width: 100%;
        border: 1px solid var(--color--white);
    }

    .slider-bg {
        display: none;
    }

    .updata-contact-card--button:hover {
        background-color: var(--color--blue);
        border: none;
    }
}

@media (max-width: 992px) {
    .contact-cta-banner-container {
        margin-top: -255px;
    }

    .updata-contact-card {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "image header"
            "description description"
            "cta-section cta-section";
        grid-column-gap: 20px;
        grid-row-gap: 15px;
        align-items: center;
        padding: clamp(25px, 5vw, 60px);
    }

    .updata-contact-card--cta-section {
        margin-top: 20px;
    }
}

.address-card {
    background: var(--color--gray50);
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    gap: 30px;
    padding: 40px 55px 45px;
    width: max(60%, 697px);
    position: relative;
    z-index: 1;
}

.address-card-columns {
    display: flex;
    gap: 80px;
}

.address-card-col2 {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.address-card-button {
    margin-top: -10px;
}

@media (max-width: 992px) {
    .address-card {
        width: min(100%, 697px);
    }
}

@media (max-width: 768px) {
    .address-card {
        gap: 25px;
        padding: 30px;
    }

    .address-card-columns {
        gap: 30px;
    }

    .address-card-col2 {
        height: 100%;
        justify-content: space-between;
    }

    .address-card-button {
        width: 100%;
        margin-top: 0;
    }
}

.contact-cards-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 55px;
    gap: 72px;
}

.contact-cards-arrows {
     display: none;
     width: 100%;
     align-items: center;
     justify-content: flex-end;
     gap: 15px;
}

.contact-cards-container {
    display: flex;
    gap: 82px;
    min-width: 1120px;
}

.contact-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    flex: 0 0 auto;
}

.contact-card-image {
    width: 315px;
    height: 332.89px;
    border-radius: 50%
}

.contact-card-info {
    text-align: center;
}

.contact-card-title {
    margin-bottom: 8px;
}

.contact-card-buttons {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.contact-card-button {
    width: 100%;
    border: none;
    background-color: var(--color--blue);
    color: var(--color--white);
}

@media (max-width: 1240px) {
    .contact-cards-section {
        gap: 16px;
    }
    .contact-cards-arrows {
        display: inline-flex;
    }
}

.small-accordion-container-secteur {
    width: 50%;
    gap: 38px;
}

@media (max-width: 992px) {
    .small-accordion-container-secteur {
        width: 100%;
    }
}

.small-accordion-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.small-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.small-accordion-item {
    padding: 0 15px;
    border-radius: 8px;
    transition: background-color 0.3s ease, padding 0.2s ease;
}

.small-accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: 0.5s grid-template-rows ease;

    &> div {
        overflow: hidden;
    }
}

.small-accordion-item:hover {
    background-color: var(--color--gray50);
    padding: 15px 20px 25px;
}

.small-accordion-container-secteur .small-accordion-item:hover {
    background-color: var(--color--white);
}

.small-accordion-item:hover .small-accordion-content {
    grid-template-rows: 1fr;
}

.small-accordion-content p {
    margin: 15px 0;
}

@media (max-width: 992px) {
    .small-accordion-content button {
        width: 100%;
    }
}

.long-arrow {
    background-image: url("https://updata.ca/wp-content/uploads/2025/07/Group-38.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 32px;
    height: 14px;
}

.sectors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 76px 30px;
}

.sector-card {
    display: flex;
    flex-direction: column;
}

.sector-card .wp-block-post-featured-image img,
.sector-card > img {
    border-radius: 8px;
    width: 100%;
    height: auto;
    aspect-ratio: 419.67 / 353;
    object-fit: cover;
}

.sector-card-divider {
    margin: 12px 0;
    width: 0;
    height: 1px;
    border: none;
    background: var(--color--black);
    visibility: hidden;
    transition: width 0.3s ease, visibility 0s 0.3s; /* Delay visibility transition */
}

.wp-block-post .btn-arrow,
.sector-card button {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.3s ease, opacity 0.3s ease;
}

.wp-block-post figure,
.sector-card figure {
    border-radius: 8px;
    overflow: hidden;
}

.wp-block-post figure img,
.sector-card figure img {
    transition: transform 0.3s ease;
}

.wp-block-post:hover figure img,
.sector-card:hover figure img {
    transform: scale(1.03);
}

@media (min-width: 769px) {
    .wp-block-post:hover .sector-card-divider,
    .sector-card:hover .sector-card-divider {
        width: 100%;
        visibility: visible;
        transition: width 0.3s ease, visibility 0s;
    }

    .wp-block-post:hover .btn-arrow,
    .sector-card:hover button {
        visibility: visible;
        opacity: 1;
        transition: width 0.3s ease, visibility 0s;
    }
}

.sector-card-text {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

@media (max-width: 1040px) {
    .sectors-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 45px 30px;
    }

    .sectors-grid-industry {
        grid-template-columns: 1fr;
        margin: 0 10%;
    }
}

@media (max-width: 650px) {
    .sectors-grid-industry {
        margin: 0;
    }
}

@media (max-width: 768px) {
    .sectors-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .projets-grid-item-divider:has(+ .sector-card-text.is-visible),
    .sector-card-divider:has(+ .sector-card-text.is-visible) {
        width: 100%;
        visibility: visible;
    }
    .sector-card-text.is-visible .btn-arrow {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.3s ease-in, visibility 0s;
    }
}

.secteur-blog-cards-heading {
    width: 50%;
}

.secteur-blog-cards-heading h2 {
    margin-bottom: 18px;
}

.secteur-blog-cards {
    display: grid;
    grid-auto-rows: 1fr;
    margin-top: 75px;
    gap: 30px;
}

.secteur-blog-card {
    display: flex;
    align-items: center;
    background-color: var(--color--gray50);
    color: var(--color--black);
    border-radius: 8px;
    width: 100%;
    gap: 40px;
    padding-right: 40px;
}

.secteur-blog-card .wp-block-post-featured-image {
    flex: 0 0 20%;
    min-width: 0;
    border-radius: 8px;
    overflow: hidden;
}

.secteur-blog-card .wp-block-post-featured-image img {
    aspect-ratio: 250 / 196;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.secteur-blog-card-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    padding: 30px 0;
}

.secteur-blog-card-divider {
    visibility: hidden;
    width: 0;
    transition: visibility 0.3s ease, width 0.3s ease;
}

.secteur-blog-card .btn-arrow {
    visibility: hidden;
    opacity: 0;
}

.secteur-card-text div:has(a.btn-arrow) {
    visibility: hidden;
    opacity: 0;
}

.secteur-blog-card:hover .wp-block-post-featured-image img {
    transform: scale(1.03);
}

.secteur-blog-card:hover .secteur-blog-card-divider {
    visibility: visible;
    width: 100%;
}

.secteur-blog-card:hover .btn-arrow {
    visibility: visible;
    opacity: 1;
}

.secteur-blog-card-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.secteur-blog-card-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

@media (max-width: 992px) {
    .secteur-blog-cards-heading {
        width: 70%;
    }
}

@media (max-width: 950px) {
    .secteur-blog-cards {
        gap: 50px;
        grid-auto-rows: auto;
    }

    .secteur-blog-cards-heading {
        width: 60%;
    }

    .secteur-blog-cards-heading h2 {
        margin-bottom: 20px;
    }

    .secteur-blog-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        gap: 17px;
        width: 100%;
    }

    .secteur-blog-card-inner {
        padding: 0;
        width: 100%;
        gap: 10px;
    }

    .secteur-blog-card-content {
        gap: 10px;
    }

    .secteur-blog-card .wp-block-post-featured-image {
        width: min(419px, 100%);
        flex: unset;
    }

    .secteur-blog-card .wp-block-post-featured-image img {
        border-radius: 8px;
        height: auto;
    }
}

.a-propos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
    margin-top: 50px;
    position: relative;
    z-index: 1;

    @media (max-width: 992px) {
        grid-template-columns: 1fr;
    }
}

.a-propos-grid figure {
    margin: 0;
    width: 100%;
}

.a-propos-grid figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.a-propos-grid h2 {
    grid-column: span 2;
}

.a-propos-content {
    width: 100%;
}

.process-cards-container {
    text-align: center;
    margin-top: 40px;
}

.process-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;

    @media (max-width: 992px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: 600px) {
        grid-template-columns: 1fr;
    }
}

.process-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--color--gray50);
    padding: 30px 20px;
    border-radius: 8px;
}

.process-card h3 {
    margin-bottom: 20px;
}

.process-card-icon {
    width: 60px;
    height: 60px;
}

.process-cards-container a {
    margin-top: 70px;

    @media (max-width: 600px) {
        width: 100%;
    }
}

.services-title {
    margin-bottom: 15px;
}

.service-banner-content {
    padding-top: max(20px, calc(var(--spacing--banner) - 80px));
    padding-bottom: var(--spacing--banner);
}

.single-project-description {
    width: 60%;

    hr {
        width: 60%;
        left: 0;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s ease;

        &.is-visible {
            transform: scaleX(1);
        }
    }

    @media (max-width: 768px) {
        width: 100%;
    }
}

.single-project-description--text {
    margin-top: 100px;

    p {
        font-size: clamp(19px, 4vw, 22px);
    }
}

.single-project-section {
    display: flex;
    gap: 142px;
    justify-content: space-between;

    p:not(:last-of-type) {
        margin-bottom: 20px;
    }

    ul {
        list-style-position: inside;
        padding-left: 10px;
        margin-bottom: 20px;

        li {
            margin-bottom: 5px;

            p {
                display: inline;
            }
        }
    }

    @media (max-width: 1185px) {
        gap: 90px;
    }

    @media (max-width: 906px) {
        flex-direction: column;
    }
}

span.project-label {
    font-family: var(--font-family--primary);
    font-weight: 700;
    font-style: italic;
}

span.project-expertise-separator {
    margin: 0 6px;
}

.hubspot-newsletter-form {
    --hsf-row__vertical-spacing: 0;
    --hsf-module__vertical-spacing: 0;
    --hsf-field-input__border-color: inherit;
    --hsf-field-input__padding: 10px 10px 0px;

    width: 100%;

    .hsfc-Step__Content {
        display: flex;
        gap: 47px;
        width: 100%;

        @media (max-width: 768px) {
            flex-direction: column;
            gap: 17px;

            .hsfc-NavigationRow__Buttons {
                width: 100%;
            }

            button {
                width: 100%;
            }
        }
    }

    .hsfc-EmailField {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: 100%;

        .hsfc-ErrorAlert {
            order: 3;
        }

        label {
            order: 2;
        }

        input {
            order: 1;
            height: 50px;
        }
    }
}

[data-hsfc-id=Renderer] .hsfc-TextInput:hover,
[data-hsfc-id=Renderer] .hsfc-TextInput:active,
[data-hsfc-id=Renderer] .hsfc-TextInput:focus,
[data-hsfc-id=Renderer] .hsfc-TextareaInput:hover,
[data-hsfc-id=Renderer] .hsfc-TextareaInput:active,
[data-hsfc-id=Renderer] .hsfc-TextareaInput:focus {
    box-shadow: none !important;
}

.error-404 {
    text-align: center;
    padding-top: var(--spacing--section);
    position: relative;
    z-index: 1;

    h2 {
        font-size: 35px;
        line-height: 40px;
        font-weight: 700;
        margin-bottom: 50px;
        font-family: var(--font-family--secondary);

        span {
            display: block;
            font-size: clamp(80px, 20vw, 250px);
            line-height: clamp(50px, 15vw, 175px);
            margin-bottom: 40px;
        }
    }

    img {
        position: fixed;
        top: 300px;
        right: 0;

        @media (max-width: 992px) {
            right: -100px;
        }

        @media (max-width: 768px) {
            right: -150px;
        }
    }
}

hr:has(~ .homepage-story--title) {
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s ease;
}

hr:has(~ .homepage-story--title.is-visible) {
    transform: scaleX(1);
}