@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ############# */
/* global */
/* ############# */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    outline: none;
    border: none;
    scroll-behavior: smooth;
    scroll-margin: 12vw;
}

:root {
    --bleu: #4222dc;
    --nuit: #05052d;
    --ligth: #ffffff;
    --jaune: #fdcd57;
    --dark: #000017;
}

body {
    color: var(--nuit);
    background-color: var(--ligth);
    transition: background-color 0.5s ease-out;
}

img {
    height: 100%;
}

.nuit {
    color: var(--nuit);
}

.bleu {
    color: var(--bleu);
}

.jaune {
    color: var(--jaune);
}
.light{
    color: var(--ligth);
    margin: 0 clamp(1rem, 7vw, 11.69vh);
    text-align: center;
}
.dark{
    color: var(--dark);
}
.titre {
    color: var(--bleu);
    text-align: center;
    font-size: clamp(2.3rem, 5.5vw, 11.8vh);
    font-weight: 700;
    margin: clamp(2rem, 9vw, 15vh) 2vw clamp(2rem, 7vw, 11.69vh);
}

.sous_titre {
    color: var(--nuit);
    font-weight: 600;
    font-size: clamp(1.5rem, 2.5vw, 5.35vh);
}

.paragraphe {
    color: var(--dark);
    font-weight: 300;
    font-size: clamp(1.2rem, 1.4vw, 3vh);
}
a {
    color: var(--nuit);
}
.taille-p{
    font-size: clamp(1.2rem, 1.4vw, 3vh);
}
.italic {
    font-style: italic;
    font-size: clamp(.8rem, 1.4vw, 3vh);
}
.gras{
    font-weight: 600;
    font-size: clamp(1.2rem, 1.4vw, 4vh);
}
.center{
    text-align: center;
}
.btn_jaune {
    display: flex;
    justify-content: center;
    z-index: 1;
}

.btn_jaune a {
    color: var(--ligth);
    background: linear-gradient(to bottom left, rgba(253, 205, 87, 0.6) 10%, rgba(253, 205, 87, 0.9));
    background-color: var(--ligth);
    padding: .3em 1.5em;
    border-radius: .3em;
    font-size: clamp(20px, 2vw, 4.28vh);
    font-weight: 400;
    box-shadow: .02em .02em max(2rem, 2vw) rgba(253, 205, 87, 0.6);
    transition: background-color 0.3s ease-in, transform 0.3s ease-out;
    text-shadow: .02em .02em max(.5rem, .5vw) rgba(5, 5, 45, .3);
}

.btn_jaune a:hover {
    background: linear-gradient(to top right, rgba(253, 205, 87, 0.6) 10%, rgba(253, 205, 87, 0.9));
    transform: scale(1.03);
}

.btn_blanc {
    display: flex;
    justify-content: center;
    z-index: 1;
    margin-top: clamp(2rem, 7vw, 11.69vh);
}

.btn_blanc a {
    color: var(--jaune);
    background: linear-gradient(to bottom left, var(--ligth) 10%, rgba(253, 205, 87, 0.07));
    background-color: var(--ligth);
    padding: .3em 1.5em;
    border-radius: .3em;
    font-size: clamp(20px, 2vw, 4.28vh);
    font-weight: 400;
    box-shadow: .02em .02em max(2rem, 2vw) rgba(253, 205, 87, 0.6);
    transition: background-color 0.3s ease-in, transform 0.3s ease-out;
}

.btn_blanc a:hover {
    background: linear-gradient(to top right, var(--ligth) 10%, rgba(253, 205, 87, 0.07));
    transform: scale(1.03);
}
@media (max-aspect-ratio: 138/100) {
    h1 {
        text-align: center;
    }
    .FAQ-box-parent{
        align-items: center;
    }
    .FAQ-box{
        width: max(320px, 90vw);
    }
}

