/* ==================================================================
   REFERENCES CLIENTS
   ================================================================== */

/* ==================================================================
   REFERENCES CLIENTS
   ================================================================== */


/* HERO */

.hero--references-clients {
    min-height: 850px;
}

.references-hero__content {
    position: relative;
    z-index: 3;
}


/* Même cadence que les autres pages */

.hero--references-clients
.references-hero__content .eyebrow.reveal {
    transition-delay: 40ms;
}

.hero--references-clients
.references-hero__content h1.reveal {
    transition-delay: 110ms;
}

.hero--references-clients
.references-hero__content .hero-lead.reveal {
    transition-delay: 180ms;
}

.hero--references-clients
.references-hero__content .hero-actions.reveal {
    transition-delay: 250ms;
}

.hero--references-clients
.references-hero__content .hero-meta.reveal {
    transition-delay: 320ms;
}


/* HERO VISUAL */

.references-hero-visual {
    min-height: 580px;
    position: relative;
}

.hero--references-clients
.references-hero-visual.reveal {
    transform: translateX(38px) scale(.985);
    transition-delay: 140ms;
}

.references-hero-visual.reveal.is-visible {
    transform: translateX(0) scale(1);
}

.references-hero-board {
    position: absolute;
    inset: 28px 0 52px 18px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 14px;

    padding: 22px;

    overflow: hidden;

    border: 1px solid rgba(39, 50, 99, .12);
    border-radius: var(--radius-lg);

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(255, 123, 0, .20),
            transparent 34%
        ),
        var(--navy-950);

    box-shadow:
        0 45px 90px rgba(20, 27, 66, .24);

    --hero-float-rotate: 0deg;

    animation:
        fgHeroMainFloat 7s
        ease-in-out infinite;
}

.references-hero-board::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            125deg,
            rgba(255,255,255,.08),
            transparent 42%
        );

    pointer-events: none;
}


/* HERO LOGOS */

.references-hero-logo {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;

    padding: 14px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius-md);

    box-shadow:
        0 16px 34px rgba(7, 12, 38, .18);

    opacity: 0;

    transform:
        translateY(55px)
        scale(.78)
        rotate(-5deg);

    background: rgba(255,255,255,.98);
}

.references-hero-logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.references-hero-visual.reveal.is-visible
.references-hero-logo {
    animation:
        referencesHeroLogoIn 850ms
        cubic-bezier(.16, 1, .3, 1) both;
}

.references-hero-visual.reveal.is-visible
.references-hero-logo:nth-child(1) {
    animation-delay: 260ms;
}

.references-hero-visual.reveal.is-visible
.references-hero-logo:nth-child(2) {
    animation-delay: 350ms;
}

.references-hero-visual.reveal.is-visible
.references-hero-logo:nth-child(3) {
    animation-delay: 440ms;
}

.references-hero-visual.reveal.is-visible
.references-hero-logo:nth-child(4) {
    animation-delay: 530ms;
}

.references-hero-visual.reveal.is-visible
.references-hero-logo:nth-child(5) {
    animation-delay: 620ms;
}

.references-hero-visual.reveal.is-visible
.references-hero-logo:nth-child(6) {
    animation-delay: 710ms;
}

@keyframes referencesHeroLogoIn {

    0% {
        opacity: 0;

        transform:
            translateY(55px)
            scale(.78)
            rotate(-5deg);
    }

    65% {
        opacity: 1;

        transform:
            translateY(-7px)
            scale(1.04)
            rotate(1deg);
    }

    100% {
        opacity: 1;
        transform: none;
    }

}


/* HERO BADGE */

.references-hero-badge {
    position: absolute;
    z-index: 5;

    left: -16px;
    bottom: 17px;

    display: flex;
    align-items: center;
    gap: 15px;

    padding: 16px 20px;

    border: 1px solid rgba(39, 50, 99, .12);
    border-radius: var(--radius-md);

    background: rgba(255,255,255,.97);

    box-shadow:
        0 25px 55px rgba(20, 27, 66, .20);

    backdrop-filter: blur(12px);

    animation:
        floatCard 5s 1.1s
        ease-in-out infinite;
}





.references-hero-badge > span {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 48px;

    border-radius: 50%;

    color: var(--white);
    background: var(--gradient-brand);

    font-size: .82rem;
    font-weight: 900;
}

.references-hero-badge strong,
.references-hero-badge small {
    display: block;
}

