/* Sur quel post on travaille (11/10) : le bloc commun à « Une légende » et « Un hook » (source-post.js).
   Air de famille : les boutons du choix de l'IA (.cia-opt), les pastilles de type des hooks, les cartes ivoire des variantes. */
.sp-choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sp-opt { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; border-radius: 16px; border: 1px solid rgba(27,33,31,.18); background: var(--carte); color: var(--bx); font: inherit; font-size: 15.5px; font-weight: 500; line-height: 1.25; text-align: left; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.sp-opt svg { flex: none; color: var(--bx2); }
.sp-opt:hover { border-color: var(--bx2); }
.sp-opt:focus-visible, .sp-ligne:focus-visible, .sp-vig:focus-visible, .sp-x:focus-visible, .sp-depot:focus-within { outline: 2px solid var(--or); outline-offset: 2px; }
.sp-opt.on { background: var(--bx2); border-color: var(--bx2); color: #fff; font-weight: 600; }
.sp-opt.on svg { color: var(--or2, #E7CF8A); }

.sp-panneau { margin-top: 12px; padding: 14px; border-radius: 16px; background: var(--fond); }
.sp-sous { margin: 0 0 8px; font-size: 14px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--or-texte); }
.sp-liste + .sp-sous, .sp-plus + .sp-sous { margin-top: 16px; }
.sp-liste { display: flex; flex-direction: column; gap: 8px; }
.sp-ligne, .sp-choisi { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border-radius: 14px; border: 1px solid transparent; background: var(--carte); color: var(--bx); font: inherit; text-align: left; }
.sp-ligne { cursor: pointer; transition: border-color .2s; }
.sp-ligne:hover { border-color: var(--bx2); }
.sp-choisi { border-color: var(--bx2); }
.sp-format { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--ok-fond); color: var(--bx2); font-size: 14px; font-weight: 500; line-height: 1.4; }
.sp-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-txt b { font-size: 15.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.sp-txt small { font-size: 14px; line-height: 1.35; color: var(--encre2); overflow-wrap: anywhere; }
.sp-choisi .btn.lien { flex: none; min-height: 44px; }
.sp-plus { min-height: 44px; padding-left: 0 !important; }
.sp-note { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--encre2); }
.sp-note a { color: var(--bx2); text-decoration: underline; text-underline-offset: 3px; }
.sp-vignettes + .sp-note, .sp-depot + .sp-note, .sp-plus + .sp-note { margin-top: 10px; }

.sp-vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.sp-vig { position: relative; display: block; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--surface, #ECE7DE); font: inherit; color: var(--bx); }
button.sp-vig { cursor: pointer; }
.sp-vig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-vig.on { outline: 3px solid var(--bx2); outline-offset: 2px; }
.sp-vide { display: flex; align-items: center; justify-content: center; height: 100%; padding: 8px; font-size: 14px; line-height: 1.3; text-align: center; color: var(--encre2); }
.sp-etiq { position: absolute; left: 6px; bottom: 6px; padding: 2px 9px; border-radius: 999px; background: rgba(23,70,63,.82); color: #fff; font-size: 14px; font-weight: 500; line-height: 1.4; }
.sp-x { position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: flex; align-items: flex-start; justify-content: flex-end; padding: 6px; border: 0; background: none; cursor: pointer; }
.sp-x span { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(23,70,63,.82); color: #fff; font-size: 14px; line-height: 1; }

.sp .sp-depot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 92px; margin: 0 !important; padding: 16px; border: 1px dashed rgba(27,33,31,.28); border-radius: 14px; background: var(--carte); color: var(--bx); text-align: center; cursor: pointer; transition: border-color .2s; }
.sp .sp-depot:hover { border-color: var(--bx2); }
.sp .sp-depot.occupe { cursor: progress; opacity: .75; }
.sp-depot input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sp-depot b { font-size: 15.5px; font-weight: 600; color: var(--bx2); }
.sp-depot small { font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--encre2); }
.sp .sp-vignettes + .sp-depot { margin-top: 10px !important; }

@media (max-width: 760px) {
  .sp-choix { grid-template-columns: minmax(0, 1fr); }
  .sp-panneau { padding: 12px; }
  .sp-vignettes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sp-choisi { flex-wrap: wrap; }
  .sp-choisi .sp-txt { flex-basis: calc(100% - 90px); }
}