/*
  ClubManager — site de présentation.

  Direction : le monde d'un club social est fait de comptoirs, de balances et
  de registres qui doivent tomber juste. La page emprunte cette langue —
  chiffres alignés, filets fins, mesures affichées — plutôt que le vocabulaire
  habituel des pages de logiciel.

  Le vert profond et l'or viennent de l'application : un gérant qui verra la
  démonstration ensuite doit reconnaître le produit.
*/

:root {
  /*
    Noir, blanc, doré. Le vert de l'application a été écarté : sur une page de
    vente, il tirait vers le végétal et racontait le produit du client plutôt
    que le sérieux de l'outil. Le noir dit le logiciel de gestion, le doré
    signale ce qui compte — un accent, jamais une surface.
  */
  --noir: #101010;
  --noir-doux: #1c1c1c;
  --or: #c9a227;
  --or-clair: #e0be4e;
  --encre: #101010;
  --papier: #ffffff;
  --coquille: #f6f5f2;
  --gris: #6b6b6b;
  --trait: #e2e0da;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;

  --large: 1120px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--large);
  margin: 0 auto;
  padding: 0 24px;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 50;
  background: var(--encre);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
}

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

/* ─── Barre ─────────────────────────────────────────────────────────── */

.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--trait);
}

.bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.mark {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--noir);
}

.langs {
  display: flex;
  gap: 2px;
}

.langs button {
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gris);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.langs button:hover {
  color: var(--encre);
}

.langs button.on {
  background: var(--noir);
  color: #fff;
}

/* ─── Ouverture ─────────────────────────────────────────────────────── */

.hero {
  padding: 72px 0 88px;
  /* Voile doré très pâle : donne du relief au bloc d'ouverture sans poser
     d'aplat de couleur, qui alourdirait une direction épurée. */
  background:
    radial-gradient(
      ellipse 80% 55% at 20% 0%,
      rgba(201, 162, 39, 0.09),
      transparent 68%
    ),
    var(--papier);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0 0 14px;
}

.hero h1 {
  font-size: clamp(2.6rem, 5.5vw, 4.1rem);
  line-height: 1.02;
  margin-bottom: 22px;
}

.lead {
  font-size: 1.12rem;
  color: var(--gris);
  max-width: 30em;
  margin: 0 0 30px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--noir);
  color: #fff;
}
.btn-primary:hover {
  background: var(--noir-doux);
}

.btn-ghost {
  color: var(--encre);
  border: 1px solid var(--trait);
}
.btn-ghost:hover {
  border-color: var(--encre);
}

/*
  Le calculateur. Bloc signature : la comparaison se manipule au lieu de
  s'affirmer. Chiffres en chasse fixe, alignés à droite comme dans un livre de
  caisse — c'est la langue du métier.
*/
.calc {
  margin: 0;
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 20px 50px -32px rgba(16, 16, 16, 0.4);
}

.calc figcaption {
  font-size: 13px;
  font-weight: 600;
  color: var(--gris);
  text-align: center;
}

.calc-count {
  display: block;
  text-align: center;
  font-family: var(--serif);
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--noir);
  line-height: 1.1;
  margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
}

#members {
  width: 100%;
  margin: 8px 0 22px;
  accent-color: var(--or);
  cursor: pointer;
}

/* Nombre de clubs : le tarif dégressif ne se devine pas, il faut pouvoir le
   manipuler comme le nombre de membres. */
.calc-clubs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 16px;
  font-size: 13px;
  color: var(--gris);
}

.calc-clubs-btns {
  display: flex;
  gap: 4px;
}

.calc-clubs-btns button {
  width: 34px;
  height: 30px;
  border: 1px solid var(--trait);
  background: none;
  border-radius: 7px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--gris);
  cursor: pointer;
  transition: all 0.15s ease;
}

.calc-clubs-btns button:hover {
  border-color: var(--noir);
  color: var(--noir);
}

.calc-clubs-btns button.on {
  background: var(--noir);
  border-color: var(--noir);
  color: #fff;
}

.calc-rows {
  border-top: 1px solid var(--trait);
}

.calc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--trait);
}

.calc-label {
  font-size: 14px;
  color: var(--gris);
}

.calc-amount {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.calc-amount.muted {
  color: var(--gris);
  text-decoration: line-through;
  text-decoration-color: rgba(107, 107, 107, 0.45);
}

.calc-row.is-ours .calc-label {
  color: var(--encre);
  font-weight: 600;
}
.calc-row.is-ours .calc-amount {
  color: var(--noir);
}

.calc-save {
  text-align: center;
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--gris);
}

.calc-save strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--or);
  font-variant-numeric: tabular-nums;
}

.calc-note {
  margin: 14px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--gris);
  text-align: center;
  opacity: 0.85;
}

