/* Espérance de Tunis — charte « Sang et Or » (ar RTL / fr LTR) */
:root{
  --red:#C8102E;--red-d:#8C0A1E;--red-dd:#4A0610;--gold:#FFC72C;--gold-d:#E0A800;
  --bg:#F5F3EE;--card:#FFFFFF;--card-2:#FAF8F3;--text:#15161B;--muted:#5D6170;--line:#E5E1D6;
  --ink:#0F1014;--ink-2:#1A1C22;--win:#14915B;--draw:#B7860B;--loss:#C8102E;
  --radius:16px;--shadow:0 1px 2px rgba(16,17,22,.05),0 8px 24px rgba(16,17,22,.06);
  --f:'Cairo',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;--fd:'Barlow Condensed','Cairo',sans-serif;
  --tab-h:64px;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0C0D10;--card:#15171C;--card-2:#1B1D23;--text:#F2F0EA;--muted:#A0A4B1;--line:#272A33;--ink:#08090B;--ink-2:#121318;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0C0D10;--card:#15171C;--card-2:#1B1D23;--text:#F2F0EA;--muted:#A0A4B1;--line:#272A33;--ink:#08090B;--ink-2:#121318;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--f);background:var(--bg);color:var(--text);font-size:17px;line-height:1.75;
  padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));-webkit-font-smoothing:antialiased;overflow-x:hidden}
.lang-fr{font-size:16.5px;line-height:1.7}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.35;margin:0 0 .5em;font-weight:800}
.lang-fr h1,.lang-fr h2,.lang-fr h3{line-height:1.2}
p{margin:0 0 1em}
button{font:inherit;cursor:pointer}
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:16px}
.skip{position:absolute;inset-inline-start:-999px;top:8px;z-index:100;background:var(--gold);color:#000;padding:8px 14px;border-radius:8px}
.skip:focus{inset-inline-start:8px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}

/* Stripes : la signature visuelle (maillot rayé rouge/or) */
.stripes{height:5px;background:repeating-linear-gradient(90deg,var(--red) 0 22px,var(--gold) 22px 44px)}

/* Topbar + ticker */
.topbar{background:linear-gradient(90deg,var(--red-dd),var(--red-d));color:#fff;font-size:.82rem;line-height:1}
.topbar-in{display:flex;align-items:center;gap:14px;height:38px;overflow:hidden}
.tb-match{display:flex;align-items:center;gap:7px;white-space:nowrap;flex:none;padding-inline-end:14px;border-inline-end:1px solid rgba(255,255,255,.2);height:100%}
.tb-match strong{font-weight:700;color:var(--gold)}
.tb-count{font-family:var(--fd);font-weight:700;font-size:.95rem;background:rgba(0,0,0,.25);padding:4px 8px;border-radius:6px;direction:ltr}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(255,199,44,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(255,199,44,0)}100%{box-shadow:0 0 0 0 rgba(255,199,44,0)}}
.ticker{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.ticker-track{display:flex;gap:34px;width:max-content;animation:tick 70s linear infinite}
.lang-ar .ticker-track{animation-name:tick-rtl}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker a{display:flex;align-items:center;gap:7px;white-space:nowrap;opacity:.92}
.ticker a:hover{opacity:1;text-decoration:underline}
.ticker .ic{color:var(--gold)}
@keyframes tick{to{transform:translateX(-50%)}}
@keyframes tick-rtl{to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}.dot{animation:none}html{scroll-behavior:auto}}
@media (max-width:720px){.ticker{display:none}.tb-match{border:0;flex:1;justify-content:center}}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--ink);color:#fff;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.hd-in{display:flex;align-items:center;gap:18px;height:66px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{width:34px;height:auto;filter:drop-shadow(0 2px 6px rgba(255,199,44,.35))}
.brand-txt{display:flex;flex-direction:column;line-height:1.15}
.brand-txt strong{font-size:1.3rem;font-weight:900;letter-spacing:.2px}
.lang-fr .brand-txt strong{font-family:var(--fd);text-transform:uppercase;font-size:1.45rem;letter-spacing:.5px}
.brand-txt small{font-size:.72rem;color:var(--gold);font-weight:600}
.main-nav{display:flex;gap:2px;margin-inline-start:auto}
.main-nav a{padding:8px 11px;border-radius:10px;font-weight:700;font-size:.93rem;color:rgba(255,255,255,.82);transition:background .2s,color .2s}
.main-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.main-nav a[aria-current]{color:var(--ink);background:var(--gold)}
.hd-tools{display:flex;align-items:center;gap:6px}
.lang-switch{display:flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.22);padding:6px 11px;border-radius:999px;font-weight:700;font-size:.85rem}
.lang-switch:hover{border-color:var(--gold);color:var(--gold)}
.icon-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:0;background:rgba(255,255,255,.07);color:#fff}
.icon-btn:hover{background:rgba(255,255,255,.14)}
.i-sun{display:none}
:root[data-theme="dark"] .i-sun{display:block}:root[data-theme="dark"] .i-moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .i-sun{display:block}:root:not([data-theme="light"]) .i-moon{display:none}}
.menu-btn{display:none}
@media (max-width:1100px){.main-nav{display:none}.menu-btn{display:grid}.hd-tools{margin-inline-start:auto}}
@media (max-width:480px){.lang-switch span{display:none}.lang-switch{padding:8px}.brand-txt small{display:none}}

