/* ---------- 01/10 · Page Vidéo en catégories (public/video.js › CATEGORIES) ----------
   Les encadrés sont ceux de la page Photo, repris tels quels (.ph-tuiles-simples, .ph-tuile, dans app.css).
   Ici, seulement ce qui manque : l'encadré en lien, l'encadré « À venir » et sa pastille.
   Textes à 14 px au moins, graisse 600 au plus, jamais de noir. */
a.ph-tuile { text-decoration: none; }
a.ph-tuile:focus-visible { outline: 2px solid var(--bx2); outline-offset: 2px; }

/* « À venir » : le pendant de .carte.a-venir et .a-venir-badge (accueil), pour un encadré .ph-tuile. Non cliquable. */
.ph-tuile.vd-a-venir { cursor: default; box-shadow: none; background: var(--surface); }
.ph-tuile.vd-a-venir:hover { border-color: transparent; transform: none; }
.ph-tuile.vd-a-venir .ph-tuile-ico { opacity: .75; }
.vd-badge { position: absolute; top: 20px; right: 18px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--or-texte); background: var(--ok-fond); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
@media (max-width: 760px) {
  /* Au téléphone, l'encadré est une ligne : la pastille passe sous la description, sans flèche à réserver à droite. */
  .ph-tuile.vd-a-venir { padding-right: 14px; }
  .vd-badge { position: static; align-self: flex-start; margin-top: 5px; }
}

/* Vidéo cinématique : le surtitre du grand bouton « Réalise ma vidéo », à 14 px comme le reste. */
.vd-realise .r-sur { font-size: 14px; }

/* Les styles et les transformations (.modes.sans-img) des pages Vidéo : au téléphone, une colonne et des textes à 14 px au moins. */
@media (max-width: 640px) {
  .modes.sans-img.vd-styles { grid-template-columns: 1fr; }
  .vd-styles .mode b { font-size: 16px; }
  .vd-styles .mode small { font-size: 14px; }
}

/* ---------- 02/10 · La vidéo libre : le questionnaire en étapes (public/video-libre.js) ----------
   Les cartes de références (.ph-ref), les photos importées (.ph-combine) et la galerie à trois pastilles (.ph-res) sont
   celles du studio photo, dans app.css. Ici : les étapes, les cadres photo, le récap, et la vidéo dans la galerie.
   Textes à 14 px au moins, graisse 600 au plus, jamais de noir. */
