/*
 * Page publique d'un vote (resources/views/vitrines/candidat-list.blade.php).
 *
 * Ces regles etaient ecrites en ligne dans la vue: 53 Ko renvoyes a chaque
 * affichage, jamais mis en cache par le navigateur. En fichier, ils ne sont
 * telecharges qu'une fois.
 */

    /* ═══ CANDIDATE LIST PAGE — scoped ═══ */

    /* ── Cover banner ── */
    .cl-cover {
        height:180px; position:relative; overflow:hidden;
        background:linear-gradient(135deg,#1a1a2e 0%,#2d1b4e 100%);
    }
    .cl-cover__img {
        position:absolute; inset:0; width:100%; height:100%;
        object-fit:cover; opacity:0.35;
    }
    .cl-cover__overlay {
        position:absolute; inset:0;
        background:linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    }

    /* ── Header card (overlaps cover) ── */
    #clHeader {
        background:transparent; padding:0; position:relative; overflow:visible;
    }
    #clHeader::before { display:none; }
    #clHeader .cl-wrap {
        max-width:1200px; margin:0 auto; padding:0 24px;
        position:relative; z-index:2; margin-top:-80px;
    }
    .cl-header-card {
        background:#fff; border:1px solid #e5e7eb; border-radius:16px;
        box-shadow:0 4px 24px rgba(0,0,0,0.06);
        padding:28px 32px 0;
    }

    /* Breadcrumb */
    #clHeader .cl-breadcrumb {
        display:flex; gap:8px; list-style:none;
        padding:0; margin:0 0 16px; font-size:0.78rem;
    }
    #clHeader .cl-breadcrumb a { color:#9ca3af; text-decoration:none; }
    #clHeader .cl-breadcrumb a:hover { color:#ec167f; }
    #clHeader .cl-breadcrumb span { color:#d1d5db; }
    #clHeader .cl-breadcrumb li:last-child { color:#6b7280; }

    /* Top row: title left, stats right */
    #clHeader .cl-top {
        display:flex; justify-content:space-between; align-items:flex-start;
        gap:24px; padding-bottom:20px;
    }
    #clHeader .cl-title {
        font-family:'DM Serif Display',Georgia,serif;
        font-size:1.6rem; font-weight:700;
        color:#1a1a2e; margin:0 0 6px; line-height:1.3;
    }
    #clHeader .cl-sub {
        font-family:'Inter',sans-serif;
        font-size:0.88rem; color:#6b7280;
        margin:0; max-width:520px; line-height:1.5;
    }

    /* Stats: segmented pill */
    #clHeader .cl-stats {
        display:flex; flex-shrink:0; background:#f9fafb;
        border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;
    }
    #clHeader .cl-stats > div {
        text-align:center; padding:14px 24px;
        border-right:1px solid #e5e7eb;
    }
    #clHeader .cl-stats > div:last-child { border-right:none; }
    #clHeader .cl-stat-val {
        font-family:'DM Serif Display',Georgia,serif;
        font-size:1.15rem; font-weight:700; color:#1a1a2e; line-height:1;
        margin-bottom:3px;
    }
    #clHeader .cl-stat-lbl {
        font-size:0.62rem; font-weight:600;
        color:#9ca3af; text-transform:uppercase; letter-spacing:0.06em;
    }

    /* Search bar */
    #clHeader .cl-search {
        background:#f9fafb; border:1px solid #e5e7eb;
        border-radius:12px; padding:5px; display:flex;
        gap:4px; align-items:stretch; margin-top:16px;
        margin-left:-32px; margin-right:-32px;
        border-radius:0 0 16px 16px; border-top:1px solid #e5e7eb;
        border-left:none; border-right:none; border-bottom:none;
    }
    #clHeader .cl-search-field {
        flex:1; position:relative; display:flex; align-items:center;
    }
    #clHeader .cl-search-field--main { flex:2.5; }
    #clHeader .cl-search-icon {
        position:absolute; left:16px; color:#9ca3af;
        font-size:0.85rem; pointer-events:none;
    }
    #clHeader .cl-search-field input {
        width:100%; padding:12px 14px 12px 44px;
        background:transparent; border:none; outline:none;
        font-family:'Inter',sans-serif;
        font-size:0.88rem; color:#1a1a2e;
    }
    #clHeader .cl-search-field input::placeholder { color:#9ca3af; }
    #clHeader .cl-search-btn {
        display:flex; align-items:center; justify-content:center;
        padding:12px 24px; background:#ec167f; color:#fff;
        border:none; border-radius:10px;
        font-family:'Inter',sans-serif;
        font-size:0.85rem; font-weight:600;
        cursor:pointer; white-space:nowrap;
        transition:background 0.2s; flex-shrink:0;
    }
    #clHeader .cl-search-btn:hover { background:#c9116a; }

    /* ── Programme timeline ── */
    .cl-programme { margin-top:16px; }
    .cl-programme__label {
        font-size:0.65rem; font-weight:700; color:#9ca3af;
        text-transform:uppercase; letter-spacing:0.06em;
        display:flex; align-items:center; gap:4px; margin-bottom:8px;
    }
    .cl-programme__timeline {
        display:flex; gap:12px;
    }
    .cl-programme__phase {
        flex:1; display:flex; align-items:center; gap:10px;
        padding:12px 16px; background:#f9fafb;
        border:1px solid #e5e7eb; border-radius:10px;
        position:relative; transition:all 0.2s;
    }
    .cl-programme__phase--active {
        background:#faf5ff; border-color:#c4b5fd;
    }
    .cl-programme__phase--done {
        background:#f0fdf4; border-color:#bbf7d0;
    }
    .cl-programme__dot {
        width:28px; height:28px; border-radius:50%;
        background:#e5e7eb; display:flex; align-items:center; justify-content:center;
        flex-shrink:0; color:#9ca3af; position:relative;
    }
    .cl-programme__phase--active .cl-programme__dot {
        background:#7c3aed; color:#fff;
    }
    .cl-programme__phase--done .cl-programme__dot {
        background:#059669; color:#fff;
    }
    .cl-programme__pulse {
        width:10px; height:10px; border-radius:50%; background:#fff;
        animation:clPulse 1.5s ease-in-out infinite;
    }
    @keyframes clPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.7)} }
    .cl-programme__phase-body { flex:1; min-width:0; }
    .cl-programme__phase-title {
        font-size:0.82rem; font-weight:700; color:#1a1a2e; margin-bottom:1px;
    }
    .cl-programme__phase-dates {
        font-size:0.72rem; color:#6b7280;
    }
    .cl-programme__badge {
        padding:3px 10px; border-radius:20px;
        font-size:0.6rem; font-weight:700; white-space:nowrap;
        text-transform:uppercase; letter-spacing:0.04em;
    }
    .cl-programme__badge--active { background:#ede9fe; color:#7c3aed; }
    .cl-programme__badge--done { background:#ecfdf5; color:#059669; }
    .cl-programme__badge--upcoming { background:#f3f4f6; color:#6b7280; }

    /* Results bar */
    .cl-results-bar {
        display: flex; justify-content: space-between; align-items: center;
        margin-bottom: 28px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--pt-gray-200);
    }
    .cl-results-count {
        font-size: 0.88rem; color: var(--pt-gray-600); margin: 0;
    }
    .cl-results-count strong { color: var(--pt-gray-900); }

    /* Empty state */
    .cl-empty {
        text-align: center;
        padding: 80px 24px;
    }
    .cl-empty__icon {
        width: 72px; height: 72px;
        display: flex; align-items: center; justify-content: center;
        background: var(--pt-gray-100);
        border-radius: 50%;
        margin: 0 auto 24px;
        color: var(--pt-gray-400);
    }
    .cl-empty__title {
        font-family: 'DM Serif Display', Georgia, serif;
        font-size: 1.25rem; color: var(--pt-gray-800); margin-bottom: 8px;
    }
    .cl-empty__text {
        font-size: 0.92rem; color: var(--pt-gray-500);
        max-width: 400px; margin: 0 auto 24px;
    }

    /* CTA banner */
    .cl-cta-banner {
        background: var(--pt-gray-900);
        border-radius: 12px;
        padding: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
        margin-top: 56px;
    }
    .cl-cta-banner__title {
        font-family: 'DM Serif Display', Georgia, serif;
        font-size: 1.35rem; font-weight: 700; color: #fff;
        margin: 0 0 8px;
    }
    .cl-cta-banner__text {
        font-size: 0.9rem; color: rgba(255,255,255,0.5); margin: 0;
    }

    /* ═══ CANDIDATE CARD ═══ */
    .clc {
        position: relative;
        background: #fff;
        border: 1px solid #e8e8ee;
        border-radius: 12px;
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
        transition: box-shadow 0.3s, transform 0.3s;
    }
    .clc:hover {
        box-shadow: 0 12px 32px rgba(0,0,0,0.1);
        transform: translateY(-4px);
    }
    .clc__img {
        position: relative;
        aspect-ratio: 1/1;
        overflow: hidden;
        flex-shrink: 0;
    }
    .clc__img > a {
        display: block; width: 100%; height: 100%;
    }
    .clc__img img {
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform 0.5s cubic-bezier(0.25,0.46,0.45,0.94);
    }
    .clc:hover .clc__img img {
        transform: scale(1.06);
    }
    .clc__img::after {
        content: '';
        position: absolute; inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 50%);
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
    }
    .clc:hover .clc__img::after { opacity: 1; }

    .clc__number {
        position: absolute;
        top: 12px; left: 12px;
        background: #fff;
        border-radius: 8px;
        padding: 6px 10px;
        text-align: center;
        min-width: 52px;
        z-index: 2;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
        pointer-events: none;
    }
    .clc__number-val {
        font-family: 'DM Serif Display', Georgia, serif;
        font-size: 1.25rem; font-weight: 700; color: #1a1a2e;
        line-height: 1; display: block;
    }
    .clc__number-lbl {
        font-family: 'Inter', sans-serif;
        font-size: 0.6rem; font-weight: 700; color: #ec167f;
        text-transform: uppercase; letter-spacing: 0.08em;
        display: block; margin-top: 2px;
    }
    .clc__votes-tag {
        position: absolute;
        top: 12px; right: 12px;
        background: rgba(0,0,0,0.6);
        backdrop-filter: blur(8px);
        color: #fff;
        font-family: 'Inter', sans-serif;
        font-size: 0.65rem; font-weight: 700;
        letter-spacing: 0.06em; text-transform: uppercase;
        padding: 5px 10px; border-radius: 6px;
        z-index: 2;
        pointer-events: none;
        display: flex; align-items: center; gap: 4px;
    }
    .clc__hover-cta {
        position: absolute;
        bottom: 12px; left: 12px; right: 12px;
        z-index: 2;
        opacity: 0;
        transform: translateY(8px);
        transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
    }
    .clc:hover .clc__hover-cta {
        opacity: 1; transform: translateY(0);
    }
    .clc__hover-btn {
        display: block; text-align: center; padding: 10px;
        background: #ec167f; color: #fff; border-radius: 8px;
        font-family: 'Inter', sans-serif;
        font-size: 0.82rem; font-weight: 600;
        text-decoration: none; transition: background 0.2s;
        border: none; width: 100%; cursor: pointer;
    }
    .clc__hover-btn:hover { background: #c9116a; color: #fff; text-decoration: none; }

    .clc__body {
        padding: 20px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .clc__name {
        font-family: 'DM Serif Display', Georgia, serif;
        font-size: 1.05rem; font-weight: 700; color: #1a1a2e;
        margin: 0 0 12px; line-height: 1.35;
    }
    .clc__name a { color: inherit; text-decoration: none; }
    .clc__name a:hover { color: #ec167f; }

    .clc__meta {
        margin-top: auto;
        display: flex; flex-direction: column; gap: 6px;
        padding-top: 12px;
        border-top: 1px solid #f4f4f7;
    }
    .clc__meta-item {
        display: flex; align-items: center; gap: 8px;
        font-family: 'Inter', sans-serif;
        font-size: 0.82rem; color: #6b6b7b;
    }
    .clc__meta-icon {
        width: 28px; height: 28px;
        display: flex; align-items: center; justify-content: center;
        background: #f4f4f7; border-radius: 6px;
        color: #8e8e9e; font-size: 0.7rem; flex-shrink: 0;
    }
    .clc__progress {
        width: 100%; height: 4px;
        background: var(--pt-gray-100); border-radius: 2px; overflow: hidden;
    }
    .clc__progress-bar {
        height: 100%; background: #ec167f; border-radius: 2px;
        transition: width 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
    }

    /* Card action buttons */
    .clc__actions {
        display: flex;
        border-top: 1px solid #f4f4f7;
    }
    .clc__vote-btn {
        display: flex; align-items: center; justify-content: center; gap: 6px;
        flex: 1; padding: 12px;
        background: #ec167f; color: #fff;
        border: none;
        font-family: 'Inter', sans-serif;
        font-size: 0.85rem; font-weight: 600;
        cursor: pointer; transition: background 0.2s;
        border-radius: 0 0 0 12px;
    }
    .clc__vote-btn:hover { background: #c9116a; }
    .clc__voters-btn {
        display: flex; align-items: center; justify-content: center; gap: 5px;
        padding: 12px 16px;
        background: #fafafc; color: #6b6b7b;
        border: none;
        border-left: 1px solid #f4f4f7;
        font-family: 'Inter', sans-serif;
        font-size: 0.78rem; font-weight: 600;
        cursor: pointer; transition: all 0.2s;
        border-radius: 0 0 12px 0;
        white-space: nowrap;
    }
    .clc__voters-btn:hover { background: #f4f4f7; color: #1a1a2e; }

    /* Responsive button labels */
    .clc__btn-short { display: none; }
    .clc__btn-full { display: inline; }

    /* ═══ VOTERS MODAL ═══ */
    .vl-overlay {
        position: fixed; inset: 0;
        background: rgba(10,10,20,0.6);
        backdrop-filter: blur(4px);
        z-index: 10000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
    }
    .vl-overlay.active { display: flex; }

    .vl-modal {
        background: #fff;
        border-radius: 16px;
        width: 100%;
        max-width: 540px;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 24px 64px rgba(0,0,0,0.2);
        animation: vmSlideIn 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
    }

    .vl-modal__header {
        padding: 24px 24px 20px;
        border-bottom: 1px solid #f4f4f7;
        flex-shrink: 0;
    }
    .vl-modal__header-top {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 16px;
    }
    .vl-modal__title {
        font-family: 'DM Serif Display', Georgia, serif;
        font-size: 1.1rem; font-weight: 700; color: #1a1a2e;
        margin: 0;
    }
    .vl-modal__subtitle {
        font-size: 0.82rem; color: #8e8e9e; margin: 0;
    }
    .vl-modal__close {
        width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        background: #f4f4f7; border: none; border-radius: 8px;
        color: #6b6b7b; cursor: pointer;
        transition: background 0.2s;
        flex-shrink: 0;
    }
    .vl-modal__close:hover { background: #e8e8ee; }

    /* Stats row */
    .vl-stats {
        display: flex; gap: 8px;
    }
    .vl-stat {
        flex: 1;
        background: #fafafc;
        border: 1px solid #f4f4f7;
        border-radius: 8px;
        padding: 10px 12px;
        text-align: center;
    }
    .vl-stat__val {
        font-family: 'DM Serif Display', Georgia, serif;
        font-size: 1.1rem; font-weight: 700; color: #1a1a2e;
        line-height: 1;
    }
    .vl-stat__val--accent { color: #ec167f; }
    .vl-stat__lbl {
        font-size: 0.65rem; font-weight: 600; color: #8e8e9e;
        text-transform: uppercase; letter-spacing: 0.04em;
        margin-top: 3px;
    }

    /* Body / list */
    .vl-modal__body {
        flex: 1;
        overflow-y: auto;
        padding: 0;
    }
    .vl-modal__body::-webkit-scrollbar { width: 4px; }
    .vl-modal__body::-webkit-scrollbar-thumb { background: #e8e8ee; border-radius: 2px; }

    .vl-voter-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 24px;
        border-bottom: 1px solid #f8f8fa;
        transition: background 0.15s;
    }
    .vl-voter-row:hover { background: #fafafc; }
    .vl-voter-row:last-child { border-bottom: none; }

    .vl-voter__avatar {
        width: 36px; height: 36px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-family: 'DM Serif Display', Georgia, serif;
        font-size: 0.75rem; font-weight: 700;
        flex-shrink: 0;
    }
    .vl-voter__avatar--named {
        background: var(--pt-primary-subtle);
        color: #ec167f;
    }
    .vl-voter__avatar--anon {
        background: #f4f4f7;
        color: #b0b0be;
    }
    .vl-voter__info { flex: 1; min-width: 0; }
    .vl-voter__name {
        font-size: 0.88rem; font-weight: 600; color: #1a1a2e;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .vl-voter__name--anon { color: #b0b0be; font-style: italic; }
    .vl-voter__date {
        font-size: 0.72rem; color: #b0b0be;
    }
    .vl-voter__qty {
        display: inline-flex; align-items: center; gap: 3px;
        padding: 3px 10px;
        background: var(--pt-primary-subtle);
        color: #ec167f;
        border-radius: 20px;
        font-size: 0.75rem; font-weight: 700;
        flex-shrink: 0;
    }

    /* Pagination */
    .vl-modal__footer {
        padding: 16px 24px;
        border-top: 1px solid #f4f4f7;
        display: flex; align-items: center; justify-content: space-between;
        flex-shrink: 0;
    }
    .vl-page-info {
        font-size: 0.78rem; color: #8e8e9e;
    }
    .vl-page-btns {
        display: flex; gap: 6px;
    }
    .vl-page-btn {
        width: 34px; height: 34px;
        display: flex; align-items: center; justify-content: center;
        background: #fafafc; border: 1px solid #e8e8ee;
        border-radius: 8px; color: #6b6b7b;
        cursor: pointer; transition: all 0.15s;
        font-size: 0.85rem;
    }
    .vl-page-btn:hover:not(:disabled) { background: #f4f4f7; color: #1a1a2e; }
    .vl-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }

    .vl-empty-voters {
        text-align: center;
        padding: 48px 24px;
        color: #b0b0be;
    }
    .vl-empty-voters .mi { font-size: 32px; display: block; margin-bottom: 12px; }

    .vl-loading {
        text-align: center;
        padding: 48px 24px;
        color: #8e8e9e;
        font-size: 0.88rem;
    }

    /* ═══ COUNTDOWN ═══ */
    .cl-countdown {
        display: flex; gap: 12px; justify-content: center;
        margin-bottom: 32px;
    }
    .cl-countdown__block {
        background: #fff;
        border: 1px solid #e8e8ee;
        border-radius: 10px;
        padding: 14px 18px;
        text-align: center;
        min-width: 72px;
    }
    .cl-countdown__val {
        font-family: 'DM Serif Display', Georgia, serif;
        font-size: 1.5rem; font-weight: 700; color: #1a1a2e;
        line-height: 1;
    }
    .cl-countdown__lbl {
        font-size: 0.65rem; font-weight: 600; color: #8e8e9e;
        text-transform: uppercase; letter-spacing: 0.04em;
        margin-top: 4px;
    }

    /* ═══ VOTE CLOSED — RESULTS HERO ═══ */
    .cl-closed {
        background: linear-gradient(135deg, #0a0a14 0%, #1a1a2e 100%);
        border-radius: 16px;
        padding: 40px 32px 36px;
        margin-bottom: 32px;
        color: #fff;
        position: relative;
        overflow: hidden;
    }
    .cl-closed::before {
        content: '';
        position: absolute; inset: 0;
        background-image: radial-gradient(circle at 20% 50%, rgba(245,158,11,0.08) 0%, transparent 50%),
                          radial-gradient(circle at 80% 50%, rgba(236,22,127,0.06) 0%, transparent 50%);
        pointer-events: none;
    }
    .cl-closed__badge {
        display: inline-flex; align-items: center; gap: 6px;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 20px;
        padding: 6px 14px;
        font-size: 0.72rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.06em;
        color: rgba(255,255,255,0.5);
        margin-bottom: 24px;
    }
    .cl-closed__badge .mi { font-size: 14px; }

    .cl-closed__winner {
        display: flex;
        align-items: center;
        gap: 28px;
        position: relative;
        z-index: 1;
    }
    .cl-closed__photo-wrap {
        position: relative;
        flex-shrink: 0;
    }
    .cl-closed__photo {
        width: 100px; height: 100px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #f59e0b;
        box-shadow: 0 0 0 6px rgba(245,158,11,0.15), 0 8px 24px rgba(0,0,0,0.3);
    }
    .cl-closed__trophy {
        position: absolute;
        top: -8px; right: -8px;
        width: 32px; height: 32px;
        background: linear-gradient(135deg, #f59e0b, #d97706);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 2px 8px rgba(245,158,11,0.4);
    }
    .cl-closed__trophy .mi { font-size: 16px; color: #fff; }
    .cl-closed__details { flex: 1; }
    .cl-closed__label {
        font-size: 0.7rem; font-weight: 700;
        color: #f59e0b;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 4px;
    }
    .cl-closed__name {
        font-family: 'DM Serif Display', Georgia, serif;
        font-size: 1.4rem; font-weight: 700;
        color: #fff;
        margin: 0 0 4px; line-height: 1.3;
    }
    .cl-closed__num {
        font-size: 0.82rem; color: rgba(255,255,255,0.4);
        margin: 0 0 16px;
    }
    .cl-closed__stats {
        display: flex; gap: 24px;
    }
    .cl-closed__stat-val {
        font-family: 'DM Serif Display', Georgia, serif;
        font-size: 1.2rem; font-weight: 700;
        color: #fff; line-height: 1;
    }
    .cl-closed__stat-val--gold { color: #f59e0b; }
    .cl-closed__stat-lbl {
        font-size: 0.62rem; font-weight: 600;
        color: rgba(255,255,255,0.35);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-top: 3px;
    }

    .cl-closed__date {
        text-align: right;
        flex-shrink: 0;
    }
    .cl-closed__date-label {
        font-size: 0.65rem; font-weight: 600;
        color: rgba(255,255,255,0.3);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 4px;
    }
    .cl-closed__date-val {
        font-size: 0.88rem; font-weight: 600;
        color: rgba(255,255,255,0.6);
    }

    /* Winner card highlight */
    .clc--winner {
        border: 2px solid #f59e0b;
        box-shadow: 0 0 0 4px rgba(245,158,11,0.08);
    }
    .clc--winner:hover {
        box-shadow: 0 12px 32px rgba(245,158,11,0.15);
    }
    .clc__crown {
        position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: #fff; padding: 5px 16px;
        border-radius: 0 0 10px 10px;
        font-size: 0.68rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.06em;
        z-index: 3;
        display: flex; align-items: center; gap: 5px;
        box-shadow: 0 4px 12px rgba(245,158,11,0.3);
        pointer-events: none;
    }
    /* Rank badges for 2nd/3rd */
    .clc__rank-badge {
        position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
        padding: 4px 12px;
        border-radius: 0 0 8px 8px;
        font-size: 0.62rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.06em;
        z-index: 3;
        display: flex; align-items: center; gap: 4px;
        pointer-events: none;
    }
    .clc__rank-badge--silver {
        background: linear-gradient(135deg, #94a3b8, #64748b);
        color: #fff;
    }
    .clc__rank-badge--bronze {
        background: linear-gradient(135deg, #b45309, #92400e);
        color: #fff;
    }

    @media (max-width: 768px) {
        .cl-closed { padding: 28px 20px; }
        .cl-closed__winner { flex-direction: column; text-align: center; gap: 16px; }
        .cl-closed__photo { width: 80px; height: 80px; }
        .cl-closed__stats { justify-content: center; }
        .cl-closed__date { text-align: center; }
        .cl-closed__name { font-size: 1.15rem; }
    }

    /* ═══ SORT / TOOLBAR ═══ */
    .cl-toolbar {
        display: flex; align-items: center; justify-content: space-between;
        flex-wrap: wrap; gap: 12px;
        margin-bottom: 24px;
    }
    .cl-sort {
        display: flex; align-items: center; gap: 8px;
    }
    .cl-sort__label {
        font-size: 0.78rem; color: #8e8e9e; font-weight: 600;
    }
    .cl-sort__select {
        padding: 8px 32px 8px 12px;
        border: 1px solid #e8e8ee;
        border-radius: 8px;
        background: #fff;
        font-family: 'Inter', sans-serif;
        font-size: 0.82rem; color: #1a1a2e;
        outline: none; cursor: pointer;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e9e' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
    }

    /* ═══ SHARE BUTTON ═══ */
    .clc__share {
        position: absolute; bottom: 12px; right: 12px;
        width: 32px; height: 32px;
        display: flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,0.9);
        backdrop-filter: blur(4px);
        border: none; border-radius: 50%;
        color: #6b6b7b; cursor: pointer;
        z-index: 2; font-size: 0.8rem;
        transition: all 0.2s;
        opacity: 0;
    }
    .clc:hover .clc__share { opacity: 1; }
    .clc__share:hover { background: #ec167f; color: #fff; }

    .cl-share-menu {
        position: absolute; bottom: 48px; right: 12px;
        background: #fff;
        border: 1px solid #e8e8ee;
        border-radius: 10px;
        padding: 6px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        z-index: 10;
        display: none;
        min-width: 160px;
    }
    .cl-share-menu.active { display: block; }
    .cl-share-item {
        display: flex; align-items: center; gap: 8px;
        padding: 8px 12px;
        border: none; background: none;
        width: 100%; text-align: left;
        font-family: 'Inter', sans-serif;
        font-size: 0.82rem; color: #4a4a5a;
        border-radius: 6px; cursor: pointer;
        transition: background 0.15s;
    }
    .cl-share-item:hover { background: #f4f4f7; }
    .cl-share-item .mi { font-size: 16px; color: #8e8e9e; }

    /* ═══ CANDIDATE PROFILE MODAL ═══ */
    .cp-overlay {
        position: fixed; inset: 0;
        background: rgba(10,10,20,0.6);
        backdrop-filter: blur(4px);
        z-index: 10000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
    }
    .cp-overlay.active { display: flex; }
    .cp {
        background: #fff;
        border-radius: 16px;
        width: 100%;
        max-width: 440px;
        overflow: hidden;
        box-shadow: 0 24px 64px rgba(0,0,0,0.2);
        animation: vmSlideIn 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
    }
    .cp__photo {
        width: 100%;
        aspect-ratio: 1/1;
        object-fit: cover;
    }
    .cp__body { padding: 24px; }
    .cp__name {
        font-family: 'DM Serif Display', Georgia, serif;
        font-size: 1.2rem; font-weight: 700; color: #1a1a2e;
        margin: 0 0 4px;
    }
    .cp__num {
        font-size: 0.8rem; color: #8e8e9e; margin: 0 0 16px;
    }
    .cp__desc {
        font-size: 0.9rem; color: #6b6b7b;
        line-height: 1.7; margin: 0 0 20px;
    }
    .cp__stats {
        display: flex; gap: 8px; margin-bottom: 20px;
    }
    .cp__stat {
        flex: 1; text-align: center;
        background: #fafafc; border: 1px solid #f4f4f7;
        border-radius: 8px; padding: 12px 8px;
    }
    .cp__stat-val {
        font-family: 'DM Serif Display', Georgia, serif;
        font-size: 1.1rem; font-weight: 700; line-height: 1;
    }
    .cp__stat-val--accent { color: #ec167f; }
    .cp__stat-lbl {
        font-size: 0.65rem; font-weight: 600; color: #8e8e9e;
        text-transform: uppercase; margin-top: 3px;
    }
    .cp__actions { display: flex; gap: 8px; }
    .cp__actions .clc__vote-btn {
        flex: 1; border-radius: 10px; padding: 14px;
    }
    .cp__close {
        position: absolute; top: 16px; right: 16px;
        width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
        border: none; border-radius: 50%;
        color: #fff; cursor: pointer; z-index: 2;
    }
    .cp__close:hover { background: rgba(0,0,0,0.6); }

    @media (max-width: 768px) {
        .cl-countdown { gap: 8px; }
        .cl-countdown__block { min-width: 60px; padding: 10px 12px; }
        .cl-countdown__val { font-size: 1.2rem; }
        .cl-toolbar { flex-direction: column; align-items: flex-start; }
        .cp { max-width: 100%; }
        .vl-modal { max-width: 100%; max-height: 90vh; }
        .vl-stats { flex-wrap: wrap; }
        .vl-stat { flex: 1 1 45%; }
    }

    /* Grid */
    .clc-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    /* ═══ VOTE MODAL ═══ */
    .vm-overlay {
        position: fixed; inset: 0;
        background: rgba(10,10,20,0.6);
        backdrop-filter: blur(4px);
        z-index: 9999;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
    }
    .vm-overlay.active { display: flex; }

    .vm {
        background: #fff;
        border-radius: 16px;
        width: 100%;
        max-width: 480px;
        overflow: hidden;
        box-shadow: 0 24px 64px rgba(0,0,0,0.2);
        animation: vmSlideIn 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
    }
    @keyframes vmSlideIn {
        from { opacity: 0; transform: translateY(24px) scale(0.96); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .vm__header {
        display: flex; align-items: center; gap: 16px;
        padding: 24px 24px 20px;
        border-bottom: 1px solid #f4f4f7;
    }
    .vm__avatar {
        width: 56px; height: 56px;
        border-radius: 12px;
        object-fit: cover;
        flex-shrink: 0;
    }
    .vm__candidate-name {
        font-family: 'DM Serif Display', Georgia, serif;
        font-size: 1.1rem; font-weight: 700; color: #1a1a2e;
        margin: 0 0 2px; line-height: 1.3;
    }
    .vm__candidate-num {
        font-family: 'Inter', sans-serif;
        font-size: 0.78rem; color: #8e8e9e;
    }
    .vm__close {
        margin-left: auto;
        width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        background: #f4f4f7; border: none; border-radius: 8px;
        color: #6b6b7b; cursor: pointer;
        transition: background 0.2s;
    }
    .vm__close:hover { background: #e8e8ee; }

    .vm__body { padding: 24px; }

    .vm__field {
        margin-bottom: 16px;
    }
    .vm__label {
        display: block;
        font-family: 'Inter', sans-serif;
        font-size: 0.78rem; font-weight: 600; color: #6b6b7b;
        text-transform: uppercase; letter-spacing: 0.04em;
        margin-bottom: 6px;
    }
    .vm__input {
        width: 100%;
        padding: 12px 14px;
        background: #fafafc;
        border: 1px solid #e8e8ee;
        border-radius: 8px;
        font-family: 'Inter', sans-serif;
        font-size: 0.92rem; color: #1a1a2e;
        outline: none;
        transition: border-color 0.2s;
    }
    .vm__input:focus { border-color: #ec167f; }
    .vm__input::placeholder { color: #b0b0be; }

    /* Quantity stepper */
    .vm__stepper {
        display: flex;
        align-items: center;
        border: 1px solid #e8e8ee;
        border-radius: 8px;
        background: #fafafc;
        overflow: hidden;
    }
    .vm__stepper-btn {
        width: 48px; height: 48px;
        display: flex; align-items: center; justify-content: center;
        background: transparent;
        border: none;
        color: #6b6b7b;
        font-size: 1.2rem;
        cursor: pointer;
        transition: background 0.15s, color 0.15s;
        flex-shrink: 0;
        user-select: none;
    }
    .vm__stepper-btn:hover {
        background: #f4f4f7;
        color: #ec167f;
    }
    .vm__stepper-btn:active {
        background: #e8e8ee;
    }
    .vm__stepper-btn:disabled {
        color: #d1d1db;
        cursor: not-allowed;
        background: transparent;
    }
    .vm__stepper input {
        flex: 1;
        text-align: center;
        border: none;
        border-left: 1px solid #e8e8ee;
        border-right: 1px solid #e8e8ee;
        background: transparent;
        font-family: 'Inter', sans-serif;
        font-size: 1.05rem;
        font-weight: 700;
        color: #1a1a2e;
        outline: none;
        padding: 12px 8px;
        -moz-appearance: textfield;
    }
    .vm__stepper input::-webkit-outer-spin-button,
    .vm__stepper input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .vm__total {
        display: flex; justify-content: space-between; align-items: center;
        padding: 14px 16px;
        background: #fef0f6;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    .vm__total-label {
        font-family: 'Inter', sans-serif;
        font-size: 0.85rem; font-weight: 600; color: #6b6b7b;
    }
    .vm__total-value {
        font-family: 'DM Serif Display', Georgia, serif;
        font-size: 1.15rem; font-weight: 700; color: #ec167f;
    }

    .vm__submit {
        width: 100%; padding: 14px;
        background: #ec167f; color: #fff;
        border: none; border-radius: 10px;
        font-family: 'Inter', sans-serif;
        font-size: 0.95rem; font-weight: 600;
        cursor: pointer; transition: background 0.2s;
        display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .vm__submit:hover { background: #c9116a; }
    .vm__submit:disabled {
        background: #b0b0be; cursor: not-allowed;
    }

    .vm__free-tag {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 4px 10px;
        background: #ecfdf5; color: #0d7a3e;
        border-radius: 6px;
        font-size: 0.75rem; font-weight: 600;
        margin-bottom: 16px;
    }

    /* ═══ INFO BANNER ═══ */
    .cl-info {
        background: #fafafc;
        border: 1px solid #e8e8ee;
        border-radius: 12px;
        padding: 28px 32px;
        margin-bottom: 32px;
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
    }
    .cl-info__item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        flex: 1 1 200px;
        min-width: 180px;
    }
    .cl-info__icon {
        width: 40px; height: 40px;
        display: flex; align-items: center; justify-content: center;
        background: #fff;
        border: 1px solid #e8e8ee;
        border-radius: 10px;
        color: #ec167f;
        flex-shrink: 0;
    }
    .cl-info__label {
        font-family: 'Inter', sans-serif;
        font-size: 0.7rem; font-weight: 600;
        color: #8e8e9e;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 2px;
    }
    .cl-info__value {
        font-family: 'Inter', sans-serif;
        font-size: 0.95rem; font-weight: 700;
        color: #1a1a2e;
    }
    .cl-info__value--accent { color: #ec167f; }
    .cl-info__value--green { color: #0d7a3e; }

    .vm__unit-price {
        font-size: 0.75rem;
        color: #8e8e9e;
        margin-top: 4px;
    }

    /* Anonymous checkbox */
    .vm__checkbox {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
        cursor: pointer;
        user-select: none;
    }
    .vm__checkbox input[type="checkbox"] {
        display: none;
    }
    .vm__check-box {
        width: 20px; height: 20px;
        border: 2px solid #d1d1db;
        border-radius: 5px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        transition: all 0.2s;
    }
    .vm__checkbox input:checked + .vm__check-box {
        background: #ec167f;
        border-color: #ec167f;
    }
    .vm__check-box .mi { font-size: 14px; color: #fff; opacity: 0; transition: opacity 0.15s; }
    .vm__checkbox input:checked + .vm__check-box .mi { opacity: 1; }
    .vm__checkbox-label {
        font-family: 'Inter', sans-serif;
        font-size: 0.88rem; color: #4a4a5a;
    }
    .vm__checkbox-hint {
        font-size: 0.75rem; color: #8e8e9e;
        display: block; margin-top: 1px;
    }

    /* ═══ RECENT VOTERS ═══ */
    .cl-voters {
        margin-top: 48px;
        margin-bottom: 8px;
    }
    .cl-voters__title {
        font-family: 'DM Serif Display', Georgia, serif;
        font-size: 1.15rem; font-weight: 700;
        color: var(--pt-gray-900);
        margin: 0 0 20px;
        display: flex; align-items: center; gap: 8px;
    }
    .cl-voters__title .mi { color: #ec167f; }
    .cl-voters__list {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .cl-voter {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 0;
        border-bottom: 1px solid #f4f4f7;
    }
    .cl-voter:last-child { border-bottom: none; }
    .cl-voter__avatar {
        width: 40px; height: 40px;
        border-radius: 50%;
        background: var(--pt-primary-subtle);
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        font-family: 'DM Serif Display', Georgia, serif;
        font-size: 0.85rem; font-weight: 700;
        color: #ec167f;
    }
    .cl-voter__info {
        flex: 1; min-width: 0;
    }
    .cl-voter__name {
        font-family: 'Inter', sans-serif;
        font-size: 0.92rem; font-weight: 600;
        color: #1a1a2e;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cl-voter__detail {
        font-size: 0.78rem; color: #8e8e9e;
        display: flex; align-items: center; gap: 6px;
    }
    .cl-voter__qty {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 2px 8px;
        background: var(--pt-primary-subtle);
        color: #ec167f;
        border-radius: 4px;
        font-size: 0.72rem; font-weight: 700;
        flex-shrink: 0;
    }
    .cl-voters__empty {
        text-align: center;
        padding: 32px 16px;
        color: #8e8e9e;
        font-size: 0.88rem;
    }

    /* Un votant anonyme dans la liste des derniers votants. */
    .cl-voter__avatar--anon { background: var(--db-gray-100, #f3f4f6); color: var(--db-gray-400, #9ca3af); }
    .cl-voter__name--anon { color: var(--db-gray-500, #6b7280); font-style: italic; }

    /* Une personne dont l'historique se deplie au clic. */
    .vl-voter-row--repliable { cursor: pointer; }
    .vl-voter-row--repliable:hover { background: var(--db-gray-50, #fafafa); }
    .vl-voter__chevron {
        color: var(--db-gray-400, #9ca3af); font-size: 20px; flex-shrink: 0;
        transition: transform 0.15s;
    }
    .vl-voter-row.is-deplie .vl-voter__chevron { transform: rotate(180deg); }

    /* Historique replie d'une personne, et bloc des votes anonymes. */
    .vl-voter-row--detail {
        padding-left: 56px; opacity: 0.75; font-size: 0.92em;
        border-top: 1px dashed var(--db-gray-100, #f1f1f4);
    }
    .vl-voter-row--anon { border-top: 1px solid var(--db-gray-200, #e5e7eb); margin-top: 8px; }

    /* ═══ SUCCESS MODAL ═══ */
    .sm-overlay {
        position: fixed; inset: 0;
        background: rgba(10,10,20,0.6);
        backdrop-filter: blur(4px);
        z-index: 10000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 24px;
    }
    .sm-overlay.active { display: flex; }

    .sm {
        background: #fff;
        border-radius: 20px;
        width: 100%;
        max-width: 420px;
        overflow: hidden;
        box-shadow: 0 24px 64px rgba(0,0,0,0.2);
        animation: smPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
        text-align: center;
    }
    @keyframes smPop {
        from { opacity: 0; transform: scale(0.85) translateY(20px); }
        to { opacity: 1; transform: scale(1) translateY(0); }
    }

    .sm__icon-ring {
        width: 80px; height: 80px;
        border-radius: 50%;
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        display: flex; align-items: center; justify-content: center;
        margin: 36px auto 20px;
        position: relative;
    }
    .sm__icon-ring::before {
        content: '';
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 2px solid rgba(13,122,62,0.1);
    }
    .sm__icon-ring .mi {
        font-size: 36px;
        color: #0d7a3e;
    }

    .sm__confetti {
        position: absolute;
        inset: -20px;
        pointer-events: none;
    }
    .sm__confetti span {
        position: absolute;
        width: 6px; height: 6px;
        border-radius: 50%;
        animation: smConfetti 0.6s ease-out forwards;
        opacity: 0;
    }
    .sm__confetti span:nth-child(1) { background: #ec167f; top: 50%; left: 10%; animation-delay: 0.1s; }
    .sm__confetti span:nth-child(2) { background: #f59e0b; top: 20%; left: 50%; animation-delay: 0.15s; }
    .sm__confetti span:nth-child(3) { background: #3b82f6; top: 50%; right: 10%; animation-delay: 0.2s; }
    .sm__confetti span:nth-child(4) { background: #10b981; bottom: 20%; left: 30%; animation-delay: 0.25s; }
    .sm__confetti span:nth-child(5) { background: #8b5cf6; bottom: 20%; right: 30%; animation-delay: 0.3s; }
    .sm__confetti span:nth-child(6) { background: #ec167f; top: 15%; left: 25%; animation-delay: 0.12s; width: 4px; height: 4px; }
    @keyframes smConfetti {
        0% { transform: scale(0) translate(0, 0); opacity: 0; }
        50% { opacity: 1; }
        100% { transform: scale(1) translate(var(--tx, 10px), var(--ty, -20px)); opacity: 0; }
    }
    .sm__confetti span:nth-child(1) { --tx: -15px; --ty: -25px; }
    .sm__confetti span:nth-child(2) { --tx: 5px; --ty: -30px; }
    .sm__confetti span:nth-child(3) { --tx: 18px; --ty: -20px; }
    .sm__confetti span:nth-child(4) { --tx: -10px; --ty: 15px; }
    .sm__confetti span:nth-child(5) { --tx: 12px; --ty: 18px; }
    .sm__confetti span:nth-child(6) { --tx: -20px; --ty: -15px; }

    .sm__title {
        font-family: 'DM Serif Display', Georgia, serif;
        font-size: 1.3rem; font-weight: 700;
        color: #1a1a2e;
        margin: 0 0 6px;
    }
    .sm__subtitle {
        font-family: 'Inter', sans-serif;
        font-size: 0.9rem;
        color: #6b6b7b;
        margin: 0 0 24px;
        padding: 0 32px;
        line-height: 1.5;
    }

    .sm__details {
        margin: 0 28px 24px;
        background: #fafafc;
        border-radius: 12px;
        padding: 4px 0;
        border: 1px solid #f4f4f7;
    }
    .sm__row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;
    }
    .sm__row + .sm__row {
        border-top: 1px solid #f4f4f7;
    }
    .sm__row-label {
        font-family: 'Inter', sans-serif;
        font-size: 0.82rem;
        color: #8e8e9e;
        display: flex; align-items: center; gap: 6px;
    }
    .sm__row-label .mi { font-size: 16px; }
    .sm__row-value {
        font-family: 'Inter', sans-serif;
        font-size: 0.88rem;
        font-weight: 700;
        color: #1a1a2e;
    }
    .sm__row-value--accent { color: #ec167f; }
    .sm__row-value--green { color: #0d7a3e; }

    .sm__actions {
        padding: 0 28px 28px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .sm__btn-primary {
        width: 100%; padding: 14px;
        background: #ec167f; color: #fff;
        border: none; border-radius: 10px;
        font-family: 'Inter', sans-serif;
        font-size: 0.92rem; font-weight: 600;
        cursor: pointer; transition: background 0.2s;
        display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .sm__btn-primary:hover { background: #c9116a; }
    .sm__btn-ghost {
        width: 100%; padding: 12px;
        background: transparent; color: #6b6b7b;
        border: 1px solid #e8e8ee; border-radius: 10px;
        font-family: 'Inter', sans-serif;
        font-size: 0.85rem; font-weight: 600;
        cursor: pointer; transition: all 0.2s;
        display: flex; align-items: center; justify-content: center; gap: 6px;
    }
    .sm__btn-ghost:hover { border-color: #d1d1db; background: #fafafc; }

    /* Error variant */
    .sm__icon-ring--error {
        background: linear-gradient(135deg, #fef2f2 0%, #fecaca 100%);
    }
    .sm__icon-ring--error::before {
        border-color: rgba(185,28,28,0.1);
    }
    .sm__icon-ring--error .mi {
        color: #b91c1c;
    }

    @media (max-width: 768px) {
        .sm { max-width: 100%; border-radius: 16px; }
        .sm__details { margin: 0 20px 20px; }
        .sm__actions { padding: 0 20px 24px; }
    }

    /* ═══ ORGANIZER CARD ═══ */
    .cl-organizer {
        background: #fff;
        border: 1px solid #e8e8ee;
        border-radius: 14px;
        padding: 28px 32px;
        display: flex;
        align-items: flex-start;
        gap: 20px;
        margin-top: 48px;
        margin-bottom: 8px;
    }
    .cl-organizer__avatar {
        width: 52px; height: 52px;
        border-radius: 50%;
        background: var(--pt-primary-subtle);
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
        font-family: 'DM Serif Display', Georgia, serif;
        font-size: 1rem; font-weight: 700;
        color: #ec167f;
    }
    .cl-organizer__info { flex: 1; min-width: 0; }
    .cl-organizer__eyebrow {
        font-size: 0.65rem; font-weight: 700;
        color: #8e8e9e;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 4px;
    }
    .cl-organizer__name {
        font-family: 'DM Serif Display', Georgia, serif;
        font-size: 1.05rem; font-weight: 700;
        color: #1a1a2e;
        margin: 0 0 2px;
    }
    .cl-organizer__company {
        font-size: 0.85rem; color: #6b6b7b;
        margin: 0 0 12px;
    }
    .cl-organizer__meta {
        display: flex; flex-wrap: wrap; gap: 16px;
    }
    .cl-organizer__meta-item {
        display: flex; align-items: center; gap: 6px;
        font-size: 0.82rem; color: #6b6b7b;
    }
    .cl-organizer__meta-item .mi {
        font-size: 16px; color: #b0b0be;
    }
    .cl-organizer__event-tag {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 6px 14px;
        background: #fafafc;
        border: 1px solid #f4f4f7;
        border-radius: 8px;
        font-size: 0.78rem; font-weight: 600;
        color: #6b6b7b;
        flex-shrink: 0;
        align-self: center;
    }
    .cl-organizer__event-tag .mi { font-size: 16px; color: #ec167f; }

    @media (max-width: 768px) {
        .cl-organizer { flex-direction: column; padding: 24px 20px; }
        .cl-organizer__event-tag { align-self: flex-start; }
    }

    @media (max-width: 991px) {
        .clc-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
        /* Cover: shorter */
        .cl-cover { height:120px; }

        /* Header card: tight, no overlap */
        #clHeader .cl-wrap { margin-top:-40px; padding:0 12px; }
        .cl-header-card { padding:16px 14px 0; border-radius:14px; box-shadow:0 2px 12px rgba(0,0,0,0.06); }

        /* Breadcrumb */
        #clHeader .cl-breadcrumb { margin-bottom:10px; font-size:0.7rem; }

        /* Top: stacked */
        #clHeader .cl-top {
            flex-direction:column; align-items:stretch;
            gap:12px; padding-bottom:12px;
        }
        #clHeader .cl-title { font-size:1.15rem; margin-bottom:4px; }
        #clHeader .cl-title > span { font-size:0.52rem !important; padding:3px 8px !important; margin-left:4px !important; }
        #clHeader .cl-sub {
            font-size:0.78rem; line-height:1.4;
            display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
        }

        /* Prize badge */
        .cl-prize { margin-top:8px !important; padding:8px 12px !important; border-radius:8px !important; }
        .cl-prize > div:first-child { width:26px !important; height:26px !important; }
        .cl-prize > div:first-child .mi { font-size:14px !important; }

        /* Stats: full width */
        #clHeader .cl-stats { width:100%; border-radius:10px; }
        #clHeader .cl-stats > div { padding:10px 8px; }
        #clHeader .cl-stat-val { font-size:0.95rem; }
        #clHeader .cl-stat-lbl { font-size:0.55rem; }

        /* Programme: stack vertically */
        .cl-programme { margin-top:12px; }
        .cl-programme__timeline { flex-direction:column; gap:8px; }
        .cl-programme__phase { padding:10px 12px; gap:8px; border-radius:8px; }
        .cl-programme__dot { width:24px; height:24px; }
        .cl-programme__dot .mi { font-size:12px !important; }
        .cl-programme__pulse { width:8px; height:8px; }
        .cl-programme__phase-title { font-size:0.78rem; }
        .cl-programme__phase-dates { font-size:0.68rem; }
        .cl-programme__badge { padding:2px 8px; font-size:0.55rem; }

        /* Search: embedded bottom */
        #clHeader .cl-search {
            margin-left:-14px; margin-right:-14px;
            border-radius:0 0 14px 14px; padding:4px;
        }
        #clHeader .cl-search-field input { padding:10px 10px 10px 34px; font-size:0.8rem; }
        #clHeader .cl-search-icon { left:10px; }
        #clHeader .cl-search-btn { padding:10px 12px; font-size:0.76rem; }
        #clHeader .cl-search-btn span:last-child { display:none; }

        /* ── Other sections ── */
        .cl-cta-banner { flex-direction:column; text-align:center; padding:24px 16px; border-radius:10px; margin-top:28px; }
        .cl-info { padding:14px; gap:10px; border-radius:10px; }
        .cl-info__item { flex:1 1 100%; }
        .cl-results-bar { flex-direction:column; gap:8px; align-items:flex-start; margin-bottom:16px; padding-bottom:12px; }
        .clc-grid { grid-template-columns:repeat(2,1fr); gap:10px; }

        /* ── Candidate cards mobile ── */
        /* Crown/rank: move to bottom of image, left-aligned, smaller */
        .clc__crown {
            top:auto !important; bottom:8px; left:8px; right:auto;
            transform:none !important;
            padding:3px 8px; font-size:0.5rem; gap:3px;
            border-radius:6px;
            box-shadow:0 2px 6px rgba(245,158,11,0.25);
        }
        .clc__crown .mi { font-size:10px !important; }
        .clc__rank-badge {
            top:auto !important; bottom:8px; left:8px; right:auto;
            transform:none !important;
            padding:3px 8px; font-size:0.48rem; gap:3px;
            border-radius:6px;
        }
        .clc__rank-badge .mi { font-size:9px !important; }

        /* Number badge: smaller */
        .clc__number { top:6px; left:6px; padding:3px 6px; min-width:36px; border-radius:6px; }
        .clc__number-val { font-size:0.85rem; }
        .clc__number-lbl { font-size:0.45rem; margin-top:0; }

        /* Votes tag: smaller */
        .clc__votes-tag { top:6px; right:6px; padding:3px 6px; font-size:0.5rem; border-radius:4px; gap:2px; }
        .clc__votes-tag .mi { font-size:8px !important; }

        /* Body: tighter */
        .clc__body { padding:10px; }
        .clc__name { font-size:0.78rem; margin-bottom:6px; }
        .clc__meta { gap:4px; padding-top:8px; }
        .clc__meta-item { font-size:0.7rem; gap:5px; }
        .clc__meta-icon { width:22px; height:22px; border-radius:5px; font-size:0.6rem; }
        .clc__progress { height:3px; }

        /* Action buttons: compact */
        .clc__vote-btn { padding:8px; font-size:0.72rem; gap:4px; border-radius:0 0 0 10px; }
        .clc__vote-btn .mi { font-size:13px !important; }
        .clc__voters-btn { padding:8px 10px; font-size:0.65rem; gap:3px; border-radius:0 0 10px 0; }
        .clc__voters-btn .mi { font-size:12px !important; }

        /* Card border-radius */
        .clc { border-radius:10px; }
        .clc:hover { transform:none; box-shadow:0 2px 8px rgba(0,0,0,0.06); }

        /* Challenge badge on image: smaller */
        .clc__img > span[style*="position:absolute"][style*="bottom"] {
            padding:2px 6px !important; font-size:0.48rem !important; border-radius:4px !important;
            bottom:8px !important; right:6px !important;
        }

        /* Share button */
        .clc__share { width:26px; height:26px; bottom:6px !important; right:6px !important; }

        /* Short labels on mobile */
        .clc__btn-full { display:none !important; }
        .clc__btn-short { display:inline !important; }
        .clc__voters-btn .clc__btn-full { display:none !important; }
        .clc__hover-cta { opacity:1; transform:translateY(0); }
        .clc__img::after { opacity:1; }
        .vm { max-width:100%; }
    }

    @media (max-width: 374px) {
        .clc-grid { grid-template-columns:1fr; max-width:320px; margin:0 auto; }
    }