/* Courir sur Brest. Fonts are self-hosted: the fleet CSP is
`style-src 'self' 'unsafe-inline'`, so a Google Fonts /@import is
blocked and the page would fall back to system-ui. /fonts/fonts.css is
linked from the layout (an @import here delayed the fonts by one request). */
/* Palette taken from the club jersey: an orange to pink fade.
White on --orange (#e16414) is only 3.2:1, so orange carries large bold text,
gradients and decoration; small white text sits on --pink (5.3:1) or --ink.
--orange-text is the darkened orange for orange text on a light background.
--accent and --display are read by @bext-stack/cms: --accent backs the form
submit button and FAQ markers, --display is the Elementor heading face. */
:root{
--orange:#e16414;--orange-text:#b04a08;--pink:#cc1541;--pink-deep:#a50f33;
--grad:linear-gradient(100deg,#e16414 0%,#e0431f 45%,#cc1541 100%);
--ink:#17121a;--ink-2:#241c27;--muted:#5e5660;--line:#ece3dc;--cream:#fff7f1;--sand:#faf3ec;
--accent:#cc1541;--fw-btn-bg:#cc1541;--fw-btn-color:#fff;
--display:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
--radius:18px;--shadow:0 24px 60px rgba(23,18,26,.14)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#fff;font-family:'Inter',system-ui,sans-serif;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,p{margin-top:0}
/* Heading sizes must NOT be declared on Elementor headings: per-widget
typography is emitted on the widget WRAPPER and reaches the by
inheritance. Defaults therefore sit on the wrapper inside :where() (zero
specificity, a widget rule always wins); only h3 and below go on the element. */
.el-heading{font-family:var(--display);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.005em;line-height:.98}
:where(.el-w-heading){font-size:clamp(2.2rem,4.6vw,3.6rem)}
h3.el-heading,h4.el-heading{font-size:1.55rem;line-height:1.05;margin-bottom:10px}
.el-w-icon-box h3.el-heading,.el-w-image-box h3.el-heading{font-size:1.65rem}
.el-text p:last-child{margin-bottom:0}
.el-w-icon-list{margin-top:14px}
/* The kernel floors columns at 220px so narrow screens wrap; on desktop that
overrides declared percentages. Released above 980px only. */
@media(min-width:981px){.el-row>.el-col{min-width:0}}
/* ── Shared pieces ─────────────────────────────────────────────────────── */
.csb-kicker{display:inline-flex;align-items:center;gap:10px;font:700 13px/1.3 'Inter';letter-spacing:.16em;text-transform:uppercase;color:var(--orange-text);margin:0 0 16px}
.csb-kicker:before{content:"";width:28px;height:4px;border-radius:4px;background:var(--grad);transform:skewX(-20deg)}
.csb-kicker.light{color:#ffd9c2}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
/* Text colour and size are widget Style settings (seed: tone()). Classes remain
only for the two blocks that mix a paragraph with a hand-built component. */
.csb-lead.soft.sm p{font-size:17px;color:#e3d8df}
.csb-note p{font-size:15px;color:var(--muted)}
.csb-links a:not(.btn){color:var(--pink);font-weight:700}
/* .el-text in the selector: the kernel sets .el-text p{margin} after this sheet. */
.csb-foot-about .el-text p{margin-top:18px;max-width:340px}
.csb-steps-stack .step:not(:last-child){margin-bottom:14px}
/* Buttons. The kernel renders `.el-btn` inside `.el-w-button`; the `csb-btn-*`
classes are set on the WIDGET (_css_classes) so the client keeps them when
editing the label in /manage. */
.el-btn{font-family:'Inter',sans-serif;font-weight:800;letter-spacing:.01em;border-radius:999px!important;padding:16px 28px!important;transition:transform .2s,box-shadow .2s,background .2s}
.el-btn:hover{transform:translateY(-2px)}
.csb-btn-grad .el-btn{background:var(--grad)!important;color:#fff!important;box-shadow:0 14px 32px rgba(204,21,65,.32)}
.csb-btn-light .el-btn{background:#fff!important;color:var(--ink)!important}
.csb-btn-ghost .el-btn{background:transparent!important;color:#fff!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.csb-btn-ghost .el-btn:hover{box-shadow:inset 0 0 0 2px #fff}
.csb-btn-dark .el-btn{background:var(--ink)!important;color:#fff!important}
/* Two buttons side by side: a column is a flex COLUMN, so the pair lives in an
inner row marked `csb-actions`. */
.csb-actions .el-row{gap:12px!important;padding:0!important}
.csb-actions .el-col{flex:0 0 auto!important;max-width:none!important;min-width:0!important}
/* HTML buttons used in text widgets (pairs of CTAs sit side by side). */
.csb-pair{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.csb-pair.end{justify-content:flex-end;margin:0 0 18px}
/* The kernel zeroes the first paragraph's top margin in a text widget; the
pair is always that paragraph, so restore the gap above the buttons. */
.el-text>.csb-pair:not(.end){margin-top:30px!important}
.csb-hero .el-text>.csb-pair{margin-top:34px!important}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 28px;border-radius:999px;font-weight:800;font-size:15.5px;letter-spacing:.01em;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-grad{background:var(--grad);color:#fff;box-shadow:0 14px 32px rgba(204,21,65,.32)}
.btn-light{background:#fff;color:var(--ink)}
.btn-ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px #fff}
.btn-outline{color:var(--ink);box-shadow:inset 0 0 0 2px var(--line);background:#fff}
.btn-outline:hover{box-shadow:inset 0 0 0 2px var(--pink);color:var(--pink)}
.csb-brand-link{margin:0}
.csb-brand-link a{display:inline-flex;align-items:center;gap:12px}
.csb-brand-link img{width:62px;height:62px;border-radius:50%}
.csb-brand-link span{font:800 italic 1.35rem/.95 var(--display);text-transform:uppercase;color:var(--ink)}
.csb-contact .csb-card{margin-top:16px}
.csb-contact .csb-card .el-iconbox{padding:24px;flex-direction:row;gap:18px}
@media(max-width:760px){.csb-pair.end{justify-content:flex-start}.btn{width:100%}}
/* ── Partners ──────────────────────────────────────────────────────────── */
.csb-partners .el-row{align-items:stretch}
.csb-partner{height:100%}
.csb-partner .el-iconbox{height:100%;background:#fff;border-radius:var(--radius);overflow:hidden;text-align:left;align-items:stretch;gap:0;box-shadow:0 1px 0 var(--line),0 12px 34px rgba(23,18,26,.06);transition:transform .25s,box-shadow .25s}
.csb-partner .el-iconbox:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.csb-partner .el-iconbox-media{width:100%;height:170px;display:grid;place-items:center;padding:28px 34px;background:#fff;border-bottom:1px solid var(--line);border-radius:0}
.csb-partner .el-iconbox-media img{max-width:100%!important;max-height:100%;width:auto!important;height:auto;object-fit:contain;margin:0;border-radius:0}
.csb-partner .el-iconbox-body{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
.csb-partner .el-iconbox-desc{color:var(--muted);display:flex;flex-direction:column;flex:1}
.partner-tag{align-self:flex-start;font:700 11.5px/1 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--pink);background:#fdebef;border-radius:999px;padding:7px 11px;margin-bottom:12px}
.partner-link{margin-top:auto;padding-top:16px;font-weight:800;color:var(--ink)}
.partner-link:after{content:" \2192";color:var(--pink)}
.partner-join{height:100%;min-height:360px;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:34px 30px;border-radius:var(--radius);background:var(--grad);color:#fff;transition:transform .25s,box-shadow .25s}
.partner-join:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(204,21,65,.3)}
.partner-plus{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center;font:800 2rem/1 var(--display)}
.partner-join strong{font:800 italic 2rem/1 var(--display);text-transform:uppercase}
.partner-join span{opacity:.94}
.partner-join em{font-style:normal;font-weight:800;margin-top:8px}
.partner-join em:after{content:" \2192"}
.csb-partners .el-w-text-editor,.csb-partners .el-text{height:100%}
.csb-strip{border-bottom:1px solid var(--line)}
.csb-strip .el-row{align-items:center}
.strip-title{font:800 italic 1.7rem/1 var(--display);text-transform:uppercase;margin:0}
/* Partner logos: the first set scrolls (three hidden copies follow it, the
track moves by exactly one set, so the loop has no seam) and one partner
stays fixed on the right. Hover or keyboard focus pauses it. */
.strip-row{display:flex;align-items:center;gap:30px}
.logo-marquee{flex:1 1 0;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logo-track{display:flex;width:max-content;animation:csb-marquee 30s linear infinite}
.logo-marquee:hover .logo-track,.logo-marquee:focus-within .logo-track{animation-play-state:paused}
.logo-set{display:flex;align-items:center;gap:56px;padding-right:56px}
@keyframes csb-marquee{to{transform:translateX(-25%)}}
.logo-set a,.logo-set .logo-item,.strip-fixed{flex:0 0 auto;display:grid;place-items:center;height:64px;opacity:.75;filter:grayscale(1);transition:opacity .2s,filter .2s}
.logo-set a:hover,.logo-set .logo-item:hover,.strip-fixed:hover{opacity:1;filter:none}
.strip-fixed{padding-left:30px;border-left:1px solid var(--line)}
.strip-row .strip-fixed img{height:36px}
/* Explicit height: some partner SVGs carry only a viewBox, and max-height alone
collapses them to zero width. */
.strip-row img{height:50px;width:auto;max-width:150px;object-fit:contain}
@media(max-width:760px){.strip-row{gap:16px}.logo-set{gap:36px;padding-right:36px}.strip-row img{height:38px;max-width:112px}.logo-set a,.logo-set .logo-item,.strip-fixed{height:48px}.strip-fixed{padding-left:16px}.strip-row .strip-fixed img{height:26px}}
/* ── Header ────────────────────────────────────────────────────────────── */
.csb-header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(23,18,26,.08)}
.csb-header:after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--grad)}
.csb-header .el-row{align-items:center}
.csb-brand .el-image img,.csb-brand img{width:62px;height:62px;border-radius:50%}
.csb-brand a{display:flex;align-items:center;gap:12px}
nav.el-nav-menu>ul{align-items:center}
.csb-header .el-nav-link{font-weight:700;font-size:15px}
/* Six entries: keep one line down to the burger breakpoint by tightening the
gap (--nav-gap is set inline by the widget, so it needs !important). */
@media(min-width:981px){.csb-header .el-nav-list{flex-wrap:nowrap}.csb-header .el-nav-link{white-space:nowrap}}
@media(max-width:1240px) and (min-width:981px){.csb-header .el-nav-menu{--nav-gap:15px!important}.csb-header .el-nav-link{font-size:13.5px}.csb-header-cta .el-btn{padding:13px 18px!important;font-size:14px}}
.csb-header .el-nav-link:hover,.csb-header .el-nav-link[aria-current]{color:var(--pink)}
@media(min-width:981px){
.csb-header .el-row{flex-wrap:nowrap}
.csb-header .el-row>.el-col{flex:0 0 auto!important;max-width:none!important}
.csb-header .el-row>.el-col:nth-child(2){flex:1 1 auto!important;min-width:0}
.csb-header .el-nav{justify-content:flex-end;flex-wrap:nowrap}
.csb-header .el-nav a{white-space:nowrap}
}
.el-nav-sub{border:1px solid var(--line);box-shadow:0 14px 38px rgba(23,18,26,.14)!important;border-radius:14px!important}
@media(min-width:981px){.csb-header .el-nav-sub{min-width:230px;padding:8px;text-align:left;background:#fff!important}.csb-header .el-nav-sub .el-nav-link{font-size:14.5px;padding:9px 12px}.csb-header .el-nav-sub .el-nav-item{margin:0}}
/* Webdesign29 credit at the bottom of the mobile menu panel. */
.csb-nav-credit{display:none}
@media(max-width:980px){
.csb-header.nav-open .csb-nav-credit{display:block;margin-top:14px}
.nav-credit{margin:0;text-align:center}
.nav-credit a{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.nav-credit strong{color:var(--ink)}
.nav-credit .wd29-mark{width:22px;height:22px;font-size:10px;color:#fff}
}
/* ── Hero ──────────────────────────────────────────────────────────────── */
.csb-hero{min-height:min(88vh,760px);display:flex;align-items:flex-end;overflow:hidden}
.csb-hero>.el-row{width:100%}
/* Phones get a crop of each hero photo (the largest paint of every page),
written by scripts/hero-mobile.py: rerun it after adding a hero image.
Document.tsx preloads the home one. */
/* hero-mobile:start */
@media(max-width:600px){
.csb-hero{background-image:url(/media/groupe-capucins-mobile.webp)!important}
.csb-page-hero[style*="bart-meneur-1h45-wide.webp"]{background-image:url(/media/bart-meneur-1h45-mobile.webp)!important}
.csb-page-hero[style*="bart-meneurs-2h00-wide.webp"]{background-image:url(/media/bart-meneurs-2h00-mobile.webp)!important}
.csb-page-hero[style*="course-route-1600.webp"]{background-image:url(/media/course-route-mobile.webp)!important}
.csb-page-hero[style*="groupe-maillots-wide.webp"]{background-image:url(/media/groupe-maillots-mobile.webp)!important}
.csb-page-hero[style*="seance-foret-1600.webp"]{background-image:url(/media/seance-foret-mobile.webp)!important}
.csb-page-hero[style*="seance-foret-2-1600.webp"]{background-image:url(/media/seance-foret-2-mobile.webp)!important}
.csb-page-hero[style*="seance-remparts-1600.webp"]{background-image:url(/media/seance-remparts-mobile.webp)!important}
.csb-page-hero[style*="seance-remparts-2-1600.webp"]{background-image:url(/media/seance-remparts-2-mobile.webp)!important}
.csb-page-hero[style*="trail-annecy-wide.webp"]{background-image:url(/media/trail-annecy-mobile.webp)!important}
.csb-page-hero[style*="trail-bout-du-monde-wide.webp"]{background-image:url(/media/trail-bout-du-monde-mobile.webp)!important}
.csb-page-hero[style*="trail-cote-phare-1600.webp"]{background-image:url(/media/trail-cote-phare-mobile.webp)!important}
}
/* hero-mobile:end */
.csb-hero .csb-pair{margin-top:34px}
/* Club name on ONE line, filling the container at every width. The text runs
6.6 times its font size (measured), so size = usable width / 6.85, where the
usable width is the 1180px row (or the viewport) minus its 2x24px padding. */
.csb-hero .hero-title .el-heading{white-space:nowrap;font-size:min(168px,calc((min(100vw,1180px) - 48px)/6.85))!important;line-height:.95}
.csb-hero .el-overlay{background:linear-gradient(180deg,rgba(23,18,26,.42) 0%,rgba(23,18,26,.55) 45%,rgba(23,18,26,.92) 100%)!important;opacity:1!important}
.csb-hero:before{content:"";position:absolute;z-index:1;right:-8%;top:-20%;width:40%;height:140%;background:var(--grad);opacity:.2;transform:skewX(-18deg);pointer-events:none}
.csb-hero .el-heading{text-shadow:0 4px 30px rgba(0,0,0,.25)}
.hero-tagline{font:800 italic clamp(1.5rem,2.6vw,2.1rem)/1.1 var(--display);text-transform:uppercase;color:#fff;margin:14px 0 22px!important;letter-spacing:.01em}
.hero-tagline:before{content:"";display:inline-block;width:34px;height:5px;border-radius:4px;background:var(--grad);transform:skewX(-20deg);vertical-align:middle;margin-right:12px}
.csb-page-hero{overflow:hidden}
.csb-page-hero .el-overlay{background:linear-gradient(90deg,rgba(23,18,26,.94) 0%,rgba(23,18,26,.78) 48%,rgba(23,18,26,.25) 100%)!important;opacity:1!important}
/* ── Stat band (counters) ──────────────────────────────────────────────── */
.csb-stats{position:relative}
.csb-stats .el-counter{text-align:left}
.csb-stats .el-counter-num{font:800 italic clamp(2.8rem,5vw,4rem)/1 var(--display);color:#fff}
.csb-stats .el-counter-label{color:#ffe3d3;font-weight:600;font-size:14.5px;margin-top:8px;max-width:220px}
.csb-stats .el-col{border-left:2px solid rgba(255,255,255,.28);padding-left:22px}
/* ── Split image with a skewed gradient slab behind it ─────────────────── */
.csb-photo{position:relative}
.csb-photo img{border-radius:var(--radius);width:100%;height:520px;object-fit:cover;position:relative;z-index:1;box-shadow:var(--shadow)}
.csb-photo:before{content:"";position:absolute;inset:26px -18px -18px 26px;border-radius:var(--radius);background:var(--grad);transform:rotate(2.5deg)}
.csb-photo.tall img{height:600px}
.csb-photo.short img{height:430px}
.csb-photo.xshort img{height:330px}
.csb-photo.xshort.pos-flag img{object-position:center 50%}
@media(max-width:980px){.csb-photo.xshort{margin-top:26px}.csb-photo.xshort img{height:300px}}
.csb-photo.pos-flag img{object-position:center 32%}
.csb-photo.pos-top img{object-position:center 22%}
.csb-photo.pos-bottom img{object-position:center 82%}
.csb-photo-caption{margin:30px 0 0!important;font-size:13.5px;color:var(--muted);font-style:italic;text-align:center}
/* Keep the gradient slab off the text column next to the photo. */
@media(min-width:981px){.el-col:first-child>.csb-photo{margin-right:44px}.el-col:last-child>.csb-photo{margin-left:36px}}
/* ── Cards (icon-box) ──────────────────────────────────────────────────── */
.csb-cards .el-row{align-items:stretch}
.csb-card{height:100%}
.csb-card .el-iconbox{height:100%;background:#fff;border-radius:var(--radius);padding:34px 30px;text-align:left;align-items:flex-start;box-shadow:0 1px 0 var(--line),0 12px 34px rgba(23,18,26,.06);transition:transform .25s,box-shadow .25s}
.csb-card .el-iconbox:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.csb-card .el-iconbox-icon{width:58px;height:58px;border-radius:16px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:26px;margin-bottom:6px;transform:skewX(-8deg)}
.csb-card .el-iconbox-icon svg{transform:skewX(8deg)}
.csb-card .el-iconbox-desc{color:var(--muted)}
/* ── Race bibs (dossards) ──────────────────────────────────────────────── */
.csb-bibs .el-row{align-items:stretch}
.csb-bib{height:100%}
.csb-bib .el-text{height:100%}
.bib{height:100%;background:#fff;border-radius:14px;padding:26px 24px 22px;position:relative;box-shadow:0 1px 0 var(--line),0 14px 36px rgba(23,18,26,.08);border-top:10px solid transparent;border-image:var(--grad) 1;border-image-slice:1 0 0 0}
.bib:before,.bib:after{content:"";position:absolute;top:12px;width:10px;height:10px;border-radius:50%;background:var(--sand);box-shadow:inset 0 1px 2px rgba(0,0,0,.18)}
.bib:before{left:12px}.bib:after{right:12px}
.bib-dist{font:800 italic 3.4rem/.95 var(--display);text-transform:uppercase;margin:6px 0 8px}
.bib-time{display:inline-block;background:var(--ink);color:#fff;font-weight:700;font-size:13px;border-radius:999px;padding:5px 12px;margin-bottom:12px}
.bib p{color:var(--muted);font-size:15px;margin:0}
/* ── Pace flags ────────────────────────────────────────────────────────── */
.pace-row{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 6px}
.pace{font:800 italic 1.35rem/1 var(--display);padding:10px 16px 9px;border-radius:40px 40px 40px 6px;color:#fff;background:var(--grad)}
.pace.alt{background:var(--ink)}
/* ── Steps ─────────────────────────────────────────────────────────────── */
.csb-steps .el-row{align-items:stretch;counter-reset:step}
/* Equal-height steps: the column stretches, the widget chain must follow. */
.csb-steps .el-col{display:flex}
.csb-steps .el-w-text-editor,.csb-steps .el-text{height:100%;flex:1}
.step{position:relative;padding:28px 26px;background:#fff;box-shadow:0 1px 0 var(--line),0 12px 34px rgba(23,18,26,.06);border-radius:var(--radius);height:100%}
.step-n{font:800 italic 4.2rem/.8 var(--display);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:14px}
.step h3{font:800 italic 1.6rem/1 var(--display);text-transform:uppercase;margin-bottom:8px}
.step p{color:var(--muted);margin:0}
/* ── Gallery ───────────────────────────────────────────────────────────── */
.csb-gallery .el-gallery{grid-auto-rows:260px}
.csb-gallery .el-gallery-item{margin:0;border-radius:14px;overflow:hidden}
.csb-gallery .el-gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.csb-gallery .el-gallery-item:hover img{transform:scale(1.05)}
@media(min-width:761px){.csb-gallery .el-gallery-item:first-child{grid-row:span 2;grid-column:span 2}}
/* Season notice (adhésion). */
.csb-notice{display:flex;align-items:center;gap:22px;background:#fff;border-radius:var(--radius);padding:24px 28px;box-shadow:0 1px 0 var(--line),0 12px 34px rgba(23,18,26,.08)}
.csb-notice>div{flex:1}
.csb-notice strong{display:block;font:800 italic 1.6rem/1.05 var(--display);text-transform:uppercase;margin-bottom:6px}
.csb-notice p{margin:0;color:var(--muted)}
.csb-notice b{color:var(--ink)}
.csb-notice-badge{flex:0 0 auto;font:800 italic 1.1rem/1 var(--display);text-transform:uppercase;color:#fff;background:var(--ink);border-radius:12px;padding:14px 14px;text-align:center;max-width:110px}
.csb-notice .btn{flex:0 0 auto}
@media(max-width:760px){.csb-notice{flex-direction:column;align-items:flex-start;padding:22px}}
/* Closed season: blurred, inert form under a lock card (adhésion). */
.el-col:has(>.csb-lock-w),.csb-lock-col{position:relative}
.csb-form-locked{filter:blur(3px);opacity:.55;pointer-events:none;user-select:none}
.csb-lock-w{position:absolute!important;inset:52px 0 0 0;z-index:3;margin:0!important}
.csb-lock-w .el-text,.csb-lock{height:100%}
.csb-lock{display:grid;place-items:center;padding:20px;border-radius:var(--radius);background:linear-gradient(160deg,rgba(255,247,241,.55),rgba(255,247,241,.85))}
.csb-lock-card{max-width:400px;text-align:center;background:#fff;border-radius:22px;padding:34px 30px 30px;box-shadow:0 30px 70px rgba(23,18,26,.18),0 1px 0 var(--line)}
.csb-lock-icon{width:66px;height:66px;margin:0 auto 16px;display:grid;place-items:center;border-radius:20px;background:var(--grad);color:#fff;transform:rotate(-6deg);box-shadow:0 14px 30px rgba(204,21,65,.3)}
.csb-lock-icon svg{transform:rotate(6deg)}
.csb-lock-kicker{display:block;font:700 12px/1.3 'Inter';letter-spacing:.14em;text-transform:uppercase;color:var(--orange-text);margin-bottom:6px}
.csb-lock-card strong{display:block;font:800 italic 2.3rem/1 var(--display);text-transform:uppercase;margin-bottom:10px}
.csb-lock-card p{color:var(--muted);margin:0}
.csb-lock-card .csb-lock-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.csb-lock-card .btn{min-height:48px;padding:0 20px;font-size:14.5px}
@media(max-width:760px){.csb-lock-w{inset:46px 0 0 0}.csb-lock-card{padding:28px 20px 22px}.csb-lock-card .btn{width:100%}}
/* ── Courses club (nos sorties) ─────────────────────────────────────── */
.csb-races{overflow:hidden}
#courses-club{position:relative;top:-110px}
.race-lead{color:#e3d8df;font-size:18px;margin:0 0 34px!important}
.race-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.race{display:flex;gap:18px;background:#fff;color:var(--ink);border-radius:var(--radius);padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.25);transition:transform .25s}
.race:hover{transform:translateY(-6px)}
.race-date{flex:0 0 84px;height:96px;border-radius:14px;background:var(--grad);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:skewX(-6deg)}
.race-date>*{transform:skewX(6deg)}
.race-date b{font:800 italic 1.9rem/1 var(--display)}
.race-date span{font:800 italic 1.1rem/1.1 var(--display);text-transform:uppercase}
.race-date small{font-size:11.5px;font-weight:700;opacity:.85}
.race-body{min-width:0}
.race-n{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:700 11.5px/1.3 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--orange-text);margin-bottom:6px}
.race-flag{font-style:normal;letter-spacing:.06em;border-radius:999px;padding:3px 8px;display:none}
.race.is-next .race-flag{display:inline-block;background:var(--ink);color:#fff}
.race.is-next .race-flag:before{content:"Prochaine"}
.race.is-past{opacity:.6}
.race.is-past .race-flag{display:inline-block;background:var(--sand);color:var(--muted)}
.race.is-past .race-flag:before{content:"Terminée"}
.race h3{font:800 italic 1.55rem/1.02 var(--display);text-transform:uppercase;margin:0 0 6px}
.race-place{color:var(--muted);font-size:14px;margin:0 0 12px}
.race-dist{display:flex;flex-wrap:wrap;gap:6px}
.race-dist span{font-weight:800;font-size:13px;padding:5px 10px;border-radius:999px;background:var(--cream)}
.race-note{color:#d9cfd6;font-size:15.5px;margin:30px 0 0!important}
.csb-tide-w{margin:50px 0 0!important}
.csb-tide{width:100vw;margin-left:calc(50% - 50vw);height:110px;overflow:hidden}
.csb-tide svg{width:200%;height:100%;display:block;animation:csb-tide 14s linear infinite}
.csb-tide .tide-1{fill:#e16414;opacity:.95}
.csb-tide .tide-2{fill:#cc1541;opacity:.9;animation:csb-tide-b 9s ease-in-out infinite alternate}
.csb-tide .tide-3{fill:var(--tide-next,#fff7f1)}
@keyframes csb-tide{to{transform:translateX(-50%)}}
@keyframes csb-tide-b{to{transform:translateX(-180px)}}
@media(max-width:980px){.race-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.csb-tide{height:70px}.race{padding:18px;gap:14px}.race-date{flex-basis:72px;height:86px}}
.csb-races.compact .race{padding:18px;gap:14px}
.csb-races.compact .race-date{flex-basis:70px;height:80px}
.csb-races.compact .race-date b{font-size:1.6rem}
.csb-races.compact .race h3{font-size:1.35rem}
.csb-races.compact .race-place{font-size:13px;margin-bottom:10px}
.csb-races.compact .race-lead{font-size:16.5px;margin-bottom:26px!important}
.csb-races.compact .csb-tide-w{margin-top:36px!important}
.csb-races.compact .csb-tide{height:80px}
.race-teaser{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:22px!important;padding:14px 18px;border-radius:14px;background:var(--cream)}
.race-teaser span{color:var(--ink);font-weight:600}
.race-teaser a{font-weight:800;color:var(--pink)}
.race-teaser a:after{content:" \2192"}
/* Community tags (home). */
.csb-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.csb-tags span{font-weight:700;font-size:14px;padding:8px 14px;border-radius:999px;background:var(--cream);color:var(--ink)}
/* Home photo carousel (kernel image-carousel + its island). */
.csb-carousel .el-carousel-slide img{width:100%;height:340px;object-fit:cover;border-radius:16px;display:block}
.csb-carousel .el-car-prev,.csb-carousel .el-car-next{width:46px;height:46px;border-radius:50%!important;border:0!important;background:var(--grad)!important;color:#fff!important;font-size:26px;line-height:1;box-shadow:0 10px 24px rgba(204,21,65,.3);opacity:1!important}
.csb-carousel .el-car-dot,.csb-carousel [class*="dot"]{border:0}
@media(max-width:760px){.csb-carousel .el-carousel-slide img{height:260px}}
/* Three small photos under the podium copy. */
.mini-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.mini-photos img{width:100%;height:150px;object-fit:cover;border-radius:12px}
@media(max-width:760px){.mini-photos img{height:100px}}
/* ── Facts list (dark) ─────────────────────────────────────────────────── */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
.fact{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px 18px}
.fact b{display:block;font:800 italic 1.7rem/1 var(--display);text-transform:uppercase;color:#fff;margin-bottom:4px}
.fact span{color:#d9cfd6;font-size:14px}
.facts.light{grid-template-columns:repeat(3,1fr);margin:22px 0}
/* Smaller facts (home BART band). */
.facts.facts-sm{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0 4px}
.facts-sm .fact{padding:12px 14px;border-radius:12px}
.facts-sm .fact b{font-size:1.35rem}
.facts-sm .fact span{font-size:12.5px;line-height:1.35;display:block}
@media(max-width:560px){.facts.facts-sm{grid-template-columns:repeat(3,minmax(0,1fr))}.facts-sm .fact{padding:10px}.facts-sm .fact b{font-size:1.15rem}}
.facts.facts-sm.facts-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.facts.light .fact{background:var(--cream);border-color:var(--line)}
.facts.light .fact b{color:var(--ink);font-size:2rem}
.facts.light .fact span{color:var(--muted)}
@media(max-width:560px){.facts{grid-template-columns:1fr}.facts.light{grid-template-columns:repeat(3,1fr)}.facts.light .fact{padding:12px}.facts.light .fact b{font-size:1.5rem}}
/* ── CTA band ──────────────────────────────────────────────────────────── */
.csb-cta{overflow:hidden}
.csb-cta:before,.csb-cta:after{content:"";position:absolute;top:-40%;height:180%;width:120px;background:rgba(255,255,255,.1);transform:skewX(-20deg);pointer-events:none}
.csb-cta:before{right:18%}.csb-cta:after{right:8%;width:40px}
.csb-cta .el-social{gap:12px;justify-content:flex-end}
.cta-actions{width:100%;max-width:300px;margin-left:auto;display:grid;gap:14px}
.cta-actions .btn{width:100%}
.cta-social{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 20px;border-radius:999px;background:rgba(255,255,255,.14)}
.cta-social span{color:#fff;font-weight:700;font-size:14.5px;margin-right:auto}
.cta-ico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--pink);transition:transform .2s,background .2s,color .2s}
.cta-ico:hover{transform:translateY(-2px);background:var(--ink);color:#fff}
@media(max-width:760px){.cta-actions{max-width:none;margin:8px 0 0}}
@media(max-width:760px){.csb-cta .el-social{justify-content:flex-start}}
.el-social{margin-top:6px}
.el-social-link{width:48px;height:48px;border-radius:50%;display:inline-grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;font-size:22px!important;border:0!important;transition:background .2s,transform .2s}
.el-social-link:hover{background:#fff;color:var(--pink);transform:translateY(-2px)}
/* ── FAQ ───────────────────────────────────────────────────────────────── */
.el-faq-item,.el-acc-item{border-radius:14px!important}
/* White cards with a whisper of shadow, no outline (it read as a grey border on cream). */
.el-faq{gap:12px}
.el-faq-item{background:#fff!important;border:0!important;box-shadow:0 1px 2px rgba(23,18,26,.05),0 6px 20px rgba(23,18,26,.05);transition:box-shadow .2s}
.el-faq-item:hover,.el-faq-item[open]{box-shadow:0 1px 2px rgba(23,18,26,.06),0 12px 30px rgba(23,18,26,.09)}
.el-faq-summary{padding:18px 22px!important;font-size:16.5px}
.el-faq-item[open] .el-faq-marker{transform:rotate(45deg)}
.el-faq-a{padding:0 22px 20px!important;font-size:15.5px;line-height:1.65}
/* ── Forms ─────────────────────────────────────────────────────────────── */
.csb-form{background:#fff;border-radius:var(--radius);padding:34px;box-shadow:var(--shadow)}
.csb-form input,.csb-form textarea,.csb-form select{border-radius:12px!important;border:1.5px solid var(--line)!important;font:inherit;padding:13px 14px!important}
.csb-form input:focus,.csb-form textarea:focus{outline:none;border-color:var(--pink)!important;box-shadow:0 0 0 4px rgba(204,21,65,.12)}
.csb-form .el-fw-btn{background:var(--grad)!important;color:#fff!important;border-radius:999px!important;font-weight:800;padding:15px 28px!important;border:0!important}
/* ── Footer ────────────────────────────────────────────────────────────── */
.csb-footer{color:#cfc4cc}
.csb-footer:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad)}
.csb-footer a{color:#fff}
.csb-footer a:hover{color:#ffb38a}
.csb-footer h3.el-heading{color:#fff;font-size:1.35rem}
.csb-footer .el-social-link{background:rgba(255,255,255,.1)}
.csb-footer-logo img{width:92px!important;height:92px!important;border-radius:50%!important;background:#fff;object-fit:cover}
.el-text ul.links{list-style:none;padding:0;margin:0;line-height:2.1}
.csb-credit{border-top:1px solid rgba(255,255,255,.1)}
.csb-credit .el-row{align-items:center}
.credit-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:13.5px;color:#a99ea7}
.credit-line a{color:#d9cfd6}
.wd29{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff!important;transition:background .2s,border-color .2s}
.wd29:hover{background:rgba(255,255,255,.12);border-color:rgba(255,179,138,.6)}
.wd29-mark{width:28px;height:28px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font:800 italic 12px/1 var(--display);letter-spacing:.02em}
.wd29 small{display:block;font-size:11px;color:#a99ea7;line-height:1.1}
.wd29 strong{display:block;font-size:13.5px;line-height:1.2}
/* ── Prose pages (mentions légales) ───────────────────────────────────── */
.csb-prose .el-text{max-width:820px;color:#3b333d}
.csb-prose h2{font:800 italic 1.9rem/1 var(--display);text-transform:uppercase;margin:36px 0 12px}
.csb-prose a{color:var(--pink);font-weight:600;text-decoration:underline}
/* ── Burger menu (islands/csb-ui.js adds the button and toggles .nav-open).
Everything sits under html.js so the menu stays open without JS. ─────── */
.nav-burger{display:none;position:absolute;right:18px;top:50%;margin-top:-23px;z-index:90;width:46px;height:46px;border:0;border-radius:50%;background:var(--grad);cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
.nav-open .nav-burger{top:18px;margin-top:0}
.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open .nav-burger span:nth-child(2){opacity:0}
.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.scroll-top{position:fixed;right:20px;bottom:22px;z-index:70;width:46px;height:46px;border:0;border-radius:50%;background:var(--grad);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 24px rgba(23,18,26,.28);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,transform .2s,visibility .2s}
.scroll-top.on{opacity:1;visibility:visible;transform:none}
@media(max-width:980px){
html.js .nav-burger{display:flex}
html.js .csb-header>.el-row>.el-col:nth-child(2),
html.js .csb-header>.el-row>.el-col:nth-child(3){display:none!important}
html.js .csb-header.nav-open>.el-row>.el-col:nth-child(2),
html.js .csb-header.nav-open>.el-row>.el-col:nth-child(3){display:flex!important;flex:0 0 100%!important;max-width:100%!important}
.nav-open nav.el-nav-menu>ul{flex-direction:column;align-items:stretch;gap:0}
.nav-open nav.el-nav-menu>ul>li{border-bottom:1px solid var(--line)}
.nav-open nav.el-nav-menu,.nav-open .el-nav-list{text-align:left}
.nav-open .el-nav-link{display:block;padding:13px 4px;text-align:left;font-size:17px}
/* The kernel nav widget ships its own burger and, under 768px, collapses
the list behind it. Inside our panel that made a second tap necessary:
one burger only, and the list is always shown once the panel is open. */
.csb-header .el-nav-toggle{display:none!important}
.csb-header .el-nav-menu .el-nav-list{display:flex!important;flex-direction:column;width:100%}
.csb-header.nav-open{max-height:100vh;max-height:100dvh;overflow-y:auto}
.csb-header .el-nav-item.el-nav-has-sub>.el-nav-link>.el-nav-txt::after{content:none!important}
/* Sub-pages listed flat under their parent: no hover on a phone. */
.csb-header .el-nav-sub{position:static!important;opacity:1!important;visibility:visible!important;transform:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;background:transparent!important;min-width:0!important;margin:0!important;padding:0 0 8px 14px!important;list-style:none}
.nav-open .el-nav-sub .el-nav-link{padding:9px 4px;font-size:15.5px;font-weight:600;color:var(--muted)}
/* Folded by default (csb-ui.js toggles .sub-open), chevron on the parent. */
html.js .csb-header .el-nav-item.el-nav-has-sub:not(.sub-open)>.el-nav-sub{display:none!important}
html.js .nav-open .el-nav-item.el-nav-has-sub>.el-nav-link{display:flex;justify-content:space-between;align-items:center}
html.js .nav-open .el-nav-item.el-nav-has-sub>.el-nav-link::after{content:"";width:9px;height:9px;margin-right:6px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-3px) rotate(45deg);transition:transform .2s}
html.js .nav-open .el-nav-item.sub-open>.el-nav-link::after{transform:translateY(2px) rotate(-135deg)}
/* The gradient rule under the header is absolutely placed: inside the
scrolling panel it ended up drawn across the menu entries. */
.csb-header.nav-open:after{display:none}
.nav-open .csb-header-cta .el-btn-wrap{width:100%}
.nav-open .csb-header-cta .el-btn{display:flex;justify-content:center;width:100%}
.csb-photo img,.csb-photo.tall img{height:400px}
.csb-photo:before{inset:18px -10px -10px 18px}
}
/* Elementor headings carry a px size from the editor with no responsive
variant: tame them on small screens. */
@media(max-width:900px){.el-w-heading .el-heading{font-size:clamp(2rem,8vw,3rem)}}
@media(max-width:760px){
.csb-hero{min-height:620px}
.csb-hero:before{width:70%;right:-30%}
/* Key figures as a 2 x 2 grid instead of four stacked rows. */
.csb-stats>.el-row{display:grid!important;grid-template-columns:1fr 1fr;gap:22px 18px!important}
.csb-stats .el-col{max-width:none!important;min-width:0!important;border-left:0;border-top:2px solid rgba(255,255,255,.28);padding:14px 0 0}
.csb-stats .el-counter-num{font-size:2.6rem}
.csb-stats .el-counter-label{font-size:13px}
.csb-gallery .el-gallery{grid-auto-rows:150px;grid-template-columns:1fr 1fr!important}
.csb-gallery .el-gallery-item:first-child{grid-column:span 2}
.csb-page-hero .el-w-heading .el-heading{font-size:clamp(2.8rem,13vw,4rem)}
.csb-kicker{font-size:11.5px;letter-spacing:.12em}
.csb-form{padding:22px}
.credit-line{flex-direction:column}
}
/* ── Animated SVG: Tuesday pack, Thursday pace groups ─────────────────── */
.csb-lanes{background:#fff;border-radius:var(--radius);padding:26px 26px 18px;box-shadow:0 1px 0 var(--line),0 12px 34px rgba(23,18,26,.06)}
.csb-lanes svg{display:block;width:100%;height:auto;overflow:visible}
.csb-lanes .ln-title{font:800 italic 22px/1 'Barlow Condensed',sans-serif;text-transform:uppercase;fill:var(--ink)}
.csb-lanes .ln-sub{font:600 13px/1 'Inter',sans-serif;fill:var(--muted)}
.csb-lanes .ln-track{stroke:var(--line);stroke-width:10;stroke-linecap:round}
.csb-lanes .ln-dash{stroke:#fff;stroke-width:2;stroke-dasharray:6 10}
.csb-lanes .ln-pace{font:800 italic 17px/1 'Barlow Condensed',sans-serif;fill:var(--ink)}
.csb-lanes .runner{animation:csb-run linear infinite}
.csb-lanes .runner circle{stroke:#fff;stroke-width:2.5}
.csb-lanes .pack .runner{animation-duration:11s}
/* Thursday loops (SMIL animateMotion in the seed). */
.csb-lanes .lp-track{fill:none;stroke-width:3;stroke-opacity:.35;stroke-dasharray:2 8;stroke-linecap:round}
.csb-lanes .lp-label{font:600 13px/1 'Inter',sans-serif;fill:var(--muted)}
.csb-lanes .lp-name{font:800 italic 17px/1 'Barlow Condensed',sans-serif;fill:var(--ink);text-transform:uppercase}
.csb-lanes .lp-start{font:700 13px/1 'Inter',sans-serif;fill:var(--ink)}
.csb-lanes g>circle{stroke:#fff;stroke-width:2.5}
.csb-lanes .bob{animation:csb-bob .5s ease-in-out infinite alternate}
@keyframes csb-run{from{transform:translateX(0)}to{transform:translateX(520px)}}
@keyframes csb-bob{from{transform:translateY(0)}to{transform:translateY(-3px)}}
.csb-lanes-note{color:var(--muted);font-size:14px;margin:12px 0 0}
/* Home hero: animated route trace. csb-ui.js moves .hero-trace out of its
text widget to be a direct child of the hero, above the photo overlay and
under the text row. Fixed 2400x230 px, centred: no scaling with the width.
Until moved (or without JS) it stays hidden. */
.csb-hero .csb-trace-w{margin:0!important;height:0;overflow:hidden}
.hero-trace{display:none}
.csb-hero>.hero-trace{display:block;position:absolute;z-index:1;top:0;left:50%;width:2400px;height:230px;margin-left:-1200px;pointer-events:none}
.hero-trace svg{display:block;width:2400px;height:230px}
@media(min-width:761px){.csb-hero{padding-top:200px!important}}
.hero-trace .tr-shadow{fill:none;stroke:#0b080c;stroke-opacity:.55;stroke-width:22;stroke-linecap:round}
.hero-trace .tr-base{fill:none;stroke:#fff;stroke-opacity:.3;stroke-width:4;stroke-dasharray:3 12;stroke-linecap:round}
.hero-trace .tr-line{fill:none;stroke-width:9;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000;opacity:1;animation:csb-draw 2.6s cubic-bezier(.6,.1,.3,1) .2s forwards}
.hero-trace .tr-comet{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;opacity:.9}
.hero-trace .tr-mark{opacity:0;animation:csb-pop .5s ease-out forwards}
.hero-trace .tr-mark circle{fill:#fff;stroke:#cc1541;stroke-width:6}
.hero-trace .tr-mark text{font:800 italic 36px/1 'Barlow Condensed',sans-serif;fill:#fff;text-transform:uppercase;letter-spacing:.02em;paint-order:stroke;stroke:rgba(23,18,26,.75);stroke-width:8px}
@keyframes csb-draw{to{stroke-dashoffset:0}}
@keyframes csb-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Phones: show the whole 5 km to marathon stretch (x 600 to 1880 of the
2400-wide drawing) across the screen width, so 1280 units = 100vw.
Strokes and labels are thickened to stay legible at that scale. */
@media(max-width:760px){
.csb-hero>.hero-trace{width:187.5vw;height:17.97vw;left:-46.88vw;margin-left:0;top:14px}
.hero-trace svg{width:100%;height:100%}
.hero-trace .tr-shadow{stroke-width:44}
.hero-trace .tr-base{stroke-width:8}
.hero-trace .tr-line,.hero-trace .tr-comet{stroke-width:20}
.hero-trace .tr-mark circle{r:20px;stroke-width:10}
.hero-trace .tr-mark text{font-size:64px;stroke-width:12px}
.hero-trace .tr-runner{transform:scale(1.6)}
}
/* Stopwatch on the tools hub. */
.csb-watch{display:block;width:min(100%,340px);height:auto;margin:0 auto}
.csb-watch .hand{transform-origin:120px 140px;animation:csb-sweep 6s linear infinite}
.csb-watch .ring{stroke-dasharray:540;stroke-dashoffset:540;animation:csb-ring 6s linear infinite}
.csb-watch .pulse{animation:csb-pulse 1s ease-in-out infinite}
@keyframes csb-sweep{to{transform:rotate(360deg)}}
@keyframes csb-ring{to{stroke-dashoffset:0}}
@keyframes csb-pulse{50%{opacity:.35}}
/* ── Running tools (islands/csb-tools.js) ─────────────────────────────── */
.csb-tool{display:grid;grid-template-columns:minmax(0,1fr);gap:22px}
.csb-tool:not(.is-ready) .tool-nojs{display:block}
.tool-nojs{display:none;color:var(--muted)}
.tool-card{background:#fff;border-radius:var(--radius);padding:30px;box-shadow:0 1px 0 var(--line),0 12px 34px rgba(23,18,26,.06)}
.tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:30px;align-items:start}
.tool-inputs{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.tf{display:grid;gap:7px}
.tf>span{font-weight:700;font-size:14px}
.tf select,.tf input{min-width:0;font:inherit;font-size:17px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);width:100%}
.tf select:focus,.tf input:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px rgba(204,21,65,.12)}
.tf-time{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tf-time label{position:relative}
.tf-time em{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--muted);font-size:14px;pointer-events:none}
.tf-time input{padding-right:42px;text-align:right}
.tool-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:13.5px;font-weight:700;padding:8px 13px;border-radius:999px;border:0;background:var(--cream);color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line)}
.chip:hover{background:#fdebef;color:var(--pink)}
.tool-tabs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;background:var(--cream);padding:5px;border-radius:14px}
.tool-tabs input{position:absolute;opacity:0;pointer-events:none}
.tool-tabs span{display:block;text-align:center;padding:10px 8px;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;color:var(--muted)}
.tool-tabs input:checked+span{background:#fff;color:var(--ink);box-shadow:0 2px 10px rgba(23,18,26,.1)}
.tool-tabs input:focus-visible+span{outline:2px solid var(--pink)}
.tool-out{background:var(--ink);color:#fff;border-radius:16px;padding:28px;position:relative;overflow:hidden}
.tool-out:before{content:"";position:absolute;right:-60px;top:-30%;width:140px;height:160%;background:var(--grad);opacity:.35;transform:skewX(-18deg)}
.tool-out>*{position:relative}
.tool-kicker{font:700 12.5px/1 'Inter';letter-spacing:.14em;text-transform:uppercase;color:#ffd9c2;margin:0 0 8px}
.tool-big{font:800 italic clamp(3.6rem,8vw,5.4rem)/.95 var(--display);margin:0 0 16px}
.tool-big small{font-size:.38em;font-style:normal;font-weight:700;opacity:.8}
.tool-facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-bottom:16px}
.tool-facts div{background:rgba(255,255,255,.08);border-radius:12px;padding:12px 14px}
.tool-facts b{display:block;font:800 italic 1.5rem/1 var(--display)}
.tool-facts span{font-size:13px;color:#d9cfd6}
.tool-sub{color:#e9dfe6;font-size:15px;margin:0 0 12px}
.tool-group{margin:0;font-size:14.5px;color:#fff;background:rgba(255,255,255,.1);border-radius:12px;padding:12px 14px}
.tool-group b{color:#ffb38a}
.tool-empty{color:#e9dfe6;margin:0}
.tool-note{color:var(--muted);font-size:14.5px}
.tool-h{font:800 italic 1.7rem/1 var(--display);text-transform:uppercase;margin:0 0 12px}
.tool-table-wrap{overflow-x:auto}
.tool-table{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.tool-table th{text-align:left;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:2px solid var(--line)}
.tool-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.tool-table tr:last-child td{border-bottom:0;font-weight:700}
.tool-splits .tool-table{max-width:420px}
.eq-lead{font-size:16.5px;margin:0 0 18px}
.eq-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.eq{background:var(--cream);border-radius:14px;padding:18px 18px 16px}
.eq.is-goal{background:var(--ink);color:#fff}
.eq span{display:block;font-weight:700;font-size:13.5px;color:var(--muted);margin-bottom:6px}
.eq.is-goal span{color:#ffd9c2}
.eq b{display:block;font:800 italic 2.1rem/1 var(--display);font-variant-numeric:tabular-nums}
.eq small{display:block;margin-top:6px;font-size:13.5px;color:var(--muted)}
.eq.is-goal small{color:#d9cfd6}
@media(max-width:700px){.eq-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.zone-list{display:grid;gap:10px}
.zone{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,2fr);gap:4px 18px;align-items:baseline;padding:14px 16px;border-radius:14px;background:var(--cream)}
.zone h4{margin:0;font-size:15.5px}
.zone .z-pace{font:800 italic 1.35rem/1 var(--display);font-variant-numeric:tabular-nums}
.zone .z-pace small{display:block;font:600 12.5px/1.3 'Inter';color:var(--muted);margin-top:4px}
.zone p{margin:0;color:var(--muted);font-size:14.5px}
@media(max-width:700px){.zone{grid-template-columns:minmax(0,1fr) auto}.zone p{grid-column:1/-1}}
.zone-dot{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:8px;vertical-align:-1px}
.pace-figure{margin:6px 0 18px;position:relative}
.pace-chart{display:block;width:100%;height:auto;font-family:'Inter',sans-serif}
.pace-figure figcaption{color:var(--muted);font-size:13.5px;margin-top:4px}
.pc-band{fill:#f3ece7}
.pc-band-label{font-size:12px;font-weight:700;fill:var(--muted)}
.pc-grid{stroke:#ece3dc;stroke-width:1}
.pc-tick,.pc-axis{font-size:12px;fill:var(--muted)}
.pc-label{font-size:14px;font-weight:700;fill:var(--ink)}
.pc-value{font-size:13px;font-weight:700;fill:var(--ink)}
.pc-hit{fill:transparent}
.pc-row:hover .pc-hit{fill:rgba(23,18,26,.03)}
.pc-dot{fill:var(--pink);stroke:#fff;stroke-width:2}
.pc-range{stroke:#fff;stroke-width:2}
.pc-tip{position:absolute;z-index:3;pointer-events:none;background:var(--ink);color:#fff;font-size:13px;font-weight:600;padding:7px 10px;border-radius:8px;white-space:nowrap;box-shadow:0 8px 20px rgba(23,18,26,.25)}
.csb-tool-cards .csb-card .el-iconbox-icon{background:var(--ink)}
@media(max-width:860px){.tool-grid{grid-template-columns:minmax(0,1fr)}.tool-card{padding:22px}}
@media(max-width:560px){.tool-out{padding:22px}.tool-table{font-size:14px}.tool-table td,.tool-table th{padding:8px 6px}.pc-label{font-size:16px}}
@media (prefers-reduced-motion:reduce){
*{transition:none!important;scroll-behavior:auto!important}
.csb-tide svg,.csb-tide .tide-2,.hero-trace .tr-line,.hero-trace .tr-mark,.csb-lanes .runner,.csb-lanes .bob,.csb-watch .hand,.csb-watch .ring,.csb-watch .pulse,.logo-track{animation:none!important}
.logo-track{width:auto}.logo-set{flex-wrap:wrap;gap:20px 40px;padding:0}.logo-set[aria-hidden]{display:none}.logo-marquee{-webkit-mask-image:none;mask-image:none}
.csb-watch .ring{stroke-dashoffset:0}
.hero-trace .tr-line{stroke-dashoffset:0}.hero-trace .tr-mark{opacity:1}.hero-trace .tr-comet,.hero-trace .tr-runner{display:none}
}
/* Phones: the builder paddings (80 to 140px) are desktop values and pile up
between stacked sections. Inline styles, hence the attribute selectors. */
@media(max-width:760px){
.el-section:is([style*="padding:80px"],[style*="padding:90px"],[style*="padding:96px"],[style*="padding:100px"],[style*="padding:110px"]){padding-top:56px!important}
.el-section:is([style*="px 80px 0px"],[style*="px 90px 0px"],[style*="px 100px 0px"],[style*="px 110px 0px"]){padding-bottom:56px!important}
.csb-page-hero{padding-top:84px!important;padding-bottom:64px!important}
.csb-hero{padding-top:120px!important;padding-bottom:56px!important}
.el-section>.el-row{row-gap:22px}
}
/* Agenda (/agenda): month blocks, one card per date. Club life has the
gradient date, club races the ink one. csb-ui.js sets is-past / is-next,
the filter chips (data-ag-filter) and reveals the .ics button. */
.ag-weekly{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;background:#fff;border-radius:var(--radius);padding:20px 24px;margin:0 0 46px;box-shadow:0 1px 0 var(--line),0 12px 34px rgba(23,18,26,.06)}
.ag-weekly p{flex:1 1 320px;margin:0!important;color:var(--muted)}
.ag-weekly strong{color:var(--ink)}
.ag-weekly-badge{font:700 11.5px/1 'Inter';letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--pink);border-radius:999px;padding:8px 12px}
.ag-weekly a{font-weight:800;color:var(--pink)}
.ag-weekly a:after{content:" \2192"}
.ag-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin:0 0 30px}
.ag-filters{display:flex;flex-wrap:wrap;gap:8px}
.ag-chip,.route-chip,.tool-chip{font:700 14px/1 'Inter';border:0;cursor:pointer;border-radius:999px;padding:12px 18px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line);transition:background .2s,color .2s,box-shadow .2s}
.ag-chip:hover,.route-chip:hover,.tool-chip:hover{box-shadow:inset 0 0 0 2px var(--pink)}
.ag-chip[aria-pressed="true"],.route-chip[aria-pressed="true"],.tool-chip[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.ag-actions{display:flex;flex-wrap:wrap;gap:10px}
.ag-propose{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;font-size:14.5px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.ag-propose:hover{box-shadow:inset 0 0 0 2px var(--pink)}
.ag-ics{border:0;cursor:pointer;font-family:inherit;min-height:46px;padding:0 22px;font-size:14.5px}
.ag-month{display:grid;grid-template-columns:170px minmax(0,1fr);gap:0 28px;padding:26px 0;border-top:1px solid var(--line)}
.ag-month:first-of-type{border-top:0;padding-top:0}
.ag-month[hidden]{display:none}
.ag-month-h{font:800 italic 2.3rem/1 var(--display);text-transform:uppercase;margin:6px 0 0!important}
.ag-month-h small{display:block;font:700 13px/1.4 'Inter';font-style:normal;letter-spacing:.12em;color:var(--muted);margin-top:6px}
.ag-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ag-item{display:flex;gap:18px;align-items:flex-start;background:#fff;border-radius:var(--radius);padding:18px 20px;box-shadow:0 1px 0 var(--line),0 12px 34px rgba(23,18,26,.06);transition:transform .25s,opacity .25s}
.ag-item:hover{transform:translateY(-3px)}
.ag-item[hidden]{display:none}
.ag-date{flex:0 0 72px;height:76px;border-radius:14px;background:var(--grad);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:skewX(-6deg)}
.ag-date>*{transform:skewX(6deg)}
.ag-date b{font:800 italic 1.75rem/1 var(--display)}
.ag-date span{font:800 italic 1rem/1.1 var(--display);text-transform:uppercase}
.ag-race .ag-date{background:var(--ink)}
.ag-body{min-width:0;flex:1}
.ag-tag{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:700 11.5px/1.3 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--orange-text);margin-bottom:4px}
.ag-race .ag-tag{color:var(--pink)}
.ag-region .ag-date{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.ag-region .ag-date b,.ag-region .ag-date span{color:var(--ink)}
.ag-region .ag-tag{color:var(--muted)}
.ag-link{display:inline-block;margin-top:10px;color:var(--pink);font-weight:700;font-size:14.5px}
.ag-link:hover{text-decoration:underline}
.ag-flag{font-style:normal;letter-spacing:.06em;border-radius:999px;padding:3px 8px;display:none}
.ag-item.is-next .ag-flag{display:inline-block;background:var(--grad);color:#fff}
.ag-item.is-next .ag-flag:before{content:"À venir"}
.ag-item.is-past{opacity:.55}
.ag-item.is-past .ag-flag{display:inline-block;background:var(--sand);color:var(--muted)}
.ag-item.is-past .ag-flag:before{content:"Passé"}
.ag-item h3{font:800 italic 1.5rem/1.05 var(--display);text-transform:uppercase;margin:0 0 4px}
.ag-when,.ag-place{color:var(--muted);font-size:14.5px;margin:0!important}
.ag-place{margin:2px 0 10px!important}
.ag-note{color:var(--muted);font-size:15px;margin:34px 0 0!important}
.ag-note a{color:var(--pink);font-weight:700}
@media(max-width:760px){
.ag-month{grid-template-columns:minmax(0,1fr);gap:14px}
.ag-month-h{font-size:1.9rem;display:flex;align-items:baseline;gap:10px}
.ag-month-h small{display:inline;margin:0}
.ag-item{padding:16px;gap:14px}
.ag-date{flex-basis:62px;height:68px}
.ag-date b{font-size:1.5rem}
.ag-item h3{font-size:1.3rem}
.ag-bar{flex-direction:column;align-items:stretch}
.ag-actions>*{flex:1 1 auto;justify-content:center}
.ag-filters{flex-wrap:nowrap;gap:6px}
.ag-chip{flex:1 1 auto;white-space:nowrap;padding:12px 10px;font-size:13.5px}
}
/* ── Pace band (/outils/bracelet-allure, islands/csb-tools.js) ──────────
Sizes in mm: the printed strip must be true to size. Two bands per sheet
(one spare), dashed cut lines. Ink on white apart from the header. */
.tool-grid-band{grid-template-columns:minmax(0,1fr) auto}
.band-print{border:0;cursor:pointer;font-family:inherit}
.band-print[disabled]{opacity:.5;cursor:default}
.band-how{list-style:decimal;margin:0;padding-left:20px!important;color:var(--muted);font-size:14.5px;display:grid;gap:6px}
.tool-sponsor{display:inline-flex;align-items:center;gap:12px;margin:0 0 22px!important;padding:8px 18px 8px 16px;border-radius:999px;background:#fff;box-shadow:0 1px 0 var(--line),0 8px 22px rgba(23,18,26,.06);font-weight:700;font-size:14px;color:var(--muted)}
.tool-sponsor img{height:26px;width:auto}
.band-stage{background:var(--cream);border-radius:16px;padding:26px;display:grid;place-items:start center;overflow-x:auto}
.band-sheet{display:flex;gap:10mm;align-items:flex-start}
.band-stage .band+.band{display:none}
.band-stage .band{zoom:1.3}
.band{width:34mm;flex:0 0 34mm;background:#fff;color:#000;outline:1px dashed #8a8188;outline-offset:1.5mm;font-family:'Inter',system-ui,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.band-head{display:flex;align-items:center;gap:2mm;min-height:17mm;padding:2mm;background:var(--grad);color:#fff}
.band-head img{width:9mm;height:9mm;border-radius:50%;background:#fff;flex:0 0 auto}
.band-head div{min-width:0}
.band-head strong{display:block;font:800 italic 10.5pt/1 var(--display);text-transform:uppercase;overflow-wrap:anywhere}
.band-head span{display:block;font-size:6.6pt;font-weight:700;line-height:1.25}
.band-cols{display:flex;justify-content:space-between;height:5mm;align-items:center;padding:0 2.5mm;background:#17121a;color:#fff;font-size:6.5pt;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.band-rows{list-style:none;margin:0!important;padding:0!important;font-variant-numeric:tabular-nums}
.band-rows li{display:flex;justify-content:space-between;align-items:center;height:var(--row);padding:0 2.5mm;font-size:var(--fs);line-height:1;border-bottom:.2mm solid #d9d2cc}
.band-rows li:nth-child(even){background:#f3eeea}
.band-rows span{font-weight:600}
.band-rows b{font-weight:800}
.band-rows li.is-5{border-bottom:.5mm solid #17121a}
.band-rows li.is-finish{background:#17121a;color:#fff;border:0;gap:1.5mm}
.band-rows li.is-finish span{font-size:.8em;letter-spacing:.02em}
.band-foot{height:14mm;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1mm;font-size:6pt;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#4a434c}
.band-foot img{height:6.5mm;width:auto}
.band-foot b{font-size:9pt;color:#000;letter-spacing:0;text-transform:none}
.csb-print{display:none}
@media(max-width:860px){.tool-grid-band{grid-template-columns:minmax(0,1fr)}}
@media print{
@page{size:A4 portrait;margin:10mm}
body.csb-printing>*:not(.csb-print){display:none!important}
body.csb-printing>.csb-print{display:block}
.csb-print .band-sheet{justify-content:center;padding-top:3mm}
}
/* ── Routes (/outils/parcours, islands/csb-parcours.js) ─────────────── */
.route-card{background:#fff;border-radius:var(--radius);padding:30px;margin:0 0 26px;box-shadow:0 1px 0 var(--line),0 12px 34px rgba(23,18,26,.06)}
.route-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px 28px;margin-bottom:20px}
.route-top>div{flex:1 1 380px;min-width:0}
.route-kind{display:inline-block;font:700 11.5px/1 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--pink);background:#fdebef;border-radius:999px;padding:7px 11px;margin-bottom:10px}
.route-card h2{font:800 italic 2.1rem/1 var(--display);text-transform:uppercase;margin:0 0 8px}
.route-card p{color:var(--muted);margin:0}
.route-facts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.route-facts div{background:var(--cream);border-radius:12px;padding:12px 16px;min-width:108px}
.route-facts b{display:block;font:800 italic 1.6rem/1 var(--display)}
.route-facts span{font-size:13px;color:var(--muted)}
.route-dl{flex:0 0 auto;min-height:48px;padding:0 22px;font-size:14.5px}
.route-actions{flex:0 0 auto!important;display:flex;flex-direction:column;gap:10px}
.route-actions .route-dl{width:100%}
.csb-route{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.csb-route:not(.is-ready) .tool-nojs{display:block}
/* Leaflet map (self-hosted in /vendor/leaflet). isolation keeps Leaflet's
own z-indexes (up to 1000) under the sticky header. */
.route-map{position:relative;isolation:isolate;height:380px;overflow:hidden;border-radius:14px;background:#eee8e2;font-family:'Inter',sans-serif}
.route-map .leaflet-tile-pane{filter:saturate(.75)}
.route-map img{max-width:none}
.route-map .leaflet-bar{border:0;border-radius:10px;overflow:hidden;box-shadow:0 4px 14px rgba(23,18,26,.2)}
.route-map .leaflet-bar a,.route-ctl{width:34px;height:34px;line-height:34px;color:var(--ink);font-weight:700}
.route-ctl{display:grid;place-items:center;padding:0;border:0;background:#fff;cursor:pointer}
.route-ctl:hover{background:#f4f4f4}
.route-km-ico{display:grid!important;place-items:center;text-align:center;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--ink);font:700 11px/1 'Inter',sans-serif;color:var(--ink);cursor:pointer;transition:background .15s,color .15s}
.route-km-ico:hover,.route-km-ico.is-sel{background:var(--ink);color:#fff}
.route-km-ico.is-sel{box-shadow:0 0 0 2px #fff,0 0 0 5px var(--pink)}
.route-pop .leaflet-popup-content-wrapper{border-radius:10px;box-shadow:0 8px 22px rgba(23,18,26,.25)}
.route-pop .leaflet-popup-content{margin:9px 13px;font:600 13px/1.3 'Inter',sans-serif;color:var(--ink);white-space:nowrap}
/* Kilometre buttons on the profile. */
.rc-km{cursor:pointer;outline:none}
.rc-km-hit{fill:transparent}
.rc-km-dot{fill:#fff;stroke:var(--ink);stroke-width:2;transition:fill .15s}
.rc-km text{font:700 10px/1 'Inter',sans-serif;fill:var(--ink);pointer-events:none}
.rc-km:hover .rc-km-dot,.rc-km:focus-visible .rc-km-dot,.rc-km.is-sel .rc-km-dot{fill:var(--ink)}
.rc-km:hover text,.rc-km:focus-visible text,.rc-km.is-sel text{fill:#fff}
.rc-km.is-sel .rc-km-dot{stroke:var(--pink);stroke-width:3}
/* Full page view of one route (map control with the four corners). */
.route-fullbar{display:none}
html.csb-noscroll{overflow:hidden}
html.csb-noscroll .scroll-top,.csb-route.is-full .route-touch{display:none}
.csb-route.is-full{position:fixed;inset:0;z-index:300;background:#fff;padding:16px 20px 12px;display:flex;flex-direction:column;gap:12px}
.csb-route.is-full .route-fullbar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.route-fullbar strong{font:800 italic 1.7rem/1 var(--display);text-transform:uppercase}
.csb-route.is-full.is-following{gap:8px;padding-top:10px}
.csb-route.is-following .route-fullbar strong{font-size:1.25rem}
.route-live{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:12px;background:#eef4ff;color:#174ea6}
.route-live.is-off{background:#fde8ee;color:#a30f33}
.route-live[hidden],.route-live [hidden],.csb-route:not(.is-full) .route-live{display:none}
.route-live-arrow{flex:0 0 34px;height:34px;border-radius:50%;background:currentColor;display:grid;place-items:center}
.route-live-arrow svg{color:#fff}
.route-live-text{flex:1 1 auto;min-width:0;margin:0!important;display:flex;flex-direction:column;gap:2px}
.route-live-arrow svg{width:20px;height:20px}
.route-live-text b{font-size:15px;line-height:1.2}
.route-live-text small{font-size:12px;line-height:1.3;font-weight:600;opacity:.85}
.route-live button{flex:0 0 auto;border:0;cursor:pointer;font:700 12.5px/1 'Inter',sans-serif;min-height:34px;padding:0 12px;border-radius:999px;background:#fff;color:inherit}
.route-live .route-live-voice{width:34px;padding:0;display:grid;place-items:center}
.route-live-voice[aria-pressed="true"] .rv-off,.route-live-voice[aria-pressed="false"] .rv-on{display:none}
.route-live-voice[aria-pressed="false"]{opacity:.65}
.route-run{display:none}
.csb-route.is-full.is-following .route-run{display:flex;flex-direction:column;gap:10px;flex:0 0 auto}
.csb-route.is-full.is-following .route-profile{display:none}
.route-run-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.route-run-stats div{background:var(--cream,#fff7f1);border-radius:12px;padding:10px 8px;text-align:center;display:flex;flex-direction:column;gap:2px}
.route-run-stats b{font:800 italic 1.7rem/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.route-run-stats span{font-size:12px;color:var(--muted)}
.route-run-actions{display:flex;gap:10px}
.route-run-actions .btn{flex:1 1 0;min-height:52px;border:0;cursor:pointer;font-family:inherit}
.route-run-actions .btn[hidden]{display:none}
.route-extra-toggle{align-self:center;border:0;background:none;cursor:pointer;font:700 13.5px/1 'Inter',sans-serif;color:var(--muted);padding:6px 10px;display:inline-flex;align-items:center;gap:6px}
.route-extra-toggle::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.route-extra-toggle[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}
.route-extra{display:flex;flex-direction:column;gap:10px}
.route-extra[hidden]{display:none}
.route-extra-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.route-extra-facts div{background:#f4f1f5;border-radius:12px;padding:8px;text-align:center;display:flex;flex-direction:column;gap:2px}
.route-extra-facts b{font:800 italic 1.25rem/1 var(--display);color:var(--ink)}
.route-extra-facts span{font-size:12px;color:var(--muted)}
.route-extra-laps h3{font:700 12px/1 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:2px 0 8px}
.route-extra-laps ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;max-height:132px;overflow-y:auto}
.route-extra-laps li{display:grid;grid-template-columns:52px 1fr 48px;align-items:center;gap:10px;font-size:13.5px;color:var(--ink)}
.route-extra-laps li span{font-weight:600;color:var(--muted)}
.route-extra-laps li i{height:8px;border-radius:99px;background:#f4f1f5;overflow:hidden}
.route-extra-laps li u{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--orange,#e16414),var(--pink,#cc1541))}
.route-extra-laps li b{text-align:right;font-variant-numeric:tabular-nums}
.route-extra-laps p{margin:0!important;font-size:13px;color:var(--muted)}
.route-extra-laps p[hidden]{display:none}
.route-extra-prefs{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;font-weight:600;color:var(--ink)}
.route-extra-prefs label{display:inline-flex;align-items:center;gap:8px;min-height:32px;cursor:pointer}
.route-extra-prefs input{width:18px;height:18px;accent-color:var(--pink)}
.csb-route.is-full.is-following.has-more .route-profile{display:block}
.csb-route.is-full.is-following{overflow-y:auto}
.csb-route.is-full.is-following .route-map{min-height:220px}
.route-band{display:none}
.csb-route.is-full.is-following .route-band{display:flex;align-items:center;justify-content:center;gap:10px;flex:0 0 auto;margin:0 -20px -12px;padding:8px 20px calc(8px + env(safe-area-inset-bottom));background:#213242;color:#fff;line-height:1;transition:background .2s}
.csb-route.is-full.is-following .route-band:hover{background:#2b4257}
.route-band span{font:600 10.5px/1 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.65}
.route-band img{height:18px;width:auto;display:block;filter:brightness(0) invert(1)}
.route-band b{font:600 13px/1 'Inter',sans-serif;letter-spacing:.01em}
@media(min-width:761px){.csb-route.is-full.is-following .route-run{width:100%;max-width:560px;align-self:center}.csb-route.is-full.is-following .route-band{gap:12px;padding-top:10px;padding-bottom:10px}.route-band img{height:20px}.route-band b{font-size:13.5px}}
.route-me b{position:absolute;inset:2px;border-radius:50%;background:#1a73e8;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.route-me i{display:none;position:absolute;left:50%;top:50%;width:0;height:0;margin:-34px 0 0 -16px;border-left:16px solid transparent;border-right:16px solid transparent;border-top:34px solid rgba(26,115,232,.38);transform-origin:16px 34px}
.route-me.has-heading i{display:block}
.csb-route.is-full.is-following .leaflet-container::after{display:none}
button.route-dl{border:0;cursor:pointer;font-family:inherit}
button.route-dl[hidden]{display:none}
.route-close{flex:0 0 auto;border:0;cursor:pointer;width:40px;height:40px;padding:0;border-radius:50%;background:#f4f1f5;color:var(--ink);display:grid;place-items:center}
.route-close:hover{background:#e9e4eb}
.csb-route.is-full .route-map{flex:1 1 auto;height:auto;min-height:0}
.csb-route.is-full .route-profile{flex:0 0 auto}
.route-touch{font-size:13px;color:var(--muted);margin:-6px 0 0}
.route-bar{display:flex;flex-wrap:wrap;gap:14px 34px;margin:30px 0 26px}
.route-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.route-group>span{font:700 12px/1 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.route-card[hidden]{display:none}
.route-empty{background:#fff;border-radius:var(--radius);padding:26px 30px;color:var(--muted);margin:0 0 26px!important}
.route-credit{position:absolute;display:block;padding:3px 6px;border-radius:6px;background:rgba(255,255,255,.82);opacity:.5;transition:opacity .2s}
.route-credit:hover{opacity:1}
.route-credit img{display:block;height:14px;width:auto}
/* Webdesign29's mark on every map of the site, bottom left, the way map makers sign theirs. */
.leaflet-container::after{content:"";position:absolute;left:10px;bottom:10px;z-index:500;width:104px;height:30px;padding:6px 10px;box-sizing:border-box;border-radius:8px;background:rgba(255,255,255,.86) url(/media/partenaires/webdesign29.svg) center/contain no-repeat content-box;box-shadow:0 1px 4px rgba(23,18,26,.18);opacity:.9;pointer-events:none}
.route-profile{position:relative}
.route-chart{display:block;width:100%;height:auto;font-family:'Inter',sans-serif;touch-action:pan-y}
.rc-grid{stroke:#ece3dc;stroke-width:1}
.rc-tick{font-size:12px;fill:var(--muted)}
.rc-area{fill:var(--pink);opacity:.12}
.rc-line{fill:none;stroke:var(--pink);stroke-width:2;stroke-linejoin:round}
.rc-cross{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
.rc-dot{fill:var(--pink);stroke:#fff;stroke-width:2}
.route-profile .pc-tip{z-index:4}
.route-legend{font-size:13.5px;color:var(--muted);margin:0!important}
.route-add{color:var(--muted);font-size:15px;margin:8px 0 0!important}
.route-add a{color:var(--pink);font-weight:700}
@media(max-width:760px){.route-card{padding:20px}.route-actions{flex:1 1 100%!important}.route-dl{width:100%}.route-map{height:280px}}
/* ── Partner band above the footer, on every page ────────────────────── */
.csb-footer-partners{border-top:1px solid var(--line)}
.strip-cta{margin:16px 0 0!important}
.strip-join{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 8px;border-radius:999px;background:var(--cream);font-weight:800;font-size:14px;color:var(--ink);white-space:nowrap;transition:background .2s,color .2s}
.strip-join:before{content:"+";width:32px;height:32px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font:800 1.3rem/1 var(--display)}
.strip-join:hover{background:#fdebef;color:var(--pink)}
#devenir-partenaire{position:relative;top:-110px}
@media print{.csb-footer-partners{display:none}}
/* ── Tools hub (/outils): clickable cards with a small button, category chips
(csb-ui.js). The grid fills the row, so more tools just add cards. ────── */
.tool-filters{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 24px}
.tool-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.tool-item{display:flex;flex-direction:column;align-items:flex-start;background:#fff;border-radius:var(--radius);padding:26px 24px 24px;box-shadow:0 1px 0 var(--line),0 12px 34px rgba(23,18,26,.06);transition:transform .25s,box-shadow .25s}
.tool-item[hidden]{display:none}
.tool-item:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.tool-ico{width:52px;height:52px;border-radius:15px;background:var(--grad);color:#fff;display:grid;place-items:center;transform:skewX(-8deg);margin-bottom:16px}
.tool-ico svg{transform:skewX(8deg)}
.tool-cat{font:700 11px/1 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--orange-text);margin-bottom:8px}
.tool-item h3{font:800 italic 1.6rem/1.02 var(--display);text-transform:uppercase;margin:0 0 8px}
.tool-item p{color:var(--muted);font-size:15px;margin:0 0 20px}
.tool-go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 15px;border-radius:999px;background:var(--ink);color:#fff;font-weight:800;font-size:13px;transition:background .2s}
.tool-go:after{content:"\2192"}
.tool-item:hover .tool-go{background:var(--pink)}
/* Card visual: a small preview of what the tool gives (markup in the page, spans only). */
.tool-item{overflow:hidden}
.tool-visual{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;align-self:stretch;height:156px;margin:-26px -24px 20px;background:linear-gradient(135deg,#fff4ea,#ffe9ef);overflow:hidden}
.tool-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tool-item:hover .tool-visual img{transform:scale(1.05)}
.tool-visual svg{position:absolute;inset:0;width:100%;height:100%}
.tv-big{position:relative;font:800 italic 3.1rem/1 var(--display);color:var(--ink)}
.tv-big small{font-size:1.15rem;margin-left:5px;color:var(--orange-text)}
.tv-sub{font:700 11px/1 'Inter';letter-spacing:.1em;text-transform:uppercase;color:var(--orange-text)}
.tv-row{display:flex;gap:6px}
.tv-row i{font:600 11px/1 'Inter';font-style:normal;color:var(--muted);background:#fff;border-radius:999px;padding:6px 9px;white-space:nowrap}
.tv-row b{color:var(--ink);margin-left:5px}
.tv-seuil{align-items:stretch;gap:11px;padding:0 24px}
.tv-zone{display:grid;grid-template-columns:72px minmax(0,1fr) 40px;align-items:center;gap:9px;font:600 11.5px/1 'Inter';color:var(--muted)}
.tv-zone u{display:block;height:11px;border-radius:999px;background:var(--grad);text-decoration:none}
.tv-zone b{font:800 italic 1.15rem/1 var(--display);color:var(--ink);text-align:right}
.tv-zone.z1 u{width:48%;opacity:.4}
.tv-zone.z2{color:var(--ink);font-weight:800}
.tv-zone.z2 u{width:74%}
.tv-zone.z3 u{width:100%;opacity:.4}
.tv-band{display:flex;width:90%;flex:0 0 auto;transform:rotate(-5deg);background:#fff;border-radius:10px;box-shadow:0 10px 22px rgba(23,18,26,.16);overflow:hidden}
.tv-band i{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 0;font-style:normal;border-left:1px dashed #e6dcd6}
.tv-band em{font:700 9.5px/1 'Inter';font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tv-band b{font:800 italic 1.05rem/1 var(--display);color:var(--ink)}
.tv-band i:first-child{flex:1.25;border-left:0;background:var(--grad)}
.tv-band i:first-child em,.tv-band i:first-child b{color:#fff}
.tv-piste .tv-big{font-size:2.3rem}
.tv-piste .tv-sub{position:relative}
/* ── Menu icons. Keyed on the link target, so the menu stays editable in
/manage/menus: an entry without a known target simply has no icon.
Drawn as a mask filled with the text colour (hover and current page follow).
The link is an inline-flex with a 6px gap (kernel): no extra margin, the
icon must read as part of its label, not float between two entries. */
.csb-header .el-nav-link:is([href="/le-club"],[href="/brest-arkea-running-tour"],[href="/partenaires"],[href="/blog"],[href="/nos-sorties"],[href="/agenda"],[href="/outils"],[href="/adhesion"],[href="/contact"])::before{content:"";display:inline-block;flex:0 0 auto;width:17px;height:17px;margin-right:0;vertical-align:-3px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.csb-header .el-nav-link[href="/le-club"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6'/%3E%3Cpath d='M16 4.8a3.5 3.5 0 0 1 0 6.4M18 14.5c2.1.8 3.5 2.7 3.5 5.5'/%3E%3C/svg%3E")}
.csb-header .el-nav-sub .el-nav-link[href="/le-club"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5C10 5 7 4.5 3 5v13.5c4-.5 7 0 9 1.5 2-1.5 5-2 9-1.5V5c-4-.5-7 0-9 1.5z'/%3E%3Cpath d='M12 6.5V20'/%3E%3C/svg%3E")}
.csb-header .el-nav-link[href="/brest-arkea-running-tour"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4.5c5-2.5 8 2.5 14 0v9c-6 2.5-9-2.5-14 0'/%3E%3C/svg%3E")}
.csb-header .el-nav-link[href="/partenaires"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-8-4.9-8-11A4.5 4.5 0 0 1 12 7a4.5 4.5 0 0 1 8 2.5c0 6.1-8 11-8 11z'/%3E%3C/svg%3E")}
.csb-header .el-nav-link[href="/blog"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5h12.5V18a2 2 0 0 0 2 2H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M16.5 9H20v9a2 2 0 0 1-1.5 2M7.5 8.5h5.5M7.5 12h5.5M7.5 15.5h5.5'/%3E%3C/svg%3E")}
.csb-header .el-nav-link[href="/nos-sorties"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18.5' r='2.5'/%3E%3Ccircle cx='18' cy='4.5' r='2.5'/%3E%3Cpath d='M8.5 18.5H15a3.5 3.5 0 0 0 0-7H9a3.5 3.5 0 0 1 0-7h6.5'/%3E%3C/svg%3E")}
.csb-header .el-nav-link[href="/agenda"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.csb-header .el-nav-link[href="/outils"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13.5' r='7.5'/%3E%3Cpath d='M12 9.5v4l2.5 2M9.5 2.5h5M12 2.5V6'/%3E%3C/svg%3E")}
.csb-header .el-nav-link[href="/adhesion"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='3.5'/%3E%3Cpath d='M3 20c0-3.6 3.1-6 7-6 1.3 0 2.5.3 3.5.7M18 14v6M15 17h6'/%3E%3C/svg%3E")}
.csb-header .el-nav-link[href="/contact"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E")}
/* Tight desktop widths: six entries plus icons do not fit on one line. */
@media(max-width:1240px) and (min-width:981px){.csb-header .el-nav-list>.el-nav-item>.el-nav-link::before{display:none}}
@media(max-width:980px){.nav-open .el-nav-link::before{width:19px!important;height:19px!important;margin-right:9px!important}.nav-open .el-nav-link{display:flex!important;align-items:center;gap:0}html.js .nav-open .el-nav-item.el-nav-has-sub>.el-nav-link>.el-nav-txt{margin-right:auto}}
/* Tools hub heading row: text and the small animated stopwatch side by side,
on phones too. */
.csb-chrono .el-row{align-items:center}
.csb-chrono .csb-watch{width:132px;margin:0 0 0 auto}
@media(max-width:760px){
.csb-chrono>.el-row{flex-wrap:nowrap!important;gap:14px!important}
.csb-chrono>.el-row>.el-col{min-width:0!important;max-width:none!important}
.csb-chrono>.el-row>.el-col:first-child{flex:1 1 auto!important}
.csb-chrono>.el-row>.el-col:last-child{flex:0 0 78px!important}
.csb-chrono .csb-watch{width:78px}
.csb-chrono{padding-bottom:0!important}
}
/* ── Blog (/blog, /blog/): articles written in /manage/posts ───────── */
.blog-wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.blog-narrow{max-width:820px}
.blog-hero{background:var(--ink);color:#fff;padding:96px 0 70px;position:relative;overflow:hidden}
.blog-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--grad)}
.blog-hero-title{font:800 italic clamp(2.6rem,6.4vw,4.6rem)/.96 var(--display);text-transform:uppercase;letter-spacing:-.005em;margin:0 0 16px;color:#fff}
.blog-hero-post .blog-hero-title{font-size:clamp(2.1rem,4.8vw,3.4rem);line-height:1;text-wrap:balance}
.blog-hero-lead{color:#e9dfe6;font-size:18px;margin:0}
.blog-back{display:inline-flex;align-items:center;gap:8px;color:#ffd9c2;font:700 13px/1.3 'Inter';letter-spacing:.14em;text-transform:uppercase;margin-bottom:22px}
.blog-back:before{content:"";width:9px;height:9px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.blog-back:hover{color:#fff}
.blog-date{display:block;font:700 12.5px/1.3 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--orange-text)}
.blog-date.light{color:#ffd9c2}
.blog-list{background:var(--cream);padding:70px 0 90px}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:28px}
.blog-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 0 var(--line),0 12px 34px rgba(23,18,26,.06);transition:transform .25s,box-shadow .25s}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.blog-card-media{display:block;aspect-ratio:16/9;background:var(--grad);overflow:hidden}
.blog-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card-ph{display:block;width:100%;height:100%;background:url(/media/logo.webp) center/84px no-repeat;opacity:.9}
.blog-card-body{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px}
.blog-card-title{font:800 italic 1.65rem/1.04 var(--display);text-transform:uppercase;margin:10px 0 10px}
.blog-card-title a{color:var(--ink)}
.blog-card-title a:hover{color:var(--pink)}
.blog-card-ex{color:var(--muted);font-size:15.5px;margin:0 0 18px;flex:1}
.blog-more{align-self:flex-start;color:var(--pink);font-weight:700}
.blog-more:hover{text-decoration:underline}
.blog-empty{background:#fff;border-radius:var(--radius);padding:30px 34px;color:var(--muted);font-size:17px;margin:0;max-width:760px}
.blog-pager{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:46px}
.blog-pager a{color:var(--pink);font-weight:700}
.blog-pager-pos{color:var(--muted);font-size:14.5px}
.blog-cover{display:block;width:100%;height:auto;border-radius:var(--radius);margin:-34px 0 0;position:relative;box-shadow:var(--shadow)}
.blog-prose{padding:54px 0 80px;font-size:18px;line-height:1.72;color:#3b333d}
.blog-prose>:first-child{margin-top:0}
.blog-prose p{margin:0 0 1.15em}
.blog-prose h2{font:800 italic 2rem/1.02 var(--display);text-transform:uppercase;color:var(--ink);margin:1.7em 0 .5em}
.blog-prose h3{font:800 italic 1.5rem/1.05 var(--display);text-transform:uppercase;color:var(--ink);margin:1.5em 0 .45em}
.blog-prose a{color:var(--pink);font-weight:600;text-decoration:underline}
.blog-prose ul,.blog-prose ol{margin:0 0 1.15em;padding-left:1.3em}
.blog-prose ul{list-style:disc}
.blog-prose ol{list-style:decimal}
.blog-prose li::marker{color:var(--orange)}
.blog-prose li{margin:0 0 .4em}
.blog-prose img{max-width:100%;height:auto;border-radius:14px}
.blog-prose figure{margin:1.6em 0}
.blog-prose figcaption{color:var(--muted);font-size:14.5px;margin-top:8px}
.blog-prose blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:4px solid var(--orange);font-size:1.12em;color:var(--ink)}
.blog-built{padding-bottom:30px}
.blog-more-list{padding-top:60px}
.blog-more-title{font:800 italic 2.2rem/1 var(--display);text-transform:uppercase;margin:0 0 26px}
@media(max-width:700px){
.blog-hero{padding:70px 0 50px}
.blog-list{padding:44px 0 60px}
.blog-grid{grid-template-columns:1fr}
.blog-prose{font-size:17px;padding:38px 0 56px}
.blog-cover{margin-top:-22px}
}
/* ── Partner pages (/partenaires/) ─────────────────────────────────── */
.csb-partner-logo{background:#fff;border-radius:var(--radius);padding:38px 34px;box-shadow:0 1px 0 var(--line),0 12px 34px rgba(23,18,26,.06);display:grid;place-items:center;min-height:190px}
.csb-partner-logo .el-image{width:100%;margin:0}
.csb-partner-logo img{display:block;width:100%!important;height:112px!important;max-width:320px!important;margin:0 auto;object-fit:contain;border-radius:0!important}
.csb-partner-facts{margin-top:22px}
.csb-partner-page h3.el-heading{font-size:1.7rem}
@media(min-width:981px){.csb-partner-page>.el-row>.el-col:first-child{position:sticky;top:110px}}
.csb-crumbs .el-breadcrumbs{font-size:14.5px}
.csb-crumbs .el-breadcrumbs-link{color:var(--pink);font-weight:600}
.csb-crumbs .el-breadcrumbs-item{color:var(--muted)}
.csb-crumbs .el-breadcrumbs-current{color:var(--ink)}
.csb-btn-back .el-btn{background:transparent!important;color:var(--ink)!important;box-shadow:inset 0 0 0 2px var(--line);padding:11px 18px!important;font-size:14.5px}
.csb-btn-back .el-btn:before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;border-left:2px solid var(--pink);border-bottom:2px solid var(--pink);transform:rotate(45deg);vertical-align:1px}
.csb-btn-back .el-btn:hover{box-shadow:inset 0 0 0 2px var(--pink)}
/* Partner services carousel (kernel nested carousel holding csb-card widgets). */
.csb-carousel .el-carousel-track{padding:8px 4px 34px;align-items:stretch;background:none}
.csb-carousel .el-carousel-slide{display:flex}
.csb-carousel .el-carousel-slide>.el-widget{width:100%;height:auto}
.csb-carousel .el-car-prev,.csb-carousel .el-car-next{top:calc(50% - 16px)}
.csb-carousel .el-car-prev{left:-26px}
.csb-carousel .el-car-next{right:-26px}
@media(max-width:1280px){.csb-carousel .el-car-prev{left:-8px}.csb-carousel .el-car-next{right:-8px}}
@media(max-width:760px){.csb-carousel .el-car-prev,.csb-carousel .el-car-next{display:none}}
/* Home "Plus qu'un club": one photo at a time beside the text, arrows inside the picture. */
.csb-carousel-solo .el-carousel-slide img{height:460px}
.csb-carousel-solo .el-carousel-track{padding-bottom:26px}
.csb-carousel.csb-carousel-solo .el-car-prev{left:14px}
.csb-carousel.csb-carousel-solo .el-car-next{right:14px}
@media(min-width:981px){.el-col:last-child>.csb-carousel-solo,.el-col:last-child>.csb-carousel-solo+.el-widget{margin-left:36px}}
@media(max-width:980px){.csb-carousel-solo{margin-top:34px}.csb-carousel-solo .el-carousel-slide img{height:380px}}
@media(max-width:760px){.csb-carousel-solo .el-carousel-slide img{height:280px}}
#proposer-une-course{scroll-margin-top:110px}
/* Form confirmation (revealed by csb-ui.js after a successful send). */
.el-fw-ok{margin:0;padding:22px 24px;border-radius:14px;background:#eef8f0;color:#1d5a30;font-weight:600;font-size:16.5px;line-height:1.55}
.el-fw.is-sent .el-fw-fields,.el-fw.is-sent .el-fw-actions{display:none}
/* Agenda calendar view (built by csb-ui.js from the list items). */
.ag-views{display:inline-flex;background:#fff;border-radius:999px;padding:4px;box-shadow:inset 0 0 0 2px var(--line)}
.ag-view{font:700 14px/1 'Inter';border:0;cursor:pointer;border-radius:999px;padding:10px 16px;background:transparent;color:var(--ink)}
.ag-view[aria-pressed="true"]{background:var(--ink);color:#fff}
.ag-view{display:inline-flex;align-items:center;gap:8px}
/* Filter menu: csb-ui.js wraps the chips of the page in a button + panel. */
.ag-filter{position:relative}
.ag-filter-btn{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 18px;border:0;cursor:pointer;border-radius:999px;background:#fff;color:var(--ink);font:700 14.5px/1 'Inter';box-shadow:inset 0 0 0 2px var(--line);transition:box-shadow .2s}
.ag-filter-btn:hover,.ag-filter-btn[aria-expanded="true"]{box-shadow:inset 0 0 0 2px var(--pink)}
.ag-filter-btn.is-on{background:var(--ink);color:#fff;box-shadow:none}
.ag-filter-caret{transition:transform .2s}
.ag-filter-btn[aria-expanded="true"] .ag-filter-caret{transform:rotate(180deg)}
.ag-filter-panel{position:absolute;z-index:20;top:calc(100% + 8px);left:0;min-width:250px;display:flex!important;flex-direction:column;flex-wrap:nowrap!important;gap:2px!important;padding:8px;background:#fff;border-radius:16px;box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.ag-filter-panel[hidden]{display:none!important}
.ag-filter-panel .ag-chip{flex:0 0 auto!important;display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;border-radius:10px;padding:13px 14px;background:transparent;color:var(--ink);box-shadow:none;white-space:nowrap}
.ag-filter-panel .ag-chip:hover{background:var(--cream);box-shadow:none}
.ag-filter-panel .ag-chip[aria-pressed="true"]{background:var(--cream);color:var(--ink)}
.ag-filter-panel .ag-chip[aria-pressed="true"]:after{content:"";width:7px;height:12px;border-right:2.5px solid var(--pink);border-bottom:2.5px solid var(--pink);transform:rotate(45deg) translateY(-2px);flex:0 0 auto}
/* Until the script has built the menu, the bare chips stay out of sight (no jump). */
.js .ag-bar>.ag-filters{display:none}
.agenda.is-cal .ag-month{display:none}
.ag-filter-h{font:700 11px/1 'Inter';letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:10px 14px 6px}
.ag-filter-h:not(:first-child){margin-top:6px;border-top:1px solid var(--line);padding-top:14px}
/* Map view (Leaflet, markers drawn by csb-ui.js). */
.ag-map{height:520px;border-radius:14px;overflow:hidden;background:var(--sand);z-index:0}
.ag-pin{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--orange);color:#fff;font:800 italic 15px/1 var(--display);box-shadow:0 0 0 3px #fff,0 6px 14px rgba(23,18,26,.3);cursor:pointer;transition:transform .15s}
.ag-pin:hover{transform:scale(1.12)}
.ag-pin-club{background:var(--pink)}
.ag-pin.is-past{background:#9d939b}
.ag-pin.is-sel{background:var(--ink);transform:scale(1.18)}
.ag-cal-legend .ag-pin-leg{display:inline-block;width:14px;height:14px;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line);cursor:default;transform:none}
@media(max-width:760px){.ag-map{height:380px}.ag-map .ag-pin{width:26px;height:26px;margin:4px;font-size:12.5px;box-shadow:0 0 0 2px #fff,0 4px 10px rgba(23,18,26,.3)}}
.ag-cal[hidden]{display:none}
.ag-cal{background:#fff;border-radius:var(--radius);padding:26px 26px 30px;box-shadow:0 1px 0 var(--line),0 12px 34px rgba(23,18,26,.06)}
.ag-cal-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.ag-cal-title{font:800 italic 2.1rem/1 var(--display);text-transform:uppercase;margin:0!important;text-align:center}
.ag-cal-title small{font:700 13px/1 'Inter';font-style:normal;letter-spacing:.12em;color:var(--muted);margin-left:8px}
.ag-cal-prev,.ag-cal-next{width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:var(--cream);color:var(--ink);font-size:26px;line-height:1;display:grid;place-items:center;padding:0 0 3px}
.ag-cal-prev:hover,.ag-cal-next:hover{background:var(--ink);color:#fff}
.ag-cal-prev:disabled,.ag-cal-next:disabled{opacity:.3;cursor:default;background:var(--cream);color:var(--ink)}
.ag-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.ag-cal-wd{font:700 11.5px/1 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;padding:6px 0 8px}
.ag-day{min-height:96px;border-radius:12px;background:var(--sand);padding:8px;display:flex;flex-direction:column;gap:6px;text-align:left;border:0;font:inherit;color:var(--ink);min-width:0}
.ag-day.is-out{background:transparent}
.ag-day.has-ev{background:#fff;box-shadow:inset 0 0 0 2px var(--line);cursor:pointer;transition:box-shadow .2s}
.ag-day.has-ev:hover{box-shadow:inset 0 0 0 2px var(--pink)}
.ag-day.is-sel{box-shadow:inset 0 0 0 3px var(--pink)}
.ag-day.is-past{opacity:.55}
.ag-day-n{font:800 italic 1.15rem/1 var(--display)}
.ag-day.is-today .ag-day-n{align-self:flex-start;background:var(--grad);color:#fff;border-radius:999px;padding:4px 9px 5px}
.ag-day-evs{display:flex;flex-direction:column;gap:4px;min-width:0}
.ag-pill{display:block;font:700 11px/1.25 'Inter';border-radius:6px;padding:4px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-pill-club{background:var(--grad);color:#fff}
.ag-pill-race{background:var(--ink);color:#fff}
.ag-pill-region{background:var(--cream);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.ag-cal-legend{list-style:none;margin:20px 0 0!important;padding:0 2px!important;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px;color:var(--muted)}
.ag-cal-legend li{display:inline-flex;align-items:center;gap:8px}
.ag-cal-legend .ag-pill{display:inline-block;width:22px;height:12px;padding:0;border-radius:4px;flex:0 0 auto}
.ag-leg-today{display:inline-block;font:800 italic 13px/1 var(--display);color:#fff;border-radius:999px;padding:3px 7px 4px;background:var(--grad);flex:0 0 auto}
.ag-cal-day{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.ag-cal-day-h{font:800 italic 1.5rem/1 var(--display);text-transform:uppercase;margin:0 0 14px!important}
.ag-cal-day .ag-item{box-shadow:inset 0 0 0 2px var(--line)}
.ag-cal-day .ag-item.is-past{opacity:1}
.ag-cal-hint{color:var(--muted);margin:0!important}
@media(max-width:760px){
.ag-views{align-self:stretch}.ag-view{flex:1;justify-content:center}
.ag-filter-btn{width:100%;justify-content:space-between}
.ag-filter-panel{right:0;min-width:0}
.ag-cal{padding:18px 12px 22px}
.ag-cal-grid{gap:3px}
.ag-day{min-height:54px;padding:6px 4px;align-items:center;gap:5px}
.ag-day-n{font-size:1rem}
.ag-day-evs{flex-direction:row;justify-content:center;flex-wrap:wrap;gap:3px}
.ag-pill{width:8px;height:8px;padding:0;border-radius:50%;font-size:0;flex:0 0 auto}
.ag-pill-region{background:#b3a8b0;box-shadow:none}
.ag-cal-legend .ag-pill{width:10px;height:10px;border-radius:50%}
.ag-filters{flex-wrap:wrap!important}
.ag-filters .ag-chip{flex:1 1 calc(50% - 6px)}
.ag-cal-title{font-size:1.6rem}
}
/* Quiet sponsor credit above the agenda (list and calendar views). */
.ag-sponsor{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:-14px 0 22px!important;font:600 12.5px/1 'Inter';letter-spacing:.04em;color:var(--muted)}
.ag-sponsor a{display:inline-flex;opacity:.7;filter:grayscale(1);transition:opacity .2s,filter .2s}
.ag-sponsor a:hover{opacity:1;filter:none}
.ag-sponsor img{height:18px;width:auto;display:block}
@media(max-width:760px){.ag-sponsor{justify-content:center;margin:-6px 0 20px!important}}
/* Latest articles on the home page (kernel posts-grid, same look as /blog cards). */
.csb-posts .el-postsgrid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:28px!important}
.csb-posts .el-pg-card{display:flex;flex-direction:column;background:#fff;border:0!important;border-radius:var(--radius)!important;overflow:hidden;box-shadow:0 1px 0 var(--line),0 12px 34px rgba(23,18,26,.06);transition:transform .25s,box-shadow .25s}
.csb-posts .el-pg-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.csb-posts .el-pg-media{display:block;aspect-ratio:16/9;background:var(--grad) center/cover no-repeat;overflow:hidden}
.csb-posts .el-pg-media img{width:100%;height:100%;object-fit:cover;display:block}
.csb-posts .el-pg-body{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px}
.csb-posts .el-pg-meta{font:700 12.5px/1.3 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--orange-text);margin:0 0 10px}
.csb-posts .el-pg-author,.csb-posts .el-pg-author-link,.csb-posts .el-pg-cat,.csb-posts .el-pg-sep{display:none!important}
.csb-posts .el-pg-title{font:800 italic 1.65rem/1.04 var(--display);text-transform:uppercase;margin:0 0 10px}
.csb-posts .el-pg-title a{color:var(--ink)}
.csb-posts .el-pg-title a:hover{color:var(--pink)}
.csb-posts .el-pg-excerpt{color:var(--muted);font-size:15.5px;margin:0 0 18px;flex:1}
.csb-posts .el-pg-more-link{align-self:flex-start;color:var(--pink);font-weight:700}
.csb-posts .el-pg-more-link:hover{text-decoration:underline}
.csb-posts .el-pg-empty{color:var(--muted)}
/* "Ajouter à mon agenda" menu (reuses the filter panel look). */
.ag-export .ag-filter-panel{left:auto;right:0;min-width:300px}
.ag-export-row{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;text-align:left;border:0;cursor:pointer;border-radius:10px;padding:11px 14px;background:transparent;color:var(--ink);font:inherit}
.ag-export-row:hover{background:var(--cream)}
.ag-export-row strong{font:700 14.5px/1.2 'Inter'}
.ag-export-row small{font-size:12.5px;line-height:1.3;color:var(--muted)}
@media(max-width:760px){.ag-export{flex:1 1 100%}.ag-export .ag-ics{width:100%}.ag-export .ag-filter-panel{left:0;min-width:0}}
/* "Proposer une course": two columns, the race name and the message on a full row. */
.csb-form-course .el-fw-field:has([name="course"]),.csb-form-course .el-fw-field:has(textarea){grid-column:1 / -1}
.csb-form-course textarea{min-height:110px}
.csb-form-course .el-fw-actions{margin-top:6px}
/* Reset next to the filter button (shown only while a filter is on). */
.ag-filter{display:inline-flex;align-items:center;gap:8px}
.ag-reset{display:inline-flex;align-items:center;gap:7px;min-height:46px;padding:0 14px;border:0;cursor:pointer;border-radius:999px;background:transparent;color:var(--pink);font:700 14px/1 'Inter'}
.ag-reset:hover{background:#fdebef}
.ag-reset[hidden]{display:none}
@media(max-width:760px){.ag-filter{display:flex}.ag-filter .ag-filter-btn{flex:1 1 auto;width:auto}}
/* Route list toolbar: one dropdown per filter group, reset, count, list / map toggle. */
.js .csb-routes .route-bar{display:none}
.route-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:34px;align-items:start;margin:30px 0 26px}
.route-side{position:sticky;top:104px;max-height:calc(100vh - 124px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;background:#fff;border-radius:var(--radius);padding:22px 22px 18px;box-shadow:0 1px 0 var(--line),0 12px 34px rgba(23,18,26,.06)}
.route-side-title{font:800 italic 1.5rem/1 var(--display);text-transform:uppercase;margin:0 0 18px!important;color:var(--ink)}
.route-filter{display:flex;flex-direction:column;gap:12px}
.route-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 22px}
.route-top .route-side-toggle{display:none}
.route-top .route-views{flex:0 0 auto;width:auto;margin-left:auto}
.route-side-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--pink);color:#fff;font:700 12px/1 'Inter'}
.route-side-badge[hidden]{display:none}
.route-range{padding:2px 2px 8px}
.route-range-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.route-range-head span{font:700 11.5px/1 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.route-range-head b{font:700 14.5px/1 'Inter';color:var(--ink)}
.route-range.is-on .route-range-head b{color:var(--pink)}
.route-range-track{position:relative;height:28px}
.route-range-track:before{content:"";position:absolute;left:0;right:0;top:11px;height:6px;border-radius:6px;background:var(--line)}
.route-range-track i{position:absolute;top:11px;height:6px;border-radius:6px;background:var(--pink)}
.route-range-track input{position:absolute;left:0;top:0;width:100%;height:28px;margin:0;padding:0;background:transparent;border:0;box-shadow:none;pointer-events:none;appearance:none;-webkit-appearance:none;z-index:2}
.route-range-track input::-webkit-slider-runnable-track{background:transparent;height:28px}
.route-range-track input::-moz-range-track{background:transparent;height:28px}
.route-range-track input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:26px;height:26px;margin-top:1px;border-radius:50%;background:#fff;border:0;box-shadow:inset 0 0 0 7px var(--ink),0 2px 6px rgba(23,18,26,.25);cursor:grab}
.route-range-track input::-moz-range-thumb{pointer-events:auto;width:26px;height:26px;border-radius:50%;background:#fff;border:0;box-shadow:inset 0 0 0 7px var(--ink),0 2px 6px rgba(23,18,26,.25);cursor:grab}
.route-range-track input:focus-visible{outline:0}
.route-range-track input:focus-visible::-webkit-slider-thumb{box-shadow:inset 0 0 0 7px var(--pink),0 0 0 4px rgba(214,31,80,.2)}
.route-range-ends{display:flex;justify-content:space-between;font:600 12px/1 'Inter';color:var(--muted);margin-top:4px}
.route-side .ag-reset{align-self:flex-start;margin-left:-6px}
.route-filter>*+*{border-top:1px solid var(--line);padding-top:16px}
.route-filter{gap:16px}
.route-filter>.ag-reset{border-top:0;padding-top:0;margin-top:-6px}
.route-checks{border:0;margin:0;padding:0;min-width:0}
.route-checks legend{padding:0;margin:0 0 8px;font:700 11.5px/1 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--muted);float:left;width:100%}
.route-checks-list{clear:both;display:flex;flex-direction:column;margin:0 -8px;padding:0 0 2px}
.route-check{display:flex;align-items:center;gap:11px;padding:7px 8px;border-radius:10px;cursor:pointer;font:600 14.5px/1.25 'Inter';color:var(--ink)}
.route-check:hover{background:var(--cream)}
.route-check input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:21px;height:21px;margin:0;padding:0;border:0;border-radius:6px;background:#fff center/14px no-repeat;box-shadow:inset 0 0 0 2px #cfc4cc;cursor:pointer;transition:background-color .15s,box-shadow .15s}
.route-check input:checked{background-color:var(--ink);box-shadow:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.route-check input:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--pink),0 0 0 4px rgba(214,31,80,.2)}
.route-check span{flex:1 1 auto;min-width:0}
.route-check[hidden]{display:none}
.route-adv{display:flex;flex-direction:column;gap:16px;border-top:0!important;padding-top:0!important}
.route-adv[hidden]{display:none}
.route-adv>*+*{border-top:1px solid var(--line);padding-top:16px}
.route-more-btn{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:0 14px 0 16px;border:0;border-radius:999px;background:var(--cream);color:var(--ink);font:700 14px/1 'Inter';cursor:pointer;border-top:0!important}
.route-more-btn:hover{box-shadow:inset 0 0 0 2px var(--pink)}
.route-more-btn span{flex:1 1 auto;text-align:left}
.route-more-btn[aria-expanded="true"] .ag-filter-caret{transform:rotate(180deg)}
.route-find{display:block;width:100%;height:40px;margin:0 0 8px;padding:0 14px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 2px var(--line);font:500 14px/1 'Inter';color:var(--ink);outline:0;clear:both}
.route-find:focus{box-shadow:inset 0 0 0 2px var(--pink)}
.route-checks.has-find .route-checks-list{max-height:218px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;display:flex!important;flex-direction:column}
.route-find-none{margin:6px 0 0!important;font:500 13.5px/1.3 'Inter';color:var(--muted)}
.route-find-none[hidden]{display:none}
.route-check em{font:600 12.5px/1 'Inter';font-style:normal;color:var(--muted)}
.route-main .rcard-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
@media(max-width:940px){
.route-layout{grid-template-columns:1fr;gap:0}
.route-side{position:static;max-height:none;overflow:visible;display:none;margin-bottom:18px;order:2}
.route-layout.is-open .route-side{display:block}
.route-main{display:contents}
.route-top{order:1;margin-bottom:16px}.route-main>:not(.route-top){order:3}
.route-top .route-side-toggle{display:inline-flex}
.route-top .route-views{flex:1 1 100%;margin-left:0;display:flex}.route-top .route-views .ag-view{flex:1;justify-content:center}
.route-layout.is-open .route-side-toggle{box-shadow:inset 0 0 0 2px var(--pink)}
.route-side-title{display:none}
.route-checks-list{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
}
.route-dd{position:relative;display:inline-flex}
.route-dd-btn{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 14px 0 18px;border:0;border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 2px var(--line);transition:box-shadow .2s,background .2s,color .2s}
.route-dd-btn:hover,.route-dd-btn[aria-expanded="true"]{box-shadow:inset 0 0 0 2px var(--pink)}
.route-dd-cap{font:700 11.5px/1 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.route-dd-val{font:700 14.5px/1 'Inter'}
.route-dd-btn.is-on{background:var(--ink);color:#fff;box-shadow:none}
.route-dd-btn.is-on .route-dd-cap{color:#cfc4cc}
.route-dd-btn[aria-expanded="true"] .ag-filter-caret{transform:rotate(180deg)}
.route-ov-fail{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:100%;margin:0;color:var(--muted);text-align:center;padding:20px}
.route-count{font:600 14px/1 'Inter';color:var(--muted);margin-left:4px}
.route-views{margin-left:auto}
.rcard-grid[hidden],.route-ov[hidden]{display:none}
.route-ov{background:#fff;border-radius:var(--radius);padding:22px 22px 26px;box-shadow:0 1px 0 var(--line),0 12px 34px rgba(23,18,26,.06)}
.route-ov-map{height:540px}
.route-ov-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px}
.route-ov-foot .ag-cal-legend{margin-bottom:0}
.route-ov-foot .route-ov-sponsor{margin:14px 0 0!important}
.route-ov-sel{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.rcard-row{flex-direction:row!important;height:auto;box-shadow:inset 0 0 0 2px var(--line)!important}
.rcard-row .rcard-media{flex:0 0 300px;aspect-ratio:auto;min-height:170px}
.rcard-row:hover{transform:none}
@media(max-width:760px){
.route-count{order:3;flex:1 1 100%;margin-left:2px}
.route-ov{padding:12px 12px 18px}.route-ov-map{height:400px}
.rcard-row{flex-direction:column!important}.rcard-row .rcard-media{flex:0 0 auto;aspect-ratio:16/9;min-height:0}
}
/* ── Route cards (list, home carousel, "other routes") and route pages ────── */
.rcard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.rcard{display:flex;flex-direction:column;background:#fff;color:var(--ink);border-radius:var(--radius);overflow:hidden;padding:0!important;margin:0!important;box-shadow:0 1px 0 var(--line),0 12px 34px rgba(23,18,26,.06);transition:transform .25s,box-shadow .25s;height:100%}
.rcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.rcard[hidden]{display:none}
.rcard-media{display:block;aspect-ratio:16/9;background:linear-gradient(135deg,#fff4ea,#ffe9ef);color:var(--pink);overflow:hidden;position:relative}
.rcard-article .rcard-media{background:var(--grad)}
.rcard-media img{width:100%;height:100%;object-fit:cover;display:block}
.rcard-ph{display:block;width:100%;height:100%;background:url(/media/logo.webp) center/84px no-repeat;opacity:.9}
.rcard-trace{display:block;width:100%;height:100%}
.rcard-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.rcard-kind{font:700 11.5px/1.3 'Inter';letter-spacing:.12em;text-transform:uppercase;color:var(--orange-text);margin-bottom:8px}
.rcard-title{font:800 italic 1.6rem/1.04 var(--display);text-transform:uppercase;margin-bottom:10px}
.rcard:hover .rcard-title{color:var(--pink)}
.rcard-text{color:var(--muted);font-size:15px;line-height:1.5;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rcard-facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}
.rcard-facts b{font:800 italic 1.05rem/1 var(--display);background:var(--cream);border-radius:999px;padding:8px 12px}
.rcard-facts span{font-size:13.5px;color:var(--muted)}
.rcard-more{margin-top:auto;color:var(--pink);font-weight:700;font-size:15px}
.rcard-more:after{content:" \2192"}
/* Home: two carousels side by side, news (two cards in view) and routes (one). */
.csb-mix{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:34px;align-items:start}
.csb-mix.is-one{grid-template-columns:minmax(0,1fr)}
.csb-mix-col{min-width:0}
.csb-mix-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:0 0 14px!important;padding:0 4px}
.csb-mix-h span{font:800 italic 1.5rem/1 var(--display);text-transform:uppercase}
.csb-mix-h a{font:700 14px/1 'Inter';color:var(--pink)}
.csb-mix-h a:hover{text-decoration:underline}
.csb-mix .el-carousel-slide{display:flex}
.csb-mix .el-carousel-slide>.rcard{width:100%}
.csb-mix .csb-carousel .el-car-prev{left:-14px}
.csb-mix .csb-carousel .el-car-next{right:-14px}
.csb-mix .csb-carousel .el-car-prev,.csb-mix .csb-carousel .el-car-next{top:112px;width:40px;height:40px;font-size:22px}
.rcard-media img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none}
/* A single article (for now): shown wide, picture beside the text, same height as the route card. */
@media(min-width:981px){
.csb-mix-news.is-single .rcard{flex-direction:row;min-height:380px}
.csb-mix-news.is-single .rcard-media{flex:0 0 52%;aspect-ratio:auto}
.csb-mix-news.is-single .rcard-body{justify-content:center;padding:30px 32px}
.csb-mix-news.is-single .rcard-title{font-size:2.1rem}
.csb-mix-news.is-single .rcard-text{font-size:16.5px;-webkit-line-clamp:5}
.csb-mix-news.is-single .rcard-more{margin-top:8px}
}
@media(max-width:980px){.csb-mix{grid-template-columns:minmax(0,1fr);gap:40px}}
/* News and routes cards share one height: each column stretches down to its card. */
@media(min-width:981px){
.csb-mix{align-items:stretch}
.csb-mix-col,.csb-mix-car{display:flex;flex-direction:column}
.csb-mix-car,.csb-mix-car .el-carousel-stage{flex:1 1 auto}
.csb-mix-car .el-carousel-stage{display:flex}
.csb-mix-car .el-carousel-track{flex:1 1 auto;min-width:0}
/* A lone article has no dots under it: leave the room the routes dots take. */
.csb-mix-news.is-single .csb-mix-car{padding-bottom:27px}
}
/* Route page */
.route-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:600 13.5px/1.3 'Inter';color:#cfc4cc;margin-bottom:20px}
.route-crumbs a{color:#ffd9c2}
.route-crumbs a:hover{color:#fff}
.route-crumbs b{color:#fff;font-weight:600}
.route-page{background:var(--cream);padding:56px 0 30px}
.route-page .route-card{margin-bottom:20px}
.route-lead{font-size:18px;color:var(--muted);margin:0}
.route-backline{margin:26px 0 0}
.route-back{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line);min-height:46px;padding:0 20px;font-size:14.5px}
.route-back:before{content:"";display:inline-block;width:8px;height:8px;margin-right:10px;border-left:2px solid var(--pink);border-bottom:2px solid var(--pink);transform:rotate(45deg)}
.route-back:hover{box-shadow:inset 0 0 0 2px var(--pink)}
.route-more{background:var(--cream);padding:40px 0 90px}
@media(max-width:700px){.rcard-grid{grid-template-columns:1fr}.route-page{padding:36px 0 20px}.route-more{padding:30px 0 60px}}
/* ── /outils/pistes: running tracks and their lap length ── */
.track-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:0 0 22px}
.track-chips{display:flex;flex-wrap:wrap;gap:8px}
.track-chip i{font-style:normal;font-weight:600;opacity:.6;margin-left:4px}
.track-bar .track-find{flex:0 1 330px;margin:0;height:46px}
.track-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.track{display:grid;grid-template-columns:118px minmax(0,1.5fr) minmax(0,1fr) auto;align-items:center;gap:8px 26px;background:#fff;border-radius:var(--radius);padding:16px 24px 16px 16px;box-shadow:0 1px 0 var(--line),0 8px 24px rgba(23,18,26,.05)}
.track[hidden]{display:none}
.track-lap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:86px;border-radius:14px;background:var(--cream);color:var(--ink)}
.track-lap b{font:800 italic 2.3rem/1 var(--display)}
.track-lap span{font:600 11.5px/1 'Inter';letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:5px}
/* The standard 400 m lap is the dark one; shorter laps stay light. */
.track:not(.is-short) .track-lap{background:var(--ink);color:#fff}
.track:not(.is-short) .track-lap span{color:#cfc4cc}
.track.is-flash{box-shadow:0 0 0 2px var(--ink),0 8px 24px rgba(23,18,26,.12)}
.track-ov{margin:0 0 22px}
.track-ov-map{height:440px}
.track-ov-map .leaflet-tile-pane{filter:saturate(.75)}
.track-pin{width:42px;height:42px;font-size:14px}
.track-pin-400{background:var(--ink)}
.track-pin.is-sel{background:var(--pink)}
@media(max-width:760px){.track-ov-map{height:340px}.ag-map .track-pin{width:34px;height:34px;margin:0;font-size:12px}}
.track-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.track-place{font:700 11.5px/1 'Inter';letter-spacing:.12em;text-transform:uppercase;color:#b0470f}
.track-name{font:700 17px/1.25 'Inter';color:var(--ink)}
.track-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px}
.track-tags em{font:600 12.5px/1 'Inter';font-style:normal;color:var(--muted);background:var(--cream);border-radius:999px;padding:6px 10px}
.track-conv{margin:0;display:flex;flex-direction:column;gap:6px}
.track-conv div{display:flex;align-items:baseline;gap:10px}
.track-conv dt{flex:0 0 62px;font:600 12.5px/1.2 'Inter';color:var(--muted)}
.track-conv dd{margin:0;font:700 14.5px/1.2 'Inter';color:var(--ink)}
.track-conv .track-std{flex-direction:column;gap:4px}.track-conv .track-std dt{flex:0 0 auto}.track-conv .track-std dd{font-weight:600;color:var(--muted)}
.track-map{font:700 14px/1 'Inter';color:var(--pink);white-space:nowrap}
.track-map:hover{text-decoration:underline}
@media(max-width:900px){
.track{grid-template-columns:92px minmax(0,1fr);padding:14px}
.track-lap{min-height:78px}.track-lap b{font-size:1.9rem}
.track-conv{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:6px 22px;padding-top:10px;border-top:1px solid var(--line)}
.track-conv dt{flex:0 0 auto}
.track-map{grid-column:1/-1}
.track-bar .track-find{flex:1 1 100%}
}
/* ── Workout builder (/outils/seance, islands/csb-seance.js). Every field has
its label above it; a field left empty turns red (is-bad). ────────────── */
.sx-tool{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start}
.sx{display:grid;gap:18px}
.sx-top{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:18px;align-items:end}
.sx-lab{display:block;font-weight:700;font-size:14px;margin:0 0 9px!important}
.sx-list-lab{margin:6px 0 -6px!important}
.sx-vma-note{margin:-6px 0 0}
.sx-vma-note a,.sx-how .tool-note a{color:var(--pink);font-weight:700}
.sx-list{display:grid;gap:12px}
.sx-step{position:relative;display:grid;gap:14px;background:#fff;border-radius:16px;padding:16px 16px 16px 28px;box-shadow:inset 0 0 0 1.5px #e3d8d2}
.sx-bar{position:absolute;left:10px;top:14px;bottom:14px;width:7px;border-radius:999px;background:var(--pink)}
.sx-step[data-type="warmup"] .sx-bar{background:#f0a35e}
.sx-step[data-type="recover"] .sx-bar{background:#9d939b}
.sx-step[data-type="rest"] .sx-bar{background:#cfc4cc}
.sx-step[data-type="cooldown"] .sx-bar{background:var(--ink)}
.sx-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sx-sum{font:800 italic 1.35rem/1.1 var(--display);text-transform:uppercase;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.sx-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);gap:12px}
.sx-f{display:grid;gap:6px;align-content:start;min-width:0}
.sx-f>span:first-child{font-weight:700;font-size:13px;color:#4b434d}
.sx select,.sx-num input{min-width:0;width:100%;font:inherit;font-size:16px;font-weight:600;height:48px;padding:0 12px;border-radius:11px;border:1.5px solid #cbbfc4;background:#fff;color:var(--ink)}
.sx select{cursor:pointer}
.sx select:hover,.sx-num input:hover{border-color:#a3959c}
.sx select:focus,.sx-num input:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px rgba(204,21,65,.14)}
.sx-num input.is-bad{border-color:var(--pink);background:#fff1f4}
.sx-num input::placeholder{color:#b6aab0;font-weight:500}
.sx-num{position:relative;display:block}
.sx-num em{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-style:normal;font-size:13px;font-weight:600;color:var(--muted);pointer-events:none}
.sx-num input{-moz-appearance:textfield;appearance:textfield;padding-right:44px;text-align:right}
.sx-num input::-webkit-outer-spin-button,.sx-num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sx-clock{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.sx-clock .sx-num:last-child input{padding-right:28px}
.sx-lap{margin:0!important;min-height:48px;display:flex;align-items:center;font-size:14px;line-height:1.35;color:var(--muted)}
.sx-pace{display:grid;gap:12px;padding-top:12px;border-top:1px dashed #e3d8d2}
.sx-pace-fields{display:grid;grid-template-columns:minmax(0,220px) minmax(0,130px);gap:12px}
.sx-hint{margin:0!important;font-size:13.5px;color:var(--muted)}
.sx-check{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:14.5px;cursor:pointer;justify-self:start}
.sx-check input{width:20px;height:20px;accent-color:var(--pink)}
.sx-acts{display:inline-flex;gap:5px;flex:0 0 auto}
.sx-acts button{width:36px;height:36px;border-radius:10px;border:0;background:#fff;color:var(--ink);font-size:16px;font-weight:700;cursor:pointer;box-shadow:inset 0 0 0 1.5px #cbbfc4}
.sx-acts button:hover{color:var(--pink);box-shadow:inset 0 0 0 1.5px var(--pink)}
.sx-rep{display:grid;gap:10px;background:var(--cream);border:2px dashed #d9c9bf;border-radius:20px;padding:14px}
.sx-rep-head{display:flex;align-items:center;gap:12px}
.sx-rep-head .sx-acts{margin-left:auto}
.sx-rep-lab{font:800 italic 1.35rem/1 var(--display);text-transform:uppercase}
.sx-times{width:124px}
.sx-times input{font:800 italic 1.5rem/1 var(--display);padding-right:52px}
.sx-add{justify-self:start;border:0;background:none;color:var(--pink);font:700 14.5px/1 'Inter';padding:8px 4px;cursor:pointer}
.sx-add:hover{text-decoration:underline}
.sx-adds{display:flex;flex-wrap:wrap;gap:10px}
.sx-adds .btn{min-height:48px;padding:0 20px;font-size:14.5px}
.sx-out{position:sticky;top:110px}
.sx-title{font:800 italic 2.2rem/1 var(--display);text-transform:uppercase;margin:0 0 18px;overflow-wrap:anywhere}
.sx-chart{display:flex;align-items:flex-end;gap:3px;height:110px;margin:0 0 18px}
.sx-chart i{min-width:3px;border-radius:5px 5px 2px 2px}
.sx-chart i[title="Retour au calme"]{background:#fff!important;opacity:.85}
.sx-go{display:grid;gap:10px;margin-top:6px}
.sx-go .btn{width:100%}
.sx-go .btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.sx-done{margin:14px 0 0!important;font-size:14.5px;color:#fff;background:rgba(255,255,255,.1);border-radius:12px;padding:12px 14px}
.sx-how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;margin-top:22px}
.sx-steps{list-style:disc;margin:0 0 14px!important;padding-left:22px!important;display:grid;gap:9px;color:var(--ink);font-size:15.5px}
@media(max-width:1100px){.sx-tool{grid-template-columns:minmax(0,1fr)}.sx-out{position:relative;top:auto}}
@media(max-width:760px){
.sx-top,.sx-how{grid-template-columns:minmax(0,1fr)}
.sx-fields{grid-template-columns:minmax(0,1fr)}
.sx-pace-fields{grid-template-columns:minmax(0,1fr) 120px}
.sx-step{padding:14px 14px 14px 26px}
.sx-sum{font-size:1.2rem}
.sx-adds .btn{width:100%}
}
ol.sx-steps{list-style:decimal}
.sx-steps li::marker{color:var(--pink);font-weight:800}
.tv-bars{display:flex;align-items:flex-end;gap:4px;height:92px;width:78%}
.tv-bars i{flex:1;height:100%;border-radius:5px 5px 2px 2px;background:var(--pink)}
.tv-bars i.r{flex:.35;height:26%;background:#9d939b}
.tv-bars i.w{height:46%;background:#f0a35e}
.tv-bars i.c{height:40%;background:var(--ink)}
.sx-watch{display:grid;gap:7px;margin:4px 0 12px}
.sx-watch>span{font:700 12.5px/1 'Inter';letter-spacing:.14em;text-transform:uppercase;color:#ffd9c2}
.sx-watch select{width:100%;height:50px;font:inherit;font-size:16px;font-weight:700;padding:0 14px;border-radius:12px;border:0;background:#fff;color:var(--ink);cursor:pointer}
.sx-watch select:focus{outline:3px solid rgba(255,255,255,.5)}
.sx-watch-note{margin:0 0 14px!important}
.sx-done{white-space:pre-line}
/* The Garmin how-to only shows for a watch that takes the file. */
html[data-csb-watch="coros"] .sx-how-garmin,html[data-csb-watch="suunto"] .sx-how-garmin,html[data-csb-watch="polar"] .sx-how-garmin,html[data-csb-watch="apple"] .sx-how-garmin{display:none}
html[data-csb-watch="coros"] .sx-how,html[data-csb-watch="suunto"] .sx-how,html[data-csb-watch="polar"] .sx-how,html[data-csb-watch="apple"] .sx-how{grid-template-columns:minmax(0,1fr)}
/* Sponsor credit in the dark panel: the logo is dark, shown here in white. */
.sx-out .sx-sponsor{justify-content:flex-end;margin:18px 0 0!important;color:#cfc4cc}
.sx-out .sx-sponsor a{opacity:.85;filter:brightness(0) invert(1)}
.sx-out .sx-sponsor a:hover{opacity:1;filter:brightness(0) invert(1)}
.sx-out .sx-sponsor img{height:20px}
/* Steps: one line of fields, the pace on the same line as its tick box, with room to breathe. */
.sx-list{gap:14px}
.sx-step{gap:14px;padding:16px 16px 16px 30px;border-radius:16px}
.sx-bar{left:11px;top:14px;bottom:14px;width:7px}
.sx-sum{font-size:1.22rem}
.sx-acts button{width:34px;height:34px;font-size:15px;border-radius:10px}
.sx-step select,.sx-step .sx-num input{height:44px;font-size:15.5px;border-radius:11px}
.sx-fields{gap:12px}
.sx-f{gap:6px}
.sx-f>span:first-child{font-size:12.5px}
.sx-lap{min-height:44px;font-size:13.5px}
.sx-pace{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-top:14px}
.sx-check{font-size:14.5px}
.sx-check input{width:19px;height:19px}
.sx-pace-fields{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.sx-pace-fields .sx-f{display:flex;align-items:center;gap:8px}
.sx-pace-fields .sx-clock{width:190px}
.sx-pace .sx-clock .sx-num:last-child input{padding-right:50px}
.sx-tol .sx-num{width:92px}
.sx-rep{gap:12px;padding:16px;border-radius:20px}
.sx-rep-lab{font-size:1.22rem}
.sx-rep .sx-times input{height:44px;font-size:1.35rem}
.sx-add{padding:6px 4px}
.sx-adds{margin-top:6px}
@media(max-width:760px){
.sx-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sx-val{grid-column:1/-1}
.sx-step{padding:14px 14px 14px 26px}
.sx-rep{padding:12px}
.sx-pace-fields .sx-clock{width:170px}
}
.sx .chip.is-on{background:var(--ink);color:#fff;box-shadow:none}
.sx-go2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:10px}
.sx-go2 .btn{min-height:46px;padding:0 10px;font-size:14px}
/* Top of the builder: name and an "Exemples" button; the examples and the VMA fold away. */
.sx-top{grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}
.sx-ex-btn{min-height:52px;padding:0 20px;font-size:14.5px;gap:8px}
.sx-ex-btn:after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.sx-ex-btn[aria-expanded="true"]{box-shadow:inset 0 0 0 2px var(--ink)}
.sx-ex-btn[aria-expanded="true"]:after{transform:translateY(2px) rotate(-135deg)}
.sx-ex{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:center;background:var(--cream);border-radius:14px;padding:14px}
.sx-ex[hidden]{display:none}
.sx-ex .sx-vma{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;margin:0}
.sx-ex .sx-vma .sx-num{width:118px}
.sx-ex .sx-vma input{height:40px;font-size:15px;padding-right:48px}
.sx-ex .sx-vma-note{grid-column:1/-1;margin:0!important;font-size:13.5px}
/* Session panel: figures on one line, shorter chart, small secondary buttons. */
.sx-title{margin-bottom:6px}
.sx-figs{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0 0 14px!important;font-size:14.5px;color:#e9dfe6}
.sx-figs b{color:#fff}
.sx-figs i{font-style:normal;opacity:.5}
.sx-chart{height:84px;margin-bottom:16px}
.sx-go2{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
.sx-go2 .btn{min-height:44px;font-size:13.5px}
@media(max-width:760px){.sx-top{grid-template-columns:minmax(0,1fr) auto}.sx-ex{grid-template-columns:minmax(0,1fr)}.sx-ex-btn{width:auto}}
/* Buttons are