/* ==========================================================================
   Le calendrier de l'Avent à deux, its Google page (template/seo/calendrier-de-l-avent-couple.php,
   static/js/calendrier-avent.js, docs/CALENDRIER_AVENT.md). The chalet of the calendar in the first screen, in the
   look of Lovely Party measure for measure (the canvas of the calendar, boards « Le chalet vitré » and « La case qui
   s'ouvre »): the night from plum to magenta, the pieces with their thickness and their violet shadow, Nunito in heavy
   capitals, the cream dock with its tile and its framboise button. Then the article, in the type of the pillar pages
   (static/css/seo-pillar.css), its ideas on the cards of the app.
   ========================================================================== */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("../fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The dock follows the bottom of the screen while the chalet is in view (position: sticky): styles.css hides the
   overflow of html and body, which makes body a box of its own and stops it; clip hides the overflow as well without
   that. */
html:has(> body.avt-body) {
  overflow-x: clip;
  background-color: #4e1a5c;
}

body.avt-body {
  overflow-x: clip;
  background: #fff7fb;
}

html.avt-lock,
html.avt-lock body.avt-body {
  overflow: hidden;
}

.avt,
.avt-layer {
  --avt-cream: #fbf8ef;
  --avt-rose: #c4285b;
  --avt-rose-dark: #a50c3a;
  --avt-plum: #702a71;
  --avt-mauve: #8d346a;
  --avt-pink: #ffd6e4;
  --avt-gold: #ffe29a;
  --avt-snow: #fbf0f5;
  --avt-shadow: rgba(51, 11, 134, .35);
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.avt *,
.avt *::before,
.avt *::after,
.avt-layer *,
.avt-layer *::before,
.avt-layer *::after {
  box-sizing: border-box;
}

.avt [hidden],
.avt-layer [hidden] {
  display: none !important;
}

.avt :is(a, button):focus-visible,
.avt-layer :is(a, button):focus-visible {
  outline: 3px solid rgba(255, 185, 56, .95);
  outline-offset: 3px;
}

/* ---- The night of the chalet ---- */
.avt-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  overflow: hidden;
  overflow: clip;
  /* Snow under the dock, the same as the ground of the chalet. */
  background:
    linear-gradient(to bottom, rgba(251, 240, 245, 0) calc(100% - 170px), var(--avt-snow) calc(100% - 170px)),
    linear-gradient(180deg, #4e1a5c 0%, #702a71 26%, #8d346a 50%, #b0128a 76%, #d70298 100%);
}

.avt-stars {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 260px;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 18%, rgba(255, 255, 255, .85), transparent 70%),
    radial-gradient(1.2px 1.2px at 21% 62%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(2px 2px at 34% 12%, rgba(255, 226, 154, .8), transparent 70%),
    radial-gradient(1.2px 1.2px at 66% 30%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(1.6px 1.6px at 81% 10%, rgba(255, 255, 255, .8), transparent 70%),
    radial-gradient(1.4px 1.4px at 93% 48%, rgba(255, 226, 154, .7), transparent 70%),
    radial-gradient(1.2px 1.2px at 4% 74%, rgba(255, 255, 255, .5), transparent 70%),
    radial-gradient(1.4px 1.4px at 52% 4%, rgba(255, 255, 255, .6), transparent 70%);
}

.avt-top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top)) 16px 0;
}

.avt-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .02em;
  text-decoration: none;
}

.avt-logo:hover {
  color: var(--avt-pink);
}

.avt-logo img {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 11px;
}

.avt-sound {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #ffffff;
  cursor: pointer;
}

.avt-sound[aria-pressed="true"] .avt-sound__off,
.avt-sound[aria-pressed="false"] .avt-sound__on {
  display: none;
}

.avt-head {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 16px 0;
  text-align: center;
}

