/* ======================================================
   PALE-FIGURE (Desktop)
====================================================== */
body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    font-family: "Sorts Mill Goudy", serif;
    font-size: 1.3em;
    line-height: 1.3em;
    color: var(--text-color, black);
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer et Edge */
}
.pale-figure { margin: 0; height: 100vh; overflow: hidden; }
.pale-figure .split { display: flex; height: 100vh; }
.pale-figure .column { width: 50%; overflow-y: auto; padding: 30px; scrollbar-width: none; }
.pale-figure .column::-webkit-scrollbar { display: none; }

.pale-figure .column.left { padding-top: 30px; padding-bottom: 60px; }
.pale-figure .column.right { background: white; padding-top: 30px; padding-bottom: 80px; }

.pale-figure .gallery-image { display: block; margin-bottom: 30px; cursor: pointer; }
.pale-figure .gallery-image.xl { width: 100%; }
.pale-figure .gallery-image.large { width: 75%; }
.pale-figure .gallery-image.medium { width: 50%; }
.pale-figure .gallery-image.small { width: 25%; }

.pale-figure .text-content { display: none; }
.pale-figure .text-content.active { display: block; }

.pale-figure .site-header-bottom {
    position: fixed; bottom: 30px; left: 0; right: 0;
    display: flex; z-index: 1000; pointer-events: none;
}
.pale-figure .header-left { width: 50%; text-align: right; padding-right: 30px; }
.pale-figure .header-right { width: 50%; text-align: left; padding-left: 30px; }

.pale-figure .btn-back-bottom {
    position: fixed; bottom: 30px; left: 30px;
    text-decoration: none; z-index: 3000; 
}

.pale-figure .btn-back-bottom:hover { text-decoration: underline; text-decoration-color: black; }
.pale-figure .btn-back-bottom:hover [lang="en"] { text-decoration: underline; text-decoration-color: inherit; }

#intro-text { margin-top: 0; }

.align-left { margin-left: 0; margin-right: auto; }
.align-center { margin-left: auto; margin-right: auto; }
.align-right { margin-left: auto; margin-right: 0; }

.pale-figure h2 {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%; /* Empêche iOS de redimensionner le texte tout seul */
}

* {
    box-sizing: border-box; /* Crucial pour que les paddings ne fassent pas déborder les éléments */
}

/* --- BOUTON DESKTOP (Combiné) --- */
.pale-figure .btn-back {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9999;
    text-decoration: none;
    display: block; /* Visible sur Desktop */
}

/* Soulignement et couleurs façon "bonne figure" */
.pale-figure .btn-back:hover {
    text-decoration: underline;
    text-decoration-color: currentColor;
}
.pale-figure .btn-back:hover [lang="en"] {
    text-decoration: underline;
    text-decoration-color: currentColor;
}

/* On cache les boutons mobiles sur Desktop */
.pale-figure .btn-back-fr,
.pale-figure .btn-back-en {
    display: none;
}

@media (max-width: 768px) {

    body::-webkit-scrollbar,
    .column::-webkit-scrollbar,
    .split::-webkit-scrollbar,
    #right-col::-webkit-scrollbar {
        display: none !important;
    }

    body, .column, .split, #right-col {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    body {
        overflow: auto !important;
        height: auto !important;
        min-height: 100vh;
        min-height: 100dvh;
        font-size: 1.3em;
        background-color: var(--column-color, white);
    }

    body {
        overflow: auto !important;
        height: auto !important;
        min-height: 100vh;
        min-height: 100dvh;
        font-size: 1.3em;
        background-color: var(--column-color, white);
    }

    html.is-chrome-ios body.pale-figure {
        overflow: hidden !important;
        height: 100dvh !important;
        position: fixed;
        width: 100%;
    }

    html {
        background-color: inherit;
    }

    html.is-chrome-ios body.pale-figure .split{
        display: flex !important;
        flex-direction: column-reverse !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .is-chrome-ios .column.left,
    .is-chrome-ios #right-col {
        height: auto !important;
        overflow-y: visible !important;
    }

    body.pale-figure {
        height: auto !important;
        overflow: visible !important;
    }

    body.pale-figure .split { 
        display: flex !important;
        flex-direction: column-reverse !important;
        height: auto !important;
        min-height: 100vh;
    }

    body.pale-figure #intro-text {
        margin-bottom: 5px !important; 
    }

    body.pale-figure .column.left {
        width: 100% !important;
        display: block !important;
        padding-top: 10px !important;
        padding-bottom: 40px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        background: transparent !important; 
    }

    body:not(.index) .column img,
    body:not(.index) .column video {
        margin-bottom: 10px;
    }

    body.pale-figure #right-col {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        background: transparent !important; 
        z-index: 10 !important;
        display: block !important; 
        padding-top: 45px !important;
        padding-bottom: 0px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        overflow-y: visible !important;
    }

    body.pale-figure #right-col.mobile-open {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        background: white !important; 
        z-index: 5000 !important;
        padding-bottom: 20px !important;
        overflow-y: auto !important;
    }

    .pale-figure .site-header-bottom {
        position: fixed !important;
        top: auto !important;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        padding: 0 10px !important;
        z-index: 6000 !important;
        pointer-events: none;
    }

    .pale-figure .header-left, 
    .pale-figure .header-right {
        width: auto !important;
        padding: 0 !important;
    }

    .pale-figure .btn-back {
        display: none !important;
    }

    .pale-figure .btn-back-fr, 
    .pale-figure .btn-back-en {
        display: block !important;
        position: fixed !important;
        top: 10px !important; 
        bottom: auto !important; 
        z-index: 9999 !important;
        text-decoration: none;
    }

    .pale-figure .btn-back-fr {
        left: 10px !important;
    }

    .pale-figure .btn-back-en {
        right: 10px !important;
        left: auto !important;
    }

    .pale-figure .btn-back-fr:hover, 
    .pale-figure .btn-back-en:hover {
        text-decoration: underline !important;
    }

}