/* =========================================================
   SBI HOME RESPONSIVE
   ---------------------------------------------------------
   Ajustements desktop pour la home.
   Objectif :
   - garder le bloc "Aide à l'embauche" aligné avec le bloc fondateur
   - supprimer le décalage magique qui bouge selon la largeur écran
   - ne pas modifier le comportement mobile existant
   ========================================================= */

/* ---------------------------------------------------------
   DESKTOP / LAPTOP LARGE
   Le bloc aide reste aligné verticalement avec le bloc fondateur.
   --------------------------------------------------------- */
@media (min-width: 1181px) {
    .section-stats .stats-grid {
        align-items: center;
    }

    .section-stats .calculator-cta-box {
        margin-top: 0;
    }
}

/* ---------------------------------------------------------
   DESKTOP INTERMÉDIAIRE
   On garde les deux colonnes, mais on resserre proprement.
   --------------------------------------------------------- */
@media (min-width: 1181px) and (max-width: 1760px) {
    .section-stats .stats-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(1.5rem, 2vw, 2rem);
    }

    .section-stats .founder-block {
        gap: clamp(1.5rem, 2.2vw, 2.4rem);
    }

    .section-stats .founder-img-wrapper {
        width: 38%;
    }

    .section-stats .quote-content {
        width: 62%;
        padding: clamp(2.2rem, 2.5vw, 3rem);
    }

    .section-stats .calculator-panel {
        --panel-slant: clamp(54px, 4vw, 76px);
        grid-template-columns: minmax(0, 1fr) 32%;
        min-height: clamp(300px, 22vw, 315px);
    }

    .section-stats .calculator-panel-main {
        padding:
            clamp(1.8rem, 2vw, 2.05rem)
            calc(clamp(1.7rem, 2vw, 2.25rem) + var(--panel-slant))
            clamp(1.55rem, 1.8vw, 1.8rem)
            clamp(1.7rem, 2vw, 2.25rem);
    }

    .section-stats .calculator-panel-side {
        padding:
            clamp(1.6rem, 2vw, 2rem)
            clamp(1.35rem, 1.8vw, 1.8rem)
            clamp(1.6rem, 2vw, 2rem)
            calc(var(--panel-slant) + 1rem);
    }

    .section-stats .display-amount {
        font-size: clamp(3.85rem, 4.8vw, 5.2rem);
    }

    .section-stats .cta-description {
        max-width: 520px;
        font-size: clamp(0.92rem, 1vw, 1.02rem);
    }

    .section-stats .cta-benefits {
        gap: 0.7rem;
    }

    .section-stats .benefit-tag {
        padding: 0.7rem 0.9rem;
        font-size: clamp(0.66rem, 0.72vw, 0.74rem);
    }
}

/* ---------------------------------------------------------
   ZONE PLUS ÉTROITE MAIS ENCORE DESKTOP
   On garde l'alignement, sans forcer l'empilement.
   --------------------------------------------------------- */