.avt .avt-title {
  margin: 0;
  max-width: 15em;
  color: var(--avt-cream);
  font-family: inherit;
  font-size: clamp(27px, 7.6vw, 46px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.avt-title span {
  color: var(--avt-pink);
}

.avt .avt-sub {
  margin: 6px 0 0;
  color: var(--avt-pink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

/* The race of the month: the two pawns at the start, the gift at the end, as on top of the calendar in the app. */
.avt-course {
  position: relative;
  width: min(330px, calc(100% - 44px));
  height: 24px;
  margin-top: 14px;
}

.avt-course__track {
  position: absolute;
  left: 0;
  right: 26px;
  top: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(251, 248, 239, .16);
}

.avt-course__pawn {
  position: absolute;
  top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.avt-course__pawn--one {
  left: 0;
  z-index: 1;
  background: var(--avt-cream);
  box-shadow: inset 0 0 0 2.5px var(--avt-rose), 0 2px 0 var(--avt-shadow);
}

.avt-course__pawn--two {
  left: 14px;
  background: var(--avt-plum);
  box-shadow: inset 0 0 0 2px var(--avt-cream), 0 2px 0 var(--avt-shadow);
}

.avt-course__pawn svg {
  display: block;
}

.avt-course__gift {
  position: absolute;
  right: 0;
  top: 0;
}

/* The chalet: as large as in the app on a phone (the drawing of 390 wide at scale 1), larger on a wide screen, the snow
   and the pines running on to its sides. */
.avt-scene {
  position: relative;
  z-index: 1;
  height: clamp(380px, 123.6vw, 600px);
  margin-top: 2px;
}

.avt-chalet {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
  user-select: none;
}

.avt-chalet text {
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.avt-pane {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  -webkit-tap-highlight-color: transparent;
}

.avt-pane text {
  fill: rgba(251, 248, 239, .85);
  font-size: 13px;
}

.avt-pane--first text {
  fill: var(--avt-gold);
}

.avt-pane--first polygon + polygon {
  animation: avtGlow 3.2s ease-in-out infinite;
}

.avt-pane.is-nudged {
  animation: avtNudge .5s ease-in-out 1;
}

.avt-chalet .avt-sign {
  fill: var(--avt-rose);
  font-size: 10.5px;
}

.avt-twinkle {
  animation: avtTwinkle var(--d, 3s) ease-in-out infinite;
}

.avt-smoke {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: avtSmoke 4.6s ease-out infinite;
}

.avt-smoke--late {
  animation-delay: 1.5s;
}

.avt-flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: avtFlame 1.8s ease-in-out infinite;
}

.avt-beat {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: avtBeat 1.6s ease-in-out infinite;
}

.avt-lamp {
  animation: avtGlow 3.2s ease-in-out infinite;
}

/* Snow in three depths, falling over the whole night. */
.avt-flakes {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
}

.avt-flakes span {
  position: absolute;
  top: -12px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--avt-cream);
  opacity: var(--o);
  animation: avtFall var(--d) linear var(--delay) infinite;
}

/* ---- The dock of the evening: the tile of the case and its button ---- */
.avt-dock {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 520px;
  margin: -6px auto 0;
  padding: 16px 18px calc(22px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: var(--avt-cream);
  box-shadow: 0 -10px 30px rgba(51, 11, 134, .3);
  color: var(--avt-plum);
}

.avt-tile {
  position: relative;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  animation: avtFloat 4s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}

.avt-tile svg {
  display: block;
  margin: 2px;
  overflow: visible;
  filter: drop-shadow(0 6px 0 #8e1747);
}

.avt-tile__face {
  fill: var(--avt-rose);
}

span.avt-tile {
  display: block;
  cursor: default;
}

.avt-tile .avt-tile__n {
  fill: var(--avt-gold);
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  font-size: 40px;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: central;
}

.avt-tile.is-light {
  animation: avtBounce .6s ease-out 1;
}

.avt-dock.is-after .avt-tile:not(.is-light) {
  animation: none;
}

.avt-dock.is-after .avt-tile__face {
  fill: var(--avt-mauve);
}

.avt-dock.is-after .avt-tile svg {
  filter: drop-shadow(0 6px 0 #5a1f45);
}

.avt-dock__words {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.avt .avt-dock__eyebrow {
  margin: 0;
  color: var(--avt-rose);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.avt .avt-dock__line {
  margin: 2px 0 0;
  color: var(--avt-plum);
  font-family: inherit;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.2;
}

/* Around the trial case (the phones of the test link), two lines kept for the sentence, so that it never moves the
   button. */
.avt-dock--try:not(.is-after) .avt-dock__line {
  min-height: 2.4em;
}

.avt-btn {
  width: 100%;
  min-height: 50px;
  margin-top: 8px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--avt-rose);
  box-shadow: 0 4px 0 var(--avt-rose-dark);
  color: var(--avt-cream);
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
}

.avt-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--avt-rose-dark);
}

/* The days left, in the place of the button (his wish of 2026-11-02): the button of the dock, a box of cream for each
   number, the light passing over it now and then as on the buttons of the kit page; a number that changes slides in. */
.avt .avt-countdown {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  margin: 8px 0 0;
  padding: 8px 14px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--avt-rose);
  box-shadow: 0 4px 0 var(--avt-rose-dark);
  color: var(--avt-cream);
  font-family: inherit;
  line-height: 1;
}

/* A touch on it: the fanfare of static/js/calendrier-avent.js (announce). */
.avt .avt-countdown {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.avt-countdown.is-announce {
  animation: avtPress .55s cubic-bezier(.3, 1.4, .5, 1) 1;
}

.avt-countdown b.is-flap {
  animation: avtFlap .5s ease-in-out both;
}

.avt-tile.is-hop {
  animation: avtHop .7s ease-out 1;
}

.avt-pane--first.is-calling polygon + polygon {
  animation: avtCall .7s ease-in-out 2;
}

.avt-burst {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  opacity: 0;
  pointer-events: none;
  animation: avtBurst .9s ease-out both;
}

.avt-countdown::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  animation: avtSweep 6s ease-in-out 1.5s infinite;
}

.avt-countdown__part {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.avt-countdown b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 36px;
  padding: 0 6px;
  overflow: hidden;
  border-radius: 11px;
  background: var(--avt-cream);
  box-shadow: inset 0 -3px 0 rgba(165, 12, 58, .16);
  color: var(--avt-rose);
  font-size: 21px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.avt-countdown b span {
  display: block;
}

.avt-countdown b span.is-tick {
  animation: avtTick .45s cubic-bezier(.2, .8, .2, 1) both;
}

.avt-countdown i {
  font-size: 12.5px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.avt-countdown__soon {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* A touch on a case: the day it opens, in a bubble over it. */
.avt .avt-bubble {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--avt-cream);
  box-shadow: 0 4px 0 rgba(112, 42, 113, .35);
  color: var(--avt-rose);
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -100%) scale(.6);
  transform-origin: 50% 100%;
  pointer-events: none;
  transition: opacity .2s ease, transform .3s cubic-bezier(.3, 1.5, .5, 1);
}

.avt .avt-bubble.is-on {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1);
}

.avt .avt-bubble.is-dark {
  background: var(--avt-plum);
  box-shadow: 0 4px 0 rgba(51, 11, 134, .35);
  color: var(--avt-cream);
}

.avt-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 2px;
  background: inherit;
  transform: rotate(45deg);
}

/* What lights up around the tile when it opens. */
.avt-ring {
  position: absolute;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  pointer-events: none;
  animation: avtRing 1.1s ease-out 2;
}

.avt-spark {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  opacity: 0;
  pointer-events: none;
  animation: avtPop .9s ease-out both;
}

/* The smallest phones (320 to 359 px): a smaller tile, so that the button keeps its words on one line. */
@media (max-width: 359px) {
  .avt-dock {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 10px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .avt-tile {
    width: 62px;
    height: 62px;
  }

  .avt-tile svg {
    width: 58px;
    height: 58px;
  }

  .avt-btn {
    font-size: 13px;
    letter-spacing: .04em;
  }

  .avt .avt-countdown {
    gap: 6px;
    padding: 8px 10px;
  }

  .avt-countdown b {
    min-width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 18px;
  }

  .avt-countdown i {
    font-size: 11px;
  }
}

@media (min-width: 560px) {
  .avt-stage {
    padding-bottom: 22px;
  }

  .avt-dock {
    bottom: 16px;
    border-radius: 28px;
    padding-bottom: 20px;
  }
}

/* ---- The case opened in full ---- */
.avt-layer {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
}

.avt-layer__dim {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(70% 50% at 50% 48%, rgba(112, 42, 113, .55), rgba(26, 6, 40, .82) 100%);
  transition: opacity .5s ease;
}

.avt-layer.is-dim .avt-layer__dim {
  opacity: 1;
}

.avt-layer__rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  opacity: 0;
  transform: scale(.4);
  pointer-events: none;
  transition: opacity .6s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
}

.avt-layer.is-rays .avt-layer__rays {
  opacity: 1;
}

.avt-layer.is-open .avt-layer__rays {
  transform: scale(1);
}

.avt-layer__rays div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 154, .26) 0deg 7deg, rgba(255, 226, 154, 0) 7deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 26%, rgba(0, 0, 0, 0) 68%);
  mask-image: radial-gradient(circle, #000 26%, rgba(0, 0, 0, 0) 68%);
  animation: avtSpin 30s linear infinite;
}

.avt-fly {
  position: relative;
  width: min(328px, calc(100vw - 40px));
  height: min(470px, calc(100vh - 72px));
  height: min(470px, calc(100svh - 72px));
  perspective: 1400px;
}

.avt-turn {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.3, 1.35, .4, 1);
}

.avt-layer.is-open .avt-turn {
  transform: rotateY(0deg);
}

.avt-card {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.avt-card--back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform: rotateY(180deg);
  background: radial-gradient(circle at 50% 42%, #e0457f 0%, #c4285b 45%, #8e1747 100%);
  box-shadow: 0 8px 0 #6e0f37, 0 30px 60px rgba(26, 6, 40, .5);
}

.avt-card__dash {
  position: absolute;
  inset: 12px;
  border: 2.5px dashed rgba(251, 248, 239, .45);
  border-radius: 20px;
}

.avt-card__hearts {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.avt-card__star {
  position: relative;
  margin-top: -24px;
}

.avt-card__brand {
  position: relative;
  margin-top: 46px;
  color: var(--avt-cream);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.avt-card__who {
  position: relative;
  margin-top: 8px;
  color: var(--avt-pink);
  font-size: 13px;
  font-weight: 800;
}

.avt-card--front {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 58px 20px 14px;
  outline: none;
  background: var(--avt-cream);
  box-shadow: 0 8px 0 rgba(112, 42, 113, .45), 0 30px 60px rgba(26, 6, 40, .5);
  color: var(--avt-plum);
  text-align: center;
}

.avt-card__shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 28px;
  pointer-events: none;
}

.avt-card__shine::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-130%);
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0) 65%);
}

