/* ---------- 02/10 · La vidéo cinématique (public/video-cinema.js) ----------
   Un mini film en cinq pages (13/10) : script et storyboard, références, scènes, propositions, film.
   Les cartes de références (.ph-ref), la galerie à trois pastilles (.ph-res), le dépôt (.depot, .ph-pin) et l'agrandissement
   (.ph-zoom) viennent de la page Photo (app.css) : ici, seulement ce qui est propre au film, sous .ci-page.
   Textes à 14 px au moins, graisse 600 au plus, jamais de noir (texte --bx). */
.ci-page { max-width: 1040px; min-width: 0; }
.ci-page b, .ci-page strong { font-weight: 600; }
.ci-page .entete .sur { font-size: 14px; }
.ci-page .entete { margin-bottom: 20px; }
.ci-page h2 { font-size: 22px; }
.ci-page a:not(.btn):not(.ph-ref):not(.ci-etape):not(.ph-dl) { color: var(--bx2); font-weight: 500; }
.ci-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ci-avert { margin-bottom: 16px; }

/* La barre d'étapes : cliquable vers ce qui est déjà fait. Le film a cinq étapes (.ci-etapes-5, plus bas) ; les parcours courts en ont trois (.ci-etapes-3). */
.ci-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.ci-etape { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--ligne); background: var(--carte); color: var(--bx); text-decoration: none; font-size: 15px; font-weight: 500; line-height: 1.25; }
.ci-etape-nom { min-width: 0; overflow-wrap: anywhere; }
.ci-etape.fait:hover { border-color: var(--bx2); }
.ci-etape.fait:focus-visible { outline: 2px solid var(--bx2); outline-offset: 2px; }
.ci-etape.ici { background: var(--bx2); border-color: var(--bx2); color: #fff; }
.ci-etape.ici .ci-num { background: #fff; color: var(--bx2); }
.ci-etape.ferme { background: transparent; border-style: dashed; color: var(--encre2); }
.ci-etape.ferme .ci-num { background: transparent; border: 1px solid var(--ligne); color: var(--encre2); }
.ci-court { display: none; }
.ci-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--doux); color: var(--bx2); font-size: 14px; font-weight: 600; line-height: 1; }
/* 12/10 (Lisa) : la ligne du titre porte « Recommencer » à sa droite (le bouton est l'enfant direct de l'en-tête, après le h1) ;
   sous 640 px, la règle d'app.css ([id$="recommencer"]) le pose à gauche, juste sous le titre. */
.ci-entete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px; }
.ci-entete h1 { min-width: 0; margin: 0; overflow-wrap: anywhere; }
/* 12/10 (Lisa) : le même fil pour les parcours en trois étapes (vidéo libre, reproduire, je remplace) : trois colonnes, le texte à droite du numéro, au téléphone aussi. */
.ci-etapes.ci-etapes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .ci-etapes.ci-etapes-3 { grid-template-columns: repeat(3, minmax(0, auto)); gap: 6px; } /* à la mesure des mots (« Proposition » ne se coupe pas), le reste partagé */
  .ci-etapes-3 .ci-etape { padding: 8px; gap: 6px; font-size: 14px; }
  .ci-etapes-3 .ci-num { width: 24px; height: 24px; }
}
/* 12/10 (Lisa) : « Comment récupérer la vidéo ? », un <details> sobre sous la zone de dépôt de « Reproduire une vidéo » (seulement là, 12/10 soir).
   Deux options, chacune dans sa petite carte : enregistrer son écran, ou télécharger la vidéo (deux boutons, Instagram et TikTok, qui s'ouvrent à part). */
