body.no-bg {
    background: #faf9fa !important; /* ou #fff si tu veux du blanc pur */
}
body.no-bg::before {
    display: none !important;
}


body.page-xefi {
    background: #faf9fa !important; /* fond très clair partout */
    position: relative;
    min-height: 100vh;
}

body.page-xefi::before {
    content: "";
    position: fixed;
    z-index: 0;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.98);  /* Vraiment opaque, plus d'image en dessous */
    pointer-events: none;
}

main, .xefi-portfolio {
    position: relative;
    z-index: 1;
}

/* Fond principal opaque sur toute la hauteur */
.xefi-portfolio {
    width: 92vw;
    max-width: 1550px;
    min-height: 93vh;
    margin: 32px auto 32px auto;
    background: rgba(255,255,255,0.99);
    border-radius: 36px;
    box-shadow: 0 6px 36px #bd133b22, 0 2px 12px #d7d7d7a5;
    padding: 38px 2vw 54px 2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Donne plus d’ampleur au contenu */
}

.xefi-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #e1031e;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 1.2px;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.xefi-banner {
    display: inline-block;
    font-size: 1.18rem;
    font-weight: 600;
    background: #e1031e;
    color: #fff;
    border-radius: 18px;
    padding: 10px 28px 10px 28px;
    margin-bottom: 30px;
    margin-top: 0;
    letter-spacing: 0.6px;
    text-align: center;
}

.xefi-gallery {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 42px;
    margin-top: 22px;
}

.xefi-photo-block {
    flex: 1 1 480px;
    min-width: 400px;
    max-width: 520px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 2px 22px #c6c6c633;
    overflow: hidden;
    margin-bottom: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.18s;
}

.xefi-photo-block img {
    width: 100%;
    max-height: 340px;
    min-height: 220px;
    object-fit: cover;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 2px 8px #ccc2;
}

.xefi-caption {
    color: #c71019;
    font-size: 1.09rem;
    font-family: 'Segoe UI', Arial, sans-serif;
    padding: 17px 16px 12px 16px;
    text-align: center;
    background: #fff;
    width: 100%;
}

/* Responsive */
@media (max-width: 950px) {
    .xefi-gallery {
        flex-direction: column;
        gap: 18px;
        align-items: center;
    }
    .xefi-photo-block {
        width: 95vw;
        max-width: 99vw;
        min-width: unset;
    }
}

@media (max-width: 500px) {
    .xefi-portfolio {
        border-radius: 0;
        padding: 10px 1vw 15px 1vw;
    }
    .xefi-title {
        font-size: 1.4rem;
    }
    .xefi-banner {
        font-size: 1.01rem;
        padding: 9px 10px;
    }
    .xefi-photo-block img {
        max-height: 160px;
    }
}

.titre-rouge {
    color: #e2001a;   /* Rouge XEFI, tu peux adapter le code couleur si besoin */
}

/* Lightbox */
#xefi-lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.87);
    align-items: center;
    justify-content: center;
}
#xefi-lightbox.active {
    display: flex;
}
#xefi-lightbox img {
    max-width: 92vw;
    max-height: 86vh;
    border-radius: 16px;
    box-shadow: 0 8px 38px #e1031e55;
    animation: zoomIn .22s;
    background: #fff;
    padding: 12px;
}
@keyframes zoomIn {
    0% { transform: scale(0.75); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
#xefi-close {
    position: absolute;
    top: 30px;
    right: 44px;
    color: #fff;
    font-size: 3rem;
    font-weight: bold;
    cursor: pointer;
    text-shadow: 0 2px 12px #000d;
    z-index: 2;
    transition: color 0.14s;
}
#xefi-close:hover { color: #e1031e; }