/************************
MEDIA
*************************/

/* Gabarit "simple" (audio/document) et sa vignette de couverture */
.media__card-simple {
    max-width: 600px;
}

.media__cover-thumb {
    width: 100px;
    height: 100px;
}

/* Couleurs de couverture par type */
.block-media .has-poster {
    --mediaBgColor: #DDD;
}

.block-media .no-poster {
    --mediaBgColor: #c0392b;
}

.block-media .ext-pdf {
    --mediaBgColor: #c0392b;
}

.block-media .ext-doc, .ext-docx, .ext-odt {
    --mediaBgColor: #2980b9;
}

.block-media .ext-xls, .ext-xlsx {
    --mediaBgColor: #27ae60;
}

.block-media .ext-ppt, .ext-pptx {
    --mediaBgColor: #e67e22;
}

.block-media .ext-txt {
    --mediaBgColor: #7f8c8d;
}

.block-media .ext-mp3, .ext-wav, .ext-ogg, .ext-acc {
    --mediaBgColor: #8e44ad;
}

.block-media .ext-mp4, .ext-webm {
    --mediaBgColor: #16a085;
}

/* vert vidéo */

.card-media-doc {
    --book-width: var(--book-w-base);
    --book-height: var(--book-h-base);
    --book-spine: var(--book-s-base);
    --book-base-size: var(--book-base-s);
    --book-border-radius: calc(var(--book-width) * 0.03);

    position: relative;
    overflow: visible;
    min-height: 160px; /* hauteur minimum pour centrer le livre */
    display: flex;
    align-items: stretch; /* ✅ Les enfants prennent la hauteur du plus grand */
}

.book-container {
    position: absolute;
    left: -20px;
    top: 50%;
    --offsetXBookContainer: calc(var(--book-base-size) - var(--book-width));
    transform: translateX(calc(var(--offsetXBookContainer) * 0.7)) translateY(-50%);
    z-index: 10;
    flex-shrink: 0;
}

.doc-info {
    margin-left: 180px;
    padding: 1.5rem;
    background: var(--color-bg, #FFFFFF);
    flex: 1; /* ✅ Prend tout l'espace restant */
    flex-direction: column;
    justify-content: center; /* ✅ Contenu centré verticalement */
}

/* --- Tablette --- */
@media (max-width: 991px) {
    .card-media-doc {
        --book-width: calc(var(--book-w-base) * 0.8) !important;
        --book-height: calc(var(--book-h-base) * 0.8) !important;
        --book-spine: calc(var(--book-s-base) * 0.8) !important;
    }
}

/* --- Mobile --- */
@media (max-width: 756px) {
    .card-media-doc {
        --book-width: calc(var(--book-w-base) * 0.6) !important;
        --book-height: calc(var(--book-h-base) * 0.6) !important;
        --book-spine: calc(var(--book-s-base) * 0.6) !important;
        min-height: unset;
    }

    .book-container {
        position: relative;
        left: unset;
        top: unset;
        transform: none;
        display: flex;
        justify-content: center;
        padding: 0;
        transform: translateY(-50px);
        height: 60px;
    }

    .doc-info {
        margin-left: 0;
        padding: 10px 1rem 1.5rem;
        text-align: center;
    }

    .doc-btn {
        width: 100%;
        justify-content: center;
    }
}

.book-anim {
    width: var(--book-width);
    height: var(--book-height);
    position: relative;
    text-align: center;
    perspective: var(--book-perspective);
}

.book {
    transform: rotateX(43deg) rotateY(11deg) rotateZ(-26deg);
    transform-style: preserve-3d;
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    background-size: cover;
    transform-origin: 0 50%;
    transition: all .5s ease-in-out;
    box-shadow: calc(var(--book-width) * -0.05) calc(var(--book-width) * 0.15) calc(var(--book-width) * 0.1) calc(var(--book-width) * -0.05) #00000033;
    border-radius: 0 var(--book-border-radius) var(--book-border-radius) 0 !important;
}

.card-media-doc:hover .book {
    transform: rotateX(15deg) rotateY(12deg) rotateZ(-11deg);
    transform-style: preserve-3d;
    box-shadow: 0 calc(var(--book-width) * 0.02) calc(var(--book-width) * 0.02) 0 #00000033;
}

.book-cover {
    width: 100%;
    height: 100%;
    display: block;
    background: var(--mediaBgColor);
    border-radius: 0 var(--book-border-radius) var(--book-border-radius) 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--mediaBgColor) 100%, #000 50%);
    border-left: 1px solid #FFFFFF66;
    background-size: 100% 100%;
    transition: border 0.3s;
    z-index: 1;
}

