/* Presentation site of Ultimate Party Game. Same identity as the game (04 - PWA/src/styles.css). */
/* Restylage « Stickers & feutre » : scrapbook de nuit, comme le jeu. Titres au feutre (Caveat Brush),
   textes en sans arrondie (Nunito), notes en papier crème scotchées, stickers détourés de blanc avec
   une ombre franche, cartes légèrement de travers et quelques gribouillis. */
@font-face {
  font-family: 'Caveat Brush';
  src: url('fonts/CaveatBrush.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --ink: #17121f;
  --ink-2: #261d33;
  --paper: #fff4de;
  --paper-ink: #1a1022;
  --paper-muted: #5a4b66;
  --on-color: #1a1022;
  --pink: #ff4f9a;
  --pink-deep: #c2185b;
  --violet: #a98bff;
  --lemon: #ffe066;
  --men: #5cd3ff;
  --women: #ff6fb0;
  --muted: #b9adc9;
  --soft: #e3dbec;
  --white: #fff;
  --gold: #ffe066;
  --radius: 14px;
  --gutter: 16px;
  --shadow: 4px 5px 0 rgba(0, 0, 0, 0.62);
  --shadow-sm: 3px 3px 0 rgba(0, 0, 0, 0.62);
  /* Ombre franche des stickers, dans un ton foncé de leur couleur (visible sur le fond nuit). */
  --depth: #8f1f55;
  --title-font: 'Caveat Brush', 'Comic Sans MS', cursive;
  --text-font: 'Nunito', system-ui, 'Segoe UI', Roboto, sans-serif;
  --dots: radial-gradient(rgba(255, 255, 255, 0.07) 1.2px, transparent 1.7px);

  /* Gribouillis (SVG en data URI), les mêmes que dans le jeu. */
  --doodle-star: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe066' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12.3 2.5l2.4 6.1 6.6.4-5.1 4.3 1.7 6.6-5.7-3.7-5.9 3.5 1.9-6.5L3 8.9l6.7-.3 2.9-6.4'/></svg>");
  --doodle-heart: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6fb0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20.5C6 16 2.5 12.3 3.2 8.4 3.9 5 8 3.8 10.4 6.3L12 8l1.5-1.8c2.6-2.6 7-1.2 7.4 2.4.4 3.8-3.3 7.6-9.1 12.2'/></svg>");
  --doodle-spark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe066' stroke-width='2.2' stroke-linecap='round'><path d='M3.5 15.5 1 14.6M7 9.5 5 5.8M13 7.5 13.6 2.5'/></svg>");
  --doodle-squiggle: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' fill='none' stroke='%23ff4f9a' stroke-width='3.2' stroke-linecap='round'><path d='M3 8c7-6 13 4 20 0s13-6 20 0 13 4 20 0 13-6 20 0 13 4 20 0 9-4 14-2'/></svg>");
  --doodle-squiggle-lemon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' fill='none' stroke='%23ffe066' stroke-width='3.2' stroke-linecap='round'><path d='M3 8c7-6 13 4 20 0s13-6 20 0 13 4 20 0 13-6 20 0 13 4 20 0 9-4 14-2'/></svg>");
  --doodle-arrow-down: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23ffe066' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 8C17 3 31 9 30 20c-.5 6-4 10-9 13M21 33l7 .6M21 33l1.4-7'/></svg>");
  --star-filled: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffe066' stroke='%23c2185b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12.3 2.5l2.4 6.1 6.6.4-5.1 4.3 1.7 6.6-5.7-3.7-5.9 3.5 1.9-6.5L3 8.9l6.7-.3 2.9-6.4'/></svg>");
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* Papier pointillé de carnet, la nuit. */
body {
  margin: 0;
  background-color: var(--ink);
  background-image: var(--dots);
  background-size: 22px 22px;
  color: var(--white);
  font-family: var(--text-font);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3 {
  font-family: var(--title-font);
  font-weight: normal;
  line-height: 1.1;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: var(--pink);
}

:focus-visible {
  outline: 3px solid var(--lemon);
  outline-offset: 3px;
}

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  background: var(--lemon);
  color: var(--on-color);
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 8px;
  border: 3px solid var(--white);
}
.skip:focus {
  top: 10px;
}

/* Morceau de scotch (washi tape) en haut de certaines notes et photos. */
.quote::before,
.phone-hero::before,
.shot-list li:nth-child(odd) .phone::before,
.step:nth-child(2)::before,
.info-card::before,
.gold-perks::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  z-index: 2;
  width: 92px;
  height: 24px;
  margin-left: -46px;
  background: rgba(255, 224, 102, 0.78);
  rotate: -4deg;
  clip-path: polygon(4% 0, 96% 0, 100% 20%, 96% 40%, 100% 60%, 96% 80%, 100% 100%, 4% 100%, 0 80%, 4% 60%, 0 40%, 4% 20%);
  pointer-events: none;
}

/* Buttons : stickers détourés de blanc, avec une ombre franche. */
.btn {
  display: inline-block;
  font-family: var(--text-font);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--on-color);
  text-decoration: none;
  text-align: center;
  border: 3px solid var(--white);
  border-radius: var(--radius);
  padding: 0.7em 1.1em;
  background: var(--pink);
  box-shadow: 4px 5px 0 var(--depth);
  transition:
    translate 0.1s,
    box-shadow 0.1s,
    background 0.15s;
}
.btn:hover {
  translate: -1px -1px;
  box-shadow: 5px 6px 0 var(--depth);
}
.btn:active {
  translate: 3px 4px;
  box-shadow: 1px 1px 0 var(--depth);
}
.btn-primary:hover {
  background: #ff67a8;
}
.btn-secondary {
  background: var(--violet);
  --depth: #4f3a99;
}
.btn-secondary:hover {
  background: #b89dff;
}
.btn-big {
  font-family: var(--title-font);
  font-weight: normal;
  font-size: 2rem;
  line-height: 1.15;
  padding: 0.35em 1.2em;
  rotate: -1deg;
}
.btn-small {
  font-size: 0.95rem;
  padding: 0.4em 0.9em;
  border-width: 2.5px;
  box-shadow: 3px 3px 0 var(--depth);
  rotate: 1.5deg;
}
.btn-small:hover {
  box-shadow: 4px 4px 0 var(--depth);
}
.btn-small:active {
  box-shadow: 1px 1px 0 var(--depth);
}

