:root {
            --orange-ivoire: #FF7900;
            --blanc-ivoire: #FFFFFF;
            --vert-ivoire: #009E60;
        }

        .card-supporter {
            width: 100%;
            max-width: 420px;
            height: 250px;
            border-radius: 12px;
            box-shadow: 0 6px 15px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
            border: none;
            margin: auto;
            transition: transform .15s, box-shadow .15s;
        }
        .card-supporter:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }

        .card-background {
            position: absolute;
            /* top: 30px; */
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
            opacity: .7;
            object-fit: cover;
        }

        .card-ribbon {
            position: absolute;
            top: 15px;
            left: 15px;
            width: 35px;
            height: 18px;
            background: linear-gradient(to right, var(--orange-ivoire) 33%, var(--blanc-ivoire) 33%, var(--blanc-ivoire) 66%, var(--vert-ivoire) 66%);
            border-radius: 3px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            z-index: 2;
        }
        .card-ribbon::after {
            content: "";
            position: absolute;
            bottom: -5px;
            left: 5px;
            width: 25px;
            height: 5px;
            background: rgba(0,0,0,0.1);
            border-radius: 0 0 3px 3px;
            transform: skewX(-30deg);
        }
        .card-header-custom {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            color: white;
            font-weight: 700;
            font-size: 18px;
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
            letter-spacing: 1px;
            z-index: 1;
        }
        .card-header-custom::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(to right,var(--orange-ivoire),var(--blanc-ivoire),var(--vert-ivoire));
        }
        .photo-frame {
            width: 80px;
            height: 80px;
            background: white;
            border: 2px solid #eee;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
        }
        .qr-code {
            position: absolute;
            bottom: 1px;
            right: 1px;
            width: 35px;
            height: 35px;
            background: white;
            padding: 5px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
        }
        /* Couleurs spécifiques */
        .bg-bgonhi    { background: #FFF3E0!important; }
        .bg-soutra    { background: #E8F5E9!important; }
        .bg-djassa    { background: #E8EAF6!important; }
        .bg-nzassa    { background: #FFF8E1!important; }
        .bg-dogba     { background: #F1F8E9!important; }
        .bg-mousso    { background: #FCE4EC!important; }

        .header-bgonhi  { background: linear-gradient(135deg, #FFB74D, #FFA726)!important; color: #fff;}
        .header-soutra  { background: linear-gradient(135deg, #81C784, #66BB6A)!important; color: #fff;}
        .header-djassa  { background: #fff!important; color: #5C6BC0!important; }
        .header-nzassa  { background: linear-gradient(135deg, #FFCC80, #FFB74D)!important; color: #fff;}
        .header-dogba   { background: linear-gradient(135deg, #A5D6A7, #81C784)!important; color: #fff;}
        .header-mousso  { background: #fff!important; color: #F06292!important; }

        @media (max-width: 500px) {
            .card-supporter {
                height: auto;
                min-height: 250px;
                max-width: 100%;
            }
        }
        @media print {
            body { background: white; }
            .card-supporter { box-shadow: none; border: 1px solid #ddd!important; }
            .print-btn { display: none; }
        }

        .card-scroll-x {
    width: 100vw;           /* Prend toute la largeur écran */
    overflow-x: auto;       /* Active le scroll horizontal */
    -webkit-overflow-scrolling: touch; /* Pour l’inertie sur mobile */
}

.card-scroll-x::-webkit-scrollbar {
    height: 7px;
    background: #f5f5f5;
}
.card-scroll-x::-webkit-scrollbar-thumb {
    background: #FF7900;
    border-radius: 4px;
}

@media (max-width: 500px) {
    .card-supporter {
        min-width: 330px;   /* plus petit que max-width de la carte */
        max-width: 420px;
        width: 95vw;
        margin-left: 2vw;
        margin-right: 2vw;
    }
    .card-scroll-x {
        padding-bottom: 10px; /* un peu d’espace sous la carte */
    }
}