.references-hero-badge strong {
    color: var(--navy-900);
}

.references-hero-badge small {
    margin-top: 3px;
    color: var(--text-soft);
}


/* SHOWCASE */

.references-showcase {
    overflow: hidden;
    background: var(--surface);
}

.references-showcase .container {
    width: min(1500px, calc(100% - 48px));
}

.references-showcase
.section-heading.reveal {
    transform: translateY(55px) scale(.96);

    transition:
        opacity 850ms ease,
        transform 950ms cubic-bezier(.16, 1, .3, 1);
}

.references-showcase
.section-heading.reveal.is-visible {
    opacity: 1;
    transform: none;
}


/* GRID */

.references-grid {
    perspective: 1200px;

    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 16px;
}


/* CARDS */

.references-card.reveal {
    position: relative;
    overflow: hidden;

    aspect-ratio: 5 / 3;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px;

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.72),
            rgba(245,247,252,.88)
        );

    box-shadow:
        0 10px 28px rgba(39, 50, 99, .04);

    opacity: 0;

    transform:
        translateY(70px)
        scale(.86)
        rotateX(10deg);

    transform-origin: center bottom;

    transition:
        opacity 720ms ease,
        transform 900ms cubic-bezier(.16, 1, .3, 1),
        border-color 350ms ease,
        box-shadow 350ms ease;
}

.references-card.reveal:nth-child(6n + 1) {
    transition-delay: 0ms;
}

.references-card.reveal:nth-child(6n + 2) {
    transition-delay: 75ms;
}

.references-card.reveal:nth-child(6n + 3) {
    transition-delay: 150ms;
}

.references-card.reveal:nth-child(6n + 4) {
    transition-delay: 225ms;
}

.references-card.reveal:nth-child(6n + 5) {
    transition-delay: 300ms;
}

.references-card.reveal:nth-child(6n + 6) {
    transition-delay: 375ms;
}

.references-card.reveal.is-visible {
    opacity: 1;
    transform: none;
}


/* CARD LIGHT */

.references-card::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(255, 123, 0, .14),
            transparent 48%
        );

    transition: opacity 400ms ease;
}

.references-card::after {
    content: "";

    position: absolute;

    top: -60%;
    left: -90%;

    width: 48%;
    height: 220%;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.75),
            transparent
        );

    transform: rotate(18deg);

    transition:
        left 700ms
        cubic-bezier(.16, 1, .3, 1);
}


/* LOGO */

.references-card img {
    position: relative;
    z-index: 2;

    display: block;

    width: 88%;
    height: 82%;

    object-fit: contain;

    transition:
        transform 520ms
        cubic-bezier(.16, 1, .3, 1);
}


/* BIG HOVER */

.references-card.reveal.is-visible:hover {
    z-index: 5;

    transform:
        translateY(-13px)
        scale(1.045);

    border-color: rgba(255, 123, 0, .38);

    box-shadow:
        0 32px 65px rgba(39, 50, 99, .16);
}

.references-card:hover::before {
    opacity: 1;
}

.references-card:hover::after {
    left: 150%;
}

.references-card:hover img {
    transform: scale(1.10);
}


/* CTA */

.references-cta {
    overflow: hidden;
    background: var(--white);
}

.references-cta__panel {
    position: relative;
    overflow: hidden;

    display: grid;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, .75fr);

    gap: 70px;
    align-items: center;

    padding: 58px;

    border-radius: var(--radius-lg);

    background:
        radial-gradient(
            circle at 92% 15%,
            rgba(255, 123, 0, .25),
            transparent 32%
        ),
        var(--navy-950);

    box-shadow:
        0 40px 90px rgba(17, 23, 55, .22);
}

.references-cta__panel.reveal {
    opacity: 0;

    transform:
        translateY(65px)
        scale(.92);

    transition:
        opacity 900ms ease,
        transform 1050ms cubic-bezier(.16, 1, .3, 1);
}

.references-cta__panel.reveal.is-visible {
    opacity: 1;
    transform: none;
}

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

.references-cta__panel.reveal
.references-cta__content {
    opacity: 0;
    transform: translateX(-50px);
}

.references-cta__panel.reveal.is-visible
.references-cta__content {
    animation:
        referencesCtaContentIn 850ms 200ms
        cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes referencesCtaContentIn {

    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: none;
    }

}