@media (min-width: 1461px) and (max-width: 1760px) {
    .section-stats .stats-grid {
        grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    }

    .section-stats .founder-block {
        gap: 1.35rem;
    }

    .section-stats .founder-img-wrapper {
        width: 36%;
    }

    .section-stats .quote-content {
        width: 64%;
        padding: 2rem;
    }

    .section-stats .calculator-panel {
        grid-template-columns: minmax(0, 1fr) 28%;
    }

    .section-stats .display-amount {
        font-size: clamp(3.55rem, 4.7vw, 4.35rem);
    }

    .section-stats .cta-main-content {
        margin-bottom: 1.15rem;
    }

    .section-stats .cta-benefits {
        margin-bottom: 1.1rem;
    }

    .section-stats .btn-calc-neon {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* ---------------------------------------------------------
   TABLETTE / MOBILE
   On laisse le CSS global faire son empilement existant.
   --------------------------------------------------------- */
@media (max-width: 1180px) {
    .section-stats .stats-grid {
        align-items: start;
    }
}

/* ---------------------------------------------------------
   DESKTOP ART DIRECTION LOCK
   Image reference: portrait / founder quote / hiring-aid panel
   stay as three distinct sport-tech panels on desktop.
   --------------------------------------------------------- */
@media (min-width: 1461px) {
    .section-stats {
        padding-top: clamp(4.5rem, 7vw, 7.25rem);
        padding-bottom: clamp(4.5rem, 7vw, 7.25rem);
        background:
            radial-gradient(circle at 8% 85%, rgba(0, 81, 255, 0.12), transparent 28%),
            linear-gradient(180deg, rgba(2, 5, 11, 0.08), rgba(2, 5, 11, 0.28));
    }

    .section-stats .stats-grid {
        display: grid;
        grid-template-columns:
            minmax(300px, 0.74fr)
            minmax(320px, 0.88fr)
            minmax(680px, 2.35fr);
        gap: clamp(0.9rem, 1.45vw, 1.45rem);
        align-items: center;
        max-width: 1720px;
        margin-right: auto;
        margin-left: auto;
    }

    .section-stats .founder-block {
        display: contents;
    }

    .section-stats .founder-img-wrapper {
        grid-column: 1;
        width: 100%;
        max-width: clamp(300px, 22vw, 430px);
        justify-self: end;
    }

    .section-stats .founder-img {
        display: block;
        width: 100%;
        height: clamp(390px, 28vw, 540px);
        aspect-ratio: auto;
        object-position: center top;
        filter: none;
    }

    .section-stats .quote-content {
        grid-column: 2;
        width: 100%;
        max-width: none;
        min-height: 0;
        padding: clamp(1.75rem, 2vw, 2.35rem);
        align-self: center;
        justify-self: center;
        background:
            linear-gradient(180deg, rgba(9, 14, 27, 0.96), rgba(6, 10, 20, 0.96));
        border-color: rgba(116, 180, 255, 0.28);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.035),
            0 18px 44px rgba(0, 0, 0, 0.18);
    }

    .section-stats .quote-mark {
        top: 2.15rem;
        left: -0.56rem;
        color: rgba(0, 81, 255, 0.72);
        text-shadow: 0 0 18px rgba(0, 81, 255, 0.28);
    }

    .section-stats .quote-content blockquote {
        max-width: 100%;
        font-size: clamp(0.98rem, 1.08vw, 1.15rem);
        line-height: 1.2;
        margin-top: 0.2rem;
        margin-bottom: 0.9rem;
    }

    .section-stats .quote-sub {
        max-width: 100%;
        margin-bottom: clamp(1rem, 1.4vw, 1.55rem);
        font-size: clamp(0.74rem, 0.76vw, 0.84rem);
        line-height: 1.48;
    }

    .section-stats .signature-text {
        font-size: clamp(2rem, 2.35vw, 2.75rem);
    }

    .section-stats .sbi-signal-founder {
        top: 50%;
        right: -17px;
    }

    .section-stats .calculator-cta-box {
        grid-column: 3;
        width: 100%;
        margin-top: 0;
        align-self: center;
    }

    .section-stats .calculator-panel {
        --panel-slant: clamp(28px, 2.5vw, 44px);
        grid-template-columns: minmax(0, 1fr) minmax(118px, 22%);
        min-height: clamp(280px, 19vw, 340px);
        height: auto;
        max-height: none;
    }

    .section-stats .calculator-panel-main {
        padding:
            clamp(1.45rem, 1.75vw, 2.15rem)
            calc(clamp(1.25rem, 1.45vw, 1.85rem) + var(--panel-slant))
            clamp(1.25rem, 1.45vw, 1.7rem)
            clamp(1.45rem, 1.75vw, 2.15rem);
    }

    .section-stats .calculator-panel-side {
        padding:
            clamp(1.35rem, 1.6vw, 1.8rem)
            clamp(0.9rem, 1.2vw, 1.35rem)
            clamp(1.35rem, 1.6vw, 1.8rem)
            calc(var(--panel-slant) + 0.45rem);
    }

    .section-stats .display-amount {
        white-space: nowrap;
        font-size: clamp(3.75rem, 4.95vw, 5.85rem);
    }

    .section-stats .cta-description {
        max-width: 640px;
        font-size: clamp(0.9rem, 0.98vw, 1.06rem);
        line-height: 1.42;
    }

    .section-stats .cta-main-content {
        margin-bottom: clamp(0.8rem, 1vw, 1.05rem);
    }

    .section-stats .cta-benefits {
        gap: 0.55rem;
        margin-bottom: clamp(0.75rem, 0.9vw, 1rem);
    }

    .section-stats .benefit-tag {
        min-height: 0;
        padding: 0.62rem 0.84rem;
        font-size: clamp(0.58rem, 0.66vw, 0.74rem);
    }

    .section-stats .btn-calc-neon {
        width: min(100%, 600px);
        padding: clamp(0.86rem, 1vw, 1.08rem) 1.25rem;
        padding-right: 2.45rem;
        font-size: clamp(0.84rem, 0.9vw, 0.98rem);
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
    }

    .section-stats .cta-note {
        margin-top: 0.7rem;
        font-size: 0.68rem;
    }

    .section-stats .calculator-side-icon svg {
        width: clamp(64px, 5vw, 92px);
        height: clamp(64px, 5vw, 92px);
    }
}

@media (min-width: 1461px) and (max-width: 1760px) {
    .section-stats .stats-grid {
        grid-template-columns:
            minmax(260px, 0.68fr)
            minmax(280px, 0.78fr)
            minmax(620px, 2.25fr);
        gap: clamp(0.75rem, 1.15vw, 1.15rem);
    }

    .section-stats .founder-img-wrapper {
        max-width: clamp(280px, 22vw, 360px);
    }

    .section-stats .founder-img {
        height: clamp(375px, 29vw, 455px);
    }

    .section-stats .quote-content {
        max-width: none;
        padding: clamp(1.45rem, 1.7vw, 1.85rem);
    }

    .section-stats .quote-content blockquote {
        font-size: clamp(0.96rem, 1.18vw, 1.08rem);
    }

    .section-stats .calculator-panel {
        --panel-slant: clamp(26px, 2.4vw, 42px);
        grid-template-columns: minmax(0, 1fr) minmax(108px, 22%);
        min-height: clamp(282px, 22vw, 322px);
        height: auto;
    }

    .section-stats .calculator-panel-main {
        padding:
            clamp(1.2rem, 1.45vw, 1.6rem)
            calc(clamp(0.95rem, 1.15vw, 1.25rem) + var(--panel-slant))
            clamp(1rem, 1.15vw, 1.25rem)
            clamp(1.2rem, 1.45vw, 1.6rem);
    }

    .section-stats .calculator-panel-side {
        padding-left: calc(var(--panel-slant) + 0.35rem);
    }

    .section-stats .display-amount {
        font-size: clamp(3.35rem, 4.65vw, 4.8rem);
    }

    .section-stats .cta-description {
        font-size: clamp(0.82rem, 0.96vw, 0.94rem);
        line-height: 1.4;
    }

    .section-stats .cta-main-content {
        margin-bottom: clamp(0.62rem, 0.8vw, 0.85rem);
    }

    .section-stats .cta-benefits {
        gap: 0.5rem;
        margin-bottom: clamp(0.62rem, 0.85vw, 0.9rem);
    }

    .section-stats .benefit-tag {
        padding: 0.55rem 0.68rem;
        font-size: clamp(0.54rem, 0.62vw, 0.62rem);
    }

    .section-stats .btn-calc-neon {
        width: min(100%, 540px);
        padding-top: 0.78rem;
        padding-bottom: 0.78rem;
        font-size: clamp(0.76rem, 0.88vw, 0.88rem);
    }

    .section-stats .cta-note {
        margin-top: 0.55rem;
        font-size: 0.62rem;
    }

    .section-stats .calculator-side-icon svg {
        width: clamp(58px, 4.8vw, 78px);
        height: clamp(58px, 4.8vw, 78px);
    }
}


/* SBI 8.0P.13 - founder natural image override */
.section-stats .founder-img {
    filter: none !important;
}

/* SBI 8.0P.34 - Desktop wide founder ratio lock
   On garde l’élargissement desktop de P33, mais on remet la photo fondateur
   sur le ratio visuel historique : plus portrait, moins écrasé en largeur.
   Scope strictement desktop large, aucun changement mobile/tablette. */
@media (min-width: 1761px) {
    .section-stats .stats-grid {
        width: 100%;
        max-width: none;
        grid-template-columns:
            minmax(390px, 500px)
            minmax(350px, 440px)
            minmax(720px, 1fr);
        gap: clamp(1rem, 1.25vw, 1.45rem);
    }

    .section-stats .founder-img-wrapper {
        justify-self: start;
        width: 100%;
        max-width: min(100%, clamp(400px, 23vw, 540px));
    }

    .section-stats .founder-img {
        height: clamp(510px, 29.3vw, 688px);
    }

    .section-stats .quote-content {
        justify-self: stretch;
    }

    .section-stats .calculator-cta-box {
        justify-self: stretch;
        width: 100%;
    }

    .section-stats .calculator-panel {
        --panel-slant: clamp(26px, 2.2vw, 42px);
        grid-template-columns: minmax(0, 1fr) minmax(110px, 20%);
        min-height: clamp(330px, 18vw, 380px);
    }

    .section-stats .calculator-panel-main {
        padding:
            clamp(1.55rem, 1.75vw, 2.2rem)
            calc(clamp(1.2rem, 1.35vw, 1.65rem) + var(--panel-slant))
            clamp(1.25rem, 1.4vw, 1.65rem)
            clamp(1.55rem, 1.75vw, 2.2rem);
    }

    .section-stats .calculator-panel-side {
        padding-left: calc(var(--panel-slant) + 0.4rem);
    }

    .section-stats .cta-description {
        max-width: 680px;
    }

    .section-stats .btn-calc-neon {
        width: min(100%, 620px);
    }
}