/* Cadre et bandeau des cartes de l'accueil (Présences, Accès refusés) selon l'abonnement du membre.
   Réglage : Abonnements > (abonnement) > Données > Accueil (couleur). srvCadresAccueil pose sur la
   carte les variables de couleur (--gf-c...) ; ces règles en tirent le contour, le halo et les bandeaux.
   Voir _Documentation/Technique/04_Contrats/affichage-accueil.md. */

/* Carte encadrée : tout le contour dans la couleur, halo et teinte légère (gris sans couleur) */
.card.gf-cadre {
    --gf-c: #6c757d;
    --gf-c-clair: #b6babe;
    --gf-c-vif: #868d93;
    --gf-c-fonce: #464c51;
    --gf-c-halo: rgba(108, 117, 125, 0.45);
    --gf-c-anneau: rgba(108, 117, 125, 0.22);
    --gf-c-teinte: rgba(108, 117, 125, 0.10);
    --gf-c-texte: #fff;
    --gf-metal: linear-gradient(135deg, var(--gf-c-fonce) 0%, var(--gf-c-clair) 22%, var(--gf-c) 45%, var(--gf-c-clair) 68%, var(--gf-c-fonce) 100%);
    border: 2px solid var(--gf-c);
    background-image: linear-gradient(160deg, var(--gf-c-teinte) 0%, rgba(255, 255, 255, 0) 70%);
    box-shadow: 0 6px 16px -8px var(--gf-c-halo), 0 0 0 3px var(--gf-c-anneau);
}

#presences .card.gf-cadre, #absences .card.gf-cadre { border-radius: 10px; }

/* La photo (position absolue) se cale sur le corps de la carte, sous le bandeau */
.card.gf-cadre .card-body { position: relative; }

/* 3 VIP : contour métallisé (or par défaut), fond champagne */
.card.gf-cadre-3 {
    border: 3px solid transparent;
    background: linear-gradient(160deg, var(--gf-c-teinte) 0%, rgba(255, 255, 255, 0) 65%) padding-box,
                linear-gradient(#fff, #fff) padding-box,
                var(--gf-metal) border-box;
    box-shadow: 0 8px 22px -8px var(--gf-c-halo), 0 0 0 3px var(--gf-c-anneau);
}

/* Survol : la couleur habituelle de l'accueil, en gardant le contour métallisé */
#presences .card.gf-cadre-3:hover { background: linear-gradient(#236AB9, #236AB9) padding-box, var(--gf-metal) border-box; }
#absences .card.gf-cadre-3:hover { background: linear-gradient(#CE6565, #CE6565) padding-box, var(--gf-metal) border-box; }

/* Bandeaux en haut de la carte */
.gf-bandeaux { border-radius: 8px 8px 0 0; overflow: hidden; }
.card.gf-cadre-3 .gf-bandeaux { border-radius: 7px 7px 0 0; }

.gf-bandeau {
    position: relative;
    overflow: hidden;
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    padding: 0 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gf-bandeau i.fa { font-size: 10px !important; margin-right: 5px; }

/* 2 classique : bandeau dégradé de la couleur, nom de l'abonnement */
.gf-bandeau-abo {
    background: linear-gradient(90deg, var(--gf-c) 0%, var(--gf-c-vif) 100%);
    color: var(--gf-c-texte);
}

/* 3 VIP : noir profond, lettres dorées, filet doré, diamant et reflet qui passe */
.gf-bandeau-vip {
    background: linear-gradient(135deg, #0b0b0b 0%, #2b2b2b 50%, #0b0b0b 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 var(--gf-c-clair);
    line-height: 24px;
}

.gf-bandeau-vip i.fa { color: var(--gf-c-clair); font-size: 12px !important; }

/* Diamant à droite, sauf quand la place sert à « Nouveau » */
.gf-bandeau-vip:not(.gf-avec-suite)::before {
    content: "\f3a5";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
    position: absolute;
    right: 10px;
    color: var(--gf-c-clair);
}

.gf-bandeau-vip .gf-bandeau-titre {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;
    background: linear-gradient(180deg, var(--gf-c-clair) 0%, #fff 38%, var(--gf-c-clair) 55%, var(--gf-c) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gf-bandeau-vip::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 35%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 244, 214, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-120%) skewX(-20deg);
    animation: gf-reflet 5s ease-in-out infinite;
    pointer-events: none;
}

.gf-bandeau-vip .gf-bandeau-suite { float: right; color: #9FE1CB; font-weight: 600; }
.gf-bandeau-vip .gf-bandeau-suite i.fa { color: #9FE1CB; }

/* Nouveau / Nouvelle (automatique) : vert d'eau, petite main qui fait coucou */
.gf-bandeau-nouveau {
    background: linear-gradient(90deg, #E1F5EE 0%, #C8EEDF 100%);
    color: #085041;
}

.gf-coucou {
    transform-origin: 70% 80%;
    animation: gf-coucou 6s ease-in-out infinite;
}

@keyframes gf-reflet {
    0%, 55% { transform: translateX(-120%) skewX(-20deg); }
    100% { transform: translateX(420%) skewX(-20deg); }
}

@keyframes gf-coucou {
    0%, 70%, 100% { transform: rotate(0deg); }
    74% { transform: rotate(18deg); }
    78% { transform: rotate(-8deg); }
    82% { transform: rotate(18deg); }
    86% { transform: rotate(-4deg); }
    90% { transform: rotate(10deg); }
}

@media (prefers-reduced-motion: reduce) {
    .gf-bandeau-vip::after, .gf-coucou { animation: none; }
}

/* Aperçu dans le réglage de l'abonnement */
.gf-apercu .card.gf-cadre { width: 225px; }