/* ---------- 12/10 · « Je remplace… » (public/video.js › ouvrirRemplacer) ----------
   Une page en QUATRE étapes (12/10 soir, Lisa) : la vidéo, ce qui change, les réglages, la vidéo finale. 13/10 : les quatre passent par Seedance (modèle, qualité, IA qui rédige, prompt relisible). Au dessin de la vidéo cinématique : .ci-page,
   .ci-etapes (quatre cases, deux par ligne au téléphone), .ci-onglets, .ci-minis, .depot viennent de video-cinema.css et d'app.css. Ici, seulement ce qui
   est propre à cette page, sous .rp-page. Textes à 14 px au moins, graisse 600 au plus, jamais de noir (texte --bx). */
.rp-page { max-width: 860px; }
.rp-page .rp-bloc h2 { margin: 0 0 4px; }
.rp-page .rp-bloc > h2 + .rp-question, .rp-page .rp-bloc > h2 + .ph-titre-aide { margin-top: 18px; }
.rp-question { display: block; font-size: 15.5px; font-weight: 600; margin: 26px 0 10px; }
.rp-question .ci-opt { font-weight: 400; }
.rp-page .ci-onglets + .ci-note { margin: 10px 0 0; }
.rp-page .ph-depot-bloc { margin: 0; }
.rp-page .ph-combine { margin: 0 0 12px; }
.rp-page .ci-zone { min-height: 84px; }
.rp-page .ci-actions { margin-top: 22px; }
.rp-page #rp-msg:empty { display: none; }

