/* Urox — page vitrine athlète. Mobile d'abord ; valeurs : designs/vitrine/styleguide.md */ /* Polices en WOFF2 : le même fichier que l'.otf, compressé sans perte (tables de dessin, de métriques et de crénage identiques octet pour octet, aucun glyphe retiré). L'.otf reste en repli. */ @font-face { font-family: 'NouvellesMontreal'; src: url('assets/fonts/PPNeueMontreal-Regular.woff2') format('woff2'), url('assets/fonts/PPNeueMontreal-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'NouvellesMontreal'; src: url('assets/fonts/PPNeueMontreal-Semibold.woff2') format('woff2'), url('assets/fonts/PPNeueMontreal-Semibold.otf') format('opentype'); font-weight: 600; font-display: swap; } :root { --canvas: #0E0E0E; --canvas-2: #1A1A1A; --text: #F5F5F5; --text-2: #C8C8C8; --text-muted: #8C8C8C; --text-faint: #5E5E5E; --accent: #4ADE80; --glass: rgba(255,255,255,0.10); --glass-2: rgba(255,255,255,0.15); --glass-strong: rgba(28,28,28,0.72); --border: rgba(255,255,255,0.15); --border-subtle: rgba(255,255,255,0.10); --highlight: rgba(255,255,255,0.20); --r-card: 18px; --r-sheet: 22px; --r-nav: 16px; --margin: 20px; --float: 14px; --nav-h: 50px; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --page: linear-gradient(180deg, #0A0A0A 0%, #121212 45%, #1F1F1F 100%); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'NouvellesMontreal', system-ui, -apple-system, 'SF Pro Display', Inter, sans-serif; font-size: 16px; line-height: 1.5; letter-spacing: -0.01em; color: var(--text-2); background: var(--canvas); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, p, ul, ol, dl, dd, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* Titres en demi-gras ; tout le reste (corps, libellés, boutons) en 400. */ h1, h2, h3 { color: var(--text); font-weight: 600; text-wrap: balance; } /* Aucun gras dans le texte : l'emphase passe par la couleur (blanc sur gris). */ b, strong { font-weight: 400; color: var(--text); } h2 { font-size: 34px; letter-spacing: -0.03em; line-height: 1.05; } /* ── Verre ──────────────────────────────────────────────────────── */ .glass { background: var(--glass); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 12px 40px rgba(0,0,0,0.40); } .glass-strong { background: var(--glass-strong); -webkit-backdrop-filter: blur(32px) saturate(160%); backdrop-filter: blur(32px) saturate(160%); border: 1px solid var(--border); box-shadow: inset 0 1px 0 var(--highlight), 0 18px 50px rgba(0,0,0,0.45); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass-strong { background: #1C1C1C; border-color: rgba(255,255,255,0.25); } } @media (prefers-reduced-transparency: reduce) { .glass { background: #262626; border-color: rgba(255,255,255,0.25); } .glass-strong { background: #1C1C1C; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: rgba(255,255,255,0.25); } } /* ── Boutons, pastilles, sur-titres ─────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: 9999px; font-size: 15px; font-weight: 400; white-space: nowrap; transition: transform 150ms var(--ease), background 150ms var(--ease); } .btn:active { transform: scale(0.98); } .btn--sm { height: 44px; padding: 0 18px; font-size: 14px; } .btn--primary { background: #FFFFFF; color: #0F0F14; } .btn--primary:hover { background: rgba(255,255,255,0.88); } .btn--outline { border: 1px solid var(--border); color: var(--text); } .btn--outline:hover { background: var(--glass); } .btn--outline-light { border: 1px solid rgba(255,255,255,0.7); color: #FFFFFF; height: 48px; } .eyebrow { font-size: 15px; font-weight: 400; letter-spacing: -0.01em; color: var(--text-muted); line-height: 1.3; } .lead { font-size: 18px; line-height: 1.45; color: var(--text-2); } .pills { display: flex; gap: 8px; } .pills li { flex: none; padding: 7px 14px; border-radius: 9999px; background: var(--glass); border: 1px solid var(--border-subtle); font-size: 13px; font-weight: 400; color: var(--text-2); white-space: nowrap; } .pills--wrap { flex-wrap: wrap; } /* ── Avant / après la sortie de l'app ─────────────────────────────── : liste d'attente, « Bientôt », aucun badge de store. : badges officiels et boutons de téléchargement, plus de liste d'attente. La bascule se fait d'un coup sur toutes les pages : tools/urox site release . */ [data-app="soon"] .only-live, [data-app="live"] .only-soon { display: none !important; } .hero__stores { margin-top: 40px; justify-content: center; } .free__stores { justify-content: flex-start; } /* Lien d'évitement : invisible, il apparaît au premier appui sur Tab et saute la navigation. */ .skip { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 12px 16px; border-radius: 10px; background: #FFFFFF; color: #0F0F14; font-size: 15px; transform: translateY(-200%); } .skip:focus { transform: none; } /* Page 404. */ .notfound { min-height: 62svh; display: grid; align-content: center; justify-items: start; gap: 14px; } .notfound__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } /* ── Navigation ─────────────────────────────────────────────────── */ .nav { position: fixed; z-index: 50; top: var(--float); left: var(--float); right: var(--float); /* Barre aux angles adoucis, pas en pilule : rayon de carte, filet fin, ombre courte. */ height: var(--nav-h); padding: 0 4px 0 18px; border-radius: var(--r-nav); display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1200px; margin: 0 auto; /* Pas de bordure uniforme : le filet est une arête de verre (::before), vive en haut, presque éteinte en bas. */ border: 0; box-shadow: 0 10px 30px rgba(0,0,0,0.35); } /* Arête de verre : la lumière vient du haut. Le filet s'allume sur le bord supérieur, s'efface le long des côtés et ne laisse qu'un reflet faible sous la barre. */ .nav::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.09) 30%, rgba(255,255,255,0.03) 68%, rgba(255,255,255,0.07) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } /* Au fil du parcours, la barre prend la teinte du bloc en cours : un voile de couleur sous son contenu et un halo court autour d'elle. Hors du parcours, elle redevient neutre. */ .nav { transition: box-shadow 900ms var(--ease); } .nav::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background-color: rgb(var(--nav-hue, 255,255,255)); opacity: 0; transition: opacity 900ms var(--ease), background-color 900ms var(--ease); } body[data-step-id="programmation"] { --nav-hue: 74,222,128; } body[data-step-id="communaute"] { --nav-hue: 244,114,182; } body[data-step-id="explorer"] { --nav-hue: 249,115,22; } body[data-step-id="planning"] { --nav-hue: 163,230,53; } /* Sur ordinateur seulement : sur téléphone, la barre garde sa couleur d'origine. */ @media (min-width: 768px) { .is-in-tour .nav { box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 44px rgba(var(--nav-hue, 255,255,255), 0.16); } .is-in-tour .nav::after { opacity: 0.13; } } /* Le bouton suit l'angle de la barre : rayon de la barre moins la marge qui les sépare. */ .nav .btn, .actionbar .btn { height: 42px; padding: 0 16px; border-radius: calc(var(--r-nav) - 6px); } /* Logo au centre de la barre, hors du flux : les liens tiennent à gauche, les actions à droite. */ .nav__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; } .nav__logo img { height: 18px; width: auto; } .nav__links, .nav__coach { display: none; } .nav__end { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav__end .btn { display: none; } .nav__burger { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; display: grid; place-content: center; gap: 6px; } .nav__burger span { display: block; width: 20px; height: 1.5px; background: var(--text); border-radius: 2px; transition: transform 200ms var(--ease); } .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); } /* Menu du téléphone : un tiroir qui sort de la barre. Même largeur qu'elle, accroché juste dessous, il glisse vers le bas ; rien ne dépasse au-dessus de l'en-tête. Le tiroir lui-même n'est jamais découpé ni rendu translucide pendant l'animation : sur un panneau en verre (backdrop-filter), cela fait « zoomer » la page vue à travers. C'est une fenêtre posée sous la barre (.menu-clip, créée par nav.js) qui le masque tant qu'il n'est pas descendu ; elle déborde largement sur les côtés et en bas pour ne couper ni son filet ni son ombre. Le voile sur la page est un calque à part (.menu-scrim). */ .menu-clip { position: fixed; z-index: 49; left: 0; right: 0; top: calc(var(--float) + var(--nav-h) + 6px); padding: 0 var(--float) 90px; overflow: hidden; pointer-events: none; } .menu { padding: 8px; border-radius: var(--r-nav); display: grid; pointer-events: auto; } .menu[hidden] { display: none; } .menu-clip .menu { transition: transform 380ms var(--ease), visibility 0s; } /* Fermé : remonté au-dessus de la fenêtre, donc masqué, et hors du parcours clavier. `hidden` reste l'état posé par nav.js ; on le garde affiché pour animer la fermeture. */ .menu-clip .menu[hidden] { display: grid; visibility: hidden; transform: translateY(calc(-100% - 12px)); transition: transform 300ms var(--ease), visibility 0s 300ms; } .menu-scrim { position: fixed; inset: 0; z-index: 48; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease); } .menu-open .menu-scrim { opacity: 1; pointer-events: auto; } .menu a { padding: 13px 14px; border-radius: 10px; font-size: 17px; font-weight: 400; color: var(--text); } .menu a:active { background: var(--glass); } .menu hr { width: calc(100% - 28px); border: 0; border-top: 1px solid var(--border-subtle); margin: 6px auto; } /* ── Hero ───────────────────────────────────────────────────────── */ .hero { position: relative; text-align: center; /* Le hero occupe tout l'écran et son contenu est centré en hauteur : la section suivante commence sous la ligne de flottaison. */ min-height: 100svh; padding: 104px var(--margin) 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .hero__title { margin-top: 0; font-size: 44px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; } .grad { /* Dégradé du logo, du bleu au rouge. */ background: linear-gradient(100deg, #257DF9 0%, #3EDDFA 14%, #A5EDE6 34%, #F2F9D8 50%, #FDDA2D 70%, #FF7424 88%, #ED4328 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__head { position: relative; display: flex; flex-direction: column; align-items: center; } /* Parallaxe du hero : le titre s'attarde, le texte un peu moins, et l'ensemble s'efface en sortant. */ .hero__title { transform: translate3d(0, calc(var(--hp, 0) * 140px), 0); opacity: calc(1 - var(--hp, 0) * 1.5); will-change: transform; } .hero .lead, .hero__note { transform: translate3d(0, calc(var(--hp, 0) * 70px), 0); opacity: calc(1 - var(--hp, 0) * 1.8); will-change: transform; } /* Sticker holographique festonné, façon étiquette d'authenticité : vingt-quatre pointes à peine adoucies, fond argenté irisé (pastels tirés du dégradé du logo), texte au centre et cœur avec le logo. Les reflets irisés tournent lentement sous le texte, qui reste fixe (--holo, animé ci-dessous). */ @property --holo { syntax: ''; inherits: false; initial-value: 200deg; } @keyframes holo { to { --holo: 560deg; } } .sticker { position: absolute; right: -8px; bottom: -124px; width: 116px; aspect-ratio: 1; margin: 0; /* Calé sur le bord droit de l'écran (dont il dépasse à peine), où que s'arrête le texte. */ right: calc((100% - 100vw) / 2 - 10px); bottom: -172px; /* --hp : sortie du hero (main.js). Le sticker monte plus vite que la page et tourne un peu. */ transform: translate3d(0, calc(var(--hp, 0) * -90px), 0) rotate(calc(11deg + var(--hp, 0) * 16deg)); will-change: transform; filter: drop-shadow(0 14px 22px rgba(0,0,0,0.55)) drop-shadow(0 2px 3px rgba(0,0,0,0.5)); } .sticker__in { position: relative; display: block; height: 100%; clip-path: polygon(50.00% 0.00%, 50.81% 0.33%, 51.61% 0.73%, 52.40% 1.20%, 53.17% 1.70%, 53.92% 2.22%, 54.66% 2.72%, 55.39% 3.19%, 56.11% 3.60%, 56.91% 3.39%, 57.74% 3.13%, 58.58% 2.83%, 59.44% 2.53%, 60.31% 2.24%, 61.19% 1.99%, 62.07% 1.81%, 62.94% 1.70%, 63.64% 2.23%, 64.31% 2.83%, 64.95% 3.48%, 65.56% 4.17%, 66.15% 4.86%, 66.73% 5.54%, 67.32% 6.18%, 67.91% 6.76%, 68.74% 6.77%, 69.61% 6.73%, 70.50% 6.66%, 71.41% 6.59%, 72.32% 6.54%, 73.24% 6.53%, 74.13% 6.58%, 75.00% 6.70%, 75.54% 7.39%, 76.03% 8.14%, 76.48% 8.94%, 76.89% 9.76%, 77.28% 10.58%, 77.67% 11.38%, 78.07% 12.15%, 78.49% 12.87%, 79.29% 13.09%, 80.14% 13.28%, 81.02% 13.44%, 81.91% 13.61%, 82.81% 13.80%, 83.70% 14.02%, 84.55% 14.30%, 85.36% 14.64%, 85.70% 15.45%, 85.98% 16.30%, 86.20% 17.19%, 86.39% 18.09%, 86.56% 18.98%, 86.72% 19.86%, 86.91% 20.71%, 87.13% 21.51%, 87.85% 21.93%, 88.62% 22.33%, 89.42% 22.72%, 90.24% 23.11%, 91.06% 23.52%, 91.86% 23.97%, 92.61% 24.46%, 93.30% 25.00%, 93.42% 25.87%, 93.47% 26.76%, 93.46% 27.68%, 93.41% 28.59%, 93.34% 29.50%, 93.27% 30.39%, 93.23% 31.26%, 93.24% 32.09%, 93.82% 32.68%, 94.46% 33.27%, 95.14% 33.85%, 95.83% 34.44%, 96.52% 35.05%, 97.17% 35.69%, 97.77% 36.36%, 98.30% 37.06%, 98.19% 37.93%, 98.01% 38.81%, 97.76% 39.69%, 97.47% 40.56%, 97.17% 41.42%, 96.87% 42.26%, 96.61% 43.09%, 96.40% 43.89%, 96.81% 44.61%, 97.28% 45.34%, 97.78% 46.08%, 98.30% 46.83%, 98.80% 47.60%, 99.27% 48.39%, 99.67% 49.19%, 100.00% 50.00%, 99.67% 50.81%, 99.27% 51.61%, 98.80% 52.40%, 98.30% 53.17%, 97.78% 53.92%, 97.28% 54.66%, 96.81% 55.39%, 96.40% 56.11%, 96.61% 56.91%, 96.87% 57.74%, 97.17% 58.58%, 97.47% 59.44%, 97.76% 60.31%, 98.01% 61.19%, 98.19% 62.07%, 98.30% 62.94%, 97.77% 63.64%, 97.17% 64.31%, 96.52% 64.95%, 95.83% 65.56%, 95.14% 66.15%, 94.46% 66.73%, 93.82% 67.32%, 93.24% 67.91%, 93.23% 68.74%, 93.27% 69.61%, 93.34% 70.50%, 93.41% 71.41%, 93.46% 72.32%, 93.47% 73.24%, 93.42% 74.13%, 93.30% 75.00%, 92.61% 75.54%, 91.86% 76.03%, 91.06% 76.48%, 90.24% 76.89%, 89.42% 77.28%, 88.62% 77.67%, 87.85% 78.07%, 87.13% 78.49%, 86.91% 79.29%, 86.72% 80.14%, 86.56% 81.02%, 86.39% 81.91%, 86.20% 82.81%, 85.98% 83.70%, 85.70% 84.55%, 85.36% 85.36%, 84.55% 85.70%, 83.70% 85.98%, 82.81% 86.20%, 81.91% 86.39%, 81.02% 86.56%, 80.14% 86.72%, 79.29% 86.91%, 78.49% 87.13%, 78.07% 87.85%, 77.67% 88.62%, 77.28% 89.42%, 76.89% 90.24%, 76.48% 91.06%, 76.03% 91.86%, 75.54% 92.61%, 75.00% 93.30%, 74.13% 93.42%, 73.24% 93.47%, 72.32% 93.46%, 71.41% 93.41%, 70.50% 93.34%, 69.61% 93.27%, 68.74% 93.23%, 67.91% 93.24%, 67.32% 93.82%, 66.73% 94.46%, 66.15% 95.14%, 65.56% 95.83%, 64.95% 96.52%, 64.31% 97.17%, 63.64% 97.77%, 62.94% 98.30%, 62.07% 98.19%, 61.19% 98.01%, 60.31% 97.76%, 59.44% 97.47%, 58.58% 97.17%, 57.74% 96.87%, 56.91% 96.61%, 56.11% 96.40%, 55.39% 96.81%, 54.66% 97.28%, 53.92% 97.78%, 53.17% 98.30%, 52.40% 98.80%, 51.61% 99.27%, 50.81% 99.67%, 50.00% 100.00%, 49.19% 99.67%, 48.39% 99.27%, 47.60% 98.80%, 46.83% 98.30%, 46.08% 97.78%, 45.34% 97.28%, 44.61% 96.81%, 43.89% 96.40%, 43.09% 96.61%, 42.26% 96.87%, 41.42% 97.17%, 40.56% 97.47%, 39.69% 97.76%, 38.81% 98.01%, 37.93% 98.19%, 37.06% 98.30%, 36.36% 97.77%, 35.69% 97.17%, 35.05% 96.52%, 34.44% 95.83%, 33.85% 95.14%, 33.27% 94.46%, 32.68% 93.82%, 32.09% 93.24%, 31.26% 93.23%, 30.39% 93.27%, 29.50% 93.34%, 28.59% 93.41%, 27.68% 93.46%, 26.76% 93.47%, 25.87% 93.42%, 25.00% 93.30%, 24.46% 92.61%, 23.97% 91.86%, 23.52% 91.06%, 23.11% 90.24%, 22.72% 89.42%, 22.33% 88.62%, 21.93% 87.85%, 21.51% 87.13%, 20.71% 86.91%, 19.86% 86.72%, 18.98% 86.56%, 18.09% 86.39%, 17.19% 86.20%, 16.30% 85.98%, 15.45% 85.70%, 14.64% 85.36%, 14.30% 84.55%, 14.02% 83.70%, 13.80% 82.81%, 13.61% 81.91%, 13.44% 81.02%, 13.28% 80.14%, 13.09% 79.29%, 12.87% 78.49%, 12.15% 78.07%, 11.38% 77.67%, 10.58% 77.28%, 9.76% 76.89%, 8.94% 76.48%, 8.14% 76.03%, 7.39% 75.54%, 6.70% 75.00%, 6.58% 74.13%, 6.53% 73.24%, 6.54% 72.32%, 6.59% 71.41%, 6.66% 70.50%, 6.73% 69.61%, 6.77% 68.74%, 6.76% 67.91%, 6.18% 67.32%, 5.54% 66.73%, 4.86% 66.15%, 4.17% 65.56%, 3.48% 64.95%, 2.83% 64.31%, 2.23% 63.64%, 1.70% 62.94%, 1.81% 62.07%, 1.99% 61.19%, 2.24% 60.31%, 2.53% 59.44%, 2.83% 58.58%, 3.13% 57.74%, 3.39% 56.91%, 3.60% 56.11%, 3.19% 55.39%, 2.72% 54.66%, 2.22% 53.92%, 1.70% 53.17%, 1.20% 52.40%, 0.73% 51.61%, 0.33% 50.81%, 0.00% 50.00%, 0.33% 49.19%, 0.73% 48.39%, 1.20% 47.60%, 1.70% 46.83%, 2.22% 46.08%, 2.72% 45.34%, 3.19% 44.61%, 3.60% 43.89%, 3.39% 43.09%, 3.13% 42.26%, 2.83% 41.42%, 2.53% 40.56%, 2.24% 39.69%, 1.99% 38.81%, 1.81% 37.93%, 1.70% 37.06%, 2.23% 36.36%, 2.83% 35.69%, 3.48% 35.05%, 4.17% 34.44%, 4.86% 33.85%, 5.54% 33.27%, 6.18% 32.68%, 6.76% 32.09%, 6.77% 31.26%, 6.73% 30.39%, 6.66% 29.50%, 6.59% 28.59%, 6.54% 27.68%, 6.53% 26.76%, 6.58% 25.87%, 6.70% 25.00%, 7.39% 24.46%, 8.14% 23.97%, 8.94% 23.52%, 9.76% 23.11%, 10.58% 22.72%, 11.38% 22.33%, 12.15% 21.93%, 12.87% 21.51%, 13.09% 20.71%, 13.28% 19.86%, 13.44% 18.98%, 13.61% 18.09%, 13.80% 17.19%, 14.02% 16.30%, 14.30% 15.45%, 14.64% 14.64%, 15.45% 14.30%, 16.30% 14.02%, 17.19% 13.80%, 18.09% 13.61%, 18.98% 13.44%, 19.86% 13.28%, 20.71% 13.09%, 21.51% 12.87%, 21.93% 12.15%, 22.33% 11.38%, 22.72% 10.58%, 23.11% 9.76%, 23.52% 8.94%, 23.97% 8.14%, 24.46% 7.39%, 25.00% 6.70%, 25.87% 6.58%, 26.76% 6.53%, 27.68% 6.54%, 28.59% 6.59%, 29.50% 6.66%, 30.39% 6.73%, 31.26% 6.77%, 32.09% 6.76%, 32.68% 6.18%, 33.27% 5.54%, 33.85% 4.86%, 34.44% 4.17%, 35.05% 3.48%, 35.69% 2.83%, 36.36% 2.23%, 37.06% 1.70%, 37.93% 1.81%, 38.81% 1.99%, 39.69% 2.24%, 40.56% 2.53%, 41.42% 2.83%, 42.26% 3.13%, 43.09% 3.39%, 43.89% 3.60%, 44.61% 3.19%, 45.34% 2.72%, 46.08% 2.22%, 46.83% 1.70%, 47.60% 1.20%, 48.39% 0.73%, 49.19% 0.33%); background: radial-gradient(circle at 30% 24%, rgba(255,255,255,0.8), rgba(255,255,255,0) 46%), conic-gradient(from var(--holo, 200deg), #DDE2E8, #B4D2FF, #BFF0F8, #DDF5EC, #F4F7DC, #FFEBA6, #FFC9A6, #FFB9B0, #E9DDF2, #BFF0F8, #B4D2FF, #DDE2E8, #FFEBA6, #FFC9A6, #F4F7DC, #BFF0F8, #DDE2E8); } /* Trois mouvements lents, sans rapport de durée entre eux : les reflets tournent, le sticker se balance à peine comme un autocollant mal collé, la devise fait le tour du cœur. */ @keyframes sway { from { transform: rotate(-2.5deg) scale(1); } to { transform: rotate(3deg) scale(1.025); } } @keyframes seal-spin { to { transform: rotate(360deg); } } .sticker__in { animation: holo 16s linear infinite, sway 7s ease-in-out infinite alternate; } .seal__spin { transform-box: view-box; transform-origin: 50% 50%; animation: seal-spin 46s linear infinite; } /* Filigrane en spirale : trois bras larges et très flous, clairs, qui partent du cœur et s'enroulent jusqu'au bord. Ils donnent au film un léger volume, comme un reflet qui tourne, et pivotent très lentement à contresens de la devise. */ .seal__arm { fill: none; stroke: #FFFFFF; stroke-width: 7; stroke-linecap: round; opacity: 0.85; } /* Entre deux bras clairs, un bras d'ombre : c'est l'alternance qui donne le relief. */ .seal__arm--shade { stroke: #1B2440; opacity: 0.16; } .seal__swirl { transform-box: view-box; transform-origin: 50% 50%; animation: seal-spin 120s linear infinite reverse; } .sticker__in svg { display: block; width: 100%; height: 100%; } /* Encre presque noire, à peine teintée de bleu nuit : elle prend les reflets du film au lieu de flotter dessus. */ /* Texte fin et net : graisse normale, lissage des contours, aucune déformation des lettres. */ .seal__ring { font-size: 7px; font-weight: 400; fill: #0B0D14; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Cœur plein, bien rond : le contour épais de même couleur arrondit la pointe et le creux. */ .seal__heart { fill: #0B0D14; stroke: #0B0D14; stroke-width: 9; stroke-linejoin: round; } /* Dans le cœur, le logo est en blanc plein (son dégradé gris s'y perdrait). */ .seal__logo { filter: brightness(0) invert(1); } .hero__body { position: relative; margin-top: 20px; display: flex; flex-direction: column; align-items: center; } .hero .lead { max-width: 34ch; } .hero__note { margin-top: 16px; font-size: 14px; color: var(--text-muted); } .hero__cta { margin-top: 40px; align-self: center; } /* Téléphone : le label se pose à droite du bouton, qui se cale à gauche pour lui laisser la place. */ /* Téléphone : le bouton reste centré. Le sticker est repoussé vers le bord droit, quitte à en sortir un peu ; le hero coupe ce qui dépasse pour ne créer aucun défilement latéral. */ .hero { overflow-x: clip; } /* Bandeau des compétitions, au pied du hero : logos en gris, à demi effacés, qui défilent sans fin. */ .events { --events-h: 15px; position: absolute; left: 0; right: 0; bottom: 18px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); } .events__track { display: flex; width: max-content; animation: events 90s linear infinite; } .events__set { display: flex; align-items: center; gap: 40px; margin: 0; padding: 0 40px 0 0; list-style: none; } .events__set li { display: flex; } /* Logos ramenés en blanc quelle que soit leur couleur d'origine ; --s corrige la hauteur de chacun pour qu'ils pèsent pareil à l'œil. */ .events__set img { display: block; width: auto; height: calc(var(--events-h) * var(--s, 1)); filter: brightness(0) invert(1); opacity: 0.4; } @keyframes events { to { transform: translateX(-25%); } } /* Icône sparks : accompagne les valeurs calculées (kilos, allures). */ .spark { display: inline-block; width: 0.85em; height: 0.85em; margin-left: 0.2em; vertical-align: 0.25em; fill: currentColor; transform-origin: 50% 50%; animation: spark 2.6s var(--ease) infinite; } @keyframes spark { 0%, 60%, 100% { transform: scale(1) rotate(0); opacity: 1; } 30% { transform: scale(1.28) rotate(12deg); opacity: 0.75; } } /* ── Parcours ───────────────────────────────────────────────────── */ .tour { position: relative; } /* Sur téléphone, parti pris : pas de visuel fixe (trop petit pour être lu). Chaque bloc ouvre sur sa capture en grand (.shot), puis son texte. Le visuel fixe et ses étiquettes ne servent que sur ordinateur. */ .tour__stage { display: none; position: sticky; top: 0; z-index: 2; height: 52svh; min-height: 340px; place-items: center; padding: 88px 0 44px; /* Même dégradé que le fond de page : le visuel collé masque les textes qui passent dessous. main.js recale --stage-y pour qu'on ne voie aucun raccord avec le fond. */ background: var(--page) 0 var(--stage-y, 0px) / 100% 100vh no-repeat; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 28px), transparent); } .device { position: relative; height: 100%; max-height: 560px; aspect-ratio: 9 / 19; perspective: 1400px; } .phone { --ry: 0deg; --rx: 0deg; height: 100%; padding: 7px; border-radius: 34px; background: linear-gradient(160deg, #3a3a3a, #161616 40%, #262626); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 30px 70px rgba(0,0,0,0.6); /* --ry / --rx suivent le défilement, --mx / --my la souris (main.js). */ transform: rotateY(calc(var(--ry) + var(--mx, 0deg))) rotateX(calc(var(--rx) + var(--my, 0deg))); transform-style: preserve-3d; will-change: transform; } .phone__screen { position: relative; height: 100%; border-radius: 28px; overflow: hidden; background: #121212; } .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .slide { display: grid; place-items: center; padding: 16px; text-align: center; background-size: cover; background-position: top center; opacity: 0; transform: scale(1.03); transition: opacity 450ms var(--ease), transform 600ms var(--ease); } .slide.is-active { opacity: 1; transform: none; } .slide figcaption { font-size: 12px; color: var(--text-muted); } .slide.has-image figcaption { display: none; } /* ── Vue de programme simulée ─────────────────────────────────────── Un écran de l'app refait en HTML : en-tête du programme, puis une séance avec ses blocs de format, rendus comme dans l'app (quantité en vert, charge calculée en vert, repos en pastille). Toutes les tailles sont en em d'une base liée à la largeur du cadre (1em = 10 px pour un écran de 390 px) : la vue garde ses proportions dans le téléphone fixe comme dans la capture du parcours sur mobile. */ .slide--sim { display: block; padding: 0; text-align: left; background: #0E0E0E; } .sim { position: absolute; inset: 0; overflow: hidden; container-type: inline-size; background: #0E0E0E; color: #C8C8C8; } .sim__in { position: relative; height: 100%; font-size: calc(100cqw / 39); line-height: 1.3; } .sim p, .sim ul { margin: 0; list-style: none; } .sim ul { padding: 0; } .sim b, .sim em, .sim small, .sim i, .sim u { font-style: normal; font-weight: inherit; color: inherit; font-size: inherit; } /* Couverture : la photo du programme, qui se fond dans l'écran par le bas. */ .sim__cover { position: relative; height: 16em; background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0) 46%), #161616 url('assets/screens/programme-couverture.webp') center 30% / cover no-repeat; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent); mask-image: linear-gradient(180deg, #000 45%, transparent); } .sim__time { position: absolute; top: 1.5em; left: 3em; font-size: 1.5em; font-weight: 600; color: #F5F5F5; } .sim__back { position: absolute; top: 5.4em; left: 1.4em; width: 3.6em; height: 3.6em; border-radius: 50%; background: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); } .sim__back::before { content: ''; position: absolute; left: 1.5em; top: 1.25em; width: 0.9em; height: 0.9em; border-left: 0.2em solid #F5F5F5; border-bottom: 0.2em solid #F5F5F5; transform: rotate(45deg); } .sim__body { position: relative; margin-top: -3.4em; padding: 0 2.4em; } .sim__tile { display: block; width: 5.4em; height: 5.4em; border-radius: 1.4em; object-fit: cover; box-shadow: 0 0.6em 1.6em rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.12); } .sim__head { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: 2em; } .sim__title { font-size: 3em; font-weight: 600; letter-spacing: -0.035em; line-height: 1; color: #F5F5F5; } .sim__coach { display: flex; align-items: center; gap: 0.5em; font-size: 1.25em; color: #A8A8A8; white-space: nowrap; } .sim__coach i { width: 1.7em; height: 1.7em; border-radius: 50%; background: linear-gradient(140deg, #F5F5F5, #6E6E6E); } .sim__meta { margin-top: 0.9em !important; font-size: 1.2em; color: #8C8C8C; } .sim__desc { margin-top: 1.4em !important; padding-bottom: 1.8em !important; font-size: 1.3em; line-height: 1.4; border-bottom: 1px solid rgba(255,255,255,0.10); } /* La séance, sous l'en-tête du programme : son nom, puis ses blocs sur toute la largeur. */ .sim__session { display: grid; gap: 1.2em; margin-top: 1.6em; padding-top: 1.6em; border-top: 1px solid rgba(255,255,255,0.10); } .sim__name { font-size: 1.9em; font-weight: 600; letter-spacing: -0.02em; color: #F5F5F5; } .sim__name small { display: block; margin-top: 0.3em; font-size: 0.6em; font-weight: 400; letter-spacing: 0; color: #8C8C8C; } .sim__card { display: grid; gap: 1.1em; padding: 1.4em; border-radius: 1.6em; background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09); } .sim__pill { justify-self: start; padding: 0.35em 0.9em; border-radius: 99em; font-size: 1.15em; color: #A8A8A8; background: #2A2A2A; box-shadow: inset 0 0 0 1px rgba(140,140,140,0.45); } .sim__pill b { font-weight: 600; color: #DCDCDC; } .sim__ex { display: grid; gap: 0.1em; } .sim__ex span { font-size: 1.7em; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: #F5F5F5; } /* EMOM en étapes, comme dans l'app : une pastille numérotée par minute, la fenêtre de temps en petit au-dessus de l'exercice, et un fil qui relie les étapes entre elles. */ .sim__step { position: relative; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); gap: 1em; align-items: start; } .sim__step + .sim__step::before { content: ''; position: absolute; left: 1.15em; top: -1.1em; height: 1.1em; width: 1px; background: rgba(255,255,255,0.14); } .sim__step:not(:last-child)::after { content: ''; position: absolute; left: 1.15em; top: 2.4em; bottom: 0; width: 1px; background: rgba(255,255,255,0.14); } .sim__bubble { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: rgba(255,255,255,0.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); color: #C8C8C8; font-weight: 600; } .sim__bubble { font-size: 1em; } .sim__ex u { text-decoration: none; font-size: 1.05em; color: #8C8C8C; font-variant-numeric: tabular-nums; } /* Consigne du coach, sous l'exercice. */ .sim__ex i { margin-top: 0.25em; font-size: 1.1em; color: #8C8C8C; } .sim__ex span b { color: var(--accent); } .sim__ex small { font-size: 1.25em; color: #A8A8A8; font-variant-numeric: tabular-nums; } .sim__ex small em { color: var(--accent); } .sim__rest { justify-self: start; padding: 0.35em 0.9em; border-radius: 99em; font-size: 1.1em; color: #8C8C8C; background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); } /* Barre d'actions flottante, en bas de l'écran : le contenu passe dessous. */ .sim__bar { position: absolute; left: 1.4em; right: 1.4em; bottom: 1.4em; padding: 0.7em; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7em; border-radius: 3em; background: rgba(28,28,28,0.78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 -2em 3em 1em rgba(14,14,14,0.9); } .sim__bar span { padding: 0.9em 0; border-radius: 2.4em; text-align: center; font-size: 1.3em; font-weight: 600; color: #F5F5F5; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); } .sim__bar span:last-child { background: #F5F5F5; color: #0E0E0E; box-shadow: none; } /* Sur téléphone, la vue remplit le cadre de la capture et glisse avec le défilement ; pas de barre d'actions. */ .shot--sim .sim { position: relative; inset: auto; border-radius: 28px 28px 0 0; transform: translate3d(0, calc((1 - var(--d, 1)) * -12%), 0); will-change: transform; } .shot--sim .sim__bar { display: none; } /* La vignette n'est pas la capture du bloc : elle garde sa taille (la règle `.shot img` vise les captures). */ .shot--sim .sim__tile { width: 5.4em; height: 5.4em; border-radius: 1.4em; transform: none; } .shot--sim .sim__cover { height: 13em; } /* Étiquettes : posées par-dessus le téléphone, elles apparaissent en fondu, l'une après l'autre, quand leur bloc devient actif. */ .label { position: absolute; z-index: 2; margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 12px; font-weight: 400; color: var(--text); white-space: nowrap; opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 250ms var(--ease), transform 250ms var(--ease); } /* Étiquette à deux niveaux : le type en petit, la valeur en dessous. */ .label small { display: block; margin-bottom: 1px; font-size: 0.78em; font-weight: 400; color: var(--text-muted); } .label b { color: var(--accent); font-weight: 400; font-variant-numeric: tabular-nums; } .label i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 9999px; background: var(--dot); box-shadow: 0 0 8px var(--dot); vertical-align: 1px; } .label--a { top: 14%; right: 62%; } .label--b { top: 44%; left: 66%; } .label--c { display: none; bottom: 12%; right: 58%; } /* Les étiquettes glissent de quelques pixels à l'inverse de la souris : elles semblent flotter devant le téléphone. */ /* Le calque couvre tout le téléphone : avec un transform, il devient le repère de ses étiquettes, qui doivent donc se placer par rapport à cette même surface. */ .labels { position: absolute; inset: 0; pointer-events: none; transform: translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -8px), 0); will-change: transform; } /* Chaque jeu d'étiquettes a ses propres positions, choisies pour ne pas masquer l'essentiel de sa capture ; elles débordent surtout à l'extérieur du téléphone. */ .labels--prog .label--a { top: 33%; right: 70%; } /* à côté de la description */ .labels--prog .label--b { top: 61%; left: 80%; } /* à côté des charges */ .labels--prog .label--c { top: 7%; left: 74%; right: auto; bottom: auto; } /* sur la photo de couverture */ .labels--explorer .label--a { top: 25%; left: 70%; right: auto; } /* à droite du premier événement */ .labels--explorer .label--b { top: 55%; left: 74%; } .labels--explorer .label--c { top: 70%; right: 86%; bottom: auto; } .labels--commu .label--a { top: 49%; left: 68%; right: auto; } /* près des mentions J'aime */ .labels--commu .label--b { top: 66%; right: 90%; left: auto; } /* hors de l'écran, à gauche des scores */ .labels--commu .label--c { top: 19%; left: 74%; right: auto; bottom: auto; white-space: normal; width: max-content; max-width: 10.5em; line-height: 1.25; } /* message, sur deux lignes */ .labels--planning .label--a { top: 33%; left: 72%; right: auto; } /* à côté de la séance du jour */ .labels--planning .label--b { top: 55%; right: 86%; left: auto; } /* hors de l'écran, à gauche du fil */ .labels--planning .label--c { top: 15%; left: 70%; right: auto; bottom: auto; } /* à côté de l'événement */ .labels.is-active .label { opacity: 1; transform: none; transition: opacity 500ms var(--ease) 250ms, transform 600ms var(--ease) 250ms; } .labels.is-active .label--b { transition-delay: 400ms; } .labels.is-active .label--c { transition-delay: 550ms; } /* Formats cités sous leur point clé : une simple ligne discrète. */ .formats { display: block; margin-top: 4px; font-size: 13px; color: var(--text-muted); letter-spacing: 0; } /* Points clés : une ligne chacun. */ .keys { display: grid; gap: 14px; max-width: 44ch; } .keys li { position: relative; padding-left: 30px; color: var(--text-2); } .keys b { color: var(--text); font-weight: 400; } /* Puce neutre ; l'icône sparks est réservée aux valeurs dynamiques (charges, allures). */ .keys li:not(.has-spark)::before { content: ''; position: absolute; left: 6px; top: 0.62em; width: 6px; height: 6px; border-radius: 9999px; background: var(--text-faint); } .keys .spark { position: absolute; left: 0; top: 0.2em; width: 18px; height: 18px; margin: 0; color: var(--accent); vertical-align: 0; } .tour__steps { position: relative; padding: 0 var(--margin); } .step { min-height: 62svh; padding: 40px 0 64px; display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; transition: opacity 400ms var(--ease); } /* Parallaxe : --d vaut 0 quand le bloc est en place, ±1 quand il est à un écran. Chaque élément se décale d'une distance différente et se pose en arrivant. */ .step > * { transform: translate3d(0, calc(var(--d, 0) * var(--shift, 22px)), 0); will-change: transform; } .step > .eyebrow { --shift: 10px; } .step > .figure { --shift: 56px; } .step > h2 { --shift: 36px; } .step p:not(.eyebrow):not(.figure) { max-width: 46ch; } /* Capture du bloc : le haut d'un téléphone, large, qui se fond vers le texte. L'image glisse dans son cadre au fil du défilement (--d), on en découvre la suite en lisant. */ .step > .shot { --shift: 0px; align-self: center; width: min(86%, 360px); aspect-ratio: 9 / 12.5; margin: 0 0 12px; padding: 7px 7px 0; border-radius: 34px 34px 0 0; overflow: hidden; background: linear-gradient(160deg, #3a3a3a, #161616 40%, #262626); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 90px rgba(var(--hue), 0.16); -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); } .shot img { display: block; width: 100%; height: auto; border-radius: 28px 28px 0 0; transform: translate3d(0, calc((1 - var(--d, 1)) * -17%), 0); will-change: transform; } .figure { font-size: 72px; font-weight: 600; line-height: 0.95; letter-spacing: -0.05em; color: var(--text); font-variant-numeric: tabular-nums; } .step > /* Bloc workouts + événements : deux cartes décalées, un chiffre chacune. */ .h-sm { font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; color: var(--text-2); } /* Un seul panneau en verre, deux colonnes égales séparées par un filet. */ .duo { display: grid; grid-template-columns: 1fr 1fr; padding: 0; overflow: hidden; } .duo__card { padding: 20px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .duo__card + .duo__card { border-left: 1px solid var(--border-subtle); } .duo .figure { font-size: 44px; } .duo__title { font-size: 15px; font-weight: 400; color: var(--text); } .step > .duo { --shift: 48px; } /* Univers de couleur : chaque bloc a sa teinte (--hue, posée sur le bloc et sur son écran). Elle colore l'écran du téléphone, le halo derrière lui et le sur-titre : on change d'univers en changeant de bloc. */ /* Ambiance : une composition de lueurs par bloc, fixe derrière le contenu. On ne déplace rien : la composition du bloc en cours apparaît en fondu, la précédente s'efface. Chaque composition mêle la teinte du bloc à une teinte voisine, en taches larges et très floues, de tailles inégales. */ .ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 900ms var(--ease); } .is-in-tour .ambient { opacity: 1; } .ambient div { position: absolute; inset: -12%; opacity: 0; transition: opacity 1200ms var(--ease); } body[data-step-id="programmation"] .ambient__prog, body[data-step-id="explorer"] .ambient__explorer, body[data-step-id="communaute"] .ambient__commu, body[data-step-id="planning"] .ambient__planning { opacity: 1; } /* Chaque composition tient en deux calques flous (::before, ::after) qui dérivent très lentement, chacun à son rythme et dans son sens : les lueurs respirent sans jamais se déplacer franchement. Seule la composition affichée est animée. */ .ambient div::before, .ambient div::after { content: ''; position: absolute; inset: 0; filter: blur(48px); will-change: transform; animation: drift-a 36s ease-in-out infinite alternate paused; } .ambient div::after { animation-name: drift-b; } body[data-step-id="programmation"] .ambient__prog::before, body[data-step-id="programmation"] .ambient__prog::after, body[data-step-id="explorer"] .ambient__explorer::before, body[data-step-id="explorer"] .ambient__explorer::after, body[data-step-id="communaute"] .ambient__commu::before, body[data-step-id="communaute"] .ambient__commu::after, body[data-step-id="planning"] .ambient__planning::before, body[data-step-id="planning"] .ambient__planning::after { animation-play-state: running; } @keyframes drift-a { from { transform: translate3d(-2.5%, 1.5%, 0) rotate(-3deg) scale(1.04); } to { transform: translate3d(3%, -2.5%, 0) rotate(4deg) scale(1.14); } } @keyframes drift-b { from { transform: translate3d(2.5%, -2%, 0) rotate(3deg) scale(1.12); } to { transform: translate3d(-3%, 2.5%, 0) rotate(-4deg) scale(1.03); } } /* Compositions volontairement inégales : taches de tailles, de formes et d'intensités différentes, jamais posées exactement dans un angle, sur un calque légèrement tourné. */ .ambient__prog { transform: rotate(-9deg) scale(1.12); } .ambient__prog::before { animation-duration: 34s; background: radial-gradient(ellipse 66% 40% at 16% 94%, rgba(74,222,128,0.62), transparent 70%), radial-gradient(ellipse 20% 46% at 70% 102%, rgba(34,197,94,0.24), transparent 70%); } .ambient__prog::after { animation-duration: 47s; background: radial-gradient(ellipse 26% 38% at 88% 20%, rgba(45,212,191,0.30), transparent 72%), radial-gradient(ellipse 34% 16% at 38% 2%, rgba(163,230,53,0.12), transparent 72%); } .ambient__explorer { transform: rotate(7deg) scale(1.12); } .ambient__explorer::before, .ambient__explorer::after { filter: blur(110px) saturate(1.2); } .ambient__explorer::before { animation-duration: 41s; /* Orange en grande nappe en bas à droite, relevé d'un rouge chaud au pied de l'écran. */ background: radial-gradient(ellipse 78% 82% at 92% 80%, rgba(249,115,22,0.62), transparent 78%), radial-gradient(ellipse 70% 38% at 40% 102%, rgba(239,68,68,0.32), transparent 80%); } .ambient__explorer::after { animation-duration: 29s; background: radial-gradient(ellipse 66% 52% at 14% 6%, rgba(251,191,36,0.44), transparent 80%), radial-gradient(ellipse 38% 56% at 2% 62%, rgba(253,150,80,0.28), transparent 80%), radial-gradient(ellipse 40% 30% at 70% 2%, rgba(255,214,102,0.18), transparent 80%); } .ambient__commu { transform: rotate(-6deg) scale(1.12); } /* Communauté : un rose franc, épaulé d'un violet et d'un rose poudré. Présent sans prendre toute la page : nappes larges et très fondues, le centre reste sombre. */ .ambient__commu::before, .ambient__commu::after { filter: blur(110px) saturate(1.2); } .ambient__commu::before { animation-duration: 37s; background: radial-gradient(ellipse 80% 62% at 82% 4%, rgba(255,70,155,0.68), transparent 76%), radial-gradient(ellipse 40% 46% at 98% 66%, rgba(251,164,210,0.40), transparent 78%); } .ambient__commu::after { animation-duration: 52s; background: radial-gradient(ellipse 48% 68% at 4% 84%, rgba(168,85,247,0.56), transparent 78%), radial-gradient(ellipse 58% 28% at 46% 104%, rgba(244,90,190,0.40), transparent 78%); } .ambient__planning { transform: rotate(10deg) scale(1.12); } .ambient__planning::before { animation-duration: 31s; background: radial-gradient(ellipse 66% 40% at 16% 94%, rgba(74,222,128,0.62), transparent 70%), radial-gradient(ellipse 20% 46% at 70% 102%, rgba(34,197,94,0.24), transparent 70%); } .ambient__planning::after { animation-duration: 44s; background: radial-gradient(ellipse 26% 38% at 88% 20%, rgba(45,212,191,0.30), transparent 72%), radial-gradient(ellipse 34% 16% at 38% 2%, rgba(163,230,53,0.12), transparent 72%); } /* Téléphone : le visuel collé a un fond opaque. Une copie de l'ambiance y est posée (par main.js), haute d'un écran et ancrée en haut, pour raccorder avec la page. */ .tour__stage { overflow: clip; } .tour__stage .ambient { position: absolute; inset: 0 0 auto 0; height: 100vh; z-index: -2; } /* Relief : un disque gris foncé, doux, juste derrière le téléphone. */ .device::before { content: ''; position: absolute; inset: -14% -42%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(58,58,58,0.85), rgba(40,40,40,0.45) 55%, transparent); filter: blur(18px); } .slide { background: radial-gradient(130% 80% at 20% 0%, rgba(var(--hue), 0.75), transparent 62%), radial-gradient(110% 70% at 100% 100%, rgba(var(--hue), 0.45), transparent 65%), linear-gradient(180deg, #141414, #0B0B0B); } /* Une capture chargée remplace le dégradé et remplit l'écran. */ .slide.has-image { background-size: cover; background-position: top center; } /* Liste d'événements : elle défile lentement et se fond en haut et en bas, pour dire qu'elle est longue. */ .roll { height: 132px; margin-top: 8px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 55%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 55%, transparent); } .roll ul { animation: roll 26s linear infinite; } .roll li { height: 33px; line-height: 33px; font-size: 17px; font-weight: 400; color: var(--text); white-space: nowrap; } @keyframes roll { to { transform: translateY(-100%); } } /* La liste des workouts défile dans l'autre sens et à un autre rythme, pour que les deux cartes ne bougent pas à l'unisson. */ .roll--up ul { animation-duration: 32s; animation-direction: reverse; } /* Émojis qui surgissent de nulle part autour du téléphone (bloc Communauté). */ .pops { position: absolute; inset: -6% -55%; z-index: 1; pointer-events: none; } .pop { position: absolute; width: var(--size); height: var(--size); animation: pop var(--life, 1900ms) var(--ease) forwards; will-change: transform, opacity; } @keyframes pop { 0% { opacity: 0; transform: translateY(0) scale(0) rotate(var(--tilt)); } 14% { opacity: 1; transform: translateY(-4px) scale(1.2) rotate(var(--tilt)); } 28% { opacity: 1; transform: translateY(-8px) scale(1) rotate(var(--tilt)); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px) scale(0.9) rotate(var(--tilt)); } } /* Réactions : images d'émojis (pas des caractères), identiques sur tous les appareils. */ .label--reactions { display: flex; align-items: center; gap: 5px; padding: 7px 12px; width: max-content; } .label--reactions img { flex: none; } .label img { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; } .label--reactions span { margin-right: 6px; font-variant-numeric: tabular-nums; color: var(--text-2); } .label--reactions span:last-child { margin-right: 0; } .label .label__emoji { margin-left: 6px; } /* ── Choix : athlète ou pro ─────────────────────────────────────── */ .free { padding: 72px var(--margin); } .free__title { text-align: center; margin: 0 auto 32px; max-width: 16ch; } .free__grid { display: grid; gap: 16px; max-width: 1040px; margin: 0 auto; } .free__card, .pro__card { padding: 32px 24px; border-radius: var(--r-sheet); display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .free__card h3, .pro__card h3 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; color: var(--text); text-wrap: balance; } .free__card .eyebrow, .pro__card .eyebrow { margin: 0 0 -12px; } /* Pied de carte : l'action, puis la précision qui lève la dernière hésitation. */ .free__foot { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .free__fine { flex-basis: 100%; margin: 0; font-size: 14px; line-height: 1.4; color: var(--text-muted); } .pro__more { color: #FFFFFF; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,0.5); } .pro__card .free__fine { color: rgba(255,255,255,0.85); } .checks { display: grid; gap: 12px; text-align: left; } .checks li { position: relative; padding-left: 28px; } .checks li::before { content: ''; position: absolute; left: 2px; top: 0.42em; width: 13px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } .pro__card { color: #FFFFFF; overflow: hidden; background: radial-gradient(90% 120% at 0% 100%, #FFD900 0%, transparent 55%), radial-gradient(80% 110% at 100% 0%, #960A0A 0%, transparent 60%), radial-gradient(70% 90% at 70% 60%, #DE0000 0%, transparent 70%), #F88000; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 24px 60px rgba(0,0,0,0.25); } .free__logo img { height: 26px; width: auto; } /* Sur le fond chaud, le logo passe en blanc pour rester lisible. */ .pro__logo { height: 26px; width: auto; filter: brightness(0) invert(1); } .pro__card .eyebrow { color: rgba(255,255,255,0.8); } .pro__card h3 { color: #FFFFFF; } .checks--light { color: rgba(255,255,255,0.92); } .checks--light li::before { border-color: #FFFFFF; } /* ── Questions ──────────────────────────────────────────────────── */ .faq { padding: 48px var(--margin) 72px; max-width: 860px; margin: 0 auto; } .faq h2 { margin-bottom: 24px; } .faq { interpolate-size: allow-keywords; } .faq details { border-top: 1px solid var(--border-subtle); transition: border-color 200ms var(--ease); } .faq details:last-of-type { border-bottom: 1px solid var(--border-subtle); } .faq summary { list-style: none; cursor: pointer; min-height: 60px; padding: 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 17px; font-weight: 400; color: var(--text); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; flex: none; font-size: 22px; font-weight: 400; color: var(--text-muted); line-height: 1; } .faq details[open] summary::after { content: '–'; } .faq details p { padding: 0 32px 20px 0; max-width: 62ch; } .faq details a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } /* Page d'accueil : version menue. Cinq questions, colonne étroite, lignes basses, corps réduit. */ .faq--compact { max-width: 620px; } .faq--compact h2 { margin-bottom: 14px; font-size: 22px; letter-spacing: -0.02em; } .faq--compact summary { min-height: 46px; padding: 11px 0; font-size: 15px; } .faq--compact summary::after { font-size: 18px; } .faq--compact details p { padding: 0 28px 14px 0; font-size: 14px; line-height: 1.5; color: var(--text-2); } .faq__note { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--text-muted); } .faq__note a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; } /* Survol, sobre : seuls les deux filets qui encadrent la question passent au blanc. */ @media (hover: hover) { .faq details:hover, .faq details:hover + details { border-top-color: rgba(255,255,255,0.85); } .faq details:last-of-type:hover { border-bottom-color: rgba(255,255,255,0.85); } } /* Ouverture : le panneau se déplie en hauteur (navigateurs récents) et la réponse arrive en fondu avec un léger glissement (tous les navigateurs). */ .faq details::details-content { height: 0; overflow: clip; transition: height 320ms var(--ease), content-visibility 320ms allow-discrete; } .faq details[open]::details-content { height: auto; } .faq details[open] p { animation: faq-open 380ms var(--ease) both; } @keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .faq summary:focus-visible { outline-offset: -2px; } /* ── Révélation sous le pied de page ──────────────────────────────── Le nom, en blanc plein, est fixé au bas de l'écran sur un dégradé aux couleurs du logo. .reveal réserve sa hauteur en fin de page et le découpe à ses propres limites : tant que cette zone n'est pas entrée dans l'écran, rien ne se voit ; en fin de défilement, la page remonte et le découvre, sans script. (clip-path découpe aussi un descendant en position fixe, sans le décrocher de l'écran.) */ .reveal { --reveal-w: min(100vw - 2 * var(--margin), 1224px); --reveal-h: calc(var(--reveal-w) * 0.279 + 96px); position: relative; height: var(--reveal-h); clip-path: inset(0); } .reveal__in { position: fixed; left: 0; right: 0; bottom: 0; height: var(--reveal-h); display: grid; place-items: center; overflow: hidden; } /* Dégradé du logo, du bleu au rouge : une nappe floue qui monte du bas de l'écran. */ /* Fond sous le nom : neutre, sans couleur. Une lumière grise très douce qui monte du bas, juste assez pour que le verre des lettres ait quelque chose à adoucir. */ .reveal__glow { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: radial-gradient(120% 90% at 50% 120%, rgba(255,255,255,0.10), rgba(255,255,255,0) 70%); } /* Le nom en verre dépoli, sobre. Même langage que la barre de navigation : un corps laiteux et neutre (fort flou, peu de saturation, voile blanc léger) et un filet fin dont la lumière vient du haut. Ni reflet, ni lueur, ni animation. */ .reveal__mark { position: relative; width: var(--reveal-w); aspect-ratio: 391 / 109; } .reveal__glass { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08)); -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%); -webkit-mask: url('assets/logo-flat.svg') center / 100% 100% no-repeat; mask: url('assets/logo-flat.svg') center / 100% 100% no-repeat; } .reveal__optics { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .reveal__glass { background: rgba(255,255,255,0.24); } } @media (prefers-reduced-transparency: reduce) { .reveal__glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,0.85); } } /* ── Liste d'attente : popin ────────────────────────────────────── */ .waitlist { width: min(100% - 2 * var(--float), 420px); max-height: calc(100dvh - 2 * var(--float)); margin: auto; padding: 28px 24px 24px; border-radius: var(--r-sheet); color: var(--text-2); overflow: auto; overscroll-behavior: contain; /* Fond presque opaque : le texte de la page ne doit jamais se lire au travers. */ background: rgba(24,24,24,0.96); } .waitlist::backdrop { background: rgba(0,0,0,0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .waitlist[open] { animation: waitlist-in 320ms var(--ease) both; } @keyframes waitlist-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .waitlist h2 { font-size: 26px; letter-spacing: -0.03em; padding-right: 36px; } .waitlist__lead { margin-top: 8px; font-size: 15px; line-height: 1.45; } .waitlist__form, .waitlist__done { display: grid; } .waitlist__form[hidden], .waitlist__done[hidden] { display: none; } .waitlist__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; display: grid; place-content: center; } .waitlist__close span { grid-area: 1 / 1; width: 18px; height: 1.5px; border-radius: 2px; background: var(--text-2); transform: rotate(45deg); } .waitlist__close span:last-child { transform: rotate(-45deg); } .waitlist__field { display: grid; gap: 8px; margin-top: 24px; font-size: 13px; color: var(--text-muted); } .waitlist__field input { height: 50px; padding: 0 16px; border-radius: 12px; font: inherit; font-size: 16px; color: var(--text); background: var(--glass); border: 1px solid var(--border-subtle); outline: none; transition: border-color 200ms var(--ease); } .waitlist__field input::placeholder { color: var(--text-faint); } .waitlist__field input:focus-visible { border-color: var(--accent); } .waitlist__field input[aria-invalid="true"] { border-color: #F87171; } .waitlist__error { margin-top: 6px; font-size: 11px; color: #F87171; } /* Choix en deux moitiés égales, sur toute la largeur : un rail commun, l'option retenue en blanc. Le bouton radio reste dans la page (clavier, lecteurs d'écran), seul son libellé se voit. */ .waitlist__choice { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 20px 0 0; padding: 4px; border: 0; border-radius: 14px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--border-subtle); } /* La légende sort du rail : elle se place au-dessus, comme l'intitulé du champ e-mail. */ .waitlist__choice legend { float: left; grid-column: 1 / -1; width: 100%; margin: -30px 0 10px -4px; padding: 0; font-size: 13px; color: var(--text-muted); } .waitlist__choice { margin-top: 46px; } .waitlist__choice legend small { font-size: inherit; color: var(--text-faint); } .waitlist__choice label { position: relative; cursor: pointer; } .waitlist__choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .waitlist__choice span { display: grid; place-items: center; height: 44px; border-radius: 10px; font-size: 15px; color: var(--text-2); transition: background 200ms var(--ease), color 200ms var(--ease); } .waitlist__choice label:hover span { color: var(--text); } .waitlist__choice input:checked + span { background: var(--text); color: var(--canvas); } .waitlist__choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .waitlist__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Un