.vlb { display: grid; gap: 14px; max-width: 860px; min-width: 0; }
.vlb-etape { background: var(--carte); border-radius: var(--radius); box-shadow: var(--ombre); padding: 20px 22px; min-width: 0; }
.vlb-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.vlb-tete h2 { font-size: 18px; font-weight: 600; }
.vlb-num { flex: none; min-width: 28px; height: 28px; padding: 0 9px; border-radius: 999px; background: var(--bx2); color: #fff; display: inline-grid; place-items: center; font-size: 14px; font-weight: 600; white-space: nowrap; }
.vlb-fac { font-size: 14px; color: var(--encre2); }
.vlb-aide { font-size: 14px; line-height: 1.45; color: var(--encre2); margin: 0 0 12px; }
.vlb-aide a { color: var(--bx2); font-weight: 500; }
.vlb-etape > .vlb-aide:last-child, .vlb-compte { margin: 12px 0 0; }
.vlb-err { margin: 12px 0 0; }
.vlb label.btn { cursor: pointer; }
.vlb-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Le petit « i » et son explication. */
.vlb-i { flex: none; width: 28px; height: 28px; 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; padding: 0; }
.vlb-i:hover, .vlb-i[aria-expanded="true"] { background: var(--bx2); border-color: var(--bx2); color: #fff; }
.vlb-i:focus-visible, .vlb-mode-btn:focus-visible, .vlb-x:focus-visible { outline: 2px solid var(--bx2); outline-offset: 2px; }
.vlb-info { background: var(--ok-fond); border-radius: 12px; padding: 10px 14px; font-size: 14.5px; line-height: 1.45; color: var(--bx); margin: 12px 0 0; }
.vlb-info b { font-weight: 600; }
.vlb-info p + p { margin-top: 6px; }
div.vlb-info { margin: 0 0 12px; }

/* 0. Les trois modes. */
.vlb-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.vlb-mode { position: relative; background: #fff; border: 2px solid rgba(23,70,63,.12); border-radius: 14px; transition: border-color .2s, box-shadow .2s; }
.vlb-mode:hover { border-color: rgba(31,91,82,.45); }
.vlb-mode.on { border-color: var(--bx2); box-shadow: 0 0 0 2px rgba(31,91,82,.18); }
.vlb-mode-btn { display: flex; flex-direction: column; gap: 3px; width: 100%; height: 100%; text-align: left; border: 0; background: none; color: var(--bx); padding: 14px 46px 14px 14px; border-radius: 12px; cursor: pointer; }
.vlb-mode-btn b { font-size: 15.5px; font-weight: 600; }
.vlb-mode-btn small { font-size: 14px; line-height: 1.35; color: var(--encre2); }
.vlb-mode .vlb-i { position: absolute; top: 10px; right: 10px; }

/* 1. Les cadres des photos à animer. */
.vlb-photos { display: grid; grid-template-columns: minmax(0, 420px); gap: 12px; }
.vlb-photos.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vlb-cadre { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 150px; padding: 16px; border: 2px dashed rgba(23,70,63,.25); border-radius: 16px; background: var(--fond); min-width: 0; }
.vlb-cadre b { font-size: 15.5px; font-weight: 600; }
.vlb-cadre small { font-size: 14px; color: var(--encre2); }
.vlb-cadre-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vlb-cadre.plein { padding: 0; border: 0; overflow: hidden; background: var(--surface); align-items: stretch; }
.vlb-cadre.plein img { display: block; width: 100%; max-height: 340px; object-fit: contain; }
.vlb-cadre-nom { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); background: rgba(255,255,255,.94); color: var(--bx); font-size: 14px; font-weight: 500; padding: 3px 10px; border-radius: 999px; }
.vlb-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #fff; color: var(--bx); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(23,70,63,.25); padding: 0; }
.vlb-x.fixe { position: static; flex: none; box-shadow: none; border: 1px solid rgba(23,70,63,.18); margin-top: 6px; }
.vlb-x:hover { background: var(--bx); color: #fff; }

/* 1 bis. Les références : les cartes du studio photo, puis les photos importées. */
.vlb-refs { margin-bottom: 12px; }
.vlb-refs .ph-ref-creer .ph-ref-txt b { white-space: normal; }

/* 2. L'action : un champ, ou une scène par champ. */
.vlb-actions textarea, .vlb-modifs textarea { display: block; width: 100%; min-height: 84px; border: 1px solid rgba(27,33,31,.18); border-radius: 14px; padding: 12px 14px; background: #fff; font-size: 16px; line-height: 1.45; resize: vertical; }
.vlb-actions textarea:focus, .vlb-modifs textarea:focus { outline: 2px solid var(--bx2); outline-offset: 1px; border-color: transparent; }
.vlb-actions.auto textarea { opacity: .5; background: var(--fond); }
.vlb-scene + .vlb-scene { margin-top: 12px; }
.vlb-scene label, .vlb-modifs label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.vlb-scene-champ { display: flex; align-items: flex-start; gap: 8px; }
.vlb-scene-champ textarea { flex: 1; min-width: 0; min-height: 64px; }
#vlb-plus { margin-top: 12px; }
#vlb-plus + .vlb-aide { margin: 10px 0 0; }
.vlb-coche { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 15px; font-weight: 500; cursor: pointer; }
.vlb-coche input { width: 20px; height: 20px; margin: 0; accent-color: var(--bx2); flex: none; }
.vlb-coche + .vlb-aide { margin: 8px 0 0; }

/* 4. La durée. */
.vlb-duree { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.vlb-duree input[type=range] { flex: 1; min-width: 0; accent-color: var(--bx2); height: 28px; }
.vlb-duree output { flex: none; min-width: 58px; text-align: right; font-size: 18px; font-weight: 600; }
.vlb-duree.auto { opacity: .5; }
.vlb-duree + .vlb-aide { margin: 0; }

/* 7. La validation, puis le récap. */
.vlb-fin .btn { justify-content: center; }
.vlb-perime { background: var(--ok-fond); border-radius: 12px; padding: 12px 14px; color: var(--bx); margin: 0; }
.vlb-recap { background: var(--carte); border: 1px solid rgba(201,162,74,.55); border-radius: var(--radius); box-shadow: var(--ombre); padding: 22px; min-width: 0; }
.vlb-recap-attente .attente { padding: 6px 0; }
.vlb-recap-sur { font-size: 14px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--or-texte); }
.vlb-recap h2 { font-size: 22px; margin: 4px 0 14px; }
.vlb-recap h3 { font-size: 16px; font-weight: 600; margin: 18px 0 6px; }
.vlb-recap p, .vlb-recap li { font-size: 15px; line-height: 1.5; }
.vlb-reps { margin: 0; }
.vlb-rep { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--ligne); }
.vlb-rep dt { font-size: 14px; color: var(--encre2); }
.vlb-rep dd { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.vlb-rep dd small { display: block; font-size: 14px; color: var(--encre2); margin-top: 2px; }
.vlb-ia { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px; background: var(--ok-fond); color: var(--or-texte); font-size: 14px; white-space: nowrap; }
.vlb-vignettes { display: flex; gap: 6px; }
.vlb-vignettes img { width: 64px; height: 80px; object-fit: cover; border-radius: 10px; }
.vlb-scenes, .vlb-plans { margin: 0; padding-left: 20px; }
.vlb-scenes li + li, .vlb-plans li + li { margin-top: 4px; }
.vlb-prix { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--ok-fond); }
.vlb-prix span { font-size: 15px; font-weight: 500; }
.vlb-prix b { font-size: 22px; font-weight: 600; white-space: nowrap; }
.vlb-prix small { grid-column: 1 / -1; font-size: 14px; color: var(--encre2); }
.vlb-regen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.vlb-modifs { margin-top: 12px; }
.vlb-modifs .btn { margin-top: 10px; }
.vlb-accordeon { margin-top: 18px; border-top: 1px solid var(--ligne); }
.vlb-accordeon summary { list-style: none; cursor: pointer; padding: 14px 0 10px; font-size: 15.5px; font-weight: 600; }
.vlb-accordeon summary::-webkit-details-marker { display: none; }
.vlb-accordeon summary::before { content: '▸ '; color: var(--bx2); }
.vlb-accordeon[open] summary::before { content: '▾ '; }
.vlb-accordeon h3:first-of-type { margin-top: 4px; }
.vlb-accordeon pre { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--fond); color: var(--bx); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-stretch: normal; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.vlb-generer { margin-top: 18px; }
.vlb-generer > .btn { width: 100%; justify-content: center; padding: 14px 22px; }
.vlb-generer .vlb-aide { margin: 10px 0 0; }
#vlb-suivi > * { margin: 12px 0 0; }

/* « Choisir dans mes créations » : la fenêtre des photos de la galerie. */
.vlb-fenetre .vlb-aide { margin: 6px 0 4px; font-size: 15px; }
.vlb-fenetre .feed-voile { background: rgba(15,35,32,.5); }

/* La galerie des vidéos, comme celle des photos : la vignette, la lecture au clic, les trois pastilles rondes. */
.vlb-galerie.ph-resultats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 0; }
.vlb-res .ph-res-img { position: relative; }
.vlb-res video { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; background: var(--surface); pointer-events: none; }
.vlb-lecture { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--bx); display: grid; place-items: center; box-shadow: 0 2px 10px rgba(23,70,63,.25); pointer-events: none; }
.vlb-res-etat { aspect-ratio: 3/4; display: grid; place-items: center; }
.vlb-res-etat > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.vlb-res-msg { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 10px 46px; text-align: center; font-size: 14px; line-height: 1.35; color: var(--bx); }
.vlb-res-msg span { font-weight: 500; }
.vlb-res-msg small { font-size: 14px; color: var(--encre2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.vlb-res-msg .rond { width: 22px; height: 22px; border: 2px solid var(--surface); border-top-color: var(--bx); border-radius: 50%; animation: tourne .9s linear infinite; }
.vlb-zoom video { max-width: 100%; max-height: calc(100vh - 150px); border-radius: 12px; background: var(--bx3); cursor: default; }
.vlb-zoom .ph-zoom-act { flex-wrap: wrap; justify-content: center; }

@media (max-width: 640px) {
  .vlb-etape, .vlb-recap { padding: 16px; }
  .vlb-modes { grid-template-columns: 1fr; }
  .vlb-photos.deux { grid-template-columns: 1fr; }
  .vlb-rep { grid-template-columns: 1fr; gap: 2px; }
  .vlb-fin .btn, .vlb-regen .btn, .vlb-modifs .btn { width: 100%; justify-content: center; }
  .vlb-cadre-act { width: 100%; }
  .vlb-cadre-act .btn { flex: 1 1 100%; justify-content: center; }
  .vlb-galerie.ph-resultats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Vidéo libre (02/10) : « Je valide mes choix » hors de tout encadré, le récap arrive après */
.vlb-valider { margin: 22px 0 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.vlb-valider .btn { min-width: 220px; justify-content: center; }

/* 03/10 : le rappel « tes choix sont gardés » et « Recommencer », toujours visibles ; le prompt complet ouvert par son bouton. */
.vlb-outils { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 14px; }
.vlb-outils .vlb-aide { margin: 0; }
.vlb-prompt-panneau { margin-top: 14px; padding-top: 14px; }
.vlb-prompt-panneau h3 { margin-top: 0; }
.vlb-prompt-fr { white-space: pre-wrap; overflow-wrap: anywhere; }
.vlb-prompt-panneau .btn { margin-top: 6px; }

/* 09/10 : vidéo libre. Recommencer dans la ligne du titre, format et qualité côte à côte. */
.entete.vd-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; max-width: 860px; }
.vd-tete .vlb-outils { margin: 0; }
@media (min-width: 701px) { .vlb-duo { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 14px; align-items: stretch; } .vlb-duo > .vlb-etape { margin: 0; } }
/* 09/10 : le cadre vide prend toute la largeur du bloc, il se resserre autour de la photo une fois choisie. */
.vlb-photos:not(.deux):has(.vlb-cadre:not(.plein)) { grid-template-columns: minmax(0, 1fr); }
.vlb-photos:not(.deux) .vlb-cadre:not(.plein) { align-items: center; text-align: center; min-height: 130px; }
.vlb-photos:not(.deux) .vlb-cadre:not(.plein) .vlb-cadre-act { justify-content: center; }