.references-cta__content h2 {
    max-width: 800px;

    margin-bottom: 24px;

    color: var(--white);

    font-size: clamp(2.5rem, 4vw, 4.2rem);
}

.references-cta__content > p {
    max-width: 680px;

    margin: 0;

    color: rgba(255,255,255,.64);

    font-size: 1.05rem;
}

.references-cta__content .hero-actions {
    margin-top: 30px;
}

.references-cta__content .button--ghost {
    color: var(--white);

    border-color: rgba(255,255,255,.18);

    background: rgba(255,255,255,.07);
}


/* CTA PROOFS */

.references-cta__proofs {
    position: relative;
    z-index: 2;

    display: grid;

    opacity: 0;
    transform: translateX(55px);
}

.references-cta__panel.reveal.is-visible
.references-cta__proofs {
    animation:
        referencesCtaProofsIn 850ms 360ms
        cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes referencesCtaProofsIn {

    from {
        opacity: 0;
        transform: translateX(55px);
    }

    to {
        opacity: 1;
        transform: none;
    }

}

.references-cta__proofs > div {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 18px;

    padding: 22px 0;

    border-bottom:
        1px solid rgba(255,255,255,.10);
}

.references-cta__proofs > div:last-child {
    border-bottom: 0;
}

.references-cta__proofs > div > span {
    color: var(--orange-400);

    font-size: .72rem;
    font-weight: 900;
}

.references-cta__proofs p {
    margin: 0;
}

.references-cta__proofs strong,
.references-cta__proofs small {
    display: block;
}

.references-cta__proofs strong {
    color: var(--white);
    font-size: 1.2rem;
}

.references-cta__proofs small {
    margin-top: 6px;

    color: rgba(255,255,255,.52);

    line-height: 1.5;
}


/* RESPONSIVE */

@media (max-width: 1380px) {

    .references-grid {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));
    }

}

@media (max-width: 1100px) {

    .references-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .references-cta__panel {
        gap: 45px;
        padding: 48px;
    }

}

@media (max-width: 850px) {

    .references-hero-visual {
        min-height: 500px;
    }

    .references-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .references-cta__panel {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 620px) {

    .references-showcase .container {
        width: min(100% - 32px, 1500px);
    }

    .references-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }

    .references-card.reveal {
        padding: 10px;

        transform:
            translateY(45px)
            scale(.90);
    }

    .references-hero-board {
        inset: 18px 0 46px;

        gap: 10px;

        padding: 14px;
    }

    .references-hero-badge {
        left: 12px;
        right: 12px;
        bottom: 5px;
    }

    .references-cta__panel {
        padding: 34px 24px;
    }

}


/* REDUCED MOTION */

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

    .hero--references-clients
    .references-hero__content .reveal,

    .references-hero-visual,

    .references-hero-logo,

    .references-hero-badge,

    .references-showcase
    .section-heading.reveal,

    .references-card.reveal,

    .references-cta__panel.reveal,

    .references-cta__content,

    .references-cta__proofs {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    .references-card:hover,
    .references-card:hover img {
        transform: none;
    }

}

/* ================================================================
   REFERENCES - CARTES SPECIALES POUR LOGOS BLANCS
   ================================================================ */

.references-card:has(
    img[src$="reference-client-centre-mediac.webp"]
),
.references-card:has(
    img[src$="reference-client-katerina-hair-extensions.webp"]
),
.references-card:has(
    img[src$="reference-client-release-your-power.webp"]
),
.references-card:has(
    img[src$="reference-client-logo-blanc.webp"]
),
.references-card:has(
    img[src$="reference-client-bureau-paques.webp"]
) {
    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(255, 123, 0, .12),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #303a70,
            #171e43
        ) !important;

    border-color: rgba(255,255,255,.10) !important;

    box-shadow:
        0 18px 38px rgba(20,28,64,.16) !important;
}

.references-card:has(
    img[src$="reference-client-centre-mediac.webp"]
):hover,
.references-card:has(
    img[src$="reference-client-katerina-hair-extensions.webp"]
):hover,
.references-card:has(
    img[src$="reference-client-release-your-power.webp"]
):hover,
.references-card:has(
    img[src$="reference-client-logo-blanc.webp"]
):hover,
.references-card:has(
    img[src$="reference-client-bureau-paques.webp"]
):hover {
    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(255, 123, 0, .20),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #394681,
            #171e43
        ) !important;

    border-color: rgba(255,123,0,.30) !important;
}


