/* Sobhi Running Club : adhésion annuelle
   Direction éditoriale : grille à titres en marge, encre et pierre (granit de la façade).
   Polices auto-hébergées (licence SIL OFL 1.1) : Newsreader, Schibsted Grotesk. */

@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin-wght-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: light;

  --ink: #040606;          /* noir du logo */
  --ink-soft: #3A3833;
  --muted: #5E5B54;
  --paper: #FFFFFF;
  --stone: #EAE8E3;        /* granit de la façade */
  --rule: #D5D2CB;
  --field-line: #8C887F;
  --door: #14232A;         /* châssis de la vitrine */
  --error: #B4182F;
  --mark: #FFE9A8;
  --mark-ink: #3A2E00;
  --ok: #1D6644;
  --ok-bg: #E2F1E8;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 4vw, 48px);
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--door); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
main:focus { outline: none; }
svg { display: block; }
em { font-style: italic; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--paper); color: var(--ink); font-weight: 500;
}
.skip-link:focus { top: 1rem; }

.test-banner {
  margin: 0;
  padding: 10px var(--gutter);
  background: var(--mark);
  color: var(--mark-ink);
  font-size: 14px;
  text-align: center;
}

/* ---------- Grille : titres en marge ---------- */

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

.section { padding-top: clamp(72px, 9vw, 136px); }
.section--page { padding-top: clamp(40px, 6vw, 88px); }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  padding-top: 18px;
  border-top: 1px solid var(--ink);
}

.side {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.side__num { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }

.main { flex: 999 1 600px; min-width: 0; }
.main--text { max-width: 46rem; }

/* ---------- Ouverture ---------- */

.hero {
  position: relative;
  overflow: hidden;
  /* Proportions de la photo (3:2), bornées : sur mobile la façade est recadrée sur la porte */
  height: clamp(34rem, 66.667vw, 60rem);
  background: var(--door);
  color: #FFFFFF;
}

.hero__photo,
.hero__photo img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}
.hero__photo img { object-fit: cover; object-position: 50% 55%; }

/* Voile : lisibilité des légendes en haut et en bas */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(4, 6, 6, 0.5) 0%,
    rgba(4, 6, 6, 0.08) 22%,
    rgba(4, 6, 6, 0.08) 68%,
    rgba(4, 6, 6, 0.6) 100%);
}

.hero__bar {
  position: absolute;
  left: 0; right: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px 24px;
  padding: 20px var(--gutter);
  font-size: 14px;
}
.hero__bar p { margin: 0; }
.hero__bar--top { top: 0; }
.hero__bar--bottom { bottom: 0; flex-wrap: wrap; align-items: flex-end; }
.hero__season { font-weight: 500; }

