/* SNA · Calendrier live — charte Sport News Africa (forest / grass / yellow, Barlow + Outfit) */
.snacal{--f:var(--forest,#154c36);--g:var(--grass,#d4ed85);--y:var(--yellow,#f3d96b);--k:var(--ink,#183026);--l:var(--line,#d5dfd5);--p:var(--paper,#f5f7f3);
  --red:#c9533f;--blue:#3d6fb6;--muted:#5d6f63;
  font-family:Barlow,'Arial Narrow',Arial,sans-serif;color:var(--k);margin:34px 0;max-width:100%;position:relative;font-variant-numeric:tabular-nums}
.snacal *{box-sizing:border-box}
.snacal{line-height:1.35}
.snacal.snacal :is(p,ul,ol,h2,h3,figure,table){margin:0}
.snacal.snacal img{max-width:none;border-radius:0;margin:0}
.snacal.snacal .snacal-sub{margin-top:6px}.snacal.snacal .snacal-kicker{margin-bottom:4px}
.snacal.snacal .snacal-next-when{margin:4px 0 2px}.snacal.snacal .snacal-day h3{margin:18px 0 8px}
.snacal.snacal .snacal-note{margin-bottom:8px}.snacal.snacal .snacal-legend{margin-top:12px}.snacal.snacal .snacal-group h3{margin:0 0 6px 4px}
.snacal.snacal .snacal-match{row-gap:4px}
.snacal button{font:inherit;color:inherit;cursor:pointer}
.snacal h2,.snacal h3{font-family:Outfit,Arial,sans-serif;margin:0}
.snacal-loading,.snacal-error{padding:28px;border:1px solid var(--l);border-radius:4px 40px 4px 4px;background:var(--p);display:flex;gap:12px;align-items:center;color:var(--muted)}
.snacal-ball{width:16px;height:16px;border-radius:50%;background:var(--f);animation:snacal-bounce .7s infinite alternate cubic-bezier(.5,0,.5,1)}
@keyframes snacal-bounce{to{transform:translateY(-9px)}}

/* En-tête */
.snacal-head{background:var(--f);color:#fff;border-radius:4px 90px 4px 4px;padding:26px 26px 22px;position:relative;overflow:hidden}
.snacal-head::after{content:"";position:absolute;right:-60px;top:-60px;width:230px;height:230px;border-radius:50%;border:34px solid rgba(212,237,133,.13);pointer-events:none}
.snacal.is-in .snacal-head::after{animation:snacal-spin 18s linear infinite}
@keyframes snacal-spin{to{transform:rotate(360deg) scale(1.04)}}
.snacal-id{display:flex;gap:16px;align-items:center;position:relative;z-index:1}
.snacal-complogo{width:58px;height:58px;object-fit:contain;background:#fff;border-radius:12px;padding:7px;flex:none}
.snacal-kicker{margin:0 0 4px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--g);font-weight:700;display:flex;align-items:center;gap:8px}
.snacal-title{font-size:clamp(22px,4vw,30px);line-height:1.1;color:#fff}
.snacal-sub{margin:6px 0 0;font-size:13px;color:rgba(255,255,255,.72)}
.snacal-dot{width:9px;height:9px;border-radius:50%;background:var(--g);display:inline-block;position:relative}
.snacal-dot.is-live{background:#ff6a4d}
.snacal-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:snacal-ping 1.6s infinite}
@keyframes snacal-ping{from{transform:scale(1);opacity:.8}to{transform:scale(2.8);opacity:0}}
.snacal-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0 16px;position:relative;z-index:1}
.snacal-kpi{background:rgba(255,255,255,.08);border-radius:10px;padding:12px 12px 10px;border-top:3px solid var(--g)}
.snacal.is-in .snacal-kpi{animation:snacal-from .6s both}
@keyframes snacal-from{from{opacity:0;transform:translateY(12px)}}
.snacal-kpi:nth-child(2){animation-delay:.08s!important}.snacal-kpi:nth-child(3){animation-delay:.16s!important}.snacal-kpi:nth-child(4){animation-delay:.24s!important}
.snacal-kpi b{display:block;font-family:Outfit,Arial,sans-serif;font-size:clamp(22px,4.4vw,32px);line-height:1;color:#fff}
.snacal-kpi span{font-size:12px;color:rgba(255,255,255,.75)}
.snacal-kpi i{font-style:normal;color:var(--g)}
.snacal-progress{height:8px;background:rgba(255,255,255,.14);border-radius:9px;position:relative;z-index:1}
.snacal-progress span{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,var(--g),var(--y));width:var(--p)}
.snacal.is-in:not(.is-static) .snacal-progress span{animation:snacal-grow 1.4s cubic-bezier(.2,.8,.2,1) .2s both}
@keyframes snacal-grow{from{width:0}}
.snacal-progress b{position:absolute;right:0;top:12px;font-size:11px;color:rgba(255,255,255,.7);font-weight:600}
@keyframes snacal-up{to{opacity:1;transform:none}}
.snacal.is-static .snacal-kpi{opacity:1;transform:none;animation:none}

/* Prochain match / direct */
.snacal-next,.snacal-live{margin:14px 0 0;border:1px solid var(--l);border-radius:4px;background:#fff;padding:18px 20px;display:grid;grid-template-columns:1fr 1.4fr auto;gap:18px;align-items:center;border-left:5px solid var(--y)}
.snacal-label{margin:0;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:8px}
.snacal-next-when{margin:4px 0 2px;font-family:Outfit,Arial,sans-serif;font-weight:600;font-size:17px}
.snacal-next-when::first-letter{text-transform:uppercase}
.snacal-next-round{margin:0;font-size:13px;color:var(--muted)}
.snacal-next-match{display:flex;align-items:center;justify-content:center;gap:12px}
.snacal-side{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-weight:700;font-size:14px;min-width:0;flex:1}
.snacal-biglogo{width:46px;height:46px;object-fit:contain}
.snacal-vs{font-family:Outfit,Arial,sans-serif;font-weight:800;color:var(--f);background:var(--g);border-radius:20px;padding:4px 10px;font-size:12px}
.snacal-count{display:flex;gap:6px}
.snacal-count div{background:var(--f);color:#fff;border-radius:8px;width:46px;padding:7px 0 5px;text-align:center;overflow:hidden}
.snacal-count b{display:block;font-family:Outfit,Arial,sans-serif;font-size:20px;line-height:1.1}
.snacal-count b.tick{animation:snacal-tick .35s ease-out}
@keyframes snacal-tick{from{transform:translateY(-60%);opacity:0}}
.snacal-count span{font-size:10px;color:var(--g);text-transform:uppercase;letter-spacing:.08em}
.snacal-live{grid-template-columns:1fr;border-left-color:#ff6a4d}
.snacal-live-list{display:grid;gap:8px}
.snacal-live-item{display:grid;grid-template-columns:24px 1fr auto 1fr 24px 38px;gap:8px;align-items:center;font-weight:700}
.snacal-live-item span:nth-of-type(1){text-align:right}
.snacal-live-item b{font-family:Outfit,Arial,sans-serif;background:var(--k);color:#fff;border-radius:6px;padding:3px 9px}
.snacal-live-item em{color:#d1452b;font-style:normal;font-size:13px;animation:snacal-blink 1.2s infinite}
@keyframes snacal-blink{50%{opacity:.35}}

/* Onglets */
.snacal-tabs{display:flex;gap:4px;margin:22px 0 14px;border-bottom:2px solid var(--l)}
.snacal-tabs button{border:0;background:none;padding:10px 16px;font-weight:700;font-size:15px;color:var(--muted);position:relative;margin-bottom:-2px;border-bottom:3px solid transparent;transition:color .2s}
.snacal-tabs button[aria-selected=true]{color:var(--f);border-bottom-color:var(--f)}
.snacal-tabs button:hover{color:var(--k)}

/* Outils calendrier */
.snacal-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.snacal-search{flex:1;min-width:220px;display:flex;align-items:center;gap:8px;border:1px solid var(--l);border-radius:30px;padding:0 14px;background:#fff}
.snacal-search span{color:var(--muted);font-size:18px}
.snacal-search input{border:0;outline:0;padding:10px 0;font:inherit;width:100%;background:none}
.snacal-search:focus-within{border-color:var(--f);box-shadow:0 0 0 3px rgba(21,76,54,.12)}
.snacal-clear{border:1px solid var(--f);background:var(--f);color:#fff!important;border-radius:30px;padding:9px 14px;font-size:13px;font-weight:700}
.snacal-note{font-size:13px;color:var(--muted);margin:0 0 8px}
.snacal-rounds{display:flex;align-items:stretch;gap:6px;margin-bottom:16px}
.snacal-arrow{border:1px solid var(--l);background:#fff;border-radius:8px;width:34px;font-size:20px;flex:none}
.snacal-arrow:hover{background:var(--g)}
.snacal-chips{display:flex;gap:6px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;flex:1;padding:2px}
.snacal-chips::-webkit-scrollbar{display:none}
.snacal-chip{flex:none;border:1px solid var(--l);background:#fff;border-radius:8px;padding:7px 12px;text-align:left;line-height:1.15;transition:background .2s,border-color .2s,transform .2s}
.snacal-chip b{display:block;font-size:13px;white-space:nowrap}
.snacal-chip span{font-size:11px;color:var(--muted);white-space:nowrap}
.snacal-chip.is-done{background:var(--p)}
.snacal-chip.is-live{border-color:#ff6a4d}
.snacal-chip:hover{transform:translateY(-2px)}
.snacal-chip.is-on{background:var(--f);border-color:var(--f);color:#fff}
.snacal-chip.is-on span{color:var(--g)}

/* Matchs */
.snacal-day h3{font-size:15px;font-weight:700;margin:18px 0 8px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:6px;border-bottom:1px dashed var(--l)}
.snacal-day h3 span{font-family:Barlow,Arial,sans-serif;font-size:12px;font-weight:600;color:var(--muted)}
.snacal-match{display:grid;grid-template-columns:minmax(0,1fr) minmax(104px,auto) minmax(0,1fr);align-items:center;gap:10px;padding:10px 12px;border-radius:8px;background:#fff;border:1px solid var(--l);margin-bottom:6px;transition:transform .2s,box-shadow .2s,border-color .2s}
.snacal-match:hover{transform:translateX(3px);border-color:var(--f);box-shadow:0 6px 18px rgba(24,48,38,.08)}
.snacal-panel:not(.no-anim) .snacal-match{opacity:0;animation:snacal-slide .45s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*35ms)}
@keyframes snacal-slide{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.snacal-match.is-live{border-color:#ff9a86;background:linear-gradient(90deg,#fff 0,#fff4f1 50%,#fff 100%);background-size:200% 100%;animation:snacal-shine 2.5s linear infinite!important;opacity:1}
@keyframes snacal-shine{to{background-position:-200% 0}}
.snacal-team{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;min-width:0}
.snacal-team span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snacal-team .short{display:none}
.snacal-team.h{justify-content:flex-end;text-align:right}
.snacal-team.lost{color:var(--muted);font-weight:600}
.snacal-team.is-af span,.snacal-side.is-af span,tr.is-af .t span{box-shadow:inset 0 -6px 0 var(--g)}
.snacal-logo{width:26px;height:26px;object-fit:contain;flex:none}
.snacal-logo-empty{display:inline-block;border-radius:50%;background:var(--p)}
.snacal-mid{text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px}
.snacal-time{font-family:Outfit,Arial,sans-serif;font-weight:700;font-size:16px;background:var(--p);border:1px solid var(--l);border-radius:6px;padding:4px 10px}
.snacal-score{display:flex;align-items:center;gap:6px;font-family:Outfit,Arial,sans-serif;font-size:19px;font-weight:800}
.snacal-score b{white-space:nowrap;background:var(--k);color:#fff;min-width:30px;border-radius:6px;padding:2px 6px;text-align:center}
.snacal-score b.w{background:var(--f)}
.snacal-score i{font-style:normal;color:var(--muted)}
.snacal-score.flash b{animation:snacal-goal 1.4s ease-out 2}
@keyframes snacal-goal{0%,100%{transform:none}20%{transform:scale(1.35);background:var(--y);color:var(--k)}}
.snacal-st{font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.snacal-st.is-live{color:#d1452b;animation:snacal-blink 1.2s infinite}
.snacal-st.is-warn{color:#a8761b}
.snacal-meta{grid-column:1/-1;margin:0;text-align:center;font-size:11.5px;color:var(--muted)}
.snacal-empty{color:var(--muted);padding:18px;background:var(--p);border-radius:8px;text-align:center}

/* Classements */
.snacal-groups.is-multi{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.snacal-group{background:#fff;border:1px solid var(--l);border-radius:4px 30px 4px 4px;padding:12px 12px 6px;overflow-x:auto}
.snacal-panel:not(.no-anim) .snacal-group{opacity:0;animation:snacal-slide .5s forwards;animation-delay:calc(var(--g)*60ms)}
.snacal-group h3{font-size:15px;color:var(--f);margin:0 0 6px 4px}
.snacal-table{width:100%;border-collapse:collapse;font-size:14px}
.snacal-table th{white-space:nowrap;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700;padding:6px 5px;text-align:center;border-bottom:1px solid var(--l)}
.snacal-table td{padding:7px 5px;text-align:center;border-bottom:1px solid #edf1ec;position:relative}
.snacal-table th.t,.snacal-table td.t{text-align:left}
.snacal-table td.t{display:flex;align-items:center;gap:8px;font-weight:700;min-width:150px}
.snacal-table td.t .snacal-logo{width:22px;height:22px}
.snacal-table td.r{font-weight:800;width:30px;font-family:Outfit,Arial,sans-serif;box-shadow:inset 4px 0 0 transparent}
.snacal-table td.pts b{font-family:Outfit,Arial,sans-serif;font-size:16px}
.snacal-table tbody tr{background:linear-gradient(90deg,rgba(212,237,133,.38) var(--bb,0%),transparent var(--bb,0%));transition:--bb 1s}
.snacal-panel:not(.no-anim) .snacal-table tbody tr{opacity:0;animation:snacal-row .5s forwards,snacal-bar 1.1s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--g,0)*60ms + var(--i)*45ms)}
.snacal-panel.no-anim .snacal-table tbody tr{--bb:var(--b)}
@property --bb{syntax:'<percentage>';inherits:false;initial-value:0%}
@keyframes snacal-row{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes snacal-bar{from{--bb:0%}to{--bb:var(--b)}}
.snacal-table tr.z-up td.r,.snacal-table tr.z-ucl td.r{box-shadow:inset 4px 0 0 var(--f)}
.snacal-table tr.z-ucl2 td.r{box-shadow:inset 4px 0 0 #4f8f6c}
.snacal-table tr.z-uel td.r{box-shadow:inset 4px 0 0 var(--blue)}
.snacal-table tr.z-uecl td.r{box-shadow:inset 4px 0 0 #7fb0d9}
.snacal-table tr.z-warn td.r{box-shadow:inset 4px 0 0 #e2a23a}
.snacal-table tr.z-down td.r{box-shadow:inset 4px 0 0 var(--red)}
.snacal-table td.form{white-space:nowrap}
.snacal-table td.form i{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:4px;font-style:normal;font-size:10px;font-weight:800;color:#fff;margin:0 1px;background:#9aa69e}
.snacal-table td.form i.f-W{background:var(--f)}.snacal-table td.form i.f-D{background:#b6a24a}.snacal-table td.form i.f-L{background:var(--red)}
.snacal-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted);margin:12px 0 0}
.snacal-legend span{display:flex;align-items:center;gap:6px}
.snacal-legend i{width:12px;height:12px;border-radius:3px;background:var(--f)}
.snacal-legend .z-ucl2 i{background:#4f8f6c}.snacal-legend .z-uel i{background:var(--blue)}.snacal-legend .z-uecl i{background:#7fb0d9}.snacal-legend .z-warn i{background:#e2a23a}.snacal-legend .z-down i{background:var(--red)}

/* Chiffres clés */
.snacal-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.snacal-card{margin:0;background:#fff;border:1px solid var(--l);border-radius:4px 30px 4px 4px;padding:16px}
.snacal-card.wide{grid-column:1/-1}
.snacal-card figcaption{font-family:Outfit,Arial,sans-serif;font-weight:700;font-size:15px;margin-bottom:12px;color:var(--f)}
.snacal-bars{width:100%;height:auto;overflow:visible}
.snacal-bars line{stroke:var(--l);stroke-width:1.5}
.snacal-bars rect{fill:var(--f);transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*70ms)}
.snacal-bars .bar:hover rect{fill:#2b7a57}
.snacal-bars text{font-family:Barlow,Arial,sans-serif;text-anchor:middle}
.snacal-bars text.v{font-size:13px;font-weight:700;fill:var(--k);opacity:0;transition:opacity .4s;transition-delay:calc(.5s + var(--i)*70ms)}
.snacal-bars text.l{font-size:11px;fill:var(--muted)}
.snacal-card.is-in .snacal-bars rect,.charts-in .snacal-bars rect{transform:scaleY(1)}
.snacal-card.is-in .snacal-bars text.v,.charts-in .snacal-bars text.v{opacity:1}
.snacal-donut{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.snacal-donut svg{width:140px;height:140px;flex:none;transform:rotate(-90deg)}
.snacal-donut circle{fill:none;stroke-width:20}
.snacal-donut circle.bg{stroke:var(--p)}
.snacal-donut circle:not(.bg){stroke-dasharray:0 999;stroke-dashoffset:var(--off);transition:stroke-dasharray 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*250ms)}
.snacal-card.is-in .snacal-donut circle:not(.bg),.charts-in .snacal-donut circle:not(.bg){stroke-dasharray:var(--len) 999}
.snacal-donut text{transform:rotate(90deg);transform-origin:70px 70px;text-anchor:middle;font-family:Outfit,Arial,sans-serif;font-weight:800;font-size:24px;fill:var(--k)}
.snacal-donut text.s{font-size:11px;font-weight:600;fill:var(--muted);font-family:Barlow,Arial,sans-serif}
.dh{stroke:var(--f)}.dd{stroke:var(--y)}.da{stroke:#7fb0d9}
.snacal-donut ul{list-style:none;margin:0;padding:0;font-size:13px;display:grid;gap:7px}
.snacal-donut li{display:flex;align-items:center;gap:7px}
.snacal-donut li i{width:12px;height:12px;border-radius:3px}
.snacal-donut li.dh i{background:var(--f)}.snacal-donut li.dd i{background:var(--y)}.snacal-donut li.da i{background:#7fb0d9}
.snacal-donut li b{margin-left:auto;padding-left:8px}
.snacal-top{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.snacal-top li{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;font-size:13.5px;font-weight:700;position:relative;padding-bottom:5px}
.snacal-top li .snacal-logo{width:22px;height:22px}
.snacal-top li span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.snacal-top li i{position:absolute;left:30px;right:0;bottom:0;height:3px;border-radius:3px;background:var(--p)}
.snacal-top li i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:var(--g);transition:width 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*80ms)}
.snacal-card.is-in .snacal-top li i::after,.charts-in .snacal-top li i::after{width:var(--w)}
.snacal-fact p{display:flex;align-items:center;justify-content:center;gap:12px;margin:0;font-weight:700;font-size:16px;flex-wrap:wrap}
.snacal-fact p b{font-family:Outfit,Arial,sans-serif;font-size:26px;background:var(--y);border-radius:8px;padding:2px 12px}
.snacal-fact small{display:block;text-align:center;color:var(--muted);margin-top:8px}
.snacal-heat{display:grid;grid-template-columns:repeat(14,1fr);gap:5px;height:150px;align-items:end}
.snacal-heat div{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px}
.snacal-heat i{display:block;width:100%;height:var(--h);border-radius:5px 5px 2px 2px;background:linear-gradient(var(--f),#2b7a57);transform-origin:bottom;transform:scaleY(0);transition:transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*45ms)}
.snacal-heat .z i{background:var(--l)}
.snacal-heat b{font-size:12px;color:var(--f)}
.snacal-heat span{font-size:10px;color:var(--muted);text-align:center;line-height:1.15;text-transform:capitalize}
.snacal-card.is-in .snacal-heat i,.charts-in .snacal-heat i{transform:scaleY(1)}

.snacal-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px;font-size:12px;color:var(--muted);padding-top:10px;border-top:1px solid var(--l)}
.snacal-tz{border:0;background:none;text-decoration:underline;text-underline-offset:4px;color:var(--f)!important;font-size:12px;font-weight:700;padding:0}

/* Mobile */
@media (max-width:640px){
  .snacal-head{padding:20px 16px 18px;border-radius:4px 50px 4px 4px}
  .snacal-kpis{grid-template-columns:repeat(2,1fr)}
  .snacal-next{grid-template-columns:1fr;text-align:center;gap:12px}
  .snacal-next .snacal-label{justify-content:center}
  .snacal-count{justify-content:center}
  .snacal-match{grid-template-columns:minmax(0,1fr) minmax(70px,auto) minmax(0,1fr);padding:9px 8px;gap:6px}
  .snacal-team{font-size:13.5px;gap:6px}
  .snacal-team .full{display:none}.snacal-team .short{display:inline}
  .snacal-logo{width:22px;height:22px}
  .snacal-score{font-size:16px}.snacal-score b{min-width:24px}
  .snacal-stats{grid-template-columns:1fr}
  .snacal-groups.is-multi{grid-template-columns:1fr}
  .snacal-table .xs{display:none}
  .snacal-tabs button{padding:10px 10px;font-size:14px}
  .snacal-heat{gap:3px}
  .snacal-live-item{grid-template-columns:20px 1fr auto 1fr 20px;font-size:13px}
  .snacal-live-item em{grid-column:1/-1;text-align:center}
}
@media (prefers-reduced-motion:reduce){.snacal *{animation:none!important;transition:none!important}.snacal-kpi{opacity:1;transform:none}.snacal-progress span{width:var(--p)}}