*,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    :root {
        /* Décalage du logo (négatif = haut / gauche) */
        --logo-shift-x: -10vw;
        --logo-shift-y: -12vh;
    }

    html,
    body {
        margin: 0;
        min-height: 100%;
        overflow-x: hidden;
    }

    /* Image de fond plein écran */
    .body-image {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        object-fit: cover;
        z-index: 0;
    }

    /* PAYSAGE (par défaut) : logo à gauche, texte à droite */
    .logo-overlay {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: clamp(1rem, 3vw, 3rem);
        min-height: 100vh;
        min-height: 100dvh;
        padding-block: clamp(0.5rem, 3vh, 3rem);
        /* respecte l'encoche des téléphones en paysage */
        padding-left: max(clamp(1rem, 3vw, 3rem), env(safe-area-inset-left));
        padding-right: max(clamp(1rem, 3vw, 3rem), env(safe-area-inset-right));
    }

    .logo {
        /* limité par la largeur ET par la hauteur de l'écran */
        width: clamp(60px, min(25vw, 42vh), 680px);
        height: auto;
        flex-shrink: 0;
        position: relative;
        left: var(--logo-shift-x);
        top: var(--logo-shift-y);
        /* top: -14vh;
        left: -12vw; */
    }

    .text-overlay {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-width: 0;
        font-family: "Comfortaa", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
    }

    /* Police fluide : suit la largeur ET la hauteur (le plus petit des deux) */
    h1 {
        margin: 0 0 clamp(0.5rem, 2vh, 2rem);
        padding: clamp(0.5rem, 1.5vw, 1.5rem);
        background: rgba(0, 0, 0, 0.2);
        color: #4f46e5;
        font-size: clamp(1.5rem, min(7vw, 11vh), 6rem);
        line-height: 1.1;
        border-radius: 0.5rem;
        margin-top: -10rem;
    }

    .block-slogan {
        background: rgba(0, 0, 0, 0.1);
        padding: clamp(0.4rem, 1.5vmin, 1.5rem);
        border-radius: 0.5rem;
    }

    .slogan {
        margin: 0.25em 0;
        color: #2563eb;
        font-size: clamp(0.85rem, min(2.8vw, 4.5vh), 2.25rem);
        line-height: 1.3;
        font-family: "Rubik Storm", system-ui;
        font-weight: 400;
        font-style: normal;
}

    /* PORTRAIT (téléphone et tablette) : logo au-dessus du texte */
    @media (orientation: portrait) {
        :root {
            --logo-shift-x: 0px;
            --logo-shift-y: -25vh;
        }

        .logo-overlay {
            flex-direction: column;
            gap: clamp(1rem, 4vh, 3rem);
        }

        .logo {
            width: clamp(90px, 25vw, 260px);
            /* left: var(--logo-shift-x);
            top: var(--logo-shift-y); */
        }
    }

    /* Paysage (tablettes)*/
        @media (orientation: landscape) and (max-height: 700px) {
            :root {
                --logo-shift-x: -4vw;
                --logo-shift-y: -14vh;
            }
        }

    /* PAYSAGE avec peu de hauteur (téléphones) : on compacte */
    @media (orientation: landscape) and (max-height: 500px) {
        :root {
                --logo-shift-x: -6vw;
                --logo-shift-y: -2vh;
            }
        .logo-overlay {
            gap: 2vw;
        }
        .logo {
            width: clamp(90px, 25vw, 120px);
            /* left: var(--logo-shift-x);
            top: var(--logo-shift-y); */
        }
        h1 {
            margin-top: -5rem;
        }

        .block-slogan {
            padding: 0.3rem 0.6rem;
        }
    }