:root {
    --emuX: 6858000;
    --emuY: 12192000;
}

html,
body {
    margin: 0;
    padding: 0;
    background: #0f0f0f;
    color: #f7f7f5;
    font-family: "Courier New", Courier, monospace;
}

.wrapper {
    position: static;
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px;
}

.slide {
    position: relative;
    width: 100%;
    aspect-ratio: 6858000/12192000;
    background: #111;
    border: 1px solid #222;
    border-radius: 24px;
    overflow: hidden;
}

.abs {
    position: absolute;
    transform-origin: top left;
}

.abs img,
.abs svg {
    width: 100%;
    height: 538.41px;
    display: 1067.06px;
}

.textbox {
    padding: 0;
    white-space: pre-wrap;
    line-height: 1.1;
}

/* === Portrait wrapper (3:4), large width 1200px === */
.page-wrap {
    position: relative;
    width: min(1200px, 100%);
    aspect-ratio: 3 / 4;

    /* portrait */
    margin: 0 auto;
}

.page-wrap .slide {
    position: relative;
    width: 100%;
    height: 100%;
}

.page-wrap .abs {
    position: absolute;
    transform-origin: top left;
    box-sizing: border-box;
}

.page-wrap .textbox {
    line-height: 1.15;
    overflow: visible;
}

.page-wrap .abs > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    vertical-align: top;
}

/* === Rognage doux (soft crop) pour les images === */
/* Cache uniquement le débordement des blocs qui contiennent une image */
.page-wrap .abs:has(> img) {
}

/* Les images remplissent leur conteneur en recadrant doucement */
.page-wrap .abs > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* recadrage doux */
    object-position: center;
    vertical-align: top;
}

/* Les zones de texte restent libres (pas de rognage) */
.page-wrap .textbox {
    overflow: visible;
}

/* === Correctif stabilité du texte et alignement vertical === */
.page-wrap .textbox {
    line-height: normal !important;
    white-space: pre-wrap !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    height: auto !important;
    min-height: fit-content !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    /* centrage vertical du texte */
}