/* =========================================================
   CARROUSEL DU PORTFOLIO (page Portfolio.php)
   Cette feuille ne contient plus que le carrousel : les styles
   généraux (corps de page, textes, projets…) viennent de
   styles.css, chargé avant celle-ci.
   - Ordinateur : 5 cartes visibles, la carte du centre est active.
   - Tablette : cartes un peu plus serrées.
   - Mobile : une seule carte, navigation au doigt (swipe) + boutons.
   ========================================================= */

/* =========================================================
   CARROUSEL PORTFOLIO
   ========================================================= */

.carousel {
    --card-width: clamp(220px, 24vw, 330px);
    --card-height: clamp(390px, 56vw, 560px);

    position: relative;
    width: min(1400px, 100%);
    min-height: 680px;
    margin: 0 auto;
    padding: 70px 80px 100px;
    box-sizing: border-box;
    overflow: hidden;
}



/* =========================================================
   LISTE DU CARROUSEL
   ========================================================= */

.carousel__list {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: var(--card-height);

    margin: 0;
    padding: 0;

    list-style: none;
    perspective: 1200px;
}



/* =========================================================
   CARTES
   ========================================================= */

.carousel__item {
    position: absolute;

    top: 50%;
    left: 50%;

    width: var(--card-width);
    height: var(--card-height);

    margin: 0;

    overflow: hidden;

    border-radius: 18px;

    background: #171717;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.35);

    cursor: pointer;

    opacity: 0;

    pointer-events: none;

    transform:
        translate(-50%, -50%)
        scale(0.72);

    filter: brightness(0.65);

    transition:
        transform 0.55s ease,
        opacity 0.55s ease,
        filter 0.55s ease;

    outline: none;
}



/* =========================================================
   LIEN QUI PREND TOUTE LA CARTE
   ========================================================= */

.carousel__link {
    display: block;

    width: 100%;
    height: 100%;

    color: inherit;

    text-decoration: none;
}



/*
 * Le lien ne doit pas modifier la structure
 * de la carte.
 */

.carousel__link:visited {
    color: inherit;
}



/* =========================================================
   CARTE ACTIVE
   ========================================================= */

.carousel__item[data-active="true"] {
    opacity: 1;

    pointer-events: auto;

    transform:
        translate(-50%, -50%)
        scale(1);

    filter: none;

    z-index: 5;
}



/* =========================================================
   POSITIONS AUTOUR DE LA CARTE ACTIVE
   ========================================================= */

.carousel__item[data-position="-2"] {
    opacity: 0.35;

    pointer-events: auto;

    transform:
        translate(-50%, -50%)
        translateX(-145%)
        scale(0.72);

    z-index: 1;
}

.carousel__item[data-position="-1"] {
    opacity: 0.55;

    pointer-events: auto;

    transform:
        translate(-50%, -50%)
        translateX(-72%)
        scale(0.84);

    z-index: 2;
}

.carousel__item[data-position="0"] {
    opacity: 1;

    pointer-events: auto;

    transform:
        translate(-50%, -50%)
        translateX(0)
        scale(1);

    filter: none;

    z-index: 5;
}

.carousel__item[data-position="1"] {
    opacity: 0.55;

    pointer-events: auto;

    transform:
        translate(-50%, -50%)
        translateX(72%)
        scale(0.84);

    z-index: 2;
}

.carousel__item[data-position="2"] {
    opacity: 0.35;

    pointer-events: auto;

    transform:
        translate(-50%, -50%)
        translateX(145%)
        scale(0.72);

    z-index: 1;
}



/* =========================================================
   CONTENU DE LA CARTE
   ========================================================= */

.carousel__box {
    position: relative;

    width: 100%;
    height: 100%;
}



/* =========================================================
   IMAGE
   ========================================================= */

.carousel__image {
    position: absolute;

    inset: 0;

    background: #222;
}

.carousel__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}



/* =========================================================
   DÉGRADÉ NOIR
   ========================================================= */

.carousel__image::after {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.35) 40%,
        rgba(0, 0, 0, 0) 70%
    );

    pointer-events: none;
}