/* Top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px max(var(--gutter), calc((100% - 1180px) / 2));
  background: rgba(23, 18, 31, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 2px dashed rgba(255, 255, 255, 0.14);
}
.brand {
  display: block;
  flex: none;
}
.brand img {
  display: block;
  height: 46px;
  width: auto;
  rotate: -3deg;
}
.topnav {
  display: flex;
  gap: 22px;
  margin-left: auto;
}
.topnav a {
  color: var(--white);
  text-decoration: none;
  font-family: var(--title-font);
  font-size: 1.35rem;
  line-height: 1.2;
}
.topnav a:hover {
  color: var(--lemon);
  text-decoration: underline wavy var(--pink) 2px;
  text-underline-offset: 5px;
}
/* Petite étiquette de langue. */
.lang-switch {
  color: var(--white);
  text-decoration: none;
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  background: var(--ink-2);
  border: 2px solid var(--white);
  border-radius: 8px;
  padding: 3px 8px;
  rotate: -3deg;
  box-shadow: 2px 2px 0 #4f3a99;
}
.lang-switch:hover {
  background: var(--violet);
  color: var(--on-color);
}

/* Layout */
.hero,
.section {
  width: min(1180px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.section {
  padding-block: 80px 8px;
}
.section-title {
  font-size: clamp(2.5rem, 6vw, 3.4rem);
  text-align: center;
}
/* Trait de feutre ondulé sous les titres, comme dans le jeu. */
.section-title::after {
  content: '';
  display: block;
  width: 150px;
  height: 14px;
  margin: 4px auto 0;
  background: var(--doodle-squiggle) center / contain no-repeat;
}
.section-intro {
  text-align: center;
  color: var(--muted);
  margin-top: 8px;
}

/* Hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 40px;
  padding-block: 40px 24px;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
/* Bande de scotch jaune écrite au feutre. */
.kicker {
  font-family: var(--title-font);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--on-color);
  background: rgba(255, 224, 102, 0.92);
  padding: 4px 22px;
  rotate: -2deg;
  clip-path: polygon(2% 0, 98% 0, 100% 20%, 98% 40%, 100% 60%, 98% 80%, 100% 100%, 2% 100%, 0 80%, 2% 60%, 0 40%, 2% 20%);
}
.hero-logo {
  position: relative;
  width: min(460px, 100%);
  margin: -24px 0 -30px -36px;
}
.hero-logo img {
  display: block;
  width: 100%;
  rotate: -4deg;
}
/* Quelques gribouillis autour du logo. */
.hero-logo::after {
  content: '';
  position: absolute;
  inset: 4% 2% 6%;
  pointer-events: none;
  background:
    var(--doodle-star) 96% 6% / 22px no-repeat,
    var(--doodle-heart) 92% 92% / 26px no-repeat,
    var(--doodle-star) 14% 96% / 16px no-repeat;
}
/* Bout de papier crème, comme une note glissée dans le carnet. */
.quote {
  position: relative;
  margin: 0;
  padding: 20px 20px 14px;
  border-radius: 6px 16px 8px 14px;
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: var(--shadow);
  max-width: 520px;
  rotate: -1.5deg;
}
.quote p {
  font-family: var(--title-font);
  font-size: 1.75rem;
  line-height: 1.15;
  text-align: center;
}
.quote cite {
  display: block;
  text-align: right;
  color: var(--paper-muted);
  font-style: normal;
  font-weight: 700;
  font-size: 0.88rem;
  margin-top: 6px;
}
.lead {
  font-size: 1.15rem;
  max-width: 540px;
}
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}
.cta-note {
  color: var(--muted);
  font-size: 0.95rem;
}
.stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.95rem;
}
/* Pastilles en pointillés : pas encore là. */
.pill {
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
  border: 2px dashed rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  padding: 3px 10px;
}
.stores-text {
  margin-left: 4px;
}