.book-back-cover {
    position: absolute;
    transform: translateZ(calc(var(--book-spine) * -1));
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: var(--mediaBgColor);
    border-bottom: 1px solid color-mix(in srgb, var(--mediaBgColor) 100%, #000 60%);
    background-size: 100% 100%;
    border-radius: 0 var(--book-border-radius) var(--book-border-radius) 0 !important;
}

.book-back-cover:after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    background: #00000033;
    border-radius: 0 var(--book-border-radius) var(--book-border-radius) 0;
}


.card-media-doc:hover .book-cover, .card-media-doc:hover .book-back-cover {
    border-bottom: 1px solid color-mix(in srgb, var(--mediaBgColor) 100%, #000 10%);
}

.book-spine {
    position: absolute;
    transform: rotateY(90deg) translateZ(calc(var(--book-spine) * -0.5)) translateX(calc(var(--book-spine) * 0.5));
    width: var(--book-spine);
    height: var(--book-height);
    top: 0;
    left: 0;
    z-index: -1;
    background: var(--mediaBgColor);
    background-size: 20000% 100%;
}

.book-spine:after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    background: #00000022;
    border-radius: 0 var(--book-border-radius) var(--book-border-radius) 0;
}

.book-pages {
    position: absolute;
    --offsetYPages: calc(var(--book-spine) * -0.5);
    --offsetZPages: calc(calc(calc(var(--book-height) * -1) - var(--offsetYPages)) * 0.99);
    transform: rotatex(90deg) translateY(var(--offsetYPages)) translateZ(var(--offsetZPages));
    transform-style: preserve-3d;
    width: calc(var(--book-width) * 0.98);
    height: var(--book-spine);
    top: 0;
    left: 0;
    z-index: -1;
    background: #EEE;
    border-right: 1px solid #CCC;
    box-shadow: inset 0 calc(var(--book-spine) * -0.1) 0 #fff,
    inset 0 calc(var(--book-spine) * -0.2) 0 #ddd,
    inset 0 calc(var(--book-spine) * -0.3) #fff,
    inset 0 calc(var(--book-spine) * -0.4) 0 #ddd,
    inset 0 calc(var(--book-spine) * -0.5) 0 #fff,
    inset 0 calc(var(--book-spine) * -0.6) 0 #ddd,
    inset 0 calc(var(--book-spine) * -0.7) 0 #fff,
    inset 0 calc(var(--book-spine) * -0.8) 0 #ddd,
    inset 0 calc(var(--book-spine) * -0.9) 0 #fff
}


.book-cover-icon {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    border-radius: 0 3px 3px 0 !important;
}

.book-cover-icon i {
    font-size: calc(var(--book-height) / 3);
    opacity: 1;
}

.book-cover-icon span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    opacity: 1;
}

.book .effect {
    width: calc(var(--book-width) * 0.2);
    height: 100%;
    margin-left: calc(var(--book-width) * 0.03);
    border-left: 2px solid #00000010;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    transition: all .5s ease;
}

.card-media-doc:hover .effect {
    width: calc(var(--book-width) * 0.4);
}

.book .light {
    width: 90%;
    height: 100%;
    position: absolute;
    border-radius: 0 var(--book-border-radius) var(--book-border-radius) 0;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%);
    top: 0;
    right: 0;
    opacity: .1;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
}

.card-media-doc:hover .light {
    opacity: 1;
    width: 70%;
}


.card-media-audio {
    --cd-width: var(--cd-w-base);
    --cd-base-size: var(--cd-base-s);

    position: relative;
    overflow: visible;
    min-height: 160px; /* hauteur minimum pour centrer le CD */
    display: flex;
    align-items: stretch; /* ✅ Les enfants prennent la hauteur du plus grand */
}

audio.custom-audio-player {
    height: 35px; /* Plus fin que le standard */
    border-radius: var(--radius-card, 8px);
    filter: sepia(20%) saturate(70%) grayscale(1); /* Optionnel : pour l'accorder à un thème sobre */
}

/* --- Tablet --- */
@media (max-width: 991px) {
    .card-media-audio {
        --cd-width: calc(var(--cd-w-base) * 0.8) !important;
    }
}

/* --- Mobile : cd dans le flux, centré au-dessus du texte --- */
@media (max-width: 756px) {
    .card-media-audio {
        min-height: unset;
    }
}

.cd-container {
    position: absolute;
    left: -20px;
    top: 50%;
    --cdOffsetX: calc(var(--cd-base-size) - var(--cd-width));
    transform: translateX(calc(var(--cdOffsetX) * 0.7)) translateY(-50%);
    z-index: 10;
    flex-shrink: 0;
}

