/* FICHIER: assets/viewer.css */
/* RÔLE: Styles du viewer iframe plein écran */

:root {
    --viewer-bar-h: 56px;
    --viewer-bg: #1a1a2e;
    --viewer-bar-bg: #0f0f1a;
    --viewer-text: #e2e8f0;
    --viewer-text-dim: #64748b;
    --viewer-border: #2d2d44;
    --viewer-primary: #6366f1;
    --viewer-accent: #f43f5e;
    --viewer-mobile-w: 375px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { height: 100%; }

.wcd-viewer-page {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--viewer-bg);
    color: var(--viewer-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Barre de contrôle ──────────────────────── */
.wcd-viewer-bar {
    flex-shrink: 0;
    height: var(--viewer-bar-h);
    background: var(--viewer-bar-bg);
    border-bottom: 1px solid var(--viewer-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    gap: 12px;
    z-index: 100;
}

.wcd-viewer-bar-left,
.wcd-viewer-bar-center,
.wcd-viewer-bar-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wcd-viewer-bar-left  { flex: 1; min-width: 0; }
.wcd-viewer-bar-center { flex-shrink: 0; }
.wcd-viewer-bar-right { flex: 1; justify-content: flex-end; min-width: 0; }

/* ── Boutons ────────────────────────────────── */
.wcd-viewer-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--viewer-border);
    border-radius: 6px;
    background: transparent;
    color: var(--viewer-text);
    font-size: 0.8rem;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    line-height: 1;
}

.wcd-viewer-btn:hover {
    border-color: var(--viewer-primary);
    color: #fff;
}

.wcd-viewer-btn-disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

.wcd-viewer-mode.active {
    background: var(--viewer-primary);
    border-color: var(--viewer-primary);
    color: #fff;
}

.wcd-viewer-cta {
    background: var(--viewer-accent);
    border-color: var(--viewer-accent);
    color: #fff;
    font-weight: 600;
    padding: 8px 20px;
    font-size: 0.9rem;
}
.wcd-viewer-cta:hover { opacity: 0.9; border-color: var(--viewer-accent); }

.wcd-viewer-phone {
    padding: 8px 16px;
    font-size: 0.9rem;
}

/* ── Titre template ─────────────────────────── */
.wcd-viewer-title {
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 8px;
}

.wcd-viewer-title-sep { color: var(--viewer-text-dim); margin: 0 4px; }
.wcd-viewer-title-cat { color: var(--viewer-text-dim); text-decoration: none; }
.wcd-viewer-title-cat:hover { color: var(--viewer-primary); }

/* ── Info hint (à côté des boutons vue) ────── */
.wcd-viewer-info-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    color: var(--viewer-text-dim);
    margin-left: 6px;
    white-space: nowrap;
}

.wcd-viewer-info-hint svg {
    opacity: 0.6;
    flex-shrink: 0;
}

/* ── Container iframe ───────────────────────── */
.wcd-viewer-frame {
    flex: 1;
    position: relative;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: var(--viewer-bg);
    transition: padding 0.3s ease;
}

.wcd-viewer-frame.mobile {
    padding: 16px;
    align-items: center;
}

.wcd-viewer-iframe {
    border: none;
    background: #fff;
    width: 100%;
    height: 100%;
    transition: width 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease;
}

.wcd-viewer-frame.mobile .wcd-viewer-iframe {
    width: var(--viewer-mobile-w);
    max-width: 100%;
    border-radius: 24px;
    box-shadow: 0 0 0 8px #1e1e32, 0 0 0 10px var(--viewer-border);
}

/* ── Loading state ──────────────────────────── */
.wcd-viewer-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--viewer-bg);
    z-index: 10;
    transition: opacity 0.3s;
}

.wcd-viewer-loader.hidden {
    opacity: 0;
    pointer-events: none;
}

.wcd-viewer-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--viewer-border);
    border-top-color: var(--viewer-primary);
    border-radius: 50%;
    animation: wcd-spin 0.8s linear infinite;
}

@keyframes wcd-spin {
    to { transform: rotate(360deg); }
}

.wcd-viewer-loader-text {
    margin-top: 16px;
    color: var(--viewer-text-dim);
    font-size: 0.85rem;
}

/* ── WP Admin bar fix ───────────────────────── */
.admin-bar .wcd-viewer-page { height: calc(100vh - 32px); margin-top: 32px; }

@media (max-width: 782px) {
    .admin-bar .wcd-viewer-page { height: calc(100vh - 46px); margin-top: 46px; }
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 768px) {
    .wcd-viewer-bar {
        height: auto;
        flex-wrap: wrap;
        padding: 8px 12px;
        gap: 6px;
    }

    .wcd-viewer-bar-left  { order: 1; }
    .wcd-viewer-bar-center { order: 3; }
    .wcd-viewer-bar-right { order: 2; }

    .wcd-viewer-btn { padding: 5px 8px; font-size: 0.75rem; }
    .wcd-viewer-btn-label { display: none; }
    .wcd-viewer-info-hint { display: none; }
    .wcd-viewer-title { font-size: 0.75rem; }

    .wcd-viewer-frame.mobile { padding: 8px; }
    .wcd-viewer-frame.mobile .wcd-viewer-iframe {
        border-radius: 16px;
        box-shadow: 0 0 0 4px #1e1e32;
    }
}