.hero__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #FFFFFF;
  font-weight: 500;
  text-decoration: none;
}
.hero__cta:hover { background: #FFFFFF; color: var(--ink); }
.hero a:focus-visible { outline-color: #FFFFFF; }

.hero__logo {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 2;
  width: clamp(9.5rem, 15vw, 15rem);
  color: #FFFFFF;
  transform: translate(-50%, -50%);
  animation: rise 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 150ms both;
}
.hero__logo svg { width: 100%; height: auto; }

@keyframes rise {
  from { opacity: 0; transform: translate(-50%, -44%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ---------- En-tête des autres pages ---------- */

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 84px;
}
.masthead p { margin: 0; font-size: 14px; font-weight: 500; }
.masthead__logo { display: block; width: clamp(180px, 20vw, 250px); color: var(--ink); }
.masthead__logo svg { width: 100%; height: auto; }

/* ---------- Typographie ---------- */

h1, h2, h3 { margin: 0; }

.display {
  max-width: 13ch;
  font: 400 clamp(46px, 6.4vw, 104px)/0.98 var(--serif);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.title {
  font: 400 clamp(42px, 5vw, 76px)/1 var(--serif);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.lead {
  max-width: 36rem;
  margin: 36px 0 0;
  font: 400 clamp(19px, 1.6vw, 23px)/1.45 var(--serif);
  text-wrap: pretty;
}
.lead--sm { max-width: 34rem; margin-top: 18px; font-size: 19px; }
.title + .lead { margin-top: 24px; }

.kicker { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.after { margin: 32px 0 0; color: var(--ink-soft); }
.after + .after { margin-top: 10px; }

.cta-row,
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 40px;
}
.cta-row p { margin: 0; color: var(--muted); font-size: 15px; }
.actions { margin-top: 36px; }

/* ---------- Boutons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 28px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: #FFFFFF;
  font: 500 16px/1.2 var(--sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: var(--door); border-color: var(--door); color: #FFFFFF; text-decoration: none; }
.button:disabled { opacity: 0.7; cursor: progress; }
.button--ghost { background: var(--paper); color: var(--ink); }
.button--ghost:hover { background: var(--stone); border-color: var(--ink); color: var(--ink); }
.button--full { width: 100%; min-height: 56px; margin-top: 20px; }

/* ---------- L’adhésion : table de définitions ---------- */

.defs { flex: 999 1 600px; min-width: 0; margin: -6px 0 0; }
.defs__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 48px;
  padding: 30px 0;
  border-bottom: 1px solid var(--rule);
}
.defs__row:first-child { padding-top: 6px; }
.defs dt {
  flex: 1 1 240px;
  min-width: 0;
  font: 400 clamp(30px, 3vw, 44px)/1.05 var(--serif);
  letter-spacing: -0.02em;
}
.defs dd { flex: 999 1 340px; min-width: 0; max-width: 34rem; margin: 0; color: var(--ink-soft); }
.defs dd span { display: block; }

/* ---------- Bulletin d’adhésion ---------- */

.bulletin {
  margin-top: clamp(72px, 9vw, 136px);
  padding: clamp(48px, 6vw, 88px) 0 clamp(72px, 9vw, 128px);
  background: var(--stone);
}

.bulletin__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px;
  margin-top: 48px;
}
.bulletin__fields { flex: 999 1 460px; min-width: 0; }

.group { margin-bottom: 44px; padding-top: 16px; border-top: 1px solid var(--ink); }
.group:last-child { margin-bottom: 0; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.group > fieldset > legend {
  padding: 0;
  font: 400 28px/1.2 var(--serif);
  letter-spacing: -0.015em;
}
.group__hint { margin: 4px 0 0; color: var(--muted); font-size: 15px; }

.pair { display: flex; flex-wrap: wrap; gap: 0 16px; }
.pair > .field { flex: 1 1 200px; min-width: 0; }

.field { margin-top: 18px; }
.field > label,
.choice-group > legend {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  font: 500 14px/1.4 var(--sans);
}
.field__hint { margin: -2px 0 6px; color: var(--muted); font-size: 14px; }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--field-line);
  border-radius: 0;
  background: #FFFFFF;
  color: var(--ink);
  font: inherit;
}
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="password"]:focus-visible { border-color: var(--ink); outline-offset: 1px; }

.field--error input { border-color: var(--error); }
.field__error { margin: 6px 0 0; color: var(--error); font-size: 14px; font-weight: 500; }

/* Pastilles coupe / taille */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; display: block; }
.choice input {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 52px;
  padding: 8px 14px;
  border: 1px solid var(--field-line);
  background: #FFFFFF;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.choices--wide .choice span { min-width: 132px; padding: 8px 16px; }
.choice input:hover + span { border-color: var(--ink); }
.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.choice input:disabled { cursor: not-allowed; }
.choice input:disabled + span { opacity: 0.3; text-decoration: line-through; }
.field--error .choice span { border-color: var(--error); }

/* Reçu */
.receipt-col { flex: 1 1 300px; min-width: 0; position: sticky; top: 24px; }
.receipt { padding: 28px; background: #FFFFFF; }
.receipt__title { margin: 0; font-size: 14px; font-weight: 500; }

.leaders { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 0; font-size: 16px; }
.leader { display: flex; align-items: baseline; gap: 8px; }
.leader dt, .leader dd { margin: 0; }
.leader__dots { flex: 1 1 auto; min-width: 16px; border-bottom: 1px dotted var(--field-line); }
.leader__value { white-space: nowrap; font-variant-numeric: tabular-nums; }
.leader__value.is-pending { color: var(--muted); }

.receipt__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--ink);
}
.receipt__total span:first-child { font-weight: 500; }
.receipt__amount { font: 400 46px/1 var(--serif); letter-spacing: -0.03em; }

.consent { margin-top: 24px; }
.check,
.field > .check { display: flex; gap: 12px; align-items: flex-start; margin: 0; font: 400 15px/1.45 var(--sans); cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); }

