/* =========================
   Base + variables
   ========================= */
:root{
    --kk-grad-start:#2ecc71;
    --kk-grad-end:#27ae60;
    --bb-grad-start:#d9534f;
    --bb-grad-end:#8e2a2a;
}

body{ background: skyblue; }

/* Statut Mercure (écrase .border-0 de Bootstrap) */
.event-header.status-online  { border: 3px solid #28a745 !important; }
.event-header.status-offline { border: 3px solid #dc3545 !important; }

/* =========================
   Boutons "busy" (anti double-clic)
   ========================= */
.btn.is-busy{
    position: relative;
    pointer-events: none;
    opacity: .75;
}
.btn.is-busy::after{
    content:"";
    position:absolute;
    right:.75rem; top:50%;
    width:1rem; height:1rem; margin-top:-.5rem;
    border:.15rem solid currentColor; border-right-color:transparent;
    border-radius:50%;
    animation: voteSpin .6s linear infinite;
}
@keyframes voteSpin { to{ transform: rotate(360deg); } }

/* =========================
   TOAST perso — ancré entre Mercure et BB
   ========================= */
/* Conteneur-ANCRE placé dans le HTML entre #mercureStatus et #bb-module */
#zone-toast-anchor{
    position: relative;   /* base pour sticky/overlay local */
    z-index: 1;
}

/* Pile des toasts : collée en haut de la zone (scroll local) */
#zone-toast-anchor .toast-stack{
    position: sticky;
    top: 0;               /* reste en haut de la zone ancrée */
    display: grid;
    gap: .5rem;
    padding: .5rem;
    /* largeur fluide par défaut, les cartes contrôlent leur max-width */
}

/* Carte de toast (visuel + anim) */
.toast-card{
    background: #1f2937;          /* fallback neutre */
    color:#fff;
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(0,0,0,.35);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .35rem .75rem;
    padding: .9rem 1rem;
    font-weight: 600;
    line-height: 1.28;

    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
    width: min(92vw, 500px);       /* taille par défaut */
}

.toast-card.show{
    opacity: 1;
    transform: translateY(0);
}

