/* ColdRead Football — système visuel du produit principal.
   Bleu nuit / graphite, blanc cassé, vert terrain (actions, communauté), bleu froid (modèle), rouge réservé aux erreurs.
   Inter pour l'interface, Anton pour les noms d'équipes, scores, chiffres 1/X/2 et rangs. Écussons en bouclier avec initiales (aucun logo tiers).
   Mobile d'abord (375 px), desktop jusqu'à 1100 px. Zones tactiles ≥ 44 px, focus visible. */
:root{
  /* Direction artistique v2 « Nuit de stade » : nuit bleutee profonde (jamais du noir), blanc froid, lime en accent
     d'action, bleu electrique pour le modele, ambre pour les reserves, violet pour la rarete. */
  --bg:#050A14;--bg2:#081121;--card:#0D1728;--card2:#14223A;--line:#1C2B46;--line2:#2A3D60;
  --fg:#EEF3FA;--muted:#8FA0BC;--green:#C8F04A;--green-dark:#A9D22C;--green-ink:#07101F;--blue:#4C8DFF;--blue-dim:#16294D;--red:#FF5D5D;
  --amber:#F5B942;--violet:#A970FF;--ink:#050A14;
  /* Alias de la fiche d'analyse. Ils etaient UTILISES sans jamais etre definis : la barre d'importance, les pastilles
     de niveau et les traits de separation de ces blocs etaient donc transparents, en production. */
  --fb-accent:var(--green);--fb-dim:var(--muted);--fb-line:var(--line);--fb-line2:var(--line2);
  --pad:20px;--r-lg:22px;--r-md:16px;--r-sm:12px;
  --nav-h:76px;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;min-height:100%}
