/* Bordure étoiles 4 côtés — sur un Container Elementor full-width */
.lu-border-etoiles {
    position: relative;
    overflow: visible !important;
}
.lu-border-etoiles > .e-con {
    position: relative;
    overflow: visible !important;
}

/* Propriétés communes */
.lu-border-etoiles::before,
.lu-border-etoiles::after,
.lu-border-etoiles > .e-con::before,
.lu-border-etoiles > .e-con::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    -webkit-mask-image: url('/wp-content/themes/vintwood/img/patterns/star.svg') !important;
    mask-image: url('/wp-content/themes/vintwood/img/patterns/star.svg') !important;
    background-color: #BBB5AD !important;
    background-image: none !important;
    pointer-events: none !important;
    opacity: 1 !important;
    z-index: 2 !important;
}

/* Haut */
.lu-border-etoiles::before {
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 20px !important;
    width: calc(100vw - 64px) !important;
    height: 8px !important;
    -webkit-mask-repeat: repeat-x !important;
    mask-repeat: repeat-x !important;
}

/* Bas */
.lu-border-etoiles::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 20px !important;
    width: calc(100vw - 64px) !important;
    height: 8px !important;
    -webkit-mask-repeat: repeat-x !important;
    mask-repeat: repeat-x !important;
}

/* Gauche — sur .e-con (enfant direct full-width) */
.lu-border-etoiles > .e-con::before {
    left: 12px !important;
    top: 20px !important;
    width: 8px !important;
    height: calc(100% - 40px) !important;
    -webkit-mask-repeat: repeat-y !important;
    mask-repeat: repeat-y !important;
}

/* Droite — sur .e-con (enfant direct full-width) */
.lu-border-etoiles > .e-con::after {
    right: 12px !important;
    top: 20px !important;
    width: 8px !important;
    height: calc(100% - 40px) !important;
    -webkit-mask-repeat: repeat-y !important;
    mask-repeat: repeat-y !important;
}

@media (max-width: 767px) {
    .lu-border-etoiles::before { top: 4px !important; width: calc(100vw - 12px) !important; }
    .lu-border-etoiles::after  { bottom: 4px !important; width: calc(100vw - 12px) !important; }
    .lu-border-etoiles > .e-con::before { left: 4px !important; top: 4px !important; height: calc(100% - 8px) !important; }
    .lu-border-etoiles > .e-con::after  { right: 4px !important; top: 4px !important; height: calc(100% - 8px) !important; }
}

/* Bleed gauche — élément dépasse jusqu'au bord gauche du viewport
   Utiliser sur un widget ou colonne dans un container centré 1140px.
   Le container parent doit avoir overflow:visible (pas overflow:hidden). */
.lu-bleed-left {
    margin-left: calc(50% - 50vw);
}
@media (max-width: 767px) {
    .lu-bleed-left {
        margin-left: 0;
    }
}

/* Page Le bureau — grille Anomalies */
/* Réglages responsive repris de l’ancien plugin Custom CSS & JS. */
@media screen and (max-width: 1190px) {
    .container-anomalies {
        display: flex;
        flex-wrap: wrap;
    }
    .anomalie { width: 100%; }
}
.container-anomalies > .e-con-inner {
    gap: 0 !important;
}
.anomalie {
    padding: 30px 20px !important;
}
/* Séparateur vertical — toutes colonnes sauf la dernière */
.container-anomalies > .e-con-inner > .anomalie:not(:last-child) {
    border-right: 5px dotted #5f5651;
}
/* Séparateur horizontal — 1er container uniquement (ajouter lu-anomalies-top) */
.lu-anomalies-top > .e-con-inner > .anomalie {
    border-bottom: 5px dotted #5f5651;
}
/* Mobile : empilé, séparateurs en bas */
@media (max-width: 767px) {
    .container-anomalies > .e-con-inner > .anomalie:not(:last-child) {
        border-right: none;
        border-bottom: 5px dotted #5f5651;
    }
}