/* Page d'accueil (complète style.css). */
.landing { max-width: 640px; }
.hero { text-align: center; }
.hero h1 { font-size: 44px; margin-top: 8px; }
.hero-island { width: 100%; max-width: 360px; height: auto; display: block; margin: 0 auto; }
.lead { font-size: 18px; margin: 8px 0 24px; }

.signup { transform: rotate(.3deg); }
.signup h2 { color: var(--coral-deep); }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 15px; margin-top: 16px; }
.check input { width: 22px; height: 22px; flex: none; margin: 2px 0 0; accent-color: var(--coral-deep); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.how ol { padding-left: 22px; margin: 0 0 28px; }
.how li { margin-bottom: 10px; }
section > h2 { margin-top: 12px; }

.cards { display: grid; grid-template-columns: 1fr; gap: 22px; margin: 12px 0 28px; }
@media (min-width: 600px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.paper-card {
  position: relative;
  margin: 0;
  padding: 26px 16px 18px;
  background: var(--paper-light);
  border: 1.6px solid var(--ink);
  border-radius: 12px 16px 10px 18px / 16px 10px 18px 12px;
  box-shadow: 2px 3px 0 rgba(27, 42, 71, .12);
  transform: rotate(-1.5deg);
}
.paper-card:nth-child(2) { transform: rotate(1.2deg); }
.paper-card:nth-child(3) { transform: rotate(-.6deg); }
/* Morceau de scotch */
.paper-card::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 50%;
  width: 70px;
  height: 22px;
  margin-left: -35px;
  background: rgba(240, 105, 90, .35);
  transform: rotate(-4deg);
}
.paper-card figcaption { font-family: 'Caveat', cursive; font-size: 22px; color: var(--coral-deep); }
.paper-card p { margin: 4px 0 0; font-weight: 700; font-size: 17px; }

.islands { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 24px; scroll-snap-type: x mandatory; }
.islands img { width: 180px; height: auto; flex: none; scroll-snap-align: start; }

.faq p { margin: 0 0 10px; }
.cta { text-align: center; }
.cta a {
  display: inline-block;
  padding: 12px 32px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  background: var(--coral);
  border: 1.6px solid var(--ink);
  border-radius: 24px 20px 26px 22px / 22px 26px 20px 24px;
}
.legal { text-align: center; margin-top: 32px; }

/* Pages de texte (mentions légales, confidentialité) */
.legal-page h2 { margin-top: 24px; }
.todo { background: #ffe9a8; padding: 0 4px; }

/* Page d'invitation */
.invite-code { font-size: 30px; font-weight: 700; letter-spacing: 4px; text-align: center; margin: 16px 0 4px; }
.cta-button {
  display: block;
  text-align: center;
  min-height: 52px;
  line-height: 52px;
  margin-top: 12px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  background: var(--coral);
  border: 1.6px solid var(--ink);
  border-radius: 24px 20px 26px 22px / 22px 26px 20px 24px;
}