/* Les shootings clé en main de la section Photo (13/10, Lisa) : « Un shooting packshot » et « Un shooting UGC ». Posée par packshot.js.
   Même air que la page Photo (cartes blanches, vert sapin, doré en petits libellés) : ici seulement ce qui est propre aux deux pages. */
.pk-intro { margin: -8px 0 6px; max-width: 620px; color: var(--encre2); font-size: 15.5px; line-height: 1.5; }
.pk-note { margin: 8px 0 0; font-size: 14px; color: var(--encre2); line-height: 1.5; }
.pk-note a { color: var(--bx2); }
.pk-lien { text-decoration: underline; text-underline-offset: 2px; color: var(--bx2); cursor: pointer; }

/* Les lignes repliées (13/10, Lisa, proposition A), numérotées et enchaînées (13/10 soir) : un réglage par ligne, sa pastille (le numéro, puis une coche verte une fois la ligne
   passée), son nom, le choix en cours à droite (plus discret), un chevron. Chaque ligne est un encadré blanc à ombre douce ; une seule ouverte à la fois, bordée de vert ;
   ses options s'ouvrent en place, juste dessous, et entrent en douceur. Le résumé ne passe jamais à la ligne. */
.pk-lignes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; }
.pk-ligne { min-width: 0; border-radius: 16px; border: 1px solid rgba(23,70,63,.09); background: var(--carte); box-shadow: 0 3px 12px rgba(23,70,63,.06); transition: border-color .2s, box-shadow .2s; }
@media (hover: hover) { .pk-ligne:not(.ouverte):hover { border-color: rgba(31,91,82,.45); } }
.pk-ligne.ouverte { border-color: var(--bx2); box-shadow: 0 0 0 1px var(--bx2), 0 3px 12px rgba(23,70,63,.08); }
.pk-ligne-tete { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; box-sizing: border-box; padding: 10px 14px 10px 14px; border: 0; border-radius: 16px; background: none; color: var(--bx); font: inherit; font-size: 15.5px; line-height: 1.3; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pk-ligne-tete:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.pk-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; transition: background .2s, color .2s; }
.pk-ligne.ouverte .pk-num:not(.fait) { background: var(--carte); box-shadow: inset 0 0 0 2px var(--bx2); }
.pk-num.fait { background: var(--bx2); color: #fff; }
.pk-ligne-nom { flex: none; font-weight: 600; white-space: nowrap; }
.pk-ligne-val { flex: 1 1 0; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; font-weight: 400; color: var(--encre2); }
.pk-ligne-val.manque { color: var(--or-texte); font-weight: 500; }
.pk-ligne-ico { flex: none; color: var(--encre2); }
.pk-ligne.ouverte .pk-ligne-ico { transform: rotate(180deg); color: var(--bx2); }
.pk-ligne-corps { padding: 6px 16px 16px; }
.pk-ligne-corps.pk-entre { animation: pk-entre .24s ease-out both; }
@keyframes pk-entre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pk-ligne-corps.pk-entre { animation: none; } }
.pk-ligne-corps > :first-child, .pk-ligne-corps > .ph-fq > div > .section { margin-top: 0; }
.pk-ligne-corps .cia { margin: 0; }
.pk-ligne-corps .cia-titre { display: none; }
.pk-ligne-corps .ph-depot-bloc { margin-bottom: 0; }
.pk-ligne-corps #pk-msg:empty { display: none; }
/* Les petits titres dorés en capitales, les mêmes que ceux du choix de l'IA. */
.pk-titre, .pk-ligne-corps .ph-fq .section, .pk-libre > span.pk-libre-label { margin: 0 0 10px; font-size: 14px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--or-texte); }
.pk-ligne-corps .ph-fq .section .indice { text-transform: none; letter-spacing: 0; }
/* Le pied d'une ligne ouverte : « Continuer », discret, à droite ; dans la série, le compte des photos à gauche. */
.pk-pied { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ligne); }
.pk-compte { margin-right: auto; min-width: 0; padding: 6px 14px; border-radius: 999px; background: var(--doux); color: var(--bx); font-size: 14.5px; font-weight: 500; line-height: 1.3; }
.pk-compte b { font-weight: 600; }
.pk-continuer { flex: none; color: var(--bx2); border-color: rgba(31,91,82,.4); }
/* Tout est réglé : « Lancer mon shooting » est mis en valeur (liseré doré, une respiration au moment où il devient prêt). */
.pk-page .ph-generer-barre.pk-pret #pk-lancer { box-shadow: 0 0 0 3px var(--fond), 0 0 0 5px var(--or), 0 10px 24px -10px rgba(23,70,63,.45); animation: pk-pret .7s ease-out both; }
@keyframes pk-pret { 0% { transform: scale(.97); } 55% { transform: scale(1.015); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .pk-page .ph-generer-barre.pk-pret #pk-lancer { animation: none; } }

/* Le produit : les cartes (produits créés, photo importée), puis la zone de dépôt. */
.pk-page .pk-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 132px)); gap: 10px; }
.pk-page .pk-cartes .ph-ref { display: flex; flex-direction: column; min-height: 0; padding: 0; justify-content: flex-start; }
.pk-page .pk-cartes .ph-ref-img { position: relative; display: block; aspect-ratio: 1; background: var(--surface); overflow: hidden; }
.pk-page .pk-cartes .ph-ref-txt { padding: 8px 10px 10px; gap: 2px; min-width: 0; }
.pk-page .pk-cartes .ph-ref-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-page .pk-cartes .ph-ref-coche { top: 6px; right: 6px; transform: none; width: 24px; height: 24px; font-size: 14px; box-shadow: 0 1px 4px rgba(23,70,63,.3); }
.pk-page .pk-cartes .ph-ref-creer { min-height: 0; flex-direction: column; justify-content: center; align-items: center; padding: 12px 10px; grid-column: span 2; max-width: 274px; }
.pk-page .pk-cartes[data-role="perso"] .ph-ref-txt b { white-space: normal; overflow: visible; line-height: 1.25; }
.pk-vide { display: grid; place-items: center; width: 100%; height: 100%; color: var(--bx2); }
.pk-vide svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pk-depot { flex-direction: column; gap: 4px; min-height: 96px; }
.pk-depot-sous { display: block; font-size: 14px; color: var(--encre2); font-weight: 400; }

