/*
* Page : Home
* type : css
* Apply on 1 page
*/

/* componnents on all pages */
@import '../components/footer.css';
@import '../components/buttons.css';
@import '../components/loader.css';
@import '../components/hero.css';
@import '../components/forms.css';
@import '../components/toggle.css';

/* componnents on this page */
@import '../components/carousel.css';
@import '../components/portfolio.css';
@import '../components/reviews.css';
@import '../components/faq.css';


/* ------------------------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------------------- */

/* hero section */
[data-barba-namespace="home"] section.hero .cta-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: fit-content;
}
[data-barba-namespace="home"] .cta-container .third-button, [data-barba-namespace="home"] .cta-container .secondary-button {
    width: fit-content;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* hero cards */
/* card container */
[data-barba-namespace="home"] .card-container {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1424px;
    margin: 0 auto;
    pointer-events: none;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* cards */
[data-barba-namespace="home"] .perf-card, [data-barba-namespace="home"] .seo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 152px;
    height: 120px;
    border-radius: 8px;
    opacity: 0;
}
/* darkmode theme */
body.light [data-barba-namespace="home"] .perf-card, body.light [data-barba-namespace="home"] .seo-card {
    background: linear-gradient(133.69deg, var(--white-color) -13.85%, var(--secondary-color) 221.38%);
}
body.dark [data-barba-namespace="home"] .perf-card, body.dark [data-barba-namespace="home"] .seo-card {
    background: var(--bg-body);
}

/* motion hero card */
[data-barba-namespace="home"] section.hero.visible .perf-card {
    will-change: transform;
    animation: apearHeroCards 300ms 700ms ease-in-out both, floatLeftCard 8s linear infinite both;
}
[data-barba-namespace="home"] section.hero.visible .seo-card {
    will-change: transform;
    animation: apearHeroCards 300ms 700ms ease-in-out both, floatRightCard 8s linear infinite both;
}
@keyframes apearHeroCards {
    from {
        opacity: 0;
    } to {
        opacity: 1;
    }
}
@keyframes floatLeftCard {
    0% {
        transform: translate(0,0);
    } 25% {
        transform: translate(5px,-15px);
    } 50% {
        transform: translate(0,0);
    } 75% {
        transform: translate(5px, 15px);
    } 100% {
        transform: translate(0,0);
    }
}
@keyframes floatRightCard {
    0% {
        transform: translate(0,0);
    } 25% {
        transform: translate(-5px, 15px);
    } 50% {
        transform: translate(0,0);
    } 75% {
        transform: translate(-5px,-15px);
    } 100% {
        transform: translate(0,0);
    }
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* perf card container */
[data-barba-namespace="home"] .perf-card .graphique-card {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
[data-barba-namespace="home"] .perf-card .graphique-card svg.graphique-value {
    position: absolute;
    margin: 6px 14px 0px 0px;
}
/* darkmode theme */
body.dark [data-barba-namespace="home"] .graphique-value, body.dark [data-barba-namespace="home"] .graphique-value path {
    fill: var(--secondary-darkmode-color);
}
body.dark [data-barba-namespace="home"] .bg-counter-svg path {
    fill: var(--bg-2-darkness-element);
}
/* perf card content container */
[data-barba-namespace="home"] .perf-card .title-container {
    position: absolute;
    bottom: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
[data-barba-namespace="home"] .perf-card .values-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100px;
}
[data-barba-namespace="home"] .perf-card .values-container div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
}
/* perf card title */
[data-barba-namespace="home"] .card-container .title-card {
    font-size: 14px;
    line-height: 14px;
    font-weight: 700;
    text-align: left;
}
/* darkmode theme */
body.light [data-barba-namespace="home"] .card-container .title-card {
    color: var(--dark-color);
}
body.dark [data-barba-namespace="home"] .card-container .title-card {
    color: var(--white-color);
}
/* perf card text */
[data-barba-namespace="home"] .card-container .text-value {
    font-size: 10px;
    line-height: 10px;
    font-weight: 700;
    text-align: left;
}
body.light [data-barba-namespace="home"] .card-container .text-value {
    color: var(--dark-color);
}
body.dark [data-barba-namespace="home"] .card-container .text-value {
    color: var(--lightness-color);
}
[data-barba-namespace="home"] .card-container .text-card {
    font-size: 4px;
    line-height: 4px;
    text-align: center;
}
/* darkmode theme */
body.light [data-barba-namespace="home"] .card-container .text-card {
    color: var(--dark-grey-color);
}
body.dark [data-barba-namespace="home"] .card-container .text-card {
    color: var(--lightness-color);
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* seo card svg */
[data-barba-namespace="home"] .seo-card .more-icon {
    position: absolute;
    right: 19px;
    top: -8px;
}
body.dark [data-barba-namespace="home"] .seo-card .more-icon path {
    fill: var(--secondary-darkmode-color);
}
body.dark [data-barba-namespace="home"] .seo-card .hr-icon path, body.dark [data-barba-namespace="home"] .seo-card .graph-icon path {
    stroke: var(--secondary-darkmode-color);
}
[data-barba-namespace="home"] .seo-card .hr-icon {
    position: absolute;
    right: 26px;
    top: 5px;
}
[data-barba-namespace="home"] .seo-card .abs-ord-axe {
    position: absolute;
    bottom: 8px;
    left: 8px;
}
[data-barba-namespace="home"] .seo-card .title-card {
    position: absolute;
    bottom: 18px;
    right: 18px;
}
[data-barba-namespace="home"] .seo-card .text-card {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 73px;
    text-align: left;
}

/* scroll indicator */
[data-barba-namespace="home"] section.hero svg.scroll-indicator {
    opacity: 0;
}
[data-barba-namespace="home"] section.hero.visible svg.scroll-indicator {
    will-change: transform;
    animation: apearHeroScrollIndicator 300ms 700ms ease-in-out both, scrollIndicator 1200ms ease-in-out infinite both;
}
@keyframes apearHeroScrollIndicator {
    from {
        opacity: 0;
    } to {
        opacity: 1;
    }
}
@keyframes scrollIndicator {
    0% {
        transform: translateY(0);
        fill-opacity: 1;
    } 50% {
        transform: translateY(-3px);
        fill-opacity: 0.5;
    } 100% {
        transform: translateY(0);
        fill-opacity: 1;
    }
}

/* animation */
/* portfolio title content */
[data-barba-namespace="home"] section.hero h1, [data-barba-namespace="home"] section.hero p, [data-barba-namespace="home"] section.hero strong {
    color: hsl(0 0% 100% / 0.2);
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 0% 100%;
}

[data-barba-namespace="home"] section.hero.visible .hero-content h1 {
    will-change: transform;
    animation: apearTitle 300ms ease-in forwards;
}
[data-barba-namespace="home"] section.hero.visible .hero-content p {
    will-change: transform;
    animation: apearTitle 300ms ease-in forwards;
}
[data-barba-namespace="home"] section.hero.visible .hero-content strong {
    will-change: transform;
    animation: apearTitle 300ms ease-in forwards;
}

/* button service section */
[data-barba-namespace="home"] section.hero .cta-container .secondary-button, [data-barba-namespace="home"] section.hero .cta-container .third-button, [data-barba-namespace="home"] section.hero .fourth-button {
    opacity: 0;
    transform: scale(1.1);
}
/* aniamtion */
[data-barba-namespace="home"] section.hero.visible .cta-container .secondary-button {
    will-change: transform;
    animation: buttonApear 300ms 250ms ease-in forwards;
}
[data-barba-namespace="home"] section.hero.visible .cta-container .third-button {
    will-change: transform;
    animation: buttonApear 300ms 350ms ease-in forwards;
}
[data-barba-namespace="home"] section.hero.visible .fourth-button {
    will-change: transform;
    animation: buttonApear 300ms 450ms ease-in forwards;
}

/* darkmode theme */
body.light [data-barba-namespace="home"] section.hero h1, body.light [data-barba-namespace="home"] section.hero strong {
    background-image: linear-gradient(90deg, var(--white-color), var(--white-color));
}
body.dark [data-barba-namespace="home"] section.hero h1, body.dark [data-barba-namespace="home"] section.hero strong {
    background-image: linear-gradient(90deg, var(--white-color), var(--white-color));
}
body.light [data-barba-namespace="home"] section.hero p  {
    background-image: linear-gradient(90deg, var(--lightness-color), var(--lightness-color));
}
body.dark [data-barba-namespace="home"] section.hero p  {
    background-image: linear-gradient(90deg, var(--lightness-color), var(--lightness-color));
}

/* responsiv */
/* breakpoints */
@media (max-width: 1370px) {
    [data-barba-namespace="home"] .card-container {
        display: none;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------------------- */

/* web site features section */
[data-barba-namespace="home"] .web-site-features {
    justify-content: center;
    align-items: center;
    gap: 56px;
}
[data-barba-namespace="home"] .web-site-features .title-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    max-width: 740px;
    width: 100%;
}
[data-barba-namespace="home"] .web-site-features .title-container > h2 {
    color: hsl(0 0% 100% / 0.2);
}
[data-barba-namespace="home"] .visible .web-site-features .title-container > h2 {
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    will-change: transform;
    animation: apearTitle 300ms ease-in forwards;
}
body.light [data-barba-namespace="home"] .visible .web-site-features .title-container > h2 {
    background-image: linear-gradient(90deg, var(--dark-color), var(--dark-color));
}
body.dark [data-barba-namespace="home"] .visible .web-site-features .title-container > h2 {
    background-image: linear-gradient(90deg, var(--white-color), var(--white-color));
}
[data-barba-namespace="home"] .web-site-features-container {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-auto-rows: auto;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}
body.light [data-barba-namespace="home"] .web-site-features-container {
    grid-template-columns: repeat(4, auto);
    gap: 16px;
}
body.dark [data-barba-namespace="home"] .web-site-features-container {
    grid-template-columns: repeat(4, auto);
    gap: 16px;
}
[data-barba-namespace="home"] .web-site-features-container .card {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    opacity: 0;
    transform: scale(1.2);
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* card animation */
[data-barba-namespace="home"] .visible .card.one {
    will-change: transform;
    animation: bouncedApear 300ms 300ms ease-in forwards;
}
[data-barba-namespace="home"] .visible .card.eight {
    will-change: transform;
    animation: bouncedApear 300ms 350ms ease-in forwards;
}
[data-barba-namespace="home"] .visible .card.three {
    will-change: transform;
    animation: bouncedApear 300ms 400ms ease-in forwards;
}
[data-barba-namespace="home"] .visible .card.six {
    will-change: transform;
    animation: bouncedApear 300ms 450ms ease-in forwards;
}
[data-barba-namespace="home"] .visible .card.four {
    will-change: transform;
    animation: bouncedApear 300ms 500ms ease-in forwards;
}
[data-barba-namespace="home"] .visible .card.five {
    will-change: transform;
    animation: bouncedApear 300ms 550ms ease-in forwards;
}
[data-barba-namespace="home"] .visible .card.two {
    will-change: transform;
    animation: bouncedApear 300ms 600ms ease-in forwards;
}
[data-barba-namespace="home"] .visible .card.seven {
    will-change: transform;
    animation: bouncedApear 300ms 650ms ease-in forwards;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* darkmode theme */
body.dark [data-barba-namespace="home"] .web-site-features-container .card {
    max-width: initial;
    padding: 24px;
    border-radius: 16px;
    background: var(--bg-darkness-element);
    width: initial;
}
body.light [data-barba-namespace="home"] .web-site-features-container .card {
    max-width: initial;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid rgba(8, 0, 26, 0.24);
    background: rgba(246, 236, 246, 0.72);
    width: initial;
}
body.dark [data-barba-namespace="home"] .web-site-features-container .card {
    max-width: initial;
    padding: 24px;
    border-radius: 16px;
    background: var(--bg-darkness-element);
    width: initial;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* breakpoint */
@media (max-width: 1270px) {
    body.light [data-barba-namespace="home"] .web-site-features-container,
    body.dark [data-barba-namespace="home"] .web-site-features-container {
        grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
        gap: 32px 16px;
    }

    [data-barba-namespace="home"] .web-site-features-container .card {
        max-width: 100%;
    }

    body.light [data-barba-namespace="home"] .web-site-features-container .card {
        max-width: 100%;
        padding: 24px;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* svg */
[data-barba-namespace="home"] .web-site-features-container .card svg {
    width: 24px;
    height: auto;
    overflow: visible;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* darkmode theme svg */
body.light [data-barba-namespace="home"] .web-site-features-container .card svg path {
    fill: var(--dark-color);
}

body.dark [data-barba-namespace="home"] .web-site-features-container .card svg path {
    fill: var(--primary-darkmode-color);
}

/* ------------------------------------------------------------------------------------------------------------------------- */

[data-barba-namespace="home"] .web-site-features-container .card > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
}

[data-barba-namespace="home"] .web-site-features-container .card strong {
    text-transform: capitalize;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------------------- */

/* services description section */
[data-barba-namespace="home"] section.about-services-section.darkness-section > div {
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 56px;
    padding: 152px 0px;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* title and text */
[data-barba-namespace="home"] section.about-services-section.darkness-section h2 {
    color: var(--white-color);
}

[data-barba-namespace="home"] section.about-services-section.darkness-section strong {
    color: var(--white-color);
}

[data-barba-namespace="home"] section.about-services-section.darkness-section p {
    color: var(--lightness-color);
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* card container */
[data-barba-namespace="home"] section.about-services-section.darkness-section .about-services-container {
    display: grid;
    grid-auto-flow: column;
    gap: 56px;
    padding: 0px 152px;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* img services section */
[data-barba-namespace="home"] .about-services-container .img-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

[data-barba-namespace="home"] .about-services-container .img-container img {
    height: auto;
}

[data-barba-namespace="home"] .about-services-container .img-container.reverse {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

[data-barba-namespace="home"] .about-services-container .img-container.reverse img {
    height: auto;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* content services section */
[data-barba-namespace="home"] section.about-services-section.darkness-section .content-about-services {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    height: 100%;
}

/* title */
[data-barba-namespace="home"] section.about-services-section.darkness-section .content-about-services > h2 {
    color: hsl(0 0% 100% / 0);
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 0% 100%;
}

body.light [data-barba-namespace="home"] section.about-services-section.darkness-section .content-about-services > h2 {
    background-image: linear-gradient(90deg, var(--white-color), var(--white-color));
}

body.dark [data-barba-namespace="home"] section.about-services-section.darkness-section .content-about-services > h2 {
    background-image: linear-gradient(90deg, var(--white-color), var(--white-color));
}

/* section 1 about services */
[data-barba-namespace="home"] section.about-services-section.darkness-section.visible .content-about-services.one > h2 {
    will-change: transform;
    animation: apearTitle 300ms ease-in forwards;
}

/* section 2 about services */
[data-barba-namespace="home"] section.about-services-section.darkness-section.visible .content-about-services.two > h2 {
    will-change: transform;
    animation: apearTitle 300ms 1150ms ease-in forwards;
}

/* about services text */
[data-barba-namespace="home"] section.about-services-section.darkness-section .content-about-services .content-description > * {
    transform: translateY(8px);
    opacity: 0;
}

/* services button */
[data-barba-namespace="home"] section.about-services-section .content-about-services .description-container.three {
    justify-content: flex-start;
}

[data-barba-namespace="home"] section.about-services-section .content-about-services .description-container.three div.primary-button {
    padding: 0;
}

/* button service section */
[data-barba-namespace="home"] section.about-services-section .content-about-services .description-container.three div.primary-button a {
    opacity: 0;
    transform: scale(1.1);
}

[data-barba-namespace="home"] .content-about-services .description-container .rounded-icon-container {
    opacity: 0;
}

/* section 1 aboute services */
/* animation text card 1 */
[data-barba-namespace="home"] section.about-services-section.darkness-section.visible .content-about-services.one .description-container.one .content-description {
    transform-origin: left;
    will-change: transform;
    animation: textRotate 300ms 250ms ease-in forwards;
}

[data-barba-namespace="home"] section.about-services-section.darkness-section.visible .content-about-services.one .description-container.one .content-description > * {
    will-change: transform;
    animation: apear 300ms 250ms ease-in forwards, textSlideUp 300ms 250ms ease-in forwards;
}

[data-barba-namespace="home"] section.about-services-section.darkness-section.visible .content-about-services.one .description-container.one .rounded-icon-container {
    will-change: transform;
    animation: apear 300ms 350ms ease-in forwards;
}

/* animation text card 2 */
[data-barba-namespace="home"] section.about-services-section.darkness-section.visible .content-about-services.one .description-container.two .content-description {
    will-change: transform;
    transform-origin: left;
    animation: textRotate 300ms 500ms ease-in forwards;
}

[data-barba-namespace="home"] section.about-services-section.darkness-section.visible .content-about-services.one .description-container.two .content-description > * {
    will-change: transform;
    animation: apear 300ms 500ms ease-in forwards, textSlideUp 300ms 500ms ease-in forwards;
}

[data-barba-namespace="home"] section.about-services-section.darkness-section.visible .content-about-services.one .description-container.two .rounded-icon-container {
    will-change: transform;
    animation: apear 300ms 600ms ease-in forwards;
}

/* animation text card 3 */
[data-barba-namespace="home"] section.about-services-section.darkness-section.visible .content-about-services.one .description-container.three div.primary-button a {
    will-change: transform;
    animation: buttonApear 300ms 750ms ease-in forwards;
}

/* section 2 aboute services */
/* animation text card 1 */
[data-barba-namespace="home"] section.about-services-section.darkness-section.visible .content-about-services.two .description-container.one .content-description {
    transform-origin: left;
    will-change: transform;
    animation: textRotate 300ms 1450ms ease-in forwards;
}

[data-barba-namespace="home"] section.about-services-section.darkness-section.visible .content-about-services.two .description-container.one .content-description > * {
    will-change: transform;
    animation: apear 300ms 1450ms ease-in forwards, textSlideUp 300ms 1450ms ease-in forwards;
}

[data-barba-namespace="home"] section.about-services-section.darkness-section.visible .content-about-services.two .description-container.one .rounded-icon-container {
    will-change: transform;
    animation: apear 300ms 1550ms ease-in forwards;
}

/* animation text card 2 */
[data-barba-namespace="home"] section.about-services-section.darkness-section.visible .content-about-services.two .description-container.two .content-description {
    transform-origin: left;
    will-change: transform;
    animation: textRotate 300ms 1700ms ease-in forwards;
}

[data-barba-namespace="home"] section.about-services-section.darkness-section.visible .content-about-services.two .description-container.two .content-description > * {
    will-change: transform;
    animation: apear 300ms 1700ms ease-in forwards, textSlideUp 300ms 1700ms ease-in forwards;
}

[data-barba-namespace="home"] section.about-services-section.darkness-section.visible .content-about-services.two .description-container.two .rounded-icon-container {
    will-change: transform;
    animation: apear 300ms 1800ms ease-in forwards;
}

/* animation text card 3 */
[data-barba-namespace="home"] section.about-services-section.darkness-section.visible .content-about-services.two .description-container.three div.primary-button a {
    will-change: transform;
    animation: buttonApear 300ms 1950ms ease-in forwards;
}

[data-barba-namespace="home"] section.about-services-section.darkness-section .description-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
}

[data-barba-namespace="home"] section.about-services-section.darkness-section .content-description {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[data-barba-namespace="home"] section.about-services-section.darkness-section .lightness-card {
    width: 100%;
    height: 345px;
    border-radius: 16px;
    background: linear-gradient(119deg, var(--white-color) -14.19%, var(--secondary-color) 222.44%);
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* vignette */
body.dark [data-barba-namespace="home"] .rounded-icon-container {
    background: var(--bg-body);
}

body.dark [data-barba-namespace="home"] .rounded-icon-container svg,
body.dark [data-barba-namespace="home"] .rounded-icon-container svg path {
    fill: var(--primary-darkmode-color) !important;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* responsiv */
/* mobile */
@media (max-width: 768px) {
    [data-barba-namespace="home"] section.about-services-section.darkness-section > div {
        padding: 72px 16px;
    }
    [data-barba-namespace="home"] section.about-services-section.darkness-section .about-services-container {
        grid-auto-flow: row;
        padding: 0px 32px;
    }
    [data-barba-namespace="home"] .about-services-container .img-container img {
        width: 100%;
    }
    [data-barba-namespace="home"] .about-services-container .img-container.reverse {
        order: -1;
    }
    [data-barba-namespace="home"] section.about-services-section.darkness-section > div div.primary-button {
        padding: 0px 32px;
    }
}

/* tablette */
@media (min-width: 769px) and (max-width: 1024px) {
    [data-barba-namespace="home"] section.about-services-section.darkness-section > div {
        padding: 72px 56px!important;
    }
    [data-barba-namespace="home"] section.about-services-section.darkness-section .about-services-container {
        grid-auto-flow: row;
        padding: 32px;
    }
    [data-barba-namespace="home"] .about-services-container .img-container img {
        width: 100%;
    }
    [data-barba-namespace="home"] .about-services-container .img-container.reverse {
        order: -1;
    }
}

@media (min-width: 1025px) and (max-width: 1310px) {
    [data-barba-namespace="home"] section.about-services-section.darkness-section .about-services-container {
        grid-auto-flow: row;
    }
    [data-barba-namespace="home"] .about-services-container .img-container img {
        width: 100%;
    }
    [data-barba-namespace="home"] .about-services-container .img-container.reverse {
        order: -1;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------------------- */

/* about me section */
[data-barba-namespace="home"] section.about-me-section.darkness-section > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 60px;
}
[data-barba-namespace="home"] .content-about-me .title-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* about me title content */
[data-barba-namespace="home"] section.about-me-section.darkness-section .title-container h2,
[data-barba-namespace="home"] section.about-me-section.darkness-section .title-container p {
    color: hsl(0 0% 100% / 0);
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 0% 100%;
}
[data-barba-namespace="home"] section.about-me-section.darkness-section strong {
    color: var(--white-color);
}
[data-barba-namespace="home"] section.about-me-section.darkness-section p {
    color: var(--lightness-color);
}

/* animation */
[data-barba-namespace="home"] section.about-me-section.darkness-section.visible h2 {
    will-change: transform;
    animation: apearTitle 300ms ease-in forwards;
}
[data-barba-namespace="home"] section.about-me-section.darkness-section.visible .title-container p {
    will-change: transform;
    animation: apearTitle 300ms ease-in forwards;
}

/* darkmode theme */
body.light [data-barba-namespace="home"] section.about-me-section.darkness-section .title-container h2  {
    background-image: linear-gradient(90deg, var(--white-color), var(--white-color));
}
body.dark [data-barba-namespace="home"] section.about-me-section.darkness-section .title-container h2  {
    background-image: linear-gradient(90deg, var(--white-color), var(--white-color));
}
body.light [data-barba-namespace="home"] section.about-me-section.darkness-section .title-container p  {
    background-image: linear-gradient(90deg, var(--lightness-color), var(--lightness-color));
}
body.dark [data-barba-namespace="home"] section.about-me-section.darkness-section .title-container p  {
    background-image: linear-gradient(90deg, var(--lightness-color), var(--lightness-color));
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* aboute descriptions containers */
[data-barba-namespace="home"] section.about-me-section.darkness-section .about-me-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    padding: 0px 152px !important;
}
[data-barba-namespace="home"] section.about-me-section.darkness-section .content-about-me {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    height: 100%;
}
[data-barba-namespace="home"] section.about-me-section.darkness-section .description-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
}
[data-barba-namespace="home"] .about-me-container .content-aboute-me-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
[data-barba-namespace="home"] section.about-me-section.darkness-section .content-description {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* animation */
/* about services text (conserve le sélecteur existant) */
[data-barba-namespace="home"] section.about-services-section.darkness-section .content-about-me .description-container .content-aboute-me-container > * {
    transform: translateY(8px);
    opacity: 0;
}
[data-barba-namespace="home"] section.about-me-section.darkness-section .rounded-icon-container,
[data-barba-namespace="home"] section.about-me-section.darkness-section .content-aboute-me-container > * {
    opacity: 0;
}

/* animation text card 1 */
[data-barba-namespace="home"] section.about-me-section.darkness-section.visible .content-about-me .description-container.one .content-aboute-me-container {
    transform-origin: left;
    will-change: transform;
    animation: textRotate 300ms 250ms ease-in forwards;
}
[data-barba-namespace="home"] section.about-me-section.darkness-section.visible .content-about-me .description-container.one .content-aboute-me-container > * {
    will-change: transform;
    animation: apear 300ms 250ms ease-in forwards, textSlideUp 300ms 250ms ease-in forwards;
}
[data-barba-namespace="home"] section.about-me-section.darkness-section.visible .content-about-me .description-container.one .rounded-icon-container {
    will-change: transform;
    animation: apear 300ms 400ms ease-in forwards;
}

/* animation text card 2 */
[data-barba-namespace="home"] section.about-me-section.darkness-section.visible .content-about-me .description-container.two .content-aboute-me-container {
    transform-origin: left;
    will-change: transform;
    animation: textRotate 300ms 550ms ease-in forwards;
}
[data-barba-namespace="home"] section.about-me-section.darkness-section.visible .content-about-me .description-container.two .content-aboute-me-container > * {
    will-change: transform;
    animation: apear 300ms 550ms ease-in forwards, textSlideUp 300ms 550ms ease-in forwards;
}
[data-barba-namespace="home"] section.about-me-section.darkness-section.visible .content-about-me .description-container.two .rounded-icon-container {
    will-change: transform;
    animation: apear 300ms 700ms ease-in forwards;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* face img */
[data-barba-namespace="home"] section.about-me-section.darkness-section .lightness-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 345px;
    border-radius: 16px;
}

[data-barba-namespace="home"] .about-me-container div picture {
    position: absolute;
    bottom: -3px;
    max-height: calc(100% + 56px);
}
[data-barba-namespace="home"] .about-me-container div picture img {
    width: calc(100% + 56px);
}

/* breakpoint */
@media (min-width: 1300px) and (max-width: 1450px) {
    [data-barba-namespace="home"] .about-me-container div img {
        width: calc(100% - 5vw);
    }
}
@media (min-width: 1200px) and (max-width: 1299px) {
    [data-barba-namespace="home"] .about-me-container div img {
        width: calc(100% - 2vw);
    }
}
@media (min-width: 769px) and (max-width: 1199px) {
    [data-barba-namespace="home"] .about-me-container div img {
        width: calc(100% - 1vw);
    }
}
@media (min-width: 550px) and (max-width: 768px) {
    [data-barba-namespace="home"] .about-me-container div img {
        max-height: initial;
        width: auto;
    }
}
@media (max-width: 549px) {
    [data-barba-namespace="home"] .about-me-container div img {
        max-height: initial;
    }
}

/* responsive */
@media (max-width: 768px) {
    [data-barba-namespace="home"] section.about-me-section.darkness-section .lightness-card {
        position: relative;
        padding-top: 16px;
        height: fit-content;
        overflow: hidden;
    }
    [data-barba-namespace="home"] .about-me-container div picture {
        position: initial;
    }
    [data-barba-namespace="home"] .about-me-container div picture img {
        display: block;
        width: 100%!important;
        margin-bottom: -5px;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* darkmode theme face img */
body.light [data-barba-namespace="home"] section.about-me-section.darkness-section .lightness-card {
    background: linear-gradient(119deg, var(--white-color) -14.19%, var(--secondary-color) 222.44%);
}
body.dark [data-barba-namespace="home"] section.about-me-section.darkness-section .lightness-card {
    border: 1px solid rgba(8, 0, 26, 0.24);
    background: var(--bg-3-darkness-element);
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* button */
[data-barba-namespace="home"] .about-me-section.darkness-section > div div.primary-button {
    padding: 0px 152px;
    opacity: 0;
    transform: scale(1.1);
}

/* animation */
[data-barba-namespace="home"] .about-me-section.darkness-section.visible > div div.primary-button {
    will-change: transform;
    animation: buttonApear 300ms 950ms ease-in forwards;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* responsiv */
/* mobile */
@media (max-width: 768px) {
    [data-barba-namespace="home"] section.about-me-section.darkness-section > div {
        min-height: calc(100vh - 160px) !important;
    }
    [data-barba-namespace="home"] section.about-me-section.darkness-section .about-me-container {
        flex-direction: column;
        padding: 0px 32px !important;
    }
    [data-barba-namespace="home"] .about-me-section.darkness-section > div div.primary-button {
        padding: 0px 32px;
    }
}

/* tablette */
@media (min-width: 768px) and (max-width: 1024px) {
    [data-barba-namespace="home"] section.about-me-section.darkness-section .about-me-container {
        padding: 0px !important;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------------------- */

/* wipuulce plugin */ 
[data-barba-namespace="home"] section.wipuulce-section > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
}
[data-barba-namespace="home"] section div .wipuulce {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-self: center;
    gap: 56px;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* wipuulce title content */
[data-barba-namespace="home"] section.wipuulce-section.darkness-section h2 {
    color: var(--white-color);
}
[data-barba-namespace="home"] section.wipuulce-section.darkness-section strong {
    color: var(--white-color);
}
[data-barba-namespace="home"] section.wipuulce-section.darkness-section p {
    color: var(--lightness-color);
}

/* portfolio title content */
[data-barba-namespace="home"] section.wipuulce-section.darkness-section h2 {
    color: hsl(0 0% 100% / 0.2);
    background-clip: text;
    background-repeat: no-repeat;
    background-size: 0% 100%;
}

/* animation */
[data-barba-namespace="home"] section.wipuulce-section.darkness-section.visible h2 {
    will-change: transform;
    animation: apearTitle 300ms ease-in forwards;
}

/* darkmode theme */
body.light [data-barba-namespace="home"] section.wipuulce-section.darkness-section h2  {
    background-image: linear-gradient(90deg, var(--white-color), var(--white-color));
}
body.dark [data-barba-namespace="home"] section.wipuulce-section.darkness-section h2  {
    background-image: linear-gradient(90deg, var(--white-color), var(--white-color));
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* wipuulce logo card */
[data-barba-namespace="home"] section .wipuulce .lightness-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 16px;
}

@media (max-width: 768px) {
    [data-barba-namespace="home"] .wipuulce-logo {
        width: auto;
        height: 50%;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* darkmode theme */
body.light [data-barba-namespace="home"] section .wipuulce .lightness-card {
    background: linear-gradient(119deg, var(--white-color) -14.19%, var(--secondary-color) 222.44%);
}
body.dark [data-barba-namespace="home"] section .wipuulce .lightness-card {
    background: var(--bg-3-darkness-element);
    border: 1px solid rgba(8, 0, 26, 0.24);
}
body.light [data-barba-namespace="home"] .wipuulce-logo path {
    fill: var(--dark-color);
}
body.dark [data-barba-namespace="home"] .wipuulce-logo path {
    fill: var(--bg-darkness-element);
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* wipuulce content description */
[data-barba-namespace="home"] section .wipuulce .content-about-services {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
    height: 100%;
}
[data-barba-namespace="home"] section .wipuulce .description-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
}
[data-barba-namespace="home"] .wipuulce .content-description {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* animation */
/* about wipuulce text */
[data-barba-namespace="home"] section.wipuulce-section.darkness-section .content-about-services .description-container .content-description > * {
    transform: translateY(8px);
    opacity: 0;
}
[data-barba-namespace="home"] section.wipuulce-section.darkness-section .rounded-icon-container,
[data-barba-namespace="home"] section.wipuulce-section.darkness-section .content-description > * {
    opacity: 0;
}
/* animation text card 1 */
[data-barba-namespace="home"] section.wipuulce-section.darkness-section.visible .content-about-services .description-container.one .content-description {
    transform-origin: left;
    will-change: transform;
    animation: textRotate 300ms 250ms ease-in forwards;
}
[data-barba-namespace="home"] section.wipuulce-section.darkness-section.visible .content-about-services .description-container.one .content-description > * {
    will-change: transform;
    animation: apear 300ms 250ms ease-in forwards, textSlideUp 300ms 250ms ease-in forwards;
}
[data-barba-namespace="home"] section.wipuulce-section.darkness-section.visible .content-about-services .description-container.one .rounded-icon-container {
    will-change: transform;
    animation: apear 300ms 400ms ease-in forwards;
}
/* animation text card 2 */
[data-barba-namespace="home"] section.wipuulce-section.darkness-section.visible .content-about-services .description-container.two .content-description {
    transform-origin: left;
    will-change: transform;
    animation: textRotate 300ms 550ms ease-in forwards;
}
[data-barba-namespace="home"] section.wipuulce-section.darkness-section.visible .content-about-services .description-container.two .content-description > * {
    will-change: transform;
    animation: apear 300ms 550ms ease-in forwards, textSlideUp 300ms 550ms ease-in forwards;
}
[data-barba-namespace="home"] section.wipuulce-section.darkness-section.visible .content-about-services .description-container.two .rounded-icon-container {
    will-change: transform;
    animation: apear 300ms 700ms ease-in forwards;
}
/* animation text card 3 */
[data-barba-namespace="home"] section.wipuulce-section.darkness-section.visible .content-about-services .description-container.three .content-description {
    transform-origin: left;
    will-change: transform;
    animation: textRotate 300ms 700ms ease-in forwards;
}
[data-barba-namespace="home"] section.wipuulce-section.darkness-section.visible .content-about-services .description-container.three .content-description > * {
    will-change: transform;
    animation: apear 300ms 700ms ease-in forwards, textSlideUp 300ms 700ms ease-in forwards;
}
[data-barba-namespace="home"] section.wipuulce-section.darkness-section.visible .content-about-services .description-container.three .rounded-icon-container {
    will-change: transform;
    animation: apear 300ms 800ms ease-in forwards;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* button */
[data-barba-namespace="home"] .wipuulce-section.darkness-section > div div.primary-button {
    opacity: 0;
    transform: scale(1.1);
}

/* animation */
[data-barba-namespace="home"] .wipuulce-section.darkness-section.visible > div div.primary-button {
    will-change: transform;
    animation: buttonApear 300ms 950ms ease-in forwards;
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* responsiv */
@media (max-width: 768px) {
    [data-barba-namespace="home"] section div .wipuulce {
        grid-template-columns: 1fr;
        padding: 0px 32px !important;
    }
    [data-barba-namespace="home"] section .wipuulce .content-about-services {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 32px;
        height: 100%;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------------------- */