/* =========================================================== ELANRUN — Design tokens Palette: ancré course à pied (bib, chrono, trace GPS) =========================================================== */ /* Polices chargées via dans le de chaque page (plus rapide qu'un @import CSS) */ :root{ --ink: #0F2530; --ink-soft: #17323F; --paper: #EFF0E9; --paper-dim: #E4E5DC; --white: #FFFFFF; --effort: #FF4B33; --effort-dark:#D93A24; --track: #2F6B52; --track-soft: #E4EEE8; --slate: #55636A; --slate-light:#8A969B; --line: #D7D8CF; --display: 'Bebas Neue', Impact, sans-serif; --body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'JetBrains Mono', 'Courier New', monospace; --radius: 3px; --max: 1120px; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family:var(--body); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; line-height:1.5; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } button{ font-family:inherit; cursor:pointer; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } } :focus-visible{ outline:3px solid var(--effort); outline-offset:3px; } .wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; } /* ---------- Typography ---------- */ h1,h2,h3,.disp{ font-family:var(--display); letter-spacing:0.01em; text-transform:uppercase; line-height:0.95; margin:0; } h1{ font-size:clamp(2.6rem, 6vw, 5.4rem); } h2{ font-size:clamp(2rem, 4vw, 3.2rem); } h3{ font-size:clamp(1.3rem, 2.2vw, 1.7rem); } p{ margin:0; color:var(--slate); } .eyebrow{ font-family:var(--mono); font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--effort); display:flex; align-items:center; gap:10px; } .eyebrow::before{ content:""; width:22px; height:2px; background:var(--effort); display:inline-block; } .mono-stat{ font-family:var(--mono); font-variant-numeric:tabular-nums; } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:10px; padding:16px 28px; border-radius:var(--radius); font-family:var(--body); font-weight:700; font-size:1rem; border:2px solid transparent; transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease; white-space:nowrap; } .btn:hover{ transform:translateY(-2px); } .btn-primary{ background:var(--effort); color:var(--white); } .btn-primary:hover{ background:var(--effort-dark); } .btn-ghost{ background:transparent; border-color:var(--ink); color:var(--ink); } .btn-ghost:hover{ background:var(--ink); color:var(--paper); } .btn-ghost-light{ background:transparent; border-color:rgba(239,240,233,0.4); color:var(--paper); } .btn-ghost-light:hover{ background:var(--paper); color:var(--ink); } .btn-sm{ padding:10px 18px; font-size:0.9rem; } .btn[disabled]{ opacity:0.45; cursor:not-allowed; transform:none !important; } /* ---------- Header ---------- */ .site-header{ position:sticky; top:0; z-index:50; background:rgba(239,240,233,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:76px; } .logo{ font-family:var(--display); font-size:1.6rem; letter-spacing:0.02em; display:flex; align-items:center; gap:8px; } .logo .dot{ width:10px; height:10px; background:var(--effort); border-radius:50%; display:inline-block; } .nav-links{ display:flex; align-items:center; gap:32px; } .nav-links a{ font-size:0.92rem; font-weight:600; color:var(--ink-soft); padding:6px 0; border-bottom:2px solid transparent; transition:border-color .15s ease; } .nav-links a:hover{ border-color:var(--effort); } .nav-cta{ display:flex; align-items:center; gap:20px; } .burger{ display:none; background:none; border:none; padding:8px; } .burger span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; } @media (max-width:820px){ .nav-links{ display:none; } .burger{ display:block; } } /* ---------- Hero ---------- */ .hero{ position:relative; padding:64px 0 90px; overflow:hidden; border-bottom:1px solid var(--line); } .hero .wrap{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:center; } @media (max-width:900px){ .hero .wrap{ grid-template-columns:1fr; } } .hero h1{ margin-top:18px; } .hero h1 em{ font-style:normal; color:var(--effort); } .hero-sub{ margin-top:22px; font-size:1.15rem; max-width:46ch; color:var(--ink-soft); } .hero-actions{ margin-top:34px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .trust-line{ margin-top:26px; display:flex; gap:22px; flex-wrap:wrap; font-family:var(--mono); font-size:0.82rem; color:var(--slate); } .trust-line span{ display:flex; align-items:center; gap:7px; } .trust-line svg{ flex:none; } /* Signature: bib card with animated route trace */ .bib-card{ background:var(--ink); color:var(--paper); border-radius:6px; padding:30px 26px 26px; position:relative; box-shadow:0 30px 60px -25px rgba(15,37,48,0.5); } .bib-top{ display:flex; justify-content:space-between; align-items:flex-start; font-family:var(--mono); font-size:0.75rem; letter-spacing:0.08em; color:var(--slate-light); text-transform:uppercase; } .bib-number{ font-family:var(--display); font-size:5.2rem; line-height:0.9; margin:8px 0 4px; color:var(--paper); } .bib-label{ font-family:var(--mono); font-size:0.85rem; color:var(--effort); text-transform:uppercase; letter-spacing:0.06em; } .route-trace{ margin:22px 0 18px; } .route-trace path{ fill:none; stroke:var(--effort); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:340; stroke-dashoffset:340; animation:draw 2.2s ease forwards 0.4s; } @keyframes draw{ to{ stroke-dashoffset:0; } } .bib-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; border-top:1px solid rgba(239,240,233,0.15); padding-top:18px; } .bib-stats div{ text-align:left; } .bib-stats .n{ font-family:var(--mono); font-size:1.25rem; font-weight:600; } .bib-stats .l{ font-family:var(--mono); font-size:0.68rem; color:var(--slate-light); text-transform:uppercase; letter-spacing:0.06em; } /* ---------- Sections ---------- */ section{ padding:88px 0; } .section-head{ max-width:640px; margin-bottom:52px; } .section-head h2{ margin-top:14px; } .section-head p{ margin-top:16px; font-size:1.05rem; } /* Why cards */ .why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } @media (max-width:820px){ .why-grid{ grid-template-columns:1fr; } } .why-card{ background:var(--paper); padding:36px 30px; } .why-card .ico{ width:44px; height:44px; border-radius:50%; background:var(--track-soft); color:var(--track); display:flex; align-items:center; justify-content:center; margin-bottom:22px; } .why-card h3{ margin-bottom:12px; } .why-card p{ font-size:0.98rem; } /* How it works */ .how-section{ background:var(--ink); color:var(--paper); } .how-section .eyebrow{ color:var(--effort); } .how-section .section-head p{ color:var(--slate-light); } .how-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; } @media (max-width:820px){ .how-steps{ grid-template-columns:1fr; } } .how-step{ border-top:2px solid rgba(239,240,233,0.2); padding-top:20px; } .how-step .idx{ font-family:var(--mono); color:var(--effort); font-size:0.85rem; } .how-step h3{ margin:14px 0 10px; color:var(--paper); } .how-step p{ color:var(--slate-light); font-size:0.98rem; } /* CTA band */ .cta-band{ background:var(--effort); color:var(--white); text-align:center; padding:80px 0; } .cta-band h2{ color:var(--white); } .cta-band p{ color:rgba(255,255,255,0.85); margin-top:14px; font-size:1.1rem; } .cta-band .hero-actions{ justify-content:center; margin-top:30px; } .cta-band .btn-primary{ background:var(--ink); } .cta-band .btn-primary:hover{ background:#000; } .cta-band .btn-ghost{ border-color:rgba(255,255,255,0.6); color:var(--white); } .cta-band .btn-ghost:hover{ background:var(--white); color:var(--effort); } /* Footer */ .site-footer{ background:var(--ink); color:var(--slate-light); padding:56px 0 30px; } .footer-top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; padding-bottom:36px; border-bottom:1px solid rgba(239,240,233,0.12); } .footer-top .logo{ color:var(--paper); } .footer-links{ display:flex; gap:40px; flex-wrap:wrap; } .footer-links h4{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate-light); margin:0 0 14px; } .footer-links ul li{ margin-bottom:9px; } .footer-links a{ font-size:0.92rem; color:var(--paper); opacity:0.85; } .footer-links a:hover{ opacity:1; text-decoration:underline; } .footer-bottom{ padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:var(--mono); font-size:0.78rem; } /* ---------- Generic page shell (FAQ, legal, comment ca marche) ---------- */ .page-hero{ padding:56px 0 40px; border-bottom:1px solid var(--line); } .page-hero h1{ margin-top:14px; font-size:clamp(2.2rem,4.5vw,3.4rem); } .prose{ max-width:760px; } .prose h2{ text-transform:none; font-family:var(--body); font-weight:800; font-size:1.5rem; margin-top:44px; margin-bottom:14px; } .prose p{ font-size:1.02rem; margin-bottom:16px; } .prose ul{ margin-bottom:16px; } .prose li{ font-size:1.02rem; color:var(--slate); padding-left:22px; position:relative; margin-bottom:10px; } .prose li::before{ content:"—"; position:absolute; left:0; color:var(--effort); } /* FAQ accordion */ .faq-list{ max-width:760px; border-top:1px solid var(--line); } .faq-item{ border-bottom:1px solid var(--line); } .faq-q{ width:100%; text-align:left; background:none; border:none; padding:22px 0; display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:1.05rem; color:var(--ink); } .faq-q .plus{ font-family:var(--mono); font-size:1.3rem; color:var(--effort); transition:transform .2s ease; } .faq-item[open] .plus{ transform:rotate(45deg); } .faq-a{ padding:0 0 24px; color:var(--slate); font-size:0.99rem; max-width:64ch; } /* Utility */ .center{ text-align:center; } .mt-lg{ margin-top:48px; } /* ---------- Plan builder ---------- */ .builder{ padding:48px 0 100px; } .progress-rail{ display:flex; align-items:center; gap:8px; margin-bottom:44px; } .progress-rail .seg{ height:4px; flex:1; background:var(--line); border-radius:2px; overflow:hidden; } .progress-rail .seg i{ display:block; height:100%; width:0%; background:var(--effort); transition:width .3s ease; } .progress-label{ font-family:var(--mono); font-size:0.78rem; color:var(--slate); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:14px; } .step{ display:none; max-width:640px; } .step.active{ display:block; animation:fadein .35s ease; } @keyframes fadein{ from{ opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} } .step h2{ text-transform:none; font-family:var(--body); font-weight:800; font-size:1.7rem; margin-bottom:8px; } .step .step-sub{ margin-bottom:32px; font-size:1rem; } .field{ margin-bottom:26px; } .field label.field-label{ display:block; font-weight:700; font-size:0.92rem; margin-bottom:10px; } .field .hint{ font-size:0.85rem; color:var(--slate-light); margin-top:8px; } .option-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; } .option-grid.cols-4{ grid-template-columns:repeat(4,1fr); } @media (max-width:600px){ .option-grid.cols-4{ grid-template-columns:repeat(2,1fr); } } .option-card{ border:2px solid var(--line); border-radius:var(--radius); padding:16px 14px; background:var(--white); text-align:left; transition:border-color .15s ease, background .15s ease; font-family:var(--body); } .option-card strong{ display:block; font-size:0.98rem; margin-bottom:3px; } .option-card span{ display:block; font-size:0.82rem; color:var(--slate); } .option-card:hover{ border-color:var(--slate-light); } .option-card.selected{ border-color:var(--effort); background:#FFF3F1; } .option-card.selected strong{ color:var(--effort-dark); } input[type="date"], input[type="number"], input[type="text"], select{ width:100%; padding:14px 16px; border:2px solid var(--line); border-radius:var(--radius); font-family:var(--body); font-size:1rem; background:var(--white); color:var(--ink); } input[type="date"]:focus, input[type="number"]:focus, input[type="text"]:focus, select:focus{ border-color:var(--effort); } .chip-group{ display:flex; flex-wrap:wrap; gap:10px; } .chip{ border:2px solid var(--line); padding:9px 16px; border-radius:30px; font-size:0.88rem; font-weight:600; background:var(--white); } .chip.selected{ border-color:var(--track); background:var(--track-soft); color:var(--track); } .row2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } @media (max-width:560px){ .row2{ grid-template-columns:1fr; } } .step-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:40px; } /* Results */ .results{ display:none; } .results.active{ display:block; } .result-summary{ background:var(--ink); color:var(--paper); border-radius:6px; padding:34px 30px; margin-bottom:14px; } .result-summary .eyebrow{ color:var(--effort); } .result-summary h2{ color:var(--paper); margin-top:12px; text-transform:none; font-family:var(--body); font-weight:800; font-size:1.6rem; } .result-summary p{ color:var(--slate-light); margin-top:10px; } .result-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:26px; padding-top:24px; border-top:1px solid rgba(239,240,233,0.15); } @media (max-width:700px){ .result-stats{ grid-template-columns:repeat(2,1fr); } } .result-stats .n{ font-family:var(--mono); font-size:1.4rem; font-weight:600; } .result-stats .l{ font-family:var(--mono); font-size:0.68rem; color:var(--slate-light); text-transform:uppercase; letter-spacing:0.06em; } .result-actions{ display:flex; gap:14px; flex-wrap:wrap; margin:28px 0 40px; } .action-card{ flex:1; min-width:240px; border:2px solid var(--line); border-radius:var(--radius); padding:20px 20px 22px; background:var(--white); } .action-card h4{ font-size:1rem; margin:0 0 6px; } .action-card p{ font-size:0.88rem; margin-bottom:14px; } .action-card form{ display:flex; gap:8px; } .action-card input[type=email]{ flex:1; padding:10px 12px; border:2px solid var(--line); border-radius:var(--radius); font-size:0.9rem; } .toast{ font-size:0.85rem; color:var(--track); margin-top:10px; display:none; font-weight:600; } .toast.show{ display:block; } .week-block{ border:1px solid var(--line); border-radius:var(--radius); margin-bottom:16px; overflow:hidden; background:var(--white); } .week-head{ display:flex; justify-content:space-between; align-items:center; padding:16px 22px; background:var(--paper-dim); } .week-head .wk{ font-family:var(--mono); font-weight:700; font-size:0.95rem; } .week-head .phase-tag{ font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; padding:4px 10px; border-radius:20px; background:var(--track-soft); color:var(--track); } .week-head .phase-tag.taper{ background:#FFF3F1; color:var(--effort-dark); } .week-head .phase-tag.deload{ background:#EEF1FF; color:#4453C4; } .week-head .phase-tag.race{ background:var(--effort); color:var(--white); } .week-sessions{ padding:6px 22px 18px; } .session-row{ display:flex; gap:16px; align-items:baseline; padding:12px 0; border-top:1px solid var(--line); } .session-row:first-child{ border-top:none; } .session-row .s-label{ font-weight:700; min-width:150px; } .session-row .s-desc{ color:var(--slate); font-size:0.9rem; flex:1; } .session-row .s-meta{ font-family:var(--mono); font-size:0.85rem; color:var(--ink-soft); white-space:nowrap; } .disclaimer{ font-size:0.85rem; color:var(--slate-light); max-width:70ch; margin-top:20px; } /* ---------- Pricing / Pro section ---------- */ .pricing-section{ background:var(--paper-dim); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .pricing-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; } @media (max-width:820px){ .pricing-grid{ grid-template-columns:1fr; } } .price-card{ background:var(--white); border:2px solid var(--line); border-radius:6px; padding:34px 32px; display:flex; flex-direction:column; } .price-card.pro{ border-color:var(--ink); background:var(--ink); color:var(--paper); position:relative; } .price-tag{ font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--slate); } .price-card.pro .price-tag{ color:var(--effort); } .price-card h3{ text-transform:none; font-family:var(--body); font-weight:800; font-size:1.4rem; margin:10px 0 4px; } .price-card.pro h3{ color:var(--paper); } .price-amount{ font-family:var(--display); font-size:2.4rem; margin-bottom:18px; } .price-card.pro .price-amount{ color:var(--paper); } .price-amount span{ font-family:var(--body); font-size:0.9rem; font-weight:600; color:var(--slate); } .price-card.pro .price-amount span{ color:var(--slate-light); } .price-list{ flex:1; margin-bottom:26px; } .price-list li{ padding:10px 0; border-top:1px solid var(--line); font-size:0.94rem; display:flex; gap:10px; align-items:flex-start; } .price-card.pro .price-list li{ border-top-color:rgba(239,240,233,0.15); color:var(--slate-light); } .price-list li:first-child{ border-top:none; } .price-list li svg{ flex:none; margin-top:3px; color:var(--track); } .price-card.pro .price-list li svg{ color:var(--effort); } .pro-email-form{ display:flex; gap:8px; } .pro-email-form input{ flex:1; padding:12px 14px; border-radius:var(--radius); border:none; font-size:0.92rem; } .pro-note{ font-size:0.8rem; color:var(--slate-light); margin-top:10px; } .price-card.pro .pro-note{ color:rgba(239,240,233,0.55); } /* ---------- Défis / Challenge page ---------- */ .challenge-hero{ background:var(--ink); color:var(--paper); padding:80px 0 60px; text-align:center; } .challenge-hero .eyebrow{ color:var(--effort); justify-content:center; } .challenge-hero h1{ color:var(--paper); margin-top:18px; } .challenge-hero p{ color:var(--slate-light); max-width:56ch; margin:20px auto 0; font-size:1.1rem; } .challenge-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } @media (max-width:900px){ .challenge-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .challenge-grid{ grid-template-columns:1fr; } } .challenge-card{ background:var(--white); padding:38px 28px; display:flex; flex-direction:column; transition:background .15s ease; } .challenge-card:hover{ background:var(--paper-dim); } .challenge-card .dist{ font-family:var(--display); font-size:3rem; line-height:1; color:var(--effort); } .challenge-card .tagline{ font-weight:800; font-size:1.05rem; margin:14px 0 8px; } .challenge-card p{ font-size:0.9rem; flex:1; margin-bottom:22px; } .challenge-card .btn{ align-self:flex-start; } .challenge-quote-band{ background:var(--paper-dim); padding:70px 0; text-align:center; } .challenge-quote-band blockquote{ font-family:var(--display); font-size:clamp(1.6rem, 3.5vw, 2.4rem); max-width:16ch; margin:0 auto; line-height:1.15; text-transform:uppercase; color:var(--ink); } .challenge-quote-band cite{ display:block; margin-top:20px; font-family:var(--mono); font-size:0.85rem; color:var(--slate); font-style:normal; } /* ---------- Guides section (page d'accueil) ---------- */ .guides-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } @media (max-width:900px){ .guides-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:600px){ .guides-grid{ grid-template-columns:1fr; } } .guide-card{ background:var(--white); padding:30px 26px; display:flex; flex-direction:column; transition:background .15s ease; } .guide-card:hover{ background:var(--paper-dim); } .guide-card .eyebrow{ font-size:0.7rem; margin-bottom:12px; } .guide-card h3{ text-transform:none; font-family:var(--body); font-weight:800; font-size:1.05rem; margin-bottom:10px; line-height:1.3; } .guide-card p{ font-size:0.88rem; flex:1; margin-bottom:16px; } .guide-card .read-more{ font-family:var(--mono); font-size:0.8rem; font-weight:700; color:var(--effort); } /* ---------- Zone 2 calculator ---------- */ .calc-card{ background:var(--white); border:2px solid var(--line); border-radius:6px; padding:32px 30px; max-width:560px; margin:36px 0; } .calc-card h3{ text-transform:none; font-family:var(--body); font-weight:800; font-size:1.2rem; margin-bottom:6px; } .calc-card .sub{ font-size:0.9rem; color:var(--slate); margin-bottom:24px; } .calc-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px; } @media (max-width:480px){ .calc-row{ grid-template-columns:1fr; } } .calc-field label{ display:block; font-size:0.85rem; font-weight:700; margin-bottom:8px; } .calc-field .hint{ font-size:0.78rem; color:var(--slate-light); margin-top:6px; } .calc-result{ margin-top:24px; padding-top:24px; border-top:1px solid var(--line); display:none; } .calc-result.show{ display:block; } .calc-result .range{ font-family:var(--mono); font-size:2rem; font-weight:600; color:var(--effort); } .calc-result .range span{ font-size:1rem; color:var(--slate); font-weight:500; } .calc-result .method{ font-size:0.82rem; color:var(--slate-light); margin-top:8px; } /* ---------- Brevo embed ---------- */ .brevo-embed{ margin-top:16px; border-radius:4px; overflow:hidden; } .brevo-embed iframe{ width:100%; border:none; } /* ===== Menu déroulant navigation ===== */ .nav-dropdown{ position:relative; } .nav-dropdown-label{ cursor:pointer; } .nav-dropdown-menu{ display:none; position:absolute; top:100%; left:0; background:#fff; border:1px solid var(--line); border-radius:6px; padding:8px 0; min-width:220px; box-shadow:0 8px 24px rgba(0,0,0,0.08); z-index:100; } .nav-dropdown-menu a{ display:block; padding:9px 16px; white-space:nowrap; color:inherit; text-decoration:none; font-size:0.9rem; } .nav-dropdown-menu a:hover{ background:var(--paper-dim); } .nav-dropdown:hover .nav-dropdown-menu{ display:block; } .nav-dropdown.open .nav-dropdown-menu{ display:block; }