/* =========================================================
   ANNONCE HERO — carte "verre dépoli" posée sur le carrousel
   Utilisée sur index.php et dans l'aperçu admin (annonces.php)
   ========================================================= */

@property --annonce-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* Palette par type d'annonce */
.annonce-hero                 { --a1: #DB2777; --a2: #6B21A8; --glow: rgba(219, 39, 119, 0.45); }
.annonce-hero.annonce--info      { --a1: #38BDF8; --a2: #6366F1; --glow: rgba(56, 189, 248, 0.40); }
.annonce-hero.annonce--promo     { --a1: #DB2777; --a2: #F59E0B; --glow: rgba(219, 39, 119, 0.50); }
.annonce-hero.annonce--evenement { --a1: #A855F7; --a2: #DB2777; --glow: rgba(168, 85, 247, 0.45); }
.annonce-hero.annonce--alerte    { --a1: #F59E0B; --a2: #EF4444; --glow: rgba(239, 68, 68, 0.45); }

.annonce-hero {
    position: absolute;
    left: 50%;
    bottom: 32px;
    z-index: 5;
    width: min(620px, calc(100% - 32px));
    transform: translate(-50%, 40px);
    opacity: 0;
    animation: annonce-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
    font-family: 'Poppins', sans-serif;
    text-align: left;
}

.annonce-hero.is-closing {
    animation: annonce-out 0.45s ease-in forwards;
}

.annonce-card {
    position: relative;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 22px 52px 22px 22px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(17, 24, 39, 0.72), rgba(17, 24, 39, 0.55));
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 25px 60px -15px var(--glow), 0 8px 24px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    color: #fff;
}

/* Bordure en dégradé qui tourne */
.annonce-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--annonce-angle),
        var(--a1), var(--a2), rgba(255, 255, 255, 0.08) 35%,
        rgba(255, 255, 255, 0.08) 65%, var(--a2), var(--a1));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: annonce-spin 6s linear infinite;
    pointer-events: none;
}

/* Reflet lumineux qui balaie la carte */
.annonce-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.10), transparent);
    transform: skewX(-20deg);
    animation: annonce-shine 7s ease-in-out 1.6s infinite;
    pointer-events: none;
}

.annonce-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--a1), var(--a2));
    box-shadow: 0 8px 22px -6px var(--glow);
    font-size: 1.35rem;
    color: #fff;
    animation: annonce-pulse 2.8s ease-in-out infinite;
}

.annonce-body { min-width: 0; flex: 1; }

.annonce-badge {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--a1), var(--a2));
    color: #fff;
}

.annonce-titre {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
    color: #fff;
    overflow-wrap: anywhere;
}

.annonce-texte {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.annonce-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 14px;
}
.annonce-footer:empty { display: none; }

.annonce-countdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    font-variant-numeric: tabular-nums;
}
.annonce-countdown b { color: #fff; font-weight: 600; }

.annonce-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 50px;
    background: linear-gradient(90deg, var(--a1), var(--a2));
    color: #fff !important;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 18px -6px var(--glow);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.annonce-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -6px var(--glow); }
.annonce-cta i { transition: transform 0.25s ease; }
.annonce-cta:hover i { transform: translateX(3px); }

.annonce-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}
.annonce-close:hover { background: rgba(255, 255, 255, 0.15); color: #fff; transform: rotate(90deg); }

@keyframes annonce-in   { to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes annonce-out  { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, 30px) scale(0.97); } }
@keyframes annonce-spin { to { --annonce-angle: 360deg; } }
@keyframes annonce-shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
@keyframes annonce-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

@media (max-width: 575.98px) {
    .annonce-hero { bottom: 16px; }
    .annonce-card { gap: 12px; padding: 16px 44px 16px 16px; border-radius: 18px; }
    .annonce-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 1.05rem; }
    .annonce-titre { font-size: 1.05rem; }
    .annonce-texte { font-size: 0.84rem; }
}

@media (prefers-reduced-motion: reduce) {
    .annonce-hero { animation: none; opacity: 1; transform: translate(-50%, 0); }
    .annonce-hero.is-closing { animation: none; display: none; }
    .annonce-card::before, .annonce-card::after, .annonce-icon { animation: none; }
}