/* ==========================================================================
   PAGE VOTE (vote.css) — Alignement responsive & Breakout mobile
   ========================================================================== */

/* ==========================================================================
   PAGE VOTE (vote.css) — Alignement Carte & Dimension Image Identique Home
   ========================================================================== */

/* ── Reset Page & Conteneur ── */
.vote-page { 
    background: #f5f5f7; 
    min-height: 80vh; 
    padding: 30px 0 80px; 
    margin: 0 !important;
}

/* ── Header de Page (Full-width sans marges parasites) ── */
.vote-header {
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    background: linear-gradient(160deg, #0a0a0a 0%, #1a1200 60%, #0a0a0a 100%);
    color: #fff; 
    padding: 35px 20px; 
    text-align: center;
    position: relative; 
    overflow: hidden;
    box-sizing: border-box;
}

.vote-header::before {
    content: '';
    position: absolute; 
    inset: 0;
    background: radial-gradient(ellipse 70% 70% at 50% 20%, rgba(184,144,28,.18), transparent 70%);
    pointer-events: none;
}

.vote-header .container { position: relative; z-index: 2; padding: 0; }
.vote-header .section-eyebrow { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: #b8901c; }
.vote-header h1 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 5vw, 3.2rem); color: #fff; margin: 0; }
.gold-hr { width: 40px; height: 2px; background: linear-gradient(90deg,#b8901c,#e8b84b); border: none; margin: 12px auto; }

.vote-header::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 70% at 50% 20%, rgba(184,144,28,.18), transparent 70%);
    pointer-events: none;
}
.vote-header .container { position: relative; z-index: 2; }
.vote-header .section-eyebrow { font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#b8901c; }
.vote-header h1 { font-family:'Playfair Display',serif; font-size:clamp(2rem,5vw,3.5rem); color:#fff; }
.gold-hr { width:40px;height:2px;background:linear-gradient(90deg,#b8901c,#e8b84b);border:none;margin:16px auto; }

.session-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(184,144,28,.12); border: 1px solid rgba(184,144,28,.3);
    color: #e8b84b; padding: 8px 20px; font-size: 12px; letter-spacing:.15em;
    text-transform: uppercase; border-radius: 30px;
}
.live-dot { width:8px;height:8px;background:#ef4444;border-radius:50%;animation:blink 1s infinite; }
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

/* ── ✅ Chronomètre de fin de séance ── */
.countdown-badge {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
    color: #fff; padding: 10px 22px; border-radius: 30px;
    font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
    margin-top: 12px; transition: background .3s, border-color .3s;
}
.countdown-badge .countdown-time {
    font-family: 'Courier New', monospace;
    font-size: 16px; font-weight: 700; letter-spacing: .05em;
    color: #e8b84b; min-width: 74px; text-align: left;
}
.countdown-badge.countdown-urgent {
    background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.4);
    animation: countdownPulse 1s infinite;
}
.countdown-badge.countdown-urgent .countdown-time { color: #ef4444; }
@keyframes countdownPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); } }

/* ── Candidate vote card ── */
.vote-card {
    background: #fff;
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .25s, transform .25s, box-shadow .25s;
    cursor: pointer;
    position: relative;
}
.vote-card:hover { border-color: #b8901c; transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.10); }
.vote-card.selected { border-color: #b8901c; box-shadow: 0 0 0 4px rgba(184,144,28,.2); }
.vote-card .selected-overlay {
    display: none;
    position: absolute; inset: 0; background: rgba(184,144,28,.08); z-index: 1;
    align-items: center; justify-content: center;
}
.vote-card.selected .selected-overlay { display: flex; }
.vote-card .selected-overlay-badge {
    background: linear-gradient(135deg,#b8901c,#e8b84b); color:#fff;
    padding:12px 24px; font-size:13px; font-weight:700; letter-spacing:.1em;
    border-radius: 30px; box-shadow: 0 8px 20px rgba(184,144,28,.35);
}
.vote-card .img-wrap { height: 280px; background: #000; overflow: hidden; position: relative; }
.vote-card .img-wrap img { width:100%;height:100%;object-fit:cover;transition:transform .4s; }
.vote-card:hover .img-wrap img { transform: scale(1.04); }
.vote-card .id-badge {
    position:absolute;top:12px;left:12px;background:rgba(0,0,0,.65);
    color:#fff;padding:4px 10px;font-size:11px;letter-spacing:.1em;z-index:2;border-radius:20px;
}
.vote-card .rank-badge {
    position:absolute;top:12px;right:12px;
    background:linear-gradient(135deg,#b8901c,#e8b84b);
    color:#fff;padding:4px 10px;font-size:11px;font-weight:700;z-index:2;border-radius:20px;
}
.vote-card .card-body { padding: 20px; }
.vote-card .card-body h5 { font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700; }
.vote-card .card-body .faculte { font-size:11px;letter-spacing:.1em;color:#b8901c;text-transform:uppercase; }
.vote-card .card-body .slogan { font-size:12px;color:#666;font-style:italic;margin:8px 0 0; }

/* ── Submit zone ── */
.vote-submit-zone {
    position: sticky; bottom: 0; z-index: 100;
    background: #fff; border-top: 1px solid #e5e5e5;
    padding: 16px 24px; border-radius: 8px 8px 0 0;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; box-shadow: 0 -8px 32px rgba(0,0,0,.08);
}
.btn-vote-submit {
    background: linear-gradient(135deg,#b8901c,#e8b84b);
    color: #fff; border: none; border-radius: 4px;
    font-size: 13px; letter-spacing:.2em; text-transform:uppercase;
    padding: 14px 40px; font-weight: 700;
    transition: opacity .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 8px 20px rgba(184,144,28,.25);
}
.btn-vote-submit:disabled { opacity: .55; cursor: not-allowed; box-shadow:none; }
.btn-vote-submit:not(:disabled):hover { transform:translateY(-2px); box-shadow: 0 12px 28px rgba(184,144,28,.4); }

/* ── States ── */
.state-closed, .state-not-auth, .state-already-voted {
    min-height: 50vh;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; text-align: center; padding: 60px 24px;
}
.big-icon { font-size: 4rem; margin-bottom: 20px; }

/* ============================================================
   RESPONSIVE — même logique que login.php / register.php :
   Desktop : conteneur avec marges confortables (padding latéral).
   Mobile  : édge-à-édge, sans marge latérale sur la page ni sur
   la barre de validation, qui redevient une barre fixe pleine
   largeur ancrée en bas d'écran (comme la carte de connexion qui
   occupe tout l'écran sur mobile).
   ============================================================ */
@media (max-width: 1024px) {
    .vote-page { padding: 44px 0 90px; }
    .vote-page .container-xl { padding-left: 20px !important; padding-right: 20px !important; }
    .vote-header { padding: 48px 20px 34px; }
}

@media (max-width: 768px) {
    .vote-page { padding: 0 0 96px; background: #fafafa; }

    /* La page perd ses marges latérales : les cartes touchent quasi
       le bord de l'écran, seul un léger padding reste pour l'air.
       !important nécessaire car vote.php utilise la classe Bootstrap
       "px-4" qui est elle-même posée en !important. */
    .vote-page .container-xl {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .vote-header {
        padding: 40px 16px 28px;
    }
    .vote-header h1 { font-size: 1.9rem; }
    .session-badge,
    .countdown-badge {
        padding: 7px 16px;
        font-size: 11px;
    }
    .countdown-badge .countdown-time { font-size: 14px; min-width: 62px; }

    .vote-card { border-radius: 10px; }
    .vote-card .img-wrap { height: 220px; }

    /* Barre de confirmation : ancrée pleine largeur en bas de l'écran,
       sans coins arrondis ni marge — même traitement « pleine page »
       que la carte de connexion sur mobile. */
    .vote-submit-zone {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1000;
        border-radius: 0;
        padding: 14px 16px;
        flex-wrap: wrap;
        gap: 10px;
    }
    .vote-submit-zone > div { flex: 1 1 auto; min-width: 0; }
    #selected-label { font-size: 13px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .btn-vote-submit {
        padding: 13px 22px;
        font-size: 11.5px;
        letter-spacing: .12em;
        white-space: nowrap;
    }

    .state-closed, .state-not-auth, .state-already-voted {
        padding: 48px 20px;
        min-height: 60vh;
    }
    .big-icon { font-size: 3rem; margin-bottom: 14px; }
}

@media (max-width: 420px) {
    .vote-page .container-xl { padding-left: 10px !important; padding-right: 10px !important; }
    .vote-card .img-wrap { height: 190px; }
    .vote-submit-zone { flex-direction: column; align-items: stretch; text-align: center; }
    .vote-submit-zone > div { text-align: center; }
    .btn-vote-submit { width: 100%; justify-content: center; }
}