/* ─── Journée ───────────────────────────────────────────────────────── */

.day {
  padding: 84px 0;
  background: var(--coquille);
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}

.day h2,
.edge h2,
.price h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  /* 16em plutôt que 18 : à 18, « hora por hora » cassait en laissant un mot
     seul sur la dernière ligne. */
  max-width: 16em;
  margin-bottom: 44px;
  /* Empêche un dernier mot isolé quand la traduction change de longueur. */
  text-wrap: balance;
}

.day-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: 12px;
  overflow: hidden;
}

.moment {
  background: #fff;
  padding: 26px 24px 28px;
}

/*
  L'heure de la journée sert de repère, pas un numéro : la séquence est réelle
  — un club ouvre, sert, compte, ferme — et c'est ce que le gérant reconnaît.
*/
.moment-when {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 10px;
}

.moment h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.moment p {
  margin: 0;
  font-size: 14.5px;
  color: var(--gris);
}

/* ─── Différence ────────────────────────────────────────────────────── */

.edge {
  padding: 84px 0;
}

.edge-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 48px;
}

.edge-list li {
  padding: 22px 0;
  border-top: 1px solid var(--trait);
}

.edge-list h3 {
  font-size: 1.15rem;
  margin-bottom: 6px;
}

.edge-list p {
  margin: 0;
  font-size: 14.5px;
  color: var(--gris);
  max-width: 34em;
}

/* ─── Reprise ───────────────────────────────────────────────────────── */

.switch {
  background: var(--noir);
  color: #fff;
  padding: 60px 0;
}

.switch-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: center;
}

.switch h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  margin-bottom: 12px;
}

.switch p {
  margin: 0;
  color: #a0a0a0;
  font-size: 15px;
  max-width: 38em;
}

.switch-stat {
  text-align: right;
  margin: 0;
}

.switch-stat strong {
  display: block;
  font-family: var(--serif);
  font-size: 2.4rem;
  color: var(--or);
  line-height: 1.1;
}

.switch-stat span {
  font-size: 13px;
  color: #a0a0a0;
}

/* ─── Prix ──────────────────────────────────────────────────────────── */

.price {
  padding: 84px 0;
  background: var(--coquille);
  border-top: 1px solid var(--trait);
}

.price h2 {
  margin-bottom: 10px;
}

.price-sub {
  color: var(--gris);
  margin: 0 0 40px;
  font-size: 1.02rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card {
  border: 1px solid var(--trait);
  border-radius: 14px;
  padding: 30px 24px 26px;
  text-align: center;
}

.card-main {
  background: var(--noir);
  border-color: var(--noir);
  color: #fff;
}

.card-amount {
  font-family: var(--serif);
  font-size: 2.7rem;
  font-weight: 700;
  margin: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.card-period {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--gris);
}

.card-what {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--gris);
}

.card-main .card-period,
.card-main .card-what {
  color: #a0a0a0;
}

.card-badge {
  margin: 16px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--or);
}

.price-notes {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 32px;
}

.price-notes li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: var(--gris);
}

.price-notes li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--or);
}

/* ─── Contact ───────────────────────────────────────────────────────── */

.contact {
  padding: 80px 0;
  background: var(--noir);
  color: #fff;
}

.contact-inner {
  text-align: center;
}

.contact h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  margin-bottom: 12px;
}

.contact p {
  color: #a0a0a0;
  margin: 0 auto 28px;
  max-width: 32em;
}

.btn-wa {
  background: var(--or);
  color: var(--noir);
  font-size: 16px;
  padding: 15px 30px;
}

.btn-wa:hover {
  background: var(--or-clair);
}

.btn-wa svg {
  width: 20px;
  height: 20px;
}

.contact-alt {
  margin: 20px 0 0;
  font-size: 14px;
}

.contact-alt a {
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}


/* ─── Pied ──────────────────────────────────────────────────────────── */

.foot {
  padding: 26px 0;
  background: var(--noir);
  color: #808080;
  font-size: 13px;
}

.foot-inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.foot a {
  color: #a0a0a0;
  text-decoration: none;
}

.foot a:hover {
  color: #fff;
}

/* ─── Adaptations ───────────────────────────────────────────────────── */

@media (max-width: 940px) {
  .hero-grid,
  .switch-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .switch-stat {
    text-align: left;
  }
  .day-grid,
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .edge-list,
  .price-notes {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .hero {
    padding: 48px 0 60px;
  }
  .day,
  .edge,
  .price {
    padding: 56px 0;
  }
  .day-grid,
  .cards {
    grid-template-columns: 1fr;
  }
  .btn {
    width: 100%;
    justify-content: center;
  }
  .cta-row {
    flex-direction: column;
  }
}