/* Hook, Légende, Note ton post (13/10, Lisa) : le formulaire en encadrés, un par question. Les codes des parcours les plus aboutis (l'étape Réglages
   de Reproduire une vidéo) : des encadrés blancs à ombre douce (.panneau), un petit titre doré en capitales par encadré, et un seul, des pastilles de choix.
   Les styles de base des cartes de résultat restent dans app.css (.hk-, .lg-) ; ici, le formulaire, les tailles de texte remises à 14 px au moins,
   et depuis le 14/10 la banque de hooks, l'étoile, l'ampoule, et le bloc en lecture seule de la légende. */
.so-blocs { display: flex; flex-direction: column; gap: 16px; max-width: 860px; margin-bottom: 30px; }
.so-bloc.panneau { padding: 24px 28px; }
.so-titre { display: block; margin: 0 0 14px; font-size: 14px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--or-texte); line-height: 1.4; }
.so-titre .indice { font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--encre2); }
.so-bloc .champ { margin-bottom: 0; }
.so-bloc .champ + .champ { margin-top: 20px; }
.so-bloc .champ label { font-size: 15.5px; font-weight: 500; color: var(--bx); }
.so-bloc .champ textarea, .so-bloc .champ input[type=text] { font: inherit; font-size: 16px; line-height: 1.5; color: var(--bx); }
.so-bloc .champ textarea.court { min-height: 72px; }
.so-bloc .cia { margin: 0; }
.so-choix { gap: 8px; }
.so-choix button { min-height: 42px; padding: 9px 18px; font-size: 15px; font-weight: 500; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.so-choix button:hover { border-color: var(--bx2); }
.so-choix button.on { font-weight: 600; }
.so-choix button:focus-visible, .so-lancer .btn:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.so-lancer { display: flex; justify-content: flex-end; margin-top: 6px; }
.so-blocs > #hk-msg:empty, .so-blocs > #lg-msg:empty, .so-blocs > #np-msg:empty { display: none; }

/* « Un post du calendrier » (14/10) : un seul bouton sous le champ, qui s'ouvre sur les posts du calendrier (source-post.js › monterPostCalendrier). */
.so-bloc .sp-cal { margin-top: 12px; }
.sp-cal .sp-cal-btn { width: auto; min-height: 48px; padding: 8px 18px; border-radius: 999px; }
.sp-cal .sp-ligne { cursor: pointer; }

/* « Recommencer » dans la ligne du titre (14/10, Lisa), comme dans les autres parcours : à droite du titre sur ordinateur ; au téléphone, la règle
   d'app.css ([id$="recommencer"]) le pose à gauche, juste sous le titre, et la phrase d'introduction passe dessous. */
@media (min-width: 641px) {
  .entete.so-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; align-items: center; }
  .so-tete > h1 { grid-column: 1; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }
  .so-tete > [id$="recommencer"] { grid-column: 2; grid-row: 1; }
  .so-tete > p { grid-column: 1 / -1; grid-row: 2; }
}

/* Le résultat de la légende et des hooks : rien sous 14 px. */
#lg-res, #hk-res, .hk-banque { max-width: 1180px; }
#lg-res > .panneau { max-width: 860px; }
#lg-res:not(:empty) { margin-bottom: 30px; }

