/*
 * Source visuelle commune à l'aperçu Spliteur et au rendu Remotion.
 * Les dimensions sont pilotées par des variables afin de rester identiques
 * en 360p (studio), 720p et 1080p.
 */
.focus-orange-caption {
    position: absolute;
    z-index: 4;
    top: var(--focus-orange-position, 50%);
    left: 50%;
    display: flex;
    width: min(var(--focus-orange-max-width, 78%), calc(100% - (2 * var(--focus-orange-margin, 8%))));
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--focus-orange-primary, #fff);
    font-family: "Montserrat", sans-serif;
    font-size: var(--focus-orange-font-size, 28px);
    font-style: normal;
    font-weight: 800;
    font-kerning: normal;
    font-optical-sizing: auto;
    letter-spacing: var(--focus-orange-letter-spacing, 0);
    line-height: 1.04;
    text-align: center;
    text-rendering: geometricprecision;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
    transform-origin: center;
    -webkit-font-smoothing: antialiased;
}

.focus-orange-lines {
    display: flex;
    max-width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0.06em;
}

.focus-orange-line {
    display: flex;
    width: max-content;
    max-width: 100%;
    align-items: baseline;
    justify-content: center;
    gap: 0.12em;
    white-space: nowrap;
}

.focus-orange-word {
    display: inline-block;
    box-sizing: border-box;
    padding: 0.055em 0.105em 0.075em;
    border-radius: 0.055em;
    background: transparent;
    color: var(--focus-orange-primary, #fff);
    line-height: 1;
    text-shadow: 0 0.035em 0.035em rgb(0 0 0 / 55%);
    -webkit-text-stroke: var(--focus-orange-outline-width, 0.045em) var(--focus-orange-outline, #000);
    paint-order: stroke fill;
    transform-origin: center bottom;
}

.focus-orange-word.is-active {
    background: var(--remotion-caption-active, var(--focus-orange-active, #ff5a14));
    box-shadow: 0 0.045em 0 rgb(0 0 0 / 72%);
    color: var(--focus-orange-primary, #fff);
    text-shadow: none;
}

.focus-orange-emoji {
    display: block;
    width: var(--focus-orange-emoji-size, 0.92em);
    height: var(--focus-orange-emoji-size, 0.92em);
    flex: none;
    margin: 0 0 0.06em;
    object-fit: contain;
    filter: drop-shadow(0 0.045em 0.045em rgb(0 0 0 / 62%));
}

/* Le studio réutilise exactement les règles ci-dessus sur son calque HTML. */
.word-live-preview.is-remotion-focus-orange {
    top: var(--subtitle-screen-position, var(--subtitle-position, 50%));
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(var(--subtitle-max-width, 78%), calc(100% - (2 * var(--subtitle-margin-percent, 8%))));
    max-width: none;
    gap: 0;
    color: var(--subtitle-primary, #fff);
    font-family: "Montserrat", sans-serif;
    font-size: var(--subtitle-font-size, 28px);
    font-weight: 800;
    letter-spacing: var(--subtitle-letter-spacing, 0);
    line-height: 1.04;
    transform: translate(-50%, -50%);
}

.word-live-preview.is-remotion-focus-orange .subtitle-preview-line {
    display: flex;
    width: max-content;
    max-width: 100%;
    align-items: baseline;
    justify-content: center;
    gap: 0.12em;
    white-space: nowrap;
}

.word-live-preview.is-remotion-focus-orange .focus-orange-word {
    -webkit-text-stroke: var(--subtitle-outline-width, 0.045em) var(--subtitle-outline-color, #000);
}

.word-live-preview.is-remotion-focus-orange .focus-orange-word.is-active {
    padding: 0.055em 0.105em 0.075em;
    border-radius: 0.055em;
    background: var(--subtitle-active, #ff5a14);
    box-shadow: 0 0.045em 0 rgb(0 0 0 / 72%);
    line-height: 1;
}

.word-live-preview.is-remotion-focus-orange .focus-orange-emoji {
    width: var(--focus-orange-emoji-size, 0.92em);
    height: var(--focus-orange-emoji-size, 0.92em);
    margin-bottom: 0.06em;
}

/* Moteur commun des styles cinétiques rendus avec Remotion. */
.remotion-caption {
    top: var(--focus-orange-position, 50%);
    color: var(--focus-orange-primary, #fff);
    font-family: var(--remotion-caption-font, "Montserrat"), sans-serif;
    font-style: var(--remotion-caption-style, normal);
    font-weight: var(--remotion-caption-weight, 800);
    text-transform: var(--remotion-caption-transform, uppercase);
    transform: translate(-50%, -50%) scale(var(--remotion-caption-scale, 1));
}

.remotion-caption-word.is-active {
    color: var(--remotion-caption-active, var(--focus-orange-active, #ff5a14));
}

/* Focus Orange colore le cartouche, pas le texte. Cette surcharge commune au
   studio et au rendu garde le libellé blanc et lisible sur l'accent choisi. */
.remotion-caption--focus_orange .remotion-caption-word.is-active,
.word-live-preview.is-remotion-focus-orange .remotion-caption-word.is-active {
    background: var(--remotion-caption-active, var(--focus-orange-active, var(--subtitle-active, #ff5a14)));
    color: var(--focus-orange-primary, var(--subtitle-primary, #fff));
}

.remotion-caption--impact_duo .remotion-caption-word,
.word-live-preview.is-remotion-impact-duo .remotion-caption-word {
    padding: 0;
    background: transparent;
    color: var(--focus-orange-primary, var(--subtitle-primary, #fff));
    line-height: 0.98;
    text-shadow: 0 0.045em 0.045em rgb(0 0 0 / 72%);
    -webkit-text-stroke: var(--focus-orange-outline-width, var(--subtitle-outline-width, 0.055em)) var(--focus-orange-outline, var(--subtitle-outline-color, #000));
}

.remotion-caption--impact_duo .remotion-caption-word.is-active,
.word-live-preview.is-remotion-impact-duo .remotion-caption-word.is-active {
    background: transparent;
    box-shadow: none;
    color: var(--remotion-caption-active, var(--subtitle-active, #ff3030));
    text-shadow: 0 0.045em 0.045em rgb(0 0 0 / 72%);
}

.remotion-caption--clean_signal,
.word-live-preview.is-remotion-clean-signal {
    line-height: 1.12;
    text-transform: none;
}

.remotion-caption--clean_signal .remotion-caption-word,
.word-live-preview.is-remotion-clean-signal .remotion-caption-word {
    padding: 0;
    background: transparent;
    color: var(--remotion-caption-active, var(--subtitle-active, #31b8c5));
    text-shadow: 0 0.035em 0.06em rgb(0 0 0 / 55%);
    -webkit-text-stroke: 0 transparent;
}

.remotion-caption--punch_emoji .remotion-caption-word,
.word-live-preview.is-remotion-punch-emoji .remotion-caption-word {
    padding: 0;
    background: transparent;
    color: var(--remotion-caption-active, var(--subtitle-active, #ff3030));
    font-style: italic;
    line-height: 1;
    text-shadow: 0.035em 0.045em 0 rgb(0 0 0 / 78%);
    -webkit-text-stroke: var(--focus-orange-outline-width, var(--subtitle-outline-width, 0.065em)) var(--focus-orange-outline, var(--subtitle-outline-color, #000));
}

.remotion-caption--punch_emoji .remotion-caption-word.is-active,
.word-live-preview.is-remotion-punch-emoji .remotion-caption-word.is-active {
    background: transparent;
    box-shadow: none;
}

.word-live-preview.is-remotion-subtitle {
    top: var(--subtitle-screen-position, var(--subtitle-position, 50%));
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(var(--subtitle-max-width, 84%), calc(100% - (2 * var(--subtitle-margin-percent, 7%))));
    max-width: none;
    gap: 0;
    font-family: var(--subtitle-font-family, "Montserrat"), sans-serif;
    font-size: var(--subtitle-font-size, 28px);
    line-height: 1.04;
    transform: translate(-50%, -50%);
}

.word-live-preview.is-remotion-subtitle .subtitle-preview-line {
    display: flex;
    width: max-content;
    max-width: 100%;
    align-items: baseline;
    justify-content: center;
    gap: 0.12em;
    white-space: nowrap;
}