.audio-info {
    margin-left: 180px;
    padding: 1.5rem;
    background: var(--color-bg, #FFFFFF);
    flex: 1;
    flex-direction: column;
    justify-content: center;
}


@media (max-width: 756px) {
    .cd-container {
        position: relative;
        left: unset;
        top: unset;
        transform: none;
        display: flex;
        justify-content: center;
        padding: 0;
        transform: translateY(-50px);
        height: 60px;
    }

    .audio-info {
        margin-left: 0;
        padding: 10px 1rem 1.5rem;
        text-align: center;
    }


    .cd-btn {
        width: 100%;
        justify-content: center;
    }
}

.cd-anim {
    width: var(--cd-width);
    height: var(--cd-width);
    position: relative;
    text-align: center;
    perspective: var(--cd-perspective);
}

.cd {
    transform: rotateX(43deg) rotateY(11deg) rotateZ(-26deg);
    transform-style: preserve-3d;
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    transform-origin: 0 50%;
    transition: all .5s ease-in-out;
    box-shadow: calc(var(--cd-width) * -0.05) calc(var(--cd-width) * 0.15) calc(var(--cd-width) * 0.1) calc(var(--cd-width) * -0.05) #00000033;
}

.card-media-audio:hover .cd {
    transform: rotateX(15deg) rotateY(12deg) rotateZ(-11deg);
    transform-style: preserve-3d;
    box-shadow: 0 calc(var(--cd-width) * 0.02) calc(var(--cd-width) * 0.02) 0 #00000033;
}


.cd-cover {
    width: 100%;
    height: 100%;
    display: block;
    background: var(--mediaBgColor);
    background-size: cover;
    background-position: 50% 50%;
    transition: border 0.3s;
    opacity: 1;
}


.cd-disc {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(0);
    width: calc(var(--cd-width) * 0.98);
    height: calc(var(--cd-width) * 0.98);
    border-radius: var(--radius-circle, 50%) !important;
    z-index: -1;
    transition: transform 0.3s ease-out, box-shadow 0.3s;
    display: block;
    background: url('/download/webdesign/gfx/cd-texture.png');
    background-size: cover;
    box-shadow: 0 calc(var(--cd-width) * 0.02) calc(var(--cd-width) * 0.02) 0 #00000000;
}

.card-media-audio:hover .cd-disc {
    transform: translateY(-50%) translateX(45%) rotate(40deg);
    box-shadow: 0 calc(var(--cd-width) * 0.02) calc(var(--cd-width) * 0.02) 0 #00000033;
}

.cd-cover-icon {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    border-radius: 0 3px 3px 0 !important;
}

.cd-cover-icon i {
    font-size: calc(var(--cd-width) / 3);
    opacity: 1;
}

.cd-cover-icon span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    opacity: 1;
}


.cd-anim .effect {
    width: 20px;
    height: 100%;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    transition: all .5s ease;
}

.card-media-audio:hover .effect {
    width: 40px;
    /** margin-left:13px;
    opacity: 0.5; **/
}

.cd-anim .light {
    width: 90%;
    height: 100%;
    position: absolute;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%);
    top: 0;
    right: 0;
    opacity: .1;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
}

.card-media-audio:hover .light {
    opacity: 1;
    width: 70%;
}


.card-media-video {
    --video-base-size: var(--video-w-base);
    --video-width: var(--video-w-base);
    --video-ratio: var(--video-ratio-base);

    --cran: calc(var(--video-width) / 50);

    position: relative;
    overflow: visible;
    min-height: 160px; /* hauteur minimum pour centrer le CD */
    display: flex;
    align-items: stretch; /* ✅ Les enfants prennent la hauteur du plus grand */
}

.video-container {
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    flex-shrink: 0;
}