.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  padding: 30px 70px 60px;
}
.hero-visual::before {
  content: '';
  position: absolute;
  inset: 0 4%;
  z-index: -1;
  pointer-events: none;
  background:
    var(--doodle-star) 88% 4% / 26px no-repeat,
    var(--doodle-spark) 6% 6% / 30px no-repeat,
    var(--doodle-heart) 94% 74% / 30px no-repeat,
    var(--doodle-star) 26% 98% / 18px no-repeat;
}
/* Téléphone en sticker : contour blanc et ombre franche. */
.phone {
  position: relative;
  margin: 0;
  padding: 7px;
  border-radius: 34px;
  background: var(--ink);
  border: 3px solid var(--white);
  box-shadow: 6px 7px 0 rgba(0, 0, 0, 0.62);
}
.phone img {
  display: block;
  width: 100%;
  border-radius: 25px;
}
.phone-hero {
  width: clamp(230px, 26vw, 310px);
  rotate: 3deg;
  box-shadow: 8px 9px 0 var(--depth);
}
.dancer {
  position: absolute;
  animation: bob 2.6s ease-in-out infinite;
}
.dancer-left {
  left: 0;
  top: 18%;
  width: 70px;
}
.dancer-right {
  right: 0;
  top: 34%;
  width: 84px;
  animation-delay: -1.3s;
}
.dancer-bottom {
  left: 4%;
  bottom: 0;
  width: 110px;
  animation-delay: -0.6s;
}
@keyframes bob {
  50% {
    transform: translateY(-10px) rotate(-4deg);
  }
}

/* How it works : trois notes en papier. */
.steps {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.step,
.info-card {
  position: relative;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 6px 16px 8px 14px;
  box-shadow: var(--shadow);
  padding: 22px;
}
.step {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.step:nth-child(1) {
  rotate: -1.2deg;
}
.step:nth-child(2) {
  rotate: 0.8deg;
}
.step:nth-child(3) {
  rotate: -0.6deg;
}
.step h3 {
  font-size: 2rem;
}
.step p {
  font-weight: 600;
}
/* Numéro en pastille autocollante. */
.step-number {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-family: var(--title-font);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--on-color);
  background: var(--pink);
  border: 3px solid var(--white);
  box-shadow: 3px 3px 0 var(--depth);
  rotate: -6deg;
}
.step:nth-child(2) .step-number {
  background: var(--men);
  --depth: #1f6a92;
}
.step:nth-child(3) .step-number {
  background: var(--violet);
  --depth: #4f3a99;
}

/* Screenshots */
.shot-list {
  list-style: none;
  padding: 8px 4px 20px;
  margin: 40px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}
.shot-list .phone {
  max-width: 250px;
  margin-inline: auto;
}
.shot-list li:nth-child(odd) .phone {
  rotate: -2deg;
}
.shot-list li:nth-child(even) .phone {
  rotate: 2deg;
  translate: 0 14px;
}

/* Levels : un sticker de couleur par niveau. */
.levels {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.level {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--on-color);
  border: 3px solid var(--white);
  border-radius: 10px 18px 12px 16px;
  box-shadow: 5px 6px 0 var(--depth);
  padding: 22px;
}
.level h3 {
  font-size: 2.2rem;
}
.level p {
  font-weight: 600;
}
.level-1 {
  background: var(--men);
  --depth: #1f6a92;
  rotate: -1deg;
}
.level-2 {
  background: var(--violet);
  --depth: #4f3a99;
  rotate: 0.8deg;
}
.level-3 {
  background: var(--pink);
  --depth: #8f1f55;
  rotate: -0.6deg;
}
.badge {
  align-self: flex-start;
  font-family: var(--text-font);
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  border-radius: 6px;
  padding: 3px 9px;
  background: var(--ink);
  color: var(--white);
  border: 2px solid var(--white);
  box-shadow: 1.5px 1.5px 0 rgba(0, 0, 0, 0.6);
  rotate: -3deg;
}
.badge-gold {
  background: var(--gold);
  color: var(--on-color);
  rotate: 4deg;
}
.badge-soon {
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.06);
  border-style: dashed;
}

