/* « Je transforme une vidéo » (30/10/2026, Lisa) : ce qui est propre à ce parcours, sous .tf-page. Le cadre (étapes .ci-etapes, blocs .ci-bloc,
   cartes vertes .ci-rc-vert, emplacements .ci-slot, minis .ci-mini, onglets .ci-onglets) vient de video-cinema.css ; la vidéo choisie (.rp-choisie)
   et le pied (.ci-pied-etapes) de remplacer.css. Textes à 14 px au moins, graisse 600 au plus, jamais de noir. */
.tf-page { max-width: 1040px; }
.tf-titre { max-width: 520px; margin-top: 10px; }
.tf-manque { color: #8A3B2F; font-size: 14.5px; }
/* 03/11 (Lisa) · le petit « i » à côté d'un titre (le bouton .ci-i de video-cinema.css) : la bulle s'ouvre sous le titre, PAR-DESSUS la page
   (rien ne bouge au survol), au survol de la souris comme au clic ou au toucher. */
.tf-titre-i { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tf-titre-i > h2, .tf-titre-i > h3 { margin: 0; }
.tf-info { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: max-content; max-width: min(520px, calc(100vw - 72px)); margin: 0; border: 1px solid rgba(201,162,74,.45); box-shadow: 0 10px 28px rgba(23,70,63,.16); color: var(--bx); font-size: 14.5px; font-weight: 400; }
.tf-info[hidden] { display: none; }
/* La confirmation intégrée à la page (jamais confirm() natif) : un encadré crème, le texte, deux boutons. */
.tf-confirm { margin: 0 0 14px; padding: 14px 16px; border-radius: 14px; background: var(--ok-fond); border: 1px solid rgba(201,162,74,.45); color: var(--bx); }
.tf-confirm p { margin: 0; font-size: 15px; line-height: 1.5; }
.tf-confirm .ci-actions { margin-top: 10px; }
#tf-confirm-recommencer:empty { display: none; }

/* Étape 2 · la banque : un encadré fermé par type, une pilule à cocher devant le titre (cochée : l'encadré s'ouvre) ; les références déjà là, avec
   leur croix ; « Choisir un… » dessous. */
/* 04/11 (Tamya) : la pilule passe AVANT le titre, à gauche (elles s'alignent en colonne d'un encadré à l'autre), et bien plus petite. */
.tf-type-tete { display: flex; align-items: center; gap: 12px; }
.tf-type-tete h2 { margin: 0; cursor: pointer; }
.tf-type.ferme { padding-top: 20px; padding-bottom: 20px; }
.tf-type-corps { margin-top: 18px; }
.tf-type-corps[hidden] { display: none; }
.tf-pilule { position: relative; flex: none; width: 36px; height: 20px; padding: 0; border-radius: 999px; border: 1px solid rgba(23,70,63,.28); background: var(--surface); cursor: pointer; transition: background .2s, border-color .2s; }
.tf-pilule::after { content: ''; position: absolute; inset: -8px; }
.tf-pilule-rond { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; color: var(--bx2); box-shadow: 0 1px 2px rgba(27,33,31,.25); display: grid; place-items: center; transition: transform .2s; }
.tf-pilule-rond .ci-coche { width: 10px; height: 10px; opacity: 0; transition: opacity .2s; }
.tf-pilule:hover { border-color: var(--bx2); }
.tf-pilule.on { background: var(--bx2); border-color: var(--bx2); }
.tf-pilule.on .tf-pilule-rond { transform: translateX(16px); }
.tf-pilule.on .tf-pilule-rond .ci-coche { opacity: 1; }
.tf-pilule:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.tf-refs { margin-bottom: 14px; }
.tf-ref { position: relative; }
.tf-ref-x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff; color: var(--bx); font-size: 14px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(27,33,31,.18); }
.tf-ref-x:hover { background: var(--or2); }
.tf-ref-x:focus-visible { outline: 2px solid var(--or); outline-offset: 1px; }
.tf-ajout-titre { margin: 4px 0 10px; }
.tf-type .ci-facon-corps { margin-top: 12px; }
.tf-banque-msg:empty { display: none; }
.tf-banque-msg { margin-top: 10px; }

/* Étape 3 · le lecteur, les commandes, la frise et ses repères. */
.tf-lecteur { max-width: 640px; border-radius: 14px; overflow: hidden; background: #0F2320; }
.tf-lecteur.vertical { max-width: 320px; }
.tf-lecteur video { display: block; width: 100%; max-height: 70vh; background: #0F2320; }
.tf-commandes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.tf-temps { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; color: var(--bx); }
.tf-frise { position: relative; height: 56px; margin: 18px 0 8px; border-radius: 12px; background: var(--surface); overflow: visible; cursor: pointer; user-select: none; touch-action: none; }
.tf-portion { position: absolute; top: 10px; height: 36px; border-radius: 8px; background: rgba(31,91,82,.22); border: 1px solid rgba(31,91,82,.3); display: grid; place-items: center; color: var(--bx); font-size: 14px; font-weight: 600; pointer-events: none; box-sizing: border-box; }
.tf-portion.origine { background: rgba(94,108,103,.12); border-color: rgba(94,108,103,.25); color: var(--encre2); }
.tf-tete { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--or); pointer-events: none; }
.tf-repere { position: absolute; top: -6px; bottom: -6px; width: 44px; margin-left: -22px; padding: 0; border: 0; background: none; cursor: ew-resize; touch-action: none; }
.tf-repere::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--bx2); box-shadow: 0 0 0 2px #fff; }
.tf-repere.glisse::before, .tf-repere:hover::before { background: var(--or); }
.tf-repere:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; border-radius: 8px; }
.tf-repere-t { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); font-size: 14px; font-weight: 500; color: var(--bx2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tf-reperes-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.tf-repere-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--ligne); font-size: 14px; color: var(--bx); font-variant-numeric: tabular-nums; }
.tf-chip-x { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--surface); color: var(--bx); font-size: 14px; cursor: pointer; display: grid; place-items: center; }
.tf-chip-x:hover { background: var(--or2); }
/* Les états : un encadré blanc « Tes états » (03/11), une carte blanche par état dedans (même « Ma vidéo d'origine »), le numéro doré, les cases à
   cocher, le choix de la référence, le bandeau « Reste » avec ses « Retirer », la ligne « Retiré » avec ses « Annuler ». */