/* Drawer */
.drawer{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55);backdrop-filter:blur(3px)}
.drawer-panel{position:absolute;inset-block:0;inset-inline-end:0;width:min(86vw,360px);background:var(--ink);color:#fff;padding:18px;overflow-y:auto;animation:slide .25s ease}
.lang-ar .drawer-panel{animation-name:slide-rtl}
@keyframes slide{from{transform:translateX(100%)}}
@keyframes slide-rtl{from{transform:translateX(-100%)}}
.drawer-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.drawer-nav{display:flex;flex-direction:column}
.drawer-nav a{display:flex;align-items:center;gap:12px;padding:13px 10px;border-bottom:1px solid rgba(255,255,255,.08);font-weight:700}
.drawer-nav a .ic{color:var(--gold)}
.drawer-nav a[aria-current]{color:var(--gold)}

/* Tab bar mobile */
.tabbar{position:fixed;inset-inline:0;bottom:0;z-index:60;display:none;height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  background:color-mix(in srgb,var(--ink) 94%,transparent);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.08)}
.tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:rgba(255,255,255,.7);font-size:.7rem;font-weight:700;background:none;border:0}
.tabbar .ic{width:22px;height:22px}
.tabbar [aria-current]{color:var(--gold)}
@media (max-width:900px){.tabbar{display:flex}}
@media (min-width:901px){body{padding-bottom:0}}

/* Progress bar lecture */
.progress{position:fixed;top:0;inset-inline-start:0;height:3px;width:0;z-index:90;background:linear-gradient(90deg,var(--gold),var(--red))}

/* Sections & titres */
main{display:block;min-height:60vh}
.section{padding-block:34px}
.sec-hd{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:18px}
.sec-hd h2{font-size:1.55rem;margin:0;display:flex;align-items:center;gap:10px}
.sec-hd h2::before{content:"";width:6px;height:1.3em;border-radius:3px;background:linear-gradient(var(--red),var(--gold))}
.sec-hd a{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--red);font-size:.95rem;white-space:nowrap}
.lang-ar .sec-hd a .ic,.lang-ar .more .ic,.lang-ar .btn .ic-arrow{transform:scaleX(-1)}
.page-hero{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding-block:38px 34px}
.page-hero::after{content:"";position:absolute;inset-block:0;inset-inline-end:-80px;width:340px;background:repeating-linear-gradient(90deg,var(--red) 0 26px,var(--gold) 26px 52px);opacity:.14;transform:skewX(-12deg)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-size:clamp(1.7rem,4.2vw,2.6rem);font-weight:900;margin-bottom:.3em}
.page-hero p{color:rgba(255,255,255,.78);max-width:760px;margin:0;font-size:1.05rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0 0 12px;font-size:.83rem;color:rgba(255,255,255,.65)}
.crumbs li+li::before{content:"/";margin-inline-end:6px;opacity:.5}
.crumbs a:hover{color:var(--gold)}
.light-crumbs .crumbs ol{color:var(--muted)}