/* Étape 1 : mes vidéos, ou le fichier choisi */
.rp-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.rp-video { padding: 0; border: 0; background: none; color: var(--bx); font: inherit; cursor: pointer; text-align: left; min-width: 0; }
.rp-video-img { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: var(--surface); border: 2px solid rgba(23,70,63,.12); transition: border-color .2s, box-shadow .2s; }
.rp-video-img video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.rp-video:hover .rp-video-img { border-color: rgba(31,91,82,.45); }
.rp-video.on .rp-video-img { border-color: var(--bx2); box-shadow: 0 0 0 2px rgba(31,91,82,.18); }
.rp-video.on .ci-mini-coche { display: grid; }
.rp-video:focus-visible .rp-video-img { outline: 2px solid var(--or); outline-offset: 2px; }
.rp-video-nom { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-choisie { display: flex; align-items: center; gap: 18px; min-width: 0; }
.rp-choisie video { flex: none; width: 150px; max-height: 266px; border-radius: 14px; background: var(--surface); display: block; }
.rp-choisie-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.rp-choisie-txt b { font-size: 15.5px; font-weight: 600; overflow-wrap: anywhere; }
.rp-choisie-txt span { color: var(--encre2); font-size: 14.5px; }
.rp-autre { margin-top: 10px; cursor: pointer; }
.rp-page .depot.survol { border-color: var(--bx2); background: var(--ok-fond); }

/* ---------- 13/10 (Lisa) · le pied d'étape, commun à « Je remplace… » (.rp-page) et « Reproduire une vidéo » (.rv-page) ----------
   Les boutons « étape précédente / étape suivante » vivent EN DEHORS des encadrés blancs (.ci-pied-etapes est un frère de la .ci-bloc, jamais dedans).
   Ordinateur : côte à côte en bas, le retour à gauche, le bouton qui avance à droite. Téléphone : l'un sous l'autre, pleine largeur, celui qui avance en haut.
   Posé une seule fois ici (remplacer.css est relié dans index.html) ; la même règle vaudrait dans app.css pour la cinématique (.ci-pied). */
.ci-pied-etapes { margin: 4px 0 26px; }
.ci-pied-etapes .btn { white-space: nowrap; }
.ci-pied-etapes .btn:not(.second) { min-width: 0; }
@media (max-width: 760px) {
  .ci-pied-etapes { flex-direction: column-reverse; align-items: stretch; gap: 10px; margin-top: 16px; }
  .ci-pied-etapes .btn, .ci-pied-etapes a.btn { flex: none; width: 100%; justify-content: center; text-align: center; white-space: normal; padding: 13px 14px; }
  .ci-pied-etapes .droite { display: none; }
}

/* Étape 2 : les trois pastilles Pinterest · Importer · Décrire (la tenue d'un personnage, la nouvelle tenue, le nouveau décor) */
.rp-voies { margin-top: 12px; }
.rp-voies .ph-pin { margin-top: 0; }
.rp-voies .ci-zone { min-height: 72px; }
.rp-voies .ph-combine { margin: 0 0 12px; }
.rp-page .ph-pin-msg:empty { display: none; }

/* 13/10 (Lisa) · le choix de la tenue (choixTenue, video.js), commun à « Je remplace un personnage » et à « Reproduire une vidéo » : deux options nettes, l'une OU l'autre.
   Deux cases côte à côte sur ordinateur, l'une sous l'autre au téléphone ; un rond plein dit laquelle est choisie. Elles ne ressemblent pas aux pastilles
   Pinterest · Importer · Décrire, qui n'apparaissent que sous « Remplacer la tenue ». */
.tn-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tn-opt { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 56px; padding: 12px 16px; border: 1px solid rgba(27,33,31,.18); border-radius: 14px; background: #fff; color: var(--bx); font: inherit; font-size: 15.5px; font-weight: 500; line-height: 1.3; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.tn-opt:hover { border-color: rgba(31,91,82,.45); }
.tn-opt:focus-visible { outline: 2px solid var(--bx2); outline-offset: 2px; }
.tn-opt.on { border-color: var(--bx2); background: var(--doux); box-shadow: 0 0 0 1px var(--bx2) inset; font-weight: 600; }
.tn-rond { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(27,33,31,.28); background: #fff; }
.tn-opt.on .tn-rond { border-color: var(--bx2); background: radial-gradient(circle, var(--bx2) 0 5px, #fff 6px); }
.rp-page .rp-question.rp-sous-question { margin-top: 18px; }
@media (max-width: 760px) { .tn-choix { grid-template-columns: minmax(0, 1fr); } }

/* Étape 3 (13/10, Lisa) : un encadré par sujet, comme l'étape Réglages de « Reproduire » : le modèle, la qualité, la durée (celle de la vidéo), les indications, l'IA qui rédige */
.rp-page .rp-reglage h2 { margin: 0 0 12px; }
.rp-page .rp-reglage .vlb-tete h2 { font-size: 22px; margin: 0; }
.rp-page .rp-reglage .vlb-tete label { font: inherit; color: inherit; margin: 0; }
.rp-page .rp-reglage .cia-zone { margin-top: 0; }
.rp-duree { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.rp-duree b { font-size: 22px; font-weight: 600; }
.rp-duree span { font-size: 15px; color: var(--encre2); }
.rp-note { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--ok-fond); font-size: 14.5px; line-height: 1.45; color: var(--bx); }
.rp-page .vlb-aide.rp-sous { margin: 10px 0 0; }
.rp-page .cia-zone { margin-top: 8px; }
.rp-page #rp-ecrire-zone .vlb-valider { margin-top: 14px; }
.rp-page #rp-recap .vlb-recap { margin: 0; box-shadow: none; }
.rp-page #rp-recap .vlb-regen { margin-top: 0; }
.rp-page .vlb-modifs .ci-label { margin-top: 4px; }
.rp-page .vlb-rep dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.rp-page .vlb-rep dd .vlb-vignettes img, .rp-page .vlb-rep dd .vlb-vignettes video { width: 48px; height: 64px; object-fit: cover; border-radius: 8px; background: var(--surface); display: block; }
.rp-page .vlb-rep dd small { margin-top: 0; }
/* Sous les encadrés de l'étape 3 : sans clé Higgsfield, le lien pour la brancher ; le mot quand une vidéo est déjà prête */
.rp-page #rp-pied-infos { margin: 0 0 16px; }
.rp-page #rp-pied-infos .ci-avert { margin: 0 0 8px; }
.rp-page #rp-pied-infos .ci-note { margin: 0; }
.rp-page #rp-pied-infos:empty, .rp-page #rp-pied-infos:not(:has(*)) { display: none; }

.rp-page .rp-bloc .ci-zone + .rp-question { margin-top: 22px; }
.rp-recap { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 22px; margin-top: 16px; }
.rp-question + .rp-recap { margin-top: 0; }
/* Le rappel (ancien dessin, gardé pour l'étape 4) et l'étape 4 : l'attente, le résultat, une autre version */
.rp-recap-nom { font-size: 15.5px; font-weight: 600; margin: 0 0 10px; }
.rp-recap-video { width: 100%; max-height: 340px; border-radius: 14px; background: var(--surface); display: block; }
.rp-recap-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-recap-photos img { width: 76px; height: 96px; object-fit: cover; border-radius: 12px; background: var(--surface); display: block; }
.rp-phrase { margin: 20px 0 0; font-size: 16px; }
.rp-indic { margin: 8px 0 0; }
.rp-page #rp-action { margin-top: 20px; }
.rp-page #rp-action .ci-attente { padding: 6px 0 2px; }
.rp-page #rp-action .rp-generer { margin-top: 0; }
.rp-page #rp-action .ci-erreur { margin: 0 0 14px; }
.rp-resultat video { display: block; width: 100%; max-width: 320px; border-radius: 16px; background: var(--surface); }
.rp-ailleurs { margin-top: 4px; }
.rp-ailleurs-tete { border: 0; background: none; padding: 6px 0; color: var(--encre2); font: inherit; font-size: 14.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rp-ailleurs-tete:hover { color: var(--bx2); }
.rp-ailleurs #bloc-ranger { margin-top: 8px; max-width: 520px; }
.rp-ailleurs #rg-url { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; color: var(--bx); background: #fff; border: 1px solid rgba(27,33,31,.18); border-radius: 12px; padding: 9px 12px; }

@media (max-width: 760px) {
  .rp-recap { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .rp-recap-video { max-width: 190px; }
  .rp-choisie { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rp-page .ci-actions .btn { flex: 1 1 auto; justify-content: center; }
  .rp-videos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}

/* 13/10 (Lisa) : le message posé juste au-dessus du bouton « Générer ma vidéo » (étape 3, hors de la carte) ou de « Relancer » (étape 4) : une erreur, le motif d'un rendu raté */
.rp-msg-pied:empty { display: none; }
.rp-msg-pied { margin: 0 0 12px; }
.rp-page .rp-bloc .rp-msg-pied { margin: 16px 0 0; }
.rp-msg-pied .erreur { margin: 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.rp-page .rp-lancer[disabled] { opacity: .75; cursor: progress; }
/* Au téléphone, le message se glisse entre « ← retour » et le bouton qui génère : il reste collé au bouton (.ci-pied-zone entoure le message et le pied d'étape, ici et dans « Reproduire »). */
@media (max-width: 760px) {
  .ci-pied-zone { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 16px 0 26px; }
  .ci-pied-zone > .ci-pied-etapes { display: contents; }
  .ci-pied-zone .ci-pied-etapes > .btn.second { order: 1; }
  .ci-pied-zone > .rp-msg-pied, .ci-pied-zone > .rv-msg-pied { order: 2; margin: 0; }
  .ci-pied-zone .ci-pied-etapes > .btn:not(.second) { order: 3; }
}