.video-info {
    margin-left: 180px;
    padding: 1.5rem;
    background: var(--color-bg, #FFFFFF);
    flex: 1; /* ✅ Prend tout l'espace restant */
    flex-direction: column;
    justify-content: center; /* ✅ Contenu centré verticalement */
}


.video-anim {
    width: var(--video-width);
    height: auto;
    aspect-ratio: var(--video-ratio);
    position: relative;
    text-align: center;
    margin: 2.5%;
    perspective: var(--video-perspective);
}

.video {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    transform: rotateX(43deg) rotateY(11deg) rotateZ(-26deg);
    transform-style: preserve-3d;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    transform-origin: 0 50%;
    -webkit-transform-origin: 0 50%;
    background: transparent;
    background-size: cover;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    box-shadow: calc(var(--cd-width) * -0.05) calc(var(--cd-width) * 0.15) calc(var(--cd-width) * 0.1) calc(var(--cd-width) * -0.05) #00000033;
}


.video-picture {
    position: absolute;
    inset: 0;
    background-position: 0 center;
    transform: scale(1) translateX(0);
    transform-origin: 0 center;
    animation-duration: 20s;
    animation-name: anim-video;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    background-size: cover;
    background-color: var(--mediaBgColor);
}

@keyframes anim-video {
    0% {
        transform: scale(1) translateX(0);
    }
    50% {
        transform: scale(2) translateX(-30%);
    }
    100% {
        transform: scale(1) translateX(0);
    }
}


.film-strip {
    width: calc(var(--video-width) / 14);
    flex-shrink: 0;
    background: #111;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    overflow: hidden;
    position: relative;
}

/* Conteneur intérieur qui défile */
.film-strip-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10;
    padding: 10 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    animation: strip-random 0.1s steps(1, end) infinite;
    filter: blur(calc(var(--video-width) / 100));
}

.film-strip-inner span {
    display: block;
    width: calc(var(--video-width) / 24);
    height: calc(var(--video-width) / 30);
    background: #AAA;
    box-shadow: inset 0 0 0 1px #555;
    flex-shrink: 0;
    margin: calc(var(--video-width) / 30) 0;
}


@keyframes strip-random {
    0% {
        transform: translateY(0);
    }
    8% {
        transform: translateY(var(--cran));
    }
    9% {
        transform: translateY(0);
    }
    23% {
        transform: translateY(calc(var(--cran) * 2));
    }
    24% {
        transform: translateY(var(--cran));
    }
    41% {
        transform: translateY(0);
    }
    42% {
        transform: translateY(calc(var(--cran) * 2));
    }
    60% {
        transform: translateY(var(--cran));
    }
    61% {
        transform: translateY(0);
    }
    78% {
        transform: translateY(calc(var(--cran) * 2));
    }
    79% {
        transform: translateY(var(--cran));
    }
    100% {
        transform: translateY(0);
    }
}


/* Cadre central */
.film-frame {
    flex: 1;
    position: relative;
    background: #1a1a1a;
    overflow: hidden;
}

/* Overlay play */
.film-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}


/* Bouton play circulaire */
.play-btn {
    opacity: 0;
    width: calc(var(--video-width) / 5);
    height: calc(var(--video-width) / 5);
    border-radius: var(--radius-circle, 50%);
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-icon {
    width: calc(var(--video-width) / 8);
    height: calc(var(--video-width) / 8);
}

/* Icône fallback (sans vignette) */
.film-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.film-icon-inner {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg, 12px);
    background: #c0392b; /* couleur à adapter selon ton système */
    display: flex;
    align-items: center;
    justify-content: center;
}


.card-media-video:hover .video {
    transform: rotateX(15deg) rotateY(12deg) rotateZ(-11deg);
    transform-style: preserve-3d;
    box-shadow: 0 calc(var(--video-width) * 0.02) calc(var(--video-width) * 0.02) 0 #00000033;
}

.video-anim .light {
    width: 50%;
    height: 100%;
    position: absolute;
    border-radius: 0 var(--book-border-radius) var(--book-border-radius) 0;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    top: 0;
    right: 0;
    opacity: .2;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
}


.card-media-video:hover .light {
    opacity: 1;
}

.card-media-video:hover .video-picture {
    animation-play-state: paused;
}

.card-media-video:hover .play-btn {
    opacity: 1;
}

.card-media-video:hover .film-strip-inner {
    animation-play-state: paused;
    filter: blur(0);
}

/* --- Tablette --- */
@media (max-width: 991px) {
    .card-media-video {
        --video-width: calc(var(--video-w-base) * 0.8) !important;
    }
}

/* --- Mobile --- */
@media (max-width: 756px) {
    .card-media-video {
        --video-width: calc(var(--video-w-base) * 0.6) !important;
        min-height: unset;
    }

    .video-container {
        position: relative;
        left: unset;
        top: unset;
        transform: none;
        display: flex;
        justify-content: center;
        padding: 0;
        transform: translateY(-50px);
        height: auto;
        width: 100%;
    }

    .video-info {
        margin-left: 0;
        padding: 10px 1rem 1.5rem;
        text-align: center;
        width: 100%;
    }

    .video-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Icône centrée sur video-picture sans poster ── */
.video-picture.no-poster {
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-cover-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #FFFFFF;
}

.video-cover-icon i {
    font-size: 2.5rem;
    line-height: 1;
}

.video-cover-icon span {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}