/* =========================================================
   TEXTE
   ========================================================= */

.carousel__contents {
    position: absolute;

    right: 0;
    bottom: 0;
    left: 0;

    z-index: 2;

    padding: 28px 22px 22px;

    color: white;

    text-align: center;
}

.carousel__contents .user__name {
    margin: 0 0 6px;

    color: white;

    font-size: clamp(
        1.05rem,
        2vw,
        1.35rem
    );

    line-height: 1.2;
}

.carousel__contents .user__title {
    margin: 0 0 16px;

    color: #ddd;

    font-size: 0.92rem;

    font-weight: 400;

    line-height: 1.4;
}



/* =========================================================
   NAVIGATION
   ========================================================= */

.carousel__nav {
    position: absolute;

    right: 0;
    bottom: 25px;
    left: 0;

    z-index: 10;

    display: flex;

    justify-content: center;

    gap: 18px;
}

.carousel__nav button {
    display: inline-flex;

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

    gap: 9px;

    min-width: 125px;

    padding: 11px 16px;

    border: 1px solid rgba(255, 255, 255, 0.35);

    border-radius: 999px;

    background: rgba(17, 17, 17, 0.92);

    color: white;

    cursor: pointer;

    font: inherit;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease;
}

.carousel__nav button:hover {
    transform: translateY(-2px);

    background: #111;
}

.carousel__nav button:focus-visible {
    outline: 3px solid white;

    outline-offset: 3px;
}



/* =========================================================
   FLÈCHES
   ========================================================= */

.carousel__nav i {
    display: block;

    width: 8px;
    height: 8px;

    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
}

.carousel__nav .prev i {
    transform: rotate(-45deg);
}

.carousel__nav .next i {
    transform: rotate(135deg);
}



/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 900px) {

    .carousel {
        --card-width: min(42vw, 300px);
        --card-height: min(72vw, 500px);

        min-height: 620px;

        padding:
            50px 25px 100px;
    }


    .carousel__item[data-position="-2"] {
        transform:
            translate(-50%, -50%)
            translateX(-105%)
            scale(0.68);
    }


    .carousel__item[data-position="-1"] {
        transform:
            translate(-50%, -50%)
            translateX(-55%)
            scale(0.82);
    }


    .carousel__item[data-position="1"] {
        transform:
            translate(-50%, -50%)
            translateX(55%)
            scale(0.82);
    }


    .carousel__item[data-position="2"] {
        transform:
            translate(-50%, -50%)
            translateX(105%)
            scale(0.68);
    }

}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .carousel {
        --card-width: min(78vw, 340px);
        --card-height: min(125vw, 520px);

        min-height: 650px;

        padding:
            30px 10px 100px;
    }


    /*
     * Sur mobile, seule la carte active
     * est visible.
     */

    .carousel__item:not([data-active="true"]) {
        opacity: 0;

        pointer-events: none;

        transform:
            translate(-50%, -50%)
            scale(0.82);
    }


    .carousel__contents {
        padding:
            25px 18px 18px;
    }


    .carousel__nav {
        gap: 10px;

        padding:
            0 10px;

        box-sizing: border-box;
    }


    .carousel__nav button {
        min-width: 0;

        flex: 1;

        max-width: 160px;
    }


    .carousel__nav button span {
        font-size: 0.9rem;
    }

}



/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

.carousel__item:focus-visible,
.carousel__item:focus-within {
    box-shadow:
        0 0 0 4px white,
        0 18px 45px rgba(0, 0, 0, 0.35);
}



/* =========================================================
   RÉDUCTION DES ANIMATIONS
   ========================================================= */

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

    .carousel__item,
    .carousel__nav button {
        transition: none;
    }

}


/* =========================================================
   TACTILE : le glissement horizontal est géré par gallery.js,
   le défilement vertical de la page reste possible
   ========================================================= */

.carousel__list {
    touch-action: pan-y;
}

/* Les cartes latérales servent à naviguer : curseur « main » sur ordinateur */
@media (hover: hover) {
    .carousel__item:not([data-active="true"]) {
        cursor: pointer;
    }
}