/* Cartes */
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s}
a.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--red) 35%,var(--line))}
.news-card{padding:18px 18px 16px;display:flex;flex-direction:column;gap:8px;height:100%}
.news-card h3{font-size:1.08rem;margin:0;font-weight:800;line-height:1.5}
.lang-fr .news-card h3{line-height:1.3}
.news-card p{color:var(--muted);font-size:.93rem;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-card .meta{margin-top:auto;padding-top:6px}
.news-card.compact{padding:14px 16px}
.news-card.compact h3{font-size:.98rem}
.kicker{align-self:flex-start;font-size:.72rem;font-weight:800;letter-spacing:.3px;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
.cat-africa{background:color-mix(in srgb,#0E8A5F 14%,transparent);color:#0E8A5F}
.cat-mercato{background:color-mix(in srgb,#6D3FD1 14%,transparent);color:#7C4DE0}
.cat-squad{background:color-mix(in srgb,#0B6FB8 14%,transparent);color:#1C82CF}
.cat-club{background:color-mix(in srgb,var(--gold-d) 18%,transparent);color:#A87900}
.meta{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.82rem;flex-wrap:wrap}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}

/* Hero accueil */
.hero{background:radial-gradient(1200px 400px at 85% -10%,rgba(200,16,46,.55),transparent 60%),var(--ink);color:#fff;padding-block:26px 34px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 60px,rgba(255,255,255,.025) 60px 120px);pointer-events:none}
.hero .wrap{position:relative}
.hero h1{font-size:clamp(1.15rem,2.4vw,1.45rem);font-weight:800;color:rgba(255,255,255,.85);margin:0 0 16px}
.hero h1 span{color:var(--gold)}
.hero-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:18px}
@media (max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.lead{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:380px;padding:28px;border-radius:22px;overflow:hidden;
  background:linear-gradient(160deg,#20222A 0%,var(--red-d) 60%,var(--red-dd) 100%);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.lead::before{content:"";position:absolute;inset-block:-20%;inset-inline-end:-12%;width:55%;background:repeating-linear-gradient(90deg,var(--red) 0 30px,var(--gold) 30px 60px);opacity:.16;transform:skewX(-14deg)}
.lead::after{content:"";position:absolute;inset-inline-end:24px;top:24px;width:120px;height:146px;background:url(/images/logo-esperance-de-tunis.png) center/contain no-repeat;opacity:.18;filter:grayscale(.2)}
.lead>*{position:relative;z-index:1}
.lead .kicker{background:var(--gold);color:#111}
.lead h2{font-size:clamp(1.45rem,3.3vw,2.25rem);font-weight:900;margin:14px 0 10px;line-height:1.45}
.lang-fr .lead h2{line-height:1.18}
.lead p{color:rgba(255,255,255,.8);margin:0 0 14px;max-width:44rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lead .meta{color:rgba(255,255,255,.7)}
.lead:hover h2{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:6px}
.hero-side{display:flex;flex-direction:column;gap:14px}
.hero-sub{display:flex;flex-direction:column;gap:10px}
.hero-sub a{display:block;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);font-weight:700;line-height:1.5;transition:background .2s}
.hero-sub a:hover{background:rgba(255,255,255,.11)}
.hero-sub small{display:block;color:var(--gold);font-size:.75rem;font-weight:700;margin-bottom:2px}

/* Match card */
.match-card{background:linear-gradient(170deg,#1C1E25,#121318);color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:18px;box-shadow:0 14px 36px rgba(0,0,0,.3)}
.mc-top{display:flex;justify-content:space-between;gap:8px;font-size:.8rem;color:rgba(255,255,255,.7);font-weight:700}
.mc-comp{color:var(--gold)}
.mc-teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:16px 0 12px;text-align:center}
.mc-team{display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:800;font-size:.95rem;line-height:1.3}
.crest{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25);overflow:hidden}
.crest img{width:72%;height:72%;object-fit:contain}
.crest-txt{background:linear-gradient(135deg,#2A2D36,#3A3E4A);color:#fff;font-family:var(--fd);font-weight:800;font-size:1.25rem}
.mc-vs{font-family:var(--fd);font-weight:800;font-size:1.4rem;color:rgba(255,255,255,.45)}
.mc-score{display:flex;align-items:center;gap:8px;font-family:var(--fd);font-size:2.6rem;font-weight:800;direction:ltr;line-height:1}
.mc-score i{font-style:normal;color:rgba(255,255,255,.35);font-size:1.6rem}
.mc-score.res-win b{color:#fff}
.mc-info{display:flex;justify-content:center;align-items:center;gap:7px;font-size:.88rem;color:rgba(255,255,255,.75)}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px;direction:ltr}
.lang-ar .countdown{direction:rtl}
.countdown span{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px 4px;text-align:center}
.countdown b{display:block;font-family:var(--fd);font-size:1.7rem;font-weight:800;color:var(--gold);line-height:1.1}
.countdown small{font-size:.7rem;color:rgba(255,255,255,.6);font-weight:700}
.match-card.big .crest{width:72px;height:72px}
.match-card.big .mc-score{font-size:3.2rem}
.live-badge{display:inline-flex;align-items:center;gap:6px;background:var(--red);color:#fff;font-weight:800;font-size:.8rem;padding:4px 10px;border-radius:999px}

/* Form guide */
.form-guide{display:flex;gap:6px;direction:ltr}
.lang-ar .form-guide{direction:rtl}
.fg{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;font-weight:800;font-size:.8rem;color:#fff}
.fg.win{background:var(--win)}.fg.draw{background:var(--draw)}.fg.loss{background:var(--loss)}
.lang-ar .fg{font-size:.68rem}

/* Widgets */
.widget{padding:18px}
.widget h3{display:flex;align-items:center;gap:8px;font-size:1.08rem;margin-bottom:12px}
.widget h3 .ic{color:var(--red)}
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start}
@media (max-width:1000px){.home-grid{grid-template-columns:minmax(0,1fr)}}
.side{display:flex;flex-direction:column;gap:16px;position:sticky;top:84px}
@media (max-width:1000px){.side{position:static}}

/* Classement */
.table-wrap{overflow-x:auto}
.standings{width:100%;border-collapse:collapse;font-size:.92rem}
.standings th{font-size:.75rem;color:var(--muted);font-weight:700;text-align:center;padding:8px 6px;border-bottom:1px solid var(--line)}
.standings td{padding:9px 6px;text-align:center;border-bottom:1px solid var(--line);font-family:var(--fd);font-size:1.05rem;font-weight:700}
.standings td.tm{text-align:start;font-family:var(--f);font-size:.92rem;font-weight:700;white-space:nowrap}
.standings th.tm{text-align:start}
.standings tr.est td{background:color-mix(in srgb,var(--gold) 16%,transparent)}
.standings tr.est td.tm{color:var(--red)}
.standings .pos{width:30px;color:var(--muted)}
.standings tr:first-child .pos{color:var(--gold-d)}

/* Pronostic */
.predict .teams{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;text-align:center;margin:10px 0 14px}
.predict .teams .crest{width:46px;height:46px;margin-inline:auto;margin-bottom:6px}
.predict label{display:block;font-weight:700;font-size:.85rem;line-height:1.3}
.stepper{display:flex;align-items:center;justify-content:center;gap:6px;direction:ltr;margin-top:8px}
.stepper button{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--card-2);color:var(--text);font-weight:800;font-size:1.1rem}
.stepper output{min-width:34px;font-family:var(--fd);font-size:2rem;font-weight:800;text-align:center}
.predict .sep{font-family:var(--fd);font-size:1.6rem;color:var(--muted)}
.bars{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--line);margin:12px 0 6px;direction:ltr}
.lang-ar .bars{direction:rtl}
.bars span{display:block;height:100%;transition:width .6s}
.bars .b1{background:var(--red)}.bars .b2{background:var(--draw)}.bars .b3{background:#6B7080}
.bars-legend{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);gap:6px;flex-wrap:wrap}
.bars-legend b{color:var(--text);font-family:var(--fd);font-size:.95rem}
.predict-msg{font-size:.85rem;color:var(--muted);margin-top:8px}
.predict-msg.ok{color:var(--win);font-weight:700}

/* Quiz */
.quiz-q{font-weight:800;font-size:1.05rem;line-height:1.55;margin-bottom:12px}
.quiz-opts{display:grid;gap:8px}
.quiz-opts button{text-align:start;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card-2);color:var(--text);font-weight:700;transition:border-color .2s,background .2s}
.quiz-opts button:hover:not(:disabled){border-color:var(--red)}
.quiz-opts button.right{background:color-mix(in srgb,var(--win) 16%,var(--card));border-color:var(--win)}
.quiz-opts button.wrong{background:color-mix(in srgb,var(--loss) 14%,var(--card));border-color:var(--loss)}
.quiz-feedback{margin-top:12px;font-size:.92rem}
.streak{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:#E2551B;font-size:.9rem}
.quiz-big{max-width:720px;margin-inline:auto;padding:24px}
.quiz-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-weight:700;color:var(--muted);font-size:.9rem}
.quiz-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:18px}
.quiz-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--gold));transition:width .4s}
.quiz-result{text-align:center}
.quiz-result .score{font-family:var(--fd);font-size:4rem;font-weight:800;color:var(--red);line-height:1}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:12px;border:0;font-weight:800;font-size:.95rem;transition:transform .15s,filter .15s}
.btn:hover{filter:brightness(1.06)}.btn:active{transform:scale(.98)}
.btn-red{background:var(--red);color:#fff}.btn-gold{background:var(--gold);color:#111}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn-sm{padding:7px 12px;font-size:.85rem}
.btn-block{width:100%}

/* Article */
.article-hero{background:var(--ink);color:#fff;padding-block:30px 40px;position:relative;overflow:hidden}
.article-hero::after{content:"";position:absolute;inset-block:0;inset-inline-end:-60px;width:260px;background:repeating-linear-gradient(90deg,var(--red) 0 22px,var(--gold) 22px 44px);opacity:.12;transform:skewX(-12deg)}
.article-hero .wrap{position:relative;z-index:1;max-width:860px}
.article-hero h1{font-size:clamp(1.6rem,4.4vw,2.55rem);font-weight:900;line-height:1.45;margin:12px 0 14px}
.lang-fr .article-hero h1{line-height:1.18}
.article-hero .meta{color:rgba(255,255,255,.7);font-size:.88rem;gap:14px}
.article-hero .meta span{display:inline-flex;align-items:center;gap:6px}
.article-body{max-width:860px;margin-inline:auto;padding-inline:16px}
.article-card{margin-top:-22px;position:relative;z-index:2;padding:28px clamp(18px,4vw,40px)}
.standfirst{font-size:1.18rem;font-weight:700;line-height:1.75;padding-inline-start:16px;border-inline-start:4px solid var(--gold);margin-bottom:22px}
.lang-fr .standfirst{line-height:1.6}
.prose{font-size:1.1rem;line-height:2}
.lang-fr .prose{font-size:1.07rem;line-height:1.8}
.prose p{margin-bottom:1.15em}
.prose p:first-of-type::first-letter{color:var(--red)}
.lang-fr .prose p:first-of-type::first-letter{font-size:3.2em;float:left;line-height:.9;margin:.06em .1em 0 0;font-weight:900;font-family:var(--fd)}
.alt-lang{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--red);font-size:.92rem;margin-top:4px}
.engage{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.like-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--card-2);color:var(--text);font-weight:800}
.like-btn.liked{background:var(--red);border-color:var(--red);color:#fff}
.like-btn.liked .ic{fill:currentColor}
.like-btn.pop{animation:pop .35s}
@keyframes pop{50%{transform:scale(1.15)}}
.share-row{display:flex;gap:8px;margin-inline-start:auto}
.share-btn{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:0;color:#fff}
.share-btn.wa{background:#25D366}.share-btn.fb{background:#1877F2}.share-btn.xx{background:#111}.share-btn.tg{background:#229ED9}.share-btn.cp{background:var(--card-2);color:var(--text);border:1px solid var(--line)}
.share-btn.cp.done{background:var(--win);color:#fff}
.sticky-share{position:fixed;inset-inline:12px;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 10px);z-index:55;display:none;align-items:center;gap:8px;padding:8px 10px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.2);transform:translateY(150%);transition:transform .3s}
.sticky-share.show{transform:none}
.sticky-share span{font-weight:800;font-size:.85rem;margin-inline-end:auto}
.sticky-share .share-btn{width:38px;height:38px}
@media (max-width:900px){.sticky-share{display:flex}}
.comments{margin-top:26px}
.c-form{display:grid;gap:10px}
.c-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.c-row{grid-template-columns:1fr}}
input,textarea,select{font:inherit;color:var(--text);background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:11px 14px;width:100%}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 18%,transparent)}
.c-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:.83rem;color:var(--muted)}
.form-msg{font-size:.88rem;margin:0}
.form-msg.ok{color:var(--win);font-weight:700}.form-msg.err{color:var(--loss);font-weight:700}
.c-list{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.c-item{display:flex;gap:12px}
.c-av{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--red),var(--gold));color:#fff;font-weight:800}
.c-item b{font-size:.92rem}.c-item time{font-size:.78rem;color:var(--muted);margin-inline-start:8px}
.c-item p{margin:2px 0 0;font-size:.95rem;white-space:pre-line}
.c-empty{color:var(--muted);font-size:.92rem}

/* Listes / pagination */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chips a{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:700;font-size:.88rem}
.chips a[aria-current]{background:var(--red);border-color:var(--red);color:#fff}
.pager{display:flex;justify-content:center;gap:8px;margin-top:26px;flex-wrap:wrap}
.pager a,.pager span{min-width:42px;height:42px;display:grid;place-items:center;padding-inline:12px;border-radius:12px;border:1px solid var(--line);background:var(--card);font-weight:800;font-family:var(--fd);font-size:1.05rem}
.pager span[aria-current]{background:var(--red);color:#fff;border-color:var(--red)}

/* Liste de matchs */
.fixture{display:grid;grid-template-columns:110px 1fr auto 1fr 90px;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.fixture:last-child{border-bottom:0}
.fx-date{font-size:.82rem;color:var(--muted);line-height:1.35}
.fx-date b{display:block;color:var(--text);font-size:.92rem}
.fx-team{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.93rem}
.fx-team.home{justify-content:flex-end;text-align:end}
.fx-team .crest{width:34px;height:34px}
.fx-team .crest-txt{font-size:.85rem}
.fx-mid{min-width:70px;text-align:center;font-family:var(--fd);font-weight:800;font-size:1.35rem;direction:ltr}
.fx-mid.res-win{color:var(--win)}.fx-mid.res-loss{color:var(--loss)}.fx-mid.res-draw{color:var(--draw)}
.fx-mid small{display:block;font-size:.75rem;color:var(--muted);font-family:var(--f)}
.fx-comp{font-size:.75rem;color:var(--muted);text-align:end;line-height:1.3}
.fixture.is-est b.est{color:var(--red)}
@media (max-width:720px){.fixture{grid-template-columns:1fr auto 1fr;row-gap:4px}.fx-date,.fx-comp{grid-column:1/-1;text-align:center}.fx-team{font-size:.85rem}.fx-team .crest{width:28px;height:28px}}
.stat-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media (max-width:760px){.stat-tiles{grid-template-columns:repeat(3,1fr)}}
.tile{padding:14px 10px;text-align:center}
.tile b{display:block;font-family:var(--fd);font-size:2rem;font-weight:800;line-height:1.1}
.tile span{font-size:.8rem;color:var(--muted);font-weight:700}

/* Contenu éditorial (pages club) */
.content{max-width:900px}
.content h2{font-size:1.45rem;margin-top:1.6em}
.content p,.content li{font-size:1.04rem}
.content ul{padding-inline-start:1.2em}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:18px 0}
.fact{padding:16px}
.fact small{display:block;color:var(--muted);font-weight:700;font-size:.78rem}
.fact b{font-size:1.05rem}
.big-num{font-family:var(--fd);font-size:2.6rem;font-weight:800;color:var(--red);line-height:1}
.timeline{position:relative;margin:20px 0;padding-inline-start:28px}
.timeline::before{content:"";position:absolute;inset-block:6px;inset-inline-start:8px;width:3px;border-radius:3px;background:linear-gradient(var(--red),var(--gold))}
.tl-item{position:relative;margin-bottom:18px}
.tl-item::before{content:"";position:absolute;inset-inline-start:-26px;top:9px;width:13px;height:13px;border-radius:50%;background:var(--gold);border:3px solid var(--red)}
.tl-item b{font-family:var(--fd);font-size:1.4rem;color:var(--red)}
.tl-item h3{font-size:1.08rem;margin:2px 0 4px}
.tl-item p{margin:0;color:var(--muted)}
.trophy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;align-items:start}
.trophy{padding:18px}
.trophy .head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.trophy .head .big-num{font-size:2.4rem}
.trophy h3{margin:0;font-size:1.02rem}
.years{display:flex;flex-wrap:wrap;gap:5px;direction:ltr}
.lang-ar .years{direction:rtl}
.years span{font-family:var(--fd);font-weight:700;font-size:.95rem;padding:2px 8px;border-radius:6px;background:var(--card-2);border:1px solid var(--line)}
.years.gold span{background:color-mix(in srgb,var(--gold) 22%,var(--card));border-color:color-mix(in srgb,var(--gold) 50%,var(--line))}
.player-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.player{display:flex;align-items:center;gap:12px;padding:12px 14px}
.player .av{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),var(--red-d));color:var(--gold);font-family:var(--fd);font-weight:800;font-size:1.05rem}
.player b{display:block;font-size:.97rem;line-height:1.3}
.player small{color:var(--muted);font-size:.8rem}
.tag{display:inline-block;font-size:.7rem;font-weight:800;padding:1px 7px;border-radius:6px;background:var(--gold);color:#111;margin-inline-start:4px;vertical-align:middle}
.tag.inj{background:var(--loss);color:#fff}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 18px}
.faq summary{cursor:pointer;font-weight:800;padding:12px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--red);font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);margin:0 0 14px}

/* Did you know */
.dyk{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.dyk .card{padding:18px;position:relative;overflow:hidden}
.dyk .card::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:4px;background:repeating-linear-gradient(90deg,var(--red) 0 14px,var(--gold) 14px 28px)}
.dyk b{display:block;font-family:var(--fd);font-size:2.2rem;color:var(--red);line-height:1.1}
.dyk p{margin:6px 0 0;color:var(--muted);font-size:.93rem}

/* Newsletter + footer */
.newsletter{background:linear-gradient(120deg,var(--red-d),var(--red));color:#fff;padding-block:34px;margin-top:34px}
.nl-in{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:center}
@media (max-width:820px){.nl-in{grid-template-columns:1fr}}
.newsletter h2{font-size:1.5rem;margin:0 0 6px}
.newsletter p{margin:0;color:rgba(255,255,255,.85)}
.nl-form{display:flex;flex-wrap:wrap;gap:8px}
.nl-form input[type=email]{flex:1;min-width:200px;background:#fff;color:#111;border:0}
.nl-form .form-msg{flex-basis:100%}
.nl-form .form-msg.ok{color:#fff}.nl-form .form-msg.err{color:#FFE08A}
.site-footer{background:var(--ink);color:rgba(255,255,255,.75)}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px;padding-block:34px}
@media (max-width:820px){.ft-grid{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}}
.ft-grid h3{color:#fff;font-size:1rem;margin-bottom:10px}
.ft-grid a{display:block;padding:4px 0;font-size:.92rem}
.ft-grid a:hover{color:var(--gold)}
.ft-brand p{font-size:.88rem;margin-top:12px;max-width:380px}
.ft-brand .brand-txt strong{color:#fff;font-size:1.05rem}
.ft-bottom{border-top:1px solid rgba(255,255,255,.08);padding-block:16px;font-size:.82rem;text-align:center}

/* Toasts */
.toast-lang,.toast-install{position:fixed;inset-inline:12px;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px);z-index:70;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  max-width:520px;margin-inline:auto;padding:12px 14px;border-radius:16px;background:var(--ink);color:#fff;box-shadow:0 14px 40px rgba(0,0,0,.35);font-size:.9rem}
.toast-lang[hidden],.toast-install[hidden]{display:none}
.toast-lang a{color:var(--gold);font-weight:800;text-decoration:underline}
.toast-lang button,.toast-install button[data-dismiss]{margin-inline-start:auto;background:none;border:0;color:rgba(255,255,255,.7);display:grid;place-items:center}
.toast-install span{flex:1;font-weight:700;min-width:150px}
.toast-install img{border-radius:10px}
@media (min-width:901px){.toast-lang,.toast-install{bottom:16px}}

/* Contact */
.form-grid{display:grid;gap:12px}
.captcha{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.captcha img{border-radius:8px;border:1px solid var(--line);background:#fff}
.captcha input{max-width:140px}
.notice{padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--gold) 16%,var(--card));border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));font-size:.93rem}
.ad-slot{margin-block:20px;min-height:0}
.empty{padding:30px;text-align:center;color:var(--muted)}
.mt0{margin-top:0}.muted{color:var(--muted)}.center{text-align:center}

/* ── Médias (vignettes, vidéos) ── */
.news-card{overflow:hidden}
.news-card .thumb{display:block;position:relative;margin:-18px -18px 6px;aspect-ratio:1200/630;background:var(--ink);overflow:hidden}
.news-card.compact .thumb{margin:-14px -16px 4px}
.news-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
a.news-card:hover .thumb img{transform:scale(1.04)}
.play-badge{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(200,16,46,.92);color:#fff;font-size:1.15rem;padding-inline-start:3px;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.lead-bg{position:absolute;inset:0;z-index:0!important}
.lead-bg img{width:100%;height:100%;object-fit:cover;opacity:.55}
.lead-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,14,.96) 18%,rgba(10,10,14,.45) 70%,rgba(10,10,14,.2))}
.yt{position:relative;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;cursor:pointer}
.yt img{width:100%;height:100%;object-fit:cover;display:block}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-play{position:absolute;inset:0;margin:auto;width:68px;height:48px;background:none;border:0;padding:0;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));transition:transform .2s}
.yt:hover .yt-play{transform:scale(1.12)}
.yt-len{position:absolute;inset-block-end:8px;inset-inline-end:8px;background:rgba(0,0,0,.8);color:#fff;font-size:.78rem;font-weight:700;padding:2px 6px;border-radius:6px;direction:ltr}
.video-card{overflow:hidden;display:flex;flex-direction:column}
.video-card .yt{border-radius:0}
.vc-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.vc-body h3{font-size:.95rem;line-height:1.5;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.article-media{margin:-6px 0 20px}
.article-media figure{margin:0}
.article-media img.photo{width:100%;max-height:460px;object-fit:cover;border-radius:14px;display:block}
.article-media figcaption,.credit{font-size:.75rem;color:var(--muted);margin-top:6px}
.article-media figcaption a,.credit a{text-decoration:underline}
.video-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.video-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.video-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding-inline:16px}.video-strip>*{flex:0 0 78%;scroll-snap-align:start}}
.lead:has(.lead-bg)::after{display:none}.lead:has(.lead-bg)::before{opacity:.08}

/* ── Facebook, notifications ── */
.fb-btn{color:#fff}.fb-btn:hover{background:#1877F2}
.push-btn.on{color:var(--gold)}
.fb-box{display:flex;align-items:center;gap:14px;padding:16px 18px;margin-top:18px;border-inline-start:4px solid #1877F2}
.fb-box .fb-ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#1877F2;color:#fff}
.fb-box .fb-ic .ic{width:24px;height:24px}
.fb-box b{display:block;font-size:1rem}.fb-box p{margin:2px 0 0;font-size:.86rem;color:var(--muted)}
.fb-box .btn-fb{margin-inline-start:auto;flex:none}
.fb-box.side{flex-wrap:wrap}.fb-box.side .btn-fb{margin-inline-start:0;width:100%;justify-content:center}
.btn-fb{background:#1877F2;color:#fff}
.btn-fb:hover{filter:brightness(1.08)}
.link-btn{background:none;border:0;padding:0;color:inherit;font:inherit;display:flex;align-items:center;gap:6px;opacity:.85;cursor:pointer}
.ft-grid a .ic,.link-btn .ic{width:1em;height:1em}
.push-cta{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-top:14px;border:1px dashed color-mix(in srgb,var(--gold) 60%,var(--line));background:color-mix(in srgb,var(--gold) 8%,var(--card))}
.push-cta p{margin:0;font-size:.9rem;flex:1}
@media (max-width:560px){.fb-box{flex-wrap:wrap}.fb-box .btn-fb{width:100%;justify-content:center;margin:0}}

/* ── Fiche de match ── */
.lineup{padding:18px 20px}
.lineup ol{margin:0;padding-inline-start:1.4em;columns:2;column-gap:28px}
.lineup li{margin-bottom:6px;font-weight:700;break-inside:avoid}
.lineup a{color:var(--text);border-bottom:1px dashed var(--line)}
.lineup a:hover{color:var(--red)}
.lineup h3{font-size:1rem;margin:14px 0 6px}
.lineup ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.93rem}
.lineup ul .ic{color:var(--win)}
.card-y,.card-r{display:inline-block;width:10px;height:14px;border-radius:2px;background:#F5C518;vertical-align:-2px;margin-inline-start:4px}
.card-r{background:var(--loss)}
.motm-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.motm-opts button{position:relative;overflow:hidden;text-align:start;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card-2);color:var(--text);font-weight:700;font-size:.88rem;display:flex;justify-content:space-between;gap:6px}
.motm-opts button i{position:absolute;inset-block:0;inset-inline-start:0;width:0;background:color-mix(in srgb,var(--gold) 30%,transparent);transition:width .5s;z-index:0}
.motm-opts button span,.motm-opts button b{position:relative;z-index:1}
.motm-opts button.mine{border-color:var(--red);box-shadow:0 0 0 2px color-mix(in srgb,var(--red) 30%,transparent)}
.motm-opts button.top b{color:var(--red)}
.mini-fixtures{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.9rem}
.mini-fixtures a{display:flex;justify-content:space-between;gap:8px;font-weight:700}
.mini-fixtures b{font-family:var(--fd);color:var(--red)}
@media (max-width:560px){.lineup ol{columns:1}}
.ph-in{display:flex;align-items:center;gap:20px}
.ph-photo{width:120px;height:120px;border-radius:50%;object-fit:cover;object-position:top;border:4px solid var(--gold);flex:none;background:var(--ink-2)}
.ph-ini{display:grid;place-items:center;font-family:var(--fd);font-size:2.4rem;color:var(--gold)}
.pl-row{display:grid;grid-template-columns:70px 1fr auto;gap:10px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line);font-size:.93rem}
.pl-row:last-child{border-bottom:0}
.pl-row:hover{background:var(--card-2)}
.tag.sub{background:var(--card-2);color:var(--text);border:1px solid var(--line)}
@media (max-width:560px){.ph-photo{width:84px;height:84px}.pl-row{grid-template-columns:1fr auto}.pl-row>span:first-child{display:none}}
.mercato td,.mercato th{white-space:nowrap}.mercato td.tm a{font-weight:800;color:var(--text)}
.search-form{margin-top:14px;max-width:640px}.search-form input{flex:1}
a.fixture{color:inherit}a.fixture:hover{background:var(--card-2)}
.mc-more{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12);font-weight:800;font-size:.86rem;color:var(--gold)}
.lang-ar .mc-more .ic{transform:scaleX(-1)}
.reactions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px}
.r-label{font-weight:800;font-size:.9rem;margin-inline-end:4px}
.reactions button{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card-2);color:var(--text);font-weight:800;font-size:.9rem;transition:transform .15s}
.reactions button span{font-size:1.15rem;line-height:1}
.reactions button.on{border-color:var(--red);background:color-mix(in srgb,var(--red) 12%,var(--card))}
.reactions button:hover{transform:translateY(-2px)}
.reactions button.pop{animation:pop .35s}
/* ── Direct ── */
.live-box{margin-top:12px;text-align:center}
.live-box .live-badge b{font-family:var(--fd)}
.live-score{font-family:var(--fd);font-size:2.6rem;font-weight:800;color:var(--gold);line-height:1.1;margin:6px 0}
.live-incs{list-style:none;margin:6px 0 0;padding:0;font-size:.85rem;display:grid;gap:3px}
.live-incs li.s1{text-align:start}.live-incs li.s2{text-align:end}
/* En-tête mobile : Facebook et notifications passent dans le menu (sinon débordement horizontal, page décalée en arabe) */
@media (max-width:520px){.hd-tools .fb-btn,.hd-tools .push-btn{display:none!important}}
.hd-in{min-width:0}.brand{min-width:0}
.drawer-nav .link-btn{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;font-weight:700;width:100%;text-align:start}
.link-btn[hidden],[data-push][hidden]{display:none!important}