/* ==========================================================================
   Les boutons de réponse, et l'accusé de réception qui les suit.

   Ils ne sont pas visibles avec le reste du dernier chapitre : ils
   n'apparaissent qu'une fois la photo dégagée. D'où l'opacité de départ
   posée sur .reponse, que seule la timeline de révélation lève —
   voir assets/invitation/js/timeline.js.
   ========================================================================== */

.reponse {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;

  opacity: 0;
  pointer-events: none;    /* levé par la timeline, avec l'opacité */
}

.rsvp {
  display: flex;
  gap: 10px;
}

.rsvp button {
  padding: 11px 20px;
  border: 1px solid var(--or);
  border-radius: 999px;
  background: transparent;
  color: var(--encre);

  font-family: inherit;
  font-size: 14px;
  letter-spacing: .15em;
  text-transform: uppercase;

  cursor: pointer;
  transition: background .25s, color .25s, transform .1s;
}
.rsvp button:hover  { background: var(--or); color: var(--ivoire); }
.rsvp button:active { transform: scale(.96); }
.rsvp button.decline { border-color: #c8b3a5; color: #9a7d6e; }

/* ---- Accusé de réception ---------------------------------------------- */
.toast {
  min-height: 1.4em;       /* réserve la place : l'accusé ne doit pas pousser
                              les boutons quand il apparaît */
  color: var(--encre);
  font-size: 14px;
  letter-spacing: .1em;

  opacity: 0;
  pointer-events: none;
}

/* Le bouton retenu reste marqué : après un rechargement, le destinataire
   doit retrouver sa réponse sans avoir à s'en souvenir. */
.rsvp button.choisi {
  background: var(--or);
  color: var(--ivoire);
  border-color: var(--or);
}
.rsvp button.decline.choisi {
  background: #c8b3a5;
  border-color: #c8b3a5;
}

/* Pendant l'envoi, et quand les réponses sont closes. */
.rsvp button:disabled {
  cursor: default;
  opacity: .55;
}
.rsvp button:disabled:hover {
  background: transparent;
  color: var(--encre);
}
.rsvp button.decline:disabled:hover { color: #9a7d6e; }
.rsvp button.choisi:disabled:hover  { background: var(--or); color: var(--ivoire); }

/* ---- Nombre de personnes ----------------------------------------------
   Affiché seulement quand le destinataire a plus d'une place. La borne haute
   est rappelée sous le compteur ; c'est le serveur qui la fait respecter. */
.places {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  color: var(--encre);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.places-controle {
  display: flex;
  align-items: center;
  gap: 14px;
}

.places-pas {
  width: 34px;
  height: 34px;
  border: 1px solid var(--or);
  border-radius: 999px;
  background: transparent;
  color: var(--or);

  font-family: inherit;
  font-size: 18px;
  line-height: 1;

  cursor: pointer;
  transition: background .25s, color .25s, opacity .25s;
}
.places-pas:hover:not(:disabled) { background: var(--or); color: var(--ivoire); }
.places-pas:disabled { opacity: .3; cursor: default; }

.places-valeur {
  min-width: 1.6em;        /* le bloc ne doit pas sauter en passant de 9 à 10 */
  text-align: center;

  font-family: var(--calligraphie);
  font-size: 34px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  color: var(--encre);
}

.places-limite {
  font-size: 11px;
  letter-spacing: .18em;
  color: #9a7d6e;
}

.places--fige { opacity: .6; }

/* ---- Aperçu du back-office --------------------------------------------
   Bandeau discret rappelant qu'on regarde une maquette. Il n'apparaît jamais
   dans une vraie invitation. */
.apercu-note {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;

  padding: 6px 12px;
  background: rgba(58, 20, 31, .88);
  color: #f2ebdc;

  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;

  pointer-events: none;
}