/*
 * public/diaporama.css — le lecteur plein écran des diaporamas
 * (js/diaporama-player.js), dans Studio comme sur l'écran public.
 *
 * Fichier à part de style.css : la page de la télé (ecran.html) ne charge
 * que lui. Polices système seulement, aucune ressource extérieure.
 *
 * Lu aussi par le navigateur des télés, souvent un Chromium de plusieurs
 * années (Samsung d'avant 2023 : 85 et moins). Pas d'`inset` (Chromium 87),
 * ni de `:has()` (105) : le lecteur tombait à zéro pixel sur une page restée
 * blanche. Un `min()`, `max()` ou `clamp()` garde une valeur simple devant
 * lui, pour l'écran qui ne le comprend pas.
 */

.dia-player {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Au-dessus des modales de Studio (2147483000) et des widgets du hub. */
    z-index: 2147483600;
    background: #000;
    color: #fff;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    /* Les glissés sont à nous : ni défilement de la page dessous, ni zoom. */
    touch-action: none;
    overscroll-behavior: contain;
    outline: none;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.dia-scene,
.dia-calque {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.dia-calque {
    opacity: 0;
    overflow: hidden;
    background: #000;
    will-change: opacity, transform;
}

.dia-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: 50% 50%;
}

/* « Remplir l'écran » : la photo couvre tout, quitte à rogner les bords. */
.dia-player[data-cadrage="remplir"] .dia-img { object-fit: cover; }

/* ── La barre ── Discrète, elle s'efface après trois secondes sans geste ;
   le curseur avec elle. */
.dia-barre {
    position: absolute;
    left: 50%;
    bottom: 24px;
    bottom: max(24px, env(safe-area-inset-bottom));
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(20, 18, 16, .62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform: translate(-50%, 12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

.dia-player.dia-barre-visible .dia-barre {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.dia-player:not(.dia-barre-visible) { cursor: none; }

.dia-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

/* Deux règles : un sélecteur inconnu (`:focus-visible`, Chromium 86) ferait
   tomber la règle entière, survol compris. */
.dia-btn:hover { background: rgba(255, 255, 255, .16); }
.dia-btn:focus-visible { background: rgba(255, 255, 255, .16); outline: 2px solid #DDCBA4; outline-offset: 1px; }

.dia-btn svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dia-btn svg .dia-rempli { fill: currentColor; }

.dia-lecture { background: rgba(221, 203, 164, .22); }

.dia-compteur {
    min-width: 64px;
    padding: 0 8px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: rgba(255, 255, 255, .8);
}

.dia-compteur:empty { display: none; }

.dia-quitter { margin-left: 4px; }

/* ── Les messages ── */
.dia-message {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    max-width: 640px;
    max-width: min(640px, 86vw);
    transform: translate(-50%, -50%);
    font-size: 22px;
    font-size: clamp(16px, 2.2vw, 22px);
    line-height: 1.5;
    text-align: center;
    color: rgba(255, 255, 255, .9);
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.2s ease;
}

.dia-message.dia-message-visible { opacity: 1; }

/* Discret : sur un écran noir qui peut rester des heures, un texte vif
   marquerait la dalle. */
.dia-message.dia-message-discret {
    font-size: 18px;
    font-size: clamp(14px, 1.6vw, 18px);
    color: rgba(255, 255, 255, .45);
}

/* Sur téléphone : boutons un peu plus serrés, la barre tient sur 360 px. */
@media (max-width: 420px) {
    .dia-barre { gap: 2px; padding: 4px; }
    .dia-btn { width: 44px; height: 44px; }
    .dia-compteur { min-width: 52px; font-size: 13px; padding: 0 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .dia-barre,
    .dia-message { transition: none; }
}

/* La page de la télé : rien d'autre que le lecteur. La classe est posée sur
   <html> par ecran.html lui-même (pas de `:has()`, voir en tête). */
html.dia-page-ecran,
body.dia-page-ecran {
    margin: 0;
    height: 100%;
    background: #000;
    overflow: hidden;
}