/**
 * LazyEmbed — Composant d'embed vidéo Instagram & TikTok
 * Design sport/premium dark — style broadcast HUD
 * ===================================================== */

/* ─── Variables ─────────────────────────────────────── */
:root {
    --le-bg:          #0a0d12;
    --le-surface:     #111520;
    --le-border:      rgba(255,255,255,0.06);
    --le-border-hover:rgba(255,255,255,0.14);

    --le-tiktok-a:    #ff0050;
    --le-tiktok-b:    #00f2ea;
    --le-insta-a:     #f77737;
    --le-insta-b:     #e1306c;
    --le-insta-c:     #833ab4;

    --le-text:        rgba(255,255,255,0.9);
    --le-muted:       rgba(255,255,255,0.38);

    --le-radius:      6px;
    --le-corner-size: 14px;
    --le-corner-w:    2px;

    --le-ease:        cubic-bezier(0.16, 1, 0.3, 1);
    --le-fast:        cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Wrapper ────────────────────────────────────────── */
.lazy-embed {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 540px;
    vertical-align: top;
    font-family: inherit;
}

.lazy-embed[data-type="tiktok"] {
    max-width: 325px;
}

/* Grille affichage multiple */
.lazy-embed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    align-items: start;
}

/* ─── Placeholder / Skeleton ─────────────────────────── */
.lazy-embed__placeholder {
    position: relative;
    background: var(--le-surface);
    border: 1px solid var(--le-border);
    border-radius: var(--le-radius);
    overflow: hidden;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    transition: border-color 0.3s var(--le-fast);
}

/* Ratio TikTok 9:16 */
.lazy-embed[data-type="tiktok"] .lazy-embed__placeholder {
    min-height: 540px;
    aspect-ratio: 9 / 16;
}

/* Ratio Instagram carré */
.lazy-embed[data-type="instagram"] .lazy-embed__placeholder {
    min-height: 480px;
    aspect-ratio: 4 / 5;
}

/* ─── Skeleton shimmer ───────────────────────────────── */
.lazy-embed__skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 20%,
        rgba(255,255,255,0.022) 40%,
        rgba(255,255,255,0.04) 50%,
        rgba(255,255,255,0.022) 60%,
        transparent 80%
    );
    background-size: 300% 100%;
    animation: le-scan 2s linear infinite;
}

@keyframes le-scan {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* Scan line horizontale style broadcast */
.lazy-embed__placeholder::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.06) 30%,
        rgba(255,255,255,0.12) 50%,
        rgba(255,255,255,0.06) 70%,
        transparent
    );
    animation: le-scanline 3s ease-in-out infinite;
    z-index: 1;
}

@keyframes le-scanline {
    0%   { top: 10%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 90%; opacity: 0; }
}

/* ─── Coins HUD (style broadcast) ───────────────────── */
.lazy-embed__corners {
    position: absolute;
    inset: 10px;
    pointer-events: none;
    z-index: 2;
}

.lazy-embed__corner {
    position: absolute;
    width: var(--le-corner-size);
    height: var(--le-corner-size);
    opacity: 0.5;
    transition: opacity 0.4s;
}

.lazy-embed__placeholder:hover .lazy-embed__corner {
    opacity: 0.9;
}

/* Couleur par plateforme */
.lazy-embed[data-type="tiktok"]    .lazy-embed__corner { border-color: var(--le-tiktok-a); }
.lazy-embed[data-type="instagram"] .lazy-embed__corner { border-color: var(--le-insta-b); }

.lazy-embed__corner--tl { top: 0;    left: 0;  border-top:    var(--le-corner-w) solid; border-left:   var(--le-corner-w) solid; }
.lazy-embed__corner--tr { top: 0;    right: 0; border-top:    var(--le-corner-w) solid; border-right:  var(--le-corner-w) solid; }
.lazy-embed__corner--bl { bottom: 0; left: 0;  border-bottom: var(--le-corner-w) solid; border-left:   var(--le-corner-w) solid; }
.lazy-embed__corner--br { bottom: 0; right: 0; border-bottom: var(--le-corner-w) solid; border-right:  var(--le-corner-w) solid; }

