/* ============================
   1. PORTFOLIO CANVAS — Conteneur principal
   ============================ */
#portfolio-canvas {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    background-color: var(--bg-color);
    padding-bottom: 100px;
}

/* ============================
   OVERLAY DE TRANSITION DE PAGE
   Opaque par défaut, devient transparent via .is-hidden.
   Indépendant du canvas → zéro style inline résiduel.
   ============================ */
#ldk-page-overlay {
    position: fixed;
    inset: 0;
    background-color: var(--bg-color);
    z-index: 99998;
    opacity: 1;
    pointer-events: all;
    /* Entrée de page : dissolution rapide */
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#ldk-page-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
}


body.admin-bar #portfolio-canvas {
    margin-top: -32px;
    padding-top: 32px;
}

/* ============================
   2. DRAGGABLE ITEMS — Éléments déplaçables
   ============================ */
.draggable-item {
    position: absolute;
    cursor: grab;
    overflow: hidden;
    max-width: 90vw;
    -webkit-user-select: none;
    user-select: none;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.draggable-item img {
    max-width: 100% !important;
    height: auto !important;
}

/* ============================
   3. TEXTE SOUS LES VISUELS
   ============================ */
.draggable-item-text-wrap {
    padding: 5px 0 0 0;
}

.draggable-item h2 {
    font-size: 12px !important;
    margin: 0 0 2px 0;
    letter-spacing: normal;
    font-weight: normal;
}

.draggable-item-subtitle {
    font-size: 10px !important;
    line-height: 1.4;
    margin-bottom: 0;
    text-transform: uppercase;
}

.desktop-only-excerpt {
    font-size: 10px;
    line-height: normal;
    margin-top: 4px;
}

.texte-visuel-libre {
    pointer-events: auto;
    padding: 12px 0;
}

/* ============================
   4. MÉDIAS — Wrappers vidéo & image
   ============================ */
.desktop-video-wrapper {
    display: block;
    width: 100%;
    pointer-events: none;
}

.mobile-media-wrapper {
    display: none;
    pointer-events: none;
}

/* Bloc image simple (sans vidéo) */
.ldk-media-block {
    width: 100%;
    pointer-events: none;
}

.ldk-media-block img {
    width: 100%;
    height: auto;
    display: block;
}

/* Vidéo desktop principale */
.desktop-home-video {
    width: 100%;
    height: auto;
    display: block;
    background: transparent;
}

/* ============================
   5. MÉDIA WRAPPER — Fade-in vidéo mobile
   ============================ */
.media-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.media-wrapper .media-poster {
    width: 100%;
    height: auto;
    display: block;
}

.media-wrapper .portfolio-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.media-wrapper.video-ready .portfolio-video {
    opacity: 1;
}

/* ============================
   6. MOCKUP VIDÉOS
   ============================ */
.mockup-video-container {
    width: 100%;
    display: block;
}

.mockup-video-container video {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* ============================
   7. COINS ARRONDIS (option par projet)
   ============================ */
.has-border-radius img,
.has-border-radius video {
    border-radius: 12px;
    overflow: hidden;
    transform: translateZ(0);
    isolation: isolate;
}

/* ============================
   8. BOUTON ADMIN — Sauvegarder disposition
   ============================ */
#save-layout-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    padding: 15px 25px;
    background: #000;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
}