/* La légende (14/10) : un bloc en lecture seule, le texte puis les hashtags ; « Copier » à droite du titre. Du texte posé, pas un champ : rien ne défile, rien ne s'édite. */
#lg-res .lg-bloc + .lg-bloc { margin-top: 16px; }
.lg-bloc .lg-tete { justify-content: space-between; margin-bottom: 14px; }
.lg-bloc .lg-tete .btn { flex: none; min-height: 44px; padding: 8px 20px; font-size: 15px; }
.lg-statique { padding: 16px 18px; border-radius: 14px; background: #EEF4F1; color: var(--bx); }
.lg-statique p { margin: 0; font-size: 16px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.lg-statique .lg-hash { margin-top: 14px; color: var(--bx2); font-weight: 500; }
.lg-autre + .lg-autre { margin-top: 12px; }
.lg-autre-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.lg-autre-tete b { font-size: 15px; font-weight: 600; color: var(--or-texte); }
.lg-autre-tete .btn { flex: none; min-height: 44px; }

/* Les hooks (14/10) : « Copier » et l'étoile à droite du type, l'ampoule devant l'explication ; la banque en accordéon, au-dessus des encadrés. */
.hk-carte .hk-haut { gap: 8px; min-height: 44px; }
.hk-outils { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: none; }
.hk-outils .btn { min-height: 40px; }
.hk-etoile { flex: none; width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: 50%; background: transparent; color: var(--encre2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, color .15s ease; }
.hk-etoile:hover { background: var(--doux); }
.hk-etoile.on { color: var(--or); }
.hk-etoile.on svg { fill: var(--or); }
.hk-etoile:focus-visible, .hk-banque-btn:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.hk-carte .hk-pourquoi { display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; }
.hk-pourquoi svg { flex: none; margin-top: 1px; color: var(--or-texte); }
.hk-banque { margin: 0 0 16px; }
.hk-banque-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 18px; border: 1px solid var(--or2); border-radius: 999px; background: var(--ok-fond); color: var(--bx); font: inherit; font-size: 15.5px; font-weight: 500; cursor: pointer; transition: background .2s, border-color .2s; }
.hk-banque-btn:hover { border-color: var(--or); }
.hk-banque-btn > svg:first-child { color: var(--or); fill: var(--or); width: 20px; height: 20px; }
.hk-banque-btn > svg:last-child { color: var(--encre2); transition: transform .2s ease; }
.hk-banque.ouvert .hk-banque-btn > svg:last-child { transform: rotate(180deg); }
.hk-banque-n { min-width: 24px; padding: 1px 8px; border-radius: 999px; background: var(--bx2); color: #fff; font-size: 14px; font-weight: 500; text-align: center; }
.hk-banque-n:empty { display: none; }
#hk-gardes { margin-top: 14px; }
/* Ouverte (14/10, Lisa), la banque est un seul encadré doré : le bouton en devient la tête, les cartes blanches des hooks sont dedans. */
.hk-banque.ouvert { padding: 6px 6px 18px; border: 1px solid var(--or2); border-radius: 26px; background: var(--ok-fond); }
.hk-banque.ouvert .hk-banque-btn { display: flex; width: 100%; border-color: transparent; background: transparent; }
.hk-banque.ouvert .hk-banque-btn:hover { border-color: transparent; background: rgba(201,162,74,.10); }
.hk-banque.ouvert .hk-banque-btn > svg:last-child { margin-left: auto; }
.hk-banque.ouvert #hk-gardes { margin: 8px 12px 0; }
.hk-banque-vide { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--carte); box-shadow: var(--ombre); color: var(--encre2); font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .hk-etoile, .hk-banque-btn, .hk-banque-btn > svg:last-child { transition: none; } }

@media (max-width: 640px) {
  .so-blocs { gap: 12px; }
  .so-bloc.panneau { padding: 18px 16px; }
  .so-titre { margin-bottom: 12px; }
  .so-choix button { min-height: 44px; }
  .so-lancer .btn { width: 100%; justify-content: center; min-height: 50px; }
  .sp-cal .sp-cal-btn { width: 100%; }
  .hk-banque-btn { width: 100%; }
  .hk-banque.ouvert { padding: 4px 4px 12px; border-radius: 22px; }
  .hk-banque.ouvert #hk-gardes { margin: 6px 8px 0; }
  /* 14/10 (Lisa) : au téléphone, Recommencer vient SOUS le sous-texte (titre, texte, bouton), pas entre les deux. */
  .so-tete > p { order: 11; flex: 1 1 100%; }
  .so-tete > [id$="recommencer"] { order: 12; }
  .hk-banque-btn > svg:last-child { margin-left: auto; }
  .lg-statique { padding: 14px; }
}