/* ---------- 12/10 · La vidéo libre en trois étapes (public/video-libre.js, qui pose ce fichier dans la page) ----------
   Le fil d'étapes est celui de la vidéo cinématique (.ci-etapes, .ci-etape, .ci-num dans video-cinema.css), dans sa version à trois
   étapes (.ci-etapes-3, le texte à droite du numéro, au téléphone aussi). Le reste de la page (.vlb-*) est à la fin de video-categories.css.
   Textes à 14 px au moins, graisse 600 au plus, jamais de noir. */
.ci-etapes.vlb-fil { margin: 0 0 4px; }
.vlb-fil a.ci-etape { color: var(--bx); }

/* « Le format » et « La qualité » : côte à côte sur ordinateur (video-categories.css), empilés avec de l'air au téléphone. */
@media (max-width: 700px) { .vlb-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } }

/* Étape 1 : « Générer ma proposition », à droite, avec le coût approximatif de l'écriture en petit (12/10, Lisa). */
.vlb .actions.vlb-valider { flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; margin: 8px 0 6px; }
.vlb-cout { font-size: 14px; font-weight: 500; }
.vlb-perime { margin: 0; }

/* Étape 2 (12/10, Lisa) : un bloc par chose, au dessin des blocs de l'étape 1. */
.vlb-bloc-titre h2 { font-size: 22px; font-weight: 600; margin: 4px 0 0; }
.vlb-bloc > p { font-size: 15px; line-height: 1.5; margin: 0; }
.vlb-bloc > .vlb-aide { margin: 0 0 10px; }
.vlb-bloc .vlb-scenes li { font-size: 15px; line-height: 1.5; }
.vlb-bloc .vlb-rep:first-child { border-top: 0; padding-top: 0; }
.vlb-bloc .vlb-rep:last-child { padding-bottom: 0; }
.vlb-bloc .vlb-prompt-panneau { margin: 0; padding: 0; }
.vlb-bloc .vlb-prompt-panneau .vlb-aide:last-child { margin: 10px 0 0; }
.vlb-bloc .vlb-modifs { margin: 0; }
/* 12/10 soir (Lisa) : les blocs de l'étape 2 sont séparés du même espace qu'à l'étape 1 (le gap de .vlb, 14 px), au téléphone comme à l'ordinateur.
   Ils vivent dans #vlb-recap, qui n'est qu'un seul enfant de .vlb : c'est lui qui porte la grille. Le prix et les trois boutons n'ajoutent rien par-dessus. */
#vlb-recap:not(:empty) { display: grid; gap: 14px; min-width: 0; }
#vlb-recap > .vlb-prix, #vlb-recap > .vlb-regen { margin-top: 0; }

/* Le bas des étapes 2 et 3 : revenir d'une étape à gauche ; à droite, le seul bouton qui porte le prix. Toujours sur une ligne. */
.vlb-pied { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; margin: 4px 0 6px; }
.vlb-film #vlb-suivi:empty { display: none; }
.vlb-film .vlb-generer > .btn { width: auto; }
#vlb-galerie:empty, #vlb-recap:empty, #vlb-msg:empty, #vlb-perime:empty, #vlb-suivi:empty, #vlb-pied:empty { display: none; }
@media (max-width: 640px) {
  .vlb .actions.vlb-valider .droite { display: none; }
  .vlb .actions.vlb-valider .btn { width: 100%; justify-content: center; }
  .vlb-pied .droite { display: none; }
  .vlb-pied .btn.second { flex: none; padding: 12px 14px; font-size: 14.5px; }
  .vlb-pied .btn:not(.second) { flex: 1 1 auto; justify-content: center; text-align: center; padding: 13px 10px; font-size: 14px; gap: 6px; }
  .vlb-film .vlb-generer > .btn { width: 100%; justify-content: center; padding: 13px 10px; font-size: 15px; gap: 6px; }
}