/* Betsite UI — exemples de sites (maquettes) */
.ex-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.ex-filter{all:unset;cursor:pointer;padding:11px 18px;border-radius:999px;border:1px solid var(--bs-mist);background:#fff;font-family:var(--bs-head);font-weight:600;font-size:15px;color:var(--bs-slate);transition:background-color .2s,color .2s,border-color .2s}
.ex-filter:hover{border-color:var(--bs-ink);color:var(--bs-ink)}
.ex-filter[aria-pressed="true"]{background:var(--bs-ink);border-color:var(--bs-ink);color:#fff}
.ex-filter:focus-visible{outline:3px solid var(--bs-signal);outline-offset:2px}
.ex-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:44px 32px}
.ex-card{margin:0}
.ex-card[hidden]{display:none}
.ex-card figcaption{padding:18px 4px 0}
.ex-card__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.ex-card h3{font-size:20px;margin:0}
.ex-card__cat{font-size:14px;color:var(--bs-slate)}
.ex-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px}
.ex-card__tags span{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:#fff;border:1px solid var(--bs-mist);color:var(--bs-ink)}
.bs .ex-card figcaption p{font-size:14.5px;color:var(--bs-slate);margin:0}

/* Mockup canvas: everything inside scales with the card width (container units) */
.bs .ex{position:relative;container-type:inline-size;aspect-ratio:16/10;overflow:hidden;background:var(--bg);color:var(--fg);pointer-events:none;user-select:none;-webkit-user-select:none}
.bs .ex__in{position:absolute;inset:0;font-family:var(--bf,'Instrument Sans'),system-ui,sans-serif;font-size:1.8cqi;line-height:1.45}
.bs .ex__in i{font-style:normal;color:var(--ac)}
.bs .ex__nav{position:relative;z-index:2;display:flex;align-items:center;gap:3.4cqi;padding:2.6cqi 4.2cqi;font-size:1.65cqi;color:var(--mut)}
.bs .ex__logo{margin-right:auto;font-family:var(--hf);font-size:2.7cqi;font-weight:700;color:var(--fg);letter-spacing:var(--ls,0);line-height:1}
.bs .ex__btn{display:inline-block;background:var(--ac);color:var(--on);padding:1.5cqi 3cqi;border-radius:var(--r,99px);font-weight:600;font-size:1.75cqi;line-height:1.2;white-space:nowrap}
.bs .ex__btn--sm{padding:1cqi 2cqi;font-size:1.5cqi}
.bs .ex__hero{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:4cqi;align-items:center;padding:3.4cqi 4.2cqi 0}
.bs .ex__hero--center{grid-template-columns:1fr;justify-items:center;text-align:center;padding-top:2.6cqi}
.bs .ex__hero--center .ex__p{margin-left:auto;margin-right:auto}
.bs .ex__h{margin:0 0 2cqi;font-family:var(--hf);font-size:var(--hs,5.6cqi);font-weight:var(--hw,700);font-style:var(--fs,normal);letter-spacing:var(--ls,-.02em);line-height:1.03;color:var(--fg)}
.bs .ex__p{margin:0 0 3cqi;font-size:1.85cqi;line-height:1.5;color:var(--mut);max-width:44ch}
.bs .ex__tag{display:inline-block;margin-bottom:2cqi;padding:.6cqi 1.6cqi;border:1px solid var(--line);border-radius:99px;font-size:1.45cqi;color:var(--ac)}
/* Panels and rows */
.bs .ex-panel{background:var(--panel);border:1px solid var(--line);border-radius:2cqi;padding:2.4cqi;box-shadow:0 3cqi 6cqi -3cqi rgba(0,0,0,.35)}
.bs .ex-panel__h{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.4cqi;font-size:1.8cqi}
.bs .ex-panel__h b{color:var(--fg)}
.bs .ex-panel__h em{font-style:normal;font-size:1.4cqi;font-weight:600;padding:.4cqi 1.2cqi;border-radius:99px;background:var(--ac);color:var(--on)}
.bs .ex-row{display:flex;justify-content:space-between;align-items:center;gap:2cqi;padding:1.3cqi 0;border-top:1px solid var(--line);font-size:1.7cqi;color:var(--fg)}
.bs .ex-row small{display:block;font-size:1.35cqi;color:var(--mut)}
.bs .ex-row b{font-family:var(--hf);font-size:2.4cqi;color:var(--ac);font-weight:600}
.bs .ex-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqi;width:100%;margin-top:2.6cqi;text-align:left}
.bs .ex-tile{background:var(--panel);border:1px solid var(--line);border-radius:1.6cqi;padding:1.4cqi;font-size:1.6cqi;color:var(--fg)}
.bs .ex-tile i{display:block;aspect-ratio:16/7;border-radius:1cqi;margin-bottom:1.2cqi}
.bs .ex-tile small{display:block;font-size:1.35cqi;color:var(--mut)}
/* Backgrounds */
.bs .ex--pitch::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 8cqi,transparent 8cqi 16cqi);z-index:0}
.bs .ex--pitch::after{content:"";position:absolute;right:-10cqi;top:18cqi;width:46cqi;height:46cqi;border:.3cqi solid rgba(255,255,255,.08);border-radius:50%;z-index:0}
.bs .ex--rays::before{content:"";position:absolute;inset:0;background:radial-gradient(60cqi 40cqi at 50% 0,rgba(217,178,95,.22),transparent 70%);z-index:0}
.bs .ex--grid::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:5cqi 5cqi;z-index:0}
.bs .ex--glow::before{content:"";position:absolute;right:-8cqi;top:-6cqi;width:50cqi;height:50cqi;border-radius:50%;background:radial-gradient(circle,rgba(255,111,177,.35),transparent 65%);z-index:0}
.bs .ex--glow2::before{content:"";position:absolute;inset:0;background:radial-gradient(40cqi 30cqi at 80% 60%,rgba(155,92,255,.35),transparent 70%),radial-gradient(30cqi 24cqi at 95% 20%,rgba(60,229,255,.2),transparent 70%);z-index:0}
.bs .ex--slash::before{content:"";position:absolute;left:-10cqi;right:-10cqi;bottom:-14cqi;height:34cqi;background:var(--ac);transform:rotate(-5deg);opacity:.08;z-index:0}
.bs .ex--frame::before{content:"";position:absolute;inset:2.2cqi;border:1px solid rgba(200,165,90,.22);border-radius:1cqi;z-index:0}
/* Tennis court */
.bs .ex-court{position:relative;aspect-ratio:4/3;border-radius:1.6cqi;background:linear-gradient(160deg,#D9733F,#B44F25);box-shadow:inset 0 0 0 .5cqi rgba(255,255,255,.85)}
.bs .ex-court::before{content:"";position:absolute;left:50%;top:6%;bottom:6%;width:.4cqi;background:rgba(255,255,255,.85)}
.bs .ex-court::after{content:"";position:absolute;left:12%;right:12%;top:30%;bottom:30%;border:.4cqi solid rgba(255,255,255,.85);border-left:0;border-right:0}
.bs .ex-court__ball{position:absolute;left:28%;top:22%;width:4.4cqi;height:4.4cqi;border-radius:50%;background:#E4F34A;box-shadow:0 1.2cqi 1.6cqi rgba(0,0,0,.25);z-index:2}
.bs .ex-court__card{position:absolute;right:-2cqi;bottom:-2cqi;background:#fff;color:var(--fg);border-radius:1.4cqi;padding:1.6cqi 2cqi;box-shadow:0 2cqi 4cqi -1cqi rgba(0,0,0,.3);font-size:1.6cqi;z-index:3}
.bs .ex-court__card small{display:block;color:var(--mut);font-size:1.3cqi}
.bs .ex-court__card em{display:block;font-style:normal;color:var(--ac);font-weight:700}
/* Candles */
.bs .ex-candles{display:flex;align-items:flex-end;gap:1.4cqi;height:20cqi;padding-top:1cqi}
.bs .ex-candles span{position:relative;flex:1;height:calc(var(--h) - var(--o));margin-bottom:var(--o);border-radius:.4cqi;background:#2BD38B}
.bs .ex-candles span.d{background:#FF5C7A}
.bs .ex-candles span::before{content:"";position:absolute;left:50%;top:-1.6cqi;bottom:-1.6cqi;width:.25cqi;background:inherit;opacity:.6}
/* Chat bubbles */
.bs .ex-chat{display:flex;flex-direction:column;gap:1.4cqi;background:#fff;border-radius:2.4cqi;padding:2.4cqi;box-shadow:0 3cqi 6cqi -3cqi rgba(20,33,61,.35)}
.bs .ex-chat__b{margin:0;max-width:85%;padding:1.3cqi 1.8cqi;border-radius:2cqi 2cqi 2cqi .4cqi;background:#F1F3F8;font-size:1.65cqi;color:var(--fg)}
.bs .ex-chat__b.is-me{align-self:flex-end;border-radius:2cqi 2cqi .4cqi 2cqi;background:var(--fg);color:#FFD84D}
.bs .ex-chat__lvl{font-size:1.35cqi;color:var(--mut);text-align:center}
/* Waveform */
.bs .ex-wave{display:flex;align-items:center;gap:.6cqi;height:9cqi;margin:1cqi 0 1.4cqi}
.bs .ex-wave i{flex:1;border-radius:99px;background:var(--ac);height:30%}
.bs .ex-wave i:nth-child(3n){height:70%}.bs .ex-wave i:nth-child(4n){height:50%}.bs .ex-wave i:nth-child(5n){height:90%}.bs .ex-wave i:nth-child(7n){height:40%}
.bs .ex-wave i:nth-child(n+16){opacity:.35}
/* Arches */
.bs .ex-arches{position:relative;height:30cqi}
.bs .ex-arch{position:absolute;left:8%;top:0;width:44%;height:100%;border-radius:22cqi 22cqi 1.6cqi 1.6cqi}
.bs .ex-arch.is-2{left:46%;top:12%;width:40%;height:88%}
.bs .ex-arch__chip{position:absolute;left:0;bottom:3cqi;background:#fff;color:var(--fg);border-radius:99px;padding:1cqi 2cqi;font-size:1.5cqi;font-weight:600;box-shadow:0 1.6cqi 3cqi -1cqi rgba(0,0,0,.2)}
/* Ranks */
.bs .ex-ranks{display:flex;justify-content:center;align-items:flex-end;gap:2.4cqi}
.bs .ex-rank{display:grid;place-items:end center;width:11cqi;height:13cqi;padding-bottom:1.4cqi;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(160deg,var(--c),rgba(0,0,0,.4));font-family:var(--hf);font-size:1.9cqi;color:#fff;letter-spacing:.04em}
.bs .ex-rank.is-on{width:15cqi;height:18cqi;font-size:2.4cqi;filter:drop-shadow(0 0 2cqi rgba(60,229,255,.6))}
/* Avatars */
.bs .ex-avs{display:flex;align-items:center;justify-content:center;margin:0 0 3cqi}
.bs .ex-avs span{display:grid;place-items:center;width:5cqi;height:5cqi;margin-left:-1.2cqi;border-radius:50%;border:.35cqi solid var(--bg);font-family:var(--hf);font-size:2cqi;color:#111}
.bs .ex-avs em{margin-left:1.6cqi;font-style:normal;font-size:1.6cqi;color:var(--mut)}
/* Docs (immo) */
.bs .ex-docs{position:relative;height:28cqi}
.bs .ex-doc{position:absolute;left:0;top:0;width:62%;background:var(--panel);color:#13213D;border-radius:1.6cqi;padding:1.6cqi;box-shadow:0 3cqi 6cqi -2cqi rgba(0,0,0,.4);font-size:1.6cqi}
.bs .ex-doc.is-2{left:34%;top:9cqi}
.bs .ex-doc i{display:block;aspect-ratio:16/8;border-radius:1cqi;margin-bottom:1.2cqi}
.bs .ex-doc small{display:block;font-size:1.3cqi;color:#6A6F7E}
.bs .ex-doc em{display:block;font-style:normal;font-family:var(--hf);font-size:2.8cqi;font-weight:600;color:#13213D}
/* Plates */
.bs .ex-plates{position:relative;height:30cqi}
.bs .ex-plate{position:absolute;left:4%;top:0;width:26cqi;height:26cqi;border-radius:50%;background:var(--p);box-shadow:0 2.4cqi 4cqi -1cqi rgba(59,30,18,.3)}
.bs .ex-plate.is-2{left:46%;top:8cqi;width:20cqi;height:20cqi}
.bs .ex-plate__chip{position:absolute;left:0;bottom:0;background:var(--ac);color:#fff;border-radius:99px;padding:1cqi 2cqi;font-size:1.5cqi;font-weight:600}
/* Feature video on the pronos page */
.bs-video--feature .bs-video__btn{box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.bs-video--feature .bs-video__play{width:76px;height:76px;margin:-38px 0 0 -38px;background-size:32px}
@media (max-width:900px){.ex-grid{grid-template-columns:1fr}}
/* Mockups v2 */
.bs .ex--hoop::before{content:"";position:absolute;right:-14cqi;bottom:-34cqi;width:72cqi;height:72cqi;border:.35cqi solid rgba(255,255,255,.08);border-radius:50%;z-index:0}
.bs .ex--hoop::after{content:"";position:absolute;right:15cqi;bottom:-4cqi;width:15cqi;height:15cqi;border:.35cqi solid rgba(255,122,26,.25);border-radius:50%;z-index:0}
.bs .ex--dots::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.55) .16cqi,transparent .26cqi),radial-gradient(rgba(233,199,123,.6) .14cqi,transparent .24cqi);background-size:7cqi 7cqi,11cqi 11cqi;background-position:0 0,3cqi 4cqi;opacity:.6;z-index:0}
.bs .ex--felt::before{content:"";position:absolute;inset:0;background:radial-gradient(70cqi 45cqi at 72% 62%,rgba(255,255,255,.09),transparent 70%);z-index:0}
.bs .ex-timer{display:flex;gap:1.6cqi;justify-content:center;margin:0 0 2.2cqi}
.bs .ex-timer span{display:flex;flex-direction:column;align-items:center;min-width:10cqi;padding:1.4cqi 1cqi;border:1px solid var(--line);border-radius:1.2cqi;background:var(--panel);font-family:var(--hf);font-size:4.6cqi;line-height:1;color:var(--fg)}
.bs .ex-timer small{margin-top:.6cqi;font-family:'Instrument Sans',sans-serif;font-size:1.2cqi;color:var(--mut)}
.bs .ex-chart{display:flex;align-items:flex-end;gap:1.1cqi;height:17cqi;margin-top:1.4cqi}
.bs .ex-chart i{flex:1;height:var(--h);border-radius:.6cqi .6cqi 0 0;background:var(--ac);opacity:.3}
.bs .ex-chart i.on{opacity:1}
.bs .ex-code{background:#010409;border:1px solid var(--line);border-radius:1.6cqi;padding:2.2cqi 2.4cqi;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.55cqi;line-height:1.8;color:#C9D1D9;box-shadow:0 3cqi 6cqi -3cqi rgba(0,0,0,.6)}
.bs .ex-code b{color:#FF7B72;font-weight:400}.bs .ex-code em{color:#FFA657;font-style:normal}.bs .ex-code u{color:#D2A8FF;text-decoration:none}.bs .ex-code s{color:#7EE787;text-decoration:none;opacity:.8}
.bs .ex-photos{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:1.4cqi;height:30cqi}
.bs .ex-photos i{border-radius:1.4cqi;background:var(--g)}
.bs .ex-photos i:first-child{grid-row:span 2}
.bs .ex-cardsp{position:relative;height:28cqi}
.bs .ex-pc{position:absolute;top:2cqi;width:15cqi;height:21cqi;padding:1.4cqi;border-radius:1.4cqi;background:#fff;box-shadow:0 2cqi 4cqi -1cqi rgba(0,0,0,.45);font-family:var(--hf);font-size:4cqi;line-height:1;color:#111}
.bs .ex-pc::after{content:attr(data-s);position:absolute;right:1.6cqi;bottom:1.2cqi;font-size:6.5cqi}
.bs .ex-pc.r{color:#C8102E}
.bs .ex-pc:nth-child(1){left:10%;transform:rotate(-10deg)}
.bs .ex-pc:nth-child(2){left:36%;top:0;transform:rotate(7deg)}
.bs .ex-chip{position:absolute;right:6%;bottom:1cqi;width:9cqi;height:9cqi;border-radius:50%;background:repeating-conic-gradient(var(--ac) 0 30deg,#fff 30deg 45deg);box-shadow:inset 0 0 0 1.7cqi var(--ac),0 1.4cqi 2.4cqi rgba(0,0,0,.4)}
.bs .ex-ring{position:relative;display:grid;place-items:center;width:22cqi;height:22cqi;margin:.6cqi auto 0;border-radius:50%;background:conic-gradient(var(--ac) 0 42%,var(--ac2) 42% 74%,#7DB2FF 74% 100%)}
.bs .ex-ring::before{content:"";position:absolute;inset:2.6cqi;border-radius:50%;background:var(--panel)}
.bs .ex-ring b{position:relative;font-family:var(--hf);font-size:3.8cqi;line-height:1.05;color:var(--fg);text-align:center}
.bs .ex-ring small{display:block;font-family:'Instrument Sans',sans-serif;font-weight:400;font-size:1.3cqi;color:var(--mut)}
.bs .ex-legend{display:flex;justify-content:center;gap:2cqi;margin-top:1.8cqi;font-size:1.35cqi;color:var(--mut)}
.bs .ex-legend i{display:inline-block;width:1.2cqi;height:1.2cqi;margin-right:.6cqi;border-radius:50%;vertical-align:middle}
.bs .ex-quote{background:var(--panel);border:1px solid var(--line);border-radius:2cqi;padding:3.2cqi;font-family:var(--hf);font-style:italic;font-size:2.8cqi;line-height:1.35;color:var(--fg);box-shadow:0 3cqi 6cqi -3cqi rgba(27,42,65,.3)}
.bs .ex-quote small{display:block;margin-top:1.8cqi;font-family:'Instrument Sans',sans-serif;font-style:normal;font-size:1.4cqi;color:var(--mut)}
.bs .ex-news{border-top:.3cqi solid var(--fg)}
.bs .ex-news>div{display:grid;grid-template-columns:1fr 9cqi;align-items:center;gap:1.8cqi;padding:1.3cqi 0;border-bottom:1px solid var(--line)}
.bs .ex-news b{display:block;font-family:var(--hf);font-size:2cqi;line-height:1.2;color:var(--fg)}
.bs .ex-news small{display:block;margin-top:.4cqi;font-size:1.3cqi;color:var(--mut)}
.bs .ex-news i{aspect-ratio:4/3;border-radius:.5cqi;background:var(--g)}
.bs .ex-astro{position:relative;height:28cqi}
.bs .ex-moon{position:absolute;left:50%;top:1cqi;width:22cqi;height:22cqi;margin-left:-11cqi;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFF4D6,#E9C77B 60%,#B8893A);box-shadow:0 0 7cqi rgba(233,199,123,.45)}
.bs .ex-moon::after{content:"";position:absolute;inset:-3.5cqi;border:1px dashed rgba(233,199,123,.4);border-radius:50%}
.bs .ex-astro .ex-arch__chip{left:50%;bottom:0;transform:translateX(-50%);white-space:nowrap}
.bs .ex-astro .ex-arch__chip{background:var(--ac);color:var(--on)}
.bs .ex-timer+.ex__btn{margin-top:-.6cqi}