/* ------------------------------
   Masquer les inputs radio
   ------------------------------ */
.csslider input {
    display: none; /* On ne veut pas voir les boutons radio */
}

/* ------------------------------
   Conteneur principal du slider
   ------------------------------ */
.csslider {
    display: block;
    position: relative; /* Pour positionner les éléments enfants en absolu */
    width: 100%;
    max-width: 100%;
    text-align: left;
    margin: 0;
    overflow: hidden; /* Cache ce qui dépasse (images, etc.) */
}

/* ------------------------------
   Gestion de l’affichage des slides
   Quand un input est coché, on montre le <li> correspondant
   et on cache les autres.
   ------------------------------ */
.csslider input:nth-of-type(1):checked ~ ul li:nth-of-type(1) {opacity: 1; z-index: 1;}
.csslider input:nth-of-type(1):checked ~ ul li:not(:nth-of-type(1)) {opacity: 0; z-index: 0;}

.csslider input:nth-of-type(2):checked ~ ul li:nth-of-type(2) {opacity: 1; z-index: 1;}
.csslider input:nth-of-type(2):checked ~ ul li:not(:nth-of-type(2)) {opacity: 0; z-index: 0;}

.csslider input:nth-of-type(3):checked ~ ul li:nth-of-type(3) {opacity: 1; z-index: 1;}
.csslider input:nth-of-type(3):checked ~ ul li:not(:nth-of-type(3)) {opacity: 0; z-index: 0;}

.csslider input:nth-of-type(4):checked ~ ul li:nth-of-type(4) {opacity: 1; z-index: 1;}
.csslider input:nth-of-type(4):checked ~ ul li:not(:nth-of-type(4)) {opacity: 0; z-index: 0;}

.csslider input:nth-of-type(5):checked ~ ul li:nth-of-type(5) {opacity: 1; z-index: 1;}
.csslider input:nth-of-type(5):checked ~ ul li:not(:nth-of-type(5)) {opacity: 0; z-index: 0;}

.csslider input:nth-of-type(6):checked ~ ul li:nth-of-type(6) {opacity: 1; z-index: 1;}
.csslider input:nth-of-type(6):checked ~ ul li:not(:nth-of-type(6)) {opacity: 0; z-index: 0;}

.csslider input:nth-of-type(7):checked ~ ul li:nth-of-type(7) {opacity: 1; z-index: 1;}
.csslider input:nth-of-type(7):checked ~ ul li:not(:nth-of-type(7)) {opacity: 0; z-index: 0;}

/* ⚠️ Correction ici : c’était li:nth-of-type(7), ça doit être li:nth-of-type(8) */
.csslider input:nth-of-type(8):checked ~ ul li:nth-of-type(8) {opacity: 1; z-index: 1;}
.csslider input:nth-of-type(8):checked ~ ul li:not(:nth-of-type(8)) {opacity: 0; z-index: 0;}

.csslider input:nth-of-type(9):checked ~ ul li:nth-of-type(9) {opacity: 1; z-index: 1;}
.csslider input:nth-of-type(9):checked ~ ul li:not(:nth-of-type(9)) {opacity: 0; z-index: 0;}

.csslider input:nth-of-type(10):checked ~ ul li:nth-of-type(10) {opacity: 1; z-index: 1;}
.csslider input:nth-of-type(10):checked ~ ul li:not(:nth-of-type(10)) {opacity: 0; z-index: 0;}

/* ------------------------------
   Liste contenant les slides
   ------------------------------ */
.csslider ul {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: hsl(0,0%,0%); /* fond noir */
    aspect-ratio: 1363 / 470; /* grande image affichée sans recadrage */
}

.csslider ul li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity .5s linear;
}

/* ------------------------------
   Style des images
   ------------------------------ */
.csslider picture {
    display: block;
    width: 100%;
    height: 100%;
}
.csslider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.65);
}

/* ------------------------------
   Slide cliquable
   ------------------------------ */
.csslider li.slide-clickable {
    cursor: pointer;
}
.csslider li.slide-clickable img {
    transition: filter .3s;
}
.csslider li.slide-clickable:hover img {
    filter: brightness(.78);
}
.slide-finger {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    width: 26px;
    height: 36px;
    pointer-events: none;
    z-index: 3;
    opacity: 0.6;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.7));
}
@media (max-width: 639px) {
    .slide-finger {
        width: 18px;
        height: 25px;
        bottom: 0.4rem;
    }
}

/* ------------------------------
   Zone texte (titre + bouton)
   ------------------------------ */
.csslider .title-box {
    position: absolute;
    top: 1.5rem;
    left: 0;
    width: 100%;
    max-width: 43.75rem;
    display: flex;
    flex-direction: column;
    height: auto;
    padding-left: 2rem;
    justify-content: center;
    z-index: 2;
}
.csslider h1 {
    font-family: 'Noto Serif', serif;
    font-size: clamp(1.5rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.125;
    color: #fff;
    text-shadow: 2px 2px 8px hsla(0,0%,0%,.8);
}

/* ------------------------------
   Navigation (les ronds en bas)
   ------------------------------ */
.csslider .navigation {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    font-size: 0;
    line-height: 0;
    text-align: center;
    user-select: none;
    z-index: 1;
}
.csslider .navigation label {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border-radius: 50%;
    height: .6875rem;
    width: .6875rem;
    border: 2px solid hsla(0,0%,100%,.75);
    transition: background-color .15s linear;
}
.csslider .navigation label:not(:last-of-type) {
    margin-right: .875rem; /* Espacement entre les ronds */
}
.csslider .navigation label:hover {
    background-color: #fff;
}

/* Rond actif (slide sélectionné) */
.csslider > input:nth-of-type(1):checked ~ .navigation label:nth-of-type(1),
.csslider > input:nth-of-type(2):checked ~ .navigation label:nth-of-type(2),
.csslider > input:nth-of-type(3):checked ~ .navigation label:nth-of-type(3),
.csslider > input:nth-of-type(4):checked ~ .navigation label:nth-of-type(4),
.csslider > input:nth-of-type(5):checked ~ .navigation label:nth-of-type(5),
.csslider > input:nth-of-type(6):checked ~ .navigation label:nth-of-type(6),
.csslider > input:nth-of-type(7):checked ~ .navigation label:nth-of-type(7),
.csslider > input:nth-of-type(8):checked ~ .navigation label:nth-of-type(8),
.csslider > input:nth-of-type(9):checked ~ .navigation label:nth-of-type(9),
.csslider > input:nth-of-type(10):checked ~ .navigation label:nth-of-type(10) {
    background-color: #fff;
}

.csslider .slide-date {
    color: hsla(0,0%,100%,.85);
    font-size: 1.2rem;
    margin-top: .5rem;
    text-shadow: 1px 1px 4px hsla(0,0%,0%,.7);
    letter-spacing: .03rem;
}

/* Bouton "Modifier" visible uniquement pour le bureau */
.csslider .slide-edit-btn {
    position: absolute;
    top: .6rem;
    right: .6rem;
    z-index: 3;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    padding: .3rem .65rem;
    border-radius: 5px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.35);
    transition: background .2s;
    backdrop-filter: blur(4px);
}
.csslider .slide-edit-btn:hover { background: rgba(42,110,187,.85); }

@media (max-width: 639px) {
  .csslider ul {
    aspect-ratio: 3 / 2;
  }
}

@media (min-width: 960px) {
  .csslider .title-box {
    height: 100%;
  }
}