/* « Reproduire une vidéo » (public/trend.js, 12/10 ; quatre étapes depuis le 13/10) : la charte de la vidéo cinématique (.ci-page, .ci-etapes, .ci-bloc) et
   les blocs de la vidéo libre (.vlb-recap, .vlb-prix, .ph-ref, .ph-res). Ici, seulement ce qui est propre à cet écran, sous .rv-page. */
/* Le fil à quatre étapes est .ci-etapes (video-cinema.css) : quatre cases sur ordinateur, deux par ligne au téléphone, exactement celui des « Je remplace… ». */
.rv-page { max-width: 860px; } /* la même largeur que les « Je remplace… » (.rp-page) */
.rv-page .ci-bloc h2 { margin-bottom: 12px; }
.rv-page .ci-bloc h2 + .ci-aide { margin-top: -4px; }
.rv-page .vlb-tete h2 { font-size: 22px; margin-bottom: 0; }
.rv-page .vlb-recap { margin-bottom: 18px; }
.rv-page .depot.survol, .rv-source.survol { border-color: var(--bx2); background: var(--doux); }

/* Étape 1 · la vidéo */
.rv-zone { min-height: 132px; padding: 18px; text-align: center; font-size: 16px; cursor: pointer; }
.rv-source { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--ligne); border-radius: 16px; background: #fff; min-width: 0; }
.rv-source img { flex: none; width: 54px; height: 72px; object-fit: cover; border-radius: 10px; background: var(--surface); }
.rv-source-txt { display: grid; gap: 2px; min-width: 0; flex: 1 1 0; }
.rv-source-txt b { font-size: 15.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-source-txt span { font-size: 14.5px; color: var(--encre2); }
.rv-changer { flex: none; cursor: pointer; }
.rv-lecture { padding: 22px 18px; border: 1px solid var(--ligne); border-radius: 16px; background: #fff; font-size: 15px; }
.rv-lecture .att-barre { max-width: none; margin-bottom: 0; }
.rv-discret { font-size: 14px; color: var(--encre2); margin: 10px 0 0; }
/* « Comment récupérer la vidéo ? » est le <details> .ci-recuperer (video-cinema.css, 12/10), partagé avec « Je remplace… ». */

/* Étape 2 · ton personnage : « Ou importe tes photos » */
.rv-import { margin-top: 18px; }
.rv-import .ci-label { margin-top: 0; }
.rv-import .ph-combine { margin: 0 0 12px; }

/* Étape 2 · la tenue : deux choix nets (.tn-choix, remplacer.css), puis, sous « Remplacer la tenue », trois pastilles Pinterest · Importer · Décrire (13/10, Lisa). Aucune image générée : la photo ou la description part telle quelle. */
.rv-voies { margin-top: 12px; }
.rv-voies .ph-pin { margin-top: 0; }
.rv-voies .ci-zone { min-height: 72px; }
.rv-voies .ph-combine { margin: 0 0 12px; }
.rv-voies .ph-depot-bloc { margin: 0; }
.rv-page .ph-pin-msg:empty { display: none; }
.rv-tenue-form { margin-top: 18px; }
.rv-tenue-form .ci-label { margin-top: 0; }
/* Le pied d'étape (.ci-pied-etapes) est posé une fois dans remplacer.css, pour les deux parcours. */

/* Ce qui vient de l'ancien parcours */
.rv-anciens { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.rv-ancien { padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--surface); cursor: zoom-in; aspect-ratio: 3/4; }
.rv-ancien img, .rv-ancien video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* Étape 3 · les réglages */
.rv-duree { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.rv-duree b { font-size: 22px; font-weight: 600; }
.rv-duree span { font-size: 15px; color: var(--encre2); }
.rv-note { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--ok-fond); font-size: 14.5px; line-height: 1.45; color: var(--bx); }
.rv-page .rv-sous { margin: 10px 0 0; }
.rv-page .rv-h2-suite { margin-top: 24px; }
/* 13/10 (Lisa) : le message posé juste au-dessus du bouton « Générer ma vidéo » (une erreur, le motif d'un rendu raté), hors des encadrés */
.rv-msg-pied:empty { display: none; }
.rv-msg-pied { margin: 0 0 12px; }
.rv-msg-pied .erreur, .rv-msg-pied .pret { margin: 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.rv-msg-pied .vlb-aide { margin: 0; }
.rv-page .rv-generer[disabled] { opacity: .75; cursor: progress; }

/* Étape 4 · la vidéo finale */
.rv-galerie:not(:empty) { margin-bottom: 18px; }
.rv-page .rv-h2-galerie { margin: 6px 0 6px; }

@media (max-width: 760px) {
  .rv-source { flex-wrap: wrap; }
  .rv-changer { width: 100%; justify-content: center; text-align: center; }
}