/* La série, à plat (13/10 soir, Lisa) : le choix rapide en trois grandes pastilles, puis chaque groupe ouvert sous son petit titre doré, ses options en pastilles à cocher
   (une vignette dessinée par angle ou par ambiance), et la carte « Autre ». Aucun repli dans la ligne, aucune boîte à défilement : la page s'allonge. */
.pk-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 460px; }
.pk-presets button { padding: 12px 8px; font-size: 15.5px; font-weight: 600; text-align: center; }
.pk-groupe { margin-top: 18px; }
.pk-unites { display: flex; flex-wrap: wrap; gap: 8px; }
.pk-unite { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 40px; box-sizing: border-box; padding: 5px 14px 5px 8px; border-radius: 999px; border: 1px solid rgba(27,33,31,.18); background: #fff; color: var(--bx); font: inherit; font-size: 14.5px; font-weight: 500; line-height: 1.2; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, color .2s; -webkit-tap-highlight-color: transparent; }
.pk-unite svg, .pk-autre svg { flex: none; width: 32px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pk-unite svg { opacity: .8; }
@media (hover: hover) { .pk-unite:not(.on):hover, .pk-autre:not(.on):hover { border-color: var(--bx2); } }
.pk-unite:focus-visible, .pk-autre:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.pk-unite.on { background: var(--bx2); border-color: var(--bx2); color: #fff; }
.pk-unite.on svg { opacity: 1; }
.pk-autre { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 460px; box-sizing: border-box; padding: 10px 44px 10px 12px; border-radius: 14px; border: 1px dashed rgba(27,33,31,.28); background: var(--fond); color: var(--bx); font: inherit; font-size: 14.5px; font-weight: 500; line-height: 1.25; text-align: left; cursor: pointer; transition: border-color .2s, background .2s; -webkit-tap-highlight-color: transparent; }
.pk-autre svg { width: 40px; height: 30px; stroke-width: 1.8; color: var(--bx2); }
.pk-autre-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pk-autre.on { border: 1px solid var(--bx2); background: var(--carte); box-shadow: 0 0 0 1px var(--bx2); }
.pk-unite-sous { font-size: 14px; font-weight: 400; color: var(--encre2); }
.pk-coche { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--bx2); color: #fff; display: none; place-items: center; }
.pk-autre.on .pk-coche { display: grid; }

/* « Autre » : le champ libre qui s'ouvre sous les pastilles (ou sous la carte), et les sous-blocs (photos de la personne, tenue). */
.pk-libre { margin-top: 10px; max-width: 620px; }
.pk-libre-lignes { margin-top: 12px; }
.pk-libre-label { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 500; color: var(--bx); }
.pk-libre input[type="text"], .pk-libre textarea, .pk-voies textarea { display: block; width: 100%; box-sizing: border-box; border: 1px solid rgba(27,33,31,.18); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 16px; line-height: 1.45; background: #fff; color: var(--bx); }
.pk-libre textarea, .pk-voies textarea { resize: vertical; }
.pk-libre input[type="text"]:focus-visible, .pk-libre textarea:focus-visible, .pk-voies textarea:focus-visible { outline: 2px solid var(--bx2); outline-offset: 1px; }
.pk-sous-bloc { margin-top: 12px; max-width: 620px; }
.pk-sous-bloc .ph-depot-bloc { margin-top: 0; }
.pk-vignettes { margin: 0 0 12px; }
.pk-voies .ph-pin { margin-top: 0; }
.pk-page .ph-pin-msg:empty { display: none; }
.pk-page .ph-pin-msg { margin-top: 8px; }
.pk-page .choix + .pk-note { margin-top: 10px; }
.pk-page .pk-note + .choix { margin-top: 12px; }

/* Le fond : chaque pastille porte sa teinte ; « Couleur du produit » montre la teinte lue sur la photo. */
.pk-fonds button { display: inline-flex; align-items: center; gap: 8px; }
.pk-swatch { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(27,33,31,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.pk-swatch-vide { background: repeating-linear-gradient(45deg, rgba(27,33,31,.14) 0 3px, transparent 3px 6px) !important; }

/* La planche : une case par photo, le nom de l'angle dessous, le format de la série. */
.pk-serie { margin-top: 8px; }
.pk-avancement { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: var(--ok-fond); border: 1px solid rgba(201,162,74,.45); color: var(--bx); font-size: 15.5px; font-weight: 500; }
.pk-avancement .rond { width: 18px; height: 18px; border: 2px solid rgba(201,162,74,.35); border-top-color: var(--or-texte); border-radius: 50%; animation: tourne .9s linear infinite; flex: none; }
.pk-avancement.pk-fini { background: var(--carte); border-color: var(--ligne); }
.pk-planche { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pk-slot .ph-res { aspect-ratio: var(--pk-ratio, 1 / 1); display: grid; place-items: center; }
.pk-slot .ph-res-img { width: 100%; height: 100%; }
.pk-slot .ph-res-img img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.pk-slot .ph-res.en-cours { min-height: 0; padding: 10px; font-size: 14px; color: var(--encre2); text-align: center; }
.pk-encours { display: grid; place-items: center; align-content: center; gap: 8px; }
.pk-encours .rond { width: 22px; height: 22px; border: 2px solid rgba(27,33,31,.12); border-top-color: var(--bx2); border-radius: 50%; animation: tourne .9s linear infinite; }
.pk-file { border: 2px dashed rgba(27,33,31,.16); background: var(--fond); color: var(--encre2); font-size: 14px; }
.pk-rate { padding: 10px; background: #F5E9DD; align-content: center; gap: 8px; text-align: center; font-size: 14px; line-height: 1.4; color: var(--bx); }
.pk-rate .btn { white-space: normal; text-align: center; line-height: 1.25; }
.pk-nom { margin-top: 6px; font-size: 14px; font-weight: 500; text-align: center; color: var(--bx); }
.pk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pk-n { font-weight: 500; opacity: .85; }

@media (max-width: 640px) {
  .pk-page .pk-cartes { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .pk-page .pk-cartes .ph-ref-creer { grid-column: span 2; max-width: none; }
  .pk-presets, .pk-autre { max-width: none; }
  .pk-unite { padding: 5px 12px 5px 7px; }
  .pk-unite svg { width: 28px; height: 21px; }
  .pk-planche { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pk-actions .btn { flex: 1 1 100%; justify-content: center; }
  .pk-avancement { font-size: 15px; }
  .pk-libre, .pk-sous-bloc { max-width: none; }
  .pk-ligne-tete { padding: 10px 10px 10px 12px; gap: 10px; }
  .pk-ligne-corps { padding: 6px 12px 14px; }
}

/* Clavier ouvert au téléphone (13/10, Lisa) : même tenue que dans Discuter avec une IA. Le temps de la saisie (classe « pk-clavier » posée sur <html> par packshot.js),
   la barre du bas de l'app s'efface, et la page garde sous elle la hauteur que le clavier recouvre (--pk-clavier) pour que le dernier champ puisse remonter au-dessus. */
@media (max-width: 900px) {
  html.pk-clavier .rail { display: none; }
  html.pk-clavier .pk-page::after { content: ""; display: block; height: var(--pk-clavier, 0px); }
  /* Le bouton « Lancer mon shooting » reste collé en bas d'écran en temps normal : pendant la saisie il reprend sa place dans la page, pour ne pas passer sur le champ. */
  html.pk-clavier .pk-page .ph-generer-barre { position: static; }
}