.slider-realisations {
    width: 100%;
    color: white;
}

/* =========================
   HEADER
========================= */

.slider-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 40px;
        padding: 0px 60px;

}

.slider-surtitre {
    font-size: 14px;
    font-family: 'Coolvetica', sans-serif;
    letter-spacing: 1px;
}


.slider-surtitre {
    display: flex;
    align-items: center;
    gap: 10px;
}


.slider-surtitre::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FF0202;
    display: inline-block;
}



/* ligne titre + bouton */
.slider-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

.slider-titre {
    font-size: clamp(24px, 4vw, 48px);
    line-height: 1;
    margin: 0;
    max-width: 70%;
}

/* texte normal */
.title-main {
    font-family: 'Coolvetica', sans-serif;
    letter-spacing: 1.6px;
}

/* 2 derniers mots */
.title-alt {
    font-family: 'Braven', sans-serif; /* ta font différente */
}

.slider-button {
    font-family: 'Coolvetica', sans-serif;
    font-size: 14px;
    letter-spacing: 1.1px;

    display: inline-flex;
    align-items: center;

    padding: 10px 20px 10px 35px;

    border-radius: 999px;

    text-decoration: none;
    color: white;

    background: linear-gradient(90deg, #FA6D6D, #FF0202);

    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}


.slider-button::before {
    content: "";
    position: absolute;

    left: 18px;
    top: 50%;

    width: 6px;
    height: 6px;

    background: white;
    border-radius: 50%;

    outline: 1.5px solid rgba(255, 255, 255);
    outline-offset: 3px;

    transform: translateY(-50%) scale(1);
}

.slider-button:hover::before {
    animation: buttonPulse 0.9s ease-out infinite;
}

@keyframes buttonPulse {
    0% {
        transform: translateY(-50%) scale(1);
    }

    50% {
        transform: translateY(-50%) scale(1.20);
    }

    100% {
        transform: translateY(-50%) scale(1);
    }
}




.slider-button {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease;
}

.slider-button:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 10px 25px rgba(255, 2, 2, 0.2);
    filter: brightness(1.05);
}

.slider-button:active {
    transform: translateY(-1px) scale(0.98);
}

/* =========================
   SLIDER TRACK
========================= */

.slider-track {
    display: flex;
    gap: 30px;

    overflow-x: auto;
    scroll-snap-type: x mandatory;

    scroll-behavior: smooth;

    padding-bottom: 10px;

    /* 🔥 important pour alignement full width */
    width: 100%;
}

/* hide scrollbar */
.slider-track::-webkit-scrollbar {
    display: none;
}

.slider-track {
    scrollbar-width: none;
}

/* =========================
   SLIDES (2 visibles)
========================= */

.slide {
    flex: 0 0 calc((100% - 30px) / 2.5);
    scroll-snap-align: start;
}



/* =========================
   CONTENT
========================= */

.real-content {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* TITLE */
.real-content h2 {
    font-family: 'Coolvetica', sans-serif;
    font-size: 16px;
    letter-spacing: 1.2px;
    margin: 0;
    white-space: nowrap;
    text-transform: uppercase;
}

/* CATEGORY */
.real-category {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;

    font-family: 'Braven', sans-serif;
    font-size: 15px;
    margin: 0;

    text-align: right;
    text-transform: uppercase;
}


.slider-dots {
    display: flex;
    justify-content: right;
    gap: 10px;
    margin-right:60px;
    margin-top: 10px;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;

    background: white;
    opacity: 0.4;

    transition: all 0.3s ease;
    cursor: pointer;
}

.dot.active {
    background: #FF0202;
    opacity: 1;
    transform: scale(1.3);
}




.slider-realisations {
    cursor: none;
}

.slider-realisations a,
.slider-realisations button {
    cursor: none;
}

/* curseur custom */
.custom-cursor {
    position: fixed;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FF0202;

    pointer-events: none;

    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s ease;

    z-index: 9999;
}

/* visible */
.custom-cursor.active {
    transform: translate(-50%, -50%) scale(1);
}




.real-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

.real-arrow img {
    display: block;
    width: 14px;
    height: 12px;

    transform-origin: 50% 50%;
    transform-box: fill-box;

    transition: transform 0.4s ease;
}

.real-card:hover .real-arrow img {
    transform: rotate(2deg);
}



/* =========================================
RESPONSIVE SLIDER REALISATIONS
========================================= */

/* ultra wide / 4K */
@media (min-width: 1600px) {
    .slider-header {
        padding: 0 80px;
        margin-bottom: 60px;
    }

    .slider-titre {
        font-size: clamp(56px, 4vw, 82px);
        max-width: 65%;
    }

    .slider-track {
        gap: 40px;
    }

    .slide {
        flex: 0 0 calc((100% - 40px) / 2.8);
    }

    .slider-dots {
        margin-right: 80px;
        margin-top: 20px;
    }

    .real-content h2 {
        font-size: 18px;
    }

    .real-category {
        font-size: 16px;
    }
}

/* laptop */
@media (max-width: 1280px) {
    .slider-header {
        padding: 0 40px;
    }

    .slider-titre {
        font-size: clamp(36px, 4vw, 48px);
        max-width: 65%;
    }

    .slide {
        flex: 0 0 calc((100% - 30px) / 2.2);
    }

    .slider-dots {
        margin-right: 40px;
    }
}

/* tablet */
@media (max-width: 1024px) {
    .slider-header {
        padding: 0 30px;
        margin-bottom: 30px;
    }

    .slider-header-row {
        align-items: flex-start;
        gap: 24px;
    }

    .slider-titre {
        font-size: clamp(28px, 5vw, 40px);
        max-width: 70%;
    }

    .slide {
        flex: 0 0 70%;
    }

    .real-content {
        gap: 15px;
    }

    .real-content h2 {
        font-size: 15px;
    }

    .real-category {
        font-size: 14px;
    }

    .slider-dots {
        margin-right: 30px;
    }
}

/* mobile */
@media (max-width: 768px) {
    .slider-header {
        padding: 0 20px;
    }

    .slider-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .slider-titre {
        max-width: 100%;
        font-size: clamp(24px, 7vw, 34px);
        line-height: 0.95;
    }

    .slider-button {
        font-size: 13px;
        padding: 10px 18px 10px 32px;
    }

    .slider-button::before {
        left: 16px;
    }

        .slider-track {
        gap: 16px;
        padding-right: 20px;
    }

    .slide {
        flex: 0 0 78%;
    }


    .real-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .real-content h2 {
        white-space: normal;
        font-size: 14px;
    }

    .real-category {
        text-align: left;
        font-size: 13px;
    }

    .slider-dots {
        justify-content: flex-start;
        margin-right: 0;
        margin-left: 20px;
    }

    /* meilleur UX mobile */
    .slider-realisations,
    .slider-realisations a,
    .slider-realisations button {
        cursor: auto;
    }

    .custom-cursor {
        display: none;
    }
}

/* small mobile */
@media (max-width: 480px) {
    .slider-header {
        padding: 0 16px;
    }

    .slider-surtitre {
        font-size: 12px;
    }

    .slider-titre {
        font-size: clamp(20px, 8vw, 28px);
    }

        .slider-track {
        gap: 14px;
        padding-right: 16px;
    }

    .slide {
        flex: 0 0 82%;
    }

    .real-content h2 {
        font-size: 13px;
    }

    .real-category {
        font-size: 12px;
    }

    .slider-dots {
        margin-left: 16px;
    }
}