/* Créations de la communauté : formulaire, galerie, fiche, modération. */
.page-intro h1 { margin: 0 0 8px; font-size: 26px; }
.page-intro p { margin: 0; max-width: 70ch; }

/* Formulaire */
.cform { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.cform fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cform legend { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.field input, .field textarea, .bsearch input {
  font: inherit; font-weight: 400; padding: 10px 12px; border: 2px solid var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--text); width: 100%;
}
.field input:focus, .field textarea:focus, .bsearch input:focus { outline: none; border-color: var(--blue); }
.hint { font-weight: 400; font-size: 13px; color: var(--muted); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bsearch { position: relative; }
.bsuggest { list-style: none; margin: 4px 0 0; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); max-height: 260px; overflow: auto; }
.bsuggest:empty { display: none; }
.bsuggest button { width: 100%; display: flex; gap: 10px; align-items: center; text-align: left; border: 0; background: none; padding: 6px; border-radius: 8px; cursor: pointer; font: inherit; color: inherit; }
.bsuggest button:hover, .bsuggest button:focus-visible { background: var(--surface-2); }
.bsuggest img, .chosen img { width: 48px; height: 36px; object-fit: contain; background: #fff; border-radius: 6px; flex: none; }
.chosen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.chosen li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.chosen li span { flex: 1; min-width: 0; }
.mini-btn { border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px; padding: 4px 9px; cursor: pointer; font: inherit; font-size: 13px; color: inherit; }

.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.thumb { position: relative; width: 104px; }
.thumb img { width: 104px; height: 104px; object-fit: cover; border-radius: 10px; display: block; }
.thumb .x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .65); color: #fff; cursor: pointer; }
.steps-edit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.steps-edit li { display: grid; grid-template-columns: 34px 90px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.steps-edit .n { font-weight: 800; font-size: 18px; text-align: center; }
.steps-edit img { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; }
.steps-edit input { font: inherit; padding: 8px 10px; border: 2px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--text); width: 100%; }
.steps-edit .acts { display: flex; gap: 4px; }
.add-label { align-self: flex-start; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.consent input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.result { margin: 0; font-weight: 600; }
.result.ok { color: var(--green); }
.result.err { color: var(--red-ink); }

/* Galerie */
.gal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ccard { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; color: inherit; text-decoration: none; }
.ccard .cover { aspect-ratio: 4 / 3; background: var(--surface-2); }
.ccard .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccard .in { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.ccard h2 { margin: 0; font-size: 16px; line-height: 1.25; }
.by { color: var(--muted); font-size: 13px; }
.have { font-size: 12px; font-weight: 700; border-radius: 99px; padding: 2px 9px; align-self: flex-start; background: var(--surface-2); }
.have.all { background: var(--green); color: #fff; }
.have.some { background: var(--amber-bg); color: var(--amber-ink); }
.box-mini { display: flex; gap: 4px; }
.box-mini img { width: 40px; height: 30px; object-fit: contain; background: #fff; border-radius: 5px; }
.empty-gal { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 40px 16px; background: var(--surface); border-radius: var(--radius); }

/* Fiche d'une création */
.cdetail { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.gallery-main img { width: 100%; border-radius: 12px; display: block; background: var(--surface-2); }
.gallery-thumbs { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.gallery-thumbs button { border: 2px solid transparent; padding: 0; border-radius: 8px; cursor: pointer; background: none; }
.gallery-thumbs button.on { border-color: var(--blue); }
.gallery-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; display: block; }
.cinfo { display: flex; flex-direction: column; gap: 10px; }
.cinfo h1 { margin: 0; font-size: 26px; line-height: 1.2; }
.desc { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.used { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.used li { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.used img { width: 56px; height: 42px; object-fit: contain; background: #fff; border-radius: 6px; }
.used .ok { color: var(--green); font-weight: 700; }
.used .no { color: var(--muted); }
.notice { display: flex; flex-direction: column; gap: 16px; }
.notice-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.notice ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.notice li { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.notice li img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.notice .cap { padding: 8px 12px; display: flex; gap: 8px; align-items: baseline; }
.notice .cap b { font-size: 18px; }

/* Modération */
.admin-login { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: 720px; }
.admin-login input { flex: 1 1 240px; font: inherit; padding: 9px 12px; border: 2px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); }
.tabs-adm { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs-adm button { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 6px 14px; cursor: pointer; font: inherit; color: inherit; }
.tabs-adm button.on { background: var(--text); color: var(--bg); }
.mod { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.mod .head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.mod .head b { font-size: 17px; }
.mod .imgs { display: flex; gap: 6px; flex-wrap: wrap; }
.mod .imgs img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.mod .imgs img.step { width: 80px; height: 80px; }
.mod .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.danger { background: var(--red-ink); }

@media (max-width: 760px) {
  .cdetail { grid-template-columns: 1fr; }
  .steps-edit li { grid-template-columns: 28px 70px minmax(0, 1fr); }
  .steps-edit img { width: 70px; height: 70px; }
  .steps-edit .acts { grid-column: 2 / -1; }
}