:root{
  --ink:#0e1e45;--ink-2:#22325a;--red:#da291c;--red-d:#b51f14;--blue:#1d63c4;
  --paper:#f2f4f8;--card:#fff;--line:#dce2ec;--muted:#56637e;
  --board:#0a1430;--board-2:#13214a;--amber:#ffc63a;--ok:#0f7f49;--warn:#a34a05;
  --train:#1d63c4;--avion:#da291c;--bus:#16824a;--voiture:#0e1e45;--covoiturage:#c26a00;--local:#7a879e;
  --r-s:6px;--r-m:12px;--r-l:18px;
  --shadow:0 1px 2px rgba(14,30,69,.06),0 6px 20px rgba(14,30,69,.08);
  --ease:cubic-bezier(.2,.8,.2,1);
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 "Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;padding-bottom:env(safe-area-inset-bottom,0)}
img{max-width:100%}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-s);text-decoration:none;font-weight:600;transition:top .2s}
.skip:focus{top:12px}
.ico{width:1.1em;height:1.1em;flex-shrink:0;vertical-align:-.18em}

/* Header */
.bar{background:var(--ink);color:#fff;padding-top:env(safe-area-inset-top,0)}
.bar-in{max-width:1080px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.bar-crest{width:34px;height:auto}
.bar-name{font:700 1.35rem/1 var(--cond);letter-spacing:.02em}
.bar-sub{color:#b9c3dc;font-size:.9rem;margin-left:auto}
.bar-sub strong{color:#fff}

.wrap{max-width:1080px;margin:0 auto;padding:0 16px 64px}
.wrap:focus{outline:none}

/* Hero: one orchestrated entrance */
.hero{padding:44px 0 8px}
.hero-title{font:800 clamp(2.6rem,7vw,4.6rem)/.92 var(--cond);text-transform:uppercase;margin:0;letter-spacing:-.01em}
.hero-title span{display:block;animation:rise .8s var(--ease) both}
.hero-title span+span{color:var(--red);animation-delay:.12s}
.lead{max-width:34em;color:var(--muted);font-size:1.1rem;margin:16px 0 0;animation:rise .8s .24s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.block{margin-top:40px}
.step{display:flex;align-items:center;gap:12px;font:700 1.6rem/1.1 var(--cond);margin:0 0 16px}
.step-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-size:1.1rem}

/* Segmented controls */
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;background:#e3e8f1;border-radius:999px;margin-bottom:16px}
.seg button{border:0;background:transparent;padding:8px 16px;border-radius:999px;font-weight:600;cursor:pointer;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;transition:background .2s,color .2s}
.seg button:hover{background:rgba(255,255,255,.6)}
.seg button[aria-pressed="true"],.seg button[aria-checked="true"]{background:var(--ink);color:#fff}

/* Match tickets */
.tickets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,470px),1fr));gap:12px}
.tickets>li{animation:rise .55s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms + .3s)}
.ticket{position:relative;width:100%;display:grid;grid-template-columns:84px 1fr auto;align-items:stretch;text-align:left;border:0;padding:0;background:var(--card);border-radius:var(--r-m);box-shadow:var(--shadow);cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s}
.ticket:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(14,30,69,.08),0 12px 28px rgba(14,30,69,.12)}
.ticket[aria-pressed="true"]{box-shadow:0 0 0 2px var(--red),var(--shadow)}
.stub{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 6px;border-right:2px dashed var(--line);position:relative;color:var(--ink)}
.stub::before,.stub::after{content:"";position:absolute;right:-9px;width:16px;height:16px;border-radius:50%;background:var(--paper)}
.stub::before{top:-8px}
.stub::after{bottom:-8px}
.ticket[aria-pressed="true"] .stub{background:var(--ink);color:#fff;border-radius:var(--r-m) 0 0 var(--r-m)}
.stub-wd{font-size:.8rem;color:inherit;opacity:.75}
.stub-day{font:800 2.1rem/1 var(--cond)}
.stub-mon{font:600 .95rem/1 var(--cond)}
.tbody{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:0}
.trow{display:flex;align-items:center;gap:12px}
.teams{font:700 1.3rem/1.1 var(--cond)}
.teams small{display:block;font:500 .95rem/1.2 "Barlow",sans-serif;color:var(--muted)}
.tmeta{font-size:.9rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:2px 12px}
.tmeta span{display:inline-flex;align-items:center;gap:5px}
.twarn{color:var(--warn);font-weight:600}
.tcheck{display:grid;place-items:center;width:44px;color:transparent;transition:color .2s}
.tcheck .ico{width:26px;height:26px;padding:4px;border-radius:50%;border:2px solid var(--line);transition:all .25s var(--ease)}
.ticket[aria-pressed="true"] .tcheck .ico{color:#fff;background:var(--red);border-color:var(--red);animation:pop .35s var(--ease)}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.crests{display:flex;align-items:center;gap:6px;flex-shrink:0}
.crest{width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font:700 .9rem/1 var(--cond)}
.crest img{width:100%;height:100%;object-fit:contain;display:block}
.crest.txt{background:var(--local);color:#fff;border-radius:50%}
.more-btn{margin-top:12px;border:2px solid var(--ink);background:transparent;padding:10px 18px;border-radius:999px;font-weight:600;cursor:pointer}
.more-btn:hover{background:var(--ink);color:#fff}
.manual{grid-column:1/-1;background:var(--card);border-radius:var(--r-m);box-shadow:var(--shadow);padding:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
@media (max-width:560px){.ticket{grid-template-columns:70px 1fr 40px}.stub-day{font-size:1.8rem}.teams{font-size:1.15rem}.crest{width:36px;height:36px}}

/* Form */
.panel{background:var(--card);border-radius:var(--r-l);box-shadow:var(--shadow);padding:20px}
.form{display:grid;grid-template-columns:auto 1fr;gap:18px 24px;align-items:start}
.field{margin:0;border:0;padding:0;min-width:0}
.field-full{grid-column:1/-1}
label,.label{display:block;font-weight:600;font-size:.95rem;margin-bottom:6px;padding:0}
input[type=text],input:not([type]),input[type=number],input[type=date],input[type=time],input[list]{width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:var(--r-s);background:#fff;font-size:1.05rem;transition:border-color .2s}
input:hover{border-color:#b9c4d6}
input:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,99,196,.25)}
input[aria-invalid="true"]{border-color:var(--red)}
.field-err{color:var(--red-d);font-weight:600;font-size:.9rem;margin:6px 0 0;display:flex;gap:6px;align-items:center}
.stepper{display:inline-flex;align-items:center;border:2px solid var(--line);border-radius:999px;overflow:hidden}
.step-btn{width:44px;height:44px;border:0;background:#fff;cursor:pointer;display:grid;place-items:center}
.step-btn:hover{background:var(--paper)}
.step-btn:disabled{opacity:.35;cursor:not-allowed}
.stepper output{min-width:36px;text-align:center;font:700 1.3rem/1 var(--cond)}
.radios{display:flex;flex-wrap:wrap;gap:8px}
.radio{margin:0;position:relative;cursor:pointer}
.radio input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.radio span{display:block;padding:10px 14px;border:2px solid var(--line);border-radius:999px;font-weight:600;transition:all .2s}
.radio input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.radio input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.cta{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;border:0;background:var(--red);color:#fff;font:700 1.35rem/1 var(--cond);letter-spacing:.02em;padding:18px;border-radius:var(--r-m);cursor:pointer;position:relative;overflow:hidden;transition:background .2s,transform .15s}
.cta:hover{background:var(--red-d)}
.cta:active{transform:scale(.99)}
.cta:disabled{cursor:progress;background:var(--ink-2)}
@media (max-width:640px){.form{grid-template-columns:1fr}}

/* Loader: departures board */
.loader{margin-top:40px;background:var(--board);color:#fff;border-radius:var(--r-l);padding:22px;box-shadow:0 18px 40px rgba(10,20,48,.35);animation:rise .5s var(--ease) both;overflow:hidden}
.lhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-bottom:16px}
.lhead h2{font:700 1.5rem/1.1 var(--cond);margin:0}
.lclock{margin-left:auto;font:700 1.4rem/1 var(--cond);color:var(--amber);font-variant-numeric:tabular-nums}
.board{display:grid;gap:6px}
.brow{display:grid;grid-template-columns:30px minmax(0,1.3fr) minmax(0,1fr);gap:12px;align-items:center;background:var(--board-2);border-radius:var(--r-s);padding:10px 12px;transition:background .3s}
.brow[data-state="ok"]{background:#16305f}
.bdot{width:12px;height:12px;border-radius:50%;background:#3a4a78;justify-self:center}
.brow[data-state="run"] .bdot{background:var(--amber);animation:blink 1s infinite}
.brow[data-state="ok"] .bdot{background:#3ddc84}
.brow[data-state="none"] .bdot,.brow[data-state="skip"] .bdot{background:#6b7aa3}
@keyframes blink{50%{opacity:.25}}
.flap{display:flex;flex-wrap:wrap;gap:2px;font:700 1rem/1 var(--cond);text-transform:uppercase;letter-spacing:.04em}
.flap .ch{display:inline-block;min-width:.72em;text-align:center;background:#0b1838;border-radius:2px;padding:4px 1px;box-shadow:inset 0 -1px 0 rgba(255,255,255,.06),inset 0 1px 0 rgba(0,0,0,.4)}
.flap .ch.sp{background:transparent;box-shadow:none}
.flap .ch.turn{animation:flip .09s linear}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.bstat .flap{color:var(--amber)}
.brow[data-state="ok"] .bstat .flap{color:#fff}
.brow[data-state="none"] .bstat .flap,.brow[data-state="skip"] .bstat .flap{color:#9aa8cc}
.track{position:relative;margin:22px 0 6px;height:64px}
.track svg{width:100%;height:100%;overflow:visible}
.track .rail{stroke:#2b3c6c;stroke-width:3;stroke-dasharray:2 8;stroke-linecap:round;fill:none}
.track .done{stroke:var(--amber);stroke-width:3;fill:none;stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease)}
.track .city{font:700 15px var(--cond);fill:#fff}
.mover{position:absolute;top:2px;left:0;width:40px;height:40px;margin-left:-20px;border-radius:50%;background:var(--amber);color:var(--board);display:grid;place-items:center;box-shadow:0 0 0 6px rgba(255,198,58,.18);transition:left .6s var(--ease)}
.mover .ico{width:22px;height:22px;animation:hop .8s ease-in-out infinite}
@keyframes hop{50%{transform:translateY(-3px)}}
.lnote{color:#b9c3dc;margin:4px 0 0;font-size:.95rem}
@media (max-width:560px){.brow{grid-template-columns:22px 1fr}.bstat{grid-column:2}}

/* Results */
.results{margin-top:40px}
.rhead{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:6px}
.rhead h2{font:800 clamp(1.8rem,4.5vw,2.6rem)/1 var(--cond);margin:0}
.rhead h2:focus{outline:none}
.rsub{color:var(--muted);margin:0 0 18px}
.toolbar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin-bottom:16px}
.toolbar .seg{margin:0}
.tlabel{font-weight:600;font-size:.9rem;color:var(--muted);margin-right:4px}
.rlayout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px;align-items:start}
@media (max-width:920px){.rlayout{grid-template-columns:1fr}}
.side{position:sticky;top:12px}
@media (max-width:920px){.side{position:static}}
.mapcard{background:var(--card);border-radius:var(--r-l);box-shadow:var(--shadow);overflow:hidden}
#map{width:100%;aspect-ratio:4/3;display:block;background:#dbe8f5}
#map .route-sel{animation:draw 1.1s var(--ease) both}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;padding:12px 16px;font-size:.88rem;border-top:1px solid var(--line)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:20px;height:4px;border-radius:2px;display:inline-block}
.note{color:var(--muted);font-size:.85rem;padding:0 16px 14px;margin:0}
.howto{margin-top:14px;background:var(--card);border-radius:var(--r-m);box-shadow:var(--shadow);padding:4px 16px}
.howto summary{cursor:pointer;font-weight:600;padding:12px 0;list-style-position:inside}
.howto p{margin:0 0 12px;color:var(--muted);font-size:.93rem}

.opts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.opt{background:var(--card);border-radius:var(--r-l);box-shadow:var(--shadow);position:relative;animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
.opt.on{box-shadow:0 0 0 2px var(--ink),var(--shadow)}
.otoggle{width:100%;border:0;background:transparent;text-align:left;cursor:pointer;padding:16px 18px 6px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px 14px;border-radius:var(--r-l) var(--r-l) 0 0}
.otop{display:flex;align-items:center;gap:10px;min-width:0}
.omodes{display:flex;align-items:center;gap:2px;flex-shrink:0}
.mchip{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff}
.mchip .ico{width:17px;height:17px}
.otitle{font:700 1.3rem/1.15 var(--cond);overflow-wrap:anywhere}
.oprice{grid-area:1/2/4/3;text-align:right;align-self:center}
.otop{grid-area:1/1}
.otimes{grid-area:2/1}
.ometa{grid-area:3/1}
.chev-wrap{grid-area:1/3/4/4;align-self:center;display:grid;place-items:center}
.oprice b{display:block;font:800 1.9rem/1 var(--cond);font-variant-numeric:tabular-nums}
.oprice small{color:var(--muted);font-size:.82rem}
.ometa{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--muted);font-size:.92rem}
.ometa span{display:inline-flex;align-items:center;gap:5px}
.obadges{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:.82rem;padding:4px 10px;border-radius:999px;background:var(--paper);color:var(--ink)}
.badge .ico{width:.95em;height:.95em}
.badge.b-best{background:var(--ink);color:#fff}
.badge.b-cheap{background:#fde7e5;color:var(--red-d)}
.badge.b-fast{background:#e2ecfb;color:var(--blue)}
.conf{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600}
.meter{display:inline-flex;gap:2px}
.meter i{width:7px;height:14px;border-radius:2px;background:var(--line);transform-origin:bottom;animation:grow .4s var(--ease) both;animation-delay:calc(var(--k) * 60ms + .2s)}
.conf[data-lvl="hi"] .meter i.f{background:var(--ok)}
.conf[data-lvl="mid"] .meter i.f{background:#c98a00}
.conf[data-lvl="lo"] .meter i.f{background:var(--red)}
.conf[data-lvl="hi"]{color:var(--ok)}
.conf[data-lvl="mid"]{color:#8a5c00}
.conf[data-lvl="lo"]{color:var(--red-d)}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.chev{transition:transform .3s var(--ease);color:var(--muted)}
.otoggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.odetail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.odetail.open{grid-template-rows:1fr}
.odetail>div{overflow:hidden}
.oin{padding:0 18px 18px}

.legs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.leg{display:grid;grid-template-columns:36px 1fr 170px;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);position:relative}
.leg::before{content:"";position:absolute;left:17px;top:48px;bottom:-14px;width:2px;background:var(--line)}
.leg:last-child::before{display:none}
.ldot{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;position:relative;z-index:1}
.ldot .ico{width:18px;height:18px}
.ltitle{font:700 1.08rem/1.25 var(--cond)}
.linfo{font-size:.88rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:2px}
.linfo span{display:inline-flex;align-items:center;gap:4px}
.lprice{margin-top:6px;font-size:.92rem;font-weight:600;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.lprice.real{color:var(--ok)}
.lprice.grid{color:var(--blue)}
.lprice.est{color:var(--muted)}
.lsub{display:block;font-size:.83rem;color:var(--muted);margin-top:3px}
.lctl{display:flex;flex-direction:column;gap:6px}
.lctl label{font-size:.8rem;margin:0;font-weight:600;color:var(--muted)}
.lctl input{padding:8px 10px;font-size:.95rem}
.link{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--blue);color:#fff;text-decoration:none;font-weight:600;font-size:.9rem;padding:9px 12px;border-radius:var(--r-s);transition:background .2s}
.link:hover{background:#174f9c}
@media (max-width:640px){.leg{grid-template-columns:36px 1fr}.lctl{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:end}.lctl>*{flex:1}}
.pros{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:4px;font-size:.93rem}
.pros li{display:flex;gap:8px;align-items:flex-start}
.pros .ico{margin-top:2px}

.err-box{margin-top:40px;background:#fff4f3;border:2px solid #f3c2bd;border-radius:var(--r-l);padding:18px;animation:rise .4s var(--ease) both}
.err-box h2{font:700 1.4rem/1.1 var(--cond);margin:0 0 6px;color:var(--red-d);display:flex;gap:8px;align-items:center}
.err-box p{margin:0 0 12px}
.acts{display:flex;flex-wrap:wrap;gap:8px}

strong{font-weight:700;color:var(--ink)}
.loader strong{color:#fff}
.howto-list{margin:0 0 12px;padding-left:18px;color:var(--muted);font-size:.93rem;display:grid;gap:4px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Operator logos */
.oplogo{height:22px;width:auto;max-width:84px;object-fit:contain;vertical-align:-5px;margin-right:8px;background:#fff;border-radius:4px;padding:2px 3px;box-shadow:0 0 0 1px var(--line)}
.ologos{display:inline-flex;align-items:center;gap:6px;margin-left:4px;flex-shrink:0}
.ologos .oplogo{margin:0;height:24px}
@media (max-width:560px){.ologos{display:none}}

/* Stay: formula or explicit dates */
.stay-mode{margin-bottom:10px}
.seg-radio{position:relative;margin:0;cursor:pointer}
.seg-radio input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg-radio span{display:block;padding:7px 14px;border-radius:999px;font-weight:600;font-size:.92rem;color:var(--ink-2);transition:background .2s,color .2s}
.seg-radio input:checked+span{background:var(--ink);color:#fff}
.seg-radio input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.dates{display:grid;grid-template-columns:1fr auto 1fr;gap:6px 10px;align-items:end;animation:rise .35s var(--ease) both}
.dates[hidden]{display:none}
.date-field label{font-size:.85rem;color:var(--muted);margin-bottom:4px}
.date-field input{padding:10px 12px}
.date-arrow{padding-bottom:12px;color:var(--muted)}
.dates .hint,.dates .field-err{grid-column:1/-1;margin:2px 0 0}
.hint{color:var(--muted);font-size:.88rem}
#stay-formula[hidden]{display:none}

/* Stadium hold after the match */
.hold-radios .radio span{padding:8px 14px;font-size:.95rem;font-variant-numeric:tabular-nums}
.hold .hint{margin:8px 0 0}
@media (max-width:420px){.hold-radios{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.hold-radios .radio span{padding:8px 2px;text-align:center;white-space:nowrap;font-size:.9rem}}
@media (max-width:360px){.hold-radios{gap:4px}.hold-radios .radio span{font-size:.8rem;padding:8px 0}}
@media (max-width:420px){.dates{grid-template-columns:1fr}.date-arrow{display:none}}

/* Option cards: key times, margin chip, footer bar */
.oprice small{display:block}
.oprice .pp{color:var(--ink-2);font-weight:600}
.otimes{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;font-size:.95rem;color:var(--ink-2)}
.kt{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.kt b{font:700 1.1rem/1 var(--cond);font-variant-numeric:tabular-nums;color:var(--ink)}
.kt em{font-style:normal;color:var(--muted);font-size:.85rem}
.mchipm{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:.85rem;padding:3px 10px;border-radius:999px}
.mchipm[data-lvl="ok"]{background:#e1f4ea;color:#0b6a3c}
.mchipm[data-lvl="mid"]{background:#fff1cf;color:#7a4f00}
.mchipm[data-lvl="lo"]{background:#fde7e5;color:var(--red-d)}
.badge.b-nuit{background:#ece6f6;color:#51397f}
.obar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:6px 18px 14px}
.obar:empty{display:none}
.ocmp{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--line);background:#fff;border-radius:999px;padding:4px 12px;font-weight:600;font-size:.85rem;cursor:pointer;margin-left:auto;color:var(--ink-2)}
.ocmp:hover:not(:disabled){border-color:var(--ink)}
.ocmp[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.ocmp:disabled{opacity:.45;cursor:not-allowed}
.vtitle{font:700 1.05rem/1.2 var(--cond);margin:14px 0 8px}
.day{margin-bottom:6px}
.day .vtitle{margin-top:2px}
.vars{margin-top:14px}
.vars .vtitle{margin-top:0}
.vlist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.vchip{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 12px;background:var(--paper);border-radius:var(--r-s);padding:8px 12px;font-size:.88rem;color:var(--ink-2)}
.vchip b{font:700 1rem/1.2 var(--cond);color:var(--ink)}
.vchip span{display:inline-flex;align-items:center;gap:4px}
.vchip .vnote{color:var(--muted);flex-basis:100%}

/* Notre conseil */
.advice{background:var(--card);border-radius:var(--r-l);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:16px;border-left:4px solid var(--ink)}
.advice-txt{margin:0;display:flex;gap:10px;align-items:flex-start;font-size:1.05rem;line-height:1.45}
.advice-txt .ico{margin-top:4px;color:var(--ink-2);width:1.25em;height:1.25em}
.advice-h{font-weight:700}
.wtiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.wtile{display:flex;flex-direction:column;gap:2px;text-align:left;border:2px solid var(--line);background:var(--paper);border-radius:var(--r-m);padding:10px 12px;cursor:pointer;transition:border-color .2s,background .2s}
.wtile:hover{border-color:var(--ink);background:#fff}
.wlab{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--muted)}
.wtitle{font:700 1.05rem/1.2 var(--cond);overflow-wrap:anywhere}
.wmeta{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:.88rem;color:var(--muted)}
.wmeta b{font:800 1.25rem/1 var(--cond);color:var(--ink)}
.wmeta span{display:inline-flex;align-items:center;gap:4px}

/* Compare bar and dialog */
.cmpbar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0));background:rgba(255,255,255,.96);box-shadow:0 -6px 24px rgba(14,30,69,.15);animation:rise .3s var(--ease) both}
.cmpbar[hidden]{display:none}
.cmpbar-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:12px;justify-content:center}
.cmpgo{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--ink);color:#fff;font:700 1.15rem/1 var(--cond);padding:12px 22px;border-radius:999px;cursor:pointer}
.cmpgo:hover{background:var(--ink-2)}
.cmpclear{border:0;background:transparent;text-decoration:underline;cursor:pointer;color:var(--muted);font-weight:600}
.cmpdlg{width:min(960px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:var(--r-l);box-shadow:0 20px 60px rgba(14,30,69,.35);color:var(--ink)}
.cmpdlg::backdrop{background:rgba(10,20,48,.55)}
.cmphead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:1}
.cmphead h2{font:800 1.5rem/1 var(--cond);margin:0}
.cmpx{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--ink);background:transparent;border-radius:999px;padding:6px 14px;font-weight:600;cursor:pointer}
.cmpx:hover{background:var(--ink);color:#fff}
.cmpbody{padding:16px 20px 20px;overflow-x:auto}
.results{padding-bottom:70px}

/* Map toggle (mobile only) */
.maptoggle{display:none}

/* Mobile: compact cards, map behind a toggle */
@media (max-width:640px){
  .advice{padding:12px 14px}
  .advice-txt{font-size:1rem}
  .wtiles{grid-template-columns:1fr}
  .wtile{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
  .wlab{flex-basis:100%}
  .opts{gap:8px}
  .otoggle{padding:12px 12px 4px;gap:4px 10px}
  .otop{gap:8px}
  .mchip{width:28px;height:28px}
  .otitle{font-size:1.15rem}
  .oprice{grid-area:1/2/2/3;align-self:start}
  .oprice b{font-size:1.5rem}
  .oprice small{font-size:.75rem}
  .chev-wrap{grid-area:1/3/2/4;align-self:start;padding-top:4px}
  .otimes{grid-area:2/1/3/4;gap:2px 12px;font-size:.9rem}
  .ometa{grid-area:3/1/4/4;font-size:.85rem}
  .obar{padding:4px 12px 10px}
  .oin{padding:0 12px 14px}
  .badge{font-size:.78rem;padding:3px 8px}
  .maptoggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;border:2px solid var(--ink);background:transparent;border-radius:var(--r-m);padding:12px;font-weight:600;cursor:pointer}
  .maptoggle[aria-expanded="true"]{background:var(--ink);color:#fff}
  .mapcard[data-collapsed="true"]{display:none}
  .mapcard{margin-top:10px}
  .cmpdlg{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0}
}

/* Community credit: hero subtitle and footer */
.community{margin:14px 0 0;animation:rise .8s .36s var(--ease) both}
.discord-link{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:500;padding:8px 14px 8px 10px;border-radius:999px;background:#eef0fe;transition:background .2s}
.discord-link:hover{background:#e0e3fd}
.discord-link strong{color:#4752c4}
.discord-ico{width:22px;height:22px;flex-shrink:0;color:#5865f2}
.foot{background:var(--ink);color:#c9d1e6;margin-top:24px;padding:28px 16px calc(28px + env(safe-area-inset-bottom,0px))}
.foot-in{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.foot p{margin:0}
.foot strong{color:#fff}
.foot-by{margin-left:auto!important;font-family:var(--cond);font-size:1.05rem;letter-spacing:.02em}
.discord-btn{display:inline-flex;align-items:center;gap:10px;background:#5865f2;color:#fff;text-decoration:none;font-weight:600;padding:10px 16px;border-radius:var(--r-m);transition:background .2s}
.discord-btn:hover{background:#4752c4}
.discord-btn .discord-ico{color:#fff}
@media (max-width:640px){.foot-by{margin-left:0!important}}

/* Competition logos: filter chips and match tickets */
.comp-logo{height:22px;width:auto;max-width:56px;object-fit:contain;flex-shrink:0}
.seg button .comp-logo{height:26px}
.seg button[aria-pressed="true"] .comp-logo{filter:brightness(0) invert(1)}
.tmeta .comp-logo{height:22px}