@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
    --color1: #b7410e;
    --color2: #6c3483;
    --linear-gradient: linear-gradient(135deg, #b7410e, #6c3483);
    --linear-gradient2: linear-gradient(135deg, #d66768, #efc655);
    --bg-color2: #F4F2EE;
}

.text-color1 {
    color: var(--color1);
}

body {
    font-family: "Poppins", sans-serif;
}
.card-radio {
    background: rgba(219, 222, 250, 0.18);
}
.bg-color2 {
    background: var(--bg-color2);
}
.bg-linear-gradient {
    background: var(--linear-gradient);
}
.bg-linear-gradient2 {
    background: var(--linear-gradient2);
}
.text-gradient {
    background: var(--linear-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
.gradient-btn {
    background: var(--linear-gradient);
    border-radius: 10px;
    color: white;
    padding: 10px 25px;
    text-decoration: none;
}

.gradient-btn2 {
    background: var(--linear-gradient2);
    border-radius: 10px;
    color: white;
    padding: 10px 25px;
    text-decoration: none;
}

.gradient-outline {
    background: transparent;
    border: 1px solid var(--color1);
    border-radius: 10px;
    color: var(--color1);
    padding: 10px 25px;
    text-decoration: none;
}
.gradient-outline:hover {
    background: var(--linear-gradient);
    border-radius: 10px;
    color: white;
    padding: 10px 25px;
    text-decoration: none;
}
.hero {
    padding: 100px 0;
    color: white;
    z-index: 1;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.63);
    z-index: -1;
}
.hero-text h1 {
    font-weight: 700;
    font-size: 38px !important;
}
.hero-text p {
    font-size: 1.2rem;
}
.logo {
    height: 60px;
}

.fs-30 {
    font-size: 30px;
}
.fs-40 {
    font-size: 40px;
}
.fs-20 {
    font-size: 20px;
}

.fs-28 {
    font-size: 28px;
}

.fs-15 {
    font-size: 15px;
}
.fs-14 {
    font-size: 14px;
}

.img-pod-mus {
    object-fit: cover;
}

.progress-gradient {
    background: var(--linear-gradient2);
}

.site-header {
    background-color: white;
    border-bottom: 1px solid #ddd;
    position: relative;
    z-index: 1;
}

.main-wrapper {
    min-height: 0;
}

.sidebar {
    display: flex !important; /* active le flexbox */
    flex-direction: row; /* aligne les enfants en ligne */
    align-items: center; /* centre verticalement */
    gap: 1rem; /* espace horizontal entre chaque item */
    padding: 1rem 2.5rem; /* ajustez selon vos besoins */
}

/* Supprime les marges verticales qui forcent encore la pile en colonne */
.sidebar img,
.sidebar a {
    margin-bottom: 0 !important;
}

/* Si vos <a> comportent d-block, forcez-les en inline-flex pour qu'ils ne prennent plus 100% */
.sidebar a {
    display: inline-flex !important;
    align-items: center;
}

/* Facultatif : ajoutez un petit padding horizontal sur les liens */
.sidebar a {
    padding: 0.5rem 1rem;
}

.sticky-sidebar {
    position: sticky;
    top: 0;
}

.sidebar .hover-a:hover {
    color: white !important;
    background: var(--linear-gradient);
}

.fixed-sidebar {
    top: 70px;
}

@media (max-width: 767px) {
    .main-wrapper {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        padding: 1rem;
    }

    .sticky-sidebar {
        position: static;
        height: auto;
    }

    .audio-progress {
        width: 100px;
    }

    .overlay h1 {
        font-size: 32px !important;
    }

    .overlay h2 {
        font-size: 20px !important;
    }

    .fs-28 {
        font-size: 16px !important;
    }

    .fs-20 {
        font-size: 14px !important;
    }

    .rounded-3.p-4 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem;
    }

    /* .carou {
        height: 137px!important;
    } */
}

.overlay {
    position: relative;
    background-image: url("../images/frame1.webp");
    background-size: cover;
    background-position: center;
    color: white;
    z-index: 1;
    overflow: hidden;
}
.overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.63);
    z-index: -1;
}

.site-footer {
    background-color: white;
    padding: 2rem 1rem;
    text-align: center;
    border-top: 1px solid #ddd;
}

/* Commentaires */

.comment-box {
    padding: 15px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ccc;
}

.reply-box {
    border: 1px solid #b7410e !important;
    border-radius: 10px;
    padding: 15px;
}

