/* Enquête entre amis (creer-une-enquete.html, 08/10/2026). Chargé seulement par body.h/game.h/friends.h.php :
   rien ici ne touche aux autres pages. Couleurs et polices : les variables de css.h/main-style.h.css. */

.friends-page { max-width: 860px; }
.friends-form { display: grid; gap: 18px; margin-top: 18px; }
.friends-block { border: 1.5px solid var(--paper-line); border-radius: 8px; padding: 14px 16px; background: var(--paper); }
.friends-block h2 { font-family: var(--display); font-weight: 400; font-size: 1.25rem; margin: 0 0 8px; display: inline; }
.friends-block > h2 { display: block; }
.friends-block h2 small { font-family: var(--body); font-size: 0.85rem; color: var(--ink-soft); }
/* 08/10 : la flèche du navigateur sortait du cadre (blocs 3 et 4) : on la remplace par la nôtre, dans le cadre. */
.friends-block summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px; }
.friends-block summary::-webkit-details-marker { display: none; }
.friends-block summary::before { content: "▸"; font-size: 1.1rem; color: var(--ink-soft); transition: transform 0.15s; flex: none; }
.friends-block[open] > summary::before { transform: rotate(90deg); }
.friends-block summary h2 { display: inline; }
.friends-block h3 { font-size: 1rem; margin: 12px 0 6px; }
.friends-count { font-family: var(--body); font-size: 0.85rem; color: var(--ink-soft); background: var(--folder);
  border-radius: 10px; padding: 1px 8px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.friends-help { font-size: 0.9rem; color: var(--ink-soft); margin: 6px 0 10px; }

.friends-form input[type="text"], .friends-form select, .friends-form textarea {
  font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid var(--paper-line); border-radius: 6px;
  padding: 7px 9px; min-height: 40px; width: 100%; box-sizing: border-box; }
.friends-form textarea { resize: vertical; }
.friends-form button { font: inherit; cursor: pointer; border: 1.5px solid var(--paper-line); border-radius: 6px;
  background: var(--folder); color: var(--ink); padding: 6px 12px; min-height: 40px; }
.friends-form button:disabled { opacity: 0.4; cursor: default; }

.friends-paste { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; margin-bottom: 10px; }
.friends-names, .friends-places { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); counter-reset: friends; }
.friends-name-row { display: grid; grid-template-columns: 1fr 40px 36px; gap: 4px; }
.friends-gender { font-size: 1.15rem; padding: 0 !important; }
.friends-gender[data-gender="f"] { background: #f3d6e2 !important; color: #7a2350 !important; }
.friends-gender[data-gender="m"] { background: #d6e4f3 !important; color: #23497a !important; }
.friends-remove { padding: 0 !important; background: transparent !important; }
.friends-add { margin-top: 8px; }

.friends-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.friends-grid label, .friends-wide { display: grid; gap: 4px; font-weight: 600; font-size: 0.92rem; }
.friends-wide { margin-top: 10px; }

.friends-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.friends-chip { min-height: 36px !important; background: var(--paper) !important; }
.friends-chip[aria-pressed="true"] { background: var(--green-wash) !important; border-color: var(--green) !important; font-weight: 600; }
.friends-chip-own { border-style: dashed !important; }
.friends-own-row { display: grid; grid-template-columns: 64px 1fr 1fr auto; gap: 6px; }

.friends-final { display: grid; gap: 10px; }
.friends-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; }
.friends-consent input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.friends-error { background: var(--red-wash); border-left: 5px solid var(--red); padding: 8px 12px; margin: 0; font-weight: 600; }
#create-button { justify-self: start; font-size: 1.1rem; }

.friends-ready { margin-top: 18px; border: 2px solid var(--green); border-radius: 8px; padding: 16px; background: var(--green-wash); }
.friends-ready h2 { font-family: var(--display); font-weight: 400; margin-top: 0; }
.friends-link input { width: 100%; box-sizing: border-box; font: inherit; padding: 8px; border: 1.5px solid var(--paper-line); border-radius: 6px; background: var(--paper); color: var(--ink); }
.friends-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.friends-actions button:not(.big-button), .friends-again { font: inherit; cursor: pointer; border: 1.5px solid var(--paper-line);
  border-radius: 6px; background: var(--paper); color: var(--ink); padding: 8px 12px; }
.friends-message { white-space: pre-wrap; background: var(--paper); padding: 10px; border-radius: 6px; font-size: 0.9rem; }

/* Bandeau en haut de l'enquête : inviter d'autres suspects. */
.friends-invite { max-width: 1180px; margin: 10px auto 0; padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; font-weight: 600; }
.friends-invite span { margin-right: auto; }
.friends-invite button, .friends-report { font: inherit; font-weight: 400; cursor: pointer; border: 1.5px solid var(--paper-line);
  border-radius: 6px; background: var(--paper); color: var(--ink); padding: 5px 10px; min-height: 36px; }
.friends-report { margin-left: 6px; font-size: 0.85rem; }

@media (max-width: 699px) {
  .friends-names, .friends-places, .friends-grid { grid-template-columns: minmax(0, 1fr); }
  .friends-paste { grid-template-columns: 1fr; }
  .friends-own-row { grid-template-columns: 64px 1fr; }
  .friends-own-row #own-name { grid-column: 2; }
  .friends-own-row #own-category { grid-column: 1 / -1; }
  .friends-own-row #own-add { grid-column: 1 / -1; }
  .friends-invite { padding: 8px 12px; font-size: 0.9rem; }
  .friends-invite span { flex-basis: 100%; }
  .friends-block { padding: 12px; }
}

/* « Mes enquêtes » et modification (08/10, soir). */
.friends-mine { margin-top: 16px; border: 1.5px solid var(--paper-line); border-radius: 8px; padding: 12px 16px; background: var(--folder); }
.friends-mine h2 { font-family: var(--display); font-weight: 400; font-size: 1.2rem; margin: 0; }
.friends-mine-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.friends-mine-item { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between;
  background: var(--paper); border-radius: 6px; padding: 8px 10px; }
.friends-mine-title { font-weight: 600; }
.friends-mine-title small { font-weight: 400; color: var(--ink-soft); }
.friends-mine-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.friends-mine-actions a, .friends-mine-actions button, .friends-invite-edit { font: inherit; font-size: 0.9rem; cursor: pointer;
  border: 1.5px solid var(--paper-line); border-radius: 6px; background: var(--paper); color: var(--ink); padding: 4px 10px;
  text-decoration: none; display: inline-flex; align-items: center; min-height: 34px; }
.friends-invite-edit { font-weight: 400; min-height: 36px; }
.friends-editing { background: var(--folder); border-left: 5px solid var(--pencil); padding: 10px 14px; border-radius: 4px; }
@media (max-width: 699px) {
  .friends-mine-item { flex-direction: column; align-items: flex-start; }
}

/* QR code (08/10) : js.h/friends-qr.h.js */
.qr-dialog { border: 2px solid var(--paper-line); border-radius: 10px; background: var(--paper); color: var(--ink);
  max-width: min(460px, calc(100vw - 32px)); padding: 18px 20px; text-align: center; }
.qr-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.qr-dialog h2 { font-family: var(--display); font-weight: 400; margin: 0 0 6px; }
.qr-help { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 12px; }
.qr-box canvas { width: min(320px, 70vw); height: auto; image-rendering: pixelated; border-radius: 6px; }
.qr-title { font-weight: 700; margin: 8px 0 12px; }
.qr-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0; }
.qr-actions button:not(.big-button) { font: inherit; cursor: pointer; border: 1.5px solid var(--paper-line); border-radius: 6px;
  background: var(--paper); color: var(--ink); padding: 8px 12px; }