.ci-recuperer { margin: 12px 0 0; font-size: 14.5px; color: var(--encre2); }
.ci-recuperer summary { display: inline-block; cursor: pointer; color: var(--bx2); font-size: 14.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }
.ci-recuperer summary::-webkit-details-marker { display: none; }
.ci-recuperer summary:focus-visible { outline: 2px solid var(--bx2); outline-offset: 2px; border-radius: 6px; }
.ci-recuperer-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.ci-recuperer-opt { min-width: 0; padding: 14px 16px; border: 1px solid var(--ligne); border-radius: 14px; background: #fff; }
.ci-recuperer-opt b { display: block; font-size: 15px; font-weight: 600; color: var(--bx); }
.ci-recuperer p { margin: 6px 0 0; line-height: 1.5; color: var(--bx); }
.ci-recuperer-liens { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media (max-width: 760px) { .ci-recuperer-options { grid-template-columns: minmax(0, 1fr); } }
.ci-outils { display: flex; justify-content: flex-end; margin: 0 0 6px; min-height: 8px; }
.ci-outils .btn.lien { padding: 6px 4px; color: var(--encre2); font-weight: 500; }
.ci-outils .btn.lien:hover { color: var(--bx2); background: transparent; }
.ci-corps { margin-top: 8px; }

/* Les blocs */
.ci-bloc { padding: 26px 28px; margin-bottom: 18px; min-width: 0; }
.ci-aide { color: var(--encre2); font-size: 15.5px; margin: 6px 0 18px; max-width: 700px; }
.ci-note { color: var(--encre2); font-size: 14.5px; margin: 8px 0; }
.ci-petit { color: var(--encre2); font-size: 14px; margin-top: 10px; }
.ci-opt { color: var(--encre2); font-size: 14px; font-weight: 400; }
.ci-erreur { margin: 12px 0 0; }
.ci-page .ci-actions { margin-top: 18px; }
.ci-pied { margin: 4px 0 18px; }
.ci-attente { padding: 14px 0; font-size: 15px; }
.ci-zone { display: block; width: 100%; min-height: 96px; max-height: 60vh; border: 1px solid rgba(27,33,31,.18); border-radius: 14px; padding: 12px 14px; background: #fff; color: var(--bx); font: inherit; font-size: 16px; line-height: 1.5; resize: vertical; }
.ci-zone:focus, .ci-nom:focus, .ci-page .ph-pin input:focus { outline: 2px solid var(--bx2); outline-offset: 1px; border-color: transparent; }
.ci-script { min-height: 220px; }
.ci-label { display: block; font-size: 15.5px; font-weight: 500; margin: 14px 0 8px; }

/* Une question, son « i », et la case « Je laisse l'IA choisir » (mêmes mesures que la vidéo libre). */
.ci-q { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 24px 0 10px; font-size: 15.5px; font-weight: 600; }
.ci-i { flex: none; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid rgba(23,70,63,.28); background: #fff; color: var(--bx2); font-size: 15px; font-weight: 600; line-height: 1; display: inline-grid; place-items: center; cursor: pointer; }
.ci-i:hover, .ci-i[aria-expanded="true"] { background: var(--bx2); border-color: var(--bx2); color: #fff; }
.ci-i:focus-visible { outline: 2px solid var(--bx2); outline-offset: 2px; }
.ci-info { background: var(--ok-fond); border-radius: 12px; padding: 10px 14px; font-size: 14.5px; line-height: 1.45; margin: -2px 0 12px; max-width: 700px; }
.ci-auto { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.ci-auto input { width: 18px; height: 18px; margin: 0; accent-color: var(--bx2); }
.ci-off { opacity: .45; pointer-events: none; }

/* Page 1 : la planche et le découpage */
.ci-planche { display: block; width: 100%; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: var(--surface); cursor: zoom-in; }
.ci-planche img { display: block; width: 100%; height: auto; }
.ci-planche:focus-visible { outline: 2px solid var(--bx2); outline-offset: 2px; }
.ci-planche.ci-attend { cursor: default; display: grid; place-items: center; min-height: 220px; padding: 20px; text-align: center; color: var(--encre2); font-size: 15px; }
.ci-decoupage { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ci-decoupage li { display: flex; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: 14px; background: var(--fond); }
.ci-decoupage li > div { min-width: 0; }
.ci-decoupage b { font-size: 15.5px; }
.ci-decoupage p { color: var(--encre2); font-size: 14.5px; margin-top: 2px; }
.ci-duree { margin-left: 8px; color: var(--or-texte); font-size: 14px; white-space: nowrap; }

/* Page 2 : les encadrés et les reference sheets */
.ci-rappel { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 14px; }
.ci-rappel .ci-petit { margin: 0; }
.ci-cadre { border: 1px solid var(--ligne); border-radius: 16px; padding: 16px; margin-bottom: 14px; background: var(--fond); min-width: 0; }
.ci-cadre-titre { font-size: 15.5px; font-weight: 600; }
.ci-cadre-aide { color: var(--encre2); font-size: 14.5px; margin: 2px 0 12px; }
.ci-cadre .ph-refs-cartes, .ci-cadre .ph-combine, #ci-elements .ph-combine { margin: 12px 0; }
.ci-cadre .ci-cadre-titre + .ph-combine, .ci-cadre .ci-cadre-titre + .ph-depot-bloc { margin-top: 12px; }
.ci-page .ph-pin input { border: 1px solid rgba(27,33,31,.18); border-radius: 12px; padding: 10px 12px; font-size: 16px; background: #fff; }
.ci-page .depot { background: #fff; }
.ci-sheets { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: 20px; }
.ci-sheets:empty { display: none; }
.ci-sheet { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 340px; }
.ci-sheet .ph-res-img img { aspect-ratio: auto; object-fit: contain; }
.ci-r-personnage .ph-res-img img, .ci-sheet .ci-r-personnage.en-cours { aspect-ratio: 2 / 3; }
.ci-r-scene .ph-res-img img, .ci-sheet .ci-r-scene.en-cours { aspect-ratio: 3 / 2; }
.ci-r-objet .ph-res-img img, .ci-sheet .ci-r-objet.en-cours { aspect-ratio: 1; }
.ci-sheet .ph-res.en-cours { padding: 12px; }
.ci-sheet .ph-res .attente { flex-direction: column; text-align: center; padding: 0; font-size: 14px; }
.ci-voile { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(250,248,244,.84); }
.ci-nom { width: 100%; border: 1px solid rgba(27,33,31,.18); border-radius: 12px; padding: 9px 12px; background: #fff; color: var(--bx); font-size: 15px; font-weight: 500; }
.ci-sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ci-import { cursor: pointer; }
.ci-page .ph-ref-coche { font-size: 14px; }
.ci-page[data-etape="1"] .ci-planches:not(.plusieurs) .ci-planche, .ci-page[data-etape="2"] .ci-planches:not(.plusieurs) .ci-planche { max-width: 640px; }
.ci-page .ph-ref-creer .ph-ref-txt b { white-space: normal; overflow: visible; text-align: center; }

/* Page 3 : une section par scène */
.ci-scene-tete { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px 14px; }
.ci-scene-titre { flex: 1 1 240px; min-width: 0; }
.ci-scene-titre p { color: var(--encre2); font-size: 14.5px; margin-top: 4px; }
.ci-prix { flex: none; padding: 4px 12px; border-radius: 999px; background: var(--ok-fond); color: var(--or-texte); font-size: 15px; font-weight: 600; white-space: nowrap; }
.ci-plan { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.ci-plan-n { flex: none; width: 56px; padding-top: 13px; color: var(--or-texte); font-size: 14px; font-weight: 600; }
.ci-plan .ci-zone { flex: 1 1 auto; min-width: 0; min-height: 64px; }
.ci-plan-x { flex: none; width: 34px; height: 34px; margin-top: 8px; border-radius: 50%; border: 1px solid rgba(27,33,31,.18); background: #fff; color: var(--bx); font-size: 14px; cursor: pointer; }
.ci-plan-x:hover { background: var(--doux); }
.ci-duree-ligne { display: flex; align-items: center; gap: 14px; }
.ci-duree-ligne input[type="range"] { flex: 1 1 auto; min-width: 0; max-width: 420px; accent-color: var(--bx2); }
.ci-duree-ligne output { flex: none; min-width: 52px; font-size: 16px; font-weight: 600; }
.ci-barre { margin: 0 0 18px; }
.ci-barre .ci-erreur { margin: 0 0 12px; }

/* Le récap, scène par scène */
.ci-rc { border: 1px solid var(--ligne); border-radius: 16px; padding: 16px 18px; margin-bottom: 12px; background: var(--fond); min-width: 0; }
.ci-rc-tete { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.ci-rc-tete > div { flex: 1 1 220px; min-width: 0; }
.ci-rc-tete b { font-size: 16px; }
.ci-intent { color: var(--encre2); font-size: 14.5px; margin-top: 4px; }
.ci-reponses { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; margin: 14px 0 0; }
.ci-reponses > div { min-width: 0; }
.ci-reponses .ci-large { grid-column: 1 / -1; }
.ci-reponses dt { color: var(--encre2); font-size: 14px; }
.ci-reponses dd { margin: 0; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.ci-plans { margin: 12px 0 0; padding-left: 20px; font-size: 14.5px; }
.ci-plans li + li { margin-top: 4px; }
.ci-accordeon { margin-top: 14px; }
.ci-accordeon summary { cursor: pointer; color: var(--bx2); font-size: 15px; font-weight: 600; }
.ci-sous { margin: 14px 0 6px; color: var(--or-texte); font-size: 14px; font-weight: 600; }
.ci-prompt { margin: 0; padding: 12px 14px; border: 1px solid var(--ligne); border-radius: 12px; background: #fff; color: var(--bx); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.ci-texte { font-size: 14.5px; overflow-wrap: anywhere; }
.ci-modif { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--ligne); border-radius: 14px; background: #fff; }
.ci-modif .ci-label { margin-top: 0; }
.ci-modif .ci-zone { min-height: 72px; }
.ci-total { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--ok-fond); font-size: 15.5px; }
.ci-total b { font-size: 20px; white-space: nowrap; }
.btn.ci-or { background: var(--or); color: var(--bx); }
.btn.ci-or:hover { background: #D6B35E; }

/* Page 4 : le film, un emplacement par scène */
.ci-film { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ci-film.vertical { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ci-slot { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ci-slot [data-slot-vue] { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ci-slot-tete { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ci-slot-tete > div { min-width: 0; }
.ci-slot-tete b { display: block; font-size: 15.5px; overflow-wrap: anywhere; }
.ci-slot-info { display: block; color: var(--encre2); font-size: 14px; }
.ci-video, .ci-vide { aspect-ratio: 16 / 9; border-radius: 14px; }
.ci-film.vertical .ci-video, .ci-film.vertical .ci-vide { aspect-ratio: 9 / 16; }
.ci-video-btn { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #0F2320; cursor: zoom-in; }
.ci-video-btn video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ci-lecture { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--bx2); font-size: 20px; padding-left: 3px; pointer-events: none; }
.ci-vide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px; background: var(--surface); color: var(--encre2); font-size: 14.5px; text-align: center; overflow: hidden; }
.ci-vide.ci-ko { background: #F5E9DD; color: var(--bx); }
.ci-vide.ci-demo { background: linear-gradient(135deg, var(--bx), var(--bx2)); color: #fff; }
.ci-demo .ci-lecture { position: static; margin: 0; }
.ci-rond { width: 22px; height: 22px; border: 2px solid #fff; border-top-color: var(--bx2); border-radius: 50%; animation: tourne .9s linear infinite; }
.ci-slot-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ci-compte { margin-top: 20px; font-size: 16px; font-weight: 600; }
.ci-pret { margin: 14px 0 0; }
.ci-page .btn.ci-monter:disabled { background: var(--surface); color: var(--encre2); opacity: 1; cursor: not-allowed; }
.ci-page .btn.second:disabled { cursor: not-allowed; }

/* Voir en grand : une vidéo dans la même fenêtre que les images (.ph-zoom) */
.ci-zoom video { max-width: 100%; max-height: calc(100vh - 110px); border-radius: 12px; background: #0F2320; cursor: default; }
.ci-zoom .ph-zoom-act { flex-wrap: wrap; justify-content: center; }

/* 02/10 : l'ébauche, les planches (une par groupe de 8 scènes), les catégories pliées, « gardé », les 4 formats */
.ci-ebauche { margin: 0 0 16px; padding: 12px 16px; border-radius: 14px; background: var(--ok-fond); color: var(--bx); font-size: 15px; line-height: 1.5; max-width: 820px; }
.ci-ebauche b { font-weight: 600; }
.ci-corps > .ci-ebauche { margin: 0 0 16px; }
.ci-planches { display: grid; gap: 16px; }
.ci-planches.plusieurs { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ci-planche-bloc { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ci-planche-bloc .ci-actions { margin-top: 0; }
.ci-planche-titre { color: var(--or-texte); font-size: 14px; font-weight: 600; }
.ci-planches + .ci-petit { margin-top: 10px; }
.ci-pli { padding: 0; overflow: hidden; }
.ci-pli-tete { display: flex; align-items: center; gap: 14px; width: 100%; padding: 20px 22px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ci-pli-tete:hover { background: var(--fond); }
.ci-pli-tete:focus-visible { outline: 2px solid var(--bx2); outline-offset: -2px; }
.ci-pli-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ci-pli-txt b { font-size: 19px; font-weight: 600; }
.ci-pli-txt small { color: var(--encre2); font-size: 14.5px; }
.ci-pli-vignettes { display: flex; gap: 6px; flex: 0 0 auto; }
.ci-pli-vignettes:empty { display: none; }
.ci-pli-vignettes img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--surface); }
.ci-pli-plus { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-fond); color: var(--bx2); font-size: 24px; font-weight: 500; line-height: 1; }
.ci-pli-tete[aria-expanded="true"] .ci-pli-plus { background: var(--bx2); color: #fff; }
.ci-pli-corps { padding: 4px 22px 22px; }
.ci-garde-badge { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 4px 10px; border-radius: 999px; background: var(--bx2); color: #fff; font-size: 14px; font-weight: 600; pointer-events: none; }
.ci-sheet .ph-res.valide { box-shadow: 0 0 0 3px var(--bx2); }
.ci-garde-etat { margin: 0; color: var(--encre2); font-size: 14px; }
.ci-garde-etat.on { color: var(--bx2); font-weight: 600; }
.ci-prompt-fr { white-space: pre-wrap; }
.ci-film[data-ratio="3:4"] .ci-video, .ci-film[data-ratio="3:4"] .ci-vide { aspect-ratio: 3 / 4; }
.ci-film[data-ratio="1:1"] .ci-video, .ci-film[data-ratio="1:1"] .ci-vide { aspect-ratio: 1; }
.ci-vide .btn { flex: 0 0 auto; }

@media (max-width: 760px) {
  .ci-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ci-long { display: none; }
  .ci-court { display: inline; }
  .ci-bloc { padding: 18px 16px; }
  .ci-script { min-height: 180px; }
  .ci-auto { margin-left: 0; flex-basis: 100%; }
  .ci-plan { flex-wrap: wrap; }
  .ci-plan-n { width: 100%; padding-top: 0; }
  .ci-sheets { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .ci-film, .ci-film.vertical { grid-template-columns: 1fr; }
  .ci-pli-tete { padding: 16px; gap: 10px; }
  .ci-pli-corps { padding: 2px 16px 18px; }
  .ci-pli-txt b { font-size: 17px; }
  .ci-pli-vignettes img { width: 34px; height: 34px; }
  .ci-pli-vignettes img:nth-child(n+3) { display: none; }
  .ci-planches.plusieurs { grid-template-columns: 1fr; }
  .ci-film.vertical .ci-video, .ci-film.vertical .ci-vide { max-width: 260px; }
  .ci-page .ci-actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
  .ci-page .ci-actions .droite { display: none; }
}

/* 03/10 soir : « Tes références », un bloc blanc avec ses trois catégories en vert ; la ligne de validation de l'étape Scènes. */
.ci-refs .ci-pli { margin-top: 12px; border: 1px solid var(--bx2); border-radius: 16px; overflow: hidden; background: var(--carte); }
.ci-refs .ci-pli-tete { padding: 16px 18px; background: var(--bx2); color: #fff; }
.ci-refs .ci-pli-tete:hover { background: var(--bx); }
.ci-refs .ci-pli-tete:focus-visible { outline: 2px solid var(--or); outline-offset: -3px; }
.ci-refs .ci-pli-txt small { color: rgba(255,255,255,.85); }
.ci-refs .ci-pli-plus { background: #fff; color: var(--bx2); }
.ci-refs .ci-pli-tete[aria-expanded="true"] .ci-pli-plus { background: var(--or2); color: var(--bx); }
.ci-refs .ci-pli-corps { padding: 18px; }
.ci-valider-ligne { margin: 0 0 18px; }
.ci-page .pin-bloc { margin-top: 8px; }

/* 03/10 nuit : les catégories de « Tes références » restent VERTES une fois dépliées ; ce qui était vert dedans passe en doré. */
.ci-refs .ci-pli { background: var(--bx2); }
.ci-refs .ci-pli-corps { color: #fff; }
.ci-refs .ci-pli-corps > [data-form] > .ci-aide, .ci-refs .ci-pli-corps .ci-petit, .ci-refs .ci-pli-corps .ci-garde-etat { color: rgba(255,255,255,.88); }
.ci-refs .ci-pli-corps .ci-garde-etat.on { color: var(--or2); }
.ci-refs .ci-pli-corps .ci-cadre { color: var(--bx); }
.ci-refs .ci-pli-corps .btn:not(.second):not(.lien) { background: var(--or); color: var(--bx); }
.ci-refs .ci-pli-corps .btn:not(.second):not(.lien):hover { background: var(--or2); }
.ci-refs .ci-pli-corps > [data-form] > .actions .btn, .ci-refs .ci-sheet-actions .btn.second { border-color: transparent; }
.ci-refs .ci-sheet .ph-res.valide { box-shadow: 0 0 0 3px var(--or); }
.ci-refs .ci-garde-badge { background: var(--or); color: var(--bx); }
.ci-refs .ci-pli-corps .erreur { color: var(--bx); }

/* Étape Scènes : le récapitulatif en vert, ses cartes blanches, les caractéristiques en encadrés (comme la timeline),
   l'action dans son encadré, le prompt en un seul bloc ; les scènes repliées avec leur « + ». */
.ci-recap-vert { background: var(--bx2); color: #fff; }
.ci-recap-vert > h2 { color: #fff; }
.ci-recap-vert > .ci-aide { color: rgba(255,255,255,.88); }
.ci-recap-vert .ci-rc { background: var(--carte); color: var(--bx); border: 0; padding: 18px; border-radius: 18px; }
.ci-recap-vert .ci-rc > .ci-note, .ci-recap-vert .ci-rc .attente { color: var(--bx); }
.ci-rc-tete { align-items: center; }
.ci-rc-tete b { font-size: 18px; font-weight: 600; flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.ci-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 14px; }
.ci-spec { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 14px; border: 1px solid var(--ligne); border-radius: 14px; background: var(--carte); }
.ci-spec small { color: var(--encre2); font-size: 14px; }
.ci-spec b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.ci-spec i { font-style: normal; font-weight: 500; color: var(--or-texte); font-size: 14px; }
.ci-action { margin-top: 10px; padding: 14px 16px; border-radius: 14px; background: var(--ok-fond); border: 1px solid rgba(201,162,74,.45); }
.ci-action small { display: block; color: var(--or-texte); font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.ci-action p, .ci-action li { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.ci-action ol { margin: 0; padding-left: 20px; }
.ci-action li + li { margin-top: 4px; }
.ci-rc-boutons { margin-top: 14px; }
.ci-prompt-bloc { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: var(--fond); border: 1px solid var(--ligne); font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.ci-recap-vert .ci-total { background: var(--ok-fond); color: var(--bx); }
.ci-scene.ci-scene-pliee { padding-top: 16px; padding-bottom: 16px; }
.ci-scene-pliee .ci-scene-tete { align-items: center; }
.ci-scene-plus { border: 0; cursor: pointer; margin-left: auto; }
.ci-scene-tete .ci-prix + .ci-scene-plus { margin-left: 0; }
.ci-valider-ligne { margin: 18px 0 0; }

/* 03/10 nuit : un bloc récapitulatif VERT par scène, au dessin du récap de la vidéo libre (.vlb-recap). */
.ci-recaps { margin-top: 6px; }
.ci-recaps-tete { margin: 22px 0 14px; }
.ci-recaps-tete .ci-aide { margin-bottom: 0; }
.ci-recaps .ci-rc.ci-rc-vert { background: var(--bx2); color: #fff; border: 0; border-radius: var(--radius); padding: 22px; margin-bottom: 14px; }
.ci-rc-vert .vlb-recap-sur { color: var(--or2); }
.ci-rc-vert h2 { color: #fff; }
.ci-rc-vert .vlb-rep { border-top-color: rgba(255,255,255,.2); }
.ci-rc-vert .vlb-rep dt, .ci-rc-vert .vlb-rep dd small { color: rgba(255,255,255,.8); }
.ci-rc-vert .ci-action-texte p, .ci-rc-vert .ci-action-texte li { font-size: 15px; line-height: 1.5; }
.ci-rc-vert .ci-action-texte ol { margin: 0; padding-left: 20px; }
.ci-rc-vert .vlb-prix { color: var(--bx); }
.ci-rc-vert .ci-note, .ci-rc-vert .attente { color: rgba(255,255,255,.9); }
.ci-rc-vert .ci-prompt-bloc, .ci-rc-vert .ci-modif { color: var(--bx); }
.ci-rc-vert .vlb-regen .btn.second { border-color: transparent; }
.ci-scene-valider { margin-top: 18px; }
@media (max-width: 760px) { .ci-recaps .ci-rc.ci-rc-vert { padding: 16px; } }

/* Pinterest sur une seule ligne (04/10, Lisa) : le champ, « Valider », et une pastille au logo Pinterest. Jamais de retour à la ligne. */
.ci-page .ph-pin { align-items: center; flex-wrap: nowrap; }
.ci-page .ph-pin input { flex: 1 1 0; min-width: 0; }
.ci-page .ph-pin .btn { flex: none; }
.ci-page .ph-pin a.ph-pin-chercher { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: #fff; border: 1px solid rgba(27,33,31,.18); color: #BD081C !important; text-decoration: none; transition: border-color .2s, transform .2s; }
.ci-page .ph-pin a.ph-pin-chercher:hover { border-color: #BD081C; transform: translateY(-1px); }
.ci-page .ph-pin a.ph-pin-chercher:focus-visible { outline: 2px solid var(--bx2); outline-offset: 2px; }

/* 04/10 : l'étape Références (maquette validée par Lisa). Trois panneaux blancs, légers, numérotés ; dedans, les
   reference sheets déjà créés puis « Ajouter un … » : un sélecteur à onglets sur une ligne, de petites vignettes. */
.ci-ref-tete { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 16px; }
.ci-ref-num { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--or); color: var(--bx); font-size: 15.5px; font-weight: 600; margin-top: 1px; }
.ci-ref-titre { flex: 1 1 auto; min-width: 0; }
.ci-ref-titre h2 { margin: 0; }
.ci-ref-titre .ci-aide { margin: 4px 0 0; }
.ci-ref-etat { flex: none; align-self: flex-start; margin-top: 4px; padding: 5px 12px; border-radius: 999px; background: var(--surface); color: var(--encre2); font-size: 14px; font-weight: 500; white-space: nowrap; }
.ci-ref-etat.on { background: var(--bx2); color: #fff; }
.ci-ref-p .ci-sheets { margin: 0 0 20px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.ci-ref-p .ci-sheet { max-width: 240px; }
.ci-ajout-titre { font-size: 15.5px; font-weight: 600; margin: 0 0 10px; }
.ci-onglets { display: inline-flex; max-width: 100%; border: 1px solid rgba(23,70,63,.22); border-radius: 999px; padding: 3px; background: #fff; gap: 2px; }
.ci-onglets button { border: 0; background: none; color: var(--bx); font: inherit; font-size: 15px; font-weight: 500; padding: 8px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.ci-onglets button:hover { background: var(--ok-fond); }
.ci-onglets button.on { background: var(--bx2); color: #fff; }
.ci-onglets button:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.ci-facon-corps { margin-top: 14px; }
.ci-facon-corps .ph-combine { margin: 0 0 12px; }
.ci-minis { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.ci-mini { width: 76px; padding: 0; border: 0; background: none; color: var(--bx); font: inherit; cursor: pointer; text-align: center; }
.ci-mini-img { position: relative; display: block; width: 76px; height: 96px; border-radius: 12px; overflow: hidden; background: var(--surface); border: 2px solid rgba(23,70,63,.12); transition: border-color .2s, box-shadow .2s; }
.ci-mini-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ci-mini:hover .ci-mini-img { border-color: rgba(31,91,82,.45); }
.ci-mini.on .ci-mini-img { border-color: var(--bx2); box-shadow: 0 0 0 2px rgba(31,91,82,.18); }
.ci-mini-coche { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--bx2); color: #fff; font-size: 12px; display: none; place-items: center; }
.ci-mini.on .ci-mini-coche { display: grid; }
.ci-mini-nom { display: block; margin-top: 5px; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-mini:focus-visible .ci-mini-img { outline: 2px solid var(--or); outline-offset: 2px; }
.ci-mini-plus { align-self: center; border: 0; background: none; color: var(--bx2); font: inherit; font-size: 14.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px 6px; }
.ci-mini-vide { margin: 0; color: var(--encre2); font-size: 14.5px; }
.ci-tenue { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.ci-tenue label { font-size: 15px; font-weight: 500; }
.ci-tenue select { font: inherit; font-size: 15px; color: var(--bx); background: #fff; border: 1px solid rgba(27,33,31,.18); border-radius: 999px; padding: 8px 14px; }
.ci-tenue select:focus-visible { outline: 2px solid var(--bx2); outline-offset: 1px; }
.ci-ref-p [data-form] > .actions { margin-top: 18px; }
@media (max-width: 640px) {
  .ci-ref-tete { flex-wrap: wrap; }
  .ci-ref-titre { flex-basis: calc(100% - 44px); }
  .ci-ref-etat { margin: 0 0 0 44px; }
  .ci-onglets { display: flex; }
  .ci-onglets button { flex: 1 1 0; padding: 8px 6px; font-size: 14px; }
}

/* 04/10 (soir) : les trois blocs fermés à l'arrivée ; des cartes plus petites ; une zone à part pour ajouter. */
.ci-ref-p { padding: 0; overflow: hidden; }
button.ci-ref-tete { width: 100%; margin: 0; padding: 18px 22px; border: 0; background: none; color: var(--bx); font: inherit; text-align: left; cursor: pointer; align-items: center; }
button.ci-ref-tete:hover { background: rgba(31,91,82,.04); }
button.ci-ref-tete:focus-visible { outline: 2px solid var(--bx2); outline-offset: -3px; }
.ci-ref-tete .ci-ref-num { margin-top: 0; }
.ci-ref-titre { display: flex; flex-direction: column; gap: 2px; }
.ci-ref-titre b { font-size: 19px; font-weight: 600; }
.ci-ref-titre small { font-size: 14.5px; color: var(--encre2); line-height: 1.4; }
.ci-ref-tete .ci-ref-etat { align-self: center; margin-top: 0; }
.ci-ref-fleche { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ok-fond); color: var(--bx2); transition: transform .2s; }
.ci-ref-p.ouvert .ci-ref-fleche { transform: rotate(180deg); background: var(--bx2); color: #fff; }
.ci-ref-corps { padding: 4px 22px 22px; }
.ci-deja { margin: 0 0 20px; }
.ci-deja-titre { font-size: 15.5px; font-weight: 600; }
.ci-deja-aide { margin: 2px 0 12px; font-size: 14.5px; color: var(--encre2); }
.ci-ref-p .ci-sheets { margin: 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.ci-ref-p .ci-sheet { width: 150px; max-width: 150px; gap: 6px; }
.ci-ref-p [data-type="scene"] .ci-sheet, .ci-ref-p[data-type="scene"] .ci-sheet { width: 210px; max-width: 210px; }
.ci-ref-p .ci-sheet .ph-res-act { gap: 4px; }
.ci-ref-p .ci-sheet .ci-garde-badge { font-size: 14px; padding: 3px 8px; top: 6px; left: 6px; }
.ci-ref-p .ci-nom { padding: 7px 10px; font-size: 14.5px; }
.ci-regen { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 9px; border: 0; border-radius: 999px; background: #fff; color: var(--bx); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: 0 1px 4px rgba(23,70,63,.2); white-space: nowrap; }
.ci-regen:hover { background: var(--ok-fond); }
.ci-regen:disabled { opacity: .5; cursor: default; }
.ci-regen:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.ci-garder { width: 100%; justify-content: center; }
.ci-ajout { background: var(--fond); border: 1.5px dashed rgba(23,70,63,.28); border-radius: 16px; padding: 18px; }
.ci-ajout-titre { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; margin: 0 0 12px; }
.ci-ajout-plus { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bx2); color: #fff; font-size: 17px; font-weight: 500; line-height: 1; }
.ci-ajout-suite { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ligne); }
.ci-ajout .actions { margin-top: 20px; }
.ci-ajout .erreur { margin-top: 12px; }
@media (max-width: 640px) {
  button.ci-ref-tete { padding: 14px 16px; flex-wrap: nowrap; }
  .ci-ref-tete .ci-ref-titre { flex-basis: auto; }
  .ci-ref-titre small { display: none; }
  .ci-ref-tete .ci-ref-etat { margin: 0; }
  .ci-ref-corps { padding: 2px 16px 18px; }
  .ci-ref-p .ci-sheet { width: calc(50% - 7px); max-width: none; }
  .ci-ajout { padding: 14px; }
}
.ph-res-act button.ci-regen { width: auto; height: 32px; border-radius: 999px; display: inline-flex; padding: 0 9px; }

/* 04/10 (nuit) : les trois blocs de références repassent en VERT (préférence de Lisa), fermés comme ouverts. */
.panneau.ci-ref-p { background: var(--bx2); color: #fff; }
.ci-ref-p button.ci-ref-tete { color: #fff; }
.ci-ref-p button.ci-ref-tete:hover { background: rgba(255,255,255,.06); }
.ci-ref-p button.ci-ref-tete:focus-visible { outline-color: var(--or); }
.ci-ref-p .ci-ref-titre small { color: rgba(255,255,255,.85); }
.ci-ref-p .ci-ref-etat { background: rgba(255,255,255,.16); color: #fff; }
.ci-ref-p .ci-ref-etat.on { background: var(--or); color: var(--bx); }
.ci-ref-p .ci-ref-fleche { background: #fff; color: var(--bx2); }
.ci-ref-p.ouvert .ci-ref-fleche { background: var(--or2); color: var(--bx); }
.ci-ref-p .ci-deja-titre { color: #fff; }
.ci-ref-p .ci-deja-aide, .ci-ref-p .ci-deja .ci-petit { color: rgba(255,255,255,.85); }
.ci-ref-p .ci-deja .attente { color: #fff; }
.ci-ref-p .ci-sheet .ph-res.valide { box-shadow: 0 0 0 3px var(--or); }
.ci-ref-p .ci-garde-badge { background: var(--or); color: var(--bx); }
.ci-ref-p .ci-garder { background: var(--or); color: var(--bx); }
.ci-ref-p .ci-garder:hover { background: var(--or2); }
.ci-ref-p .ci-ajout { color: var(--bx); border: 0; }

/* 04/10 : « + Ajouter un autre … » est une tuile cliquable, à côté des reference sheets ; elle ouvre le formulaire dessous. */
.ci-plus-tuile { width: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px; border: 1.5px dashed rgba(255,255,255,.55); border-radius: 14px; background: rgba(255,255,255,.07); color: #fff; font: inherit; font-size: 14.5px; font-weight: 500; line-height: 1.3; text-align: center; cursor: pointer; transition: background .2s, border-color .2s; }
.ci-plus-tuile.ci-r-personnage { aspect-ratio: 2 / 3; }
.ci-plus-tuile.ci-r-scene { width: 210px; aspect-ratio: 3 / 2; }
.ci-plus-tuile.ci-r-objet { aspect-ratio: 1 / 1; }
.ci-plus-tuile:hover, .ci-plus-tuile.on { background: rgba(255,255,255,.16); border-color: var(--or2); }
.ci-plus-tuile:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.ci-plus-rond { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--or); color: var(--bx); font-size: 24px; font-weight: 500; line-height: 1; }
.ci-ref-p .ci-deja { margin: 0; }
.ci-ref-p .ci-deja:not([hidden]) + [data-form]:not(:empty) { margin-top: 20px; }
@media (max-width: 640px) { .ci-plus-tuile, .ci-plus-tuile.ci-r-scene { width: calc(50% - 7px); } }

/* 04/10 : l'attente « ChatGPT génère… » lisible sur son cadre clair ; des cartes un peu plus larges pour que les trois
   pastilles (télécharger, régénérer, supprimer) ne touchent plus les bords de l'image. */
.ci-ref-p .ci-deja .ph-res.en-cours .attente, .ci-ref-p .ci-deja .ph-res .ci-voile .attente { color: var(--bx); }
.ci-ref-p .ci-sheet, .ci-plus-tuile { width: 172px; max-width: 172px; }
.ci-ref-p[data-type="scene"] .ci-sheet, .ci-plus-tuile.ci-r-scene { width: 230px; max-width: 230px; }
.ci-ref-p .ci-sheet .ph-res-act { bottom: 10px; gap: 5px; padding: 0 10px; }
.ci-ref-p .ci-sheet .ph-res-act button, .ci-ref-p .ci-sheet .ph-res-act a { width: 30px; height: 30px; }
.ci-ref-p .ci-sheet .ph-res-act button.ci-regen { width: auto; height: 30px; padding: 0 8px; gap: 3px; }
@media (max-width: 640px) { .ci-ref-p .ci-sheet, .ci-plus-tuile, .ci-ref-p[data-type="scene"] .ci-sheet, .ci-plus-tuile.ci-r-scene { width: calc(50% - 7px); max-width: none; } }

/* 04/10 : étape Scènes. « Je laisse l'IA choisir » en pastille, juste après la question ; une scène validée repliée
   montre son résumé. */
.ci-auto-p { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid rgba(23,70,63,.28); background: #fff; color: var(--bx); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.ci-auto-p:hover { border-color: var(--bx2); }
.ci-auto-p.on { background: var(--bx2); border-color: var(--bx2); color: #fff; }
.ci-auto-p:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.ci-auto-ico { font-size: 14px; line-height: 1; color: var(--or); }
.ci-auto-p.on .ci-auto-ico { color: var(--or2); }
.ci-prix.ci-fait { background: var(--bx2); color: #fff; }

/* 04/10 (soir) : les scènes repliées à l'arrivée, chevron pour déplier, prix sous l'en-tête, scène validée en vert. */
.ci-scene .ci-scene-tete { align-items: center; flex-wrap: nowrap; cursor: pointer; }
.ci-scene .ci-scene-titre { flex: 1 1 auto; min-width: 0; }
.ci-scene .ci-scene-titre h2 { margin: 0; }
.ci-scene .ci-num { background: var(--or); color: var(--bx); }
.ci-scene-fleche { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--ok-fond); color: var(--bx2); cursor: pointer; transition: transform .2s, background .2s; }
.ci-scene:not(.ci-scene-pliee) .ci-scene-fleche { transform: rotate(180deg); background: var(--bx2); color: #fff; }
.ci-scene-fleche:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.ci-scene-prix { margin: 12px 0 0; }
.panneau.ci-scene.ci-scene-faite.ci-scene-pliee { background: var(--bx2); color: #fff; }
.ci-scene-faite.ci-scene-pliee h2 { color: #fff; }
.ci-scene-faite.ci-scene-pliee .ci-scene-fleche { background: #fff; color: var(--bx2); }
.ci-auto-p, .ci-auto-p:hover { background: var(--or); border-color: var(--or); color: var(--bx); }
.ci-auto-p:hover { background: var(--or2); border-color: var(--or2); }
.ci-auto-p.on, .ci-auto-p.on:hover { background: var(--bx2); border-color: var(--bx2); color: #fff; }
.ci-auto-p.on .ci-auto-ico { color: #fff; }

.ci-coche { flex: none; vertical-align: -2px; }
.ci-auto-ico { display: inline-grid; place-items: center; }
.ph-ref-coche .ci-coche, .ci-mini-coche .ci-coche { width: 13px; height: 13px; vertical-align: 0; }

/* 04/10 : « Je laisse l'IA choisir » en interrupteur léger ; le prix estimé vit sur le bouton « Je valide cette scène ». */
.ci-inter { display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; border: 0; background: none; color: var(--encre2); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.ci-inter-piste { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: rgba(23,70,63,.2); transition: background .2s; }
.ci-inter-rond { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(23,70,63,.3); transition: transform .2s; }
.ci-inter.on { color: var(--bx); }
.ci-inter.on .ci-inter-piste { background: var(--bx2); }
.ci-inter.on .ci-inter-rond { transform: translateX(16px); }
.ci-inter:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .ci-inter-piste, .ci-inter-rond { transition: none; } }

/* 04/10 (nuit) : récapitulatif replié comme les scènes ; boutons lisibles au survol sur le vert ; blocs de références
   avec une coche (vide tant qu'il n'y a rien, dorée dès qu'il y a une référence). */
.ci-recaps .ci-rc.ci-rc-vert.ci-rc-plie { padding-top: 16px; padding-bottom: 16px; }
.ci-rc-tete { cursor: pointer; }
.ci-rc-tete h2 { margin: 0; color: #fff; }
.ci-rc-vert .ci-num { background: var(--or); color: var(--bx); }
.ci-rc-vert .ci-scene-fleche { background: #fff; color: var(--bx2); }
.ci-rc-vert:not(.ci-rc-plie) .ci-scene-fleche { transform: rotate(180deg); background: var(--or2); color: var(--bx); }
.ci-rc-vert:not(.ci-rc-plie) .ci-rc-tete { margin-bottom: 14px; }
.ci-rc-vert .vlb-regen .btn.second { background: #fff; color: var(--bx); }
.ci-rc-vert .vlb-regen .btn.second:hover, .ci-rc-vert .vlb-regen .btn.second:focus-visible { background: var(--or2); color: var(--bx); border-color: transparent; }
.ci-ref-num[data-coche] { background: transparent; border: 2px solid rgba(255,255,255,.55); color: transparent; }
.ci-ref-num[data-coche].on { background: var(--or); border-color: var(--or); color: var(--bx); }
.ci-ref-num[data-coche] .ci-coche { width: 17px; height: 17px; vertical-align: 0; }

.ci-note-droite { text-align: right; margin: 8px 0 0; }

/* Le prix estimé d'une scène : tout en bas de son bloc, toujours sous les yeux pendant qu'on règle modèle, durée, qualité. */
.ci-prix-bas { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; color: var(--encre2); }
.ci-prix-bas b { padding: 5px 12px; border-radius: 999px; background: var(--ok-fond); color: var(--or-texte); font-size: 15.5px; font-weight: 600; white-space: nowrap; }
.ci-scene-valider { align-items: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ligne); }

/* 04/10 : l'étape Film (maquette validée). Bandeau vert d'avancement, une carte par scène, cadre vidéo sombre. */
.ci-film-tete { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 22px 24px; margin: 0 0 18px; border-radius: var(--radius); background: var(--bx2); color: #fff; box-shadow: var(--ombre); }
.ci-film-resume { flex: 1 1 260px; min-width: 0; }
.ci-film-resume h2 { margin: 0; color: #fff; }
.ci-film-resume p { margin: 4px 0 12px; font-size: 15px; color: rgba(255,255,255,.86); }
.ci-film-barre { height: 8px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.ci-film-barre i { display: block; height: 100%; border-radius: 999px; background: var(--or); transition: width .4s ease; }
.ci-page .ci-film-tete .btn.ci-monter { flex: none; background: var(--or); color: var(--bx); }
.ci-page .ci-film-tete .btn.ci-monter:hover:not(:disabled) { background: var(--or2); }
.ci-page .ci-film-tete .btn.ci-monter:disabled { background: rgba(255,255,255,.16); color: rgba(255,255,255,.7); opacity: 1; cursor: not-allowed; }
.ci-film { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ci-film.vertical { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.ci-slot { background: var(--carte); border-radius: var(--radius); box-shadow: var(--ombre); padding: 12px; gap: 10px; }
.ci-slot [data-slot-vue] { gap: 10px; }
.ci-cadre-video { position: relative; border-radius: 14px; overflow: hidden; }
.ci-cadre-video .ph-res { border-radius: 14px; }
.ci-etiq { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 11px; border-radius: 999px; font-size: 14px; font-weight: 500; pointer-events: none; }
.ci-etiq-ok { background: var(--or); color: var(--bx); }
.ci-etiq-cours { background: rgba(255,255,255,.18); color: #fff; }
.ci-etiq-vide { background: rgba(255,255,255,.18); color: #fff; }
.ci-etiq-ko { background: #fff; color: #9A3B2A; }
.ci-slot .ci-vide { background: var(--bx); color: rgba(255,255,255,.9); font-size: 14.5px; }
.ci-slot .ci-vide p { margin: 0; }
.ci-slot .ci-vide.ci-ko { background: #F6E3DA; color: #7A2E20; }
.ci-slot .ci-vide.ci-demo { background: var(--bx); }
.ci-slot .ci-rond { width: 26px; height: 26px; border-color: rgba(255,255,255,.25); border-top-color: var(--or); }
.ci-slot .ci-vide .btn { background: var(--or); color: var(--bx); }
.ci-slot .ci-slot-tete { gap: 10px; padding: 0 2px; }
.ci-slot .ci-slot-tete .ci-num { background: var(--or); color: var(--bx); }
.ci-slot .ci-slot-tete b { flex: 1 1 auto; min-width: 0; font-size: 15.5px; font-weight: 600; }
.ci-slot .ci-slot-info { flex: none; display: inline; font-size: 14px; color: var(--encre2); white-space: nowrap; }
.ci-slot .ci-slot-actions { padding: 0 2px 2px; }
.ci-slot .ci-slot-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.ci-slot .ci-modif { padding: 0 2px 4px; }
#ci-film-pied .ci-actions { margin-top: 20px; }
@media (max-width: 640px) { .ci-film-tete { padding: 18px; } .ci-page .ci-film-tete .btn.ci-monter { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .ci-film-barre i { transition: none; } }
.ci-slot .ci-vide.ci-demo p:first-of-type { display: none; }

/* La durée et la qualité d'une scène : dans le coin du cadre vidéo, pour laisser toute la ligne au titre. */
.ci-etiq-info { left: auto; right: 10px; background: rgba(15,35,32,.55); color: #fff; }
.ci-etiq-info.ci-etiq-ko { background: #fff; color: #7A2E20; }
.ci-slot .ci-slot-tete { align-items: flex-start; }
.ci-slot .ci-slot-tete b { line-height: 1.35; padding-top: 3px; overflow-wrap: anywhere; }

/* ---------- 13/10 (Lisa) : l'étape Références au téléphone, le pied d'étapes, la tenue en trois voies, le sélecteur d'IA ---------- */
/* Le sélecteur d'IA d'image, un seul pour la page Références : un panneau blanc léger entre le storyboard et les trois blocs verts. */
.ci-ia-bloc .cia { margin-top: 0; }
.ci-ia-bloc .cia-zone { margin: 0; }
.ci-ia-bloc .ci-note { margin: 14px 0 0; max-width: 700px; }
/* La tenue : « Pinterest · Importer · Décrire ». Rien de coché : une phrase dit ce qui se passe. La voie Pinterest seule n'a que sa ligne. */
.ci-tenue-note { margin: 10px 0 0; }
.ci-pin-seul .ph-pin { margin-top: 0; }
/* Les onglets ne débordent jamais : chaque pastille peut se resserrer, et son texte passer à la ligne si l'écran est étroit. */
.ci-onglets button { min-width: 0; }
/* Le pied d'étapes (« ← étape précédente », « Continuer → ») : toujours hors des encadrés blancs. Sur ordinateur, inchangé. */
@media (max-width: 760px) {
  .ci-page .ci-actions.ci-pied-etapes { flex-direction: column; align-items: stretch; gap: 10px; margin: 6px 0 22px; }
  .ci-page .ci-actions.ci-pied-etapes .btn { width: 100%; flex: none; justify-content: center; text-align: center; min-height: 48px; }
  .ci-page .ci-actions.ci-pied-etapes .droite { display: none; }
}
/* Téléphone (390 px) : rien qui déborde, des cibles de 44 px au moins, des blocs aérés. */
@media (max-width: 640px) {
  .ci-page .btn, .ci-page .btn.petit, .ci-page .btn.second.petit { min-height: 44px; }
  .ci-page .btn.petit { padding: 8px 16px; }
  .ci-page a.ci-etape { min-height: 44px; }
  .ci-page .choix > button { min-height: 44px; }
  .ci-onglets { padding: 3px; gap: 3px; }
  .ci-onglets button { min-height: 44px; padding: 6px 8px; font-size: 14px; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
  .ci-page .ph-pin { gap: 6px; }
  .ci-page .ph-pin input { min-height: 44px; padding: 10px 12px; }
  .ci-page .ph-pin .btn { min-height: 44px; padding: 8px 14px; }
  .ci-page .ph-pin a.ph-pin-chercher { width: 44px; height: 44px; }
  .ci-nom, .ci-ref-p .ci-nom { min-height: 44px; padding: 9px 12px; }
  .ci-mini-plus { min-height: 44px; }
  .ci-page button.nuage.nuage-coin { width: 44px; height: 44px; top: 8px; right: 8px; }
  .ci-page .ci-scene-fleche { width: 44px; height: 44px; }
  .ci-page .ph-combine { gap: 10px; }
  .ci-page .ph-combine-img { width: 104px; height: 104px; }
  /* La croix d'une vignette : une cible de 44 px, un disque visible de 28 px. */
  .ci-page .ph-combine-img .x { top: 0; right: 0; width: 44px; height: 44px; background: radial-gradient(circle at center, rgba(255,255,255,.94) 0 14px, transparent 15px); font-size: 15px; }
  /* Les pastilles d'un reference sheet (nuage, télécharger, régénérer, supprimer) : 44 px, sans s'empiler. Le nuage monte dans le coin,
     les trois autres restent en bas ; le prix de « régénérer » reste dans son infobulle et son étiquette. */
  .ci-ref-p .ci-sheet .ph-res-act { top: 0; right: 0; bottom: 0; left: 0; padding: 0; gap: 0; pointer-events: none; }
  .ci-ref-p .ci-sheet .ph-res-act > button, .ci-ref-p .ci-sheet .ph-res-act > a { position: absolute; bottom: 8px; width: 44px; height: 44px; pointer-events: auto; }
  .ci-ref-p .ci-sheet .ph-res-act > button.nuage { top: 8px; right: 8px; bottom: auto; }
  .ci-ref-p .ci-sheet .ph-res-act > .ph-dl { left: 8px; }
  .ci-ref-p .ci-sheet .ph-res-act > button.ci-regen { left: 50%; transform: translateX(-50%); width: 44px; height: 44px; padding: 0; gap: 0; }
  .ci-ref-p .ci-sheet .ph-res-act > button.ci-regen span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ci-ref-p .ci-sheet .ph-res-act > .ph-x { right: 8px; }
  .ci-ref-p .ci-sheet .ph-res-act > button.ci-regen:disabled { transform: translateX(-50%); }
  .ci-ref-p .ci-sheets { gap: 14px 12px; }
  .ci-ref-corps { padding: 4px 16px 20px; }
  .ci-ajout { padding: 16px 14px; }
  .ci-ajout-suite { margin-top: 20px; padding-top: 16px; }
  .ci-ia-bloc .ci-note { margin-top: 12px; }
}

/* ---------- 13/10 (Lisa) : cinq étapes (« Propositions » après « Scènes »), le coût de l'écriture, l'étape Propositions ---------- */
/* Le fil à cinq cases : chaque case à la mesure de son nom (jamais coupé, le texte à droite du numéro), la place restante partagée entre elles.
   Sur ordinateur, les noms longs sur une rangée. Dès que la place manque (tablette, téléphone), les noms courts, et les cases passent à la ligne
   plutôt que de déborder (trois puis deux à 390 px). */
.ci-etapes.ci-etapes-5 { display: flex; flex-wrap: wrap; }
.ci-etapes-5 .ci-etape { flex: 1 1 auto; padding: 10px 12px; white-space: nowrap; }
.ci-etapes-5 .ci-etape-nom { overflow-wrap: normal; }
@media (max-width: 1100px) {
  .ci-etapes.ci-etapes-5 { gap: 6px; }
  .ci-etapes-5 .ci-etape { padding: 8px 10px; gap: 6px; }
  .ci-etapes-5 .ci-long { display: none; }
  .ci-etapes-5 .ci-court { display: inline; }
}
@media (max-width: 760px) {
  .ci-etapes-5 .ci-etape { font-size: 14px; min-height: 44px; }
  .ci-etapes-5 .ci-num { width: 24px; height: 24px; }
}
/* Le coût approximatif de l'écriture, en petit dans le bouton (comme .vlb-cout de la vidéo libre). */
.ci-cout { font-size: 14px; font-weight: 500; white-space: nowrap; }
/* L'étape Scènes : la note d'une scène changée après l'écriture de sa proposition. */
.ci-note-revoir { margin: 14px 0 0; }
/* L'étape Propositions : le titre de la page, la phrase sous le prompt complet, le résumé du film au-dessus du pied. */
.ci-props-tete { margin-top: 6px; }
.ci-rc-vert .ci-prompt-note { margin: 10px 0 0; }
.ci-rc-vert .ci-rc-revoir { margin: 10px 0 14px; }
.ci-rc-vert .erreur a { color: inherit; text-decoration: underline; }
.ci-props-resume { margin: 16px 0 0; }