/* Features : cartes sombres détourées de blanc, comme les réglages du jeu. */
.features {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}
.feature {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  gap: 4px 14px;
  background: rgba(38, 29, 51, 0.94);
  border: 3px solid var(--white);
  border-radius: 10px 18px 12px 16px;
  box-shadow: var(--shadow);
  padding: 18px;
}
.feature:nth-child(odd) {
  rotate: -0.5deg;
}
.feature:nth-child(even) {
  rotate: 0.45deg;
}
.feature-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 1.5rem;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--white);
  rotate: -6deg;
}
.feature h3 {
  font-size: 1.65rem;
}
.feature p {
  color: var(--soft);
  font-size: 0.95rem;
}

/* Gold */
.gold-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px 48px;
  align-items: center;
  padding: 34px;
  border-radius: 12px 22px 14px 20px;
  border: 3px solid var(--white);
  background: var(--ink-2);
  box-shadow: 7px 8px 0 #a8862a;
  rotate: -0.4deg;
}
.gold-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.gold-head .section-title {
  text-align: left;
  color: var(--gold);
}
.gold-head .section-title::after {
  margin-left: 0;
  background-image: var(--doodle-squiggle);
}
.gold-kicker {
  color: var(--women);
  font-family: var(--title-font);
  font-size: 1.6rem;
  line-height: 1.15;
  rotate: -1deg;
}
.gold-price strong {
  font-family: var(--title-font);
  font-weight: normal;
  font-size: 3.6rem;
  line-height: 1;
  color: var(--gold);
}
.gold-price span {
  color: var(--muted);
}
/* Les avantages sur une note en papier, avec des étoiles coloriées. */
.gold-perks {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 700;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 6px 16px 8px 14px;
  box-shadow: var(--shadow);
  rotate: 1deg;
}
.gold-perks li {
  display: flex;
  gap: 10px;
}
.gold-perks li::before {
  content: '';
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  background: var(--star-filled) center / contain no-repeat;
}
.gold-where {
  grid-column: 1 / -1;
  color: var(--muted);
  border-top: 2px dashed rgba(255, 255, 255, 0.18);
  padding-top: 16px;
}

/* Responsible gaming and privacy : notes en papier scotchées. */
.responsible {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 26px;
}
.info-card {
  padding-top: 26px;
}
.info-card:nth-child(1) {
  rotate: 1deg;
}
.info-card:nth-child(2) {
  rotate: -0.8deg;
}
.info-card h2 {
  font-size: 2.1rem;
  margin-bottom: 8px;
  color: var(--pink-deep);
}
.info-card p {
  font-weight: 600;
}
.alcohol {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Final call */
.final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding-bottom: 80px;
}
.final-pictos {
  width: 110px;
  animation: bob 2.6s ease-in-out infinite;
}
.final p {
  color: var(--muted);
  font-size: 1.15rem;
}
.final .btn-big,
.notfound .btn-big {
  margin-top: 8px;
}

/* Footer */
.footer {
  border-top: 2px dashed rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.25);
  padding: 32px max(var(--gutter), calc((100% - 1180px) / 2)) 24px;
  color: var(--muted);
  font-size: 0.95rem;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.footer-nav a {
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}
.footer-nav a:hover {
  color: var(--lemon);
  text-decoration: underline wavy var(--pink) 2px;
  text-underline-offset: 4px;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 2px dashed rgba(255, 255, 255, 0.1);
}
.footer-bottom a {
  font-weight: 700;
}

