/* --- Actualités --- */
.news {
  margin-top: 3rem;
}
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.news-card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
}
.news-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 12px;
}
.news-card h4 {
  margin: 0 0 6px 0;
  color: #2e2e2e;
  font-size: 1.05rem;
}
.news-card time {
  font-size: .9rem;
  color: #666;
  display: block;
  margin-bottom: 8px;
}
.news-card p {
  margin: 0 0 10px 0;
  line-height: 1.5;
}
.news-card a.button {
  align-self: flex-start;
  background: linear-gradient(145deg, #5b3cc4, #23c6c8);
  color: #fff; 
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: .2px;
}
.news-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.news-empty {
  background: #f2f6ff;
  border: 1px dashed #5b3cc4;
  padding: 14px;
  border-radius: 10px;
  color: #3b3b3b;
}

/* responsive */
@media (max-width: 992px) {
  .news-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .news-grid { grid-template-columns: 1fr; }
}
        .bandeau-container {
            background-color: #add8e6; /* Bleu clair */
            overflow: hidden;
            white-space: nowrap;
            box-sizing: border-box;
            height: 30px;
        }

        .texte-defilant {
            display: inline-block;
            padding-left: 100%;
            animation: defilement 15s linear infinite;
        }

        @keyframes defilement {
            0% {
                transform: translateX(0%);
            }
            100% {
                transform: translateX(-100%);
            }
        }

        input[type="radio"] { /*évite saut de page et reste accessible*/
            position: absolute;
            bottom: 0;
            left: -9999px;
        }


        .container {
            max-width: 1200px;
            width: 95%;
        }

        .slider-wrapper {
            position: relative;
        }

        .slider-wrapper .slide-button {
            position: absolute;
            top: 50%;
            outline: none;
            border: none;
            height: 50px;
            width: 50px;
            z-index: 5;
            color: #fff;
            display: flex;
            cursor: pointer;
            font-size: 2.2rem;
            background: #000;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transform: translateY(-50%);
        }

        .slider-wrapper .slide-button:hover {
            background: #404040;
        }

        .slider-wrapper .slide-button#prev-slide {
            left: -25px;
            display: none;
        }

        .slider-wrapper .slide-button#next-slide {
            right: -25px;
        }

        .slider-wrapper .image-list {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            gap: 18px;
            font-size: 0;
            list-style: none;
            margin-bottom: 30px;
            overflow-x: auto;
            scrollbar-width: none;
        }

        .slider-wrapper .image-list::-webkit-scrollbar {
            display: none;
        }

       .slider-wrapper .image-list .image-item {
            width: 325px;
            height: 400px;
            object-fit: cover;
            border-radius: 14px; /* arrondi harmonisé */
        }

        .container .slider-scrollbar {
            height: 24px;
            width: 100%;
            display: flex;
            align-items: center;
        }

        .slider-scrollbar .scrollbar-track {
            background: #ccc;
            width: 100%;
            height: 2px;
            display: flex;
            align-items: center;
            border-radius: 4px;
            position: relative;
        }

        .slider-scrollbar:hover .scrollbar-track {
            height: 4px;
        }

        .slider-scrollbar .scrollbar-thumb {
            position: absolute;
            background: #000;
            top: 0;
            bottom: 0;
            width: 50%;
            height: 100%;
            cursor: grab;
            border-radius: inherit;
        }

        .slider-scrollbar .scrollbar-thumb:active {
            cursor: grabbing;
            height: 8px;
            top: -2px;
        }

        .slider-scrollbar .scrollbar-thumb::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: -10px;
            bottom: -10px;
        }

        /* Styles for mobile and tablets */
        @media only screen and (max-width: 1023px) {
            .slider-wrapper .slide-button {
                display: none !important;
            }

            .slider-wrapper .image-list {
                gap: 10px;
                margin-bottom: 15px;
                scroll-snap-type: x mandatory;
            }

            .slider-wrapper .image-list .image-item {
                width: 280px;
                height: 380px;
            }

            .slider-scrollbar .scrollbar-thumb {
                width: 20%;
            }
        }

        @supports not (aspect-ratio:3/2) {

            .slider-ar {

                padding-top: 66.67%;

            }


        }


        .list-activities {
            border: 1px solid;
            border-radius: 22px;
            padding: 10px;
            border-color: #5b3cc4;
            color: white;
            background: linear-gradient(145deg, #5b3cc4, #23c6c8);
            list-style: none;
        }

        .cadre-miniatures {

            display: flex;
            justify-content: center;
            position: absolute;
            bottom: 1rem;
            left: 0;
            right: 0;

        }

        .miniatures {

            transition: transform .25s;
            transform: scale(.9);
            aspect-ratio: 1;
            width: 60px;
            border-radius: 9999px;
            z-index: 2;
            cursor: pointer;
            margin: 0 .5rem 0;

        }

        .miniatures img {

            background-color: #fafafa;
            object-fit: cover;
            display: block;
            width: 100%;
            height: 100%;
            border-radius: inherit;
            border: 2px solid white
        }

        @supports not (aspect-ratio:1) {

            .miniatures {
                height: 30px
            }

        }

        .miniatures:hover {
            transform: scale(1);

        }


        table {
            width: 100%;
            border-collapse: collapse;
            background-color: #fff;
        }

        th, td {
            padding: 10px;
            border: 1px solid #ccc;
            text-align: left;
            vertical-align: top;
        }

        thead {
            background-color: #5b3cc4;
            color: white;
        }

        tbody tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        td[colspan] {
            background-color: #dceefc;
            font-weight: bold;
            text-align: center;
        }

        .category {
            background-color: #23c6c8;
            font-weight: bold;
            width: 150px;
            text-align: center;
        }

        /* ----------- Responsive Style ------------ */
        @media screen and (max-width: 768px) {
            table, thead, tbody, th, td, tr {
                display: block;
            }

            thead {
                display: none;
            }

            tr {
                margin-bottom: 15px;
                border: 1px solid #ccc;
                padding: 10px;
                background: #fff;
            }

            td {
                border: none;
                position: relative;
                padding-left: 50%;
                margin-bottom: 5px;
            }

            td::before {
                position: absolute;
                top: 10px;
                left: 10px;
                width: 45%;
                white-space: nowrap;
                font-weight: bold;
                color: #333;
            }

            td:nth-of-type(1)::before {
                content: "Catégorie";
            }

            td:nth-of-type(2)::before {
                content: "Activité";
            }

            td:nth-of-type(3)::before {
                content: "Description";
            }

            td:nth-of-type(4)::before {
                content: "Jour";
            }

            td:nth-of-type(5)::before {
                content: "Heure";
            }

            td:nth-of-type(6)::before {
                content: "Lieu";
            }

            td[colspan] {
                display: block;
                background-color: #dceefc;
                font-weight: bold;
                text-align: center;
                padding: 10px;
            }
        }

        body {
            margin: 0;
            font-family: 'Montserrat', sans-serif;
            background: #f5f7fb;
            color: #2e2e2e;
        }

        header {
            background: #ffffff;
            padding: 1em 2em;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        header img {
            height: 130px;
        }

        nav a {
            color: #5b3cc4;
            text-decoration: none;
            margin: 0 1em;
            font-weight: bold;
            text-transform: uppercase;
        }

        nav a:hover {
            text-decoration: underline;
        }

        .hero {
            text-align: center;
            padding: 3em 1em;
            background: linear-gradient(145deg, #5b3cc4, #23c6c8);
            color: white;
        }

        .hero h1 {
            font-size: 2.5em;
            margin-bottom: 0.5em;
        }

        .content {
            max-width: 1000px;
            margin: 2em auto;
            padding: 0 2em;
            line-height: 1.7;
        }

        .section-title {
            color: #5b3cc4;
            margin-top: 2em;
        }


        ul li {
            margin: 0.5em 0;
            font-size: 1.1em;
        }

        footer {
            background: #333;
            color: #ddd;
            text-align: center;
            padding: 1.5em;
            margin-top: 4em;
        }

        footer a {
            color: #23c6c8;
            text-decoration: none;
        }

        footer a:hover {
            text-decoration: underline;
        }

        a {
            color: #23c6c8;
            font-weight: bold;
        }

        .video-gallery {
            display: flex;
            gap: 16px;
            justify-content: center;
            align-items: flex-start;
            flex-wrap: wrap;              /* passe en colonne sur petits écrans */
            margin: 0 auto 1rem;
            max-width: 1000px;
        }
        .video-card {
            flex: 1 1 460px;              /* ~2 colonnes quand il y a la place */
            max-width: 480px;
            border-radius: 14px;          /* même arrondi que tes cartes */
            overflow: hidden;             /* garantit les coins arrondis */
            box-shadow: 0 2px 8px rgba(0,0,0,.08);
            background: #000;             /* évite les bandes blanches avant lecture */
        }
        .video-card video {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 16/9;           /* hauteur harmonisée, si supporté */
        }
        @media (max-width: 768px) {
             .video-card { 
                flex-basis: 100%; max-width: 100%; 
            }
        }