/* ================================================================
   REFERENCES - GRILLE PREMIUM UNIFORME
   ================================================================ */


/* Toutes les cartes : meme surface elegante */

.references-showcase
.references-grid
.references-card {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(83, 98, 180, .055),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #fbfcff,
            #f1f4fa
        ) !important;

    border-color:
        rgba(39, 50, 99, .10) !important;

    box-shadow:
        0 10px 28px
        rgba(39, 50, 99, .055) !important;
}


/* Hover uniforme */

.references-showcase
.references-grid
.references-card.reveal.is-visible:hover {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(255, 123, 0, .09),
            transparent 44%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f3f5fb
        ) !important;

    border-color:
        rgba(255, 123, 0, .24) !important;

    box-shadow:
        0 28px 58px
        rgba(39, 50, 99, .14) !important;
}


/* ================================================================
   LOGOS BLANCS : ECRIN BLEU MARINE A L'INTERIEUR
   ================================================================ */

.references-showcase
.references-card:has(
    img[src$="reference-client-centre-mediac.webp"]
) img,

.references-showcase
.references-card:has(
    img[src$="reference-client-katerina-hair-extensions.webp"]
) img,

.references-showcase
.references-card:has(
    img[src$="reference-client-release-your-power.webp"]
) img,

.references-showcase
.references-card:has(
    img[src$="reference-client-logo-blanc.webp"]
) img,

.references-showcase
.references-card:has(
    img[src$="reference-client-bureau-paques.webp"]
) img {
    width: 92%;
    height: 86%;

    padding: 10px 14px;

    border-radius: 16px;

    background:
        radial-gradient(
            circle at 85% 12%,
            rgba(255, 123, 0, .17),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #303b70,
            #171e43
        );

    box-shadow:
        0 16px 34px
        rgba(20, 28, 64, .18);

    object-fit: contain;
}


/* Hover des logos blancs */

.references-showcase
.references-card:has(
    img[src$="reference-client-centre-mediac.webp"]
):hover img,

.references-showcase
.references-card:has(
    img[src$="reference-client-katerina-hair-extensions.webp"]
):hover img,

.references-showcase
.references-card:has(
    img[src$="reference-client-release-your-power.webp"]
):hover img,

.references-showcase
.references-card:has(
    img[src$="reference-client-logo-blanc.webp"]
):hover img,

.references-showcase
.references-card:has(
    img[src$="reference-client-bureau-paques.webp"]
):hover img {
    box-shadow:
        0 22px 44px
        rgba(20, 28, 64, .26);
}


/* ================================================================
   REFERENCES - LOGOS PLUS GRANDS
   ================================================================ */

.references-showcase
.references-grid
.references-card img {
    width: 98% !important;
    height: 94% !important;
    object-fit: contain;
}


/* Logos blancs avec écrin bleu */

.references-showcase
.references-card:has(
    img[src$="reference-client-centre-mediac.webp"]
) img,

.references-showcase
.references-card:has(
    img[src$="reference-client-katerina-hair-extensions.webp"]
) img,

.references-showcase
.references-card:has(
    img[src$="reference-client-release-your-power.webp"]
) img,

.references-showcase
.references-card:has(
    img[src$="reference-client-logo-blanc.webp"]
) img,

.references-showcase
.references-card:has(
    img[src$="reference-client-bureau-paques.webp"]
) img {
    width: 98% !important;
    height: 94% !important;

    padding: 6px 8px !important;
}


/* ================================================================
   REFERENCES - LOGOS TRES GRANDS
   ================================================================ */

.references-showcase
.references-grid
.references-card {
    padding: 8px !important;
}

.references-showcase
.references-grid
.references-card img {
    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain;
}


/* Logos blancs avec écrin bleu */

.references-showcase
.references-card:has(
    img[src$="reference-client-centre-mediac.webp"]
) img,

.references-showcase
.references-card:has(
    img[src$="reference-client-katerina-hair-extensions.webp"]
) img,

.references-showcase
.references-card:has(
    img[src$="reference-client-release-your-power.webp"]
) img,

.references-showcase
.references-card:has(
    img[src$="reference-client-logo-blanc.webp"]
) img,

.references-showcase
.references-card:has(
    img[src$="reference-client-bureau-paques.webp"]
) img {
    width: 100% !important;
    height: 100% !important;

    padding: 4px 6px !important;
}