/*
 Theme Name:   Divi Child - Pineapple Squad
 Theme URI:    https://pineapplesquad.fr
 Description:  Thème enfant Divi pour Moe-Sv
 Author:       Pineapple Squad
 Author URI:   https://pineapplesquad.fr
 Template:     Divi
 Version:      1.0.0
*/


/*Projets Réalisations*/

/* ==========================================================================
   Projets Réalisations — Carousel
   ========================================================================== */

.projets-realisations-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Header : titre/texte figé au-dessus de la petite carte + nav --- */
.projets-realisations-header {
    display: flex;
    margin-bottom: 24px;
    position: absolute;
    right: 0;
    width: -webkit-fill-available;
    z-index: 5;
}

.projets-realisations-header-spacer {
    width: calc(48% + 24px);
    /* == largeur grande slide + gap, en % du conteneur réel */
    flex-shrink: 0;
}

.projets-realisations-header-content {
    width: calc(52% - 24px);
    /* == largeur de la petite carte (.swiper-slide non active) */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    //gap: 50px;
}

.projets-realisations-header-text h2 {
    margin: 0 0 8px;
}

.projets-realisations-header-text p {
    margin: 0;
}

/* --- Cartes --- */
.projet-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.projet-card-image {
    position: relative;
    display: block;
    width: 100%;
    height: 420px;
    background-size: cover;
    background-position: center;
    /*border-radius: 12px;*/
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.projet-card-image:hover {
    transform: scale(1.01);
}

/* --- Badge "Prestation" (haut gauche) --- */
.projet-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #273617;
    /* vert foncé, à ajuster sur ta charte exacte */
    color: #fff;
    padding: 10px 16px;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 4px;
    max-width: 75%;
    z-index: 2;
}

.projet-badge strong {
    font-weight: 700;
}

/* --- Caption (bandeau bas, texte extrait) --- */
.projet-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    padding: 16px 20px;
    font-size: 14px;
    line-height: 1.5;
    z-index: 2;
    transition: opacity 0.3s ease;
}

/* --- Overlay CTA au hover --- */
.projet-card-hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
}

.projet-card-image:hover .projet-card-hover {
    opacity: 1;
}

/* On masque la caption pendant le hover pour éviter le cumul visuel avec le CTA */
.projet-card-image:hover .projet-caption {
    opacity: 0;
}

.projet-cta-btn {
    background: #d9a15b;
    /* orange/doré de ta charte, à ajuster si besoin */
    color: #fff;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
}

/* --- Bloc "Le Défi" sous la carte --- */
.projet-defi {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #273617;
}

.projet-defi strong {
    font-weight: 700;
}

/* Clamp du texte défi à 2 lignes, hauteur toujours identique */
.projet-defi-text {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.projet-defi-link {
    display: block;
    margin-top: 4px;
    color: #BC6C25;
    text-decoration: underline;
    font-weight: 600;
}

.projet-defi-link:hover {
    color: #a86a2a;
}

/* --- Navigation (flèches) --- */
.projets-swiper-nav {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    justify-content: flex-end;
}

.projets-swiper-prev,
.projets-swiper-next {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #273617;
    background: transparent;
    color: #273617;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.projets-swiper-prev:hover,
.projets-swiper-next:hover {
    background: #273617;
    color: #fff;
}

.projets-swiper-prev:disabled,
.projets-swiper-next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* --- Contraint le swiper à n'afficher que 2 cartes (grande + petite) --- */
.projets-swiper {
    overflow: hidden;
    width: 100%;
}

/* Aligne les cartes sur leur bas, peu importe la hauteur de l'image */
.projets-swiper .swiper-wrapper {
    align-items: flex-end;
}

/* --- Slide active = grande, les autres = petites --- */
.projets-swiper .swiper-slide {
    width: calc(52% - 24px);
    /* comble l'espace restant après la grande + le gap, aucun vide */
    transition: width 0.4s ease;
}

.projets-swiper .swiper-slide-active {
    width: 48%;
}

.projets-swiper .swiper-slide .projet-card-image {
    height: 260px;
    transition: height 0.4s ease;
}

.projets-swiper .swiper-slide-active .projet-card-image {
    height: 520px;
}

/* Caption (extrait sur fond noir) visible uniquement sur la slide active/grande */
.projets-swiper .swiper-slide .projet-caption {
    display: none;
}

.projets-swiper .swiper-slide-active .projet-caption {
    display: block;
}


/* ==========================================================================
   Projets Réalisations — Mode liste (carousel="non")
   ========================================================================== */

/* Le header n'a plus besoin du positionnement absolu/spacer pensé pour
   la mise en page "grande carte / petite carte" du carousel */
.projets-realisations-liste .projets-realisations-header {
    position: static;
    width: 100%;
    margin-bottom: 32px;
}

.projets-realisations-liste .projets-realisations-header-spacer {
    display: none;
}

.projets-realisations-liste .projets-realisations-header-content {
    width: 100%;
    gap: 16px;
}

.projets-liste-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: start;
}

/* Toutes les images ont la même hauteur (pas de logique grande/petite) */
.projets-liste-grid .projet-card-image {
    height: 420px;
}

/* La caption est visible par défaut sur toutes les cartes en mode liste
   (contrairement au carousel où elle est réservée à la slide active) */
.projets-liste-grid .projet-caption {
    display: block;
}

@media (max-width: 767px) {
    .projets-liste-grid {
        grid-template-columns: 1fr;
    }

    .projets-liste-grid .projet-card-image {
        height: 300px;
    }
}


/* ==========================================================================
   Projet — Tableau d'infos (Ville / Prestation / Catégorie / Surface / Durée)
   ========================================================================== */

.projet-infos-table {
    max-width: 600px;
}

.projet-infos-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #e0ddd6;
}

.projet-infos-row:last-child {
    border-bottom: none;
}

.projet-infos-label {
    color: #D8A450;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.projet-infos-value {
    color: #273617;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    text-align: right;
}


/* --- Responsive --- */

@media (max-width: 767px) {
    .projets-realisations-header {
        position: static;
        flex-direction: column;
        gap: 16px;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .projets-realisations-header-spacer {
        display: none;
    }

    .projets-realisations-header-content {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    /* Une seule carte pleine largeur à la fois, plus de petite/grande */
    .projets-swiper .swiper-slide {
        width: 100%;
    }

    .projets-swiper .swiper-slide-active {
        width: 100%;
    }

    .projets-swiper .swiper-slide .projet-card-image,
    .projets-swiper .swiper-slide-active .projet-card-image {
        height: 300px;
    }

    /* Caption visible sur la slide affichée puisqu'il n'y en a qu'une à la fois */
    .projets-swiper .swiper-slide .projet-caption {
        display: block;
    }

    .projet-badge {
        max-width: 85%;
        font-size: 12px;
        padding: 8px 12px;
    }
}

.projets-categories-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 35px;
}

.projet-filter-btn {
    appearance: none;
    border: 1px solid #222;
    background: transparent;
    color: #222;
    padding: 9px 18px;
    border-radius: 30px;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.projet-filter-btn:hover,
.projet-filter-btn.active {
    background: #222;
    color: #fff;
    border-color: #222;
}


/*
 * Cartes masquées
 */

.projets-realisations-liste .projet-card.is-hidden {
    display: none;
}


/*
 * Mobile
 */

@media (max-width: 767px) {

    .projets-categories-filter {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
        margin-bottom: 25px;
        scrollbar-width: none;
    }

    .projets-categories-filter::-webkit-scrollbar {
        display: none;
    }

    .projet-filter-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 8px 15px;
        font-size: 13px;
    }

}