.tf-etats-liste { display: grid; gap: 14px; }
.tf-etat { padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid rgba(27,33,31,.12); min-width: 0; }
.tf-etat-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tf-etat-tete b { display: block; font-size: 17px; font-weight: 600; }
.tf-etat-tete .ci-num { width: 32px; height: 32px; background: var(--or); color: var(--bx); font-size: 15px; }
.tf-cases { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.tf-case { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(23,70,63,.22); background: #fff; color: var(--bx); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.tf-case:hover { border-color: var(--bx2); }
.tf-case.on { background: var(--bx2); border-color: var(--bx2); color: #fff; }
.tf-case .ci-coche { width: 14px; height: 14px; }
.tf-case:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.tf-choix-ref { margin-top: 14px; }
.tf-choix-ref > b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.tf-reste { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--ok-fond); font-size: 15px; line-height: 1.5; color: var(--bx); }
.tf-reste:empty { display: none; }
.tf-reste b { font-weight: 600; }
.tf-reste small { display: block; font-size: 14px; color: var(--encre2); }
.tf-reste-ligne { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; }
.tf-reste-ligne + .tf-reste-ligne, .tf-reste small + .tf-reste-ligne { margin-top: 6px; }
.tf-reste-el { white-space: nowrap; }
.tf-reste-btn { min-height: 32px; padding: 4px 2px; border: 0; background: none; color: var(--bx2); font: inherit; font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tf-reste-btn:hover { color: var(--bx3); text-decoration-thickness: 2px; }
.tf-reste-btn:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; border-radius: 4px; }
.tf-retour { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--fond); border: 1px solid var(--ligne); color: var(--bx); font-size: 15px; line-height: 1.5; }
.tf-duree-msg { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: #F5E9DD; color: var(--bx); font-size: 14.5px; line-height: 1.5; }
.tf-total { margin: 4px 0 14px; }
#tf-soucis:empty { display: none; }
#tf-soucis { margin: 0 0 14px; }

/* Étape 4 · « Quelle IA écrit tes prompts ? » au même style que les autres titres (03/11) ; le prompt anglais (« Lire le prompt ») ;
   les vignettes de références dans la carte verte, l'image de continuité comme une case marquée. */
.tf-page .cia-titre { margin: 0 0 14px; font-family: var(--tight); font-size: 22px; font-weight: 600; line-height: 1.1; letter-spacing: 0; text-transform: none; color: var(--bx); }
.tf-prompt-en { font-size: 14.5px; }
.tf-prompt-en[hidden] { display: none; }
.tf-vignettes { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tf-vignettes img { width: 52px; height: 66px; object-fit: cover; border-radius: 8px; background: var(--surface); }
.tf-vignette-cont { display: inline-grid; place-items: center; width: 52px; height: 66px; border-radius: 8px; border: 1px dashed rgba(255,255,255,.6); color: #fff; font-size: 14px; line-height: 1.1; text-align: center; }
.tf-vignette-cont small { font-size: 14px; opacity: .85; }

/* Étape 5 · les clips (la grille .ci-film), l'image de continuité, la fin.
   03/11 : « Je valide » et « Modifier » côte à côte s'ils tiennent (marges un peu réduites), sinon l'un sous l'autre, chacun sur sa ligne. */
.tf-slot .tf-confirm { margin: 0; }
.tf-valider-actions { gap: 6px; }
.tf-valider-actions .btn.petit { flex: 1 1 auto; justify-content: center; gap: 6px; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
.tf-cont { padding: 14px 16px; border-radius: 14px; background: var(--fond); border: 1px solid var(--ligne); }
.tf-cont > b { display: block; font-size: 15.5px; font-weight: 600; }
.tf-cont .ci-note { margin: 6px 0 10px; }
.tf-cont .tf-commandes { margin-top: 10px; }
/* « − 1 image » et « + 1 image » côte à côte (03/11) : 9 px de marge intérieure au lieu de 14 ; « Je valide » sur sa ligne dessous.
.tf-commandes .btn.petit { padding-left: 9px; padding-right: 9px; }
   Deux colonnes égales ; quand la colonne est très étroite (moins de 190 px de place), la marge descend à 5 px pour qu'ils tiennent quand même. */
.tf-cont { container-type: inline-size; padding-left: 12px; padding-right: 12px; }
.tf-cont-commandes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tf-cont-commandes .btn.petit { min-width: 0; justify-content: center; white-space: nowrap; }
.tf-cont-commandes .tf-cont-ok { grid-column: 1 / -1; }
@container (max-width: 190px) { .tf-cont-commandes { gap: 4px; } .tf-cont-commandes .btn.petit { padding-left: 5px; padding-right: 5px; } }
.tf-cont-img { position: relative; border-radius: 12px; overflow: hidden; background: #0F2320; }
.tf-cont-img img { display: block; width: 100%; max-height: 360px; object-fit: contain; }
.tf-cont-t { position: absolute; left: 10px; bottom: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--bx); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* La fin (03/11) : un bandeau doré, le titre et « Tout télécharger », puis « Au montage » (avec son petit « i ») et ses timecodes. */
.tf-fin { margin-top: 22px; padding: 22px 24px; border-radius: var(--radius); background: #F6EBCB; border: 1px solid rgba(201,162,74,.55); color: var(--bx); }
.tf-fin-tete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 18px; }
.tf-fin-tete h2 { margin: 0; }
.tf-fin .tf-titre-i { margin-bottom: 8px; }
.tf-fin .tf-titre-i h3 { font-size: 17px; color: var(--bx); }
.tf-fin .ci-i:not(:hover):not([aria-expanded="true"]) { background: #fff; }
.tf-montage { margin: 0; padding-left: 22px; font-size: 15.5px; line-height: 1.6; }
.tf-montage li + li { margin-top: 4px; }
@media (max-width: 700px) {
  .tf-etat { padding: 16px; }
  .tf-lecteur, .tf-lecteur.vertical { max-width: 100%; }
  .tf-lecteur.vertical video { max-height: 60vh; }
  .tf-temps { margin-left: 0; flex: 1 1 100%; }
  .tf-fin { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) { .tf-tete { transition: none; } }

/* 04/11 (Tamya) · étape 4 : le titre « Quelle IA écrit tes prompts ? » porte le petit « i » (le titre du composant choix-ia est masqué), puis le bouton. */
.tf-ia-bloc .cia-titre { display: none; }
.tf-ia-go { margin-top: 16px; }
#tf-ia-go:empty { display: none; }
/* 04/11 soir (Tamya) · étape 2 : le petit « i » sous Coiffures, à côté du titre (sa bulle s'ouvre par-dessus, sous le titre). */
.tf-type-tete { position: relative; }
/* Étape 5 · « Modifier » : plus d'encadré autour du champ ; puis la nouvelle proposition à relire avant de relancer le clip. */
.ci-slot .tf-slot-modif { margin-top: 10px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.tf-slot-modif .ci-actions { margin-top: 8px; }
.tf-revue { display: grid; gap: 10px; margin-top: 10px; color: var(--bx); }
.tf-revue > b { font-weight: 600; font-size: 15px; }
.tf-revue .ci-prompt-bloc { margin: 0; }
.tf-revue .ci-slot-actions { margin-top: 0; }
/* 04/11 nuit (Tamya, 3e partie) : « Choisir une autre image » sur sa ligne. 05/11 : la photo préparée (.tf-prep) et l'inventaire (.sw-inv) sont dans swap-commun.css. */
.tf-cont-commandes .tf-cont-autre { grid-column: 1 / -1; }
/* 05/11 (Tamya) : l'aperçu photo de la première scène (avant de payer le clip) ; « Retourner la photo » d'un décor ; la note de continuité ancienne ;
   le choix « ce clip seulement » ou « aussi les suivants ». */
.tf-apercu .tf-cont-commandes { grid-template-columns: 1fr; }
.tf-apercu .tf-cont-commandes .btn.lien { white-space: normal; }
.tf-ap-note { margin: 10px 0 0; }
.tf-retourner { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tf-cont-ancienne { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--ok-fond); border: 1px solid rgba(201,162,74,.45); color: var(--bx); font-size: 14px; line-height: 1.45; }
.tf-confirm .tf-confirm-deux { flex-wrap: wrap; gap: 6px; }