/* Variantes sémantiques */
.toast--success{ border-left-color:#28a745; }
.toast--error  { border-left-color:#dc3545; }
.toast--info   { border-left-color:#0d6efd; }

/* Variantes "thématiques" KK/BB (dégradés) */
.toast--kk{
    background: linear-gradient(135deg, var(--kk-grad-start), var(--kk-grad-end));
    border-left-color: rgba(255,255,255,.8);
}
.toast--bb{
    background: linear-gradient(135deg, var(--bb-grad-start), var(--bb-grad-end));
    border-left-color: rgba(255,255,255,.8);
}

/* Slots internes (compatibles avec le JS fourni) */
.toast-title{ font-weight:700; }
.toast-msg{ grid-column: 1 / -1; opacity:.95; }
.toast-close{
    background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 1.1rem;
    line-height: 1; align-self: start;
}

/* Icône optionnelle (si tu injectes une image) */
.toast-icon {
    width: 64px;
    height: 64px;
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.toast-icon-img {
    max-width: 80%;    /* garde de l’air autour */
    max-height: 80%;
    object-fit: contain;
    display: block;
}

/* ===== Compteur compact header Grand Orateur ===== */
.reads-compact{
    display:flex; align-items:center; gap:.6rem;
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    padding: .35rem .6rem;
    border-radius: 9999px;
    font-size: .875rem;
    color: #0f172a; /* slate-900 */
}
.reads-compact-label{ white-space: nowrap; line-height: 1; }
.reads-compact-bar{
    width: 90px; height: 4px; border-radius: 9999px;
    background: rgba(15,23,42,.12); /* slate-900 @12% */
    overflow: hidden;
}
.reads-compact-bar > span{
    display:block; height:100%; border-radius: inherit;
    background: linear-gradient(90deg, #22c55e, #16a34a); /* vert doux */
    transition: width .25s ease;
}

/* Option: harmonise les headers de cartes KK/BB */
.card .card-header img{ height:36px; width:auto; margin-right:.5rem; vertical-align:middle; }
.card .card-header{ display:flex; align-items:center; gap:.5rem; }

/* Option: fond header carte orateur plus doux */
#mercureStatus.badge{ transform: translateY(1px); }

/* =========================
   MOBILE < 576px — confort tactile
   ========================= */
@media (max-width:576px){
    html, body{ font-size:18px; }

    /* bord à bord soft */
    .container, .container-fluid{ padding-left:.5rem !important; padding-right:.5rem !important; }

    .card{ border-radius:12px; }
    .card-header{ font-size:1.05rem; padding:.85rem .9rem; }
    .card .form-control{ font-size:1.05rem; padding:.9rem 1rem; }
    #bbTextBox, #kkTextBox{ min-height:7rem; }

    /* gros boutons confort */
    #bbChooseBtn, #kkChooseBtn{
        padding:1rem 1.1rem; font-size:1.08rem; border-width:2px; width:100%;
    }

    /* dropdown quasi plein écran */
    .dropdown-menu{
        width:96vw !important; max-width:96vw !important;
        left:50% !important; transform:translateX(-50%) !important;
        max-height:65vh !important; overflow:auto !important; padding:.5rem !important;
    }
    .dropdown-menu .dropdown-item{ padding:1rem 1.1rem !important; font-size:1.05rem !important; }
    .dropdown-menu .form-control.form-control-sm{ font-size:1rem; padding:.6rem .75rem; height:auto; }

    /* avatars tactile */
    .avatar{ width:34px !important; height:34px !important; min-width:34px !important; font-size:.95rem !important; }

    /* 👉 Toasts : largeur quasi pleine et présence visuelle accrue */
    #zone-toast-anchor .toast-stack{ padding: .5rem .25rem; }
    .toast-card{
        width: 94vw;
        padding: .95rem 1rem;
        min-height: 72px;
        margin-top: -25px;
    }
    .toast-icon{ width:64px; height:64px; }


}

/* =========================
   ≥ 577px (tablette/desktop léger)
   ========================= */
@media (min-width:577px){
    .toast-card{ width: min(92vw, 520px); }
    .toast-icon{ width:40px; height:40px; }

    #voteDetailModal .modal-dialog{ width:92vw; max-width:92vw; margin:.75rem auto; }
    #voteDetailModal .modal-content{ border-radius:14px; }
    #voteDetailModal .modal-body{ font-size:1.05rem; line-height:1.35; }

    #bbChooseBtn, #kkChooseBtn{ padding:1.1rem 1rem; font-size:1.05rem; border-width:2px; }
    .dropdown-menu{
        width:92vw !important; max-width:92vw !important;
        left:50% !important; transform:translateX(-50%) !important;
        max-height:60vh !important; overflow:auto !important;
    }
    .dropdown-menu .dropdown-item{ padding:.85rem 1rem !important; font-size:1.05rem; }
    .dropdown-menu .form-control{ font-size:1rem; padding:.6rem .75rem; }
}

/* =========================
   ≥ 768px (desktop confortable)
   ========================= */
@media (min-width:768px){
    .toast-card{ width: min(92vw, 480px); }
    .toast-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    #voteDetailModal .modal-dialog{ width:92vw; max-width:92vw; margin:.75rem auto; }
    #voteDetailModal .modal-content{ border-radius:14px; }
    #voteDetailModal .modal-body{ font-size:1.05rem; line-height:1.35; }

}

/* Très petits écrans */
@media (max-width:360px){
    .container-fluid{ padding-left:.4rem !important; padding-right:.4rem !important; }
    .dropdown-menu{ width:98vw !important; max-width:98vw !important; }
}

/* =========================
   (Option) Variante OVERLAY LOCAL
   — si tu préfères un toast flottant en haut-droite de la zone
   — décommente ce bloc et laisse #zone-toast-anchor en position:relative
   ========================= */
/*
#zone-toast-anchor .toast-stack{
    position: absolute;
    top: .5rem; right: .5rem;
    display: grid; gap: .5rem;
    max-width: min(420px, 90%);
    z-index: 10;
}
*/