/* Help and legal pages : texte de lecture en Nunito, titres au feutre */
.doc {
  width: min(780px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding-block: 48px 80px;
  font-size: 1.05rem;
  line-height: 1.6;
}
.doc-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}
.doc-updated {
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}
/* Encadré important : note en papier. */
.doc-box {
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 6px 16px 8px 14px;
  box-shadow: var(--shadow);
  padding: 16px 20px 4px;
  margin: 8px 0 18px;
  rotate: -0.4deg;
}
.doc .doc-box p,
.doc .doc-box ul,
.doc .doc-box strong {
  color: var(--paper-ink);
}
.doc-box a {
  color: var(--pink-deep);
}
/* Sommaire : carte sombre détourée de blanc, liens au feutre. */
.doc-toc {
  background: rgba(38, 29, 51, 0.94);
  border: 3px solid var(--white);
  border-radius: 10px 18px 12px 16px;
  box-shadow: var(--shadow);
  padding: 12px 20px;
  margin-bottom: 8px;
  rotate: -0.3deg;
}
.doc .doc-toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.doc .doc-toc li {
  margin: 0;
}
.doc-toc a {
  font-family: var(--title-font);
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--lemon);
  text-decoration: none;
}
.doc-toc a:hover {
  text-decoration: underline wavy var(--pink) 2px;
  text-underline-offset: 4px;
}
.doc-section {
  padding-top: 32px;
}
.doc h2 {
  font-size: 2.3rem;
  color: var(--pink);
  margin-bottom: 12px;
}
.doc h3 {
  font-family: inherit;
  font-weight: 800;
  font-size: 1.1rem;
  margin: 22px 0 6px;
}
.doc h2 + h3 {
  margin-top: 0;
}
.doc p,
.doc ul,
.doc dl {
  margin: 0 0 12px;
  color: var(--soft);
}
.doc ul {
  padding-left: 1.3em;
}
.doc li + li {
  margin-top: 6px;
}
.doc li::marker {
  color: var(--pink);
}
.doc dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 20px;
}
.doc dt {
  color: var(--muted);
  font-weight: 700;
}
.doc dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.doc strong {
  color: var(--white);
  font-weight: 800;
}
[id] {
  scroll-margin-top: 80px;
}
/* Coup de surligneur jaune. */
.todo {
  background: var(--lemon);
  color: var(--on-color);
  font-weight: 700;
  border-radius: 3px 8px 4px 6px;
  padding: 0 5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* 404 */
.notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding-bottom: 80px;
}
.notfound p {
  color: var(--muted);
  font-size: 1.15rem;
  max-width: 560px;
}
.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}

/* Reveal on scroll, only when the script runs */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* Tablets */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .hero-copy {
    align-items: center;
    text-align: center;
  }
  .hero-logo {
    margin: -20px auto -24px;
  }
  .cta,
  .stores {
    justify-content: center;
  }
  .steps,
  .levels {
    grid-template-columns: minmax(0, 1fr);
  }
  .shot-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 40px;
  }
  .gold-card {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px;
  }
}

/* Phones */
@media (max-width: 600px) {
  .topnav {
    display: none;
  }
  .lang-switch {
    margin-left: auto;
  }
  .section {
    padding-top: 64px;
  }
  .btn-big {
    font-size: 1.75rem;
    width: 100%;
  }
  .cta {
    width: 100%;
  }
  .cta-note {
    width: 100%;
  }
  .quote p {
    font-size: 1.55rem;
  }
  .hero-visual {
    padding: 20px 56px 50px;
  }
  .dancer-left {
    width: 52px;
  }
  .dancer-right {
    width: 62px;
  }
  .dancer-bottom {
    width: 84px;
  }
  .shot-list {
    gap: 18px;
  }
  .shot-list .phone {
    padding: 4px;
    border-width: 2.5px;
    border-radius: 22px;
    box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.62);
  }
  .shot-list .phone img {
    border-radius: 17px;
  }
  .shot-list li:nth-child(odd) .phone::before {
    width: 64px;
    height: 18px;
    margin-left: -32px;
    top: -9px;
  }
  .gold-card {
    padding: 22px 18px;
  }
  .gold-perks {
    font-size: 1rem;
  }
  .responsible {
    grid-template-columns: minmax(0, 1fr);
  }
  .doc dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .doc dd {
    margin-bottom: 10px;
  }
  .notfound-actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before {
    animation: none !important;
    transition: none !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}