.reply-textarea {
    border: none;
    border-bottom: 1px solid #ccc;
    outline: none;
    width: 100%;
    resize: none;
    min-height: 60px;
}

.formatting-buttons i {
    cursor: pointer;
    margin-right: 10px;
}

/* Guide de programme */

.timeline-marker {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: white;
    border: 3px solid #8e2de2;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    color: #8e2de2;
    font-size: 1.2rem;
}

.timeline-line {
    width: 3px;
    background: linear-gradient(to bottom, #b7410e, #6c3483);
    height: calc(100% - 70px);
    margin: 0 auto;
    border-radius: 10px;
}

.programme-card {
    border-radius: 10px;
    overflow: hidden;
}
.programme-footer {
    background-color: #ccc;
    font-weight: bold;
}
.programme-logo {
    background: linear-gradient(to bottom, #b7410e, #6c3483);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.link-active {
    background: var(--linear-gradient);
    padding: 10px;
    color: white !important;
    border-radius: 12px;
}

.link-active2 {
    background: white;
    padding: 10px;
    color: black !important;
    border-radius: 12px;
}

.form-check-input:checked {
    background-color: var(--color1);
    border-color: var(--linear-gradient);
}

.form-check-input {
    border: 1px solid black;
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(123, 44, 191, 0.25);
}

.accordion-button:not(.collapsed) {
    background-color: unset !important;
}

.marquee {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    max-width: 150px; /* ajuste à ta convenance */
    vertical-align: bottom;
    position: relative;
}

.marquee::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50px; /* effet de fondu à droite */
    background: linear-gradient(to left, white, transparent);
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 8s linear infinite;
}

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

.border-gradient {
    border: 1px solid #b7410e !important;
    border-radius: 0.5rem !important;
}

.dropdown-toggle2::after {
    color: white !important;
}

.avatar-gradient {
    background: var(--linear-gradient);
    color: white;
}

.btn-awr .btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
    border-color: white !important;
}

.radio-name {
    /* 1. Base truncation setup */
    display: -webkit-box; /* fallback for WebKit/Blink */
    -webkit-box-orient: vertical; /* vertical text flow */
    overflow: hidden; /* clip overflow */
    text-overflow: ellipsis; /* show “…” */

    /* 2. Clamp definitions */
    -webkit-line-clamp: 2; /* old prefixed API */
    line-clamp: 2; /* new standard API */

    /* 3. Optional fixed height to guard layout */
    line-height: 1.2em;
    height: calc(1.2em * 2); /* exactly two lines tall */
}

.image-container img {
    /* Remplit largeur + hauteur du parent */
    width: 100%;
    height: 100%;
    /* Coupe et recadre pour couvrir tout le conteneur */
    object-fit: cover; /* :contentReference[oaicite:0]{index=0} */
    object-position: center center; /* centre le recadrage */
    display: block;
}

.image-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.text-justify {
    text-align: justify;
}

/* Dans votre CSS */
.audio-overlay {
    pointer-events: none; /* le container ignore les clics */
}
.audio-overlay .podcast-btn {
    pointer-events: auto; /* le bouton CAPTE les clics */
}

.radio-name[title],
.text-muted[title] {
    cursor: help;
}

.weekly-nav .btn {
    border-radius: 0;
    flex: 1;
    text-transform: uppercase;
}

.weekly-nav .btn.active {
    background-color: linear-gradient(
        135deg,
        #b7410e,
        #6c3483
    ); /* bootstrap primary */
    color: #fff;
}

/* Toggle day/week/month */
.outline-toggle {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
}
.active-toggle {
    background: #fff;
    color: #333;
    border: none;
}

/* Chevrons */
.chevron-btn {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #fff;
}

/* Barre hebdo centrée */
.weekly-nav .week-day-button {
    background: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    text-transform: uppercase;
    color: black;
}
.weekly-nav .active-day {
    background: #28a745; /* par exemple un vert */
    color: #fff;
}

.week-day-button.active-day {
    background: linear-gradient(135deg, #b7410e, #6c3483);
    color: #fff;
}

.btn-white {
    background: white;
    color: black;
}

#radio-banners img {
    object-fit: cover;
    height: 200px;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #b7410e !important;
    border-radius: 0.5rem !important;
    height: 100%!important;
    display: flex!important;
    align-items: center!important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 15px !important;
}

.ad-footer-btm {
    position: absolute;
    bottom: 0;
    padding: 20px;
    background: #ffffff;
    width: 100%;
    right: 0;
    left: 0;
    text-align: center;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}