/* ── Slidia Present — styles de la popup de présentation ──
   Page standalone. Les styles de rendu des slides (.sde-slide, .sde-ph, etc.)
   sont importés depuis slide_render.css et bundlés ici dans slidia_present_styles.
─────────────────────────────────────────────────────────────────────────── */
@import './slide_render.css';

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

body {
    font-family: system-ui, -apple-system, sans-serif;
    background: #111;
    color: #fff;
    height: 100vh;
    overflow: hidden;
}

.sdp-root {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* dynamic viewport sur mobile */
}

/* ── Topbar ── */
.sdp-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 16px;
    background: #1a1a1a;
    border-bottom: 1px solid #2a2a2a;
    flex-shrink: 0;
    gap: 12px;
}

.sdp-topbar-left,
.sdp-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.sdp-topbar-right { justify-content: flex-end; }

.sdp-topbar-center {
    text-align: center;
    flex-shrink: 0;
}

.sdp-clock {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .03em;
}

.sdp-sep { color: #444; font-size: 14px; }

.sdp-timer {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-primary, #6366F1);
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

.sdp-slide-counter {
    font-size: 14px;
    font-weight: 700;
    color: #aaa;
    letter-spacing: .04em;
}

.sdp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid #333;
    background: #222;
    color: #ccc;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}

.sdp-btn:hover {
    background: #2e2e2e;
    color: #fff;
}

.sdp-btn--icon { padding: 5px 9px; font-size: 15px; }

/* Téléchargement public : action rare, à côté d'un « Suivant » cliqué en rafale —
   d'où l'écart supplémentaire et le ton plus effacé, pour limiter le clic par erreur.
   Rendu <a> et non <button> : c'est une navigation vers un fichier. */
.sdp-dl {
    margin-left: 8px;
    text-decoration: none;
    color: #999;
}
.sdp-dl:hover { color: #fff; }

.sdp-btn--danger:hover {
    background: #3b1515;
    color: #f87171;
    border-color: #5a2020;
}

/* ── Mode Presenter ─────────────────────────────────────────────────────
   Layout 1:1 — slide courante (50%) | slide suivante + notes (50%)
   Pas de max-width : les colonnes occupent la totalité de la fenêtre,
   ce qui maximise la taille de la slide courante à tout format d'écran.
   Le plafond 1920×1080 sur les slides elles-mêmes évite les débordements.
   L'intervenant est souvent debout et loin de l'écran → notes ≥ 22px.
─────────────────────────────────────────────────────────────────────────── */
.sdp-presenter {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 14px;
    padding: 12px;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Colonne gauche — slide courante (50%) — centrée verticalement */
.sdp-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    justify-content: center; /* centre le wrap 16:9 dans la hauteur disponible */
}

/* Colonne droite — slide suivante + notes (50%) */
.sdp-right {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
    min-width: 0;
    min-height: 0;
}

/* ── Wrap de la slide courante ──
   Taille fixée au ratio du masque (16:9, 4:3…) : plus de barres noires internes.
   --slide-ratio est injecté en inline style depuis Twig (slideWidth / slideHeight en EMU).
   Fallback 16/9 si la variable n'est pas définie. */
.sdp-preview-wrap {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: var(--slide-ratio, 16 / 9);
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Slides — plafonnées à 1920×1080 (proportion 16:9).
   Sur les grands écrans les caps empêchent le débordement ; le browser centre
   la slide dans le wrap noir via align-items/justify-content:center. */
.sdp-preview-wrap .sde-slide,
.sdp-audience-wrap .sde-slide {
    width: 100%;
    height: auto;
    max-width: 1920px;
    max-height: 1080px;
}

/* ── Slide suivante ── */
.sdp-next {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: 6px;
}

.sdp-next-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #555;
}

.sdp-next-wrap {
    width: 100%;
    aspect-ratio: var(--slide-ratio, 16 / 9);
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .75;
}

.sdp-next-wrap .sde-slide {
    width: 100%;
    height: auto;
    max-width: 1920px;
    max-height: 1080px;
}

/* ── Notes de l'intervenant — lisibles de loin (debout) ── */
.sdp-notes {
    flex: 1;
    background: #1c1c1c;
    border: 1px solid #2a2a2a;
    border-radius: 8px;
    padding: 14px 18px;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}

.sdp-notes-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-primary, #6366F1);
    flex-shrink: 0;
}

.sdp-notes-text {
    font-size: 22px;
    color: #e5e7eb;
    line-height: 1.65;
    white-space: pre-wrap;
    flex: 1;
}

.sdp-notes-text:empty::before {
    content: 'Aucune note pour cette slide.';
    color: #555;
    font-style: italic;
}

/* ── Bande de miniatures ── */
.sdp-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #161616;
    border-top: 1px solid #252525;
    overflow-x: auto;
    flex-shrink: 0;
    height: 80px;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}

.sdp-strip-item {
    flex-shrink: 0;
    width: 106px;
    height: 60px;
    border-radius: 4px;
    border: 2px solid transparent;
    background-color: #222;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    position: relative;
    transition: border-color .15s, opacity .15s;
    opacity: .55;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sdp-strip-item:hover { opacity: .85; }

.sdp-strip-item--active {
    opacity: 1;
    border-color: var(--color-primary, #6366F1);
}

/* La slide miniature dans la bande */
.sdp-strip-item .sde-slide {
    pointer-events: none;
    transform-origin: top left;
    position: absolute;
    top: 0;
    left: 0;
}

.sdp-strip-num {
    position: absolute;
    bottom: 3px;
    right: 4px;
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, .9);
    background: rgba(0, 0, 0, .6);
    border-radius: 3px;
    padding: 1px 5px;
    z-index: 1;
}

/* ── Mode Audience (après swap) ── */
.sdp-audience {
    flex: 1;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sdp-audience-wrap {
    width: 100%;
    height: 100%;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ── Responsive presenter — empilement vertical sous 820px ──────────────────
   En dessous de 820px, les deux colonnes seraient trop étroites pour être lisibles.
   On bascule en layout colonne unique avec scroll vertical dans le presenter.
   Les slides gardent leur ratio via aspect-ratio: var(--slide-ratio).
   Les notes prennent une hauteur fixe max pour rester visibles sans scroller trop.
─────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
    .sdp-presenter {
        flex-direction: column;
        overflow-y: auto;       /* scroll vertical sur la zone presenter */
        align-items: stretch;
        gap: 10px;
    }

    /* Colonnes passent en hauteur naturelle (contenu détermine la taille) */
    .sdp-main {
        flex: 0 0 auto;
        justify-content: flex-start;
    }

    .sdp-right {
        flex: 0 0 auto;
        gap: 10px;
    }

    /* Notes : hauteur limitée pour ne pas écraser la slide suivante */
    .sdp-notes {
        flex: 0 0 auto;
        min-height: 120px;
        max-height: 30vh;
    }
}

/* ── Badge connexion perdue ── */
.sdp-disconnected {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    background: #7f1d1d;
    color: #fca5a5;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid #991b1b;
    z-index: 300;
}

/* ── Mode présentation : read-only — masquer tous les indicateurs éditeur ──
   La popup est purement visuelle : pas de hover, pas de bordures dashed,
   pas de labels "IMAGE"/"TEXTE", pas de zones masque.
   Les règles de slide_render.css (partagées avec l'éditeur) sont neutralisées ici.
─────────────────────────────────────────────────────────────────────────── */
.sde-ph {
    cursor: default;
    pointer-events: none;
}
.sde-ph:hover {
    outline: none;
}
.sde-ph:empty:not(.sde-ph--has-image),
.sde-ph--empty {
    border: none;
    background: none;
}
.sde-ph:empty:not(.sde-ph--has-image)::before,
.sde-ph--empty::before {
    display: none;
}
.sde-mask-zone {
    display: none !important;
}

.hidden { display: none !important; }