.avt-layer.is-open .avt-card__shine::before {
  animation: avtShine 1.1s ease-out .3s 1 both;
}

.avt-card__piece {
  position: absolute;
  left: 50%;
  top: -50px;
  margin-left: -44px;
}

.avt-pill {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--avt-rose);
  box-shadow: 0 3px 0 var(--avt-rose-dark);
  color: var(--avt-cream);
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.avt-layer .avt-card__title {
  margin: 16px 0 0;
  color: var(--avt-plum);
  font-family: inherit;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.01em;
}

.avt-layer .avt-card__text {
  margin: 12px 0 0;
  color: var(--avt-plum);
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.45;
}

.avt-card__space {
  flex: 1;
}

.avt-btn--card {
  flex: none;
  min-height: 54px;
  margin-top: 14px;
}

.avt-btn--card.is-close {
  background: var(--avt-plum);
  box-shadow: 0 4px 0 var(--avt-shadow);
}

.avt-later {
  flex: none;
  min-height: 44px;
  margin-top: 4px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--avt-mauve);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.avt-stamp {
  position: absolute;
  right: -10px;
  top: -14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #fe5759;
  box-shadow: 0 4px 0 #b9302f;
  color: var(--avt-cream);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  transform: rotate(-12deg);
  animation: avtStamp .5s ease-out both;
}