@media (min-aspect-ratio: 138/100) {
    h1 {
        text-align: left;
    }

    .h1 {
        width: 80%;
    }
    .service-box:nth-child(2) {
        transform: translateX(1rem) translateY(-1rem) rotate(1deg);
    }
    
    .service-box:nth-child(3) {
        transform: translateX(-2rem) translateY(1rem) rotate(-0.5deg);
    }
    
    .service-box:nth-child(4) {
        transform: translateX(2rem) translateY(-2rem) rotate(0.5deg);
    }
    
    .service-box:nth-child(5) {
        transform: translateX(1rem) translateY(1rem) rotate(0deg);
    }
    .FAQ-box{
        width: max(320px, 60vw);
    }    
}
@keyframes slideright {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}
.fade{
    animation: fade linear;
    animation-timeline: view();
    animation-range-start: cover 0%;
    animation-range-end: contain 40%;
}
@keyframes fade {
    0% {
        opacity: 0;
    }
    50%{
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.fadescale{
    animation: fadescale linear;
    animation-timeline: view();
    animation-range-start: cover 0%;
    animation-range-end: contain 20%;
}
@keyframes fadescale {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
/*--###############--
--navigation--
--###############--*/
nav {
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar {
    width: auto;
    background-color: var(--ligth);
    height: clamp(2.5rem, 4vw, 9vh);
    border-radius: clamp(1rem, 1.4vw, 5rem);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: clamp(1.5rem, 2vw, 3.34vh);
    padding: 0 max(2rem, 3vw);
    gap: min(5vw, 15rem);
    box-shadow: .02vw .02vw 1vw rgba(5, 5, 45, 0.2);
    transition: background-color 0.3s ease;
}

nav.scrolled {
    position: fixed;
    z-index: 100;
    right: 50%;
    transform: translateX(50%);
}

.bouton-lien{
    color: var(--nuit);
    font-size: clamp(1.2rem, 1.5vw, 3vh);
    transition: color .2s ease-out;
}
.bouton-lien:hover{
    color: var(--bleu);
}

/*--###############--
--hero--
--###############--*/
#accueil {
    padding: 0 3vw;
}

#accueil.scrolled {
    padding-top: clamp(4.5rem, 7vw, 15vh);
}

h1 {
    position: relative;
    z-index: 50;
    font-size: clamp(3rem, 6.5vw, 13.9vh);
    margin: 2.5vh 0 clamp(2rem, 3vw, 5vh);
    text-shadow: 0 0 .1em rgb(66, 34, 220, 0.2);
}
.h1-bleu{
    transition: color .5s ease-in-out;
}
.hero-social-proof{
    margin: 0 clamp(2rem, 7vw, 11.69vh) clamp(2rem, 7vw, 11.69vh) 0;
}
.trait_horizontal {
    height: max(.15rem, .3vw);
    width: 0;
    /* Commence à 0 */
    background-color: var(--jaune);
    animation: expandWidth 2.5s forwards;
    /* 2s est la durée de l'animation, ajustez selon vos besoins */
}

@keyframes expandWidth {
    from {
        width: 0;
    }

    to {
        width: 12vw;
    }
}

.pattern_angle {
    height: clamp(5rem, 12vw, 30vh);
    width: max(5rem, 12vw);
    position: absolute;
    top: .8vw;
    left: .8vw;
    opacity: 0.8;
}

/*--###############--
--services--
--###############--*/
#services-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 13vw, 21.71vh);
    position: relative;
}

.service-box {
    background-color: var(--ligth);
    width: clamp(320px, 85vw, 260rem);
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: max(2rem, 3vw);
    position: sticky;
    top: 15vh;
    z-index: var(--index);
    box-shadow: .02em .02em max(1rem, 2vw) rgba(5, 5, 45, 0.2);
}
.card__content {
    --index0: calc(var(--index) - 1);
    /* Index basé sur 0 */
    --reverse-index: calc(var(--numcards) - var(--index0));
    /* Index inversé */
    --reverse-index0: calc(var(--reverse-index) - 1);
    /* Index inversé basé sur 0 */
    animation: scale 1s forwards;
    animation-timeline: scroll-timeline;
    animation-range: exit-crossing var(--start-range) exit-crossing var(--end-range);
}

@keyframes scale {
    to {
        transform: scale(calc(1.1 - calc(0.1 * var(--reverse-index))));
    }
}

@scroll-timeline scroll-timeline {
    scroll-source: auto;
    scroll-offsets: 0% 25% 50% 75% 100%;
}
.titre-service-box{
    padding:  clamp(2rem, 3vw, 5vh);
    display: flex;
    align-items: center;
    justify-content: center;
}
.titre_service{
    font-size: clamp(1.8rem, 4.5vw, 9.64vh);
    text-align: center;
    text-transform: uppercase;
    background: linear-gradient( to right, rgba(253, 205, 87, 0.8), rgba(253, 205, 87, 0.6));
  -webkit-background-clip: text; /* Utilisé pour les navigateurs WebKit */
  background-clip: text; /* Pour d'autres navigateurs modernes */
  color: transparent;
}
.content-service-box{
    padding: 0 clamp(2rem, 3vw, 5vh) clamp(2rem, 3vw, 5vh);
    display: flex;
    flex-direction: column;
    gap: 3vw;
}
.content-service-box ul{
    list-style: outside;
    display: flex;
    flex-direction: column;
    gap: 2vh;
}
/*--###############--
--social_proof--
--###############--*/
.social_proof p{
    text-align: center;
    margin-bottom: 2vh;
}
.slidesection {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin: 0 2vw clamp(2rem, 7vw, 11.69vh);
}
.box-parent {
    display: inline-block;
    display: flex;
    animation: 13s slideright infinite linear;
}
.box-parent img{
    height: clamp(4rem, 7vw, 11.69vh);
    width: auto;
    margin-left: min(5vw, 8.35vh);
}

/*--###############--
--problemes_solutions--
--###############--*/
.problemes_solutions{
    margin: clamp(2rem, 9vw, 15vh) 3vw 0;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 7vw, 11.69vh);
}
.problemes{
    display: flex;
    flex-direction: column;
    gap: 5vh;
}
.probleme{
    display: grid;
    grid-template-columns: 1fr 6fr;
}
.iconn{
    padding: 4px 2vw;
    display: flex;
    justify-content: flex-end; /* Aligne les éléments à droite */
    align-items: flex-start;
}
.iconn i{
    font-size: max(.9rem, 1.4vw);
    color: red;
}
.solutions{
    display: flex;
    flex-direction: column;
    gap: 5vh;
}
.solution{
    display: grid;
    grid-template-columns: 1fr 6fr;
}
.content-solution-probleme{
    display: flex;
    flex-direction: column;
}
.icon{
    padding: 2px 2vw;
    display: flex;
    justify-content: flex-end; /* Aligne les éléments à droite */
    align-items: flex-start;
}
.icon i{
    font-size: max(.9rem, 1.4vw);
    color: greenyellow;
}
/*--###############--
--offre--
--###############--*/
.titre-blanc{
    color: var(--ligth);
    text-align: center;
    font-size: clamp(1.9rem, 5.5vw, 11.8vh);
    font-weight: 700;
    margin: clamp(2rem, 9vw, 15vh) 2vw clamp(2rem, 7vw, 11.69vh);
}
#offre{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.box-offre {
    background-color: var(--ligth);
    width: clamp(320px, 85vw, 260rem);
    padding: max(1.5rem, 3vw) max(1.5rem, 3vw);
    display: flex;
    flex-direction: column;
    border-radius: max(2rem, 3vw);
    box-shadow: .02em .02em max(1rem, 3vw) rgba(255, 255, 255, 0.5);
    gap: clamp(1.2rem, 1vw, 1.69vh);
    margin-bottom: clamp(2rem, 7vw, 11.69vh);
}
.box-offre h4{
    text-align: center;
}
.specification-offre{
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 5vh);
}
.specification-offre i{
    font-size: clamp(1.2rem, 2.5vw, 5.35vh);
}
/*--###############--
--FAQ--
--###############--*/
.FAQ{
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    padding: 0 2vw clamp(2rem, 7vw, 11.69vh);
    width: 100%;
}
.FAQ-box-parent{
    display: flex;
    flex-direction: column;
    align-items: left;
    width: 100%;
    gap: clamp(1rem, 2vw, 3.34vh);
    margin-top: clamp(1.5rem, 2.5vw, 4.1vh);
}
.FAQ-box{
    display: flex;
    flex-direction: column;
    align-items: left;
    border-radius: max(.8rem, .8vw);
    padding: max(1rem, .5vw);
    box-shadow: .02em .02em max(1rem, 2vw) rgba(5, 5, 45, 0.1);
    gap: clamp(.8rem, .9vw, 1.5vh);
}
/*--###############--
--cta-final--
--###############--*/
.cta-final{
    display: flex;
    align-items: center;
    justify-content: center;
}
.FAQ-CTA{
    width: clamp(320px, 80vw, 240rem);
    display: flex;
    align-items: center;
    flex-direction: column;
    padding:  max(2rem, 3vw);
    border-radius: max(2rem, 3vw);
    z-index: var(--index);
    box-shadow: .02em .02em max(1rem, 2vw) rgba(5, 5, 45, 0.2);
    gap: clamp(1.5rem, 1.6vw, 2.7vh);
}
/*--###############--
--footer--
--###############--*/
.footer, .footer-mentions{
    background-color: var(--ligth);
    height: auto;
    margin-top: clamp(2rem, 7vw, 11.69vh);
    padding:  max(1rem, 2vw);
    gap: clamp(1.5rem, 1.6vw, 2.7vh);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    box-shadow: .02em .02em max(1rem, 2vw) rgba(5, 5, 45, 0.1);
}
.logos-liens{
    display: flex;
    gap: max(2rem, 5vw);
}
.logos-liens i{
    font-size: max(1.6rem, 1.4vw);
}
.petit-taille {
    font-size: clamp(.8rem, 1.4vw, 3vh);
    color: var(--dark);
    font-weight: 300;
}
/* ############# */
/* mentions légales */
/* ############# */

#mentions-legales {
    padding: 2vw;
}
#politique-confidentialite{
    padding: 2vw;
}
#politique-confidentialite ul{
    list-style: none;
}
.margin-top-3vw{
    margin-top: min(3vw, 5vh);
}
.fa-arrow-left{
    margin:  min(3vw, 5vh) min(3vw, 5vh) 0;
    font-size: clamp(1.5rem, 2.5vw, 6.6vh);
}