/* ==============================
   FONDS AVEC TRAME PIXELS EN OVERLAY
   ============================== */

/* Structure commune - classes à définir au choix sur les conteneurs */
.fond-superpose,
.fond-superpose-2,
.fond-superpose-blanc,
.fond-superpose-2-blanc,
.fond-superpose-screen,
.fond-superpose-2-screen,
.fond-superpose-blanc-screen,
.fond-superpose-2-blanc-screen,
.fond-superpose-overlay,
.fond-superpose-2-overlay,
.fond-superpose-blanc-overlay,
.fond-superpose-2-blanc-overlay {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Base commune du pseudo-élément */
.fond-superpose::after,
.fond-superpose-2::after,
.fond-superpose-blanc::after,
.fond-superpose-2-blanc::after,
.fond-superpose-screen::after,
.fond-superpose-2-screen::after,
.fond-superpose-blanc-screen::after,
.fond-superpose-2-blanc-screen::after,
.fond-superpose-overlay::after,
.fond-superpose-2-overlay::after,
.fond-superpose-blanc-overlay::after,
.fond-superpose-2-blanc-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/wp-content/uploads/2025/05/Trame_dots_4px.png");
    background-repeat: repeat;
    background-size: 4px 4px;
    image-rendering: pixelated;
    z-index: 1;
    pointer-events: none;
}

/* ========== VARIANTES NOIR (classiques) ========== */
.fond-superpose::after {
    opacity: 0.40;
    filter: brightness(0);
}

.fond-superpose-2::after {
    opacity: 0.20;
    filter: brightness(0);
}

/* ========== VARIANTES BLANC ========== */
.fond-superpose-blanc::after {
    opacity: 0.40;
    filter: brightness(200%);
}

.fond-superpose-2-blanc::after {
    opacity: 0.20;
    filter: brightness(200%);
}

/* ========== VARIANTES SCREEN (incrustation lumineuse) ========== */
.fond-superpose-screen::after {
    opacity: 0.40;
    filter: brightness(0);
    mix-blend-mode: screen;
}

.fond-superpose-2-screen::after {
    opacity: 0.20;
    filter: brightness(0);
    mix-blend-mode: screen;
}

.fond-superpose-blanc-screen::after {
    opacity: 0.40;
    filter: brightness(200%);
    mix-blend-mode: screen;
}

.fond-superpose-2-blanc-screen::after {
    opacity: 0.20;
    filter: brightness(200%);
    mix-blend-mode: screen;
}

/* ========== VARIANTES OVERLAY (plus contrastées) ========== */
.fond-superpose-overlay::after {
    opacity: 0.40;
    filter: brightness(0);
    mix-blend-mode: overlay;
}

.fond-superpose-2-overlay::after {
    opacity: 0.20;
    filter: brightness(0);
    mix-blend-mode: overlay;
}

.fond-superpose-blanc-overlay::after {
    opacity: 0.40;
    filter: brightness(200%);
    mix-blend-mode: overlay;
}

.fond-superpose-2-blanc-overlay::after {
    opacity: 0.20;
    filter: brightness(200%);
    mix-blend-mode: overlay;
}

/* ===========================
   Composant image projet
   =========================== */

/* --- Structure de base --- */
.bloc-intro-photo {
    position: relative;
}

.img-projet-slide {
    margin-left: -80px;
    transition: margin-left .8s ease;
}

.bloc-intro-photo:hover .img-projet-slide {
    margin-left: -120px;
}

.img-projet-wrapper {
    overflow: hidden;
}

.img-projet-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .6s ease;
}

/* Zoom image désactivé volontairement */
.bloc-intro-photo:hover .img-projet-wrapper img {
    transform: none;
}

/* --- Picto “+” (galerie potentielle) --- */
.img-projet-picto {
    position: absolute;
    top: 50%;
    right: 100px;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--e-global-color-accent);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease;
    cursor: pointer;
    z-index: 10;
    overflow: hidden;
}

.img-projet-picto::before {
    content: "";
    width: 100%;
    height: 100%;
    background: url('/wp-content/uploads/2025/10/Picto-survol-vignette-plus.svg') no-repeat center center;
    background-size: contain;
    display: block;
}

/* --- Interaction “active” (galerie ON) --- */
.bloc-intro-photo:hover .img-projet-picto {
    transform: translateY(-50%) scale(1.15);
    background-color: var(--e-global-color-primary);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* Le picto peut déclencher le slide */
.img-projet-picto:hover ~ .img-projet-slide {
    margin-left: -120px;
}

/* ===========================
   Galerie désactivée (ACF = 0)
   Masque simplement le picto
   =========================== */

.bloc-intro-photo[data-galerie="0"] .img-projet-picto {
    display: none !important;
    pointer-events: none !important;
}