body{min-height:100svh;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select{font:inherit;color:var(--fg)}
svg{display:inline-block;vertical-align:middle}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
.display{font-family:Anton,Impact,"Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:1}

/* ---------- shell ---------- */
.fb-head{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:calc(12px + env(safe-area-inset-top)) 20px 12px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}
.fb-mark{display:flex;align-items:center;gap:10px;text-decoration:none}
.fb-logo{width:40px;height:32px;display:flex;align-items:center;justify-content:center;font-family:Anton,Impact,sans-serif;font-size:20px;letter-spacing:-.02em;color:var(--green);border:2px solid var(--green);border-radius:8px;transform:skewX(-8deg)}
.fb-mark-t{display:flex;flex-direction:column;line-height:1.05}
.fb-mark-t b{font:800 17px Inter;color:var(--fg)}
.fb-mark-t em{font:600 13px Inter;font-style:normal;color:var(--green)}
.fb-head-right{display:flex;align-items:center;gap:14px;min-height:44px}
.fb-topnav{display:none;gap:4px}
.fb-topnav a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:10px;font:600 14px Inter;color:var(--muted)}
.fb-topnav a.on{color:var(--fg);background:var(--card2)}
.fb-who{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;border-radius:12px;font:700 13px Inter;color:var(--fg);background:var(--card2);border:1px solid var(--line)}
.fb-who.signin{color:var(--green);border-color:var(--line2)}
.fb-strip{max-width:1100px;margin:0 auto;padding:0 20px}
.fb-strip-in{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.fb-strip-in>a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:54px;padding:0 4px;font:600 13px Inter;color:var(--fg);white-space:nowrap}
.fb-strip-in>a+a{border-left:1px solid var(--line);padding-left:14px}
.fb-strip-in b{font:700 18px Inter;font-variant-numeric:tabular-nums}
.fb-strip-in .k{display:inline-flex;align-items:center;gap:6px;color:var(--fg)}
.fb-strip-in .k svg{width:20px;height:20px;color:var(--blue);flex:0 0 auto}
.fb-strip-in .k.g svg{color:var(--green)}
.fb-strip-in small{color:var(--muted);font-weight:500;font-size:12px}
.fb-segs{display:inline-flex;gap:3px}
.fb-segs i{width:12px;height:10px;background:var(--card2);border:1px solid var(--line2);transform:skewX(-14deg)}
.fb-segs i.on{background:var(--green);border-color:var(--green)}
.fb-main{max-width:1100px;margin:0 auto;padding:16px 20px 32px;display:flex;flex-direction:column;gap:18px}
.fb-main>section{display:flex;flex-direction:column;gap:16px;animation:fbRise .32s var(--ease) both}
@keyframes fbRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Une seule rangee, quel que soit le nombre d'entrees : le corps ne reserve que --nav-h, et une seconde rangee
   masquerait le bas de chaque ecran. grid-auto-flow:column garantit l'invariant sans compter les entrees. */
.fb-nav{position:fixed;left:0;right:0;bottom:0;z-index:5;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:rgba(10,15,28,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.fb-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:56px;min-width:0;border-radius:12px;font:700 11px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fb-nav a svg{width:22px;height:22px}
.fb-nav a.on{color:var(--green)}
.fb-nav a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Cinq entrees sur une rangee tiennent des 320 px si le libelle le plus long (« Classements ») respire moins. */
@media (max-width:430px){.fb-nav a{font-size:8.5px;letter-spacing:0}.fb-nav a svg{width:20px;height:20px}}
.fb-toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 14px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:12px;font:600 14px Inter;pointer-events:none;transition:opacity .2s,transform .25s var(--ease);z-index:9;max-width:90vw}
.fb-toast.show{opacity:1;transform:translate(-50%,0)}
.fb-foot{text-align:center;color:var(--muted);font:500 11.5px Inter;padding:10px 0 0;opacity:.85}

/* ---------- typographie & blocs ---------- */
.fb-kicker{font:600 14px Inter;color:var(--fg)}
.fb-h1{font:800 24px/1.2 Inter;letter-spacing:-.01em}
.fb-h2{font:700 15px Inter;color:var(--fg)}
.fb-sub{color:var(--muted);font-size:14.5px;line-height:1.5}
.fb-note{color:var(--muted);font-size:13.5px;line-height:1.5}
.fb-when{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;font:600 13px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.fb-when span+span{color:var(--muted)}
.fb-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:12px}
.fb-card h2{font:700 16px/1.3 Inter}.fb-card h2 small{font:500 13px Inter;color:var(--muted);margin-left:6px}
.fb-card.model{border-color:var(--blue-dim);background:linear-gradient(180deg,#0f1a33,var(--card))}
.fb-card.model h2,.fb-card.why h2{color:var(--blue)}
.fb-card.why{border-color:var(--blue-dim)}
.fb-card.fans{border-color:#2a3d1a;background:linear-gradient(180deg,#121c1f,var(--card))}
.fb-card.fans h2{color:var(--green)}
.fb-error{color:var(--red);font-size:14px;line-height:1.5;padding:10px 12px;border:1px solid rgba(255,93,93,.4);border-radius:8px;background:rgba(255,93,93,.08)}
.fb-skel-wrap{display:flex;flex-direction:column;gap:12px;padding:6px 0}
.fb-skel{height:18px;border-radius:4px;background:linear-gradient(90deg,var(--card),var(--card2),var(--card));background-size:200% 100%;animation:fbShimmer 1.2s linear infinite}
@keyframes fbShimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.fb-link{font:600 14px Inter;color:var(--green);background:none;border:0;padding:0;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.fb-back{font:600 14px Inter;color:var(--muted);min-height:44px;display:inline-flex;align-items:center;gap:6px}
.fb-bar{display:flex;justify-content:space-between;align-items:center;min-height:44px}
.fb-status{font:700 11px Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--green);border:1px solid var(--line2);border-radius:20px;padding:7px 11px}
.fb-status.locked{color:var(--muted)}.fb-status.done{color:var(--blue)}

/* ---------- boutons ---------- */
.fb-cta{display:flex;justify-content:center;align-items:center;gap:12px;width:100%;min-height:56px;padding:0 22px;background:var(--green);color:var(--green-ink);border:0;border-radius:8px;cursor:pointer;text-decoration:none;font:800 17px Inter;transition:background .15s,transform .12s}
.fb-cta:hover{background:#c8ff1a}.fb-cta:active{transform:scale(.99)}.fb-cta:disabled{opacity:.45;cursor:default}
.fb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:8px;font:700 15px Inter;border:1px solid var(--line2);color:var(--fg);background:var(--card2);cursor:pointer;text-decoration:none;width:100%}
.fb-btn:hover{border-color:var(--green)}.fb-btn:disabled{opacity:.45;cursor:default}
.fb-btn.primary{background:var(--green);color:var(--green-ink);border-color:var(--green)}
.fb-btn.danger{color:var(--red);border-color:rgba(255,93,93,.35)}
.fb-row-btns,.fb-links{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---------- écussons ---------- */
.fb-crest{position:relative;width:44px;height:50px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}
.fb-crest svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--tc,var(--bg2));stroke:var(--fg);stroke-width:2}
.fb-crest b{position:relative;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:17px;letter-spacing:.02em;color:var(--fg);padding-bottom:3px}
.fb-crest.sm{width:32px;height:36px}.fb-crest.sm b{font-size:13px;padding-bottom:2px}
.fb-crest.lg{width:72px;height:82px}.fb-crest.lg b{font-size:30px;padding-bottom:6px}
/* initiales par défaut ; l'image fournisseur reste rendue (opacité 0, sinon un chargement différé ne démarre jamais) et n'apparaît qu'une fois chargée : absence, blocage, erreur → initiales, sans décalage */
.fb-crest img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;opacity:0;transition:opacity .2s}
.fb-crest.logo.ok img{opacity:1}.fb-crest.logo.ok b{display:none}.fb-crest.logo.ok svg{fill:var(--card2);stroke:var(--line2)}

/* ---------- héros : prochain match ---------- */
.fb-hero{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;padding:6px 0 18px;border-bottom:1px solid var(--line);overflow:hidden}
.fb-hero .fb-lines{position:absolute;inset:0;pointer-events:none;opacity:.5}
.fb-hero>*{position:relative}
.fb-hero .fb-kicker{align-self:flex-start}
.fb-kick{display:flex;align-items:center;gap:10px;width:100%}
.fb-kick .fb-kicker{font:800 18px Inter;color:var(--green)}
.fb-duel{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:8px;width:100%}
.fb-duel .side{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;min-width:0}
/* « anywhere » coupait « IRON WANDERERS » en « IRON WANDER / ERS » : un nom d'equipe doit casser ENTRE les mots.
   On ne garde la coupure en plein mot que pour un mot seul trop long pour la colonne (`break-word`). */
.fb-duel .side b{font-size:clamp(26px,8vw,40px);color:var(--fg);overflow-wrap:break-word;word-break:normal;hyphens:none}
a.side{color:inherit;text-decoration:none}
a.side:hover b,a.side:focus-visible b{color:var(--green)}
.fb-duel>em{font-style:normal;font-size:22px;color:var(--fg);align-self:center;padding-top:6px}
.fb-duel.sm{padding:10px 0;border-bottom:1px solid var(--line)}
.fb-duel.sm .side{flex-direction:row;gap:10px}
.fb-duel.sm .side b{font-size:20px;text-align:left}
.fb-duel.sm .side:last-child{flex-direction:row-reverse}.fb-duel.sm .side:last-child b{text-align:right}
.fb-duel.sm>em{font-size:14px;color:var(--muted);padding:0}
.fb-hero-empty{align-items:flex-start;padding:16px 0 18px;gap:10px}

/* ---------- héros : bandeau, informations, lecture ---------- */
.fb-band{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;border:1px solid var(--line2);border-left:3px solid var(--green);background:var(--card);font:700 11px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.fb-band span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-band span+span{color:var(--muted)}.fb-band span:last-child{margin-left:auto;color:var(--muted)}
.fb-info{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);width:100%;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fb-info li{display:flex;flex-direction:column;gap:2px;padding:10px 8px;text-align:center;min-width:0}
.fb-info li+li{border-left:1px solid var(--line)}
.fb-info b{font:700 13px Inter;line-height:1.25}.fb-info small{font:500 11px Inter;color:var(--muted);line-height:1.3}
.fb-read{width:100%;padding:12px 14px;border:1px solid var(--blue-dim);border-radius:10px;background:linear-gradient(180deg,#0f1a33,var(--card));display:flex;flex-direction:column;gap:10px}
.fb-read-h{font:700 11px Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.fb-read-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.fb-read-grid>div:first-child{grid-column:1/3;flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
.fb-read-grid>div:first-child small{width:100%}
.fb-read-grid>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.fb-read-grid small{font:600 10px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fb-read-grid b{font:700 14px Inter;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-read-grid b .display{font-size:20px;color:var(--blue);margin-right:4px}
.fb-read-grid em{font:700 18px Inter;font-style:normal;color:var(--blue)}
.fb-panel{border:1px solid var(--line2);border-radius:12px;background:var(--card);overflow:hidden}
.fb-panel-club{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.fb-panel-club span{flex:1;min-width:0;display:flex;flex-direction:column}.fb-panel-club b{font:700 16px Inter}.fb-panel-club small{color:var(--muted);font-size:12.5px}
.fb-panel-club i{font-style:normal;font-size:22px;color:var(--muted)}
.fb-panel-grid{display:grid;grid-template-columns:1fr 1fr}
.fb-panel-grid>a{display:flex;flex-direction:column;gap:4px;padding:12px 14px}
.fb-panel-grid>a+a{border-left:1px solid var(--line)}
.fb-panel-grid .k{display:inline-flex;align-items:center;gap:6px;font:600 12px Inter;color:var(--fg)}
.fb-panel-grid .k svg{width:18px;height:18px;color:var(--blue)}.fb-panel-grid .k.g svg{color:var(--green)}
.fb-panel-grid b{font-size:36px;line-height:1}.fb-panel-grid>a+a b{color:var(--green)}
.fb-panel-grid small{font:500 11.5px Inter;color:var(--muted)}
.fb-value{position:relative;padding:18px 16px;border:1px solid var(--line2);border-radius:12px;background:var(--card);display:flex;flex-direction:column;gap:14px}
.fb-value h2{font-size:26px;line-height:1.05}
.fb-value ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fb-value li{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.45;color:var(--fg)}
.fb-value li .display{font-size:24px;color:var(--green);width:24px;flex:0 0 auto;text-align:center}

/* ---------- listes de matchs ---------- */
.fb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fb-row{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--line2);border-radius:8px;color:var(--fg);text-decoration:none}
.fb-row:hover{border-left-color:var(--green)}
.fb-row-crests{display:flex;flex:0 0 auto}.fb-row-crests .fb-crest+.fb-crest{margin-left:-8px}
.fb-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fb-row-main b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:16px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-row-main b em{font-style:normal;font-size:10px;color:var(--green);margin:0 4px;letter-spacing:.12em}
.fb-row-main small{font:600 11px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fb-row-side{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.fb-row-side i{font-style:normal;font-size:22px;color:var(--muted)}
.fb-row-team{display:flex;align-items:center;gap:8px;min-width:0}
.fb-row-team b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:15px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-row>em{font:700 10px Inter;letter-spacing:.14em;color:var(--muted);font-style:normal}
.fb-row-when{font:600 11px Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:6px}
.fb-more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:700 14px Inter;color:var(--green);text-decoration:none}
.fb-clubline{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fb-clubline .n{flex:1;min-width:0;display:flex;flex-direction:column}
.fb-clubline .n b{font:700 16px Inter}.fb-clubline .n small{color:var(--muted);font-size:12.5px}
.fb-onb{padding:16px;border:1px solid var(--line2);border-radius:10px;display:flex;flex-direction:column;gap:12px;background:var(--card)}
.fb-onb p{font-size:15.5px;line-height:1.5}

/* ---------- modèle : issue dominante, buts attendus, ruban ---------- */
.fb-lead{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--blue);border-radius:10px;background:rgba(79,125,255,.08)}
.fb-lead .k{font-size:48px;line-height:1;color:var(--blue);width:44px;text-align:center}
.fb-lead div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fb-lead small{font:600 10px Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fb-lead b{font:700 16px Inter;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-lead em{font:600 12px Inter;font-style:normal;color:var(--blue)}
.fb-lead strong{font-size:44px;line-height:1;color:var(--fg)}.fb-lead strong small{font:600 14px Inter;color:var(--muted)}
.fb-xg{display:flex;justify-content:space-between;align-items:center;font:600 13px Inter;color:var(--muted)}
.fb-xg b{font:700 15px Inter;color:var(--fg)}
.fb-ribbon{border-top:1px dashed var(--line2);padding-top:4px}
.fb-ribbon>summary{cursor:pointer;list-style:none;min-height:40px;display:flex;align-items:center;gap:8px;font:600 11.5px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fb-ribbon>summary::-webkit-details-marker{display:none}
.fb-ribbon>summary:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue);flex:0 0 auto}
.fb-vsbar{height:10px;border-radius:5px;background:var(--line2);overflow:hidden;display:flex}
.fb-vsbar i{display:block;height:100%;background:var(--green)}
.fb-vsbar{background:var(--blue)}
.fb-card.battle{border-color:var(--line2)}
.fb-identity{position:relative;display:flex;align-items:center;gap:16px;padding:18px 16px;border:1px solid var(--line2);border-radius:12px;background:linear-gradient(180deg,var(--card2),var(--card));overflow:hidden}
.fb-identity .fb-lines{position:absolute;inset:0;pointer-events:none;opacity:.35}
.fb-identity>*{position:relative}
.fb-identity .n{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.fb-identity .n b{font-size:32px;line-height:1}.fb-identity .n small{color:var(--muted);font-size:12.5px}

/* ---------- modèle, pourquoi, communauté ---------- */
.fb-probs{display:flex;flex-direction:column;gap:10px}
.fb-prob{display:grid;grid-template-columns:22px 1fr 52px;align-items:center;gap:10px;min-height:28px}
.fb-prob .k{font-family:Anton,Impact,sans-serif;font-size:22px;line-height:1;color:var(--fg)}
.fb-prob .bar{height:8px;border-radius:4px;background:var(--bg);overflow:hidden}
.fb-prob .bar i{display:block;height:100%;border-radius:4px;width:0;background:var(--blue);opacity:.75;transition:width .6s var(--ease)}
.fb-prob .v{text-align:right;font:700 16px Inter;font-variant-numeric:tabular-nums}
.fb-prob .v small{font-size:11px;color:var(--muted);margin-left:1px}
.fb-prob.top .bar i{opacity:1}.fb-prob.top .v{color:var(--blue)}
.fb-prob.fan .bar i{background:var(--green);opacity:.6}.fb-prob.fan.top .bar i{opacity:1}.fb-prob.fan.top .v{color:var(--green)}
.fb-est{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.5;padding-top:4px;border-top:1px solid var(--line)}
.fb-est svg{width:24px;height:24px;flex:0 0 auto;color:var(--blue)}
.fb-est.g{color:var(--fg)}.fb-est.g svg{color:var(--green)}
.fb-est b{color:var(--fg)}
.fb-why{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fb-why li{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.45}
.fb-why li svg{width:30px;height:30px;padding:5px;flex:0 0 auto;color:var(--blue);border:1px solid var(--blue-dim);border-radius:50%}
.fb-details{border-top:1px solid var(--line);padding-top:4px}
.fb-details>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:600 14px Inter;color:var(--blue)}
.fb-bullets{margin:0 0 10px;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.5;color:var(--fg)}
.fb-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0 0 12px;font-size:13.5px}
.fb-meta dt{color:var(--muted)}
.fb-h3{font:700 12px Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:4px}
.fb-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fb-pick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:92px;padding:10px 6px;border:2px solid var(--line2);background:var(--card2);color:var(--fg);cursor:pointer;border-radius:8px;transition:border-color .15s,background .15s}
.fb-pick b{font-family:Anton,Impact,sans-serif;font-size:44px;line-height:1;font-weight:400}
.fb-pick span{font:600 10.5px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.25;overflow-wrap:anywhere}
.fb-pick.on{border-color:var(--green);background:var(--green);color:var(--green-ink)}.fb-pick.on b,.fb-pick.on span{color:var(--green-ink)}
.fb-pick:disabled{opacity:.45;cursor:default}
.fb-msg{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--muted);line-height:1.5;min-height:22px}
.fb-msg svg{width:24px;height:24px;flex:0 0 auto}
.fb-msg.ok{color:var(--green);font-weight:600;padding:10px 12px;border:1px solid var(--line2);border-radius:8px}.fb-msg.locked{color:var(--muted);font-weight:600}.fb-msg.err{color:var(--red);font-weight:600}
.fb-battle{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.fb-side{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.fb-side b{font-family:Anton,Impact,sans-serif;font-size:30px;line-height:1;font-weight:400}
.fb-side small{color:var(--muted);font-size:12px;line-height:1.3}
.fb-vs-sm{font:800 11px Inter;letter-spacing:.2em;color:var(--muted)}

/* ---------- résultat ---------- */
.fb-score{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;text-align:center}
.fb-score .side{display:flex;flex-direction:column;align-items:center;gap:8px;font:600 12px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.fb-score b{font-size:64px;color:var(--green);display:flex;align-items:center;gap:8px}
.fb-score b i{font-style:normal;color:var(--fg)}
.fb-score b :last-child{color:var(--fg)}
.fb-eval{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line2);border-radius:10px;background:var(--card)}
.fb-eval svg{width:34px;height:34px;flex:0 0 auto}
.fb-eval.ok{border-color:var(--green)}.fb-eval.ok svg,.fb-eval.ok b{color:var(--green)}
.fb-eval.ko{border-color:rgba(255,93,93,.5)}.fb-eval.ko svg,.fb-eval.ko b{color:var(--red)}
.fb-eval b{display:block;font:700 17px Inter}.fb-eval small{color:var(--muted);font-size:13px}
.fb-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fb-tile{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.fb-tile span{display:inline-flex;align-items:center;gap:8px;font:600 13px Inter;color:var(--fg)}
.fb-tile span svg{width:20px;height:20px;color:var(--blue)}
.fb-tile.g span svg{color:var(--green)}
.fb-tile b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:38px;line-height:1;color:var(--green)}
.fb-tile small{color:var(--muted);font-size:12px}
.fb-kpis{display:flex;gap:22px;flex-wrap:wrap}
.fb-kpi{display:flex;flex-direction:column;gap:2px}
.fb-kpi span{font:600 10.5px Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fb-kpi b{font:700 24px/1 Inter;font-variant-numeric:tabular-nums}
.fb-kpi b small{font-size:12px;color:var(--muted)}
.fb-kpi small{color:var(--muted);font-size:12px}

/* ---------- club ---------- */
.fb-search{display:block}
.fb-search input{width:100%;min-height:48px;padding:0 14px;border-radius:8px;border:1px solid var(--line2);background:var(--card);font-size:16px}
.fb-search input::placeholder{color:var(--muted)}
.fb-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.fb-grid li+li .fb-club{border-top:1px solid var(--line)}
.fb-club{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 12px;border:0;background:var(--card);color:var(--fg);text-align:left;cursor:pointer}
.fb-club .n{display:flex;flex-direction:column;min-width:0}
.fb-club b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:16px;text-transform:uppercase;letter-spacing:.04em}
.fb-club small{color:var(--muted);font-size:12px}
.fb-club.on{background:rgba(182,240,0,.14)}.fb-club.on b{color:var(--green)}
.fb-sticky{position:sticky;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) - 6px);background:linear-gradient(180deg,transparent,var(--bg) 35%);padding:12px 0 4px;display:flex;flex-direction:column;gap:8px}

/* ---------- classement ---------- */
.fb-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.fb-tab{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 10px;font:700 15px Inter;color:var(--muted);text-decoration:none;text-align:center;border-bottom:2px solid transparent;margin-bottom:-1px}
.fb-tab.on{color:var(--green);border-bottom-color:var(--green)}
.fb-podium{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;align-items:end;padding:8px 0}
.fb-podium>div{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:12px 6px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.fb-podium .p1{padding-bottom:22px;border-color:var(--line2)}
.fb-podium .fb-rank{width:auto;font-size:28px}
.fb-podium .p1 .fb-rank{color:var(--green)}.fb-podium .p2 .fb-rank,.fb-podium .p3 .fb-rank{color:var(--blue)}
.fb-podium b{font:700 12px Inter;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-podium small{font:600 10px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fb-podium strong{font:700 20px Inter;font-variant-numeric:tabular-nums}
.fb-lblist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fb-lbrow{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 6px;border-top:1px solid var(--line)}
.fb-lblist li:last-child .fb-lbrow{border-bottom:1px solid var(--line)}
.fb-lbrow.me{border:1px solid var(--green);border-radius:10px;padding:12px;background:rgba(182,240,0,.06)}
.fb-rank{font-family:Anton,Impact,sans-serif;font-size:24px;line-height:1;color:var(--green);width:32px;font-weight:400;text-align:center}
.fb-lbname{flex:1;min-width:0;display:flex;flex-direction:column}.fb-lbname b{font:700 14px Inter;text-transform:uppercase;letter-spacing:.03em}.fb-lbname small{color:var(--muted);font-size:12.5px}
.fb-lbiq{display:flex;flex-direction:column;align-items:flex-end}.fb-lbiq b{font:700 20px/1 Inter;font-variant-numeric:tabular-nums}.fb-lbiq small{color:var(--muted);font:600 9.5px Inter;letter-spacing:.1em;text-transform:uppercase}

/* ---------- profil & compte ---------- */
.fb-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.fb-stats>div{padding:16px 8px;text-align:center;border-right:1px solid var(--line)}
.fb-stats>div:last-child{border-right:0}
.fb-stats b{display:block;font-family:Anton,Impact,sans-serif;font-size:34px;line-height:1;font-weight:400}
.fb-stats span{display:block;font:600 10px Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.fb-form{display:flex;flex-direction:column;gap:10px}
.fb-form input{width:100%;min-height:50px;padding:0 14px;border-radius:8px;border:1px solid var(--line2);background:var(--card);font-size:16px}
.fb-form input::placeholder{color:var(--muted)}
.fb-authlinks{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fb-pill{display:inline-block;font:700 11px Inter;padding:4px 8px;border-radius:12px;background:var(--card2);color:var(--muted)}
.fb-pill.ok{color:var(--green)}.fb-pill.bad{color:var(--red)}
.fb-select{width:100%;min-height:48px;padding:0 12px;border-radius:8px;border:1px solid var(--line2);background:var(--card);color:var(--fg);font-size:15px;margin-top:6px}

/* ---------- desktop ---------- */
.fb-cols{display:flex;flex-direction:column;gap:16px}.fb-cols>div{display:flex;flex-direction:column;gap:16px}
@media (min-width:900px){
  body{padding-bottom:32px}
  .fb-nav{display:none}
  .fb-topnav{display:flex}
  .fb-toast{bottom:28px}
  .fb-main>section.narrow,.fb-strip-in{max-width:760px;width:100%;margin:0 auto}
  .fb-cols{display:grid;grid-template-columns:3fr 2fr;gap:24px;align-items:start}
  .fb-duel .side b{font-size:44px}
  .fb-cta{max-width:520px;align-self:center}
  .fb-read-grid{grid-template-columns:1.4fr 1fr 1fr}.fb-read-grid>div:first-child{grid-column:auto;flex-direction:column;align-items:flex-start}
}

/* ---------- interface finale : états vides, jours, pastilles, position, forme ---------- */
.fb-empty{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:26px 18px;border:1px dashed var(--line2);border-radius:12px;background:var(--card);overflow:hidden}
.fb-empty .fb-lines{position:absolute;inset:0;pointer-events:none;opacity:.25}
.fb-empty>*{position:relative}
.fb-empty-ic{width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line2);background:var(--card2);color:var(--green);margin-bottom:4px}
.fb-empty-ic svg{width:26px;height:26px}
.fb-empty b{font:700 16px/1.3 Inter}
.fb-empty p{color:var(--muted);font-size:14px;line-height:1.5;max-width:420px}
.fb-empty .fb-btn{width:auto;min-width:180px;margin-top:8px}
.fb-empty.compact{padding:16px 14px;gap:6px;border-style:solid;border-color:var(--line);background:transparent}
.fb-empty.compact .fb-empty-ic{width:40px;height:40px}.fb-empty.compact .fb-empty-ic svg{width:20px;height:20px}
.fb-empty.compact b{font-size:14.5px}.fb-empty.compact p{font-size:13px}
.fb-empty.bare{border:0;background:transparent;padding:6px 0 12px;align-items:flex-start;text-align:left;width:100%}
.fb-empty.bare .fb-lines{display:none}
.fb-empty.bare b{font:800 22px/1.2 Inter}
.fb-sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fb-count{font:600 12px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fb-days{display:flex;flex-direction:column;gap:18px}
.fb-day{display:flex;flex-direction:column;gap:8px}
.fb-day-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font:700 13px Inter;text-transform:capitalize;color:var(--fg);padding:2px 0;border-bottom:1px solid var(--line)}
.fb-day-h small{font:600 11px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fb-row{border-left-width:3px}
.fb-row.club{border-left-color:var(--green)}
.fb-row.live{border-left-color:var(--red)}
.fb-row-side i{display:inline-flex;font-size:0}
.fb-row-side i svg{width:20px;height:20px;color:var(--muted)}
.fb-row-main small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.fb-tag{display:inline-block;font:700 9.5px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--green);border:1px solid rgba(182,240,0,.35);border-radius:4px;padding:1px 5px;vertical-align:middle}
.fb-chip{display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:0 8px;border-radius:6px;border:1px solid var(--line2);font:600 10.5px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.fb-chip.on{color:var(--green);border-color:rgba(182,240,0,.45);background:rgba(182,240,0,.08)}
.fb-chip b{font-size:15px;color:var(--fg)}.fb-chip.on b{color:var(--green)}
.fb-pill{white-space:nowrap}
.fb-pill.live{color:var(--red);display:inline-flex;align-items:center;gap:5px}
.fb-pill.done{color:var(--blue)}.fb-pill.warn{color:#f0b429}
.fb-pill i,.fb-livedot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);animation:fbPulse 1.2s ease-in-out infinite;margin-right:4px}
@keyframes fbPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.fb-band.live{border-left-color:var(--red)}
.fb-status.live{color:var(--red);border-color:rgba(255,93,93,.4);display:inline-flex;align-items:center}
.fb-onb{flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px}
.fb-onb>svg{width:40px;height:40px;color:var(--green);flex:0 0 auto}
.fb-onb>div{flex:1;min-width:180px;display:flex;flex-direction:column;gap:4px}
.fb-onb>div p{font-size:15px;line-height:1.4}.fb-onb small{color:var(--muted);font-size:13px;line-height:1.4}
.fb-onb .fb-btn{width:100%}
.fb-value{overflow:hidden}.fb-value .fb-lines{position:absolute;inset:0;pointer-events:none;opacity:.25}.fb-value>*{position:relative}
.fb-lbcard{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:14px;display:flex;flex-direction:column;gap:12px}
.fb-lbcard h2{display:flex;align-items:center;gap:8px}.fb-lbcard h2 svg{width:18px;height:18px;color:var(--green)}
.fb-panel-club i svg{width:22px;height:22px}
.fb-hero .fb-cta .a{font-size:20px}
.fb-hero-empty .fb-kicker{font:800 18px Inter;color:var(--green)}
.fb-matchhead{position:relative;display:flex;flex-direction:column;gap:10px;padding:10px 12px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}
.fb-matchhead .fb-lines{position:absolute;inset:0;pointer-events:none;opacity:.35}
.fb-matchhead>*{position:relative}
.fb-matchhead .fb-band{border-color:transparent;background:transparent;padding:0 0 4px;border-left:0}
.fb-matchhead .fb-duel.sm{border-bottom:0;padding:4px 0}
.fb-matchhead .fb-when{justify-content:flex-start;padding-top:8px;border-top:1px solid var(--line)}
.fb-matchhead .fb-when .hl{color:var(--green)}
.fb-matchhead.club{border-color:rgba(182,240,0,.35)}
.fb-card.pick{border-color:var(--line2)}
.fb-card.pick h2{color:var(--green)}
.fb-card.fp h2{display:flex;align-items:center;gap:8px;color:var(--green)}.fb-card.fp h2 svg{width:20px;height:20px}
.fb-tile b.neg{color:var(--red)}
.fb-kpi b.up{color:var(--green)}.fb-kpi b.down{color:var(--red)}
.fb-pos{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--green);border-radius:12px;background:rgba(182,240,0,.06)}
.fb-pos-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.fb-pos-h span{font:700 11px Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.fb-pos-h b{font:700 13px Inter;color:var(--fg)}
.fb-pos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fb-pos-grid>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.fb-pos-grid b{font:700 22px/1 Inter;font-variant-numeric:tabular-nums;white-space:nowrap}.fb-pos-grid b.display{font-size:30px;color:var(--green)}
.fb-pos-grid small{font:600 9px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.2}
.fb-pos>small{color:var(--muted);font:600 11px Inter;letter-spacing:.06em;text-transform:uppercase}
.fb-progress{height:8px;border-radius:4px;background:var(--bg);overflow:hidden}
.fb-progress i{display:block;height:100%;background:var(--green);border-radius:4px;transition:width .6s var(--ease)}
.fb-lbmeta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px}
.fb-lbcol{display:none}
.fb-podium>div{gap:5px}.fb-podium>div.me{border-color:var(--green);background:rgba(182,240,0,.06)}
.fb-podium em{font:600 10px Inter;font-style:normal;color:var(--muted)}
.fb-podium .p1 .fb-crest{width:40px;height:46px}
.fb-dots{display:flex;flex-wrap:wrap;gap:6px}
.fb-dots i{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;font:700 14px Inter;font-style:normal;transform:skewX(-8deg)}
.fb-dots i.ok{background:var(--green);color:var(--green-ink)}
.fb-dots i.ko{background:var(--card2);color:var(--red);border:1px solid rgba(255,93,93,.4)}
.fb-identity.none{border-style:dashed}
.fb-identity .n b{overflow-wrap:anywhere}
.fb-search{position:relative;display:block}
.fb-search>svg{position:absolute;left:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.fb-search input{padding-left:42px;padding-right:44px}
.fb-search input::-webkit-search-cancel-button{display:none}
.fb-clear{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);border-radius:8px}
.fb-clear svg{width:20px;height:20px}.fb-clear:hover{color:var(--fg)}
.fb-cgroup{display:flex;flex-direction:column;gap:8px}
.fb-cgroup+.fb-cgroup{margin-top:10px}
.fb-club{min-height:56px;gap:12px}
.fb-club .n{flex:1}
.fb-club small em{font-style:normal;color:var(--green);font-weight:600}
.fb-club-check{display:none;width:24px;height:24px;color:var(--green);flex:0 0 auto}
.fb-club-check svg{width:24px;height:24px}
.fb-club.on .fb-club-check{display:inline-flex}
.fb-club.on{box-shadow:inset 3px 0 0 var(--green)}
.fb-sel{font:600 12.5px Inter;color:var(--muted);text-align:center;min-height:16px}
.fb-hub{display:flex;flex-direction:column;gap:18px}
.fb-hub-main,.fb-hub-side{display:flex;flex-direction:column;gap:16px}
.fb-me{display:flex;flex-direction:column;gap:16px}
.fb-me-main,.fb-me-side{display:flex;flex-direction:column;gap:16px}
.fb-main>section{min-height:40vh}

/* ---------- desktop : accueil, listes, club, classements, profil ---------- */
@media (min-width:900px){
  .fb-strip{padding:0 20px}
  .fb-main>section.fb-hub{display:grid;grid-template-columns:minmax(0,3fr) minmax(280px,2fr);gap:28px;align-items:start;max-width:1100px;width:100%;margin:0 auto}
  .fb-hub>.fb-foot{grid-column:1/3}
  .fb-hub-side{position:sticky;top:16px}
  .fb-hero{padding:6px 0 22px}
  .fb-duel .side b{font-size:44px}
  .fb-list-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .fb-days .fb-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .fb-grid{grid-template-columns:1fr 1fr}
  .fb-grid li+li .fb-club{border-top:0}.fb-grid li .fb-club{border-bottom:1px solid var(--line)}
  .fb-grid li:nth-child(odd) .fb-club{border-right:1px solid var(--line)}
  .fb-lbrow{gap:16px;padding:10px 12px}
  .fb-lbcol{display:flex;flex-direction:column;align-items:flex-end;min-width:64px;font:700 15px Inter;font-variant-numeric:tabular-nums}
  .fb-lbcol small{color:var(--muted);font:600 9.5px Inter;letter-spacing:.1em;text-transform:uppercase}
  .fb-lbname small{display:none}
  .fb-lbiq{min-width:64px}
  .fb-podium{gap:10px}.fb-podium>div{padding:16px 10px}
  .fb-me{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:24px;align-items:start}
  .fb-me-main{position:sticky;top:16px}
  .fb-main>section.narrow.wide{max-width:1000px}
  .fb-empty{padding:34px 24px}
  .fb-onb .fb-btn{width:auto;min-width:200px}
}
@media (min-width:1100px){.fb-main>section.fb-hub{grid-template-columns:minmax(0,5fr) minmax(300px,3fr)}}

/* ---------- lignes de match : deux équipes, horaire, pastille ---------- */
.fb-crest.xs{width:26px;height:30px}.fb-crest.xs b{font-size:10px;padding-bottom:2px}.fb-crest.xs svg{stroke-width:2.4}
.fb-row{gap:10px;padding:9px 10px 9px 12px;min-height:66px}
.fb-row-teams{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.fb-row-teams .t{display:flex;align-items:center;gap:8px;min-width:0}
.fb-row-teams b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:15px;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1}
.fb-row-when{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto;text-align:right;max-width:34%}
.fb-row-when b{font:700 14px Inter;font-variant-numeric:tabular-nums;color:var(--fg);white-space:nowrap}
.fb-row-when small{font:600 10px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fb-row-when small.rd{color:var(--fg);opacity:.8}
.fb-row-when small.comp{display:none}
.fb-row-when .fb-tag{margin-top:2px}
.fb-row-side{gap:6px}
.fb-row.ok{border-left-color:var(--green)}.fb-row.ko{border-left-color:rgba(255,93,93,.7)}
.fb-chip span{display:none}
.fb-chip.todo{display:none}
.fb-chip.on{padding:0 7px}
@media (min-width:900px){
  .fb-chip span{display:inline}.fb-chip.todo{display:inline-flex}
  .fb-row-when small.comp{display:block}
  .fb-row-teams b{font-size:16px}
}

.fb-row-when{max-width:32%}
.fb-pill.bad{white-space:nowrap}

.fb-duel.sm .side b{font-size:17px;overflow-wrap:normal;word-break:normal;line-height:1.05}
.fb-duel.sm .side{gap:8px}
.fb-duel.sm>em{padding:0 2px}
@media (min-width:900px){.fb-duel.sm .side b{font-size:26px}}

/* ---------- matchs terminés : score par ligne d'équipe ---------- */
.fb-row-teams .t em.sc{margin-left:auto;font-family:Anton,Impact,sans-serif;font-style:normal;font-size:19px;line-height:1;color:var(--muted);min-width:22px;text-align:right;padding-left:8px;font-variant-numeric:tabular-nums}
.fb-row-teams .t.w em.sc,.fb-row-teams .t.w b{color:var(--fg)}
.fb-row-teams .t.w em.sc{color:var(--green)}
.fb-row.done{border-left-color:var(--line2)}
.fb-row.pending{border-left-color:#f0b429}
.fb-row.done .fb-row-when b.d{font:700 11px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.fb-row.done .fb-row-when{max-width:36%}
.fb-tabs.three{grid-template-columns:repeat(3,1fr)}
.fb-tabs.three .fb-tab{font-size:14px;padding:0 4px}

.fb-card.model.past{background:var(--card);border-color:var(--line2)}
.fb-card.model.past h2{color:var(--muted)}
.fb-card.model.past .fb-empty-ic{color:var(--muted)}

/* ---------- chantier Pro : analyses détaillées, Scenario Lab, Ask the Match, historique avancé, page Pro ---------- */
.fb-pro{display:inline-flex;align-items:center;min-height:20px;padding:0 7px;border-radius:6px;background:var(--card2);border:1px solid var(--green);color:var(--green);font-family:Anton,Impact,sans-serif;font-size:11px;letter-spacing:.08em;vertical-align:middle}
.fb-quota{color:var(--muted);font:600 12px Inter;white-space:nowrap;font-variant-numeric:tabular-nums}
.fb-quota.zero{color:var(--green)}
.fb-quotaline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fb-quotaline small{color:var(--muted);font-size:11.5px}
.fb-proentries .fb-row{gap:12px}
.fb-row-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--card2);border:1px solid var(--line)}
.fb-row-ic svg{width:19px;height:19px;color:var(--green)}
.fb-row-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fb-row-t b{font:700 14px Inter}
.fb-row-t small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-row.static{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);min-height:52px}
.fb-link.danger{color:var(--red)}

/* panneau verrouillé */
.fb-deep{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:14px}
.fb-deep>li{border-left:2px solid var(--line2);padding-left:12px}
.fb-deep .fb-sec-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.fb-deep p{margin:0}
.fb-conf{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.fb-deep-end{margin-top:16px;padding-top:12px;border-top:1px solid var(--line2)}
.fb-deep-end p{margin:4px 0 0;color:var(--muted)}
.fb-tag.warn{background:transparent;border:1px solid var(--line2);color:var(--muted)}
/* Le nom du club mene a sa fiche : c'est un lien, donc une cible tactile a part entiere. Il faisait 33 px. */
.fb-link-plain{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.fb-link-plain:hover b,.fb-link-plain:focus-visible b{color:var(--green)}
.fb-404{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;padding:24px 0}
.fb-404-url code{font-size:12px;color:var(--muted);word-break:break-all}
.fb-404-cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.fb-404-cta .fb-btn{width:auto;min-width:150px}
.fb-lock{border:1px dashed var(--line2);border-radius:16px;background:var(--bg2);padding:18px 14px}
.fb-lock-in{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.fb-lock-in svg{width:26px;height:26px;color:var(--green)}
.fb-lock-in b{font:800 15px Inter}
.fb-lock-in small{color:var(--muted);font-size:12px;max-width:46ch}
.fb-lock-in ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.fb-lock-in li{padding:3px 9px;border:1px solid var(--line2);border-radius:999px;font:600 11.5px Inter;color:var(--muted)}

/* analyse détaillée */
.fb-tops{display:flex;gap:6px;flex-wrap:wrap}
.fb-tops span{display:inline-flex;align-items:baseline;gap:5px;padding:5px 9px;border-radius:9px;background:var(--card2);border:1px solid var(--line)}
.fb-tops span b{font-size:15px;letter-spacing:.04em}
.fb-tops span small{color:var(--muted);font-size:11px}
.fb-heat{display:grid;grid-template-columns:auto repeat(6,1fr);gap:3px;font-size:11px;margin-top:4px}
.fb-heat .hd,.fb-heat .rh{color:var(--muted);font-weight:600;display:flex;align-items:center;justify-content:center;padding:2px}
.fb-heat .c{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:5px;background:color-mix(in srgb,var(--blue) calc(var(--p) * 1%),var(--card2));font:600 10px Inter;color:var(--fg);font-variant-numeric:tabular-nums}
.fb-heat .c.top{outline:2px solid var(--green);outline-offset:-2px}
.fb-goals{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;align-items:end;height:88px}
.fb-goals div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%;font-size:11px;color:var(--muted)}
.fb-goals i{width:100%;background:var(--blue);border-radius:4px 4px 0 0;min-height:2px}
.fb-goals b{color:var(--fg);font:700 11.5px Inter;font-variant-numeric:tabular-nums}
.fb-goals b small{color:var(--muted);font-weight:500}
.fb-spark{width:100%;height:auto;display:block}
.fb-spark.tall{min-height:110px}
.fb-key{display:inline-block;width:10px;height:3px;border-radius:2px;vertical-align:middle;margin-right:5px}
.fb-key.b{background:var(--blue)}.fb-key.f{background:var(--fg)}
.fb-mini{display:inline-block;flex:1;height:7px;background:var(--card2);border-radius:4px;overflow:hidden}
.fb-mini i{display:block;height:100%;background:var(--blue);border-radius:4px}
.fb-mini i.g{background:var(--green)}
.fb-sb{display:flex;flex-direction:column;gap:5px;padding:8px 0;border-bottom:1px solid var(--line)}
.fb-sb:last-child{border-bottom:0}
.fb-sb>b{font:700 13px Inter}
.fb-sb>div{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.fb-sb>div>span{min-width:64px}
.fb-sb>div>em{font-style:normal;color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums;min-width:44px;text-align:right}
.fb-cmp-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.fb-cmp-list a{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);min-height:50px}
.fb-cmp-list .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fb-cmp-list .t b{font:600 13px Inter}
.fb-cmp-list .t small{color:var(--muted);font-size:11.5px}

/* Scenario Lab */
.fb-warn{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:12px;background:var(--bg2);border:1px solid var(--line2);color:var(--muted);font-size:12.5px;line-height:1.4}
.fb-warn svg{width:17px;height:17px;flex:0 0 auto;margin-top:1px;color:var(--fg)}
.fb-chips{display:flex;gap:6px;flex-wrap:wrap}
.fb-chipb{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line2);background:var(--card2);font:600 12.5px Inter;color:var(--fg);text-align:left}
.fb-chipb:hover{border-color:var(--green)}
.fb-chipb.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.fb-slider{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.fb-slider:last-of-type{border-bottom:0}
.fb-slider label{font:600 13px Inter}
.fb-slider output{font:700 13px Inter;font-variant-numeric:tabular-nums}
.fb-slider input{grid-column:1/-1;width:100%;accent-color:var(--green);height:30px}
.fb-slider input:disabled{accent-color:var(--line2);opacity:.6}
.fb-cmp{display:grid;grid-template-columns:24px 1fr 1fr 46px;gap:8px 8px;align-items:center;font-size:12px}
.fb-cmp .hd{color:var(--muted);font-weight:600;font-size:11px}
.fb-cmp .hd.b{color:var(--blue)}
.fb-cmp .hd.r{text-align:right}
.fb-cmp .k{font-size:16px;color:var(--fg)}
.fb-cmp .bar{height:9px;background:var(--card2);border-radius:5px}
.fb-cmp .bar i{display:block;height:100%;border-radius:5px;background:var(--blue);transition:width .35s var(--ease)}
.fb-cmp .bar.s i{background:var(--fg)}
.fb-cmp .cell{display:flex;align-items:center;gap:7px;min-width:0}
.fb-cmp .cell .bar{flex:1;min-width:0}
.fb-cmp .cell b{font:700 12px Inter;font-variant-numeric:tabular-nums;color:var(--fg);min-width:20px;text-align:right}
.fb-cmp .d{text-align:right;font:700 13px Inter;font-variant-numeric:tabular-nums}
.fb-cmp .d.up{color:var(--green)}.fb-cmp .d.dn{color:var(--red)}
.fb-hyp{font-size:13px;line-height:1.45}
.fb-saveline{display:flex;gap:8px;flex-wrap:wrap}
.fb-saveline input{flex:1;min-width:150px;min-height:42px;padding:0 12px;border-radius:11px;border:1px solid var(--line2);background:var(--card2);font:14px Inter}

/* Ask the Match */
.fb-thread{display:flex;flex-direction:column;gap:10px}
.fb-q{align-self:flex-end;max-width:88%;padding:9px 12px;border-radius:14px 14px 4px 14px;background:var(--card2);border:1px solid var(--line2);font-size:13.5px}
.fb-a{align-self:flex-start;max-width:94%;padding:11px 13px;border-radius:14px 14px 14px 4px;background:var(--card);border:1px solid var(--line);font-size:13.5px;line-height:1.5;display:flex;flex-direction:column;gap:8px;box-shadow:inset 3px 0 0 var(--blue)}
.fb-a.ref{box-shadow:inset 3px 0 0 var(--muted)}
.fb-a.pending{min-width:180px}
.fb-src{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.fb-src span{font:600 10px Inter;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)}
.fb-src .u{margin-left:auto;text-transform:none;letter-spacing:0;border-color:transparent;padding:0}
.fb-ask{display:flex;gap:8px;align-items:center;padding:6px 6px 6px 12px;border:1px solid var(--line2);border-radius:14px;background:var(--card)}
.fb-ask input{flex:1;min-width:0;background:none;border:0;color:var(--fg);font:14px Inter;min-height:38px}
.fb-ask input::placeholder{color:var(--muted)}
.fb-ask button{min-width:42px;min-height:42px;border-radius:11px;background:var(--green);color:var(--green-ink);font-size:16px}
.fb-ask.off{opacity:.65}
.fb-ask.off button{background:var(--card2);color:var(--muted)}

/* historique avancé */
.fb-tabs.scroll{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fb-tabs.scroll::-webkit-scrollbar{display:none}
.fb-tabs.scroll .fb-tab{white-space:nowrap;flex:0 0 auto}
.fb-tblwrap{overflow-x:auto}
.fb-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.fb-tbl th{text-align:left;color:var(--muted);font:600 11.5px Inter;padding:5px 8px 5px 0;border-bottom:1px solid var(--line)}
.fb-tbl td{padding:7px 8px 7px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.fb-tbl th:not(:first-child),.fb-tbl td:not(:first-child){text-align:right;padding-right:0}
.fb-tbl tr:last-child td{border-bottom:0}

/* ligne de plan et page Pro */
.fb-planline{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;background:var(--card);border:1px solid var(--line);min-height:56px}
.fb-planline.pro{border-color:var(--green)}
.fb-planline i{color:var(--muted);font-style:normal}
.fb-prohero{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 16px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.fb-prohero .fb-lines{position:absolute;inset:0;width:100%;height:100%;opacity:.35}
.fb-prohero>*{position:relative}
.fb-unlock{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fb-unlock div{padding:12px;border-radius:14px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.fb-unlock b{font:700 13px Inter}
.fb-unlock small{color:var(--muted);font-size:11.5px;line-height:1.4}
.fb-never{list-style:none;padding:0;display:flex;flex-direction:column;gap:9px;font-size:13px;line-height:1.45}
.fb-never li{display:flex;gap:10px;align-items:flex-start}
.fb-never svg{width:18px;height:18px;flex:0 0 auto;color:var(--green);margin-top:1px}
.fb-price{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fb-price b{font-size:30px}
@media (min-width:720px){.fb-heat{max-width:420px}.fb-unlock{grid-template-columns:repeat(4,1fr)}}

/* ---------- audit mobile 320 / 375 px : rien n'est coupé, tout se touche au doigt ---------- */
/* Sous-titres : ils s'enroulent au lieu d'être tronqués quand la ligne est étroite. */
.fb-row-t{min-width:0}
.fb-row-t small{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
.fb-row-t .fb-quota{margin-top:2px}
.fb-proentries .fb-row,.fb-planline{align-items:flex-start;padding-top:12px;padding-bottom:12px}
.fb-proentries .fb-row-ic,.fb-planline .fb-row-ic,.fb-planline .fb-pill,.fb-planline .fb-pro{margin-top:1px}
.fb-proentries .fb-row>i,.fb-planline>i{align-self:center}
/* Nom d'équipe de la carte modèle et du bandeau : enroulement plutôt que troncature.
   La règle d'origine impose nowrap + overflow caché : à 320 px le nom du club était coupé en plein milieu. */
.fb-lead>div{min-width:0}
.fb-lead b{white-space:normal;overflow:visible;overflow-wrap:anywhere;line-height:1.2}
/* Résumés dépliants : la zone tactile atteint 44 px. */
.fb-ribbon>summary,.fb-details>summary{min-height:44px;display:flex;align-items:center;gap:6px}
/* Lignes de match : à l'étroit, les équipes prennent toute la largeur et la date passe dessous. */
@media (max-width:400px){
  .fb-row{flex-wrap:wrap;row-gap:8px}
  .fb-row-teams,.fb-row-main{flex:1 1 100%}
  .fb-row-when{flex:0 1 auto}
  .fb-row-side{margin-left:auto}
}
.fb-duel.sm .side{min-width:0}
/* Le nom d'une equipe a droit a une largeur. La regle qui occupait cette place retablissait `overflow-wrap:anywhere`
   sur le MEME selecteur que la ligne 500, et gagnait par ordre de source : a 320 px le conteneur de « REAL SOCIEDAD »
   faisait 31 px de large sur 5 lignes — exactement le defaut « IRON WANDER / ERS » que le commentaire de la ligne 123
   dit avoir corrige. La colonne du nom porte desormais un plancher : la largeur du mot le plus long d'un club servi
   (« MONCHENGLADBACH », 132 px en Anton 17 px). Deux colonnes ne peuvent pas l'honorer sous 560 px — au plus juste,
   (561 - 40 marges - 24 carte - 16 gouttieres - 30 « VS ») / 2 - 72 ecusson - 8 = 145 px. En dessous, l'affiche passe
   a UNE equipe par ligne : un nom entier sur une ou deux lignes vaut mieux que deux noms en colonnes d'une lettre.
   `break-word` (et non `anywhere`) est la politique de la ligne 123 : on coupe entre les mots, et en plein mot
   seulement quand un mot seul ne tient pas — sinon il debordait, et la carte le rognait (overflow:hidden). */
.fb-duel.sm{--fb-nom-min:132px}
.fb-duel.sm .side b{min-width:var(--fb-nom-min);overflow-wrap:break-word}
@media (max-width:560px){
  .fb-duel.sm{--fb-nom-min:0px;grid-template-columns:minmax(0,1fr);gap:4px}
  .fb-duel.sm>em{justify-self:center;padding:0}
  .fb-duel.sm .side{width:100%;text-align:left}
  /* Le miroir de la ligne 132 (ecussons vers l'exterieur) n'a de sens qu'a deux colonnes. Empilees, les deux
     equipes partagent le meme bord gauche : sinon un nom commence a gauche et l'autre finit a droite. */
  .fb-duel.sm .side:last-child{flex-direction:row}
  .fb-duel.sm .side:last-child b{text-align:left}
}
/* Cibles tactiles : 44 px minimum sur les commandes du chantier Pro. */
.fb-chipb{min-height:44px;padding:8px 14px;line-height:1.25}
.fb-slider input[type="range"]{height:44px;margin:0;width:100%}
.fb-ask input{min-height:44px}
.fb-ask button{min-width:44px;min-height:44px}
.fb-saveline input{min-height:44px}
.fb-lock-in .fb-btn,.fb-prohero+.fb-unlock+.fb-card .fb-btn{min-height:44px}
/* Bandeau d'onglets défilable : on voit qu'il continue, et l'onglet actif est amené à l'écran. */
/* Le bandeau d'origine est une grille à deux colonnes : la variante défilante doit repasser en ligne unique,
   sinon les onglets s'empilent et le dégradé de bord les coupe. */
.fb-tabs.scroll{display:flex;flex-wrap:nowrap;position:relative;padding-right:6px;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 22px),transparent 100%);
  mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 22px),transparent 100%)}
.fb-tabs.scroll .fb-tab{min-height:44px;display:inline-flex;align-items:center}
/* Tableaux : lisibles à 320 px, et défilables proprement si la ligne reste trop large. */
.fb-tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fb-tbl th,.fb-tbl td{white-space:nowrap}
.fb-tbl th:first-child,.fb-tbl td:first-child{white-space:normal;min-width:88px}
/* Comparaison officiel / scénario : les colonnes tiennent à 320 px. */
@media (max-width:379px){
  .fb-cmp{grid-template-columns:20px 1fr 1fr 38px;gap:7px 6px}
  .fb-cmp .cell{gap:5px}
  .fb-cmp .cell b{min-width:18px;font-size:11.5px}
  .fb-cmp .d{font-size:12px}
  .fb-heat{gap:2px;font-size:10px}
  .fb-goals{gap:4px}
  .fb-unlock{grid-template-columns:1fr}
  .fb-kpis{grid-template-columns:1fr 1fr}
}
/* Séries d'un coup d'œil : les pastilles ne débordent jamais de leur carte. */
.fb-dots{padding-right:4px}

/* ---------- scores en direct (module live) : lecture seule, rafraîchi toutes les 60 s seulement quand un match est en cours ---------- */
.fb-live .fb-day-h span{display:inline-flex;align-items:center;gap:7px;color:var(--red)}
.fb-live .fb-note{margin:6px 0 0}
.fb-row-when b.min{color:var(--red)}
.fb-live-warn{font:600 12px Inter;line-height:1.35;color:#f0b429;background:rgba(240,180,41,.08);border:1px solid rgba(240,180,41,.35);border-radius:8px;padding:8px 10px;margin:8px 0 0}
.fb-live-warn.hidden{display:none}
.fb-livecard{margin-bottom:12px}
.fb-livecard.live{border-color:rgba(255,93,93,.45)}
.fb-livecard-h{display:flex;align-items:center;justify-content:space-between;gap:10px;font:700 11px Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.fb-livecard.live .fb-livecard-h span{color:var(--red);display:inline-flex;align-items:center}
.fb-livecard-h b{font:700 16px Inter;font-variant-numeric:tabular-nums;color:var(--fg)}
.fb-livecard .fb-score b.display{font-variant-numeric:tabular-nums}
.fb-status.live{display:inline-flex;align-items:center;gap:4px}
@media (max-width:375px){.fb-row-when{max-width:38%}.fb-row-when b.min{font-size:13px}}
@media (max-width:320px){.fb-row{gap:8px;padding:8px 8px 8px 10px}.fb-row-teams b{font-size:13px}.fb-row-when{max-width:42%}.fb-row-when small{font-size:9px}.fb-livecard .fb-score b.display{font-size:30px}.fb-livecard-h{flex-wrap:wrap}}

/* Classement des clubs : lisible à 320 px (la colonne club reste visible, le reste défile). */
.fb-standings td.nm{display:flex;align-items:center;gap:8px;min-width:132px;white-space:nowrap}
.fb-standings td.nm span{overflow:hidden;text-overflow:ellipsis}
.fb-standings th:first-child,.fb-standings td:first-child{width:26px;color:var(--muted);text-align:left}
.fb-standings td.fm{display:flex;gap:3px;justify-content:flex-end;padding-top:10px}
/* Pastille de forme (V/N/D) du classement. Nommée « streak » et non « form » : « form » désigne un formulaire dans le
   reste de la feuille, et l'homonymie français/anglais avait fini par réduire les formulaires d'authentification à 7 px. */
.fb-streak{width:7px;height:7px;border-radius:2px;display:inline-block;background:var(--muted)}
.fb-streak.w{background:var(--green)}
.fb-streak.l{background:#e2564d}
.fb-streak.d{background:var(--line2)}

/* Effectif et contexte : deux colonnes dès 560 px, une seule en dessous ; listes lisibles à 320 px. */
.fb-squad h2{font:800 15px Inter;margin:0 0 10px}
.fb-sq-grid{display:grid;grid-template-columns:1fr;gap:14px}
.fb-sq-side h4{display:flex;align-items:center;gap:8px;font:700 13.5px Inter;margin:0 0 8px}
.fb-sq-side h4 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-sq-g{margin:0 0 8px}
.fb-sq-g>small{display:block;color:var(--muted);font:600 11px Inter;letter-spacing:.04em;text-transform:uppercase;margin-bottom:3px}
.fb-sq-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.fb-sq-l li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:13px;padding-left:9px;border-left:2px solid var(--line2)}
.fb-sq-l.susp li{border-left-color:#e2564d}
.fb-sq-l.abs li{border-left-color:#e08a3c}
.fb-sq-l.doubt li{border-left-color:var(--line2)}
.fb-sq-l li i{font-style:normal;font-size:10.5px;color:var(--green);border:1px solid var(--line2);border-radius:6px;padding:0 5px}
.fb-sq-l li small{color:var(--muted);font-size:11.5px}
.fb-sq-sched{margin:8px 0 0;display:flex;flex-direction:column;gap:4px}
.fb-sq-sched div{display:flex;gap:8px;justify-content:space-between;font-size:12.5px;border-top:1px solid var(--line);padding-top:4px}
.fb-sq-sched dt{color:var(--muted)}
.fb-sq-sched dd{margin:0;text-align:right;overflow-wrap:anywhere}
.fb-sq-prio{font-style:normal;color:var(--green);white-space:nowrap}
.fb-sq-imp{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:baseline;margin:10px 0 4px;font-size:13px}
.fb-sq-imp b{font-variant-numeric:tabular-nums}
.fb-sq-warn{margin:6px 0 0;font-size:12.5px;color:#e0b04a}
@media (min-width:560px){.fb-sq-grid{grid-template-columns:1fr 1fr;gap:18px}}

/* Clans ColdRead : listes et pages lisibles à 320 px, deux colonnes sur grand écran. */
.fb-input{width:100%;min-height:48px;padding:10px 12px;border-radius:8px;border:1px solid var(--line2);background:var(--card);color:var(--fg);font-size:15px}
.fb-input::placeholder{color:var(--muted)}
textarea.fb-input{min-height:76px;resize:vertical;line-height:1.4}
input.fb-input[type="color"]{padding:4px;height:48px}
.fb-clans{display:grid;grid-template-columns:1fr;gap:10px}
.fb-clan{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none;color:inherit}
.fb-clan-b{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font:800 14px Inter;color:#0a0f1c;background:var(--cc,#b6f000)}
.fb-clan-b.lg{width:56px;height:56px;font-size:18px;border-radius:16px}
.fb-clan-t{flex:1;min-width:0;display:flex;flex-direction:column}
.fb-clan-t b{font:700 14.5px Inter;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-clan-t small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-clan-m{flex:0 1 auto;min-width:0;text-align:right;font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:2px;white-space:nowrap}
.fb-clan-m i{font-style:normal;color:var(--green);font-variant-numeric:tabular-nums}
.fb-clan-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.fb-clan-actions .fb-input{flex:1 1 120px;min-width:0}
.fb-clanhead{display:flex;gap:14px;align-items:flex-start;margin-bottom:6px}
.fb-clanhead h1{margin:0 0 2px}
.fb-clan-meta{color:var(--muted);font-size:12.5px;margin:4px 0 0}
.fb-clanboard{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.fb-clanboard li{display:grid;grid-template-columns:26px 1fr auto auto;gap:8px;align-items:baseline;font-size:13px;border-top:1px solid var(--line);padding-top:5px}
.fb-clanboard li.me{color:var(--green)}
.fb-clanboard li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-clanboard li i{font-style:normal;color:var(--muted);font-size:11.5px}
.fb-clanboard li em{font-style:normal;font-variant-numeric:tabular-nums}
.fb-obj{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.fb-obj li{display:grid;grid-template-columns:1fr 90px 42px;gap:8px;align-items:center;font-size:12.5px}
.fb-invite b{font:800 22px Inter;letter-spacing:.16em;display:block}
.fb-form{display:flex;flex-direction:column;gap:12px}
.fb-form label{display:flex;flex-direction:column;gap:5px;font:600 12.5px Inter;color:var(--muted)}
@media (min-width:720px){.fb-clans{grid-template-columns:1fr 1fr}}
@media (max-width:360px){.fb-obj li{grid-template-columns:1fr 60px 38px}
  .fb-clan{gap:8px;padding:10px}.fb-clan-b{width:34px;height:34px;font-size:12.5px}
  .fb-clan-m{font-size:11px;white-space:normal;max-width:64px;overflow-wrap:anywhere}.fb-clan-m i{display:none}}
.fb-feed{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.fb-feed li{display:flex;flex-wrap:wrap;gap:5px;align-items:baseline;font-size:12.5px;border-left:2px solid var(--line2);padding-left:9px}
.fb-feed li.new{border-left-color:var(--green)}
.fb-feed li small{color:var(--muted);margin-left:auto;white-space:nowrap}
.fb-badge{font-style:normal;font-size:11px;color:var(--green);border:1px solid var(--line2);border-radius:8px;padding:1px 6px;vertical-align:middle}

/* Lectures dérivées, statistiques publiées et probabilités pendant le match. */
.fb-mk{display:grid;grid-template-columns:1fr;gap:12px;margin-top:8px}
.fb-mk>div>small{display:block;color:var(--muted);font:600 11px Inter;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px}
.fb-mk ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.fb-mk li{display:flex;justify-content:space-between;gap:10px;font-size:13px;border-top:1px solid var(--line);padding-top:3px}
.fb-mk li b{font-variant-numeric:tabular-nums}
.fb-statgrid td.na{color:var(--muted);font-size:12px;white-space:normal;overflow-wrap:anywhere;min-width:150px}
.fb-statgrid td:first-child{white-space:nowrap}
.fb-statgrid td.na i{font-style:normal;color:#e0b04a}
.fb-probs td{font-variant-numeric:tabular-nums;white-space:nowrap}
.fb-probs td .d{font-style:normal;color:var(--muted);margin-left:3px}
.fb-probs td small{color:var(--muted)}
@media (min-width:560px){.fb-mk{grid-template-columns:repeat(3,1fr)}}

/* ---------- Fiches équipe et joueur, chapitres d'analyse, recherche ---------- */
/* Une pastille distingue toujours un fait sourcé d'une lecture déduite : le lecteur doit pouvoir faire la différence. */
.fb-tag{display:inline-block;font:700 9.5px Inter;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:6px;vertical-align:middle;margin-left:6px}
.fb-tag.ok{background:rgba(182,240,0,.14);color:var(--green)}
.fb-tag.derived{background:var(--card2);color:var(--muted)}
.fb-note.na{color:var(--muted);font-style:italic}
.fb-teamhead{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.fb-teamhead .fb-h1{margin:0}
.fb-formrow{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.fb-list-inline{display:flex;gap:10px;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.fb-list-inline li{background:var(--card2);border-radius:8px;padding:6px 10px;font-size:13px}
.fb-chapters{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;counter-reset:ch}
.fb-chapters>li{border-left:2px solid var(--line2);padding-left:12px}
.fb-chapters>li.off{opacity:.62}
.fb-chapters h3{display:flex;align-items:center;gap:8px;font:700 14px Inter;margin:0 0 4px}
.fb-chn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--card2);color:var(--muted);font:700 11px Inter;flex:0 0 auto}
.fb-chapters p{margin:0 0 4px;font-size:13.5px;line-height:1.5}
.fb-timeline{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:4px}
.fb-timeline li{display:grid;grid-template-columns:44px auto 1fr;gap:8px;align-items:start;font-size:12.5px;line-height:1.45}
.fb-timeline b{font-variant-numeric:tabular-nums;color:var(--muted)}
.fb-timeline em{font-style:normal;color:var(--muted);min-width:0;white-space:normal;overflow-wrap:anywhere}
.fb-searchbar{display:flex;gap:8px;margin-bottom:14px}
.fb-searchbar input{flex:1;min-width:0;min-height:46px;padding:0 14px;border-radius:8px;border:1px solid var(--line2);background:var(--card);font-size:16px;color:var(--fg)}
.fb-searchbar button{flex:0 0 auto;width:auto;min-width:0;padding:0 16px}
@media (max-width:360px){.fb-timeline li{grid-template-columns:38px auto 1fr;gap:6px}.fb-teamhead{gap:10px}}
@media (prefers-reduced-motion:reduce){.fb-chapters>li{transition:none}}
.fb-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;color:var(--muted);flex:0 0 auto}
.fb-iconbtn:hover,.fb-iconbtn:focus-visible{color:var(--fg);background:var(--card2)}
.fb-iconbtn svg{width:20px;height:20px}
/* Un nom court (« Ried », « GAK », « WAC ») ne donnait qu'une cible de 32 px de large : les championnats
   autrichien et suisse en sont pleins. Le lien occupe desormais la place disponible dans sa cellule. */
.fb-standings td.nm a{color:var(--fg);display:inline-flex;align-items:center;min-width:44px;min-height:44px}
.fb-standings td.nm a:hover,.fb-standings td.nm a:focus-visible{color:var(--green);text-decoration:underline}
.fb-tally th,.fb-tally td{white-space:nowrap;text-align:right}
.fb-tally th:first-child,.fb-tally td:first-child{text-align:left;white-space:nowrap}
.fb-tally th{font-variant-numeric:tabular-nums;color:var(--muted)}
.fb-tally td{font-variant-numeric:tabular-nums}
.fb-live-fresh{display:block;margin:6px 2px 0;color:var(--muted);font-size:11px}
.fb-timeline em a{color:var(--fg);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:2px}
.fb-timeline em a:hover,.fb-timeline em a:focus-visible{color:var(--green);text-decoration-color:currentColor}
.fb-timeline li.goal b{color:var(--green)}
.fb-timeline li.goal span{font-weight:700;color:var(--fg)}

/* ===========================================================================
   Couche de mouvement — refonte du 10 septembre 2026
   Règle unique : une animation doit AIDER à lire. Elle porte une information (ce qui vient d'arriver, ce qui a changé,
   où l'on est) ou elle n'existe pas. Tout passe par `transform` et `opacity` : aucune propriété qui déclenche un
   recalcul de disposition, donc pas de saccade sur un téléphone moyen.
   =========================================================================== */
:root{
  --dur-1:120ms;      /* pression, retour d'état    */
  --dur-2:200ms;      /* transition de page, onglet */
  --dur-3:320ms;      /* accordéon, tracé           */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-io:cubic-bezier(.4,0,.2,1);
  --stagger:50ms;     /* décalage d'apparition des cartes */
}

/* --- Transition de page : fondu + 10 px, jamais plus. Au-delà, la page « saute ». --- */
.fb-main>section{animation:fbRise var(--dur-2) var(--ease-out) both}
@keyframes fbRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* --- Apparition des cartes : les SIX premières seulement. Au-delà, l'attente devient perceptible. --- */
.fb-stagger>*{animation:fbRise var(--dur-2) var(--ease-out) both}
.fb-stagger>*:nth-child(1){animation-delay:0ms}
.fb-stagger>*:nth-child(2){animation-delay:calc(var(--stagger) * 1)}
.fb-stagger>*:nth-child(3){animation-delay:calc(var(--stagger) * 2)}
.fb-stagger>*:nth-child(4){animation-delay:calc(var(--stagger) * 3)}
.fb-stagger>*:nth-child(5){animation-delay:calc(var(--stagger) * 4)}
.fb-stagger>*:nth-child(6){animation-delay:calc(var(--stagger) * 5)}
.fb-stagger>*:nth-child(n+7){animation:none}

/* --- Onglets : l'indicateur glisse d'un onglet à l'autre. La position est portée par une variable, la barre ne
       change jamais de taille par la disposition — elle se translate et s'étire, donc sur le compositeur. --- */
.fb-tabs{position:relative}
.fb-tabs .fb-tab-ind{position:absolute;left:0;bottom:0;height:2px;background:var(--green);border-radius:2px;
  width:var(--ind-w,0);transform:translateX(var(--ind-x,0));transition:transform var(--dur-2) var(--ease-out),width var(--dur-2) var(--ease-out);pointer-events:none}

/* --- Accordéon : la hauteur s'ouvre par grid-template-rows (animable, contrairement à height:auto). --- */
.fb-acc{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-3) var(--ease-io)}
.fb-acc.open{grid-template-rows:1fr}
.fb-acc>div{overflow:hidden}
.fb-acc-h .fb-chev{transition:transform var(--dur-2) var(--ease-out)}
.fb-acc-h[aria-expanded="true"] .fb-chev{transform:rotate(180deg)}

/* --- Boutons : survol, focus clavier, pression tactile. 0,98 au clic, jamais moins : en dessous, le bouton
       paraît « mou » et la cible tactile se dérobe sous le doigt. --- */
.fb-btn,.fb-row,.fb-chip,.fb-pill{transition:transform var(--dur-1) var(--ease-out),background-color var(--dur-1) linear,border-color var(--dur-1) linear,color var(--dur-1) linear}
.fb-btn:active,.fb-row:active,.fb-chip:active{transform:scale(.98)}
.fb-btn.primary{position:relative}
/* Halo discret : présent au repos, il ne clignote pas. Un halo qui pulse attire l'œil en permanence et fatigue. */
/* Le halo est dessine par une ombre, qui ne prend aucune place. Un `inset:-2px` debordait le bouton de deux pixels
   et faisait deborder son conteneur sans raison : la couche decorative reste dans les limites. */
.fb-btn.primary::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 0 rgba(182,240,0,.28);transition:box-shadow var(--dur-2) var(--ease-out)}
.fb-btn.primary:hover::after,.fb-btn.primary:focus-visible::after{box-shadow:0 0 0 4px rgba(182,240,0,.18)}

/* --- Valeur qui change : la variation est dite par une couleur ET une flèche, jamais par la seule animation. --- */
.fb-num{display:inline-block;font-variant-numeric:tabular-nums}
.fb-num.up{animation:fbNudgeUp var(--dur-3) var(--ease-out)}
.fb-num.down{animation:fbNudgeDown var(--dur-3) var(--ease-out)}
@keyframes fbNudgeUp{from{transform:translateY(4px);opacity:.5}to{transform:none;opacity:1}}
@keyframes fbNudgeDown{from{transform:translateY(-4px);opacity:.5}to{transform:none;opacity:1}}
.fb-delta{font-size:11px;margin-left:4px;font-weight:700}
.fb-delta.up{color:var(--green)}
.fb-delta.down{color:var(--red)}

/* --- Événement marquant du déroulé : une surbrillance courte, puis plus rien. --- */
.fb-timeline li.fresh{animation:fbFlash 1.1s var(--ease-out)}
@keyframes fbFlash{0%{background:rgba(182,240,0,.16)}100%{background:transparent}}
.fb-timeline li.fresh.red{animation:fbFlashRed 1.1s var(--ease-out)}
@keyframes fbFlashRed{0%{background:rgba(255,93,93,.18)}100%{background:transparent}}

/* --- Graphiques : le tracé se dessine à l'entrée dans l'écran, une seule fois. --- */
.fb-draw path,.fb-draw line,.fb-draw polyline{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)}
.fb-draw.seen path,.fb-draw.seen line,.fb-draw.seen polyline{transition:stroke-dashoffset 600ms var(--ease-io);stroke-dashoffset:0}
.fb-grow{transform:scaleY(0);transform-origin:bottom;transition:transform var(--dur-3) var(--ease-out)}
.fb-draw.seen .fb-grow{transform:scaleY(1)}

/* --- Squelettes : le scintillement n'existe QUE pendant un chargement réel. --- */
.fb-skel{animation:fbShimmer 1.2s linear infinite}

/* --- Messages courts : ils apparaissent, ils ne bloquent rien. --- */
.fb-toast{animation:fbRise var(--dur-2) var(--ease-out) both}

/* --- Mouvement réduit : on retire les déplacements et les compteurs animés. Rien ne dépend d'une animation pour
       être compris — les couleurs, les flèches et les libellés restent. --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .fb-main>section,.fb-stagger>*{animation:none!important;opacity:1!important;transform:none!important}
  .fb-btn:active,.fb-row:active,.fb-chip:active{transform:none}
  .fb-num.up,.fb-num.down{animation:none}
  .fb-timeline li.fresh,.fb-timeline li.fresh.red{animation:none;background:transparent}
  .fb-draw path,.fb-draw line,.fb-draw polyline{stroke-dashoffset:0}
  .fb-grow{transform:none}
  .fb-pill i,.fb-livedot{animation:none}
  .fb-skel{animation:none;background:var(--card2)}
  .fb-acc{transition:none}
}

/* --- Structure : ce que la refonte resserre. --- */
/* Un classement se lit au doigt : chaque ligne est une cible d'au moins 44 px, pas un nom de 15 px. */
.fb-standings td.nm a{display:flex;align-items:center;min-height:44px;gap:8px}
.fb-standings th,.fb-standings td{padding-top:2px;padding-bottom:2px}
/* Les en-tetes chiffres se touchaient : « Club JGNPBPBC » se lisait comme un seul mot. Chaque colonne numerique a
   desormais sa largeur minimale et son air, et le tableau continue de defiler dans son conteneur. */
.fb-standings th:not(:first-child):not(.nm),.fb-standings td:not(:first-child):not(.nm){min-width:30px;padding-left:6px;text-align:right}
.fb-standings th{font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}
/* La navigation garde une seule ligne — une barre qui change de hauteur selon le libellé déforme la grille. Ce qui
   est corrigé, c'est la CAUSE : des libellés assez courts pour tenir, et un chouïa d'air en plus sous 430 px. */
/* La cause de « CLASSEME… » n'etait pas la taille du texte mais sa CASSE : en capitales, un libelle de onze lettres
   ne tient dans aucun cinquieme de 390 px. On rend la casse normale sous 430 px et le libelle tient en entier, plus
   lisible qu'avant. L'ellipse reste en place pour tout libelle qui deborderait malgre tout. */
@media (max-width:430px){
  .fb-nav a{font-size:11px;letter-spacing:.01em;text-transform:none;font-weight:600}
  .fb-nav a svg{width:21px;height:21px}
}

/* --- Verrou Pro : expliqué une fois, rappelé sobrement ------------------------------------------------------------
   Huit cartes verrouillées affichaient huit fois le même paragraphe et le même bouton : la fiche devenait une colonne
   d'annonces et la structure de la page disparaissait. Le panneau complet apparaît une seule fois, en haut ; dans
   chaque carte il ne reste qu'une ligne. --- */
.fb-lock{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.fb-lock .fb-btn{width:auto;min-width:180px}
.fb-lock-h{display:flex;align-items:center;gap:8px;margin:0}
.fb-lock-h svg{width:18px;height:18px;color:var(--green);flex:0 0 auto}
.fb-lock-h b{font:800 15px Inter}
.fb-locked-row{display:flex;align-items:center;gap:8px;margin:0;color:var(--muted);font:600 13px Inter}
.fb-locked-row svg{width:16px;height:16px;flex:0 0 auto;color:var(--line2)}

/* --- Dépliant : ce qui reste caché est annoncé, jamais escamoté. --- */
.fb-foldbtn{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;
  border:1px solid var(--line2);border-radius:12px;background:var(--card);color:var(--fg);font:700 13px Inter}
.fb-foldbtn .fb-chev{font-style:normal;color:var(--muted)}
.fb-foldbtn:hover,.fb-foldbtn:focus-visible{border-color:var(--green);color:var(--green)}

/* --- Le classement devient des cartes sous 430 px ------------------------------------------------------------------
   Un tableau de onze colonnes ne tient pas sur un téléphone : il défilait latéralement, et il fallait pousser l'écran
   pour lire les points. En cartes, chaque club tient sur deux lignes — nom d'abord, chiffres ensuite, chacun avec son
   libellé. Au-dessus de 430 px, le tableau reste un tableau : c'est là qu'il est le plus lisible. --- */
@media (max-width:430px){
  .fb-standings,.fb-standings thead,.fb-standings tbody,.fb-standings tr,.fb-standings td{display:block;width:auto}
  .fb-standings thead{display:none}
  .fb-standings tbody{display:flex;flex-direction:column;gap:8px}
  .fb-standings tr{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:4px 8px;
    padding:10px 62px 12px 44px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
  .fb-standings td{padding:0;border:0;text-align:left;min-width:0}
  /* Le rang sort du flux et sert de repère à gauche, comme un dossard. */
  .fb-standings td:first-child{position:absolute;left:12px;top:12px;width:26px;font:800 15px Inter;color:var(--muted)}
  /* La cible tactile reste de 44 px : la carte a la place, il n'y a aucune raison de la rogner.
     Le `min-width:132px` et le `nowrap` herites du mode tableau imposaient au passage une largeur minimale au
     conteneur entier — d'ou dix pixels de debordement a 320 px. En mode carte, la cellule s'adapte. */
  .fb-standings td.nm{grid-column:1/-1;min-height:44px;min-width:0;white-space:normal}
  /* `min-width:0` sur le LIEN ramenait sa cible a la largeur du texte : « Ried » ne faisait plus que 32 px.
     Le zero reste sur le libelle interieur — c'est lui qui doit pouvoir se replier — et le lien occupe la
     largeur de sa ligne, qui lui est deja reservee (`grid-column: 1/-1`). */
  .fb-standings td.nm a span{min-width:0;overflow-wrap:anywhere}
  .fb-standings td.nm a{min-width:44px;width:100%;overflow-wrap:anywhere}
  .fb-standings{width:100%;table-layout:auto}
  .fb-standings tr{min-width:0}
  .fb-standings td.nm a{min-height:44px;font:700 15px Inter}
  .fb-standings td:not(.nm):not(:first-child)::before{content:attr(data-l) " ";color:var(--muted);font:600 11px Inter;letter-spacing:.02em}
  .fb-standings td:not(.nm):not(:first-child){font:700 13px Inter;font-variant-numeric:tabular-nums;text-align:left;padding-left:0;min-width:0}
  /* Les points sont le chiffre qui classe : ils remontent en tête de carte, à droite du nom, au lieu de finir en
     huitième position dans une grille de nombres tous pareils. */
  .fb-standings td:nth-child(10){position:absolute;right:12px;top:10px;text-align:right;font:800 13px Inter}
  .fb-standings td:nth-child(10) b{font:800 20px Inter;display:block;line-height:1.05;color:var(--fg)}
  .fb-standings td:nth-child(10)::before{display:block;text-align:right}
  .fb-standings td.fm{grid-column:1/-1;justify-content:flex-start;padding-top:2px}
  .fb-standings td.fm::before{margin-right:6px}
  .fb-tblwrap:has(.fb-standings){overflow-x:visible}
}
/* A 320 px, quatre colonnes de chiffres ne tiennent plus : « Diff +4 » demande 40 px et n'en recoit que 37. Trois
   colonnes, et la carte respire au lieu de deborder de dix pixels. */
@media (max-width:360px){
  .fb-standings tr{grid-template-columns:repeat(3,1fr);padding-right:56px}
  .fb-standings td:not(.nm):not(:first-child){font-size:12.5px}
}

/* ===========================================================================
   Vocabulaire d'écran — refonte des écrans restants
   Trois pièces, les mêmes partout : un en-tête qui RÉSUME, une carte principale qui porte l'information du jour, et
   des groupes secondaires qui se lisent après. Ce n'est pas une grille de cartes toutes égales : la hiérarchie est
   dans la taille, le fond et la place, pas dans l'ordre seul.
   =========================================================================== */
.fb-hd{display:flex;flex-direction:column;gap:10px;padding:4px 0 2px}
.fb-hd-eyebrow{display:inline-flex;align-items:center;gap:6px;font:800 11px Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.fb-hd-eyebrow svg{width:14px;height:14px}
.fb-hd h1{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(30px,9vw,44px);line-height:.98;color:var(--fg);text-wrap:balance}
.fb-hd p{color:var(--muted);font-size:13.5px;max-width:56ch}

/* Bandeau de chiffres clés : deux par ligne sur mobile, quatre dès qu'il y a la place. Le chiffre d'abord, le mot
   ensuite — l'inverse oblige à lire pour trouver la valeur. */
.fb-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:2px}
.fb-kpi{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);min-width:0}
.fb-kpi b{font:800 24px Inter;font-variant-numeric:tabular-nums;line-height:1.05;color:var(--fg)}
.fb-kpi b.display{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:30px}
.fb-kpi span{font:600 11px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere}
.fb-kpi.accent{border-color:var(--green);background:linear-gradient(160deg,rgba(182,240,0,.10),transparent 70%)}
.fb-kpi.accent b{color:var(--green)}
@media (min-width:560px){.fb-kpis{grid-template-columns:repeat(4,1fr)}.fb-kpis.two{grid-template-columns:repeat(2,1fr)}}

/* La carte principale : plus grande, un liseré vert à gauche, un fond qui la détache du reste. Une seule par écran. */
.fb-primary{position:relative;overflow:hidden;border:1px solid var(--line2);border-radius:18px;padding:18px 16px 16px;
  background:linear-gradient(165deg,var(--card2),var(--card) 60%)}
.fb-primary::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green)}
.fb-primary>h2{font:800 13px Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.fb-primary .fb-big{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(38px,13vw,60px);line-height:.95;color:var(--fg)}
.fb-primary .fb-big small{font-family:Inter;font-weight:700;font-size:15px;color:var(--muted);margin-left:8px}
.fb-primary p{color:var(--muted);font-size:13px;margin-top:8px}
.fb-primary .fb-cta-row{margin-top:14px}
.fb-primary.locked::before{background:var(--line2)}

/* Actions principales : visibles sans défiler, pleine largeur sur mobile, côte à côte dès qu'il y a la place. */
.fb-cta-row{display:flex;flex-direction:column;gap:8px}
.fb-cta-row .fb-btn{width:100%;min-height:48px}
@media (min-width:520px){.fb-cta-row{flex-direction:row}.fb-cta-row .fb-btn{width:auto;flex:1 1 0;min-width:0}}

/* Groupe secondaire : un titre compact, un compteur, et le contenu. Repliable quand il est long. */
.fb-grp{border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden}
.fb-grp+.fb-grp{margin-top:12px}
.fb-grp-h{width:100%;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;background:transparent;
  font:800 14px Inter;color:var(--fg);text-align:left}
.fb-grp-h .fb-grp-n{margin-left:auto;font:700 12px Inter;color:var(--muted);font-variant-numeric:tabular-nums}
.fb-grp-h .fb-chev{font-style:normal;color:var(--muted);transition:transform var(--dur-2) var(--ease-out)}
.fb-grp-h[aria-expanded="true"] .fb-chev{transform:rotate(180deg)}
/* Un groupe rogne ce qui depasse (c'est ce qui lui donne ses coins arrondis). Un contenu plus large que l'ecran —
   la grille des paliers du Season Pass a 320 px — doit donc pouvoir DEFILER dans le groupe, pas y etre coupe. */
.fb-grp-b{padding:0 14px 14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.fb-grp .fb-acc .fb-grp-b{padding-top:2px}
.fb-grp-h:hover,.fb-grp-h:focus-visible{color:var(--green)}
.fb-sliders{display:flex;flex-direction:column;gap:14px}

/* ==================================================================================================================
   DIRECTION ARTISTIQUE v2 — « Nuit de stade »
   Refonte visuelle complete, pensee a 320 px d'abord. Trois idees portent tout l'ecran :
     1. un BANDEAU DE SCENE plein bord ouvre chaque page (projecteurs, tribune, lignes de terrain) — dessine en
        degrades et en SVG, donc zero image a telecharger et net a tous les rapports de pixels ;
     2. un TITRE D'AFFICHE bicolore, gros et serre, dit ou l'on est sans qu'on ait a lire le sous-titre ;
     3. de GRANDES CARTES a coins larges, chacune ouverte par une pastille d'icone coloree, remplacent les rangees
        plates : la hierarchie se voit avant d'etre lue.
   Rien ici ne porte d'information a lui seul : la couleur, le mouvement et la scene doublent toujours un texte.
   ================================================================================================================== */

/* ---------- 1. Scene : le bandeau qui ouvre l'ecran ---------- */
.fb-hd{position:relative;display:block;padding:0;margin:0 calc(var(--pad) * -1) 4px;overflow:hidden;
  border-bottom:1px solid var(--line);isolation:isolate;background:var(--bg2)}
/* Le bandeau ne remonte sous l'encoche que s'il ouvre vraiment l'ecran : sinon il passerait par-dessus la barre de retour. */
.fb-main>section>.fb-hd:first-child,.fb-main>.fb-hd:first-child{margin-top:-16px}
.fb-main>section>.fb-hero:first-child{margin-top:-16px}
.fb-hd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,rgba(200,240,74,.45),transparent)}
.fb-hd-art{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fb-hd-art::before,.fb-hd-art::after{content:"";position:absolute;inset:0}
/* Halo des projecteurs : deux cones larges, adoucis, jamais deux fois au meme endroit selon la scene. */
.fb-hd-art::before{background:
  radial-gradient(120% 78% at 14% -18%, rgba(120,170,255,.30), transparent 62%),
  radial-gradient(96% 66% at 88% -10%, rgba(200,240,74,.16), transparent 60%),
  radial-gradient(150% 100% at 50% 118%, rgba(5,10,20,.94), rgba(5,10,20,.28) 58%, transparent)}
/* Grain de tribune : un semis de points qui evite l'aplat de degrade. */
.fb-hd-art::after{background-image:
  radial-gradient(1.6px 1.6px at 12% 34%, rgba(255,255,255,.20), transparent),
  radial-gradient(1.4px 1.4px at 34% 18%, rgba(255,255,255,.14), transparent),
  radial-gradient(1.8px 1.8px at 58% 40%, rgba(255,255,255,.16), transparent),
  radial-gradient(1.3px 1.3px at 76% 22%, rgba(255,255,255,.12), transparent),
  radial-gradient(1.6px 1.6px at 90% 46%, rgba(255,255,255,.15), transparent),
  radial-gradient(1.4px 1.4px at 24% 58%, rgba(255,255,255,.10), transparent);
  opacity:.9;mask-image:linear-gradient(180deg,#000 0 58%,transparent)}
/* La scene s'etire pour remplir le bandeau : en 400x120 etiree, les lignes de fuite restent lisibles a toutes les
   largeurs, alors qu'une hauteur automatique donnait un cadre flottant au milieu du bandeau sur grand ecran. */
.fb-hd-art svg{position:absolute;inset:0;width:100%;height:100%;opacity:.38}
.fb-hd-art svg path,.fb-hd-art svg circle,.fb-hd-art svg ellipse{fill:none;stroke:rgba(140,180,255,.55);stroke-width:1}

/* Variantes de scene : chaque famille d'ecran a la sienne, l'utilisateur reconnait l'endroit de loin. */
.fb-hd[data-art="terrain"] .fb-hd-art::before{background:
  radial-gradient(130% 84% at 50% -24%, rgba(90,150,255,.26), transparent 64%),
  radial-gradient(120% 90% at 50% 116%, rgba(5,10,20,.95), rgba(5,10,20,.30) 56%, transparent)}
.fb-hd[data-art="tribune"] .fb-hd-art::before{background:
  radial-gradient(110% 80% at 22% -14%, rgba(200,240,74,.20), transparent 58%),
  radial-gradient(110% 76% at 84% -12%, rgba(120,170,255,.26), transparent 60%),
  radial-gradient(150% 100% at 50% 118%, rgba(5,10,20,.94), rgba(5,10,20,.26) 58%, transparent)}
.fb-hd[data-art="labo"] .fb-hd-art::before{background:
  linear-gradient(180deg, rgba(76,141,255,.16), transparent 62%),
  radial-gradient(90% 70% at 78% 8%, rgba(169,112,255,.20), transparent 62%),
  radial-gradient(140% 100% at 50% 120%, rgba(5,10,20,.94), transparent 62%)}
.fb-hd[data-art="labo"] .fb-hd-art::after{background-image:
  linear-gradient(rgba(120,170,255,.10) 1px, transparent 1px),
  linear-gradient(90deg, rgba(120,170,255,.10) 1px, transparent 1px);
  background-size:34px 34px;opacity:.7;mask-image:linear-gradient(180deg,#000,transparent 78%)}
.fb-hd[data-art="vestiaire"] .fb-hd-art::before{background:
  repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 46px),
  radial-gradient(100% 72% at 50% -12%, rgba(169,112,255,.20), transparent 62%),
  radial-gradient(140% 100% at 50% 118%, rgba(5,10,20,.95), rgba(5,10,20,.30) 56%, transparent)}
.fb-hd[data-art="neon"] .fb-hd-art::before{background:
  radial-gradient(90% 70% at 16% -6%, rgba(169,112,255,.30), transparent 60%),
  radial-gradient(90% 70% at 86% 4%, rgba(200,240,74,.20), transparent 58%),
  radial-gradient(150% 100% at 50% 118%, rgba(5,10,20,.95), rgba(5,10,20,.26) 56%, transparent)}

.fb-hd-in{position:relative;z-index:1;display:block;padding:26px var(--pad) 20px;min-height:148px}
.fb-hd-eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:11px;font:800 10.5px Inter;
  letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
.fb-hd-eyebrow svg{width:13px;height:13px}
/* Titre d'affiche : grotesque tres gras, casse normale, chasse serree. Le dernier mot passe en accent — c'est la
   signature des references. Anton reste reserve aux chiffres et aux noms d'equipe. */
.fb-hd h1,.fb-hd .fb-hd-t{padding-right:98px;font-family:Inter,-apple-system,"Segoe UI",sans-serif;font-weight:800;
  font-size:clamp(29px,8.6vw,42px);line-height:1.02;letter-spacing:-.032em;text-transform:none;color:var(--fg);
  text-wrap:balance;overflow-wrap:break-word;hyphens:auto}
.fb-hd h1 i{font-style:normal;color:var(--green)}
.fb-hd[data-art="labo"] h1 i,.fb-hd[data-art="terrain"] h1 i{color:var(--blue)}
.fb-hd[data-art="neon"] h1 i,.fb-hd[data-art="vestiaire"] h1 i{color:var(--violet)}
.fb-hd p{color:var(--muted);font-size:14px;line-height:1.45;max-width:52ch;margin-top:9px}
/* Micro-signature alignee a droite, en capitales tres espacees : presente sur toutes les references. */
.fb-hd-tag{position:absolute;right:var(--pad);top:26px;max-width:92px;text-align:right;font:700 8.5px Inter;
  letter-spacing:.19em;text-transform:uppercase;color:rgba(238,243,250,.40);line-height:1.85;white-space:pre-line}
.fb-hd-tag::after{content:"";display:block;width:26px;height:2px;margin:7px 0 0 auto;border-radius:2px;background:rgba(200,240,74,.55)}
@media (max-width:359px){.fb-hd-tag{display:none}.fb-hd h1,.fb-hd .fb-hd-t{padding-right:0}}

/* ---------- 2. Indicateurs : tuiles et anneaux ---------- */
.fb-kpis{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  padding:0 var(--pad) 16px;margin:0}
.fb-kpi{display:flex;flex-direction:column;gap:3px;padding:12px 13px;min-width:0;border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.09);background:linear-gradient(165deg,rgba(20,34,58,.92),rgba(13,23,40,.86));
  backdrop-filter:blur(6px)}
.fb-kpi b{font:800 23px/1.05 Inter;font-variant-numeric:tabular-nums;color:var(--fg);letter-spacing:-.02em}
.fb-kpi b.display{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:29px;letter-spacing:0}
.fb-kpi span{font:700 9.5px Inter;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere}
.fb-kpi.accent{border-color:rgba(200,240,74,.42);background:linear-gradient(165deg,rgba(200,240,74,.14),rgba(13,23,40,.9))}
.fb-kpi.accent b{color:var(--green)}
@media (min-width:560px){.fb-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.fb-kpis.two{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Anneau : le chiffre au centre, la part dessinee autour. Le nombre reste lisible seul. */
.fb-ring{position:relative;width:62px;height:62px;flex:0 0 auto}
.fb-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.fb-ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.fb-ring .bg{stroke:rgba(255,255,255,.10)}
.fb-ring .fg{stroke:var(--green);stroke-dasharray:var(--dash,0) 999;transition:stroke-dasharray .7s var(--ease)}
.fb-ring.blue .fg{stroke:var(--blue)}
.fb-ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:800 19px Inter;font-variant-numeric:tabular-nums;color:var(--fg);letter-spacing:-.02em}

/* ---------- 3. Cartes : plus grandes, plus rondes, ouvertes par une pastille ---------- */
.fb-card,.fb-grp,.fb-primary,.fb-panel,.fb-onb,.fb-lbcard{border-radius:var(--r-lg)}
.fb-card{position:relative;border:1px solid rgba(255,255,255,.075);padding:18px 16px;gap:14px;
  background:linear-gradient(178deg,#101C31 0%,#0C1524 62%)}
.fb-card::before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;border-radius:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
.fb-card>*{position:relative}
/* En-tete de carte : pastille d'icone teintee + titre. C'est ce qui donne le rythme aux references. */
.fb-ch{display:flex;align-items:center;gap:11px;min-height:40px}
.fb-ch>i{width:36px;height:36px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border-radius:11px;background:rgba(76,141,255,.14);color:var(--blue);border:1px solid rgba(76,141,255,.22)}
.fb-ch>i svg{width:19px;height:19px}
.fb-ch.g>i{background:rgba(200,240,74,.13);color:var(--green);border-color:rgba(200,240,74,.24)}
.fb-ch.a>i{background:rgba(245,185,66,.13);color:var(--amber);border-color:rgba(245,185,66,.26)}
.fb-ch.v>i{background:rgba(169,112,255,.14);color:var(--violet);border-color:rgba(169,112,255,.26)}
.fb-ch b{font:800 16.5px/1.2 Inter;letter-spacing:-.015em;min-width:0}
.fb-ch small{display:block;font:500 12.5px Inter;color:var(--muted);letter-spacing:0;text-transform:none}
.fb-ch .fb-ch-r{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  font:700 12px Inter;color:var(--muted)}

.fb-primary{border:1px solid rgba(200,240,74,.24);padding:20px 17px 17px;
  background:linear-gradient(168deg,rgba(200,240,74,.09),rgba(13,23,40,.96) 46%)}
.fb-primary::before{width:4px;background:linear-gradient(180deg,var(--green),rgba(200,240,74,.15))}
.fb-primary>h2{font:800 10.5px Inter;letter-spacing:.18em;text-transform:uppercase;color:var(--green);margin-bottom:12px}
.fb-primary.locked{border-color:var(--line2);background:linear-gradient(168deg,rgba(42,61,96,.28),rgba(13,23,40,.96) 46%)}
.fb-primary.locked>h2{color:var(--muted)}

.fb-grp{border:1px solid rgba(255,255,255,.07);background:linear-gradient(178deg,#101C31,#0C1524 64%)}
.fb-grp-h{min-height:56px;padding:0 16px;font:800 14.5px Inter;letter-spacing:-.01em}
.fb-grp-b{padding:0 16px 16px}

/* ---------- 4. Rangees de match : de la ligne plate a la carte ---------- */
.fb-list{gap:9px}
.fb-row{min-height:76px;padding:13px 14px;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.07);
  border-left:1px solid rgba(255,255,255,.07);gap:12px;
  background:linear-gradient(178deg,#101C31,#0C1524 70%);transition:border-color .18s,transform .12s var(--ease)}
.fb-row::after{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;
  background:transparent;transition:background .18s}
.fb-row{position:relative;overflow:hidden}
.fb-row:hover{border-color:rgba(200,240,74,.34);transform:translateY(-1px)}
.fb-row:hover::after,.fb-row.club::after{background:var(--green)}
.fb-row.live::after{background:var(--red)}
.fb-row-teams b{font-size:15.5px;letter-spacing:.02em}
.fb-row-when{font-size:10.5px;letter-spacing:.12em}
.fb-row-when b{font:800 15px Inter;letter-spacing:-.01em;color:var(--fg)}

/* ---------- 5. Pastilles de filtre : rangee defilante, actif plein ---------- */
.fb-tabs{display:flex;gap:8px;border-bottom:0;padding:2px 0 4px}
.fb-tab{flex:0 0 auto;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);
  background:rgba(20,34,58,.55);color:var(--muted);font:700 14px Inter;letter-spacing:-.005em;
  border-bottom:1px solid var(--line2);margin-bottom:0;transition:background .18s,color .18s,border-color .18s}
.fb-tab.on{background:var(--green);border-color:var(--green);color:var(--green-ink);font-weight:800}
.fb-tab:hover:not(.on){border-color:var(--green);color:var(--fg)}
.fb-tabs.three,.fb-tabs.scroll{display:flex}
.fb-tabs.three .fb-tab{flex:1 1 0;padding:0 8px;font-size:13.5px;justify-content:center}
.fb-tabs .fb-tab-ind{display:none}

/* ---------- 6. Boutons : plus hauts, plus ronds, l'action principale rayonne ---------- */
.fb-cta{min-height:56px;border-radius:var(--r-md);font:800 16.5px Inter;letter-spacing:-.01em;
  background:linear-gradient(180deg,#D6F866,var(--green));box-shadow:0 8px 26px -12px rgba(200,240,74,.75)}
.fb-cta:hover{background:linear-gradient(180deg,#E0FF7A,#CFF659)}
.fb-btn{min-height:48px;border-radius:var(--r-sm);font:700 14.5px Inter;border-color:var(--line2);
  background:rgba(20,34,58,.7)}
.fb-btn.primary{background:linear-gradient(180deg,#D6F866,var(--green));border-color:var(--green);
  color:var(--green-ink);font-weight:800;box-shadow:0 6px 20px -12px rgba(200,240,74,.8)}
.fb-btn:active,.fb-cta:active{transform:scale(.985)}

/* ---------- 7. Navigation au pouce ---------- */
.fb-nav{padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(5,10,20,.93);
  border-top:1px solid rgba(255,255,255,.08);backdrop-filter:blur(16px) saturate(140%)}
.fb-nav a{position:relative;min-height:58px;gap:5px;font:700 10px Inter;letter-spacing:.04em;padding-top:5px}
.fb-nav a svg{width:23px;height:23px;transition:transform .2s var(--ease)}
.fb-nav a.on{color:var(--green)}
.fb-nav a.on svg{transform:translateY(-1px)}
.fb-nav a.on::before{content:"";position:absolute;top:0;left:50%;width:26px;height:3px;border-radius:0 0 3px 3px;
  background:var(--green);transform:translateX(-50%)}
@media (max-width:430px){.fb-nav a{font-size:9px;letter-spacing:0}.fb-nav a svg{width:21px;height:21px}}

/* ---------- 8. Reserves et provenance : deux blocs presents sur toutes les references ---------- */
.fb-notice{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border-radius:var(--r-md);
  border:1px solid rgba(245,185,66,.36);background:rgba(245,185,66,.07)}
.fb-notice>i{flex:0 0 auto;color:var(--amber);display:inline-flex}
.fb-notice>i svg{width:19px;height:19px}
.fb-notice div{min-width:0;display:flex;flex-direction:column;gap:3px}
.fb-notice b{font:800 13.5px Inter;color:var(--amber)}
.fb-notice small{font:500 12.5px/1.45 Inter;color:var(--muted)}
.fb-source{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:11px 0 2px;
  border-top:1px solid var(--line);font:600 11.5px Inter;color:var(--muted)}
.fb-source>i{color:var(--green);display:inline-flex}.fb-source>i svg{width:16px;height:16px}
.fb-source em{font-style:normal;color:var(--fg);font-weight:700}
.fb-source .sep{margin-left:auto}

/* ---------- 9. Mouvement : court, discret, jamais porteur d'information ---------- */
@keyframes fbHeroIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes fbArtIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.fb-hd{animation:fbHeroIn .34s var(--ease) both}
.fb-hd-art{animation:fbArtIn .6s var(--ease) both}
.fb-tab{will-change:auto}
@media (prefers-reduced-motion:reduce){
  .fb-hd,.fb-hd-art{animation:none}
  .fb-ring .fg{transition:none}
  .fb-row:hover{transform:none}
}

/* ---------- 10. Mobile d'abord : 390, 375, 320 ---------- */
@media (max-width:430px){
  .fb-main{padding-left:16px;padding-right:16px;--pad:16px}
  .fb-hd-in{padding:20px 16px 14px}
  .fb-kpis{padding:0 16px 14px}
  .fb-card{padding:16px 14px}
  .fb-grp-h{padding:0 14px}.fb-grp-b{padding:0 14px 14px}
}
@media (max-width:375px){
  .fb-hd h1,.fb-hd .fb-hd-t{font-size:27px;letter-spacing:-.028em}
  .fb-kpi b{font-size:21px}
  .fb-ch b{font-size:15.5px}
}
@media (max-width:340px){
  .fb-main{padding-left:13px;padding-right:13px;--pad:13px}
  .fb-hd-in{padding:18px 13px 12px}
  .fb-kpis{padding:0 13px 12px;gap:7px}
  .fb-kpi{padding:10px 11px}.fb-kpi b{font-size:19px}.fb-kpi span{font-size:9px;letter-spacing:.1em}
  .fb-card{padding:14px 12px;border-radius:18px}
  .fb-row{padding:11px 12px;min-height:70px}
  .fb-tab{padding:0 13px;font-size:13px}
  .fb-cta{font-size:15.5px;min-height:52px}
}

/* ---------- 11. Fiches d'equipe et de joueur : l'ecusson entre dans la scene ---------- */
.fb-hd-id{grid-column:1;display:flex;align-items:center;gap:14px;min-width:0}
.fb-hd-id>div{min-width:0;display:flex;flex-direction:column;gap:2px}
.fb-hd-id .fb-crest{filter:drop-shadow(0 10px 22px rgba(0,0,0,.55))}
.fb-hd-dossier .fb-hd-t{font-size:clamp(24px,7.2vw,36px)}
.fb-hd-dossier p{margin-top:0;font-size:13px}
@media (max-width:340px){.fb-hd-id{gap:10px}.fb-hd-id .fb-crest.lg{width:56px;height:64px}.fb-hd-id .fb-crest.lg b{font-size:23px}}

/* Le badge PRO reprend la place d'un sur-titre : lisible, jamais decoratif seul. */
.fb-hd-eyebrow .fb-pro{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;
  background:var(--green);color:var(--green-ink);font:800 10px Inter;letter-spacing:.2em}

/* ---------- 12. Fiche de match : le duel devient une affiche ---------- */
.fb-hero{margin:0 calc(var(--pad) * -1) 4px;padding:22px var(--pad) 20px;gap:18px;border-radius:0;
  border-bottom:1px solid var(--line);background:var(--bg2);isolation:isolate}
.fb-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(120% 76% at 16% -16%, rgba(120,170,255,.28), transparent 62%),
  radial-gradient(100% 66% at 86% -10%, rgba(200,240,74,.15), transparent 60%),
  radial-gradient(150% 100% at 50% 116%, rgba(5,10,20,.92), rgba(5,10,20,.24) 58%, transparent)}
.fb-hero .fb-lines{opacity:.22}
.fb-duel .side b{font-size:clamp(24px,7.4vw,38px);letter-spacing:.01em}
.fb-duel>em{font:800 15px Inter;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;
  padding:7px 11px;border:1px solid var(--line2);border-radius:999px;background:rgba(20,34,58,.6)}
.fb-band{border-radius:999px;border:1px solid var(--line2);border-left:1px solid var(--line2);
  background:rgba(20,34,58,.62);padding:9px 14px;letter-spacing:.14em;font-size:10px}
.fb-band.live{border-color:rgba(255,93,93,.45)}
.fb-info{border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);background:rgba(13,23,40,.7);overflow:hidden}
.fb-info li{padding:12px 8px}
.fb-info li+li{border-left:1px solid rgba(255,255,255,.07)}
.fb-read{border-radius:var(--r-md);border-color:rgba(76,141,255,.3);
  background:linear-gradient(168deg,rgba(76,141,255,.12),rgba(13,23,40,.94) 52%)}
.fb-read-h{letter-spacing:.18em;font-size:10px}

/* ---------- 13. Bloc de valeur (visiteur) : une affiche, plus un encadre ---------- */
.fb-value{border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.08);padding:22px 18px;
  background:linear-gradient(168deg,#12203A,#0B1322 66%)}
.fb-value h2{font-family:Inter,-apple-system,sans-serif;font-weight:800;text-transform:none;
  font-size:clamp(24px,7vw,32px);line-height:1.06;letter-spacing:-.03em}
.fb-value li .display{color:var(--green)}

/* ---------- 14. Etats vides et verrous : memes coins, meme grain ---------- */
.fb-empty{border-radius:var(--r-lg);border-color:rgba(255,255,255,.10);padding:30px 20px;
  background:linear-gradient(178deg,#101C31,#0C1524 70%)}
.fb-empty-ic{width:56px;height:56px;border-color:rgba(200,240,74,.28);background:rgba(200,240,74,.10)}
.fb-empty b{font:800 17.5px/1.25 Inter;letter-spacing:-.015em}
.fb-lock{border-radius:var(--r-lg);border:1px dashed rgba(200,240,74,.28);background:rgba(200,240,74,.05);padding:18px 16px}
.fb-404{padding:32px 0}

/* ---------- 15. Rangees de classement : la place se voit avant de se lire ---------- */
.fb-std-rank,.fb-lb-rank{font-variant-numeric:tabular-nums}

/* ---------- 16. La rangee de match devient une affiche a trois etages ----------
   Les references posent toutes le meme ordre : d'abord OU et QUAND, ensuite QUI, enfin l'etat et l'acces. La rangee
   plate melangeait les trois sur une seule ligne ; a 320 px, le nom d'equipe finissait tronque. Ici la grille impose
   l'ordre, les noms disposent de toute la largeur, et le statut ne leur vole plus de place. */
.fb-row.duo{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"meta side" "teams teams";
  align-items:center;gap:11px 12px;min-height:auto;padding:14px 15px}
.fb-row-when{grid-area:meta;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 9px;min-width:0;max-width:none}
.fb-row-when b{font:800 15.5px Inter;letter-spacing:-.01em;color:var(--fg)}
.fb-row-when b.d{font-size:13.5px}
.fb-row-when small{font-size:10px;letter-spacing:.12em}
/* La competition passe en tete de la ligne de contexte : c'est le premier reperage dans toutes les references. */
.fb-row-when small.comp{order:-1;color:var(--green);font-weight:700}
.fb-row-when .fb-tag{order:-2}
.fb-row-teams{grid-area:teams;gap:9px}
.fb-row-teams .t{gap:10px;padding:1px 0}
.fb-row-side{grid-area:side;justify-self:end;align-self:center}
.fb-row-side i{color:var(--muted)}
/* Rangees simples : une ligne, une icone, un chevron — la nouvelle carte leur sert de fond, pas de grille. */
.fb-row-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center}
.fb-row-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fb-row-t b{font:700 15px Inter;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-row-t small{font:500 12.5px Inter;color:var(--muted)}
.fb-row:not(.duo){display:flex;align-items:center;gap:12px;min-height:64px;padding:13px 15px}
.fb-row:not(.duo)>i{flex:0 0 auto;color:var(--muted);font-style:normal;font-size:20px}
@media (max-width:340px){
  .fb-row{padding:12px 12px;gap:9px 8px}
  .fb-row-when b{font-size:14px}
  .fb-row-teams b{font-size:13.5px}
}

/* ---------- 17. Chaque titre de carte devient une entree de section ----------
   Les references n'ouvrent jamais une carte par un titre nu : il y a toujours un reperage colore a gauche. Ici un
   liseré porte la couleur du domaine — bleu pour le modele, vert pour la communaute, ambre pour les reserves — et
   double le mot, il ne le remplace pas. */
.fb-card>h2{position:relative;display:flex;align-items:center;gap:10px;padding-left:14px;
  font:800 16.5px/1.25 Inter;letter-spacing:-.015em;flex-wrap:wrap}
.fb-card>h2::before{content:"";position:absolute;left:0;top:50%;width:4px;height:19px;margin-top:-9.5px;
  border-radius:4px;background:var(--blue)}
.fb-card>h2 small{font:500 12.5px Inter;color:var(--muted);margin-left:0;flex-basis:100%}
.fb-card>h2 svg{width:19px;height:19px;color:var(--blue);flex:0 0 auto}
.fb-card.fans>h2::before,.fb-card.fans>h2 svg{background:var(--green);color:var(--green)}
.fb-card.fans>h2 svg{background:none}
.fb-card.model>h2::before,.fb-card.why>h2::before{background:var(--blue)}
.fb-card.model,.fb-card.why{border-color:rgba(76,141,255,.26);
  background:linear-gradient(172deg,rgba(76,141,255,.10),#0C1524 54%)}
.fb-card.fans{border-color:rgba(200,240,74,.24);
  background:linear-gradient(172deg,rgba(200,240,74,.09),#0C1524 54%)}
.fb-grp-h::before{content:"";width:4px;height:18px;border-radius:4px;background:var(--line2);flex:0 0 auto}
.fb-grp-h[aria-expanded="true"]::before,.fb-grp-h:hover::before{background:var(--green)}

/* ---------- 18. Onglets glissants et boutons pastille ---------- */
.cx-chip,.fb-chipb{min-height:44px;border-radius:999px;padding:0 15px;border:1px solid var(--line2);
  background:rgba(20,34,58,.6);color:var(--muted);font:700 13.5px Inter;display:inline-flex;align-items:center}
.cx-chip.on,.fb-chipb.on{background:var(--green);border-color:var(--green);color:var(--green-ink);font-weight:800}
.fb-kpi.ring{flex-direction:row;align-items:center;gap:11px}
.fb-kpi.ring span{flex:1;min-width:0}
@media (max-width:340px){.fb-kpi.ring{gap:8px}.fb-ring{width:54px;height:54px}.fb-ring b{font-size:16px}}
.fb-tabs.scroll{mask-image:linear-gradient(90deg,#000 0 calc(100% - 26px),transparent)}

/* ---------- 19. Bureau : le bandeau respire, le titre grandit ---------- */
@media (min-width:900px){
  .fb-hd-in{padding:34px var(--pad) 26px;min-height:196px}
  .fb-hd h1,.fb-hd .fb-hd-t{font-size:46px;padding-right:150px}
  .fb-hd p{font-size:15px;margin-top:11px}
  .fb-hd-tag{top:34px;max-width:130px;font-size:9.5px}
  .fb-kpis{padding:0 var(--pad) 22px}
  .fb-hd-dossier .fb-hd-t{font-size:40px}
}
@media (min-width:1140px){.fb-hd h1,.fb-hd .fb-hd-t{font-size:52px}}

/* ---------- 20. La coque : barre haute et bandeau de chiffres ----------
   La barre haute se voit sur les dix-huit ecrans : la laisser telle quelle aurait suffi a faire dire que la refonte
   s'arrete au contenu. Elle devient donc collante, floutee, et le monogramme passe en plein — comme la marque des
   references. Le bandeau Football IQ / Fan Power devient deux jetons, plus une rangee coupee en deux. */
.fb-head{position:sticky;top:0;z-index:6;max-width:none;border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(5,10,20,.86);backdrop-filter:blur(16px) saturate(140%)}
.fb-head>*{max-width:1100px}
.fb-head{display:flex;justify-content:center;gap:0;padding:0}
.fb-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,240,74,.28),transparent)}
.fb-head-row{width:100%;max-width:1100px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:calc(10px + env(safe-area-inset-top)) var(--pad) 10px}
.fb-logo{width:42px;height:34px;border:0;border-radius:11px;transform:none;color:var(--green-ink);
  background:linear-gradient(160deg,#D9F972,var(--green));box-shadow:0 6px 18px -8px rgba(200,240,74,.9);font-size:19px}
.fb-mark-t b{font:800 16px Inter;letter-spacing:-.02em}
.fb-mark-t em{font:700 11px Inter;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.fb-who{border-radius:999px;border-color:var(--line2);background:rgba(20,34,58,.75);font-weight:800}
.fb-who.signin{background:var(--green);color:var(--green-ink);border-color:var(--green)}
.fb-topnav a{border-radius:999px;font-weight:700}
.fb-topnav a.on{background:var(--green);color:var(--green-ink);font-weight:800}
/* Signature de marque, bureau seulement : trois mots en capitales, comme sur chaque reference. */
.fb-head-sig{display:none;text-align:right;font:700 8.5px Inter;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(238,243,250,.38);line-height:1.8;white-space:pre-line;border-left:1px solid var(--line);padding-left:14px}
@media (min-width:900px){.fb-head-sig{display:block}}

.fb-strip{padding:10px var(--pad) 0}
.fb-strip-in{border-bottom:0;gap:9px}
.fb-strip-in>a{min-height:56px;padding:11px 14px;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(165deg,rgba(20,34,58,.88),rgba(13,23,40,.82));justify-content:space-between}
.fb-strip-in>a+a{border-left:1px solid rgba(255,255,255,.08);padding-left:14px}
.fb-strip-in b{font:800 20px Inter;letter-spacing:-.02em}
.fb-strip-in .k{font:700 10px Inter;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
@media (max-width:340px){.fb-strip-in>a{padding:9px 11px;min-height:50px}.fb-strip-in b{font-size:17px}.fb-strip-in .k{font-size:9px;letter-spacing:.08em}}

/* ---------- 21. La scene photographique ----------
   Une seule photographie, generee pour ce produit (nuit de stade, projecteurs, tribune floue) : ni logo de club, ni
   texte incruste, ni visage reconnaissable, ni source exterieure. 40 ko en WebP, servie depuis le depot.
   Trois cadrages en tirent trois scenes — projecteurs pour « stade », tribune pour « tribune », pelouse pour
   « terrain » — ce qui evite trois telechargements. Les degrades restent DESSOUS comme dessus : la page tient meme
   si l'image n'arrive jamais, et le voile garantit le contraste du titre quoi qu'il y ait derriere. */
.fb-hd-art{background-repeat:no-repeat;background-size:cover}
.fb-hd[data-art="stade"] .fb-hd-art{background-image:url(/art/stade.webp);background-position:50% 26%}
.fb-hd[data-art="tribune"] .fb-hd-art{background-image:url(/art/stade.webp);background-position:50% 44%;background-size:170% auto}
.fb-hd[data-art="terrain"] .fb-hd-art{background-image:url(/art/stade.webp);background-position:50% 92%;background-size:130% auto}
/* Voile : le titre est blanc, la photo a des projecteurs. Sans ce voile a gauche, le mot se perdrait dans la lumiere. */
.fb-hd[data-art="stade"] .fb-hd-art::before,
.fb-hd[data-art="tribune"] .fb-hd-art::before,
.fb-hd[data-art="terrain"] .fb-hd-art::before{background:
  radial-gradient(130% 105% at 6% 34%, rgba(5,10,20,.88), rgba(5,10,20,.30) 62%, transparent 78%),
  linear-gradient(180deg, rgba(5,10,20,.50), rgba(5,10,20,.16) 38%, rgba(5,10,20,.93)),
  radial-gradient(90% 60% at 88% 6%, rgba(200,240,74,.10), transparent 62%)}
/* La photo remplace le semis de points et les lignes dessinees : deux couches de decor valent moins qu'une vraie. */
.fb-hd[data-art="stade"] .fb-hd-art::after,
.fb-hd[data-art="tribune"] .fb-hd-art::after{display:none}
.fb-hd[data-art="stade"] .fb-hd-art svg,
.fb-hd[data-art="tribune"] .fb-hd-art svg{display:none}
.fb-hd[data-art="terrain"] .fb-hd-art::after{opacity:.35}
.fb-hd[data-art="terrain"] .fb-hd-art svg{opacity:.30}

/* La fiche de match ouvre sur la meme scene : c'est le meme moment, vu de plus pres. */
.fb-hero{background-image:url(/art/stade.webp);background-position:50% 22%;background-size:cover;background-repeat:no-repeat}
.fb-hero::before{background:
  radial-gradient(130% 100% at 10% 30%, rgba(5,10,20,.86), rgba(5,10,20,.34) 62%, transparent 80%),
  linear-gradient(180deg, rgba(5,10,20,.52), rgba(5,10,20,.20) 30%, rgba(5,10,20,.95))}
.fb-hero .fb-lines{opacity:.14}

/* ---------- 22. L'onglet actif GLISSE ----------
   Les onglets sont des liens : l'ecran se reconstruit a chaque changement. La pastille pleine est donc un element a
   part, place par mountTabs, qui repart de la derniere position connue et glisse vers la nouvelle. Sans lui monte
   (premiere visite, mouvement reduit, script indisponible), l'onglet actif garde son fond plein : rien ne depend de
   l'animation pour savoir ou l'on est. */
.fb-tabs{position:relative}
.fb-tabs .fb-tab-ind{display:none}
.fb-tabs.has-ind .fb-tab-ind{display:block;position:absolute;left:0;top:0;bottom:0;height:auto;z-index:0;
  width:var(--ind-w,0);border-radius:999px;background:linear-gradient(180deg,#D6F866,var(--green));
  box-shadow:0 6px 18px -10px rgba(200,240,74,.9);transform:translateX(var(--ind-x,0));
  transition:transform .34s var(--ease),width .34s var(--ease)}
.fb-tab{position:relative;z-index:1}
.fb-tabs.has-ind .fb-tab.on{background:transparent;border-color:transparent;color:var(--green-ink)}
@media (prefers-reduced-motion:reduce){.fb-tabs.has-ind .fb-tab-ind{transition:none}}

/* ---------- 23. Retour tactile ----------
   Un bouton doit repondre au doigt avant que la page reponde au reseau. Enfoncement court, jamais de rebond. */
.fb-btn,.fb-cta,.fb-tab,.cx-chip,.fb-chipb,.fb-row,.cx-item{transition:transform .12s var(--ease),background-color .18s,border-color .18s,color .18s,box-shadow .18s}
.fb-btn:active,.fb-cta:active,.fb-tab:active,.cx-chip:active,.fb-chipb:active{transform:scale(.98)}
.fb-row:active{transform:scale(.995)}
@media (prefers-reduced-motion:reduce){
  .fb-btn,.fb-cta,.fb-tab,.cx-chip,.fb-chipb,.fb-row,.cx-item{transition:none}
  .fb-btn:active,.fb-cta:active,.fb-tab:active,.cx-chip:active,.fb-chipb:active,.fb-row:active{transform:none}
}

/* ---------- 24. Zones tactiles et textes coupes releves par la sonde ----------
   Quatre defauts sortis de la verification automatique des vingt ecrans, aux trois largeurs. Aucun n'etait visible a
   l'oeil : le lien de marque et le bouton de recherche descendaient sous 44 px, et deux titres se faisaient rogner. */
.fb-mark{min-height:44px;align-items:center}
.fb-iconbtn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.fb-topnav a{min-height:44px}
/* Un titre de rangee qui ne tient pas se met sur deux lignes : le rogner effacait le nom de l'equipe adverse. */
@media (max-width:430px){
  .fb-row-t b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.28}
}
.fb-lbrow small,.fb-lb small{overflow-wrap:anywhere}

/* ---------- 25. Plus un pixel de defilement horizontal ----------
   La sonde a trouve 21 px de debordement a 320 px sur TOUS les ecrans, mais seulement une fois connecte : le bandeau
   Football IQ / Fan Power. Ses deux colonnes etaient en `1fr` — dont le minimum vaut le contenu — avec un texte en
   `nowrap` : elles ne pouvaient pas se serrer. Trois corrections, et la marge devient commune a la coque et au
   contenu (elle ne l'etait pas : la coque restait a 20 px pendant que le contenu descendait a 13). */
@media (max-width:430px){:root{--pad:16px}}
@media (max-width:340px){:root{--pad:13px}}
.fb-strip-in{grid-template-columns:repeat(2,minmax(0,1fr))}
.fb-strip-in>a{min-width:0;gap:10px}
.fb-strip-in .k{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-strip-in b{flex:0 0 auto}
/* La barre du bas : `.four` imposait quatre colonnes fixes a une barre qui en compte cinq quand le Vestiaire est
   actif — la cinquieme partait hors ecran. La regle de base sait deja compter, celle-ci ne garde que la taille. */
.fb-nav.four{grid-template-columns:none}
/* Libelles de colonne du classement : a 320 px, l'interlettrage suffisait a faire deborder « exactitude ». */
@media (max-width:340px){
  .fb-lbiq small,.fb-lbcol small{letter-spacing:0;font-size:9px}
  .fb-lbname small{overflow-wrap:anywhere}
}

/* ---------- 26. Trois textes coupes que la sonde ne voyait pas ----------
   Ils etaient rognes A L'INTERIEUR d'un conteneur en overflow:hidden — donc la page ne debordait pas, et la sonde
   les laissait passer. Elle a ete corrigee ; voici ce qu'elle a trouve. */
/* « FOOTBALL IQ » devenait « FOOTBALL I » : le jeton ne pouvait pas se serrer autrement qu'en rognant. */
.fb-strip-in .k{letter-spacing:.06em;font-size:9.5px}
.fb-strip-in .k svg{width:17px;height:17px}
.fb-strip-in b{font-size:19px}
@media (max-width:360px){.fb-strip-in .k{font-size:9px;letter-spacing:.03em}.fb-strip-in .k svg{width:15px;height:15px}.fb-strip-in>a{padding:10px 11px;gap:7px}}
/* La signature de droite passait par-dessus le sous-titre quand le titre tenait sur une seule ligne. */
.fb-hd p{padding-right:98px}
@media (max-width:359px){.fb-hd p{padding-right:0}}
@media (min-width:900px){.fb-hd p{padding-right:150px}}
/* « exactitude » : l'interlettrage du libelle de colonne suffisait a le faire rogner a 320 px. */
@media (max-width:400px){
  .fb-lbiq small,.fb-lbcol small,.fb-lbrow small{letter-spacing:0;font-size:9px;white-space:normal;overflow-wrap:anywhere}
}

/* Dernier texte rogne : « exactitude » dans le bloc « ta position ». Mes selecteurs visaient les rangees du
   classement (.fb-lbrow, .fb-lbiq) ; celui-la vit dans .fb-pos-grid, que je n'avais pas couvert. Un mot de 63 px
   dans une cellule de 60 px n'a aucune occasion de couper : il lui faut overflow-wrap. */
@media (max-width:400px){
  .fb-pos-grid small,.fb-pos small{letter-spacing:0;font-size:9px;overflow-wrap:anywhere;white-space:normal}
}

/* ==================================================================================================================
   FICHE D'ANALYSE — l'essentiel d'abord, le detail replie. La fiche faisait 5 392 px de haut a 390 px, tout a plat.
   ================================================================================================================== */
.fb-summary{border-color:rgba(200,240,74,.28)}
/* 96 px laissait trois colonnes sur 375 px : « Moyenne » n'y tenait pas et se coupait en « Moyenn / e ».
   120 px donne deux colonnes sur mobile, trois des 430 px — et chaque valeur tient sur une ligne. */
.fb-sum-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.fb-sum-i{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 12px;border-radius:12px;background:var(--card2);border:1px solid var(--line)}
/* Le libelle d'une case de resume peut faire trois mots (« Absences et suspensions ») : il doit pouvoir
   passer a la ligne, sinon il deborde de sa case sur 320-375 px. */
.fb-sum-i small{font:700 9.5px/1.35 Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere}
.fb-sum-i b{font:800 19px/1.1 Inter;color:var(--fg);overflow-wrap:break-word;word-break:normal;hyphens:none}
/* « Moyenne » se coupait en « Moyenn / e » a 390 px : overflow-wrap:anywhere autorise la coupure AU MILIEU d'un mot.
   break-word ne coupe qu'en dernier recours, et un mot un peu long passe en 16 px plutot que d'etre mutile. */
@media (max-width:430px){.fb-sum-i b{font-size:16px}}
.fb-sum-i b.display{font-size:26px;font-variant-numeric:tabular-nums}
.fb-sum-i em{font-style:normal;font:600 11.5px Inter;color:var(--muted);overflow-wrap:anywhere}
.fb-sum-i b.c-moyenne{color:var(--green)}.fb-sum-i b.c-faible{color:var(--amber)}.fb-sum-i b.c-insuffisante{color:var(--muted)}
/* Tendances : une colonne par equipe sous 700 px, deux au-dela. Jamais de tableau qui deborde. */
.fb-trends{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:700px){.fb-trends{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fb-trend-team{min-width:0;display:flex;flex-direction:column;gap:8px}
.fb-trend-team h3{margin:0;font:800 14px Inter;color:var(--fg);overflow-wrap:anywhere}
.fb-trend-side{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(5,10,20,.45);display:flex;flex-direction:column;gap:7px;min-width:0}
.fb-trend-side.weak{opacity:.72;border-style:dashed}
.fb-trend-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fb-trend-h b{font:700 12px Inter;color:var(--fg)}
.fb-pill.sm{font:700 9.5px Inter;letter-spacing:.06em;padding:3px 8px;border-radius:999px;border:1px solid var(--line2);color:var(--muted);white-space:nowrap}
.fb-trend-form{display:flex;gap:4px}
.fb-trend-n{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:6px}
.fb-trend-n span{display:flex;flex-direction:column;min-width:0}
.fb-trend-n small{font:700 9px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere}
.fb-trend-n b{font:700 13px Inter;color:var(--fg);font-variant-numeric:tabular-nums}
/* Joueurs decisifs */
.fb-kp{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fb-kp li{display:flex;align-items:center;gap:10px;min-height:32px;padding:0 10px;border-radius:10px;background:rgba(5,10,20,.45);border:1px solid var(--line)}
.fb-kp b{font:700 13px Inter;color:var(--fg);min-width:0;overflow-wrap:anywhere;flex:1}
.fb-kp span{display:flex;gap:5px;flex:0 0 auto}
.fb-kp i{font-style:normal;font:800 11px/20px Inter;min-width:22px;height:22px;text-align:center;border-radius:999px;font-variant-numeric:tabular-nums}
.fb-kp i.g{background:var(--green);color:var(--green-ink)}
.fb-kp i.a{background:var(--card2);color:var(--blue);border:1px solid var(--line2)}

/* ---------- fiche d'analyse : contexte, causes mesurées, surveillance, historique (chantier analyse-modele-v2) ----------
   Une seule règle guide ces blocs : un chiffre ne s'affiche jamais sans ce qui le justifie à côté. Les contributions
   sont lisibles en une ligne sur 320 px (trois colonnes qui ne se coupent pas), chaque ligne garde 44 px de haut. */
.fb-ctx .fb-kv { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 8px; }
.fb-ctx .fb-kv span { display: flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center; }
.fb-ctx .fb-kv small { color: var(--fb-dim); font-size: 12px; }
.fb-imp-h { display: flex; align-items: center; gap: 10px; }
.fb-imp-bar { flex: 1 1 auto; height: 8px; border-radius: 4px; background: var(--fb-line); overflow: hidden; }
.fb-imp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--fb-accent), #ff9d5c); }
.fb-imp-l li, .fb-watch-l li, .fb-hist-l li, .fb-why-l li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--fb-line); }
.fb-imp-l li:last-child, .fb-watch-l li:last-child, .fb-hist-l li:last-child, .fb-why-l li:last-child { border-bottom: 0; }
.fb-imp-l small, .fb-watch-l span, .fb-hist-c { color: var(--fb-dim); font-size: 12px; }
.fb-why-base { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.fb-why-t { display: flex; flex-direction: column; flex: 1 1 45%; min-width: 45%; }
.fb-why-t em { font-style: normal; font-weight: 600; }
.fb-why-t small { color: var(--fb-dim); font-size: 12px; }
.fb-why-c { display: flex; gap: 8px; font-variant-numeric: tabular-nums; }
.fb-why-c i { font-style: normal; font-size: 12px; padding: 2px 6px; border-radius: 6px; background: var(--fb-line); }
.fb-hist-p { font-variant-numeric: tabular-nums; }
.fb-hist-l small { color: var(--fb-dim); font-size: 11px; width: 100%; }
.fb-pill.lv-high, .fb-pill.lv-top { background: var(--fb-accent); color: #10100e; }
@media (min-width: 560px) { .fb-why-t { flex-basis: 38%; min-width: 38%; } }
/* Direct reserve au palier Max : le bloc verrouille ne montre aucun chiffre, il montre ce qui manque. */
.fb-livelock .fb-btn.sm { margin-top: 10px; min-height: 44px; padding: 0 16px; }
.fb-livelock #fbFollowMsg { display: block; margin-top: 8px; }

/* ---------- les trois offres (palier Max) ----------
   Une colonne sous 700 px, trois au-dela. Chaque carte porte son palier, son prix et son bouton ; le bouton
   d'abonnement n'est rendu que si le serveur declare le Checkout disponible, donc il n'y a rien a griser ici. */
.fb-tiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 700px) { .fb-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fb-tier { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border-radius: 14px;
           border: 1px solid var(--line); background: var(--card2); }
.fb-tier.on { border-color: var(--fb-accent); box-shadow: inset 0 0 0 1px var(--fb-accent); }
.fb-tier-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fb-tier-p { font: 800 22px/1.1 Inter; font-variant-numeric: tabular-nums; }
.fb-tier-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.fb-tier-l li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.35; }
/* Sans largeur ni hauteur explicites, une icone SVG en ligne s'etire pour remplir sa boite flex : la coche devenait
   un disque de 300 px et poussait le texte hors de la carte. Meme dimension que la liste « jamais » (.fb-never). */
.fb-tier-l li svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; color: var(--green); }
.fb-tier .fb-btn, .fb-tier a.fb-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.fb-tier.max .fb-pro { background: var(--fb-accent); color: #10100e; }
.fb-planline.max .fb-pro { background: var(--fb-accent); color: #10100e; }
@media (prefers-reduced-motion: reduce) { .fb-tier, .fb-tier .fb-btn { transition: none !important; } }

/* ---------- lecture détaillée et déroulé du match (chantier analyse-complete) ----------
   Trois blocs de comptages et une frise. Rien n'y est décoratif : chaque barre est un nombre de buts, chaque
   ligne de frise un événement publié par la source. Tout tient sur 320 px sans défilement horizontal, et les
   animations ne déplacent que `transform` et `opacity` — donc jamais de recalcul de disposition. */
.fb-periods, .fb-per-team + .fb-per-team, .fb-react-team + .fb-react-team, .fb-lvl-team + .fb-lvl-team { margin-top: 0; }
.fb-per-team + .fb-per-team, .fb-react-team + .fb-react-team, .fb-lvl-team + .fb-lvl-team { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--fb-line); }
.fb-per-team h3, .fb-react-team h3, .fb-lvl-team h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 14px Inter; margin: 0 0 10px; }
.fb-per { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; align-items: end; }
.fb-per-c { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.fb-per-c small { color: var(--fb-dim); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fb-per-b { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 64px; width: 100%; }
.fb-per-b i { display: block; width: 9px; min-height: 3px; border-radius: 3px 3px 0 0; transform-origin: bottom; animation: fbGrow var(--dur-3) var(--ease-out) both; }
.fb-per-b i.f { background: var(--fb-accent); }
.fb-per-b i.a { background: transparent; border: 1px solid var(--fb-line2, var(--fb-line)); border-bottom: 0; }
@keyframes fbGrow { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
.fb-react { font: 700 13px Inter; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.fb-lvl-team .fb-kv { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.fb-lvl-team .fb-kv span { display: flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center; }
.fb-lvl-team .fb-kv small, .fb-lvl-team .fb-kv em { color: var(--fb-dim); font-size: 12px; font-style: normal; }
.fb-lvl-team .fb-kv b { font: 700 14px Inter; font-variant-numeric: tabular-nums; }

/* Frise : la minute est en colonne fixe pour que les lignes s'alignent, le nom peut aller à la ligne. */
/* Trois colonnes, pas quatre : le nom d'equipe en colonne etroite se coupait en « Iron Wan / dere / rs ». Il passe
   sur la ligne de detail, ou il a toute la largeur. */
.fb-evs li.fb-ev { display: grid; grid-template-columns: 34px 22px 1fr; align-items: center; gap: 8px; min-height: 44px; padding: 7px 0; border-bottom: 1px solid var(--fb-line); }
.fb-evs li.fb-ev:last-child { border-bottom: 0; }
.fb-ev-m { font: 800 12px Inter; font-variant-numeric: tabular-nums; color: var(--fb-dim); }
.fb-ev-i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: var(--card2); font-size: 11px; line-height: 1; }
.fb-ev-i.goal, .fb-ev-i.penalty { background: var(--green); color: var(--green-ink); }
.fb-ev-i.own_goal, .fb-ev-i.missed_penalty { background: var(--card2); color: var(--fb-dim); }
.fb-ev-club { font-style: normal; font-weight: 700; color: var(--fg); }
.fb-ev .fb-row-t { min-width: 0; }
.fb-ev .fb-row-t b { overflow-wrap: anywhere; }
.fb-in { animation: fbRise var(--dur-2) var(--ease-out) both; }
.fb-evs li.fb-in:nth-child(n+9) { animation: none; }   /* au-delà de huit, l'attente se verrait */
@media (max-width: 360px) {
  .fb-evs li.fb-ev { grid-template-columns: 30px 20px 1fr; }
  .fb-per-b i { width: 7px; }
}
@media (prefers-reduced-motion: reduce) { .fb-in, .fb-per-b i { animation: none !important; } }

/* Avertissement doux : il doit se lire, sans crier. Le score exact est la partie la moins sûre de la fiche —
   mesuré hors entraînement, le score en tête est le bon environ une fois sur dix. */
.fb-warn-soft { border-left: 2px solid var(--amber); padding-left: 10px; margin: 2px 0 10px; }

/* ---------- lecture rapide ----------
   La tete de fiche : ce qu'un lecteur doit comprendre sans defiler. Une carte, une idee par ligne, et une
   pastille de NATURE sur chaque affirmation — fait verifie, calcul du modele, lecture derivee, indisponible.
   Quatre couleurs distinctes : le lecteur apprend le code une fois et le relit partout. */
.fb-lr-head{margin:0 0 12px;font:600 12px Inter;color:var(--muted);line-height:1.5}
.fb-lr .fb-lead b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}   /* jamais de nom d'equipe tronque */
.fb-lr .fb-lead{flex-wrap:wrap}
.fb-lr .fb-xg{margin:12px 0 2px;gap:10px;align-items:flex-start}
.fb-lr .fb-xg span{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.fb-lr-src{margin:10px 0 0;font-size:11px}
.fb-lr-more{display:inline-block;margin-top:10px;min-height:44px;line-height:44px;font:700 13px Inter}
.fb-tag.nat{color:var(--muted);border-color:var(--line2);background:rgba(143,160,188,.08);margin-right:6px}
.fb-tag.nat.n-fait_verifie{color:var(--green);border-color:rgba(200,240,74,.38);background:rgba(200,240,74,.08)}
.fb-tag.nat.n-calcul_modele{color:var(--blue);border-color:rgba(76,141,255,.38);background:rgba(76,141,255,.10)}
.fb-tag.nat.n-lecture_derivee{color:var(--amber);border-color:rgba(245,185,66,.38);background:rgba(245,185,66,.10)}
.fb-tag.nat.n-donnee_indisponible{color:var(--muted);border-color:var(--line2);background:transparent}
.fb-reasons,.fb-warns{list-style:none;padding-left:0}
.fb-reasons li,.fb-warns li{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.fb-reasons li span,.fb-warns li span{flex:1;min-width:0;overflow-wrap:anywhere}
.fb-warns{margin-top:12px;padding:10px 12px;border:1px solid var(--line2);border-left:3px solid var(--amber);border-radius:8px;background:rgba(245,185,66,.06)}
.fb-gloss{margin-top:12px}
.fb-gloss dl{margin:8px 0 0;display:flex;flex-direction:column;gap:10px}
.fb-gl dt{font:700 13px Inter;color:var(--fg)}
.fb-gl dd{margin:2px 0 0;font-size:13px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.fb-rank{display:inline-block;margin-left:6px;font:600 10px Inter;color:var(--muted);white-space:nowrap}
@media (max-width:360px){
  .fb-lr .fb-lead .k{font-size:38px;width:34px}
  .fb-lr .fb-lead strong{font-size:34px}
}

/* `hidden` doit l'emporter : `.fb-card` pose son propre display et battait la regle de l'agent utilisateur.
   Sans cela, la carte du modele et la carte « pourquoi », masquees au profit de la lecture rapide, restaient
   visibles — la fiche gagnait 600 px au lieu d'en perdre. */
[hidden]{display:none!important}

/* ---------- deux modes de lecture ---------- */
.fb-modes{display:flex;gap:8px;margin:0 0 6px}
.fb-mode{flex:1;min-height:44px;padding:0 14px;border:1px solid var(--line2);border-radius:10px;background:var(--card);
  color:var(--muted);font:700 13px Inter;cursor:pointer}
.fb-mode.on{border-color:var(--blue);color:var(--fg);background:var(--blue-dim)}
.fb-mode:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.fb-mode-note{margin:0 0 14px}

/* ===== PREDICTION:DEBUT ==================================================================================
   Fiche de prediction d'avant-match et bouton « Combiner ». Mobile d'abord (320 px), zones tactiles >= 44 px,
   aucun debordement horizontal : tout tableau ou liste large defile DANS son propre conteneur, jamais la page.
   Couleurs de NATURE, volontairement distinctes et non redondantes avec le vert d'action :
     fait verifie   = bleu electrique   (ce que la source publie)
     calcul modele  = violet            (ce que le moteur calcule)
     lecture derivee= ambre             (un comptage relu)
     indisponible   = gris              (ce qui manque, jamais un zero)
   ========================================================================================================= */
.pd-nat{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;font:700 10px Inter;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 8px;border-radius:20px;border:1px solid var(--line2);color:var(--muted);white-space:nowrap}
.pd-n-fait{color:var(--blue);border-color:#24406e;background:rgba(76,141,255,.10)}
.pd-n-calc{color:var(--violet);border-color:#3b2a63;background:rgba(169,112,255,.10)}
.pd-n-derive{color:var(--amber);border-color:#5a4520;background:rgba(245,185,66,.10)}
.pd-n-absent{color:var(--muted);border-color:var(--line);background:var(--card2)}
.pd-fr{flex:0 0 auto;font:700 10px Inter;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:20px;border:1px solid var(--line);color:var(--muted)}
.pd-fr-fresh{color:var(--green);border-color:#3c5417}.pd-fr-stale{color:var(--amber);border-color:#5a4520}.pd-fr-expired{color:var(--red);border-color:#5b2626}
.pd-conf{font:700 11px Inter;letter-spacing:.04em;padding:5px 10px;border-radius:20px;border:1px solid var(--line2);color:var(--muted)}
.pd-c-hi{color:var(--green);border-color:#3c5417}.pd-c-mid{color:var(--amber);border-color:#5a4520}.pd-c-lo{color:var(--muted)}

.pd-main{background:linear-gradient(180deg,#101c36,var(--card));border:1px solid var(--line2);border-radius:var(--r-md);padding:18px;display:flex;flex-direction:column;gap:14px}
.pd-main.undecided{background:linear-gradient(180deg,#1a1c2e,var(--card))}
.pd-main-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pd-kicker{font:700 11px Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pd-issue{font-size:clamp(21px,6vw,30px);color:var(--fg);overflow-wrap:anywhere}
.pd-big{display:flex;align-items:baseline;gap:2px;font-family:Anton,Impact,sans-serif;color:var(--green);line-height:1}
.pd-big b{font-size:clamp(38px,13vw,60px);font-weight:400}.pd-big span{font-size:20px}
.pd-note{font:500 14px/1.5 Inter;color:var(--muted)}
.pd-bars{display:flex;flex-direction:column;gap:8px}
.pd-bar{display:grid;grid-template-columns:24px minmax(0,1fr) 46px;align-items:center;gap:8px;min-height:32px}
.pd-bar .k{font-size:15px;color:var(--muted)}
.pd-bar .t{font:600 13px Inter;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-bar .b{grid-column:1/4;height:8px;border-radius:6px;background:var(--card2);overflow:hidden}
.pd-bar .b i{display:block;height:100%;background:var(--line2);border-radius:6px}
.pd-bar .b i.on{background:var(--green)}
.pd-bar em{grid-row:1;grid-column:3;justify-self:end;font:700 14px Inter;font-style:normal;color:var(--fg)}
.pd-xg{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line);font:600 13px Inter;color:var(--muted)}
.pd-xg b{font:700 15px Inter;color:var(--fg)}

/* Version servie, coupure des donnees, date de generation : trois reperes qui situent la prediction.
   Sur 320 px les trois passent a la ligne plutot que de se comprimer. */
.pd-mv{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0;padding:10px 14px;border-radius:10px;
  background:var(--card2);border:1px solid var(--line2)}
.pd-mv-i{display:flex;flex-direction:column;gap:2px;min-width:0}
.pd-mv-i small{font:600 11px Inter;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.pd-mv-i b{font:600 13px Inter;color:var(--fg);overflow-wrap:anywhere}
.pd-mv-s{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font:600 12px Inter}
.pd-mv-s svg{width:14px;height:14px;flex:0 0 14px}
.pd-mv-s.on{background:color-mix(in srgb,var(--ok,#3fb950) 14%,transparent);color:var(--ok,#3fb950)}
.pd-mv-s.off{background:color-mix(in srgb,var(--muted) 16%,transparent);color:var(--muted)}
.pd-mv-s small{opacity:.75;font-weight:500}
.pd-mv-w{margin:6px 0 0;font:500 12px Inter;color:var(--muted);line-height:1.45}

.pd-scores .pd-sc-row{display:flex;gap:10px;flex-wrap:wrap}
.pd-sc{display:inline-flex;align-items:baseline;gap:4px;padding:10px 14px;min-height:44px;border-radius:10px;border:1px solid var(--line2);background:var(--card2)}
.pd-sc b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:22px}
.pd-sc i{font-style:normal;color:var(--muted)}
.pd-sc em{font:700 12px Inter;font-style:normal;color:var(--green);margin-left:4px}
.pd-sc-min{font:700 12px Inter;color:var(--muted)}
.pd-warn{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:10px;border:1px solid #5a4520;background:rgba(245,185,66,.08)}
.pd-warn b{font:700 14px Inter;color:var(--amber)}
.pd-warn small{font:500 13px/1.5 Inter;color:var(--muted)}

.pd-actions{display:grid;grid-template-columns:1fr;gap:10px;margin:14px 0}
.pd-actions .fb-btn{min-height:48px}
.pd-blk{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-top:1px solid var(--line)}
.pd-blk:first-of-type{border-top:0;padding-top:0}
.pd-blk.off{opacity:.75}
.pd-blk-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pd-blk-h b{font:700 14px Inter;color:var(--fg)}
.pd-blk p{font:500 14px/1.6 Inter;color:var(--muted);overflow-wrap:anywhere}
.pd-src{font:500 12px Inter;color:var(--fb-dim)}
.pd-tilt,.pd-alts,.pd-frag,.pd-inv,.pd-mk-l{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.pd-tilt li,.pd-alts li{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;padding:8px 10px;border-radius:8px;background:var(--card2)}
.pd-tilt li span,.pd-alts li b{font:600 13px/1.4 Inter;min-width:0;overflow-wrap:anywhere}
.pd-tilt em,.pd-alts em{display:flex;flex-direction:column;align-items:flex-end;font:700 13px Inter;font-style:normal;color:var(--fg);white-space:nowrap}
.pd-tilt em small{font:600 11px Inter;color:var(--muted)}
.pd-tilt em.up{color:var(--green)}.pd-tilt em.dn{color:var(--red)}
.pd-alts.plain li,.pd-frag.plain li{display:block;font:500 13px/1.6 Inter;color:var(--muted)}
.pd-frag li{display:flex;align-items:flex-start;gap:8px;font:500 13px/1.5 Inter;color:var(--muted)}
.pd-inv li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px;border-radius:8px;background:var(--card2);min-height:44px}
.pd-inv li.off{background:transparent;border:1px dashed var(--line)}
.pd-inv .n{font:600 13px Inter;color:var(--fg);min-width:0;overflow-wrap:anywhere}
.pd-inv small{font:500 12px/1.4 Inter;color:var(--muted);flex:1 1 100%}
.pd-mk-l li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px;border-radius:8px;background:var(--card2);min-height:44px}
.pd-mk-l li.off{background:transparent;border:1px dashed var(--line)}
.pd-mk-l .n{font:600 13px Inter;color:var(--fg);min-width:0;overflow-wrap:anywhere}
.pd-mk-l em{font:700 14px Inter;font-style:normal;color:var(--green);margin-left:auto}
.pd-mk-l small{font:500 12px/1.4 Inter;color:var(--muted);flex:1 1 100%}
.pd-ok{display:flex;align-items:flex-start;gap:8px;margin-top:14px;font:500 13px/1.5 Inter;color:var(--muted)}
.pd-ok svg{width:18px;height:18px;flex:0 0 auto;color:var(--green)}
.pd-disc{margin:16px 0 8px;font:500 12px/1.6 Inter;color:var(--fb-dim);overflow-wrap:anywhere}
.pd-cta{margin-bottom:14px}

/* Bouton « Prediction » de la carte de match : frere du lien principal, pleine largeur, >= 44 px. */
.fb-row-pd{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin-top:-4px;
  border:1px solid var(--line2);border-top:0;border-radius:0 0 10px 10px;background:var(--card2);
  font:700 13px Inter;color:var(--green)}
.fb-row-pd svg{width:17px;height:17px}
.fb-row-pd:active{background:var(--line)}
.fb-predict-cta{border:1px solid var(--line2);background:linear-gradient(180deg,#141f3a,var(--card));border-radius:10px;min-height:64px}
.fb-predict-cta .fb-row-ic{color:var(--green)}

/* ---------- Combiner ---------- */
.cmb-form{gap:10px}
.cmb-lbl{display:block;font:700 12px Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.cmb-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cmb-row .fb-input{flex:1 1 140px;min-width:0;min-height:48px;padding:0 14px;border-radius:8px;border:1px solid var(--line2);background:var(--card2)}
.fb-chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 14px;border-radius:8px;
  border:1px solid var(--line2);background:var(--card2);font:700 14px Inter;color:var(--muted)}
.fb-chip.on{color:var(--green-ink);background:var(--green);border-color:var(--green)}
.cmb-go{margin-top:12px}
/* `auto-fit` plutot que trois colonnes fixes : a 320 px, « PROBABILITE COMBINEE » se coupait en plein mot
   (« PROBABILIT / E »), parce que `overflow-wrap:anywhere` casse n'importe ou des qu'une colonne est trop etroite.
   On laisse les tuiles passer a deux par ligne, et on ne casse un mot que s'il ne tient VRAIMENT pas. */
.cmb-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px}
.cmb-kpis>div{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:8px;background:var(--card2);min-width:0}
.cmb-kpis span{font:600 11px/1.3 Inter;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);overflow-wrap:break-word;hyphens:auto}
.cmb-kpis b{font:700 18px Inter;color:var(--fg)}
.cmb-legs{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.cmb-leg{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--card2)}
.cmb-leg-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.cmb-leg-h b{font:700 14px Inter;min-width:0;overflow-wrap:anywhere}
.cmb-leg-h small{font:500 12px Inter;color:var(--muted);white-space:nowrap}
.cmb-leg-b{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.cmb-leg-b .n{flex:1 1 100%;font:600 13px Inter;color:var(--green);overflow-wrap:anywhere}
.cmb-kv{display:flex;flex-direction:column;min-width:0}
.cmb-kv small{font:600 10px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cmb-kv b{font:700 15px Inter}
.cmb-src{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:500 12px Inter;color:var(--fb-dim)}
/* Une carte dans une carte : deux cadres imbriques donnaient l'impression de deux blocs concurrents. */
.cmb-nu{display:flex;flex-direction:column;gap:12px;padding:0;background:none;border:0}
.cmb-nu>h3{font:700 15px Inter}
.cmb-tabs{display:flex;gap:8px;margin:12px 0}
.cmb-hist{margin-top:12px}
.cmb-hist-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.cmb-hist-h b{font:700 13px Inter;color:var(--muted)}
.cmb-hist.r-lost .cmb-res{border-color:#5b2626}
.cmb-hist.r-won .cmb-res{border-color:#3c5417}

@media (min-width:430px){
  .pd-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-bar{grid-template-columns:24px minmax(0,1fr) 56px}
}
@media (min-width:760px){
  .pd-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cmb-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cmb-leg-b .n{flex:1 1 auto}
}
/* ===== PREDICTION:FIN ==================================================================================== */

/* Direct : donnees figees. La carte reste visible — le lecteur doit savoir ce qu'il regarde — mais elle ne porte
   ni point rouge, ni minute, et elle dit pourquoi. Ambre, jamais vert : ce n'est pas un direct. */
.fb-livecard.stale{border-color:#5a4520;background:linear-gradient(180deg,#1d1a12,var(--card))}
.fb-livecard.stale .fb-livecard-h span{color:var(--amber)}

/* Cinq scores : celui qui ne colle pas a l'issue reste visible, en retrait, et le dit. La masse restante est une
   tuile comme les autres — cinq lignes a 52 % ne decrivent pas le match, et l'additionner soi-meme n'est pas au
   lecteur de le faire. */
.pd-sc.off{opacity:.72;border-style:dashed}
.pd-sc .x{display:block;width:100%;font:600 10px Inter;letter-spacing:.04em;text-transform:uppercase;color:var(--amber)}
.pd-sc.rest{background:transparent;border-style:dashed;color:var(--muted)}
.pd-sc.rest b{font-size:16px;color:var(--muted)}
.pd-sc.rest em{color:var(--muted)}
.pd-note-sc{font:500 13px/1.6 Inter;color:var(--muted);overflow-wrap:anywhere}
.pd-warn.soft{border-color:var(--line2);background:var(--card2)}
.pd-warn.soft b{color:var(--fg)}
.pd-warn.ok{border-color:#3c5417;background:rgba(200,240,74,.07)}
.pd-warn.ok b{color:var(--green)}
/* Effectif : deux colonnes a partir de 560 px, une seule en dessous ; jamais de tableau qui deborde. */
.pd-eff-grid{display:grid;grid-template-columns:1fr;gap:14px}
.pd-eff-side h3{font:700 14px Inter;color:var(--fg);padding-bottom:6px;border-bottom:1px solid var(--line)}
.pd-eff-l{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.pd-eff-l li{display:flex;flex-direction:column;padding:8px 10px;border-radius:8px;background:var(--card2);min-height:44px;justify-content:center}
.pd-eff-l b{font:600 13px Inter;overflow-wrap:anywhere}
.pd-eff-l small{font:500 12px Inter;color:var(--muted)}
@media (min-width:560px){.pd-eff-grid{grid-template-columns:1fr 1fr}}

/* ===========================================================================
   Fiche de prediction : la lecture d'abord
   Mobile-first. Chaque cible tactile fait au moins 44 px, et rien ne deborde
   a 320 px : les listes passent a la ligne plutot que de se comprimer.
   =========================================================================== */

/* --- Lecture du match : le premier bloc, et le seul qu'on lise parfois --- */
.pd-read{margin:4px 0 12px;padding:16px 16px 18px;border-radius:14px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent,#c7f24a) 10%,var(--card2)) 0%,var(--card2) 100%);
  border:1px solid var(--line2)}
.pd-read-h{margin:0 0 8px;font:700 11px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pd-read-t{margin:0;font:500 16px/1.55 Inter;color:var(--fg);overflow-wrap:anywhere}
@media(min-width:700px){.pd-read-t{font-size:17px}}

/* --- Verdict --- */
.pd-v{margin:0 0 12px}
.pd-v-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pd-v-head h2{margin:0;font:700 11px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pd-v-phrase{margin:8px 0 14px;font:700 18px/1.35 Inter;letter-spacing:.005em;color:var(--fg);overflow-wrap:anywhere}
@media(min-width:430px){.pd-v-phrase{font-size:20px}}
.pd-v-bars{display:flex;flex-direction:column;gap:8px}
.pd-v-row{display:grid;grid-template-columns:26px minmax(0,1fr) 44px;grid-template-areas:"k t p" "b b b";
  align-items:center;gap:4px 8px;min-height:44px;padding:4px 0}
@media(min-width:430px){.pd-v-row{grid-template-columns:26px minmax(0,8rem) minmax(0,1fr) 44px;
  grid-template-areas:"k t b p";gap:10px}}
.pd-v-k{grid-area:k;font:400 15px Anton,Impact,sans-serif;color:var(--muted);text-align:center}
.pd-v-t{grid-area:t;font:600 14px Inter;color:var(--fg);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-v-b{grid-area:b;height:8px;border-radius:99px;background:var(--line2);overflow:hidden;min-width:0}
.pd-v-b i{display:block;height:100%;border-radius:99px;background:var(--muted);transition:width .35s ease}
.pd-v-p{grid-area:p;font:700 14px Inter;color:var(--fg);text-align:right;font-style:normal}
.pd-v-row.on .pd-v-b i{background:var(--accent,#c7f24a)}
.pd-v-row.on .pd-v-k,.pd-v-row.on .pd-v-p{color:var(--accent,#c7f24a)}

/* --- Onglets de marches --- */
.pd-tabs{margin:0 0 12px}
.pd-tabs>h2{margin:0 0 10px;font:700 11px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* La barre defile quand les quatre onglets ne tiennent pas. Un degrade sur le bord droit le SIGNALE : sans lui,
   le quatrieme onglet existe sans que personne ne sache qu'il est la. */
.pd-tabwrap{position:relative;margin:0 -4px 12px}
.pd-tabwrap::after{content:"";position:absolute;top:0;right:0;bottom:4px;width:28px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--card));border-radius:0 10px 10px 0}
.pd-tablist{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  margin:0;padding:0 4px 4px;-webkit-overflow-scrolling:touch}
.pd-tablist::-webkit-scrollbar{display:none}
.pd-tab{flex:0 0 auto;min-height:44px;padding:10px 14px;border-radius:10px;border:1px solid var(--line2);
  background:var(--card2);color:var(--muted);font:600 13px Inter;cursor:pointer;white-space:nowrap}
.pd-tab.on{background:var(--accent,#c7f24a);border-color:var(--accent,#c7f24a);color:#0b1020}
.pd-tab:focus-visible{outline:2px solid var(--accent,#c7f24a);outline-offset:2px}
.pd-panel:focus-visible{outline:2px solid var(--accent,#c7f24a);outline-offset:4px;border-radius:8px}
.pd-mkt{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.pd-mkt li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:baseline;
  min-height:44px;padding:9px 0;border-bottom:1px solid var(--line2)}
.pd-mkt li:last-child{border-bottom:0}
.pd-mkt .n{font:600 14px Inter;color:var(--fg);min-width:0;overflow-wrap:anywhere}
.pd-mkt em{font:700 15px Inter;font-style:normal;color:var(--fg);text-align:right;white-space:nowrap}
.pd-mkt small{grid-column:1/-1;font:500 12px/1.45 Inter;color:var(--muted);overflow-wrap:anywhere}
.pd-mkt i.off{grid-column:1/-1;font:500 11px Inter;font-style:normal;color:var(--warn,#e3b341)}

/* --- Les deux scores, l'un pres de l'autre et nommes --- */
.pd-sc2-row{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.pd-sc2{flex:1 1 8rem;min-width:0;padding:12px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--card2)}
.pd-sc2.on{border-color:var(--accent,#c7f24a)}
.pd-sc2 small{display:block;font:600 11px Inter;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);
  margin-bottom:4px;overflow-wrap:anywhere}
.pd-sc2 b{display:block;font:400 26px Anton,Impact,sans-serif;color:var(--fg)}
.pd-sc2 em{font:600 12px Inter;font-style:normal;color:var(--muted)}
.pd-sc2-w{margin:0 0 12px;font:500 12px/1.45 Inter;color:var(--muted)}

/* --- Pourquoi, et ce qui peut basculer --- */
.pd-why,.pd-tilt{margin:0 0 12px}
.pd-why>h2,.pd-tilt>h2{margin:0 0 10px;font:700 11px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pd-why-l,.pd-tilt-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pd-why-l li,.pd-tilt-l li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;
  padding-bottom:10px;border-bottom:1px solid var(--line2)}
.pd-why-l li:last-child,.pd-tilt-l li:last-child{border-bottom:0;padding-bottom:0}
.pd-why-l .n{font:700 13px Inter;color:var(--fg)}
.pd-why-l small,.pd-tilt-l small{flex:1 1 100%;font:500 13px/1.5 Inter;color:var(--muted);overflow-wrap:anywhere}
.pd-tilt-l i{font:500 11px Inter;font-style:normal;color:var(--muted);opacity:.8}

/* --- Modes Resume / Expert --- */
.pd-modes{display:inline-flex;gap:4px;margin:0 0 14px;padding:4px;border-radius:12px;background:var(--card2);
  border:1px solid var(--line2)}
.pd-mode{min-height:44px;display:inline-flex;align-items:center;padding:0 18px;border-radius:9px;
  font:600 13px Inter;color:var(--muted);text-decoration:none}
.pd-mode.on{background:var(--accent,#c7f24a);color:#0b1020}
.pd-mode:focus-visible{outline:2px solid var(--accent,#c7f24a);outline-offset:2px}

/* --- UNE carte de verrouillage, jamais plusieurs --- */
.pd-lock{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 12px;margin:0 0 12px}
.pd-lock>i{flex:0 0 auto;color:var(--muted)}
.pd-lock>i svg{width:20px;height:20px}
.pd-lock>div{flex:1 1 12rem;min-width:0}
.pd-lock b{display:block;font:700 14px Inter;color:var(--fg);margin-bottom:4px}
.pd-lock small{display:block;font:500 12px/1.5 Inter;color:var(--muted);overflow-wrap:anywhere}
.pd-lock .fb-btn{flex:1 1 100%;min-height:44px}
@media(min-width:430px){.pd-lock .fb-btn{flex:0 0 auto}}

.pd-fresh{margin:0 0 12px;font:500 12px Inter;color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  .pd-v-b i{transition:none}
}

/* Bouton « Construire un combiné » : apres les marches, avec ce sur quoi la selection repose. */
.pd-cmb{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 0 12px}
.pd-cmb>div{flex:1 1 12rem;min-width:0}
.pd-cmb b{display:block;font:700 14px Inter;color:var(--fg);margin-bottom:4px;overflow-wrap:anywhere}
.pd-cmb small{display:block;font:500 12px/1.5 Inter;color:var(--muted);overflow-wrap:anywhere}
.pd-cmb .fb-btn{flex:1 1 100%;min-height:44px}
@media(min-width:430px){.pd-cmb .fb-btn{flex:0 0 auto}}

/* Marches selectionnables : des cases a cocher, pas des boutons qui se ressemblent. */
.cmb-mk{flex-wrap:wrap}
.cmb-mk .cmb-m[aria-checked="true"]::before{content:"✓ ";font-weight:700}

/* Avis du banc / de la source, avant le formulaire du Combiner. */
.cmb-avis{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 12px;margin:0 0 12px}
.cmb-avis>i{flex:0 0 auto;color:var(--warn,#e3b341)}
.cmb-avis>i svg{width:20px;height:20px}
.cmb-avis>div{flex:1 1 12rem;min-width:0}
.cmb-avis b{display:block;font:700 14px Inter;color:var(--fg);margin-bottom:4px}
.cmb-avis small{display:block;font:500 12px/1.5 Inter;color:var(--muted);overflow-wrap:anywhere;margin-top:2px}

/* ---------------------------------------------------------------------------
   Confiance déclarée (p_user) : le curseur du formulaire, le voile sur la
   probabilité du modèle, et l'écran de bilan.
   Le voile n'est pas décoratif : tant qu'un pronostic peut encore être pris,
   le chiffre du modèle n'est pas dans la page. Ce bloc ne fait que rendre
   lisible une absence déjà décidée côté données.
   --------------------------------------------------------------------------- */
.fb-card.model.veil{border-style:dashed;border-color:var(--line2)}
.fb-veil{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--r-sm);background:var(--bg2);border:1px solid var(--line)}
.fb-veil svg{flex:0 0 auto;width:22px;height:22px;color:var(--muted);margin-top:2px}
.fb-veil b{display:block;font:700 15px Inter;margin-bottom:4px}
.fb-veil small{display:block;color:var(--muted);font-size:13.5px;line-height:1.5}
.fb-card.reveal{border-color:var(--green);animation:fbReveal .5s var(--ease)}
@keyframes fbReveal{from{box-shadow:0 0 0 0 rgba(200,240,74,.45)}to{box-shadow:0 0 0 14px rgba(200,240,74,0)}}
.fb-note.reveal{color:var(--green)}

/* Le curseur. La confiance ne rapporte aucun point : elle n'emprunte donc pas l'accent d'action des boutons de score. */
.fb-conf{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:var(--r-sm);background:var(--bg2);border:1px solid var(--line)}
.fb-conf>label{font:700 12px Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fb-conf-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.fb-conf-row input[type=range]{width:100%;accent-color:var(--blue);height:30px}
.fb-conf-row input[type=range]:disabled{accent-color:var(--line2);opacity:.6}
.fb-conf-row output{font:400 26px Anton,Impact,"Arial Narrow",sans-serif;font-variant-numeric:tabular-nums;color:var(--blue);min-width:72px;text-align:right}
.fb-conf-row output small{font-family:Inter;font-size:13px;font-weight:700;margin-left:2px}
.fb-conf .fb-btn{justify-content:center}

/* Bilan. Les deux scores se lisent sur la même ligne — c'est la comparaison qui porte l'information, pas le chiffre seul. */
.fb-card.cal h2 svg{width:18px;height:18px;margin-right:6px;color:var(--blue)}
.fb-brier{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.fb-brier b{font:700 19px Inter;color:var(--fg)}
.fb-brier i{color:var(--line2);font-style:normal}
.fb-brier span{font:600 16px Inter;color:var(--muted)}
.fb-brier em{font:700 14px Inter;font-style:normal;color:var(--muted)}
.fb-brier em.up{color:var(--green)}.fb-brier em.down{color:var(--amber)}
/* La ligne permanente. Elle est bordée pour qu'on ne puisse pas la lire comme une note de bas de page facultative. */
.fb-note.permanent{border-left:2px solid var(--line2);padding-left:10px;color:var(--muted)}
.fb-cal{display:flex;flex-direction:column;gap:6px}
.fb-cal-b{display:grid;grid-template-columns:auto 1fr 1fr auto;gap:10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line)}
.fb-cal-b:last-child{border-bottom:0}
.fb-cal-b span{font:600 12.5px Inter;color:var(--muted);font-variant-numeric:tabular-nums}
.fb-cal-b b{font:700 13.5px Inter;font-variant-numeric:tabular-nums}
.fb-cal-b b.o{color:var(--blue)}
.fb-cal-b small{font:500 12px Inter;color:var(--muted);text-align:right}

/* ---------------------------------------------------------------------------
   Latence : ce qu'on montre pendant qu'on attend, et la zone qui se lève d'un
   seul geste au dévoilement.
   `display:contents` rend le conteneur transparent pour la disposition : les
   trois cartes restent des enfants directs de `.fb-cols>div` et gardent leur
   gouttière, alors qu'on peut les remplacer toutes ensemble en une écriture.
   --------------------------------------------------------------------------- */
.fb-zone{display:contents}
.fb-msg.attente{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px}
.fb-msg.attente svg{width:16px;height:16px;flex:0 0 auto}

/* ---------------------------------------------------------------------------
   Duel : une page publique, jouable sans compte.
   Chaque match porte son propre formulaire — c'est volontaire : on valide
   match par match, et le chiffre du modèle se dévoile match par match.
   --------------------------------------------------------------------------- */
.fb-duel-list{display:flex;flex-direction:column;gap:12px}
.fb-card.duel-m{gap:10px}
.fb-card.duel-m.locked{opacity:.82;border-style:dashed}
.fb-duel-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font:600 12.5px Inter;color:var(--muted)}
.fb-duel-t{font:700 16px Inter}
.fb-msg-m{font:500 13px Inter;color:var(--muted);min-height:18px}
.fb-onb.duel-keep{border-color:var(--green);background:linear-gradient(180deg,rgba(200,240,74,.08),transparent)}
.fb-onb.duel-keep svg{width:22px;height:22px;color:var(--green);flex:0 0 auto}
/* Le tableau du classement défile DANS son conteneur : la page ne part jamais de travers. */
.fb-tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.fb-tbl th{font:700 11.5px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.fb-tbl td{padding:8px;border-bottom:1px solid var(--line);font:600 13.5px Inter}
.fb-tbl tr:last-child td{border-bottom:0}
.fb-tbl .n{text-align:right}
.fb-tbl tr.me td{background:rgba(200,240,74,.07)}
.fb-tbl tr.me i{font-style:normal;color:var(--green);font-weight:700}
.fb-tbl td.up{color:var(--green)}.fb-tbl td.down{color:var(--amber)}
.fb-tbl td small{color:var(--muted);margin-left:2px}

/* ---------- créer un duel ----------
   L'écran par lequel tout commence. Deux exigences de rendu, et elles se voient au doigt plus qu'à l'œil :
   la ligne d'un match est une cible de pleine largeur (on coche en marchant, sur un téléphone), et la barre de
   compte reste sous la main en bas de la liste — un plafond de 20 matchs annoncé après vingt clics ne sert à rien. */
.fb-dn{gap:14px}
.fb-dn-f{display:flex;flex-direction:column;gap:6px;margin:10px 0 4px;font:700 12px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fb-dn-slug{display:flex;flex-direction:column;gap:6px}
.fb-dn-slug small{color:var(--muted);font-size:12.5px;line-height:1.45}
.fb-dn-j{margin-top:14px}
.fb-dn-jh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px 8px}
.fb-dn-jh b{font:700 13.5px Inter;text-transform:capitalize}
.fb-dn-ms{display:flex;flex-direction:column;gap:8px}
/* La ligne de match vit DANS un formulaire, et `.fb-form label` (colonne) comme `.fb-form input` (pleine largeur,
   50 px de haut) l'emportent sur une classe seule : sans ces deux sélecteurs plus précis, la ligne s'empile en
   colonne de 140 px et la case à cocher s'étire sur toute la largeur. Vu au navigateur, invisible en test. */
.fb-form .fb-dn-m,.fb-dn-m{display:flex;flex-direction:row;align-items:center;gap:12px;padding:11px 12px;min-height:48px;
  border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;color:var(--fg);font:400 14px Inter}
.fb-dn-m.on{border-color:var(--green);background:linear-gradient(180deg,rgba(200,240,74,.09),transparent)}
.fb-form .fb-dn-m input[type=checkbox],.fb-dn-m input[type=checkbox]{flex:0 0 auto;width:20px;height:20px;min-height:0;padding:0;margin:0;accent-color:var(--green)}
.fb-dn-hh{flex:0 0 auto;font:700 12.5px Inter;color:var(--muted);font-variant-numeric:tabular-nums}
.fb-dn-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fb-dn-t b{font:700 14px Inter;line-height:1.3;overflow-wrap:anywhere}
.fb-dn-t small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-dn-bar{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:14px;padding:12px;border:1px solid var(--line2);border-radius:14px;background:var(--card)}
.fb-dn-bar span{font:700 13px Inter;color:var(--muted);font-variant-numeric:tabular-nums}
.fb-dn-bar .fb-btn{flex:1 1 180px}
.fb-btn.xs{width:auto;flex:0 0 auto;padding:6px 12px;font-size:12px;min-height:44px}   /* `.fb-btn` est pleine largeur par défaut (mobile d'abord) : sans ce rappel, « Tout cocher » s'étire sur
      toute la ligne et pousse la date hors de vue. Vu au navigateur, invisible en test. */

/* Le lien, en grand : c'est l'objet que le créateur va poster. Il se copie d'un geste, et il reste lisible EN ENTIER
   à 320 px — d'où un bloc de texte qui revient à la ligne, et non un champ, qui l'aurait tronqué à une ligne ; un lien
   tronqué se recopie à la main, et se recopie faux. Mesuré au navigateur : le champ coupait à 268 px de large. */
.fb-card.duel-done{align-items:flex-start;gap:12px;border-color:var(--green)}
.fb-done-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(200,240,74,.12);color:var(--green)}
.fb-done-ic svg{width:24px;height:24px}
.fb-done-l{font:700 11.5px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fb-done-link{display:flex;flex-wrap:wrap;gap:10px;width:100%}
.fb-done-link .fb-lien{flex:1 1 100%;min-width:0;padding:12px 14px;border:1px solid var(--line2);border-radius:8px;background:var(--card);
  font:700 14.5px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--fg);overflow-wrap:anywhere;word-break:break-all;cursor:text;user-select:all}
.fb-done-link .fb-btn{flex:1 1 100%}
/* Les trois destinations de partage tiennent sur une ligne qui se replie : empilées pleine largeur, elles
   repoussaient le lien lui-même hors de l'écran sur un téléphone étroit. */
.fb-share{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.fb-share .fb-btn{width:auto;flex:1 1 auto;min-width:88px;min-height:44px;font-size:13px}
.fb-clan.duel{border-color:var(--line2)}
.fb-badge.duel{color:#0a0f1c;background:var(--green);border-color:var(--green);font-weight:800;letter-spacing:.06em}
@media (min-width:560px){.fb-done-link .fb-lien{flex:1 1 auto}.fb-done-link .fb-btn{flex:0 0 auto}}