.avt-bit {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  transition: transform 1.25s cubic-bezier(.15, .7, .3, 1), opacity 1.25s ease-in;
}

.avt-bit svg,
.avt-bit i {
  display: block;
  width: 100%;
  height: 100%;
}

.avt-bit i {
  border-radius: 50%;
  background: var(--avt-cream);
}

/* ---- The article ---- */
/* The article in the font of the site, as the other pillar pages; its cards of ideas and its games keep the app's. */
.avt-article.lc-pillar {
  background: linear-gradient(180deg, var(--avt-snow) 0, #fff7fb 30%, #fff 100%);
  font-family: "Helvetica Neue", sans-serif;
}

.avt-article .lc-section {
  padding-top: 26px;
}

.avt-content.lc-content {
  grid-template-columns: minmax(0, 1fr);
  max-width: 880px;
}

.avt-article .lc-main section > p + p,
.avt-article .lc-main section > ol + p {
  margin-top: 14px;
}

.avt-article .lc-main a[href="#calendrier"] {
  color: var(--lc-hot);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* The 24 ideas, a week at a time: four tabs, the cards of a week side by side. Without the script, the four weeks
   follow each other. */
.avt-weeks {
  margin-top: 18px;
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
}

.avt-weeks__tabs {
  display: none;
}

.avt-weeks.is-tabs .avt-weeks__tabs {
  display: flex;
  gap: 8px;
  margin: 0 calc(-1 * clamp(22px, 4vw, 42px));
  padding: 2px clamp(22px, 4vw, 42px) 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.avt-weeks.is-tabs .avt-weeks__tabs::-webkit-scrollbar {
  display: none;
}

.avt-weeks__tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--lc-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--avt-plum);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 900;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.avt-weeks__tab[aria-selected="true"] {
  border-color: var(--avt-rose);
  background: var(--avt-rose);
  box-shadow: 0 3px 0 var(--avt-rose-dark);
  color: #ffffff;
}

.avt-weeks__panel + .avt-weeks__panel {
  margin-top: 24px;
}

.avt-weeks.is-tabs .avt-weeks__panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.avt-weeks.is-tabs .avt-weeks__panel {
  grid-area: 1 / 1;
  min-width: 0;
  margin: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease, visibility 0s linear .25s;
}

.avt-weeks.is-tabs .avt-weeks__panel.is-current {
  visibility: visible;
  opacity: 1;
  transition: opacity .25s ease;
}

.avt-article .avt-weeks__panel h4 {
  margin: 4px 0 12px;
  color: var(--avt-plum);
  font-family: inherit;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
}

.avt-ideas {
  display: flex;
  gap: 12px;
  margin: 0 calc(-1 * clamp(22px, 4vw, 42px));
  padding: 4px clamp(22px, 4vw, 42px) 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 clamp(22px, 4vw, 42px);
  scrollbar-width: none;
  list-style: none;
}

.avt-ideas::-webkit-scrollbar {
  display: none;
}

.avt-article .avt-idea {
  position: relative;
  display: flex;
  flex: 0 0 min(232px, 74%);
  flex-direction: column;
  min-height: 170px;
  margin: 0;
  padding: 16px 16px 18px;
  border-radius: 22px;
  background: var(--avt-cream);
  box-shadow: 0 5px 0 rgba(112, 42, 113, .22);
  color: var(--avt-plum);
  scroll-snap-align: start;
}

.avt-idea__day {
  position: absolute;
  right: 14px;
  top: 8px;
  color: rgba(196, 40, 91, .2);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

.avt-idea__tag {
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 999px;
  background: #c4285b;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.avt-idea--douceurs .avt-idea__tag { background: #d9363e; }
.avt-idea--sorties .avt-idea__tag { background: #702a71; }
.avt-idea--defis .avt-idea__tag { background: #b0128a; }
.avt-idea--souvenirs .avt-idea__tag { background: #8d346a; }
.avt-idea--bons .avt-idea__tag { background: #8f6416; }

.avt-article .avt-idea p {
  margin: 12px 0 0;
  color: var(--avt-plum);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
}

.avt-article .avt-idea p a {
  color: var(--avt-rose);
}

@media (min-width: 760px) {
  .avt-ideas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 4px 0 8px;
    overflow: visible;
  }

  .avt-weeks.is-tabs .avt-weeks__tabs {
    margin: 0;
    padding: 2px 0 14px;
  }
}


/* ---- The reminder under the days left: a date in the phone's own calendar (the mockup « La page Google, refaite ») ---- */
.avt-remind {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--avt-plum);
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.avt-remind span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.avt-remind .avt-remind__check {
  display: none;
}

.avt-remind.is-done {
  color: var(--avt-mauve);
}

.avt-remind.is-done span {
  text-decoration: none;
}

.avt-remind.is-done .avt-remind__check {
  display: inline;
}

.avt-sheet {
  position: fixed;
  z-index: 1001;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.avt-sheet__dim {
  position: absolute;
  inset: 0;
  background: rgba(26, 6, 40, .55);
  animation: avtFade .3s ease both;
}

.avt-sheet__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 12px 20px calc(24px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  outline: none;
  background: var(--avt-cream);
  box-shadow: 0 -10px 30px rgba(26, 6, 40, .35);
  color: var(--avt-plum);
  text-align: center;
  animation: avtSheet .35s cubic-bezier(.2, .8, .2, 1) both;
}

.avt-sheet__grip {
  display: block;
  width: 40px;
  height: 5px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(112, 42, 113, .2);
}

.avt .avt-sheet__title {
  margin: 14px 0 0;
  color: var(--avt-plum);
  font-family: inherit;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.15;
}

.avt .avt-sheet__text {
  margin: 8px 0 0;
  color: var(--avt-mauve);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.avt-sheet__event {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-top: 16px;
  padding: 14px;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 4px 0 rgba(112, 42, 113, .14);
  text-align: left;
}

.avt-sheet__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 0 0 1.5px rgba(112, 42, 113, .18);
}

.avt-sheet__day span {
  width: 100%;
  padding: 3px 0;
  background: var(--avt-rose);
  color: var(--avt-cream);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

.avt-sheet__day b {
  padding: 2px 0 6px;
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
}

.avt-sheet__what {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.avt-sheet__what span {
  color: var(--avt-rose);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.avt-sheet__what b {
  margin-top: 3px;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
}

.avt-sheet__what i {
  margin-top: 3px;
  color: var(--avt-mauve);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

a.avt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.avt-sheet__add {
  min-height: 54px;
  margin-top: 18px;
}

.avt-sheet__other {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
  color: var(--avt-mauve);
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.avt-sheet .avt-later {
  display: block;
  margin: 0 auto;
}

/* ---- Make it or open it: a card of Tu préfères, each side leading to its part of the page. The two answers keep the
   same height, so that the round « ou » falls between them, and their text starts beyond its reach (21 px); the pill
   « Votre choix » sits on the outer edge of the answer chosen: the card never changes height. ---- */
.avt-article .avt-choice {
  padding: 18px 16px 14px;
  border-radius: 24px;
  background: var(--avt-cream);
  box-shadow: 0 6px 0 rgba(112, 42, 113, .22);
  color: var(--avt-plum);
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  text-align: center;
}

.avt-article .avt-choice__q {
  margin: 12px 0 0;
  color: var(--avt-plum);
  font-size: 21px;
  font-weight: 900;
  line-height: 1.2;
}

.avt-choice__q span {
  color: var(--avt-rose);
}

.avt-choice__sides {
  position: relative;
  display: grid;
  grid-auto-rows: 1fr;
  gap: 8px;
  margin-top: 16px;
  text-align: left;
}

.avt-choice__side {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 96px;
  padding: 12px 18px;
  border: 0;
  border-radius: 20px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: opacity .3s ease, transform .3s ease;
}

.avt-choice__side span:last-child {
  max-width: 240px;
}

.avt-choice__side--make {
  padding-bottom: 24px;
  background: #ffe3ec;
  box-shadow: 0 5px 0 rgba(112, 42, 113, .22);
  color: var(--avt-plum);
}

.avt-choice__side--open {
  padding-top: 24px;
  background: var(--avt-plum);
  box-shadow: 0 5px 0 rgba(51, 11, 134, .4);
  color: var(--avt-cream);
}

.avt-choice__chosen {
  position: absolute;
  top: -11px;
  left: 14px;
  display: none;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.avt-choice__side--make .avt-choice__chosen {
  background: var(--avt-rose);
  color: var(--avt-cream);
}

.avt-choice__side--open .avt-choice__chosen {
  top: auto;
  right: 14px;
  bottom: -11px;
  left: auto;
  background: var(--avt-cream);
  color: var(--avt-plum);
}

.avt-choice__side[aria-pressed="true"] {
  transform: scale(1.03);
}

.avt-choice__side[aria-pressed="true"] .avt-choice__chosen {
  display: inline-flex;
  animation: avtRise .4s ease-out both;
}

.avt-choice.is-picked .avt-choice__side[aria-pressed="false"] {
  opacity: .45;
}

.avt-choice__or {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 0 rgba(112, 42, 113, .4);
  color: var(--avt-rose);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.avt-article .avt-choice__line {
  min-height: 2.7em;
  margin: 16px 0 0;
  color: var(--avt-mauve);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.35;
}

.avt-article .avt-choice__line a {
  color: var(--avt-rose);
}

/* On the small phones, its sentence takes three lines: their room is kept before the choice. */
@media (max-width: 379px) {
  .avt-article .avt-choice__line {
    min-height: 4.05em;
  }
}

/* ---- The plan to make one's own, as the board of Lovely Party: five squares from the start to the gift ---- */
.avt-plan__start {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 22px 0 0;
  color: var(--avt-rose);
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.avt-plan__start svg + svg {
  margin-left: -6px;
}

.avt-plan {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.avt-article .avt-plan__step {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  margin: 0;
  padding-bottom: 28px;
}

.avt-plan__step::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 54px;
  bottom: 2px;
  border-left: 4px dashed rgba(196, 40, 91, .28);
}

.avt-plan__step--end::before {
  display: none;
}

.avt-plan__piece {
  position: relative;
  display: block;
  width: 44px;
  height: 50px;
}

.avt-plan__piece::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #8e1747;
}

.avt-plan__piece b {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #f0366f, #c4285b 70%);
  color: var(--avt-cream);
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  font-size: 19px;
  font-weight: 900;
}

.avt-plan__piece b::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  width: 14px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transform: rotate(-28deg);
}

.avt-plan__piece--gift::before {
  background: #b8862e;
}

.avt-plan__piece--gift b {
  background: radial-gradient(circle at 38% 30%, #ffedb8, #f2c46b 70%);
}

.avt-plan__body {
  min-width: 0;
}

.avt-article .avt-plan h3 {
  margin: 10px 0 0;
  color: var(--avt-plum);
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
}

.avt-article .avt-plan__body > p {
  margin: 4px 0 0;
  font-size: 15.5px;
  line-height: 1.55;
}

.avt-bases {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.avt-base {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 2px solid transparent;
  border-radius: 18px;
  background: var(--avt-cream);
  color: var(--avt-plum);
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}

.avt-base[aria-pressed="true"] {
  border-color: var(--avt-rose);
  background: #fff0f5;
}

.avt-base__art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #ffffff;
}

.avt-base__words {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.avt-base__words b {
  font-size: 15.5px;
  font-weight: 900;
  line-height: 1.2;
}

.avt-base__words span {
  margin-top: 2px;
  color: var(--avt-mauve);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
}

.avt-kit {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.avt-article .avt-kit li {
  display: block;
  margin: 0;
}

.avt-kit label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--avt-plum);
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  font-size: 15.5px;
  font-weight: 800;
  cursor: pointer;
}

.avt-kit input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--avt-rose);
  cursor: pointer;
}

.avt-kit input:checked + span {
  color: var(--avt-mauve);
  text-decoration: line-through;
  text-decoration-color: rgba(112, 42, 113, .5);
}

.avt-tags {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  padding-left: 4px;
}

.avt-tags__tag {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 84px;
  border-radius: 14px 14px 18px 18px;
  background: radial-gradient(circle at 50% 45%, #e0457f, #c4285b 60%, #8e1747);
  box-shadow: 0 5px 0 #6e0f37;
  transform: rotate(var(--turn, 0deg));
}

.avt-tags__tag::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: #ffffff;
}

.avt-tags__tag svg {
  margin-top: 10px;
}

.avt-tags__tag text {
  fill: #8e1747;
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  font-size: 7.5px;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: central;
}

/* A button, not a link of the text (seo-pillar.css underlines the links of a list). */
.avt-article .avt-print {
  width: 100%;
  margin-top: 18px;
  color: #ffffff;
  text-decoration: none;
}

/* The ideas of step 4 run to the right edge of the white card only: the board of the plan holds their left. */
.avt-article .avt-plan .avt-weeks.is-tabs .avt-weeks__tabs {
  margin: 0 calc(-1 * clamp(22px, 4vw, 42px)) 0 0;
  padding: 2px clamp(22px, 4vw, 42px) 12px 0;
}

.avt-article .avt-plan .avt-ideas {
  margin: 0 calc(-1 * clamp(22px, 4vw, 42px)) 0 0;
  padding: 4px clamp(22px, 4vw, 42px) 16px 0;
  scroll-padding: 0;
}

/* ---- True or false, to shine at dinner: cards that turn over on their answer and keep their height ---- */
.avt-quiz {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.avt-quiz__card {
  position: relative;
  height: 320px;
  perspective: 1200px;
}

.avt-quiz__turn {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.3, 1.35, .4, 1);
}

.avt-quiz__card.is-turned .avt-quiz__turn {
  transform: rotateY(180deg);
}

.avt-quiz__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 18px;
  overflow: auto;
  border-radius: 24px;
  color: var(--avt-plum);
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.avt-quiz__face--front {
  background: var(--avt-cream);
  box-shadow: 0 6px 0 rgba(112, 42, 113, .22);
}

.avt-quiz__face--back {
  background: #ffffff;
  box-shadow: 0 6px 0 rgba(112, 42, 113, .22), inset 0 0 0 2px rgba(112, 42, 113, .18);
  transform: rotateY(180deg);
}

.avt-quiz__card.is-right .avt-quiz__face--back {
  box-shadow: 0 6px 0 rgba(112, 42, 113, .22), inset 0 0 0 2px rgba(196, 40, 91, .4);
}

.avt-quiz__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--avt-rose);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}

.avt-quiz__piece text {
  fill: #8e1747;
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  font-size: 52px;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: central;
}

.avt-article .avt-quiz__claim {
  display: flex;
  flex: 1;
  align-items: center;
  margin: 12px 0 0;
  color: var(--avt-plum);
  font-family: inherit;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.25;
}

.avt-quiz__answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.avt-quiz__say {
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  color: var(--avt-cream);
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}

.avt-quiz__say--true {
  background: var(--avt-rose);
  box-shadow: 0 4px 0 var(--avt-rose-dark);
}

.avt-quiz__say--false {
  background: var(--avt-plum);
  box-shadow: 0 4px 0 #45174a;
}

.avt-quiz__say:active {
  transform: translateY(3px);
  box-shadow: none;
}

.avt-article .avt-quiz__verdict {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--avt-plum);
  font-family: inherit;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
}

.avt-quiz__truth {
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--avt-cream);
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.avt-quiz__truth--true {
  background: var(--avt-rose);
}

.avt-quiz__truth--false {
  background: var(--avt-plum);
}

.avt-article .avt-quiz__story {
  flex: 1;
  margin: 10px 0 0;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.avt-article .avt-quiz__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 0 0;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 12.5px;
  line-height: 1.3;
}

.avt-article .avt-quiz__foot a {
  color: var(--avt-mauve);
  font-weight: 700;
  text-decoration-thickness: 1px;
}

.avt-quiz__foot button {
  position: relative;
  flex: none;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(112, 42, 113, .08);
  color: var(--avt-plum);
  font-family: "Nunito", "Helvetica Neue", Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 900;
  cursor: pointer;
}

/* The cards have no room for a taller button: its touch reaches 44 px without moving the text. */
.avt-quiz__foot button::after {
  content: "";
  position: absolute;
  inset: -4px 0;
}

/* The calendars to offer: the cards of the lobby (static/css/lc-games-public.css), and the partner links said under. */
.avt-article .avt-partners {
  margin: 14px 0 0;
  color: var(--lc-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

@media (max-width: 359px) {
  .avt-quiz__card {
    height: 350px;
  }
}

@media (min-width: 760px) {
  .avt-quiz {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .avt-quiz__card {
    height: 300px;
  }

  .avt-article .avt-plan .avt-weeks.is-tabs .avt-weeks__tabs,
  .avt-article .avt-plan .avt-ideas {
    margin: 0;
    padding-right: 0;
  }

  .avt-article .avt-plan .avt-ideas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Movements ---- */
@keyframes avtTwinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes avtFloat { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-5px); } }
@keyframes avtBounce { 0% { transform: scale(1); } 30% { transform: scale(1.14); } 60% { transform: scale(.96); } 100% { transform: scale(1); } }
@keyframes avtRing { 0% { box-shadow: 0 0 0 0 rgba(242, 196, 107, .85); } 100% { box-shadow: 0 0 0 22px rgba(242, 196, 107, 0); } }
@keyframes avtPop { 0% { opacity: 0; transform: scale(.2) rotate(0deg); } 40% { opacity: 1; transform: scale(1.2) rotate(20deg); } 100% { opacity: 0; transform: translateY(-12px) scale(.6) rotate(40deg); } }
@keyframes avtGlow { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes avtSmoke { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -40px) scale(1.5); } }
@keyframes avtFlame { 0%, 100% { transform: scale(1, 1); } 35% { transform: scale(.92, 1.08); } 70% { transform: scale(1.05, .95); } }
@keyframes avtBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes avtNudge { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-2.5px); } 40% { transform: translateX(2.5px); } 60% { transform: translateX(-1.5px); } 80% { transform: translateX(1px); } }
@keyframes avtFall {
  from { transform: translate(0, 0); }
  to { transform: translate(16px, 940px); transform: translate(16px, calc(100cqh + 24px)); }
}
@keyframes avtSpin { to { transform: rotate(360deg); } }
@keyframes avtPress { 0% { transform: scale(1); } 15% { transform: scale(.96); } 45% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes avtFlap { 0% { transform: perspective(160px) rotateX(0deg); } 45% { transform: perspective(160px) rotateX(-90deg); } 55% { transform: perspective(160px) rotateX(90deg); } 100% { transform: perspective(160px) rotateX(0deg); } }
@keyframes avtHop { 0%, 100% { transform: rotate(-6deg) translateY(0) scale(1); } 30% { transform: rotate(-6deg) translateY(-10px) scale(1.1); } 60% { transform: rotate(-6deg) translateY(0) scale(.96); } }
@keyframes avtCall { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes avtBurst { 0% { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(45deg); } }
@keyframes avtSweep { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }
@keyframes avtTick { from { opacity: 0; transform: translateY(-60%); } to { opacity: 1; transform: none; } }
@keyframes avtShine { 0% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes avtFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes avtSheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes avtRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes avtStamp { 0% { opacity: 0; transform: rotate(-12deg) scale(1.7); } 60% { opacity: 1; transform: rotate(-12deg) scale(.94); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .avt *,
  .avt-layer * {
    animation: none !important;
    transition: none !important;
  }

  .avt-flakes {
    display: none;
  }
}