@media (max-width: 768px) {

    /* =============================== */
    /* POLICES — garantir Inter mobile */
    /* =============================== */
    #s1 *, #s2 *, #s3 *, #s4 * {
        font-family: 'Inter' !important;
        font-style: normal !important;
        font-weight: 200 !important;
    }

    /* =============================== */
    /* SECTION 1 — header mobile       */
    /* =============================== */
    #s1 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    #s1 .inner {
        justify-content: center !important;
        align-items: center !important;
    }

    #s1 .s1-content {
        transform: none !important;
        text-align: center !important;
        align-items: center !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    #s1 h1 { font-size: 40px; }
    #s1 h2 { font-size: 25px; }

    /* =============================== */
    /* TITRES — S1 à 40 %, S2-S4 à 68 % */
    /* =============================== */
    #s1 .section-title,
    #s2 .section-title,
    #s3 .section-title,
    #s4 .section-title {
        position: absolute !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100% - 60px) !important;
        text-align: center !important;
        pointer-events: none !important;
        color: rgb(51, 51, 51) !important;
        font-family: 'Inter', sans-serif !important;
    }

    /* S2/S3/S4 : le titre tombe dans la zone assombrie du fond, texte clair pour rester lisible */
    #s2 .section-title,
    #s3 .section-title,
    #s4 .section-title {
        color: #f5eada !important;
    }

    #s1 .section-title { top: 40% !important; }   /* mobile : titre plus haut qu'en desktop (60 %) */
    #s2 .section-title,
    #s3 .section-title,
    #s4 .section-title { top: 68% !important; }

    /* =============================== */
    /* CHEVRONS                        */
    /* =============================== */
    .next-arrow {
        position: absolute !important;
        bottom: 55px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 44px !important;
        height: 64px !important;
    }

    .next-arrow .chevron-dark {
        display: none !important;
    }

    .next-arrow .chevron-light {
        display: block !important;
    }

    /* =============================== */
    /* BACKGROUNDS MOBILE              */
    /* =============================== */
    body::before {
        background-image: url("../images/bg-mobile-1.jpg") !important;
        background-size: cover !important;
        background-position: center !important;
    }

    #s2 { background-image: url("../images/bg-mobile-2.jpg") !important; }
    #s3 { background-image: url("../images/bg-mobile-3.jpg") !important; }
    #s4 { background-image: url("../images/bg-mobile-4.jpg") !important; }

    /* =============================== */
    /* IMAGES INTERNES                 */
    /* =============================== */
    #s2 .inner img,
    #s3 .inner img,
    #s4 .inner img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 auto !important;
        max-height: 60vh !important;
    }

    /* =============================== */
    /* STRUCTURE GÉNÉRALE              */
    /* =============================== */
    .inner {
        padding: 0 20px !important;
    }

    section h1 {
        font-size: 36px !important;
        text-align: center !important;
    }

    section h2 {
        font-size: 23px !important;
        text-align: center !important;
    }

    section h3 {
        font-size: 21px !important;
        text-align: center !important;
    }

    /* =============================== */
    /* STABILISATION MOBILE GSAP       */
    /* =============================== */
    body {
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: pan-y pinch-zoom;
    }

    section {
        height: 100svh !important;
        overflow: hidden;
    }
}