.receipt__note { margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.privacy { margin: 16px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Récapitulatif de confirmation */
.recap { max-width: 30rem; margin-top: 40px; }

/* ---------- Messages ---------- */

.alert {
  margin: 36px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--error);
  background: #FFFFFF;
}
.alert:focus { outline: none; }
.alert h3 { margin: 0 0 6px; color: var(--error); font-size: 16px; font-weight: 600; line-height: 1.3; }
.alert p { margin: 0; }
.alert ul { margin: 0; padding-left: 18px; }
.alert a { color: var(--error); font-weight: 500; }

/* ---------- Pages légales ---------- */

.legal-meta { margin: 18px 0 0; color: var(--muted); }
.articles { margin-top: 40px; border-bottom: 1px solid var(--rule); }
.article { padding: 22px 0; border-top: 1px solid var(--rule); }
.article h2 { font: 400 26px/1.2 var(--serif); letter-spacing: -0.01em; }
.article p { margin: 10px 0 0; color: var(--ink-soft); }
.todo { padding: 0 3px; background: var(--mark); color: var(--mark-ink); }

/* ---------- Colophon ---------- */

.colophon { padding: clamp(72px, 9vw, 128px) 0 28px; }
.colophon__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  padding-top: 18px;
  border-top: 1px solid var(--ink);
  font-size: 14px;
  line-height: 1.6;
}
.colophon__col { flex: 1 1 200px; min-width: 0; }
.colophon__col h2 { margin: 0 0 6px; font: 500 14px/1.6 var(--sans); }
.colophon__col p { margin: 0; color: var(--muted); }
.colophon__col ul { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; padding: 0; list-style: none; }
.colophon__col a { color: var(--muted); }
.colophon__logo { margin-top: clamp(56px, 8vw, 112px); color: var(--ink); }
.colophon__logo svg { width: 100%; height: auto; }
.colophon__copy { margin: 20px 0 0; color: var(--muted); font-size: 13px; }

/* ---------- Espace club ---------- */

.admin { padding-bottom: 72px; }
.form--narrow { max-width: 22rem; margin-top: 24px; }
.form--narrow .button { margin-top: 20px; }
.season-switch { margin: 12px 0 0; color: var(--muted); }
.season-switch a { margin-left: 8px; }

.stats { display: flex; flex-wrap: wrap; gap: 20px 0; margin: 32px 0 0; }
.stats div { margin-right: 32px; padding-right: 32px; border-right: 1px solid var(--rule); }
.stats div:last-child { border-right: 0; }
.stats dt { color: var(--muted); font-size: 14px; }
.stats dd { margin: 0; font: 400 40px/1.1 var(--serif); letter-spacing: -0.02em; }

.toolbar { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.section-title { margin-top: 56px; font: 400 clamp(28px, 2.6vw, 36px)/1.1 var(--serif); letter-spacing: -0.015em; }

.table-wrap { max-width: 100%; margin-top: 16px; overflow-x: auto; border: 1px solid var(--rule); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap; }
thead th, tfoot th, tfoot td { background: var(--stone); font-weight: 500; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tfoot th, tfoot td { border-top: 1px solid var(--rule); border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.is-na { color: var(--muted); }

.tag { display: inline-block; padding: 1px 9px; border-radius: 99px; background: var(--stone); font-size: 13px; font-weight: 500; }
.tag--paid { background: var(--ok-bg); color: var(--ok); }
.tag--failed { background: #FBEDEF; color: var(--error); }

.hash-output { max-width: 100%; margin: 24px 0 0; padding: 16px 18px; overflow-x: auto; background: var(--stone); font-size: 14px; white-space: pre; }

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__logo { animation: none; }
}