/* =========================================================
   REFERENCE PROJET
   ========================================================= */

/*
 * COULEUR PRINCIPALE
 *
 * À remplacer par le bleu exact de CUBEconception
 * si tu veux reprendre exactement celui du site.
 */
:root {
    --rp-blue: #008ecf;
}


/* =========================================================
   GALERIE
   ========================================================= */

.rp-gallery {
    width: 100%;
}


/* =========================================================
   FILTRES
   ========================================================= */

.rp-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 1.5rem;
}


.rp-filter {

    /*
     * On force les couleurs afin que le thème WordPress
     * ne puisse pas les remplacer.
     */
    color: #111 !important;

    background: #fff !important;

    border: 1px solid #ddd;

    border-radius: 999px;

    padding: 0.55rem 0.95rem;

    cursor: pointer;

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


.rp-filter:hover {

    background: #f5f5f5 !important;

    color: #111 !important;

    border-color: #bbb;
}


.rp-filter.is-active {

    background: #111 !important;

    color: #fff !important;

    border-color: #111;
}


/*
 * Cas particulier du bouton "Tous".
 *
 * Lorsqu'il est sélectionné, il doit lui aussi
 * être noir avec texte blanc.
 */
.rp-filter[data-filter="*"].is-active {

    background: #111 !important;

    color: #fff !important;

    border-color: #111;
}


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

.rp-map {

    display: none;

    width: 100%;

    height: 320px;

    margin-bottom: 1.8rem;

    border-radius: 16px;

    overflow: hidden;

    /*
     * Création d'un contexte de superposition.
     *
     * Cela empêche les éléments internes de Leaflet
     * de passer devant le header du site.
     */
    position: relative;

    z-index: 0;

    isolation: isolate;
}


.rp-map.is-visible {
    display: block;
}


/*
 * On s'assure que les éléments Leaflet restent
 * à l'intérieur du contexte de la carte.
 */
.rp-map .leaflet-container {

    z-index: 0;
}


/* =========================================================
   GALERIE
   ========================================================= */

.rp-grid {

    display: grid;

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

    gap: 1.2rem;
}


.rp-card {

    min-width: 0;

    transition:
        opacity 0.3s ease,
        transform 0.4s ease;
}


.rp-card.is-hidden {
    display: none;
}


/* =========================================================
   BOUTON / CARTE
   ========================================================= */

.rp-card-button {

    width: 100%;

    border: 0;

    /*
     * Important :
     * on neutralise le style des boutons du thème.
     */
    background: transparent !important;

    color: inherit;

    padding: 0;

    text-align: left;

    cursor: pointer;
}


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

.rp-image {

    display: block;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    border-radius: 14px;

    background: #eee;
}


.rp-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.65s
        cubic-bezier(.2,.75,.25,1);
}


.rp-card-button:hover
.rp-image img {

    transform: scale(1.04);
}


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

.rp-content {
    display: block;

    background: var(--rp-blue);

    color: #fff !important;

    border-radius: 0 0 14px 14px;

    max-height: 0;

    opacity: 0;

    overflow: hidden;

    transform: translateY(-6px);

    transition:
        max-height 0.4s ease,
        opacity 0.3s ease,
        transform 0.4s ease,
        padding 0.4s ease;
}

.rp-title {

    display: block;

    color: #fff !important;

    font-size: 1.15rem;

    font-weight: 600;

    line-height: 1.3;
}


.rp-city {
    display: block;

    margin-top: 0.2rem;

    color: rgba(255,255,255,0.9) !important;

    font-size: 0.9rem;

    font-weight: 500;
}


.rp-categories {
    display: block;

    margin-top: 0.45rem;

    color: rgba(255,255,255,0.85) !important;

    font-size: 0.82rem;

    line-height: 1.45;
}


.rp-phrase {
    display: block;

    margin-top: 0.5rem;

    color: #fff !important;

    line-height: 1.55;
}

.rp-phrase {

    display: block;

    color: #fff !important;

    margin-top: 0.4rem;

    line-height: 1.55;
}


/* =========================================================
   PROJET OUVERT
   ========================================================= */

/*
 * La carte reste dans sa colonne.
 * Elle ne prend plus deux cases de la grille.
 */
.rp-card.is-open {
    grid-column: auto;
}


/*
 * L'image garde exactement la même taille
 * que lorsqu'elle est fermée.
 */
.rp-card.is-open .rp-image {
    aspect-ratio: 4 / 3;
    border-radius: 14px 14px 0 0;
}


/*
 * L'ouverture ne modifie pas l'image.
 */
.rp-card.is-open .rp-image img {
    transform: none;
}


/*
 * La description apparaît simplement sous l'image.
 */
.rp-card.is-open .rp-content {
    max-height: 240px;
    opacity: 1;
    transform: translateY(0);
    padding: 0.9rem 1rem 1rem;
}
/* =========================================================
   ABSENCE DE PROJET
   ========================================================= */

.rp-empty {

    padding: 2rem;

    text-align: center;
}


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

@media (max-width: 900px) {

    .rp-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 600px) {

    .rp-grid {

        grid-template-columns: 1fr;
    }

}

/* =========================================================
   3 DERNIERS PROJETS
   ========================================================= */

.rp-latest-projects {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.2rem;
    width: 100%;
    margin-top: 1.5rem;
}

.rp-latest-project {
    display: block;
    min-width: 0;
    width: 100%;
}

.rp-latest-project-link {
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.rp-latest-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 14px;
}

.rp-latest-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.65s cubic-bezier(.2,.75,.25,1);
}

.rp-latest-project-link:hover
.rp-latest-image img {
    transform: scale(1.04);
}

.rp-latest-content {
    display: block;
    padding-top: 0.75rem;
}

.rp-latest-title {
    display: block;
    color: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
}

.rp-latest-city {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.88rem;
    opacity: 0.75;
}

.rp-latest-phrase {
    display: block;
    margin-top: 0.35rem;
    line-height: 1.45;
}


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

@media (max-width: 900px) {

    .rp-latest-projects {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}


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

@media (max-width: 600px) {

    .rp-latest-projects {
        grid-template-columns:
            1fr !important;
    }
}