/* --- POLICES & VARIABLES --- */
@font-face {
    font-family: 'FK Grotesk';
    src: url('font/FoundersGrotesk/') format('woff2'); 
    font-weight: 400;
    font-style: normal;
}

:root {
    --bg-color: #F7F7ED;
    --text-dark: #2A1A4A; 
    --border-purple: #B28BFF; 
    --bg-btn-light: #E5DFED; 
}

/* --- DEFILEMENT FLUIDE --- */
html {
    scroll-behavior: smooth;
}

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

body {
    background-color: var(--bg-color);
    font-family: 'FK Grotesk', -apple-system, sans-serif;
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* --- BOUTONS --- */
.btn {
    display: inline-block;
    text-decoration: none;
    border-radius: 50px;
    transition: opacity 0.2s ease;
}

.btn:hover { opacity: 0.85; }

.btn-dark {
    background-color: var(--text-dark);
    color: #FFFFFF;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 500;
}

.btn-outline {
    background-color: var(--bg-btn-light);
    border: 1.5px solid var(--border-purple);
    color: var(--text-dark);
    padding: 16px 40px;
    font-size: 18px;
    font-weight: 400;
}

/* --- NAVBAR --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
    padding-bottom: 32px;
}

.logo img { height: 32px; display: block; }
.nav-links { display: flex; gap: 48px; }

.nav-links a {
    text-decoration: none; color: var(--text-dark);
    font-size: 15px; font-weight: 500;
}

.nav-links a.active {
    text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px;
}

/* --- HERO SECTION --- */
.hero {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    text-align: center;
    padding: 60px 20px 120px 20px;
    width: 100%; 
}

.hero-content {
    position: relative;
    display: inline-block; 
    perspective: 1000px; 
    margin-top: 40px;
}

.hero-title {
    font-size: 92px; 
    line-height: 0.92; 
    font-weight: 400; 
    letter-spacing: -3.5px; 
    margin-bottom: 32px;
    position: relative;
    z-index: 2;
}

.hero-subtitle {
    font-size: 22px;
    line-height: 1.4;
    font-weight: 400; 
    margin-bottom: 48px;
}

/* --- ANIMATION TEXTE (BLUR REVEAL) --- */
.blur-line {
    display: inline-block;
    opacity: 0;
    filter: blur(12px);
    transform: translateY(20px);
    animation: blurReveal 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: var(--delay); 
}

@keyframes blurReveal {
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* --- ICONES FLOTTANTES 3D --- */
.float-icon {
    position: absolute;
    z-index: 3;
    filter: drop-shadow(0px 15px 20px rgba(0,0,0,0.15)); 
}

.icon-blue {
    top: -20px; 
    right: -40px; 
    width: 70px; 
    animation: spin3D-blue 8s infinite linear;
}

.icon-green {
    bottom: 90px; 
    left: -70px; 
    width: 75px;
    animation: spin3D-green 12s infinite linear reverse;
}

.icon-purple {
    bottom: 0px; 
    right: -60px; 
    width: 80px;
    animation: spin3D-purple 10s infinite linear;
}

@keyframes spin3D-blue {
    0% { transform: rotate(15deg) rotateY(0deg) rotateX(10deg); }
    100% { transform: rotate(15deg) rotateY(360deg) rotateX(10deg); }
}
@keyframes spin3D-green {
    0% { transform: rotate(-10deg) rotateY(0deg) rotateX(-15deg); }
    100% { transform: rotate(-10deg) rotateY(360deg) rotateX(-15deg); }
}
@keyframes spin3D-purple {
    0% { transform: rotate(-25deg) rotateY(0deg) rotateX(20deg); }
    100% { transform: rotate(-25deg) rotateY(360deg) rotateX(20deg); }
}

/* --- LE BOUTON "PILL" --- */
.pills-container { 
    text-align: center; 
    margin-bottom: 24px; 
}

.pill {
    border: 1px solid rgba(42, 26, 74, 0.2); 
    border-radius: 40px;
    padding: 8px 24px; 
    font-size: 14px; 
    display: inline-block;
    color: var(--text-dark);
}

/* --- SECTION: COMMENT ÇA MARCHE --- */
.steps-section { 
    padding: 80px 20px; 
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-size: 72px; 
    line-height: 0.95;
    font-weight: 400;
    letter-spacing: -2.5px;
    color: var(--text-dark);
}

.steps-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px; 
}

/* Base des 3 cartes */
.step-card {
    border-radius: 24px; 
    padding: 40px 30px 30px 30px; 
    height: 520px; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between;
    position: relative; 
    overflow: hidden; 
}

.step-card h3 { 
    font-size: 26px; 
    line-height: 1.2; 
    font-weight: 400; 
    letter-spacing: -0.5px;
    position: relative;
    z-index: 2;
}

/* Couleurs EXACTES avec variable de fond pour la timeline */
.bg-purple-card { background-color: #5C4BFF; color: var(--text-dark); --card-bg: #5C4BFF; } 
.bg-green-card { background-color: #00FA9A; color: var(--text-dark); --card-bg: #00FA9A; }  
.bg-img-card { background-color: #000; color: #FFFFFF; --card-bg: transparent; }

/* Image de la carte 3 (Sans overlay) */
.card-bg-img { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; 
}

.bg-img-card h3,
.bg-img-card .timeline,
.bg-img-card .step-num {
    text-shadow: 0px 2px 15px rgba(0, 0, 0, 0.4);
}

.relative-z { position: relative; z-index: 2; }

/* LA CORRECTION POUR REMONTER LE TEXTE : justify-content: flex-start */
.card-top {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /* On enlève le justify-content: flex-start qui bloquait tout en haut */
    z-index: 2;
}

.card-bottom { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    width: 100%; 
    z-index: 2;
}

/* LA CORRECTION DES CHIFFRES (font-weight: 400 pour garder FK Grotesk) */
.step-num { 
    font-size: 96px; 
    font-weight: 400; 
    line-height: 0.75; 
    letter-spacing: -4px;
}

.arrow-btn {
    width: 44px; 
    height: 44px; 
    border-radius: 50%; 
    background-color: #FFFFFF;
    color: #1E1233;
    display: flex; 
    align-items: center; 
    justify-content: center;
}

/* --- LA TIMELINE (PARFAITE, REMONTÉE ET SANS QUEUE EN BAS) --- */
.timeline {
    list-style: none;
    margin-top: auto; /* C'est la clé : ça pousse le bloc tout en bas de l'espace disponible ! */
    margin-bottom: 24px; /* L'espace exact entre le dernier point et ton gros chiffre */
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 24px; 
}

.timeline::before {
    display: none; 
}

.timeline li {
    position: relative;
    padding-left: 36px; 
    font-size: 14px; /* Texte plus fin */
    font-weight: 500;
    display: flex; 
    align-items: center; 
    min-height: 20px; 
}

/* 1. Les cercles affinés */
.timeline li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px; 
    height: 20px;
    border-radius: 50%;
    border: 1px solid currentColor;
    background-color: var(--card-bg); 
    z-index: 2; 
    box-sizing: border-box; 
}

/* 2. Les segments de ligne (Uniquement entre les cercles) */
.timeline li::after {
    content: '';
    position: absolute;
    left: 9.5px; /* Centré pour cercle de 20px */
    top: 20px; 
    height: 24px; /* Traverse le gap */
    width: 1px;
    background-color: currentColor;
    opacity: 0.25; /* Discret */
    z-index: 1;
}

/* LA CORRECTION POUR COUPER LA LIGNE SOUS LE DERNIER CERCLE */
.timeline li:last-child::after {
    display: none !important; 
}

/* 3. États */
.timeline li.inactive { opacity: 0.25; } /* Inactifs plus discrets */
.timeline li.active { opacity: 1; }

.timeline li.active::before {
    background-color: currentColor;
}

.timeline li.active::after {
    opacity: 1; /* Ligne pleine entre les points actifs */
}

/* --- SECTION: VIDEO --- */
.video-section {
    padding: 100px 20px; 
}

/* La couleur violet clair pour la 2ème ligne du titre */
.text-light-purple {
    color: #B28BFF; /* Même violet clair que les bordures de tes boutons */
}

/* Le conteneur de la vidéo */
.video-container {
    width: 100%;
    max-width: 1000px; /* Largeur maximale pour que ce soit élégant */
    margin: 0 auto; /* Centre le bloc */
    border-radius: 24px; /* Même arrondi que tes cartes ! */
    overflow: hidden;
    background-color: var(--text-dark); /* Fond violet foncé temporaire si la vidéo met du temps à charger */
    aspect-ratio: 16 / 9; /* Format classique d'une vidéo */
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1); /* Petite ombre légère */
}

/* La vidéo en elle-même */
.promo-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* --- BOUTON PLAY VIDEO --- */
.video-container {
    position: relative; /* Assure que le bouton se positionne par rapport à la vidéo */
    cursor: pointer;
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centre parfaitement le bouton */
    width: 80px;
    height: 80px;
    background-color: #FFFFFF; /* Fond blanc */
    color: var(--text-dark); /* Icône foncée */
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.2s ease, opacity 0.3s ease;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15);
}

/* Petit effet de zoom au survol */
.play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Classe ajoutée en JavaScript pour cacher le bouton quand la vidéo tourne */
.play-btn.hidden {
    opacity: 0;
    pointer-events: none;
}
/* --- SECTION: TARIFS --- */
.pricing-section {
    padding: 100px 20px;
}

/* Alignement des 3 badges du haut */
.flex-pills {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.pricing-subtitle {
    font-size: 24px;
    line-height: 1.4;
    text-align: center;
    color: var(--text-dark);
    margin-top: 24px;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 60px;
}

/* --- DESIGN DES CARTES DE PRIX --- */
.price-card {
    border-radius: 20px;
    padding: 10px 10px 24px 10px; /* Laisse un "bord" coloré fin en haut/côtés, large en bas */
    display: flex;
    flex-direction: column;
}

/* Couleurs spécifiques (La 3ème a un violet plus doux) */
.bg-light-purple { background-color: #B584FF; }
.text-dark { color: var(--text-dark); }

.relative-card {
    position: relative;
}

/* Le bloc du haut (Crème) */
.price-header {
    background-color: var(--bg-color); /* Le même crème que le fond du site */
    border-radius: 16px;
    padding: 32px 24px;
    color: var(--text-dark);
}

.outline-pill {
    border: 1px solid var(--text-dark);
    margin-bottom: 40px;
}

.price-amount {
    font-size: 64px;
    font-weight: 400;
    letter-spacing: -3px;
    line-height: 1;
    margin-bottom: 8px;
}

.price-month {
    font-size: 32px;
    letter-spacing: -1px;
}

.price-target {
    font-size: 16px;
    font-weight: 500;
}

/* Le bloc du bas (Liste et bouton) */
.price-body {
    padding: 32px 14px 0 14px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.price-features {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.price-features li {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 400;
}

/* --- ICONES DE LA LISTE --- */
.icon-check {
    width: 20px;
    height: 20px;
    background-color: var(--text-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-check svg {
    width: 12px;
    height: 12px;
}

.icon-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}
.dot-green { background-color: #00FA9A; }
.dot-purple { background-color: #C19EFF; } /* Violet doux pour le point */

/* --- BOUTON PLEINE LARGEUR --- */
.btn-full {
    width: 100%;
    text-align: center;
}

/* --- BADGE POPULAIRE --- */
.badge-populaire {
    position: absolute;
    top: -16px;
    right: 16px;
    background-color: #FF0000; /* Rouge vif Framer */
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
    padding: 8px 20px;
    border-radius: 40px;
    z-index: 10;
}
/* --- SECTION: TÉMOIGNAGES --- */
.testimonials-section {
    padding: 100px 0;
    overflow: hidden; /* Cache les images qui sortent de l'écran */
}

.testimonial-slider {
    margin-top: 60px;
    width: 100%;
    position: relative;
}

/* La piste qui défile */
/* --- L'ANIMATION MARQUEE FLUIDE --- */
.testimonial-track {
    display: flex;
    gap: 24px; /* L'espace entre les cards */
    width: max-content;
    /* 40s pour une vitesse douce comme sur ta vidéo. 'linear' est obligatoire pour la fluidité. */
    animation: scrollInfinite 40s linear infinite;
}

/* On désactive la pause au survol si tu veux que ça ne s'arrête JAMAIS comme sur la vidéo */
.testimonial-track:hover {
    animation-play-state: running; 
}

@keyframes scrollInfinite {
    0% {
        transform: translateX(0);
    }
    100% {
        /* On décale exactement de la moitié du track (puisqu'on a doublé les images) */
        transform: translateX(calc(-50% - 12px)); /* 12px = la moitié du gap pour un raccord invisible */
    }
}

.testimonial-track img {
    height: 320px; /* Ajuste selon la hauteur de tes exports Figma */
    width: auto;
    border-radius: 24px;
}

/* Navigation Arrows */
.testimonial-nav {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 60px;
}

.nav-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid rgba(42, 26, 74, 0.1);
    background-color: #F4F4EB; /* La couleur crème claire des boutons sur ta capture */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: var(--text-dark);
}

.nav-btn:hover {
    background-color: #EBEBE2;
    transform: scale(1.05);
}

.nav-btn svg {
    width: 28px;
    height: 28px;
}
/* CTA FINAL */

.cta-final {
    padding: 120px 20px 100px;
    text-align: center;
}

.cta-title {
    font-size: 82px;
    line-height: 0.95;
    letter-spacing: -3px;
    margin-bottom: 24px;
    color: var(--text-dark);
    font-weight: 400;
}

.cta-subtitle {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 40px;
    opacity: 0.8;
}

.btn-dark-large {
    background-color: var(--text-dark);
    color: white;
    padding: 18px 48px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.btn-dark-large:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* VARIABLES (si pas déjà définies en haut de ton CSS) */
:root {
    --text-dark: #2A1A4A; /* Couleur du texte foncé */
    --footer-bg: #B584FF; /* Le violet du fond de la box */
}

/* --- FOOTER ÉCARTÉ (FLÈCHES ROUGES) --- */
.footer-section {
    padding: 80px 0 0 0;
    width: 100%;
}

.footer-box {
    background-color: #B28BFF;
    border-radius: 40px 40px 0 0;
    padding: 80px 0 0 0; /* 0 en bas pour le logo */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.footer-top-content {
    display: flex;
    justify-content: space-between; /* C'est ce qui pousse vers les bords ! */
    padding: 0 80px; /* Ajuste ce chiffre pour éloigner + ou - du bord */
    margin-bottom: 80px;
    width: 100%;
}

/* Groupe les deux colonnes de liens à gauche */
.footer-links-wrapper {
    display: flex;
    gap: 120px; /* Espace entre 'Liens utiles' et 'Légal' */
}

.footer-col h4 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 24px;
    color: var(--text-dark);
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    text-decoration: none;
    color: var(--text-dark);
    font-size: 19px;
    opacity: 0.8;
}

/* Newsletter à droite */
.footer-newsletter {
    text-align: left; /* Garde le texte aligné à gauche du bloc newsletter */
}

.footer-newsletter p {
    font-size: 19px;
    margin-bottom: 20px;
}

.newsletter-input-group {
    display: flex;
    border-bottom: 1.5px solid var(--text-dark);
    padding-bottom: 8px;
    width: 320px; /* Largeur fixe pour le champ email */
}

.newsletter-input-group input {
    background: transparent;
    border: none;
    outline: none;
    font-size: 18px;
    flex-grow: 1;
}

.newsletter-input-group button {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

/* LOGO GÉANT */
.footer-logo-wrap {
    width: 100%;
    line-height: 0;
}

.img-giant {
    width: 100%;
    height: auto;
    display: block;
}

/* --- STYLE DU PRELOADER --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color); /* Ton beige F7F7ED */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.8s;
}

#loader-content {
    font-size: 120px;
    font-weight: 600;
    color: var(--text-dark); /* Ton violet foncé 2A1A4A */
    letter-spacing: -5px;
}

.pct { font-size: 40px; letter-spacing: 0; margin-left: 10px; }

/* --- ANIMATIONS AU SCROLL (SCROLL REVEAL) --- */
/* On prépare les éléments qui vont apparaître */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(10px);
    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Classe ajoutée par le JavaScript quand on scrolle */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Optionnel : On peut ajouter un petit délai pour les cartes */
.steps-grid .step-card:nth-child(2) { transition-delay: 0.1s; }
.steps-grid .step-card:nth-child(3) { transition-delay: 0.2s; }
.pricing-grid .price-card:nth-child(2) { transition-delay: 0.1s; }
.pricing-grid .price-card:nth-child(3) { transition-delay: 0.2s; }

/* ============================================================
   RESPONSIVE DESIGN (MOBILE & TABLETTE)
   ============================================================ */

@media (max-width: 1024px) {
    .container { padding: 0 24px; }
    .hero-title, .cta-title { font-size: 72px; }
    .section-title { font-size: 56px; }
}

@media (max-width: 768px) {
    /* --- NAVBAR --- */
    .nav-links { display: none; } /* On cache les liens pour simplifier (ou faire un menu burger plus tard) */
    
    /* --- HERO --- */
    .hero { padding: 40px 0 80px; }
    .hero-title { font-size: 48px; letter-spacing: -2px; }
    .hero-subtitle { font-size: 18px; }
    .float-icon { display: none; } /* On cache les icones flottantes qui gênent sur mobile */

    /* --- GRILLES (Passage en 1 colonne) --- */
    .steps-grid, .pricing-grid, .footer-grid, .footer-top-content {
        grid-template-columns: 1fr !important;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    /* --- COMMENT ÇA MARCHE --- */
    .section-title { font-size: 42px; text-align: left; }
    .step-card { height: auto; min-height: 450px; }
    .step-num { font-size: 72px; }

    /* --- TARIFS --- */
    .price-card { min-height: auto; }
    .price-amount { font-size: 64px; }
    .flex-pills { flex-wrap: wrap; justify-content: flex-start; }

    /* --- TESTIMONIALS --- */
    .marquee-track img { height: 250px; } /* On réduit la taille des cartes */
    .nav-btn { width: 60px; height: 60px; }

    /* --- CTA FINAL --- */
    .cta-final { padding: 80px 0; }
    .cta-title { font-size: 48px; letter-spacing: -2px; }
    .btn-dark-large { width: 100%; padding: 18px; }

    /* --- FOOTER --- */
    .footer-box { padding: 40px 24px 0 24px; border-radius: 24px 24px 0 0; }
    .footer-top-content { padding: 0; margin-bottom: 40px; }
    .footer-links-wrapper { flex-direction: column; gap: 32px; }
    .newsletter-input-group { width: 100%; }
    .footer-logo-giant-container { margin-top: 40px; }
}

/* Ajustement pour les très petits écrans (iPhone SE, etc.) */
@media (max-width: 480px) {
    .hero-title, .cta-title { font-size: 38px; }
    .section-title { font-size: 34px; }
}