/* Site vitrine riderank.fr (décision 0065). Charte de l'appli (docs/DESIGN.md) : gris froid, encre,
   magenta pour l'inscription seulement, Bebas Neue et Archivo auto-hébergées, coins carrés, ombre dure. */

@font-face { font-family: 'Bebas Neue'; src: url(fonts/bebas-neue-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url(fonts/archivo-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url(fonts/archivo-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url(fonts/archivo-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --paper: #f2f2f2;
  --card: #ffffff;
  --ink: #111111;
  --muted: #5c5f68;
  --rule: #e0e0e0;
  --blue: #0624ff;
  --magenta: #a6009c;
  --gutter: 16px;
  --bar: 64px;
}
@media (min-width: 1024px) { :root { --gutter: 48px; --bar: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font: 400 16px/1.55 Archivo, system-ui, sans-serif; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
a:hover { color: var(--blue); text-decoration-thickness: 2px; }

.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.h1, .h2, .num, .logo, .btn, dt, .facts b, .cta-title, .bar-nav a {
  font-family: 'Bebas Neue', Impact, sans-serif; font-weight: 400; text-transform: uppercase;
}

/* En-tête collé en haut : l'inscription reste toujours à portée. */
.bar { position: sticky; top: 0; z-index: 10; background: var(--card); border-bottom: 2px solid var(--ink); }
.bar-in { display: flex; align-items: center; gap: 24px; height: var(--bar); }
.logo { background: var(--ink); color: #fff; padding: 2px 8px; font-size: 24px; letter-spacing: .12em; text-decoration: none; }
.logo:hover { color: #fff; }
.logo-inv { background: #fff; color: var(--ink); }
.bar-nav { display: none; gap: 24px; }
.bar-nav a { font-size: 20px; letter-spacing: .06em; text-decoration: none; }
.bar-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.bar-actions { gap: 12px; }
.only-wide { display: none; }
.link { display: inline-flex; align-items: center; min-height: 48px; text-underline-offset: 4px; }
@media (min-width: 768px) { .bar-nav { display: flex; } .bar-actions { gap: 16px; } .only-wide { display: inline; } .only-narrow { display: none; } }

/* Bouton d'inscription : magenta, coin haut droit coupé (DESIGN.md, section 5). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px;
  background: var(--magenta); color: #fff; font-size: 24px; letter-spacing: .06em; text-decoration: none; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.btn:hover { background: var(--ink); color: #fff; }
.btn-small { min-height: 44px; padding: 0 20px; font-size: 20px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }

/* Captures : fenêtre bordée avec son nom, ou téléphone bordé, ombre dure. */
.window { border: 2px solid var(--ink); background: var(--card); box-shadow: 6px 6px 0 var(--ink); }
.window-bar { padding: 6px 12px; border-bottom: 2px solid var(--ink); font-family: 'Bebas Neue', Impact, sans-serif; text-transform: uppercase; font-size: 16px; letter-spacing: .08em; color: var(--muted); }
/* Bandeau LIVE de la page publique, animé par-dessus la capture (même rendu que l'appli, décision 0042). */
.window { container-type: inline-size; }
.ticker { overflow: hidden; background: var(--ink); color: #fff; font-family: 'Bebas Neue', Impact, sans-serif; font-size: 1.7cqw; line-height: 3.4cqw; letter-spacing: .12em; white-space: nowrap; }
.ticker p { display: flex; width: max-content; animation: ticker 40s linear infinite; }
.ticker span { padding-right: .5em; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker p { animation: none; } }
.phone { border: 2px solid var(--ink); background: var(--card); box-shadow: 6px 6px 0 var(--ink); overflow: hidden; }
.points b { font-weight: 700; }

/* Ouverture */
.hero { display: grid; gap: 40px; padding-top: 40px; padding-bottom: 56px; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.h1 { font-size: clamp(44px, 4.7vw, 72px); line-height: .92; }
.lead { font-size: 19px; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
/* Ouverture : la photo du bowl, avec le direct incrusté comme les scores à la télé (Street League). */
.hero-shot { position: relative; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); overflow: hidden; }
.hero-bg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 0% 40%; }
.hero-board { position: absolute; left: 4%; top: 50%; transform: translateY(-50%); width: 34%; max-height: 94%; object-fit: contain; object-position: top; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--paper); }
/* Téléphone : le pavé du juge centré sous la page publique, il chevauche le bandeau LIVE. */
.hero-visual { position: relative; display: flex; flex-direction: column; align-items: center; }
.hero-visual .window { align-self: stretch; }
.hero-phone { position: relative; width: 52%; max-width: 220px; margin-top: -28px; }
@media (min-width: 1024px) {
  .hero { grid-template-columns: 6fr 7fr; align-items: center; gap: 56px; min-height: min(calc(100vh - var(--bar)), 760px); padding-top: 48px; padding-bottom: 48px; }
  .hero-visual { display: block; margin-bottom: 120px; }
  .hero-phone { position: absolute; margin-top: 0; right: -48px; bottom: -130px; width: 24%; max-width: 210px; }

}

/* Bandeau photo pleine largeur, collé à la bande noire : le skater reste visible, sans prendre la place des captures. */

/* En bref : quatre faits vérifiables, pas de chiffres inventés. */
.facts { background: var(--ink); color: #fff; }
.facts-in { display: grid; grid-template-columns: 1fr 1fr; }
.facts li { padding: 20px 16px 20px 0; border-bottom: 1.5px solid #3a3a3a; color: var(--rule); font-size: 14px; }
.facts b { display: block; color: #fff; font-size: 28px; line-height: 1; letter-spacing: .02em; margin-bottom: 4px; }
@media (min-width: 1024px) {
  .facts-in { grid-template-columns: repeat(4, 1fr); }
  .facts li { padding: 28px 24px 28px 0; border-bottom: 0; border-right: 1.5px solid #3a3a3a; }
  .facts li + li { padding-left: 24px; }
  .facts li:last-child { border-right: 0; }
}

/* Fonctionnalités : texte et vraie capture, en alternance sur ordinateur. */
.feature { display: grid; gap: 32px; padding-top: 64px; padding-bottom: 64px; }
.feature-copy { display: flex; flex-direction: column; gap: 16px; }
.num { font-size: 56px; line-height: .8; color: var(--magenta); }
.h2 { font-size: clamp(40px, 4.4vw, 64px); line-height: .92; }
.feature-copy > p { font-size: 18px; max-width: 46ch; }
.points { display: flex; flex-direction: column; }
.points li { padding: 10px 0 10px 20px; border-bottom: 1.5px solid var(--rule); position: relative; }
.points li::before { content: ''; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; background: var(--ink); }
.feature-phone { width: 62%; max-width: 300px; justify-self: center; }
@media (min-width: 1024px) {
  .feature { grid-template-columns: 5fr 7fr; gap: 72px; align-items: center; padding-top: 96px; padding-bottom: 96px; }
  .feature-flip { grid-template-columns: 7fr 5fr; }
  .feature-flip .feature-copy { order: 2; }
  .feature-phone { width: 300px; }
}

/* Une photo de contest, pleine largeur, entre deux fonctionnalités. */
.crowd { position: relative; margin: 32px 0; }
.crowd img { width: 100%; height: 64vw; max-height: 620px; object-fit: cover; object-position: 50% 45%; }
.crowd figcaption { position: absolute; left: 0; right: 0; bottom: 24px; }
.crowd figcaption span { display: inline-block; background: var(--ink); color: #fff; padding: 8px 16px 4px; font-family: 'Bebas Neue', Impact, sans-serif; font-size: clamp(28px, 4vw, 56px); line-height: 1; text-transform: uppercase; }

/* Histoire : une photo du porteur, le texte sur un bloc noir. */
.story { position: relative; background: var(--ink); color: #fff; }
.story-photo { width: 100%; height: auto; aspect-ratio: 2000 / 1120; max-height: 80vh; object-fit: cover; object-position: 50% 45%; }
.story-in { display: flex; flex-direction: column; gap: 16px; padding-top: 32px; padding-bottom: 48px; }
.story-in p { font-size: 19px; max-width: 48ch; color: var(--rule); }
@media (min-width: 1024px) { .story-in { padding-top: 48px; padding-bottom: 64px; } }

/* Questions */
.faq { padding-top: 64px; padding-bottom: 72px; }
.faq dl { display: grid; gap: 28px; margin-top: 32px; }
.faq dl > div { padding-top: 4px; }
dt { font-size: 28px; line-height: 1; }
dd { margin-top: 8px; max-width: 46ch; }
@media (min-width: 1024px) { .faq { padding-top: 96px; padding-bottom: 96px; } .faq dl { grid-template-columns: repeat(3, 1fr); gap: 40px 48px; } }

/* Dernier appel */
.cta { background: var(--card); }
.cta-in { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 56px; padding-bottom: 56px; }
.cta-title { font-size: clamp(44px, 5.6vw, 88px); line-height: .9; }
@media (min-width: 1024px) { .cta-in { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 80px; padding-bottom: 80px; } }

/* Pied de page */
.foot { background: var(--ink); color: #fff; padding: 24px 0; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 32px; font-size: 14px; }
.foot-in a { display: inline-flex; align-items: center; min-height: 48px; text-underline-offset: 4px; }
.foot-in a:hover { color: #fff; }
.foot-note { flex-basis: 100%; color: #9a9da5; font-size: 13px; }