/* ─── Label plateforme ───────────────────────────────── */
.lazy-embed__label {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    text-align: center;
}

.lazy-embed__platform-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    transition: transform 0.4s var(--le-ease);
}

.lazy-embed__placeholder:hover .lazy-embed__platform-icon {
    transform: scale(1.1);
}

/* Icônes colorées par plateforme */
.lazy-embed[data-type="tiktok"]    .lazy-embed__platform-icon {
    background: linear-gradient(135deg, rgba(255,0,80,0.15), rgba(0,242,234,0.1));
    border: 1px solid rgba(255,0,80,0.25);
    color: var(--le-tiktok-a);
}
.lazy-embed[data-type="instagram"] .lazy-embed__platform-icon {
    background: linear-gradient(135deg, rgba(247,119,55,0.12), rgba(225,48,108,0.12));
    border: 1px solid rgba(225,48,108,0.2);
    color: var(--le-insta-b);
}

.lazy-embed__platform-name {
    font-family: 'Orbitron', 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--le-muted);
}

.lazy-embed__status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.2);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Dot clignotant de statut */
.lazy-embed__status::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.lazy-embed__placeholder--loading .lazy-embed__status {
    color: rgba(255,255,255,0.4);
    animation: le-pulse 1s ease-in-out infinite alternate;
}

.lazy-embed[data-type="tiktok"]    .lazy-embed__placeholder--loading .lazy-embed__status { color: var(--le-tiktok-b); }
.lazy-embed[data-type="instagram"] .lazy-embed__placeholder--loading .lazy-embed__status { color: var(--le-insta-a); }

@keyframes le-pulse {
    from { opacity: 0.4; }
    to   { opacity: 1; }
}

/* ─── État d'erreur ──────────────────────────────────── */
.lazy-embed__placeholder--error {
    border-color: rgba(239, 68, 68, 0.25);
}

.lazy-embed__placeholder--error .lazy-embed__platform-icon {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.lazy-embed__placeholder--error .lazy-embed__status {
    color: rgba(239, 68, 68, 0.7);
    animation: none;
}

/* ─── Mount (conteneur de l'embed réel) ──────────────── */
.lazy-embed__mount {
    width: 100%;
    opacity: 0;
    transform: translateY(8px) scale(0.99);
    transition:
        opacity 0.6s var(--le-ease),
        transform 0.6s var(--le-ease);
}

/* ─── État chargé ────────────────────────────────────── */
.lazy-embed--loaded .lazy-embed__mount {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Placeholder fade-out au chargement */
.lazy-embed__placeholder {
    transition:
        opacity 0.5s var(--le-fast),
        transform 0.5s var(--le-ease),
        border-color 0.3s var(--le-fast);
}

.lazy-embed__placeholder--done {
    opacity: 0;
    transform: scale(0.98);
    pointer-events: none;
}

/* ─── Embeds natifs — reset styles par défaut ─────────── */
.lazy-embed__mount .tiktok-embed,
.lazy-embed__mount .instagram-media {
    margin: 0 auto !important;
}

/* Assure que l'iframe TikTok s'étire bien */
.lazy-embed__mount iframe {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    border: none;
    border-radius: var(--le-radius);
}

/* ─── Fallback sans JS ───────────────────────────────── */
.lazy-embed__noscript {
    display: block;
    padding: 20px;
    background: var(--le-surface);
    border: 1px solid var(--le-border);
    border-radius: var(--le-radius);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--le-muted);
    text-align: center;
}

.lazy-embed__noscript a {
    color: rgba(255,255,255,0.7);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 600px) {
    .lazy-embed {
        max-width: 100%;
    }
    .lazy-embed[data-type="tiktok"] {
        max-width: 100%;
    }
    .lazy-embed-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lazy-embed__skeleton,
    .lazy-embed__placeholder::before {
        animation: none;
    }
    .lazy-embed__mount,
    .lazy-embed__placeholder {
        transition: opacity 0.2s;
    }
}