/* ==========================================================================
   Hero page d'accueil - variante "split"
   Colonne gauche : titre / description / CTA. Colonne droite : carte de suivi.
   Namespace .hero-split pour cohabiter avec les heros existants sans collision.
   Reutilise les tokens de variables.css et les boutons de buttons.css.
   ========================================================================== */

/* Le scale des mockups deborde de la section : on rogne ce debordement pour
   qu'il reste decoratif et ne cree pas de scroll horizontal (mobile et desktop) */
.hero-split {
    overflow-x: clip;
}

.hero-split::before {
    background:
        radial-gradient(circle at 82% 18%, rgba(27, 75, 203, 0.16) 0%, rgba(27, 75, 203, 0) 58%),
        linear-gradient(180deg, var(--color-primary-blue-50) 0%, #FFFFFF 100%);
}

.hero-split-inner {
    grid-column: content;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
    align-items: center;
    /* Gap vertical reduit : il separe la rangee titre/visuel de la bande de confiance */
    gap: 32px 72px;
    width: 100%;
    max-width: 1268px;
    margin: 0 auto;
    /* Pas de padding horizontal : la gouttiere est deja portee par .liquid, et
       le hero doit s'aligner sur les sections suivantes. */
    padding: 160px 0 90px;
}

/* --------------------------------------------------------------------------
   Colonne gauche
   -------------------------------------------------------------------------- */

.hero-split-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.hero-split-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 18px;
    color: var(--color-primary-blue-900);
    margin-bottom: 20px;
}

.hero-split-badge-dot {
    width: 6px;
    height: 6px;
    background-color: var(--color-primary-blue-500);
}

.hero-split-title {
    font-size: 54px;
    font-weight: var(--font-weight-medium);
    line-height: 58px;
    letter-spacing: -1px;
    color: var(--color-neutral-500);
    margin: 0 0 22px;
}

.hero-split-title-accent {
    color: var(--color-primary-blue-600);
}

.hero-split-lead {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    line-height: 26px;
    color: var(--color-neutral-300);
    margin: 0 0 32px;
    max-width: 540px;
}

.hero-split-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-split-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
}

/* Reassurance avis, sous les CTA. Purement informatif : aucun lien, le logo
   Trustpilot garde ses couleurs de marque. */
.hero-split-review {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 0;
}

.hero-split-review-logo {
    display: block;
    height: 22px;
    width: auto;
    /* Dans le SVG fourni, l'etoile deborde en haut et le mot "Trustpilot"
       occupe le bas du viewBox : son centre optique tombe a 68 % de la
       hauteur. Centrer l'image posait donc le lettrage sous la ligne du
       texte voisin - on le remonte de l'ecart (18 % de la hauteur). */
    transform: translateY(-18%);
}

.hero-split-review-text {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 18px;
    color: var(--color-primary-blue-500);
}

.hero-split-proof-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 18px;
    color: var(--color-primary-blue-500);
}

/* --------------------------------------------------------------------------
   Colonne droite - mockups mobiles du parcours (SVG exporte de Figma)
   -------------------------------------------------------------------------- */

.hero-split-visual {
    display: flex;
    justify-content: flex-end;
    /* Cale le visuel en bas de sa rangee : la coupe descend jusqu'au trait
       horizontal de la bande de confiance (-32px = row-gap de la grille) */
    align-self: end;
    clip-path: inset(-999px -999px -32px -999px);
}

.hero-split-phones {
    /* Zoom sans ligne de coupe : fond transparent, debordement libre en
       haut et a gauche. La marge droite etend l'image dans la gouttiere
       jusqu'a ~14px du bord du cadre bleu du hero (le ::before de
       .hero-section, centre et plafonne a 1480px) - jamais au-dela, et
       jamais coupe. Les 5.6% compensent la marge transparente interne
       de l'export. */
    width: 145%;
    max-width: none;
    height: auto;
    display: block;
    margin: -12% calc(min(-16px, (1268px - min(100vw, 1480px)) / 2) - 5.6% + 14px) -18.8% -45%;
}

/* --------------------------------------------------------------------------
   Bande de confiance - logos partenaires + certifications
   -------------------------------------------------------------------------- */

