:root {
      overscroll-behavior: none;
    }

:root {
    --blue:#2500ff;
    --yellow: rgb(229, 255, 0);
    --bg-grey:rgb(215,215,215);
}

/* === RESET === */
*{margin:0;padding:0;box-sizing:border-box;}
body{
    font-family:sans-serif;
    background:var(--bg-grey);
    color:white;
}

/* === BANDE 1 : CATÉGORIE === */
.cat-banner {
    background:var(--blue);
    color:rgb(215, 215, 215);
    display:flex;
    align-items:center;
    gap:1vw;
    padding:1vh 1vw;
    font-family: 'Roboto Flex', sans-serif;
    font-variation-settings: "wdth" 110, "wght" 350;
font-optical-sizing: auto;
letter-spacing: 0px;
line-height: 0.9;
}
.cat-banner h1{
    font-size:6vw;
    font-weight:900;
}
    .cat-banner img{
    height:8vh;
}


.title-banner {
    font-family: 'ROBOTO FLEX', sans-serif;
    background:var(--yellow);
    color:var(--blue);
    padding:1vh 1vw;
    font-variation-settings: "wdth" 150, "wght" 600;
    font-optical-sizing: auto;
    letter-spacing: auto;
    width: fit-content;
    margin: 0 auto 1.5vh auto;
    display: inline-block; /* <<< IMPORTANT */
}

/* === GRID === */
.proj-grid {
    margin-top:0vh;
    padding:1vw;
    display:grid;
    grid-template-columns: 1fr 2fr;
    gap:1vw;
    align-items: start;
}

/* === TEXTE === */
.proj-text {
    background:var(--yellow);
    color:var(--blue);
    padding:2vh 1.5vw;
    border-radius:25px;
    font-size:1.2vw;
    line-height:1.5;
}

/* ===== SLIDER SANS JS ===== */
.slider-css {
    width:100%;
    height:70vh;
    position:relative;
    overflow:hidden;
}

/* Radios cachés */
.slider-css input{display:none;}

/* Images superposées avec transition swipe */
.slider-css .slides img {
    position:absolute;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    margin:auto;
    top:0; bottom:0; left:0; right:0;
    background: var(--bg-grey);
    opacity:0;
    transition:opacity .5s ease;
    border-radius:20px;
}
.slider-css {
    width:100%;
    height:70vh;
    position:relative;
    overflow:hidden;
    border-radius:20px;
    background: var(--bg-grey);
}

/* Images visibles selon radio */
#s1:checked ~ .slides .img1 {opacity:1;transform:translateX(0);}
#s2:checked ~ .slides .img2 {opacity:1;transform:translateX(0);}
#s3:checked ~ .slides .img3 {opacity:1;transform:translateX(0);}
#s4:checked ~ .slides .img4 {opacity:1;transform:translateX(0);}
#s5:checked ~ .slides .img5 {opacity:1;transform:translateX(0);}

.arrow {
    position:absolute;
    bottom: 10px;             /* au lieu de top:95% */
    transform:translateY(0);  /* supprime le -50% */
    width:60px;height:60px;
    display:none;
    justify-content:center;
    align-items:center;
    cursor:pointer;
}
.arrow img {width:60%;}
.arrow.left{left:3vw;}
.arrow.right{right:3vw;}

#s1:checked ~ .left[for="s5"], #s1:checked ~ .right[for="s2"],
#s2:checked ~ .left[for="s1"], #s2:checked ~ .right[for="s3"],
#s3:checked ~ .left[for="s2"], #s3:checked ~ .right[for="s4"],
#s4:checked ~ .left[for="s3"], #s4:checked ~ .right[for="s5"],
#s5:checked ~ .left[for="s4"], #s5:checked ~ .right[for="s1"] {display:flex;}

/* === RESPONSIVE === */
@media(max-width:900px){
    .proj-grid{
        grid-template-columns:1fr;
    }
    .proj-text{font-size:3.5vw;}
    .title-banner h2{font-size:7vw;}
    .cat-banner h1{font-size:6vw;}
}




.marquee {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    display: flex;
    gap: 4rem; /* espace entre répétitions */
}

.marquee span {
    animation: marquee-move 15s linear infinite;
    display: inline-block;
}

html, body {
  overflow-x: hidden;
}
.cat-banner,             /*overflow hidden et cat banner pour bloquer le scroll a    gauche*/
.title-banner {
  overflow: hidden;
  width: 100%;
}



/* Animation infinie continue */
@keyframes marquee-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* === Styles textes personnalisés === */
.cat-banner .marquee span {
    font-size: 6vw;
    font-family: 'Roboto Flex', sans-serif;
    color: rgb(215, 215, 215);
}

.title-banner .marquee span {
    font-size: 3vw;
    font-family:'roboto Flex', sans-serif;
    color: var(--blue);
}


/* inverement sens bande 2 */
.title-banner .marquee span {
    animation: marquee-reverse 17s linear infinite;
}

/* Animation vers la droite */
@keyframes marquee-reverse {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}