main {
    position: relative;
    padding: 50px 105px;
    overflow: hidden;
}

main .side-background {
    position: absolute;
    top: 600px; left: 100%;

    transform: translate(-50%, -50%);

    z-index: -1;
}
main .side-background2 {
    position: absolute;
    top: 1250px; left: -7%;

    transform: translate(-50%, -50%);

    z-index: -1;
}

main .chapter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;

    text-align: center;
}

main .chapter h2 {
    font-size: 2.5rem;
    color: #5F36F5;
}

main .chapter p {
    font-size: 1rem;
    color: #767676;
}

/* 2) Coupe le défilement PARTOUT ailleurs (y compris touche/pan) */
*:not(html):not(body){
    overflow: hidden !important;        /* bloque scroll */
    touch-action: manipulation;         /* évite le pan sur mobile */
    
    /* masque définitivement toute barre éventuelle */
    scrollbar-width: none !important;           /* Firefox */
}
*:not(html):not(body)::-webkit-scrollbar{
    display:none !important;                    /* WebKit */
}
/* ------------------------------------------------------------------
   CORRECTION : laisser les événements de roulette/pan se propager
   vers le viewport principal. On conserve overflow:hidden mais on
   remet le chainage de scroll à la valeur par défaut (auto).
------------------------------------------------------------------- */
*:not(html):not(body){
    /* ↓ écrase le précédent overscroll-behavior:none; */
    overscroll-behavior: auto !important;
}
  /* -------- Reset minimal -------- */
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  body {
    font-family: var(--font-sans);
    background: var(--white);
    color: var(--gray-700);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  /* WebKit (Chrome, Safari, Edge) */
  ::-webkit-scrollbar {
    display: none;
  }

  /* Firefox */
  * {
    scrollbar-width: none;
    -ms-overflow-style: none; /* Pour Internet Explorer/Edge Legacy */
  }

  /* Pour s'assurer que le scroll reste fonctionnel */
  body, html, * {
    overflow-y: auto;
    overflow-x: hidden;
  }

/* Media Queries pour le responsive design */

/* Grands écrans (par défaut) */
:root {
    --container-padding: 105px;
    --font-size-h2: 2.5rem;
    --font-size-p: 1rem;
}

/* Tablette en mode paysage */
@media (max-width: 1024px) {
    :root {
        --container-padding: 50px;
        --font-size-h2: 2.2rem;
    }
    
    main {
        padding: 40px var(--container-padding);
    }
    
    main .side-background,
    main .side-background2 {
        display: none; /* Masquer les arrière-plans sur tablette pour plus de lisibilité */
    }
}

/* Tablette en mode portrait */
@media (max-width: 768px) {
    :root {
        --container-padding: 30px;
        --font-size-h2: 2rem;
    }
    
    main .chapter {
        gap: 10px;
    }
}

/* Téléphone */
@media (max-width: 480px) {
    :root {
        --container-padding: 15px;
        --font-size-h2: 1.8rem;
        --font-size-p: 0.9rem;
    }
    
    main {
        padding: 20px var(--container-padding);
    }
    
    main .chapter h2 {
        font-size: var(--font-size-h2);
    }
    
    main .chapter p {
        font-size: var(--font-size-p);
    }
    
    /* Amélioration du défilement sur mobile */
    html, body {
        position: relative;
        overflow-x: hidden;
        width: 100%;
    }
    
    /* Optimisation des transitions pour les appareils mobiles */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}

/* Très petits écrans */
@media (max-width: 320px) {
    :root {
        --container-padding: 10px;
        --font-size-h2: 1.5rem;
        --font-size-p: 0.8rem;
    }
    
    main .chapter {
        text-align: left;
        align-items: flex-start;
    }
}