/* WikiFoot — l'habillage du site (Mehdy, 19/10/2026) : sobre et épuré, inspiré de l'INTERFACE d'un menu de jeu de foot
   moderne : menu en ligne, grands titres blancs, panneaux en verre sombre aux coins arrondis, bleu et rouge (Mehdy : « plutôt bleu et rouge »,
   après un essai en vert puis en marron orangé),
   panneau doré pour ce qu'on met en avant, boutons clairs. Le fond reste uni (pas de décor).
   Chargée après le style de la page : elle le recouvre. */
:root{
  --bg:#070b14; --ink:#f2f5fa; --mute:#9eabc0; --faint:#66728a;
  --glass:rgba(255,255,255,.045); --glass2:rgba(255,255,255,.085);
  --edge:rgba(255,255,255,.08); --edge2:rgba(255,255,255,.17);
  --vio:#4f8cff; --vio2:#8db4ff; --mag:#e63946; --gold:#e3bf55;
  --grad:linear-gradient(135deg,#ff4d5a,#c81e2d);
  --accent:#ff4d5a; --bleu:#4f8cff; --or1:#e9cb6a; --or2:#b48a2c;
  --panneau:rgba(17,24,40,.74); --rayon:14px;
  --r-SR:#9b5de5;           /* les rangs gardent leurs couleurs à eux */
}
body{font-family:Barlow,Inter,"Segoe UI",system-ui,sans-serif;font-size:15.5px;background:var(--bg)}
h1,h2,h3,.sora{font-family:Barlow,Inter,sans-serif;letter-spacing:-.01em}
/* le fond : uni, à peine éclairé par le haut */
body::before{background:radial-gradient(ellipse 90% 60% at 50% -20%,rgba(110,150,255,.08),transparent 70%),
  linear-gradient(180deg,#0c1322 0%,#070b14 45%,#05080f 100%)}
body::after{content:none}
::selection{background:rgba(230,57,70,.4)}
a{color:var(--accent)}

/* ------------------------------------------------ en-tête : posé sur le fond, sans boîte */
.top{padding:10px 28px 0}
.bar{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;box-shadow:none;max-width:1400px}
.row1{height:72px;border-bottom:0;padding:0;gap:12px}
.crane{display:none}
.logo{gap:12px;font:800 27px Barlow,Inter,sans-serif;letter-spacing:-.01em;padding-right:22px;margin-right:6px;
  border-right:1px solid rgba(255,255,255,.22)}
.logo img{width:46px;height:46px}
.logo b{background:none;color:#fff;-webkit-text-fill-color:#fff}
.logo .beta{color:var(--accent);background:rgba(230,57,70,.12);border-color:rgba(230,57,70,.45);border-radius:999px}
.chip,.ibtn,.me{background:none;border-color:transparent;border-radius:10px}
.chip{font-size:16px;font-weight:600}
.ibtn:hover,.chip[role=button]:hover{background:var(--glass2)}
.me{border:1px solid var(--edge2)}
.me.out{background:#f2f5fa;color:#0b1220;border-radius:10px}
.majbtn{border-radius:10px}
/* un en-tête épuré : à droite, seulement la boutique, la cloche, les Wikiki et le joueur (le son et les réglages
   restent dans les Paramètres ; le bouton du son reste, pour les sons du foot) */
.top .kdiscord,#notifPrefBtn,#gearBtn,#avisBtn .majlbl,#parrainBtn .majlbl{display:none!important}
.chip.quete .qlab{display:none}
/* le menu : du texte seul ; la page ouverte en blanc et en gras */
.tabs{gap:6px;padding:4px 0 10px;border-top:0}
.tabs button{padding:8px 12px;font:600 16.5px Barlow,Inter,sans-serif;color:rgba(255,255,255,.58);background:none!important;border-radius:8px}
.tabs button::after{content:none!important}
.tabs button:hover{color:#fff}
.tabs button.on{color:#fff;background:none;font-weight:800}
.tabs button.on::before{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;background:var(--accent)}
.tabs .tabicon{display:none}

/* ------------------------------------------------ titres, panneaux, boutons */
.wrap{max-width:1400px;padding:26px 28px 110px}
.h1{font:800 44px/1.05 Barlow,Inter,sans-serif;letter-spacing:-.015em;color:#fff}
.h1 em{font-style:normal;color:var(--accent)}
.panel{background:var(--panneau);border:1px solid var(--edge);border-radius:var(--rayon);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.panel h4{font:700 13px Barlow,Inter,sans-serif;letter-spacing:.12em;color:var(--mute)}
.btn{border-radius:10px;font-family:Barlow,Inter,sans-serif;font-weight:700;font-size:16px}
.btn.main{background:#f2f5fa;color:#0b1220;box-shadow:none}
.btn.main:hover:not(:disabled){filter:none;background:#fff}
.btn.ghost{background:var(--glass);border-color:var(--edge2)}
.btn.gold,.btn.wikipro{background:linear-gradient(135deg,var(--or1),var(--or2));color:#1d1503}
.btn.good{background:var(--grad);color:#fff}
.btn.surmesure{background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--edge2)}
.btn.sm,.btn.xs{border-radius:8px}
input,select,textarea{border-radius:10px}
/* le panneau doré, pour ce qu'on met en avant (classe à poser : .dore) */
.dore{background:linear-gradient(150deg,#d9b54f 0%,#b8923a 45%,#8e6c22 100%);color:#fff;border:0;border-radius:var(--rayon)}
.dore h2,.dore h3{font:800 34px/1.05 Barlow,Inter,sans-serif;text-transform:uppercase;margin:0 0 10px}

/* ------------------------------------------------ le paquet : un sachet argenté serti, en dégradé
   (Mehdy : « pas multicolore », « un dégradé joli », puis « comme avant, juste un tout petit peu plus large ») */
.booster{width:240px;height:328px;filter:drop-shadow(0 26px 26px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(110,90,255,.28))}
.sp-bw{width:calc(240px*var(--k));height:calc(328px*var(--k))}
.bart{background:linear-gradient(115deg,#f7f8fa 0%,#c3c9d0 22%,#f4f6f8 40%,#aab1b9 62%,#eef1f4 80%,#c9ced4 100%)}
.bart .lines{inset:24px 9px 24px;
  background:radial-gradient(90% 70% at 22% 18%,rgba(255,255,255,.38),transparent 55%),
    radial-gradient(80% 70% at 85% 95%,rgba(255,120,90,.35),transparent 60%),
    linear-gradient(145deg,#1d3fb8 0%,#2f6ae6 30%,#6a4fe0 58%,#c3306a 82%,#e8384a 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18),0 0 0 1.5px rgba(255,255,255,.8)}
.bart .foil{inset:24px 9px 24px;mix-blend-mode:overlay;opacity:.55;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 2px,transparent 2px 7px),
    conic-gradient(from 200deg at 50% 45%,rgba(255,255,255,.35),rgba(120,200,255,.2),rgba(255,200,230,.22),rgba(255,255,255,.35))}
.bart .edge{background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 7%,transparent 93%,rgba(0,0,0,.25))}
.crimp,.booster.pro .crimp,.booster.evt .crimp{height:24px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.9) 0 1.4px,rgba(120,128,138,.55) 1.4px 3.2px),linear-gradient(180deg,#f2f4f6,#b7bdc4)}
.tearline{top:62px;border-top-color:rgba(255,255,255,.7)}
.tearhint{top:30px;color:#3b4148;opacity:.85}
.emb{top:82px}
.emb img{width:104px;height:104px;filter:brightness(0) invert(1) drop-shadow(0 4px 12px rgba(0,0,0,.35))}      /* le logo en blanc sur le dégradé */
.emb .t{font:900 32px/1 Barlow,Inter,sans-serif;letter-spacing:.01em;margin-top:8px;color:#fff;background:none;
  -webkit-text-fill-color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25),0 0 18px rgba(0,0,0,.3)}
.emb .s{font:800 11px Barlow,Inter,sans-serif;letter-spacing:.22em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.nbcards{left:18px;right:auto;bottom:32px;display:flex;flex-direction:column;align-items:center;padding:4px 7px 3px;
  background:rgba(10,14,30,.85);color:#fff;font:800 8.5px/1 Barlow,Inter,sans-serif;letter-spacing:.08em;border-radius:3px}
.nbcards b{font-size:17px;line-height:1}
.edition{left:auto;right:16px;bottom:32px;padding:5px 7px;background:#fff;color:#16245c;font:900 10px/1 Barlow,Inter,sans-serif;
  letter-spacing:.06em;opacity:1;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.25)}
/* le paquet doré : le même, en dégradé d'or */
.booster.pro .bart .lines{background:radial-gradient(90% 70% at 22% 18%,rgba(255,255,255,.45),transparent 55%),
  linear-gradient(145deg,#fff1b8 0%,#f0c95a 35%,#d29a2c 70%,#a8701a 100%)}
.booster.pro .emb .t,.booster.pro .emb .s{background:none;-webkit-text-fill-color:#fff;color:#fff}
.booster.pro .nbcards{color:#fff}
/* le menu d'origine : toutes les pages se ressemblent (plus de couleurs propres à WBC, Combat, Fusion…) */
.tabs button,.tabs button:not(.on){color:rgba(255,255,255,.58)!important;border:0!important;box-shadow:none!important;outline:0}
.tabs button.on{color:#fff!important}

/* ------------------------------------------------ le menu par rubriques (public/js/wikifoot.js) */
.rubriques{display:flex;align-items:center;gap:4px;margin-left:4px}
.rubriques button{padding:8px 14px;font:600 18px Barlow,Inter,sans-serif;color:rgba(255,255,255,.62);border-radius:8px;white-space:nowrap}
.rubriques button:hover{color:#fff}
.rubriques button.on{color:#fff;font-weight:800}
.tabs{padding:0 0 12px 0;gap:2px}
.tabs button{font-size:14.5px;padding:6px 12px}
.tabs button.on::before{bottom:0}
@media (max-width:1100px){.rubriques button{font-size:15.5px;padding:8px 9px}}
@media (max-width:700px){.rubriques{display:none}}

/* ------------------------------------------------ les cartes du foot (.card.fc) */
/* Mehdy (19/10/2026) : des cartes RECTANGULAIRES (« comme au début, c'était mieux »), les écritures plus grosses sur la
   photo ; il aime la naissance, la taille, et les couleurs bronze, argent, or… selon le rang. Pas de PAC/SHO/PAS : des
   mots français. De haut en bas : la photo (la note et le poste posés dessus), le nom, les chiffres, le drapeau et le
   club, le rang. */
.card.fc{--fc1:#e7c49a;--fc2:#b98455;--fc3:#7d5130;--fct:#33200f;--fcr:rgba(255,236,214,.5);
  border:0!important;border-radius:.95em!important;padding:0;color:var(--fct);
  background:linear-gradient(115deg,transparent 0 30%,var(--fcr) 30% 31.5%,transparent 31.5% 38%,var(--fcr) 38% 38.6%,transparent 38.6%),
    linear-gradient(160deg,var(--fc1) 0%,var(--fc2) 55%,var(--fc3) 100%)!important;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.8),inset 0 0 0 .17em rgba(255,255,255,.45),inset 0 0 0 .32em rgba(0,0,0,.12)!important}
/* les rangs : bronze, argent, or, méga or, élite (émeraude), mythique (noir et or), légende (crème et or) */
.card.fc.r-PC{--fc1:#f4f6f8;--fc2:#c3cad1;--fc3:#8e979f;--fct:#1f262d;--fcr:rgba(255,255,255,.7)}
.card.fc.r-R{--fc1:#fbe7a6;--fc2:#e3c165;--fc3:#b88f2f;--fct:#3a2c0c;--fcr:rgba(255,250,225,.7)}
.card.fc.r-SR{--fc1:#ffe58a;--fc2:#e0a922;--fc3:#7a4f05;--fct:#2a1a00;--fcr:rgba(255,246,200,.75)}      /* méga or */
.card.fc.r-UR{--fc1:#6ff0c0;--fc2:#18a977;--fc3:#06543b;--fct:#032619;--fcr:rgba(220,255,240,.45)}
.card.fc.r-L{--fc1:#34343a;--fc2:#16161a;--fc3:#060607;--fct:#f2d88c;--fcr:rgba(242,216,140,.25);      /* mythique */
  box-shadow:0 10px 24px -8px rgba(0,0,0,.9),0 0 18px -4px rgba(239,63,77,.55),inset 0 0 0 .17em rgba(242,216,140,.85)!important}
.card.fc.r-M{--fc1:#fffaf0;--fc2:#f0dfb4;--fc3:#c89f4b;--fct:#2c1f06;--fcr:rgba(212,175,55,.55);      /* légende */
  box-shadow:0 10px 24px -8px rgba(0,0,0,.8),0 0 20px -4px rgba(255,214,120,.7),inset 0 0 0 .17em rgba(212,175,55,.95)!important}
/* les effets de WikiPick n'ont plus cours sur ces cartes */
.card.fc::before,.card.fc::after,.card.fc .mhalo{content:none!important;display:none!important;animation:none!important}
.card.fc .hd,.card.fc .ft{background:none!important;box-shadow:none!important;border:0!important}
/* la photo, en haut, sur toute la largeur ; elle se fond dans la carte par le bas */
.card.fc .picw{order:1;position:relative;flex:1 1 auto;min-height:0;padding:.42em .42em 0}
.card.fc .pic{aspect-ratio:auto;height:100%;border-radius:.65em .65em .2em .2em;background:none;box-shadow:none!important;
  -webkit-mask:linear-gradient(180deg,#000 74%,transparent);mask:linear-gradient(180deg,#000 74%,transparent)}
.card.fc .pic img{animation:none!important;transform:none!important}
.card.fc .pic::before,.card.fc .pic::after{content:none!important}
/* la note et le poste, en grand, sur une plaque aux couleurs de la carte (lisibles sur n'importe quelle photo) */
.card.fc .fc-note{position:absolute;z-index:3;left:.7em;top:.7em;display:flex;flex-direction:column;align-items:center;
  min-width:2.9em;padding:.32em .35em .38em;border-radius:.55em;color:var(--fct);
  background:color-mix(in srgb,var(--fc1) 88%,transparent);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.card.fc .fc-note b{font:800 2.25em/.9 Barlow,Inter,sans-serif;letter-spacing:-.02em}
.card.fc .fc-note span{font:800 1.05em/1 Barlow,Inter,sans-serif;margin-top:.12em;letter-spacing:.02em}
.card.fc .fc-note em{font:700 .78em/1 Barlow,Inter,sans-serif;font-style:normal;margin-top:.3em;opacity:.8}
/* le bas : le nom, les chiffres, le drapeau et le club */
.card.fc .hd{order:2;position:relative;z-index:2;height:auto;margin-top:-.95em;padding:0 .55em .1em;text-align:center;color:var(--fct)}
.card.fc .nm{font:800 1.38em/1.02 Barlow,Inter,sans-serif;letter-spacing:0;text-transform:none;-webkit-line-clamp:1;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.fc .hd.t2 .nm{font-size:1.24em}.card.fc .hd.t3 .nm{font-size:1.1em}.card.fc .hd.t4 .nm{font-size:.98em}
.card.fc .fc-stats{order:3;flex:0 0 auto;position:relative;z-index:2;display:flex;justify-content:center;gap:.55em;padding:.25em .4em .15em;margin:0 6%;
  border-top:1px solid color-mix(in srgb,var(--fct) 22%,transparent)}
.card.fc .fc-stats span{display:flex;flex-direction:column;align-items:center;line-height:1}
.card.fc .fc-stats i{font:700 .7em/1.25 Barlow,Inter,sans-serif;font-style:normal;letter-spacing:.02em;opacity:.8}
.card.fc .fc-stats b{font:800 1.12em/1.05 Barlow,Inter,sans-serif}
.card.fc .fc-de{font:600 .85em/1.2 Barlow,Inter,sans-serif;text-align:center;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card.fc .fc-pied{order:4;flex:0 0 auto;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:.45em;padding:.3em .7em 0;
  font:700 .82em/1.1 Barlow,Inter,sans-serif;color:var(--fct);min-height:1.9em}
.card.fc .fc-pied span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:66%}
.card.fc .fc-pied small{font-size:.8em;opacity:.65;text-transform:uppercase}
.card.fc .fc-drap{width:1.7em;height:1.13em;object-fit:cover;border-radius:.12em;box-shadow:0 0 0 1px rgba(0,0,0,.2);flex:0 0 auto}
.card.fc .fc-club{display:grid;place-items:center;width:1.75em;height:1.75em;border-radius:50%;flex:0 0 auto;
  font:800 .7em/1 Barlow,Inter,sans-serif;color:#fff;background:linear-gradient(135deg,#1f3f8f,#c81e2d);box-shadow:0 0 0 1px rgba(255,255,255,.6)}
.card.fc .ft{order:5;flex:0 0 auto;position:relative;z-index:2;padding:.2em 0 .55em;font:800 .58em Barlow,Inter,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fct);opacity:.6;text-align:center}
/* une carte sans photo : son dessin, à la place de la photo */
.card.fc .pic.fc-vide{display:grid;place-items:center;background:rgba(0,0,0,.14)}
.card.fc .pic.fc-vide svg{width:58%;height:auto;stroke:none;opacity:.95}
.card.fc .pic.fc-vide svg[data-silhouette]{width:66%;margin-top:14%;opacity:.5}
.card.fc .pic.fc-vide svg[data-silhouette] *{fill:var(--fct)}

/* ------------------------------------------------ la page « Équipe » : un écran de jeu de foot, en plein écran
   (Mehdy, 19/10/2026 : « très inspiré de la photo, avec le terrain un peu en biais ») */
body.eq-plein{overflow:hidden}
body.eq-plein .top,body.eq-plein .navbas,body.eq-plein .mdock,body.eq-plein #navbas{display:none!important}
body.eq-plein #v-equipe{position:fixed;inset:0;z-index:75;overflow:hidden;animation:none;
  background:radial-gradient(ellipse 70% 55% at 50% 30%,rgba(60,110,200,.16),transparent 70%),linear-gradient(180deg,#0d1424,#070b14 55%,#05080f)}
#equipe{height:100%}
.eq{height:100%;display:grid;gap:12px clamp(12px,1.2vw,20px);padding:12px clamp(12px,1.4vw,26px) 0;
  grid-template-columns:clamp(220px,16vw,290px) minmax(0,1fr) clamp(220px,16vw,290px);
  grid-template-rows:auto minmax(0,1fr) clamp(130px,19vh,210px);grid-template-areas:"haut haut haut" "gauche centre droite" "bas bas bas"}
/* la barre du haut */
.eq-haut{grid-area:haut;display:flex;align-items:center;gap:16px}
.eq-retour{height:40px;padding:0 16px;border-radius:5px;background:rgba(255,255,255,.08);border:1px solid var(--edge2);color:#fff;font:700 16px Barlow,Inter,sans-serif}
.eq-retour:hover{background:rgba(255,255,255,.16)}
.eq-logo{width:36px;height:36px}
.eq-fil{font:800 26px Barlow,Inter,sans-serif;color:#fff;padding-left:16px;border-left:1px solid rgba(255,255,255,.25)}
/* à gauche : le club */
.eq-gauche{grid-area:gauche;margin:0;padding:16px;display:flex;flex-direction:column;gap:8px;min-height:0;overflow:hidden;border-radius:6px}
.eq-club{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.eq-club img{width:48px;height:48px}
.eq-nom{font:800 clamp(18px,1.4vw,24px)/1.1 Barlow,Inter,sans-serif;color:#fff;margin-bottom:4px}
.eq-etoiles{display:flex;gap:2px}
.eq-et{position:relative;width:18px;height:18px;background:rgba(255,255,255,.25);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.9 7.5.7-5.7 5 1.7 7.4L12 18.2 5.5 22l1.7-7.4-5.7-5 7.5-.7z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.9 7.5.7-5.7 5 1.7 7.4L12 18.2 5.5 22l1.7-7.4-5.7-5 7.5-.7z'/%3E%3C/svg%3E") center/contain no-repeat}
.eq-et i{position:absolute;inset:0 auto 0 0;background:#fff}
.eq-chiffre{display:flex;justify-content:space-between;font:600 16px Barlow,Inter,sans-serif;color:var(--mute)}
.eq-chiffre b{color:#fff;font-weight:800}
.eq-barre{height:4px;border-radius:2px;background:rgba(255,255,255,.15);overflow:hidden;margin:0 0 6px}
.eq-barre i{display:block;height:100%;background:var(--accent);border-radius:2px}
.eq-form{display:flex;align-items:center;justify-content:space-between;gap:8px;font:700 12px Barlow,Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.eq-form select{height:36px;padding:0 8px;border-radius:5px;background:var(--glass2);border:1px solid var(--edge2);color:#fff;font:700 16px Barlow,Inter,sans-serif}
.eq-form option{background:#111a2c}
.eq-liste-onze{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:3px;margin-top:6px}
.eq-ligne{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:4px;text-align:left;color:#fff;font:600 14px Barlow,Inter,sans-serif}
.eq-ligne:hover{background:rgba(255,255,255,.06)}
.eq-ligne.choisi{background:rgba(79,140,255,.18);box-shadow:inset 3px 0 0 var(--bleu)}
.eq-lp{min-width:38px;padding:1px 5px;border-radius:3px;background:rgba(255,255,255,.1);font:800 12px Barlow,Inter,sans-serif;text-align:center}
.eq-ld{width:20px;height:13px;object-fit:cover;border-radius:2px}
.eq-ln{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.eq-ln.vide{color:var(--faint);font-style:italic}
.eq-ligne b{font-weight:800}
/* au milieu : le terrain en biais, les cartes debout */
.eq-centre{grid-area:centre;min-width:0;min-height:0;display:grid;place-items:center;container-type:size}
.eq-scene{position:relative;width:min(100cqw,calc(100cqh * 1000 / 640));aspect-ratio:1000/640;container-type:inline-size}
.eq-svg{position:absolute;inset:0;width:100%;height:100%}
.eq-forme{font:900 64px Barlow,Inter,sans-serif;fill:#fff;fill-opacity:.32}
.eq-pion{position:absolute;width:var(--l);transform:translate(-50%,-88%);padding:0;transition:transform .15s}
.eq-pion:hover{transform:translate(-50%,-91%)}
.eq-pion .card{width:100%;font-size:calc(var(--l) / 14);box-shadow:0 14px 18px -10px rgba(0,0,0,.8)}
.eq-pion:not(.pleine){aspect-ratio:2/3;border-radius:6px;border:2px dashed rgba(255,255,255,.5);background:rgba(0,0,0,.25)}
.eq-pion:not(.pleine):hover{border-color:var(--accent);background:rgba(230,57,70,.16)}
.eq-pion.choisi .card{outline:3px solid #fff;outline-offset:2px}
.eq-plus{position:absolute;inset:0;display:grid;place-items:center;font:300 calc(var(--l) / 3) Barlow,Inter,sans-serif;color:rgba(255,255,255,.75)}
.eq-poste{position:absolute;left:50%;top:100%;transform:translate(-50%,35%);padding:.1em .7em;border-radius:999px;
  background:rgba(8,14,28,.9);border:1.5px solid rgba(255,255,255,.35);color:#fff;font:800 calc(var(--l) / 8.5)/1.35 Barlow,Inter,sans-serif;white-space:nowrap}
.eq-poste.bon{border-color:#45d483;color:#c9ffe0}
.eq-poste.hors{border-color:#f0a43a;color:#ffe2b5}
/* à droite : la fiche du joueur choisi */
.eq-droite{grid-area:droite;margin:0;padding:18px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:0;overflow:auto;border-radius:6px;text-align:center}
.eq-fvide{margin:auto 0;color:var(--mute);font-size:14px;line-height:1.5}
.eq-fphoto{width:clamp(96px,8vw,140px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.08);box-shadow:0 0 0 3px rgba(255,255,255,.25)}
.eq-fphoto img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.eq-fnom{font:800 clamp(18px,1.4vw,24px)/1.1 Barlow,Inter,sans-serif;color:#fff}
.eq-fposte{font:600 14px Barlow,Inter,sans-serif;color:var(--accent)}
.eq-fstats{width:100%;display:flex;flex-direction:column;margin-top:4px}
.eq-fl{display:flex;align-items:baseline;gap:10px;padding:5px 2px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left}
.eq-fl b{min-width:58px;font:800 17px Barlow,Inter,sans-serif;color:#fff;text-align:right;white-space:nowrap}
.eq-fl span{font:700 12px Barlow,Inter,sans-serif;letter-spacing:.08em;color:var(--mute)}
.eq-fboutons{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:auto;padding-top:10px}
/* en bas : la bande des remplaçants et de la réserve, comme dans les jeux de foot — de grandes cartes posées au bas de
   l'écran, dont on voit le haut (photo, note, nom) ; au survol, elles se lèvent pour se montrer en entier */
.eq-bas{grid-area:bas;position:relative;min-width:0;align-self:end;display:flex;align-items:flex-start;justify-content:center;gap:clamp(8px,.8vw,14px);
  height:100%;padding:12px 12px 0;margin:0 calc(-1 * clamp(12px,1.4vw,26px));clip-path:inset(-400px 0 0 0);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border-top:1px solid var(--edge)}
.eq-bt{align-self:center;writing-mode:vertical-rl;transform:rotate(180deg);font:800 15px Barlow,Inter,sans-serif;letter-spacing:.25em;
  color:var(--mute);padding:0 6px;border-left:2px solid rgba(255,255,255,.25)}
.eq-bt:not(:first-child){margin-left:clamp(10px,1.4vw,26px)}
.eq-bc{--bw:clamp(88px,6.5vw,150px);position:relative;flex:0 0 var(--bw);width:var(--bw);z-index:1;transition:transform .18s ease}
.eq-bc .card{width:100%;font-size:calc(var(--bw) / 14);box-shadow:0 -6px 18px -8px rgba(0,0,0,.7)}
.eq-bc:not(.pleine){aspect-ratio:2/3;border-radius:6px;border:2px dashed rgba(255,255,255,.35);background:rgba(0,0,0,.2)}
.eq-bc:hover{transform:translateY(-34%);z-index:5}
.eq-bc:hover .card{transform:none}
.eq-bc:not(.pleine):hover{border-color:var(--accent);transform:translateY(-12%)}
.eq-bc .eq-plus{position:absolute;inset:0;font-size:calc(var(--bw) / 3)}
.eq-bc.choisi .card{outline:3px solid #fff;outline-offset:1px}
.eq-charge{padding:30px;text-align:center;color:var(--mute)}
/* sur un petit écran : une page qu'on fait défiler */
@media (max-width:1000px),(max-height:560px){
  body.eq-plein{overflow:auto}
  body.eq-plein #v-equipe{position:static;overflow:visible}
  .eq{height:auto;grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"haut" "centre" "droite" "gauche" "bas"}
  .eq-centre{container-type:inline-size}.eq-scene{width:100%}
  .eq-bas{flex-wrap:wrap;container-type:inline-size}.eq-bc{--bw:calc((100cqw - 9 * 8px) / 8)}
}
/* la fenêtre de choix d'un joueur */
.eq-voile{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px}
.eq-choix{width:min(1040px,100%);max-height:88vh;display:flex;flex-direction:column;margin:0;padding:20px}
.eq-choix-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.eq-choix-tete h2{font:800 26px Barlow,Inter,sans-serif;margin:0;color:#fff}
.eq-filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.eq-filtres input{flex:1 1 200px;height:36px;padding:0 12px;background:var(--glass2);border:1px solid var(--edge2);color:#fff}
.eq-liste{overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px;padding:4px}
.eq-pioche{position:relative;padding:0}
.eq-pioche .card{font-size:9px;cursor:pointer}
.eq-pioche:hover .card{transform:translateY(-3px)}
.eq-pioche.prise .card{opacity:.45}
.eq-deja{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.75);font:700 11px Barlow,Inter,sans-serif;color:#fff;white-space:nowrap}
.eq-plus-liste{grid-column:1/-1}
/* pas d'Halloween de WikiPick */
[data-er="HW"],.k-HW{display:none!important}

/* ------------------------------------------------ le dos des cartes : un terrain vu de dessus (public/index.html,
   #dosCarte) — « un tout autre skin, qui n'a rien à voir » avec celui de WikiPick (Mehdy, 19/10/2026) */
.flipper .back{background:linear-gradient(180deg,#0d2160 0%,#163a9c 50%,#0d2160 100%);
  box-shadow:0 0 var(--glowsize,16px) -2px var(--glow,#4f8cff)}

/* ------------------------------------------------ la page Paquets : une seule colonne, centrée et calme
   (Mehdy, 19/10/2026 : « réagence la page paquet, ça bug de partout ») — le paquet en grand, « À savoir » dessous, les
   deux compteurs côte à côte, puis les trois boutons sur une ligne, tous de la même hauteur */
.stage{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;padding:26px 0 10px}
.stage .pack-zone{padding:18px 6px 22px}
.stage .side{width:100%;max-width:720px;display:flex;flex-direction:column;align-items:center}
.stage .kligne{order:-1;margin-bottom:6px}
.stage .stock{display:grid;grid-template-columns:repeat(2,minmax(0,250px));justify-content:center;gap:14px;margin:12px 0 18px;width:100%}
.stage .stat{min-width:0;padding:14px 16px;border-radius:6px;background:rgba(255,255,255,.05);border:1px solid var(--edge)}
.stage .stat b{display:block;font:800 32px/1.1 Barlow,Inter,sans-serif}
.stage .stat span{font-size:14px;color:var(--mute)}
.stage .acts{display:flex;justify-content:center;width:100%}
.stage .poffers{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:12px;margin:0;width:auto}
.stage .poffers > *{width:auto!important;max-width:none!important;flex:0 0 auto}
.stage .poffers .btn{height:56px}
.stage .fresh{margin-top:16px}
/* ------------------------------------------------ en grand, comme un jeu vidéo de foot
   (Mehdy, 19/10/2026 : « beaucoup plus large, beaucoup plus gros, comme FIFA, beaucoup plus carré ») */
:root{--rayon:6px}
.top{padding:14px clamp(16px,2.6vw,48px) 0}
.bar,.wrap{max-width:1840px}
.wrap{padding:30px clamp(16px,2.6vw,48px) 130px}
.row1{height:88px;gap:16px}
.logo{font-size:32px;padding-right:28px}
.logo img{width:56px;height:56px}
.rubriques{gap:8px;margin-left:10px}
.rubriques button{font-size:23px;padding:10px 16px;border-radius:4px}
.rubriques button.on{box-shadow:inset 0 -3px 0 var(--accent)}
.tabs{padding:2px 0 16px}
.tabs button{font-size:17px;padding:8px 16px;border-radius:4px}
.chip{font-size:18px;height:44px}
.ibtn{width:44px;height:44px;flex-basis:44px}
.ibtn svg,.chip svg{width:21px;height:21px}
.me{height:44px;font-size:16px}
.h1{font-size:clamp(38px,3.6vw,64px)}
.panel{border-radius:var(--rayon)}
.btn{height:54px;padding:0 28px;font-size:18px;border-radius:6px}
.btn.sm{height:42px;font-size:15.5px;border-radius:5px}
.btn.xs{height:34px;font-size:14px;border-radius:4px}
.grid{gap:20px}
.grid .card{font-size:clamp(9px,6.6cqi,19px)}
/* la page Paquets : tout plus grand */
/* la page Équipe : plus de place encore */
@media (max-width:700px){.rubriques{display:none}.row1{height:64px}.logo{font-size:24px}.logo img{width:42px;height:42px}}

/* (les élites et les mythiques n'ont plus d'effet animé : Mehdy, 19/10/2026, « enlève, c'est pas beau ») */
@keyframes fcReflet{0%,55%{transform:translateX(-160%) skewX(-18deg)}85%,100%{transform:translateX(330%) skewX(-18deg)}}
/* l'en-tête tient sur toutes les largeurs : le menu et le logo suivent la largeur de l'écran */
.row1{gap:clamp(6px,.8vw,16px)}
.logo{font-size:clamp(22px,1.7vw,32px);padding-right:clamp(12px,1.3vw,28px)}
.logo img{width:clamp(40px,2.9vw,56px);height:clamp(40px,2.9vw,56px)}
.rubriques{gap:clamp(0px,.4vw,8px);margin-left:clamp(0px,.5vw,10px)}
.rubriques button{font-size:clamp(15px,1.2vw,23px);padding:10px clamp(6px,.75vw,16px)}
@media (max-width:1600px){.logo .beta{display:none}}

/* ------------------------------------------------ le drapeau en haut à droite, sans le club, des chiffres plus gros
   (Mehdy, 19/10/2026) */
.card.fc .fc-drap-haut{position:absolute;z-index:3;top:.8em;right:.75em;width:2.3em;height:1.55em;object-fit:cover;border-radius:.2em;
  box-shadow:0 0 0 1px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.35)}
.card.fc .lock{top:2.75em;right:.55em}
.card.fc .fc-stats{gap:.65em;padding:.35em .3em .2em;margin:0 4%}
.card.fc .fc-stats i{font-size:.82em}
.card.fc .fc-stats b{font-size:1.38em;line-height:1.05}
.card.fc .ft{padding-top:.35em}

/* ------------------------------------------------ « Mon équipe » : glisser, survol, club favori (Mehdy, 19/10/2026) */
.eq-bc .card,.eq-pion .card{transition:transform .16s ease,box-shadow .16s ease}
[draggable="true"]{cursor:grab}
.eq-tire{opacity:.45}
.eq-dessus .card,.eq-dessus.eq-pion:not(.pleine),.eq-dessus.eq-bc:not(.pleine){outline:3px solid var(--accent);outline-offset:2px}
.eq-dessus:not(.pleine){background:rgba(230,57,70,.2)!important}
.eq-club .eq-emb{width:52px;height:52px;object-fit:contain;flex:0 0 auto}
.eq-club .eq-emb.rond{border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.3)}
.eq-clubnom{font:600 13px Barlow,Inter,sans-serif;color:var(--accent);margin:-2px 0 3px}
/* le bloc du club favori, dans le profil */
.cfav{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,420px);gap:14px 24px;align-items:center;margin:16px 0}
.cfav-l{display:flex;align-items:center;gap:14px}
.cfav-l img,.cfav-vide{width:58px;height:58px;object-fit:contain;flex:0 0 auto}
.cfav-vide{display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.08);font:800 22px Barlow,Inter,sans-serif;color:var(--mute)}
.cfav-l h4{margin:0 0 2px}
.cfav-l b{display:block;font:800 20px Barlow,Inter,sans-serif;color:#fff}
.cfav-l small{color:var(--mute);font-size:13px}
.cfav-r{display:flex;gap:8px}
.cfav-r input{flex:1;height:42px;padding:0 12px;background:var(--glass2);border:1px solid var(--edge2);color:#fff}
.cfav-liste{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.cfav-liste:empty{display:none}
.cfav-choix{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;background:rgba(255,255,255,.05);border:1px solid var(--edge);text-align:left;color:#fff}
.cfav-choix:hover{border-color:var(--accent);background:rgba(230,57,70,.12)}
.cfav-choix img,.cfav-choix .cfav-vide{width:38px;height:38px;object-fit:contain}
.cfav-choix span{font:700 15px Barlow,Inter,sans-serif;line-height:1.2}
.cfav-choix small{display:block;font-weight:600;font-size:12px;color:var(--mute)}
.cfav-rien{grid-column:1/-1;color:var(--mute);padding:6px}
@media (max-width:760px){.cfav{grid-template-columns:1fr}}

/* ------------------------------------------------ le menu dans une grande colonne à gauche (Mehdy, 19/10/2026)
   Le logo et les rubriques y sont ; les pages de la rubrique ouverte se rangent juste dessous ; en haut à droite ne
   restent que la boutique, la cloche, les Wikiki et le joueur. */
:root{--cote:clamp(230px,15vw,290px)}
body.avec-cote{padding-left:var(--cote)}
.cote{position:fixed;left:0;top:0;bottom:0;width:var(--cote);z-index:70;display:flex;flex-direction:column;gap:22px;
  padding:24px 14px 20px;overflow-y:auto;scrollbar-width:none;
  background:linear-gradient(180deg,rgba(14,22,40,.97),rgba(8,12,22,.97));border-right:1px solid var(--edge);
  box-shadow:12px 0 40px -24px rgba(0,0,0,.8)}
.cote::-webkit-scrollbar{display:none}
.cote .logo{border-right:0;padding:0 10px 4px;margin:0;font-size:clamp(24px,1.7vw,30px)}
.cote .logo img{width:clamp(42px,2.8vw,52px);height:clamp(42px,2.8vw,52px)}
.cote .logo .beta{display:none}
.cote .rubriques{display:flex;flex-direction:column;align-items:stretch;gap:3px;margin:0}
.cote .rubriques > button{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:13px 14px;border-radius:6px;
  font:700 clamp(17px,1.15vw,21px) Barlow,Inter,sans-serif;color:rgba(255,255,255,.66)}
.cote .rubriques > button svg{width:22px;height:22px;flex:0 0 auto;opacity:.85}
.cote .rubriques > button:hover{color:#fff;background:rgba(255,255,255,.05)}
.cote .rubriques > button.on{color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 3px 0 0 var(--accent)}
/* les pages de la rubrique ouverte, sous elle */
.cote .tabs{display:flex;flex-direction:column;gap:1px;padding:4px 0 8px 50px;margin:0;overflow:visible;border:0}
.cote .tabs button{width:100%;text-align:left;padding:8px 10px;border-radius:5px;font:600 16px Barlow,Inter,sans-serif}
.cote .tabs button.on{background:rgba(255,255,255,.06)}
.cote .tabs button.on::before{left:0;right:auto;top:8px;bottom:8px;width:2px;height:auto}
.cote .tabs:not(:has(button:not([hidden]))){display:none}
/* l'en-tête du haut : une barre fine, à droite */
body.avec-cote .top{padding-top:10px}
body.avec-cote .row1{height:64px;justify-content:flex-end}
body.avec-cote .bar,body.avec-cote .wrap{max-width:none}
/* les écrans en plein écran (Équipe, Season Pass) passent par-dessus la colonne */
body.eq-plein .cote,body.sp-plein .cote{display:none}
body.eq-plein.avec-cote,body.sp-plein.avec-cote{padding-left:0}
/* sur téléphone : pas de colonne (la barre du bas et le tiroir s'en chargent) */
@media (max-width:900px){
  body.avec-cote{padding-left:0}
  .cote{display:none}
}
body.avec-cote .mdock{left:calc(var(--cote) + 14px)!important}
@media (max-width:900px){body.avec-cote .mdock{left:auto!important}}

.eq-pion,.eq-bc,.eq-case{position:relative}
.eq-pion{position:absolute}

/* ------------------------------------------------ un paquet plus brillant (Mehdy, 19/10/2026) : reflet holographique plus
   marqué, deux traits de lumière en biais, un éclat qui le traverse toutes les quelques secondes, un halo autour */
.booster{filter:drop-shadow(0 26px 26px rgba(0,0,0,.6)) drop-shadow(0 0 46px rgba(120,140,255,.42))}
.bart .foil{opacity:.95;mix-blend-mode:overlay;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.2) 0 2px,transparent 2px 7px),
    conic-gradient(from 210deg at 50% 45%,rgba(255,255,255,.55),rgba(120,220,255,.4),rgba(255,170,230,.45),rgba(255,240,160,.4),rgba(255,255,255,.55))}
.bart .lines::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,transparent 0 24%,rgba(255,255,255,.34) 25%,rgba(255,255,255,.05) 31%,transparent 32% 58%,
    rgba(255,255,255,.22) 59%,transparent 63%),radial-gradient(70% 45% at 30% 14%,rgba(255,255,255,.35),transparent 60%)}
.bart .lines{position:absolute}
.bart .glare{inset:-10% auto -10% -70%!important;width:46%;opacity:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55) 50%,transparent);transform:skewX(-14deg);
  animation:paquetEclat 4.5s ease-in-out infinite}
@keyframes paquetEclat{0%,62%{left:-70%}100%{left:135%}}
.crimp,.booster.pro .crimp,.booster.evt .crimp{background:repeating-linear-gradient(90deg,#fff 0 1.4px,rgba(120,128,138,.5) 1.4px 3.2px),
  linear-gradient(180deg,#ffffff,#c9d0d8 55%,#eef2f6)}
@media (prefers-reduced-motion:reduce){.bart .glare{animation:none}}

/* ------------------------------------------------ les logos : entiers, centrés, posés directement sur la carte (leur fond
   uni est retiré : wikifoot.js, fondUniRetire), avec une légère ombre pour qu'ils se détachent */
.card.fc .pic.fc-logo{-webkit-mask:none;mask:none;background:none}
.card.fc .pic.fc-logo img{position:absolute;z-index:1;left:15%;right:15%;top:22%;bottom:16%;width:70%;height:62%;
  object-fit:contain!important;object-position:50% 50%!important;padding:0!important;transform:none!important;animation:none!important;
  filter:drop-shadow(0 .3em .5em rgba(0,0,0,.35))}

/* ------------------------------------------------ des cartes « papier », comme les vignettes Panini (Mehdy, 19/10/2026 :
   « ce côté un peu papier, plus carré sur les côtés ; là elles ressemblent trop à WikiPick ») : une marge de papier blanc
   cassé tout autour, des coins presque droits, un grain de papier et une fine trame d'impression, mat ; une ombre courte,
   comme un autocollant posé à plat. Les couleurs du rang sont imprimées sur ce papier. */
:root{--papier:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .22  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E")}
.card.fc,.card.fc.r-C,.card.fc.r-PC,.card.fc.r-R,.card.fc.r-SR,.card.fc.r-UR,.card.fc.r-L,.card.fc.r-M{
  border:.5em solid transparent!important;border-radius:.22em!important;
  background:var(--papier) 0 0/9em 9em border-box,
    radial-gradient(circle,rgba(0,0,0,.09) .5px,transparent .9px) 0 0/.38em .38em padding-box,
    linear-gradient(160deg,var(--fc1) 0%,var(--fc2) 55%,var(--fc3) 100%) padding-box,
    linear-gradient(180deg,#fbf8f1,#ece6d7) border-box!important;
  box-shadow:0 .2em .45em rgba(0,0,0,.5),0 0 0 1px rgba(60,50,30,.25)!important}
/* l'élite et la mythique gardent un liseré de couleur juste à l'intérieur du papier */
.card.fc.r-UR{box-shadow:0 .2em .45em rgba(0,0,0,.5),0 0 0 1px rgba(60,50,30,.25),inset 0 0 0 .14em rgba(60,220,160,.75)!important}
.card.fc.r-L{box-shadow:0 .2em .45em rgba(0,0,0,.5),0 0 0 1px rgba(60,50,30,.25),inset 0 0 0 .14em rgba(242,216,140,.9)!important}
.card.fc.r-M{box-shadow:0 .2em .45em rgba(0,0,0,.5),0 0 0 1px rgba(60,50,30,.25),inset 0 0 0 .14em rgba(212,175,55,.95)!important}
.card.fc.r-L::before{border-radius:0}
/* l'intérieur : des angles droits, imprimés */
.card.fc .picw{padding:.3em .3em 0}
.card.fc .pic{border-radius:0}
.card.fc .fc-note{border-radius:.12em;padding:.28em .32em .32em;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.card.fc .fc-drap-haut{border-radius:0;top:.7em;right:.65em}
.card.fc .lock{border-radius:.15em}
/* (la marge de papier prend de la place : la ligne de chiffres se resserre pour tenir sans rien couper) */
.card.fc .fc-stats{gap:.42em;margin:0 1%;padding:.3em 0 .15em}
.card.fc .fc-stats b{font-size:1.24em}
.card.fc .fc-stats i{font-size:.74em}
/* la Légende : un or ancien, profond, au texte crème (Mehdy, 19/10/2026 : « le côté or des légendes est beaucoup trop clair ») —
   bien distinct de l'Or, clair au texte foncé */
.card.fc.r-M{--fc1:#e0b84e;--fc2:#a8771b;--fc3:#5c3d07;--fct:#fff3d1;--fcr:rgba(255,226,150,.3)}
.card.fc.r-M .fc-note{background:color-mix(in srgb,#3a2604 78%,transparent)}
.card.fc.r-M .pic.fc-vide svg[data-silhouette] *{fill:#fff3d1}

/* ------------------------------------------------ les cartes chromatiques : « prisme chromé » (Mehdy, 19/10/2026 : « un skin
   complètement différent, beaucoup plus stylé, beaucoup plus brillant, même brillant sur la photo »). Une carte noire
   dans un cadre de chrome argenté ; une couche holographique arc-en-ciel passe sur TOUTE la carte, photo comprise, et
   ondule ; un éclat de lumière la traverse ; des étincelles scintillent ; le nom en lettres de métal irisé. Le
   sélecteur [class] passe devant les règles « papier ». */
.card.fc.sh[class]{--fct:#fff;color:#fff;border:.5em solid transparent!important;border-radius:.3em!important;
  background:radial-gradient(120% 80% at 50% 0%,rgba(120,160,255,.22),transparent 60%) padding-box,
    linear-gradient(165deg,#161a24 0%,#07090e 60%,#121622 100%) padding-box,
    conic-gradient(from 210deg at 50% 50%,#ffffff,#8f9aa8,#f4f7fb,#6f7a88,#dfe5ec,#9aa5b2,#ffffff,#7d8896,#ffffff) border-box!important;
  box-shadow:0 .3em .8em rgba(0,0,0,.6),0 0 1.4em -.2em rgba(150,190,255,.55),inset 0 0 0 1px rgba(255,255,255,.5)!important;animation:none}
/* Mehdy (20/10/2026) : « évite les reflets qui passent devant la carte, fais juste quelque chose qui brille, comme des
   paillettes ». Plus rien ne traverse la carte : un léger voile irisé IMMOBILE, et trois semis de paillettes (blanches,
   dorées, bleutées, rosées) qui scintillent chacune à leur rythme — 2,3 s, 3,1 s et 3,9 s : jamais ensemble, ce qui
   donne un pétillement irrégulier, comme une vraie carte pailletée qu'on tient sous la lumière. */
.card.fc.sh .mtl{display:block!important;position:absolute;inset:0;z-index:8;pointer-events:none;mix-blend-mode:soft-light;opacity:.55;
  background:linear-gradient(125deg,rgba(255,120,200,.5),rgba(255,230,140,.45) 30%,rgba(130,255,210,.45) 55%,rgba(120,180,255,.5) 80%,rgba(220,150,255,.5))}
.card.fc.sh .foil,.card.fc.sh .rb,.card.fc.sh .rb2{display:block!important;position:absolute;inset:0;z-index:9;pointer-events:none;
  border-radius:0;mix-blend-mode:screen;opacity:.2}
.card.fc.sh .foil{animation:paillettes 2.3s ease-in-out infinite!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='1' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 14 0 0 0 -10.8'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E") 0 0/250px 250px}
.card.fc.sh .rb{animation:paillettes 3.1s ease-in-out -1.1s infinite!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='1' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.86 0 0 0 0 0.5 14 0 0 0 -10.0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E") 0 0/310px 310px}
.card.fc.sh .rb2{animation:paillettes 3.9s ease-in-out -2.4s infinite!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='1' seed='13' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.9 0 0 0 0 1 14 0 0 0 -10.0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E") 0 0/270px 270px}
@keyframes paillettes{0%,100%{opacity:.15}50%{opacity:1}}
/* les étincelles en étoile, qui éclosent çà et là (celles de WikiPick) */
.card.fc.sh .glints{z-index:9;display:block!important}
/* la photo, nette et brillante ; le bas sur fond sombre */
.card.fc.sh .pic{-webkit-mask:linear-gradient(180deg,#000 70%,transparent);mask:linear-gradient(180deg,#000 70%,transparent)}
.card.fc.sh .pic img{filter:saturate(1.15) contrast(1.06)}
.card.fc.sh .hd{position:relative;z-index:10;margin-top:-1em;padding:.1em .5em .1em}
.card.fc.sh .nm{background:linear-gradient(100deg,#ffffff 0%,#bfe8ff 25%,#ffd1f4 45%,#fff3b8 65%,#c8ffe9 85%,#ffffff 100%) 0 0/200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))}
.card.fc.sh .fc-stats{position:relative;z-index:10;color:#fff;border-top:1px solid rgba(255,255,255,.25)}
.card.fc.sh .fc-stats i{color:#bcd3ff}
.card.fc.sh .ft{position:relative;z-index:10;color:#fff;opacity:1;letter-spacing:.24em;
  background:linear-gradient(90deg,#9fe8ff,#ffc4ef,#fff1a8,#a8ffd9,#9fe8ff) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.card.fc.sh .fc-note{z-index:10;background:linear-gradient(160deg,#ffffff,#cdd5df 60%,#ffffff);color:#0b1220;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.card.fc.sh .fc-drap-haut,.card.fc.sh .lock{z-index:10}
.card.fc.sh .rb3{display:none!important}
.card.fc.sh::after{display:none!important}
@media (prefers-reduced-motion:reduce){.card.fc.sh .foil,.card.fc.sh .rb,.card.fc.sh .rb2{animation:none!important;opacity:.6}}

/* ------------------------------------------------ « Mon équipe », optionnelle et plus jolie (Mehdy, 19/10/2026) : plus de
   colonne de gauche (note, collectif) ; le terrain, la fiche à droite, le banc ; les places libres sont des maillots fantômes */
.eq{grid-template-columns:minmax(0,1fr) clamp(220px,16vw,290px)!important;grid-template-areas:"haut haut" "centre droite" "bas bas"!important}
.eq-gauche{display:none}
.eq-haut{gap:14px}
.eq-haut .eq-emb{width:40px;height:40px;object-fit:contain}
.eq-haut .eq-emb.rond{border-radius:50%;object-fit:cover}
.eq-fil small{display:block;font:600 13px Barlow,Inter,sans-serif;color:var(--accent);margin-top:2px}
.eq-haut .eq-form{margin-left:auto}
.eq-form-lu{margin-left:auto;font:800 22px Barlow,Inter,sans-serif;color:#fff;opacity:.85}
.eq-pion:not(.pleine),.eq-bc:not(.pleine){border:0!important;background:none!important;aspect-ratio:2/3}
.eq-maillot{position:absolute;left:12%;right:12%;top:14%;width:76%;height:auto;fill:rgba(255,255,255,.16);
  filter:drop-shadow(0 .3em .5em rgba(0,0,0,.35));transition:fill .15s}
.eq-pion:not(.pleine):hover .eq-maillot,.eq-bc:not(.pleine):hover .eq-maillot{fill:rgba(255,255,255,.32)}
.eq-pion:not(.pleine) .eq-plus,.eq-bc:not(.pleine) .eq-plus{color:rgba(255,255,255,.85);text-shadow:0 1px 4px rgba(0,0,0,.5)}
.eq.lecture .eq-pion:not(.pleine){pointer-events:none;opacity:.6}
.eq-pion:not(.pleine):hover,.eq-bc:not(.pleine):hover{transform:translate(-50%,-88%)}
.eq-bc:not(.pleine):hover{transform:translateY(-6%)}
.eq-pion .card{box-shadow:0 1.2em 1.4em -.8em rgba(0,0,0,.85)}
@media (max-width:1000px),(max-height:560px){.eq{grid-template-columns:1fr!important;grid-template-areas:"haut" "centre" "droite" "bas"!important}}

/* ------------------------------------------------ le menu du 19/10 au soir : le lien vers WikiPick en bas de la colonne,
   plus de bouton « message du support » en haut, le bouton « Mon équipe » du profil */
.cote-frere{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 12px;border-radius:6px;text-decoration:none;
  color:var(--mute);font:600 13px/1.25 Barlow,Inter,sans-serif;border:1px solid var(--edge);background:rgba(255,255,255,.03)}
.cote-frere:hover{color:#fff;border-color:var(--edge2);background:rgba(255,255,255,.06)}
.cote-frere img{width:30px;height:30px}
.cote-frere b{display:block;font:800 16px Barlow,Inter,sans-serif;color:#fff}
#excusesBtn{display:none!important}
.pf-equipe{display:inline-flex;align-items:center;gap:10px;margin:12px 0 0;height:50px;padding:0 22px;font-size:17px}
.pf-equipe svg{width:22px;height:22px}

/* le Season Pass n'est pas encore là : grisé, « Bientôt », sans compte à rebours (Mehdy, 19/10/2026) */
#tabs button[data-v="saison"]{opacity:.42;pointer-events:none;cursor:default}
#tabs button[data-v="saison"]::after{content:"Bientôt"!important;display:inline-block!important;position:static!important;margin-left:8px;
  padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.1);font:700 11px Barlow,Inter,sans-serif;color:var(--mute);
  inset:auto!important;width:auto!important;height:auto!important;animation:none!important}
#spRebours,#spBande,#spBandeau,.sprebours,.sprebande{display:none!important}

/* ------------------------------------------------ l'ouverture du paquet, à la WikiFoot (Mehdy, 19/10/2026 : « une animation
   différente de WikiPick, où l'on voit vraiment la déchirure ») : en attendant, le paquet respire (il ne remue plus) ; puis
   un trait de lumière court le long de la ligne de déchirure, le haut du sachet se décolle depuis la gauche et s'envole,
   la lumière sort, et le paquet glisse vers le bas pendant que les cartes arrivent */
.booster.wait{animation:paquetRespire 1.3s ease-in-out infinite}
@keyframes paquetRespire{0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 26px 26px rgba(0,0,0,.6)) brightness(1)}
  50%{transform:translateY(-7px) scale(1.025);filter:drop-shadow(0 32px 30px rgba(0,0,0,.6)) brightness(1.14)}}
.booster.torn .tearline{border-top:0;height:3px;margin-top:-1px;
  background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.95) 50%,transparent 100%) -40% 0/40% 100% no-repeat;
  box-shadow:0 0 12px rgba(255,255,255,.8);animation:dechire .4s linear forwards}
@keyframes dechire{to{background-position:140% 0}}
.booster.torn .bpart.top{transform-origin:0% 19%;animation:pele .95s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes pele{0%{transform:none}38%{transform:rotate(-4deg) translateY(-2px)}58%{transform:rotate(-13deg) translate(5px,-12px)}
  100%{transform:rotate(-40deg) translate(-30px,-180px);opacity:0}}
.booster.torn .beam{animation:beam .9s .34s ease-out forwards}
.booster.torn .bpart.main{animation:glisse .5s .62s cubic-bezier(.5,0,.75,0) forwards}
@keyframes glisse{to{transform:translateY(130px) scale(.92);opacity:0}}
@media (prefers-reduced-motion:reduce){.booster.wait,.booster.torn .tearline{animation:none}}
/* des cartes moins grosses dans les listes (collection, toutes les cartes…) : Mehdy, 19/10/2026 « elles sont vraiment grosses » */
.grid{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))!important;gap:16px}
.grid .card{font-size:clamp(8px,6.6cqi,13.5px)}
/* les couleurs des rangs (pastilles, compteurs, filtres), posées au plus haut pour passer devant celles de WikiPick */
:root,body{--r-C:#c08a5a!important;--r-PC:#c8d0d7!important;--r-R:#e9c862!important;--r-SR:#f0b429!important;--r-UR:#3fd69b!important;
  --r-L:#f2d88c!important;--r-M:#f2d88c!important}
.kbadge[style*="--r-L"],.kbadge[style*="--r-M"]{background:#141418!important;color:#f2d88c!important;box-shadow:inset 0 0 0 1px #f2d88c}

/* les chromatiques (20/10/2026) : ce qui bougeait encore, hérité de WikiPick — la bande irisée qui traversait la photo,
   la photo qui flottait, la lame de métal — est arrêté ; seules les paillettes scintillent */
.card.fc.sh .pic::before{display:none!important}
.card.fc.sh .pic:not(.logo):not(.none):not(.fit) img{animation:none!important}
.card.fc.sh .mtl{top:0;bottom:0;left:0;right:0;width:auto;animation:none!important;transform:none!important;will-change:auto}
.card.fc.sh .foil,.card.fc.sh .rb,.card.fc.sh .rb2{transform:none!important;will-change:opacity}
/* l'inscription « Chromatique · Mythique » du bas : en clair (le fond des cartes du foot l'avait rendue invisible) */
.card.fc.sh .ft{-webkit-text-fill-color:currentColor!important;color:#dbe7ff!important;text-shadow:0 0 .6em rgba(160,200,255,.6)}

/* ------------------------------------------------ la page Fil (Mehdy, 20/10/2026 : « fais une refonte de la page fil ») */
.fil-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.fil-tete .h1{margin-bottom:4px!important}
.fil-sous{margin:0;color:var(--mute);font-size:15px}
.fil-onglets{display:inline-flex;padding:4px;gap:4px;background:rgba(255,255,255,.04);border:1px solid var(--edge);border-radius:8px}
.fil-onglets button{height:40px;padding:0 20px;border-radius:5px;color:var(--mute);font:700 14px Barlow,Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.fil-onglets button:hover{color:#fff}
.fil-onglets button.on{background:linear-gradient(180deg,#e63946,#b82230);color:#fff;box-shadow:0 4px 14px -4px rgba(230,57,70,.6)}
.fil-grille{grid-template-columns:minmax(0,1fr) 320px!important;gap:24px}
.fil-cote{position:sticky;top:24px;display:flex;flex-direction:column;gap:14px}
@media (max-width:1100px){.fil-grille{grid-template-columns:minmax(0,1fr)!important}.fil-cote{position:static}}
/* une publication : la vitrine de la carte à gauche, le reste à droite */
.post.fil-post{display:grid;grid-template-columns:250px minmax(0,1fr);padding:0;margin-bottom:16px;overflow:hidden;border-radius:8px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));border:1px solid var(--edge);--fr:var(--r-PC)}
.post.fil-post.r-C{--fr:var(--r-C)}.post.fil-post.r-PC{--fr:var(--r-PC)}.post.fil-post.r-R{--fr:var(--r-R)}
.post.fil-post.r-SR{--fr:var(--r-SR)}.post.fil-post.r-UR{--fr:var(--r-UR)}.post.fil-post.r-L,.post.fil-post.r-M{--fr:var(--r-L)}
.post.fil-post.sh{--fr:#9fd8ff}
.fil-vitrine{position:relative;display:flex;align-items:center;justify-content:center;padding:34px 30px 26px;
  background:radial-gradient(90% 60% at 50% 0%,color-mix(in srgb,var(--fr) 34%,transparent),transparent 70%),
    radial-gradient(70% 40% at 50% 100%,color-mix(in srgb,var(--fr) 16%,transparent),transparent 70%),#0a0e16;
  border-right:1px solid var(--edge);box-shadow:inset 3px 0 0 var(--fr)}
.fil-tag{position:absolute;top:10px;left:12px;padding:3px 8px;border-radius:3px;background:rgba(0,0,0,.45);color:var(--fr);
  font:800 11px Barlow,Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;border:1px solid color-mix(in srgb,var(--fr) 45%,transparent)}
.fil-post .pcard{width:178px;flex:none;transition:transform .2s}
.fil-post .pcard:hover{transform:translateY(-4px) scale(1.02)}
.fil-post .pcard:hover .card{transform:none}
.fil-corps{display:flex;flex-direction:column;min-width:0;padding:18px 22px 14px}
.fil-post .phd{margin-bottom:12px}
.fil-post .phd .who{font-size:14px;color:var(--mute)}
.fil-post .phd .who b{color:#fff;font-family:Barlow,Inter,sans-serif;font-size:15.5px}
.fil-post .ptext{margin:0 0 12px;padding:8px 12px;border-left:3px solid var(--accent);background:rgba(255,255,255,.03);border-radius:0 4px 4px 0;color:#e8eefc}
.fil-post .pinfo{max-width:none}
.fil-post .pinfo .pill{margin-bottom:6px}
.fil-chroma{background:linear-gradient(90deg,#bfe8ff,#ffd1f4,#fff3b8,#c8ffe9)!important;color:#0b1220!important}
.fil-nom{display:block;font:800 30px/1.05 Barlow,Inter,sans-serif!important;letter-spacing:.01em;text-transform:uppercase;color:#fff;margin:2px 0 4px!important}
.fil-desc{display:block;color:var(--mute);font-size:14px;margin-bottom:12px}
.fil-pastilles{display:flex;flex-wrap:wrap;gap:6px}
.fil-p{display:inline-flex!important;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:4px;background:rgba(255,255,255,.05);
  border:1px solid var(--edge);color:#cfd8ea!important;font-size:13px!important}
.fil-p b{color:#fff}
.fil-p .fc-drap{width:20px;height:14px;object-fit:cover;border-radius:2px}
.fil-note{background:color-mix(in srgb,var(--fr) 18%,transparent);border-color:color-mix(in srgb,var(--fr) 45%,transparent);font-weight:700}
.fil-note b{font:800 16px Barlow,Inter,sans-serif}
.fil-lu{color:var(--faint)!important}
.fil-post .pfoot{margin-top:auto;padding-top:12px;border-top:1px solid var(--edge)}
.fil-post .pfoot .pact{border-radius:5px;height:36px;padding:0 14px}
.fil-post .pact.on{color:#fff;background:rgba(230,57,70,.18);border-color:rgba(230,57,70,.6)}
.fil-post .pact.on svg{color:#ff5a67}
.fil-post .cms{margin-top:4px}
.fil-post .cm{max-width:none}
.fil-post .cform{max-width:none}
.fil-post.highlight{box-shadow:0 0 0 2px var(--fr),0 0 30px -6px var(--fr)}
@media (max-width:700px){
  .post.fil-post{grid-template-columns:1fr}
  .fil-vitrine{border-right:0;border-bottom:1px solid var(--edge);box-shadow:inset 0 3px 0 var(--fr);padding:30px 20px 18px}
  .fil-nom{font-size:24px!important}
}
/* la colonne de droite */
.fil-bloc{padding:16px 18px}
.fil-bloc h4{margin:0 0 10px;font:800 13px Barlow,Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.fil-bloc p{margin:0 0 12px;color:var(--mute);font-size:13.5px;line-height:1.5}
.fil-top{display:flex;align-items:center;gap:10px;width:100%;padding:8px 6px;border-radius:5px;text-align:left}
.fil-top:hover{background:rgba(255,255,255,.05)}
.fil-top + .fil-top{border-top:1px solid rgba(255,255,255,.05)}
.fil-rang{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:4px;background:rgba(230,57,70,.16);color:#ff8a94;font:800 13px Barlow,Inter,sans-serif}
.fil-top-nom{flex:1;min-width:0}
.fil-top-nom b{display:block;color:#fff;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fil-top-nom small{color:var(--faint);font-size:12px}
.fil-top-j{display:inline-flex;align-items:center;gap:4px;color:var(--mute);font-size:12.5px}
.fil-top-j svg{width:13px;height:13px;color:#ff5a67}

/* les chromatiques, second passage (Mehdy, 20/10/2026 : « enlève les étoiles qui brillent, mets moins de paillettes,
   rajoute quand même un petit effet chromatique, et il faut que la photo bouge un petit peu ») :
   - plus d'étoiles ; un seul semis de paillettes sur trois, plus clairsemé ;
   - le voile irisé change lentement de teinte SUR PLACE (rien ne traverse la carte) ;
   - la photo respire : un lent va-et-vient, sans déformation. */
.card.fc.sh .glints{display:none!important}
.card.fc.sh .rb,.card.fc.sh .rb2{display:none!important}
.card.fc.sh .foil{opacity:.2}
.card.fc.sh .mtl{opacity:.7;animation:chromaTeinte 9s linear infinite!important}
@keyframes chromaTeinte{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}
.card.fc.sh .pic:not(.logo):not(.none):not(.fit) img{animation:chromaPhoto 12s ease-in-out infinite!important}
@keyframes chromaPhoto{
  0%,100%{transform:scale(1.06) translate(0,0)}
  33%{transform:scale(1.09) translate(-1.4%,-.8%)}
  66%{transform:scale(1.07) translate(1.2%,.6%)}}
@media (prefers-reduced-motion:reduce){.card.fc.sh .mtl,.card.fc.sh .pic img{animation:none!important}}
/* le voile irisé, un peu plus présent (sans rien qui traverse la carte : il change de teinte sur place) */
.card.fc.sh .mtl{mix-blend-mode:color-dodge;opacity:.24;
  background:linear-gradient(125deg,#ff5fb8 0%,#ffd36b 22%,#6bffc9 45%,#6bbcff 68%,#c78bff 88%,#ff5fb8 100%)!important}

/* ------------------------------------------------ Mon équipe : le glisser-déposer qui pend à la souris (20/10/2026) */
.eq-pion.pleine,.eq-bc.pleine{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
body.eq-glisse,body.eq-glisse *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}
.eq-fantome{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;will-change:transform}
.eq-fantome-in{will-change:transform;filter:drop-shadow(0 22px 22px rgba(0,0,0,.55)) drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.eq-fantome .card{margin:0}
.eq-fantome.pose{transition:transform .17s cubic-bezier(.2,.8,.3,1)}
.eq-fantome-in.pose{transition:transform .17s cubic-bezier(.2,.8,.3,1),filter .17s}
.eq-tire{opacity:.28!important;transition:opacity .12s}
.eq-dessus .card,.eq-dessus.eq-pion:not(.pleine),.eq-dessus.eq-bc:not(.pleine){outline:3px solid #fff!important;outline-offset:3px;
  box-shadow:0 0 0 7px rgba(230,57,70,.45),0 0 26px rgba(230,57,70,.6)!important}
.eq-dessus .card{transform:scale(1.05)}
.eq-posee .card{animation:eqPosee .32s cubic-bezier(.2,.9,.3,1.3)}
@keyframes eqPosee{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.fil-post .phd .who{text-align:left}
.fil-post .phd .who > .link{display:block;text-align:left;margin-bottom:1px}
@media (max-width:700px){.fil-post .pcard{width:150px}.fil-corps{padding:14px 14px 10px}.fil-tete{margin-bottom:16px}}

/* ------------------------------------------------ l'album (Mehdy, 20/10/2026 : « une page album inspirée des photos », un
   album Panini). Une double page : le grand titre en italique, l'emblème et le nom de l'équipe en haut à gauche, 9
   vignettes à gauche, 12 à droite, le pli au milieu ; chaque page a ses couleurs. */
.alb{max-width:1500px;margin:0 auto}
.alb-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.alb-nom small{display:block;color:var(--mute);font:700 12px Barlow,Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.alb-nom h1{margin:2px 0 0;font:italic 900 clamp(30px,3.4vw,46px)/1 Barlow,Inter,sans-serif;text-transform:uppercase;color:#fff}
.alb-nom h1 button{font:inherit;color:inherit;text-transform:inherit;display:inline-flex;align-items:center;gap:12px}
.alb-nom h1 button span{font-size:.45em;color:var(--faint);font-style:normal}
.alb-nom h1 button:hover span{color:#fff}
.alb-onglets{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:70%}
.alb-onglet{height:34px;padding:0 14px;border-radius:5px;border:1px solid var(--edge);background:rgba(255,255,255,.04);color:var(--mute);
  font:700 13px Barlow,Inter,sans-serif;letter-spacing:.04em;text-transform:uppercase;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  box-shadow:inset 3px 0 0 var(--c,#c8102e)}
.alb-onglet:hover{color:#fff;border-color:var(--edge2)}
.alb-onglet.on{color:#fff;background:linear-gradient(180deg,var(--c,#c8102e),color-mix(in srgb,var(--c,#c8102e) 70%,#000));border-color:transparent;box-shadow:0 4px 14px -6px var(--c,#c8102e)}
.alb-neuve{box-shadow:none;color:#fff;background:rgba(230,57,70,.14);border-color:rgba(230,57,70,.5)}
.alb-scene{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:10px}
.alb-fleche{height:96px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid var(--edge);color:#fff;font:300 46px/1 Barlow,sans-serif}
.alb-fleche:hover:not(:disabled){background:rgba(255,255,255,.1)}
.alb-fleche:disabled{opacity:.2;cursor:default}
/* les couleurs d'une page : --a (la page de gauche), --b (les bandes), --c (la page de droite) */
.c-psg{--a:#0d1c4d;--b:#e30613;--c:#c8102e}
.c-rouge{--a:#7d0c16;--b:#ffffff;--c:#c8102e}
.c-ciel{--a:#0d355f;--b:#ffffff;--c:#4aa8dc}
.c-vert{--a:#0a3f24;--b:#ffffff;--c:#14833f}
.c-jaune{--a:#141414;--b:#f7d117;--c:#d9ad00}
.c-noir{--a:#0e0e0e;--b:#ffffff;--c:#2b2b2b}
.c-violet{--a:#24093f;--b:#ffffff;--c:#5b2aa0}
.c-orange{--a:#181818;--b:#ff7a00;--c:#e86a00}
.c-bordeaux{--a:#11204a;--b:#a3264f;--c:#7a1f3d}
.c-or{--a:#0b0b0b;--b:#d4af37;--c:#1c1a14}
.alb-livre{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);grid-template-rows:auto 1fr;
  grid-template-areas:"titre titre titre" "g pli d";padding:18px 26px 22px;border-radius:6px;overflow:hidden;color:#fff;
  background:radial-gradient(120% 70% at 30% 0%,rgba(255,255,255,.12),transparent 55%),
    repeating-linear-gradient(112deg,rgba(255,255,255,.035) 0 2px,transparent 2px 10px),
    linear-gradient(112deg,var(--a) 0 43%,var(--b) 43% 45.5%,var(--a) 45.5% 47%,var(--b) 47% 48%,var(--c) 48% 100%);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.18)}
/* le papier glacé : un léger reflet fixe sur toute la double page */
.alb-livre::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.08),transparent 35%,transparent 70%,rgba(0,0,0,.2))}
.alb-titre{grid-area:titre;position:relative;z-index:1;margin:0 0 14px;padding-left:4px;font:italic 900 clamp(30px,4.3vw,64px)/.95 Barlow,Inter,sans-serif;
  text-transform:uppercase;letter-spacing:.01em;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.35);overflow-wrap:anywhere}
.alb-feuille{position:relative;z-index:1;min-width:0}
.alb-feuille.gauche{grid-area:g;display:grid;grid-template-columns:minmax(110px,24%) minmax(0,1fr);gap:16px}
.alb-feuille.droite{grid-area:d;display:flex;flex-direction:column}
.alb-pli{grid-area:pli;position:relative;z-index:1;margin:-90px 0 -22px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.35) 45%,rgba(255,255,255,.12) 52%,transparent)}
.alb-cote{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.alb-embleme{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;color:#fff}
.alb-logo{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:10px;padding:12%;transition:transform .15s;
  background:linear-gradient(160deg,#fff,#e9edf3);box-shadow:0 6px 16px rgba(0,0,0,.45),inset 0 0 0 3px rgba(255,255,255,.9),inset 0 0 0 4px rgba(0,0,0,.08)}
.alb-logo img{width:100%;height:100%;object-fit:contain}
.alb-logo svg{width:70%;fill:rgba(13,28,77,.14);stroke:rgba(13,28,77,.3);stroke-width:2}
.alb-embleme:not(.plein) .alb-logo{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.alb-embleme:not(.plein) .alb-logo svg{fill:rgba(255,255,255,.12);stroke:rgba(255,255,255,.4)}
.alb-embleme small{font:700 11px Barlow,Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.alb-embleme:hover:not(:disabled) .alb-logo{transform:translateY(-2px)}
.alb-equipe{font:800 15px/1.15 Barlow,Inter,sans-serif;text-transform:uppercase;letter-spacing:.06em;text-align:center;overflow-wrap:anywhere}
.alb-compte{margin-top:auto;padding:10px 8px;border-radius:6px;background:rgba(0,0,0,.28);text-align:center;font:600 13px Barlow,Inter,sans-serif;color:rgba(255,255,255,.75)}
.alb-compte b{font:900 26px Barlow,Inter,sans-serif;color:#fff}
.alb-compte span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.alb-grille{display:grid;gap:12px;align-content:start}
.alb-grille.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.alb-grille.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* une case : la place imprimée d'une vignette (son numéro), ou la vignette collée */
.alb-case{position:relative;aspect-ratio:2/3;padding:0;border-radius:4px;container-type:inline-size;display:grid;place-items:center;
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);transition:transform .15s,box-shadow .15s}
.alb-case:not(.pleine):not(:disabled):hover{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.alb-num{font:italic 900 34cqi Barlow,Inter,sans-serif;color:rgba(255,255,255,.22)}
.alb-plus{position:absolute;bottom:8%;font:700 18cqi Barlow,sans-serif;color:rgba(255,255,255,.55);opacity:0;transition:opacity .15s}
.alb-case:hover .alb-plus{opacity:1}
.alb-case.pleine{background:none;box-shadow:none;align-self:start}
.alb-case.pleine .card{width:100%;font-size:6.9cqi;box-shadow:0 4px 10px rgba(0,0,0,.45)}
.alb-case.pleine:hover{transform:translateY(-3px)}
.alb-pied{margin-top:auto;padding-top:12px;text-align:right;font:700 11px Barlow,Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.alb-outils{display:flex;align-items:center;gap:14px;margin:16px 0 0 54px;color:var(--mute);font-size:13.5px}
/* tourner la page */
.alb-livre.tourne-suiv{animation:albSuiv .4s cubic-bezier(.2,.8,.3,1)}
.alb-livre.tourne-prec{animation:albPrec .4s cubic-bezier(.2,.8,.3,1)}
@keyframes albSuiv{from{opacity:.2;transform:perspective(1600px) translateX(40px) rotateY(-10deg)}to{opacity:1;transform:none}}
@keyframes albPrec{from{opacity:.2;transform:perspective(1600px) translateX(-40px) rotateY(10deg)}to{opacity:1;transform:none}}
/* l'album vide */
.alb-livre-vide{display:block;padding:60px 40px;text-align:center}
.alb-livre-vide .alb-feuille{max-width:620px;margin:0 auto}
.alb-livre-vide p{color:rgba(255,255,255,.85);font-size:16px;line-height:1.55;margin:0 0 22px}
/* les fenêtres : nom, réglages, choix d'une carte */
.alb-boite{width:min(560px,100%)}
.alb-boite header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.alb-boite header b{font:800 20px Barlow,Inter,sans-serif;color:#fff}
.alb-boite form{display:flex;flex-direction:column;gap:14px}
#albNomForm{flex-direction:row}
#albNomForm .field{flex:1}
.alb-form label{display:flex;flex-direction:column;gap:6px;color:var(--mute);font-size:13px;font-weight:600}
.alb-lbl{color:var(--mute);font-size:13px;font-weight:600}
.alb-teintes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.alb-teinte{height:46px;border-radius:6px;padding:0;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.alb-teinte i{display:block;width:100%;height:100%;background:linear-gradient(112deg,var(--a) 0 44%,var(--b) 44% 52%,var(--c) 52%)}
.alb-teinte.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
.alb-boutons{display:flex;gap:8px;flex-wrap:wrap}
.alb-boutons .danger{margin-left:auto}
.alb-menu{width:min(380px,100%)}
.alb-menu-carte{width:190px;margin:0 auto 16px}
.alb-picker{width:min(1040px,100%)}
.alb-filtres{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.alb-filtres .field{flex:1;min-width:200px}
.alb-fam{display:inline-flex;gap:4px;padding:3px;border:1px solid var(--edge);border-radius:6px}
.alb-fam button{height:34px;padding:0 12px;border-radius:4px;color:var(--mute);font-weight:700;font-size:13px}
.alb-fam button.on{background:rgba(230,57,70,.2);color:#fff}
.alb-liste{overflow:auto;min-height:200px}
.alb-choix-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.alb-pick{position:relative;padding:0;container-type:inline-size;transition:transform .15s}
.alb-pick .card{width:100%;font-size:6.9cqi}
.alb-pick:hover{transform:translateY(-3px)}
.alb-pick.deja{opacity:.55}
.alb-pick .alb-deja{position:absolute;left:6%;right:6%;bottom:6%;padding:3px;border-radius:3px;background:rgba(0,0,0,.75);color:#fff;font-size:11px;font-weight:700}
.alb-plus-cartes{display:block;margin:14px auto 4px}
.alb-rien{color:var(--mute);text-align:center;padding:30px 0}
/* le profil : le bouton de l'album, à côté de celui de l'équipe */
.pf-album{margin-left:8px}
@media (max-width:1000px){
  .alb-scene{grid-template-columns:minmax(0,1fr)}
  .alb-fleche{display:none}
  .alb-livre{grid-template-columns:minmax(0,1fr);grid-template-areas:"titre" "g" "d";padding:16px 14px 18px;
    background:repeating-linear-gradient(112deg,rgba(255,255,255,.035) 0 2px,transparent 2px 10px),
      linear-gradient(170deg,var(--a) 0 46%,var(--b) 46% 48%,var(--c) 48% 100%)}
  .alb-pli{display:none}
  .alb-feuille.gauche{grid-template-columns:minmax(0,1fr)}
  .alb-cote{flex-direction:row;align-items:center}
  .alb-embleme{width:84px;flex:none}
  .alb-equipe{flex:1;text-align:left}
  .alb-compte{margin:0}
  .alb-feuille.droite{margin-top:12px}
  .alb-grille.g4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .alb-onglets{max-width:100%;justify-content:flex-start}
  .alb-outils{margin-left:0;flex-wrap:wrap}
}

/* ================================================ les chromatiques DORÉES (Mehdy, 20/10/2026, d'après une vignette Panini
   « Premium Gold » : « un fond très pailleté, très doré, avec évidemment des effets chromatiques — juste la photo n'est pas
   touchée ; et une découpe des joueurs, pour que ça se dissocie vraiment »).
   Les couches, du fond vers l'avant : l'or pailleté et ses anneaux (le fond de la carte) ; le voile irisé qui change de
   teinte sur place (.mtl) ; deux semis de paillettes qui scintillent (.foil, .rb) ; le grand mot couché (.sh-mot) ; le
   joueur détouré (ou la photo entière, dans un cadre blanc) — rien ne passe devant lui ; enfin les chiffres en pastilles,
   le nom sur sa bande nacrée, la note et le drapeau. */
.card.fc.sh[class]{--fct:#2a1d05;color:#2a1d05;border:.32em solid #fbf7ee!important;border-radius:.35em!important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .93  0 0 0 0 .7  0 0 0 2.6 -1.05'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/200px 200px,
    repeating-radial-gradient(circle at 50% 40%,rgba(255,255,255,.13) 0 .55em,rgba(255,255,255,0) .55em 1.6em),
    radial-gradient(90% 60% at 50% 35%,#fff1b8 0%,rgba(255,241,184,0) 60%),
    linear-gradient(160deg,#f5d77a 0%,#d4a033 30%,#f2cc62 52%,#b9862a 78%,#e8bf55 100%)!important;
  box-shadow:0 .3em .8em rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.25),0 0 1.2em -.2em rgba(255,214,120,.55)!important}
.card.fc.sh .mtl{display:block!important;position:absolute;inset:0;z-index:1;pointer-events:none;width:auto;top:0;bottom:0;left:0;right:0;
  mix-blend-mode:color-dodge;opacity:.3!important;transform:none!important;
  background:linear-gradient(125deg,#ff5fb8 0%,#ffd36b 22%,#6bffc9 45%,#6bbcff 68%,#c78bff 88%,#ff5fb8 100%)!important;
  animation:chromaTeinte 8s linear infinite!important}
.card.fc.sh .foil,.card.fc.sh .rb{display:block!important;position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:0;
  mix-blend-mode:screen;transform:none!important}
.card.fc.sh .foil{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 0.92 14 0 0 0 -10.2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E") 0 0/220px 220px!important;animation:paillettes 2.2s ease-in-out infinite!important}
.card.fc.sh .rb{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.9 0 0 0 0 0.55 14 0 0 0 -10.0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E") 0 0/260px 260px!important;animation:paillettes 3s ease-in-out -1.3s infinite!important}
.card.fc.sh .rb2,.card.fc.sh .rb3,.card.fc.sh .glints{display:none!important}
/* le grand mot couché, derrière le joueur */
.card.fc.sh .sh-mot{position:absolute;z-index:3;left:.1em;bottom:23%;transform-origin:0 100%;transform:rotate(-90deg) translateY(100%);
  display:flex;flex-direction:column;white-space:nowrap;pointer-events:none;color:#fff;line-height:.86;
  text-shadow:.04em .06em 0 rgba(120,80,10,.35),0 0 .3em rgba(255,255,255,.4)}
.card.fc.sh .sh-mot i{font:italic 900 1.05em Barlow,Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding-left:.2em}
.card.fc.sh .sh-mot b{font:900 2.35em Barlow,Inter,sans-serif;letter-spacing:-.01em;text-transform:uppercase}
.card.fc.sh:not(.dt) .sh-mot{display:none}
/* la photo entière (pas encore détourée) : dans un cadre blanc, intacte */
.card.fc.sh:not(.dt) .picw{position:relative;z-index:5}
.card.fc.sh:not(.dt) .pic{box-shadow:0 0 0 .18em #fbf7ee,0 .3em .6em rgba(0,0,0,.35)!important;-webkit-mask:none!important;mask:none!important}
/* le joueur détouré : debout sur la bande du bas, grand, avec son ombre — et rien devant lui */
.card.fc.sh.dt{justify-content:flex-end}
.card.fc.sh.dt .picw{position:absolute;z-index:5;left:3%;right:3%;top:5%;bottom:17%;padding:0;order:0}
.card.fc.sh.dt .pic{height:100%;background:none!important;-webkit-mask:none!important;mask:none!important;overflow:visible;border-radius:0}
.card.fc.sh.dt .pic img{width:100%;height:100%;object-fit:contain;object-position:55% 100%;
  filter:drop-shadow(.25em .35em .3em rgba(60,35,0,.45))!important;animation:chromaPhoto 12s ease-in-out infinite!important}
.card.fc.sh .fc-note{z-index:7;background:#fbf7ee!important;color:#1c1407!important;box-shadow:0 .1em .35em rgba(0,0,0,.35)!important}
.card.fc.sh .fc-drap-haut,.card.fc.sh .lock{z-index:7}
/* en bas : les chiffres en pastilles de couleur, puis le nom sur sa bande nacrée */
.card.fc.sh .fc-stats{order:2;position:relative;z-index:6;border:0!important;margin:0 3%;padding:.2em 0;gap:.28em;color:#fff}
.card.fc.sh .fc-stats span{flex:1;padding:.18em 0 .16em;border-radius:1em;background:#d8343b;box-shadow:inset 0 -.12em 0 rgba(0,0,0,.18),0 .1em .2em rgba(0,0,0,.3)}
.card.fc.sh .fc-stats span:nth-child(2){background:#3f9a9c}
.card.fc.sh .fc-stats span:nth-child(3){background:#4aa35a}
.card.fc.sh .fc-stats span:nth-child(4){background:#f6f3ec;color:#1c1407}
.card.fc.sh .fc-stats i{color:inherit!important;opacity:.85;font-size:.6em!important}
.card.fc.sh .fc-stats b{font-size:1.05em!important}
.card.fc.sh .hd{order:3;z-index:6;margin:.22em 3% 0!important;padding:.16em .4em .12em!important;border-radius:.2em;
  background:linear-gradient(180deg,#ffffff,#e6e9ee 55%,#f7f8fa)!important;box-shadow:0 .1em .25em rgba(0,0,0,.3)!important}
.card.fc.sh .nm{background:none!important;-webkit-text-fill-color:currentColor!important;color:#14100a!important;filter:none!important;
  text-transform:uppercase;letter-spacing:.02em;text-align:left}
.card.fc.sh .ft{order:4;z-index:6;color:#3b2a06!important;text-shadow:none!important;-webkit-text-fill-color:currentColor!important;
  padding:.25em 0 .35em!important;opacity:.85}
.card.fc.sh .fc-de{color:#2a1d05}
@media (prefers-reduced-motion:reduce){.card.fc.sh .mtl,.card.fc.sh .foil,.card.fc.sh .rb,.card.fc.sh.dt .pic img{animation:none!important}}

/* l'or, second réglage : plus doré, et un vrai pailleté — des grains clairs et des grains sombres serrés, comme une
   surface pailletée vue de près */
.card.fc.sh[class]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.96  0 0 0 0 0.78  3.2 0 0 0 -1.85'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/200px 200px,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.27  0 0 0 0 0.02  0 3.2 0 0 -1.85'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/200px 200px,
    repeating-radial-gradient(circle at 50% 40%,rgba(255,240,190,.16) 0 .55em,rgba(255,240,190,0) .55em 1.6em),
    radial-gradient(80% 50% at 50% 35%,rgba(255,236,160,.55) 0%,rgba(255,236,160,0) 65%),
    linear-gradient(160deg,#f0c55a 0%,#c58d1e 28%,#efc95c 50%,#a46f16 76%,#dcab3e 100%)!important}

/* l'or, troisième réglage : des paillettes plus grosses, un or plus profond (le voile irisé plus léger) */
.card.fc.sh[class]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.96  0 0 0 0 0.78  3.6 0 0 0 -1.95'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/280px 280px,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.27  0 0 0 0 0.02  0 3.6 0 0 -1.95'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/280px 280px,
    repeating-radial-gradient(circle at 50% 40%,rgba(255,240,190,.16) 0 .55em,rgba(255,240,190,0) .55em 1.6em),
    radial-gradient(80% 50% at 50% 35%,rgba(255,236,160,.25) 0%,rgba(255,236,160,0) 65%),
    linear-gradient(160deg,#f0c55a 0%,#c58d1e 28%,#efc95c 50%,#a46f16 76%,#dcab3e 100%)!important}
.card.fc.sh .mtl{opacity:.2!important}

/* l'or, quatrième réglage : des paillettes plus grosses et plus franches */
.card.fc.sh[class]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 0.9  4.2 0 0 0 -2.35'/%3E%3C/filter%3E%3Crect width='110' height='110' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/280px 280px,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36  0 0 0 0 0.2  0 0 0 0 0  0 4.2 0 0 -2.3'/%3E%3C/filter%3E%3Crect width='110' height='110' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/280px 280px,
    repeating-radial-gradient(circle at 50% 40%,rgba(255,240,190,.16) 0 .55em,rgba(255,240,190,0) .55em 1.6em),
    radial-gradient(80% 50% at 50% 35%,rgba(255,236,160,.25) 0%,rgba(255,236,160,0) 65%),
    linear-gradient(160deg,#f0c55a 0%,#c58d1e 28%,#efc95c 50%,#a46f16 76%,#dcab3e 100%)!important}
.card.fc.sh .foil{background-size:330px 330px!important;opacity:1}
.card.fc.sh .rb{background-size:400px 400px!important}

/* ================================================ les chromatiques : de VRAIES couleurs chromatiques (Mehdy, 20/10/2026 :
   « la couleur derrière, pas en doré, vraiment avec des couleurs chromatiques »). Le fond est un arc-en-ciel holographique
   avec ses anneaux (.mtl), qui change lentement de teinte SUR PLACE ; par-dessus, le grain pailleté (.rb2) et les paillettes
   qui scintillent (.foil, .rb). Le joueur, devant, n'est jamais recouvert. */
.card.fc.sh[class]{background:linear-gradient(135deg,#ff7ac8,#a98bff 25%,#5cd0ff 50%,#62f5c4 75%,#ffe27a)!important}
.card.fc.sh .mtl{opacity:1!important;mix-blend-mode:normal!important;
  background:repeating-radial-gradient(circle at 50% 40%,rgba(255,255,255,.2) 0 .5em,rgba(255,255,255,0) .5em 1.5em),
    radial-gradient(70% 45% at 50% 38%,rgba(255,255,255,.45),rgba(255,255,255,0) 70%),
    linear-gradient(135deg,#ff6ec4 0%,#b07cff 20%,#5ab8ff 40%,#4ff0d0 58%,#c8ff6a 76%,#ffcf5a 88%,#ff7aa8 100%)!important;
  animation:chromaTeinte 10s linear infinite!important}
.card.fc.sh .rb2{display:block!important;position:absolute;inset:0;z-index:2;pointer-events:none;transform:none!important;animation:none!important;
  opacity:1!important;mix-blend-mode:normal!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  4.2 0 0 0 -2.35'/%3E%3C/filter%3E%3Crect width='110' height='110' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/280px 280px,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.1  0 0 0 0 0.35  0 4.2 0 0 -2.45'/%3E%3C/filter%3E%3Crect width='110' height='110' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/280px 280px!important}
.card.fc.sh .sh-mot{text-shadow:.04em .06em 0 rgba(60,20,110,.35),0 0 .35em rgba(255,255,255,.55)}
.card.fc.sh{box-shadow:0 .3em .8em rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.25),0 0 1.2em -.2em rgba(170,140,255,.6)!important}
.card.fc.sh .ft{color:#2a1748!important}

/* l'album à plat (Mehdy, 20/10/2026 : « beaucoup plus gros, sans le côté au milieu qui fait comme un livre ») : une seule
   grande page, sans pli ni bandes au milieu ; l'emblème à gauche, 7 vignettes par ligne, plus grosses */
.alb{max-width:none}
.alb-scene{grid-template-columns:40px minmax(0,1fr) 40px}
.alb-livre.plat{display:flex;flex-direction:column;padding:26px 30px 22px;
  background:radial-gradient(120% 80% at 20% 0%,rgba(255,255,255,.12),transparent 55%),
    repeating-linear-gradient(112deg,rgba(255,255,255,.035) 0 2px,transparent 2px 10px),
    linear-gradient(120deg,var(--a) 0%,color-mix(in srgb,var(--a) 55%,var(--c)) 45%,var(--c) 100%)}
.alb-livre.plat::before{content:"";position:absolute;left:0;right:0;top:0;height:.5em;background:var(--b);opacity:.9}
.alb-livre.plat .alb-titre{margin:4px 0 20px;font-size:clamp(34px,5vw,80px)}
.alb-corps{position:relative;z-index:1;display:grid;grid-template-columns:minmax(150px,13%) minmax(0,1fr);gap:22px;align-items:start}
.alb-corps .alb-cote{position:sticky;top:20px;min-height:100%}
.alb-grille.g7{grid-template-columns:repeat(7,minmax(0,1fr));gap:16px}
.alb-livre.plat .alb-pied{position:relative;z-index:1;margin-top:16px}
.alb-livre.plat .alb-equipe{font-size:18px}
@media (max-width:1300px){.alb-grille.g7{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:1000px){
  .alb-livre.plat{padding:18px 14px 16px}
  .alb-corps{grid-template-columns:minmax(0,1fr)}
  .alb-corps .alb-cote{position:static;flex-direction:row;align-items:center}
  .alb-grille.g7{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
}

/* ================================================ le contour des chromatiques (Mehdy, 20/10/2026 : « fais le contour un peu
   brillant, qui tourne, tout chromatique ») : un anneau arc-en-ciel posé sur le bord de la carte, dont les couleurs
   tournent lentement autour d'elle, avec un léger halo de la même couleur. Seul le bord bouge : rien ne passe sur la
   carte elle-même. */
@property --chroma-tour{syntax:"<angle>";inherits:false;initial-value:0deg}
.card.fc.sh[class]{border:.1em solid rgba(255,255,255,.85)!important}
.card.fc.sh[class]::before{content:""!important;display:block!important;position:absolute;inset:0;z-index:12;pointer-events:none;
  border-radius:inherit;padding:.3em;
  background:conic-gradient(from var(--chroma-tour),#ff5fb8,#ffd36b,#6bffc9,#5ab8ff,#b07cff,#ff5fb8)!important;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0);
  filter:saturate(1.15) brightness(1.08);animation:chromaTour 4s linear infinite!important}
/* le reflet blanc qui suit l'anneau : il donne le brillant */
.card.fc.sh[class]::after{content:""!important;display:block!important;position:absolute;inset:0;z-index:12;pointer-events:none;
  border-radius:inherit;padding:.3em;mix-blend-mode:screen;
  background:conic-gradient(from var(--chroma-tour),transparent 0 20%,rgba(255,255,255,.95) 25%,transparent 30% 70%,rgba(255,255,255,.8) 75%,transparent 80%)!important;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box exclude,linear-gradient(#fff 0 0);
  animation:chromaTour 4s linear infinite!important}
@keyframes chromaTour{to{--chroma-tour:360deg}}
.card.fc.sh{box-shadow:0 .3em .8em rgba(0,0,0,.55),0 0 .9em -.1em rgba(140,170,255,.65),0 0 1.6em -.4em rgba(255,110,200,.5)!important}
@media (prefers-reduced-motion:reduce){.card.fc.sh[class]::before,.card.fc.sh[class]::after{animation:none!important}}
.card.fc.sh[class]::before,.card.fc.sh[class]::after{padding:.38em}

/* l'album tient dans l'écran, sans barre de défilement (Mehdy, 20/10/2026 : « un peu plus petit, que ça prenne tout
   l'écran ») : la largeur des vignettes se calcule sur la HAUTEUR de la fenêtre — trois rangées, plus le titre, l'en-tête et
   les boutons, doivent y tenir ; sur un écran large et bas, elles rapetissent au lieu de déborder */
body:has(#v-album.on) main.wrap{padding-bottom:16px}
#v-album .alb-tete{margin-bottom:10px}
#v-album .alb-nom h1{font-size:clamp(24px,2.6vw,36px)}
.alb-livre.plat{padding:16px 24px 12px}
.alb-livre.plat .alb-titre{font-size:clamp(26px,3.4vw,52px);margin:0 0 12px}
.alb-grille.g7{--alb-l:max(64px,calc((100dvh - 420px) / 3 * .6667));grid-template-columns:repeat(7,minmax(0,var(--alb-l)));gap:12px;justify-content:center}
.alb-corps{grid-template-columns:minmax(120px,min(13%,calc(var(--alb-l,200px) * 1.1))) minmax(0,1fr)}
.alb-livre.plat .alb-pied{margin-top:8px}
#v-album .alb-outils{margin-top:10px}
@media (max-width:1000px){.alb-grille.g7{--alb-l:1fr;grid-template-columns:repeat(3,minmax(0,1fr))}body:has(#v-album.on) main.wrap{padding-bottom:110px}}

/* ------------------------------------------------ le club de cœur, choisi à l'inscription (20/10/2026) */
.cc-voile{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:20px;background:rgba(3,6,12,.82);backdrop-filter:blur(8px)}
.cc-boite{width:min(1080px,100%);max-height:92vh;display:flex;flex-direction:column;padding:26px 28px;border-radius:10px;
  background:linear-gradient(180deg,#0f1729,#0a0f1b);border:1px solid var(--edge2);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.cc-tete{display:flex;align-items:flex-start;gap:16px;margin-bottom:14px}
.cc-tete small{color:var(--accent);font:800 12px Barlow,Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.cc-tete h2{margin:2px 0 6px;font:900 italic clamp(26px,3vw,40px)/1 Barlow,Inter,sans-serif;text-transform:uppercase;color:#fff}
.cc-tete p{margin:0;color:var(--mute);font-size:14.5px;max-width:70ch}
.cc-retour{flex:none;height:36px;padding:0 14px;border-radius:5px;border:1px solid var(--edge);color:#fff;font-weight:700}
.cc-retour:hover{background:rgba(255,255,255,.06)}
.cc-cherche{margin-bottom:14px}
.cc-cherche .field{width:100%;height:46px;font-size:15px}
.cc-corps{overflow:auto;min-height:240px}
.cc-pays{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.cc-p{display:flex;align-items:center;gap:10px;height:52px;padding:0 12px;border-radius:6px;border:1px solid var(--edge);
  background:rgba(255,255,255,.03);text-align:left;color:#fff}
.cc-p:hover{border-color:var(--accent);background:rgba(230,57,70,.1)}
.cc-p img,.cc-sansdrap{width:32px;height:22px;object-fit:cover;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.cc-sansdrap{background:rgba(255,255,255,.1)}
.cc-p b{flex:1;min-width:0;font:700 14px Barlow,Inter,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-p small{color:var(--faint);font-size:12px}
.cc-titre{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:800 20px Barlow,Inter,sans-serif;color:#fff}
.cc-drap{width:34px;height:23px;object-fit:cover;border-radius:2px}
.cc-clubs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.cc-club{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px;border-radius:8px;border:1px solid var(--edge);
  background:rgba(255,255,255,.03);color:#fff;text-align:center;transition:transform .15s,border-color .15s}
.cc-club:hover{transform:translateY(-3px);border-color:var(--accent);background:rgba(230,57,70,.08)}
.cc-logo{display:grid;place-items:center;width:84px;height:84px;border-radius:10px;padding:10px;background:#fff}
.cc-logo img{width:100%;height:100%;object-fit:contain}
.cc-logo svg{width:70%;fill:rgba(13,28,77,.12);stroke:rgba(13,28,77,.35);stroke-width:2}
.cc-club b{font:700 14px/1.2 Barlow,Inter,sans-serif}
.cc-club small{color:var(--faint);font-size:12px}
.cc-club .cc-sel{color:#ffd36b;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.cc-plus{display:block;margin:16px auto 4px}
.cc-rien{color:var(--mute);text-align:center;padding:30px 0}
.cc-fin{align-items:center;text-align:center;width:min(520px,100%)}
.cc-fin small{color:var(--accent);font:800 12px Barlow,Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.cc-fin h2{margin:4px 0 16px;font:900 italic 34px/1 Barlow,Inter,sans-serif;text-transform:uppercase;color:#fff}
.cc-carte{width:200px;margin:0 auto 16px;animation:ccArrive .6s cubic-bezier(.2,.9,.3,1.2)}
@keyframes ccArrive{from{opacity:0;transform:scale(.7) rotateY(80deg)}to{opacity:1;transform:none}}
.cc-fin p{color:var(--mute);font-size:14.5px;line-height:1.5;margin:0 0 18px}
.cc-go{height:48px;padding:0 30px;font-size:16px}
@media (max-width:700px){.cc-boite{padding:18px 14px;max-height:96vh}.cc-pays{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-clubs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* la page « + Nouvelle page », après la dernière (la molette y mène) */
.alb-livre.alb-ajout{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:calc((100dvh - 420px) * 1.02 + 120px);
  background:repeating-linear-gradient(112deg,rgba(255,255,255,.03) 0 2px,transparent 2px 10px),linear-gradient(120deg,#101a33,#1a1030)!important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 30px 60px -20px rgba(0,0,0,.8)}
.alb-ajout-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 46px;border-radius:12px;border:2px solid rgba(255,255,255,.25);
  color:#fff;font:900 italic 28px Barlow,Inter,sans-serif;text-transform:uppercase;transition:transform .15s,border-color .15s,background .15s}
.alb-ajout-btn span{font:300 64px/1 Barlow,sans-serif;font-style:normal}
.alb-ajout-btn:hover{transform:translateY(-3px);border-color:#fff;background:rgba(255,255,255,.06)}
.alb-ajout p{color:rgba(255,255,255,.7);font-size:15px;margin:0}