/* =====================================================================================================================
   Le lecteur des capsules du guide — les sous-titres « Verre » (chantier Documentation, lot L5, docs/chantier-documentation.md
   §13.13). Dessin A, retenu par l'utilisateur le 2026-11-06 (maquette docs/mockups/capsules-sous-titres.html) : une bulle de
   verre fumé teintée de la couleur principale de la marque, centrée en bas de l'image, qui épouse chaque phrase ; la phrase
   sortante monte et se floute, l'entrante monte et devient nette.

   Le script : capsule-player.js. La piste WebVTT reste celle du navigateur (son bouton allume et éteint les sous-titres), mais il
   ne la dessine pas : ses répliques sont transparentes, la bulle les remplace. En plein écran de la vidéo, ou sur un téléphone qui
   la passe dans son lecteur, la bulle ne peut pas suivre : le navigateur redessine alors la piste (« doc-capsule-native »).

   Partagée par le portail et par l'aperçu d'une capsule (Tools/docgen/capsules/render.mjs l'insère dans preview.html) : chaque
   variable du portail a son repli. Tailles en cqw : le cadre est un conteneur de requête, le texte suit sa largeur.
   ===================================================================================================================== */

.doc-capsule { margin: 1.75rem 0; }
.doc-capsule figcaption { margin-top: .6rem; font-size: 14px; color: var(--doc-ink-soft, #66777C); }
/* La durée, après le titre : « Créer un contact · 0:36 ». */
.doc-capsule-duration::before { content: "·"; margin-right: .25em; }
.doc-capsule-duration { font-variant-numeric: tabular-nums; }

.doc-capsule-frame {
    position: relative;
    container-type: inline-size;
    overflow: hidden;
    border-radius: var(--doc-radius, 10px);
    background: #000;
}
.doc-capsule-frame video { display: block; width: 100%; height: auto; }
.doc-capsule-frame:fullscreen { display: flex; align-items: center; border-radius: 0; }
.doc-capsule-frame:fullscreen video { width: 100%; height: 100%; object-fit: contain; }

/* La piste du navigateur, gardée mais transparente : la bulle la dessine. */
.doc-capsule-frame video::cue { color: transparent; background: transparent; text-shadow: none; }
/* … sauf quand la bulle ne peut pas suivre (plein écran de la vidéo) : le navigateur la redessine, aux mêmes couleurs. */
.doc-capsule-native video::cue {
    color: #FFFFFF;
    background: color-mix(in srgb, color-mix(in srgb, var(--docage-color1, #1D4755) 45%, black) 82%, transparent);
    font: 500 1em/1.32 var(--doc-font, 'Roboto', 'Segoe UI', Arial, sans-serif);
}
.doc-capsule-native .doc-capsule-captions { display: none; }

.doc-capsule-captions { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* La bulle et sa règle — la même boîte, invisible, que le script resserre sur la ligne la plus longue pour la mesurer. */
.doc-capsule-bubble,
.doc-capsule-ruler {
    position: absolute;
    left: 50%;
    bottom: 8%;
    box-sizing: border-box;
    width: max-content;
    max-width: 72%;
    padding: .5em 1.05em .56em;
    border: 1px solid transparent;
    border-radius: .72em;
    font: 500 clamp(13px, 2.05cqw, 40px)/1.32 var(--doc-font, 'Roboto', 'Segoe UI', Arial, sans-serif);
    letter-spacing: -.005em;
    color: #FFFFFF;
    text-align: center;
    text-wrap: balance;
    white-space: pre-line;
}
.doc-capsule-ruler { visibility: hidden; transform: translateX(-50%); }

.doc-capsule-bubble {
    overflow: hidden;
    background: color-mix(in srgb, color-mix(in srgb, var(--docage-color1, #1D4755) 45%, black) 70%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 .55em 1.6em rgba(0, 0, 0, .28);
    opacity: 0;
    transform: translate(-50%, .45em) scale(.97);
    transition: width .3s cubic-bezier(.2, .8, .2, 1), height .3s cubic-bezier(.2, .8, .2, 1),
                opacity .2s ease-out, transform .3s cubic-bezier(.2, .8, .2, 1), bottom .2s ease-out;
}
.doc-capsule-bubble.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
/* Les commandes de la vidéo couvrent le bas de l'image en pause et au survol : la bulle monte au-dessus d'elles. */
.doc-capsule-frame.is-paused .doc-capsule-bubble,
.doc-capsule-frame:hover .doc-capsule-bubble { bottom: max(8%, 62px); }

/* Une phrase : elle monte en devenant nette ; la sortante monte en se floutant. */
.doc-capsule-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    padding: 0 1.05em;
    text-wrap: balance;
    white-space: pre-line;
    opacity: 0;
    filter: blur(4px);
    transform: translateY(calc(-50% + .4em));
    transition: opacity .24s ease-out, filter .24s ease-out, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.doc-capsule-line.is-in { opacity: 1; filter: blur(0); transform: translateY(-50%); transition-delay: .06s; }
.doc-capsule-line.is-out { opacity: 0; filter: blur(3px); transform: translateY(calc(-50% - .35em)); transition-duration: .14s; transition-delay: 0s; }

/* Mouvement réduit : un fondu, rien ne glisse ni ne se floute, la bulle change de taille d'un coup. */
@media (prefers-reduced-motion: reduce) {
    .doc-capsule-bubble,
    .doc-capsule-bubble.is-on { transform: translate(-50%, 0); transition: opacity .12s linear; }
    .doc-capsule-line,
    .doc-capsule-line.is-in,
    .doc-capsule-line.is-out { filter: none; transform: translateY(-50%); transition: opacity .12s linear; }
}