/* Action ou Vérité, the two decks of the page (template/articles/100-questions-action-ou-verite-couple.php, 2026-11-10,
   the owner's mockup B), on the draw and the card of game-card.css: two decks face down, Vérité in violet and Action in
   coral; touching one turns its top card over in the place kept above them, so that nothing moves (the place keeps the
   height of the card, the card the height of its longest text). Only on that page. */

/* The title in even lines (« couple : » never alone on its line). */
.lc-aovPage .lc-hero h1 {
  text-wrap: balance;
}

/* The chips of the draw at 44 px, the size of a finger (docs/GUIDE_EDITORIAL.md, 3), tried on this page first;
   game-card.css follows in a lot of its own (naughty questions, Questions couple, new year). */
.lc-aov .lc-qcDraw__level {
  min-height: 44px;
}

/* The paragraphs of the rules and of the study apart (styles.css sets every p to margin 0): two to four lines each on
   a phone (docs/GUIDE_EDITORIAL.md, 3). */
.lc-aovPage #regles > p + p {
  margin-top: 14px;
}

/* One column of reading: the page has no summary. */
.lc-aovPage .lc-content {
  grid-template-columns: minmax(0, 1fr);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- The place of the card, and what it says while it waits for a touch ---- */
.lc-aov__slot {
  position: relative;
  display: grid;
}

.lc-aov__slot > .lc-aov__hint,
.lc-aov__slot > .lc-aov__card {
  grid-area: 1 / 1;
}

.lc-aov__hint {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  border: 1.5px dashed rgba(255, 255, 255, .26);
  border-radius: 26px;
  background: rgba(255, 255, 255, .04);
  text-align: center;
}

.lc-aov__hint[hidden] {
  display: none;
}

.lc-pillar .lc-aov__hintTitle {
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: 1.12rem;
  font-weight: 900;
}

.lc-pillar .lc-aov__hintSub {
  margin: 0;
  color: rgba(255, 255, 255, .62);
  font-size: .9rem;
  font-weight: 600;
}

.lc-aov.is-waiting .lc-aov__card {
  visibility: hidden;
}

/* ---- The card: the face of game-card.css, its tag in the colour of its deck ---- */
.lc-aov__card {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: 50% 50%;
}

.lc-aov__card .lc-qcCard__top {
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lc-aov__card .lc-qcCard__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lc-aov__tagIcon {
  display: inline-flex;
}

.lc-aov__tagIcon[hidden] {
  display: none;
}

.lc-aov__tagIcon svg {
  width: 14px;
  height: 14px;
}

.lc-aov__card[data-kind="dare"] .lc-qcCard__tag {
  background: #ffe8f1;
  color: #c8105a;
}

.lc-aov__share {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -6px -6px -6px 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #f6eef4;
  color: #5b1d48;
  cursor: pointer;
}

.lc-aov__share:focus-visible {
  outline: 3px solid rgba(255, 185, 56, .9);
  outline-offset: 2px;
}

.lc-aov__checkIcon,
.lc-aov__share.is-copied .lc-aov__shareIcon {
  display: none;
}

.lc-aov__share.is-copied .lc-aov__checkIcon {
  display: block;
}

/* A deck played out says so on the card, in the cell of the text, so that nothing moves. */
.lc-pillar .lc-aov__msg {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  visibility: hidden;
  color: #6f5a71;
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

.lc-aov__card.is-msg .lc-qcCard__q {
  visibility: hidden;
}

.lc-aov__card.is-msg .lc-aov__msg {
  visibility: visible;
}

.lc-aov__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The card turned over from its deck, below on the left (Vérité) or on the right (Action). */
.lc-aov__card.is-flip-truth {
  animation: lc-aov-truth .62s cubic-bezier(.2, .8, .2, 1) both;
}

.lc-aov__card.is-flip-dare {
  animation: lc-aov-dare .62s cubic-bezier(.2, .8, .2, 1) both;
}

.lc-aov__card.is-fade {
  animation: lc-aov-fade .28s ease both;
}

@keyframes lc-aov-truth {
  0% { opacity: 0; transform: perspective(900px) translate(-26%, 86%) scale(.48) rotateY(-180deg); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

@keyframes lc-aov-dare {
  0% { opacity: 0; transform: perspective(900px) translate(26%, 86%) scale(.48) rotateY(180deg); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

@keyframes lc-aov-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- The two decks ---- */
.lc-aov__decks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.lc-aov__pile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lc-aov__deck {
  position: relative;
  display: block;
  width: 100%;
  height: 150px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease;
}

.lc-aov__deck:active {
  transform: scale(.97);
}

.lc-aov__deck:focus-visible {
  outline: 3px solid rgba(255, 185, 56, .9);
  outline-offset: 6px;
  border-radius: 18px;
}

.lc-aov__back {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(10, 2, 18, .4);
}

.lc-aov__back--1 {
  transform: rotate(-5deg) translate(-5px, 5px);
  opacity: .5;
}

.lc-aov__back--2 {
  transform: rotate(3deg) translate(4px, 2px);
  opacity: .75;
}

.lc-aov__face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.lc-aov__face::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 12px;
}

.lc-aov__face svg {
  width: 34px;
  height: 34px;
}

.lc-aov__face > span {
  font-size: 1.38rem;
  font-weight: 950;
  letter-spacing: -.02em;
}

.lc-aov__deck--truth .lc-aov__back {
  background: linear-gradient(150deg, #9a5cff 0%, #6a2bd9 55%, #4a1d9e 100%);
}

.lc-aov__deck--dare .lc-aov__back {
  background: linear-gradient(150deg, #ff8a66 0%, #f0503a 42%, #c8105a 100%);
}

/* A deck played out: its outline only. */
.lc-aov__deck.is-empty .lc-aov__back {
  background: none;
  box-shadow: none;
  border: 1.5px dashed rgba(255, 255, 255, .28);
}

.lc-aov__deck.is-empty .lc-aov__back--1,
.lc-aov__deck.is-empty .lc-aov__back--2,
.lc-aov__deck.is-empty .lc-aov__face::before {
  display: none;
}

.lc-aov__deck.is-empty .lc-aov__face {
  color: rgba(255, 255, 255, .55);
}

.lc-pillar .lc-aov__count {
  color: rgba(255, 255, 255, .72);
  font-size: .82rem;
  font-weight: 800;
}

/* ---- The lists: Vérités and Actions under each theme, in the colours of their decks ---- */
.lc-pillar .lc-main h3.lc-aovKind {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 4px;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -.01em;
}

.lc-aovKind--truth {
  color: #5132d8;
}

.lc-aovKind--dare {
  color: #c8105a;
}

.lc-aovKind__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
}

.lc-aovKind--truth .lc-aovKind__icon {
  background: #efebff;
}

.lc-aovKind--dare .lc-aovKind__icon {
  background: #ffe8f1;
}

@media (max-width: 380px) {
  .lc-aov__deck {
    height: 132px;
  }

  .lc-aov__decks {
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lc-aov__card.is-flip-truth,
  .lc-aov__card.is-flip-dare {
    animation: lc-aov-fade .2s ease both;
  }

  .lc-aov__deck {
    transition: none;
  }
}