.hero-split-trust {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 28px;
    padding-top: 26px;
    border-top: 1px solid var(--color-primary-blue-100);
}

.hero-split-trust-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 16px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--color-neutral-100);
    margin: 0;
}

.hero-split-trust-logos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Boite de hauteur commune : quelle que soit la hauteur propre du logo, tous
   partagent le meme axe median, donc la ligne reste alignee. */
.hero-split-trust-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
}

.hero-split-trust-logo {
    display: block;
    /* Hauteur optique par marque : a hauteur egale, un wordmark en capitales
       pese bien plus qu'un logo en minuscules ou qu'un bloc a deux lignes.
       On egalise la masse percue, pas la mesure. */
    height: var(--hero-logo-height, 20px);
    width: auto;
    max-width: 130px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.hero-split-trust-logo--qonto {
    --hero-logo-height: 20px;
}

/* Bloc a deux lignes ("keobiz" + la mention Kerogo Finance) : il lui faut plus
   de hauteur totale pour que le mot principal pese comme les autres. */
.hero-split-trust-logo--keobiz {
    --hero-logo-height: 26px;
}

.hero-split-trust-logo--kandbaz {
    --hero-logo-height: 17px;
}

.hero-split-trust-logo-item:hover .hero-split-trust-logo {
    filter: grayscale(0);
    opacity: 1;
}

.hero-split-trust-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    /* Pousse les badges a droite, sur la meme ligne que le label et les logos */
    margin: 0 0 0 auto;
    padding: 0;
}

.hero-split-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--color-primary-blue-100);
    border-radius: 99px;
    background: #FFFFFF;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 16px;
    color: var(--color-primary-blue-700);
}

.hero-split-trust-badge svg {
    flex: 0 0 auto;
    color: var(--color-primary-blue-500);
}

.hero-split-trust-badge-item {
    display: flex;
}

.hero-split-trust-badge--link {
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.hero-split-trust-badge--link:hover {
    border-color: var(--color-primary-blue-400);
    color: var(--color-primary-blue-900);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .hero-split-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
        gap: 48px;
    }

    .hero-split-title {
        font-size: 44px;
        line-height: 50px;
    }

    /* Colonne visuelle plus etroite : zoom reduit pour que le report a
       gauche ne chevauche pas le bloc de texte */
    .hero-split-phones {
        width: 130%;
        margin: -8% calc(-16px - 5% + 14px) -13.3% -30%;
    }

    /* Le row-gap passe a 48px a ce breakpoint */
    .hero-split-visual {
        clip-path: inset(-999px -999px -48px -999px);
    }
}

@media (max-width: 1024px) {
    .hero-split-inner {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 48px;
        padding: 140px 0 70px;
    }

    .hero-split-text {
        align-items: center;
        text-align: center;
        max-width: 680px;
    }

    .hero-split-actions,
    .hero-split-review,
    .hero-split-proof {
        justify-content: center;
    }

    .hero-split-visual {
        justify-content: center;
        width: 100%;
        /* En colonne unique l'image ne doit pas chevaucher le texte :
           on revient a un recadrage par le conteneur */
        overflow: hidden;
    }

    /* Haut jamais coupe sur mobile : pas de marge negative en haut,
       le recadrage ne joue que sur les cotes et le bas */
    .hero-split-phones {
        margin: 0 -30% -35.3%;
    }

    .hero-split-trust {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .hero-split-trust-logos,
    .hero-split-trust-badges {
        justify-content: center;
    }

    .hero-split-trust-badges {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .hero-split-visual {
        /* Respire davantage sous la liste de preuves */
        margin-top: 20px;
    }

    .hero-split-title {
        font-size: 40px;
        line-height: 46px;
        letter-spacing: -0.6px;
    }

    .hero-split-lead {
        font-size: var(--font-size-base);
        line-height: 22px;
    }

    .hero-split-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .hero-split-inner {
        padding: 120px 0 50px;
        gap: 36px;
    }

    /* Le titre casse naturellement sur mobile, le <br> creerait une veuve */
    .hero-split-title br {
        display: none;
    }

    .hero-split-trust-logos {
        gap: 12px 22px;
    }

    .hero-split-trust-logo {
        height: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
}