/**
 * Publicité « Affichez votre publicité ici. » (advertisements/ad-space-promo.js), drawer post-scan.
 * Le fond animé vient de `.landing-aurora` + `.app-loading-screen__bg`
 * (modules/loadingScreenBackground.css) : seul le contenu est stylé ici.
 * Tailwind est précompilé : aucune classe utilitaire nouvelle, tout est ici.
 */

.scanner-ad-slot--ad-space {
    background: var(--sy-accent-600);
}

.sy-adspace {
    position: relative;
    flex: 1 1 auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #fff;
    font-family: 'Inter', system-ui, sans-serif;
}

.sy-adspace__inner {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    /* Haut : sous la croix de fermeture du drawer (.scanner-ad-drawer-close-btn). */
    padding: calc(4.5rem + env(safe-area-inset-top, 0px)) 1.5rem calc(2rem + env(safe-area-inset-bottom, 0px));
    text-align: center;
}

.sy-adspace__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid rgb(var(--sy-white-rgb) / 0.35);
    border-radius: 999px;
    background: rgb(var(--sy-white-rgb) / 0.16);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Le « panneau » vide à louer : pointillés, verre dépoli, reflet qui passe. */
.sy-adspace__board {
    position: relative;
    box-sizing: border-box;
    width: min(100%, 20rem);
    aspect-ratio: 16 / 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border: 2px dashed rgb(var(--sy-white-rgb) / 0.7);
    border-radius: 1.5rem;
    background: rgb(var(--sy-white-rgb) / 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    overflow: hidden;
    animation: sy-adspace-pulse 2.8s ease-in-out infinite;
}

.sy-adspace__board::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgb(var(--sy-white-rgb) / 0.28) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: sy-adspace-shine 3.2s ease-in-out infinite;
    pointer-events: none;
}

.sy-adspace__board-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--sy-white);
    color: var(--sy-accent-600);
    font-size: 2.25rem;
    box-shadow: 0 10px 30px rgb(var(--sy-shadow-rgb) / 0.18);
    animation: sy-adspace-bob 2.4s ease-in-out infinite;
}

.sy-adspace__board-label {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0.92;
}

.sy-adspace__title {
    margin: 0;
    font-size: clamp(1.75rem, 7.5vw, 2.25rem);
    font-weight: 900;
    line-height: 1.1;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgb(var(--sy-shadow-rgb) / 0.15);
}

.sy-adspace__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sy-adspace__chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid rgb(var(--sy-white-rgb) / 0.28);
    border-radius: 999px;
    background: rgb(var(--sy-white-rgb) / 0.14);
    font-size: 0.8125rem;
    font-weight: 600;
}

@keyframes sy-adspace-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgb(var(--sy-white-rgb) / 0); }
    50% { box-shadow: 0 0 0 10px rgb(var(--sy-white-rgb) / 0.08); }
}

@keyframes sy-adspace-shine {
    0% { transform: translateX(-100%); }
    60%, 100% { transform: translateX(100%); }
}

@keyframes sy-adspace-bob {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50% { transform: translateY(-6px) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sy-adspace__board,
    .sy-adspace__board::after,
    .sy-adspace__board-icon {
        animation: none;
    }
}