/* ==========================================================================
   Arena Esport — design system
   Tokens : projets/esport/design-system.md · Maquettes : projets/esport/maquettes/
   Dosage voulu : 75% noir/navy · 15% blanc/gris · 10% violet et couleurs d'etat
   ========================================================================== */

/* ==========================================================================
   Thèmes. Le sombre est l'identité du site et reste le défaut ; le clair est
   une préférence de lecture à part entière, pas une variante dégradée.
   Trois états : choix explicite (data-theme), sinon préférence système.
   ========================================================================== */

:root{
  color-scheme:dark;

  /* fonds */
  --bg:#05080F;
  --bg-2:#080D17;
  --card:#0C121E;
  --card-hover:#111A29;
  --line:#202A3A;
  --line-soft:#182131;

  /* accent */
  --violet:#7547F5;
  --violet-light:#936DFF;
  --violet-dark:#4D25B8;

  /* texte */
  --text:#F4F6FA;
  --text-2:#B1B7C3;
  --text-3:#737C8C;

  /* etats */
  --win:#37DF88;
  --loss:#FF4D61;
  --live:#DCEB35;

  /* pastille sous les logos d'equipes : assez claire pour qu'un logo noir
     reste lisible sur fond sombre */
  --logo-bg:#E8ECF4;
  --shade-1:#05080F;
  --hero-veil:.55;

  /* formes : rayons secs */
  --r-btn:6px;
  --r-card:8px;
  --r-box:12px;

  /* typo */
  --f-title:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-ui:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap:1280px;
  --header-h:56px;
}

/* Thème clair. Le violet est assombri et le jaune « live » remplacé : posés
   tels quels sur du blanc, ils tombent sous le seuil de contraste lisible. */
:root[data-theme="light"]{
  color-scheme:light;

  --bg:#F6F8FC;
  --bg-2:#FFFFFF;
  --card:#FFFFFF;
  --card-hover:#F0F3F9;
  --line:#DFE4EE;
  --line-soft:#EBEEF5;

  --violet:#6231E0;
  --violet-light:#7A4BF0;
  --violet-dark:#4A21B8;

  --text:#0B1220;
  --text-2:#4A5464;
  --text-3:#78828F;

  --win:#0E9A57;
  --loss:#D62B41;
  --live:#8A7A00;

  --logo-bg:#F2F4F9;
  --shade-1:#FFFFFF;
  --hero-veil:.30;
}

/* Sans choix explicite, on suit la préférence système. */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    color-scheme:light;
    --bg:#F6F8FC;
    --bg-2:#FFFFFF;
    --card:#FFFFFF;
    --card-hover:#F0F3F9;
    --line:#DFE4EE;
    --line-soft:#EBEEF5;
    --violet:#6231E0;
    --violet-light:#7A4BF0;
    --violet-dark:#4A21B8;
    --text:#0B1220;
    --text-2:#4A5464;
    --text-3:#78828F;
    --win:#0E9A57;
    --loss:#D62B41;
    --live:#8A7A00;
    --logo-bg:#F2F4F9;
    --shade-1:#FFFFFF;
    --hero-veil:.30;
  }
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text-2);
  font:400 16px/1.6 var(--f-ui);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

h1,h2,h3,h4{
  font-family:var(--f-title);
  font-weight:700;
  color:var(--text);
  line-height:1.05;
  margin:0;
  letter-spacing:.01em;
}
h1{font-size:56px}
h2{font-size:32px}
h3{font-size:22px}

p{margin:0 0 14px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--bg-2) 94%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.hbar{
  height:var(--header-h);
  display:flex;align-items:center;gap:28px;
}

.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.brand svg{width:26px;height:26px;flex:0 0 auto}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-txt b{
  font-family:var(--f-title);font-weight:700;font-size:19px;
  color:var(--text);letter-spacing:.06em;
}
.brand-txt span{
  font-family:var(--f-ui);font-weight:500;font-size:8.5px;
  color:var(--text-3);letter-spacing:.34em;margin-top:2px;
}

.nav{display:flex;align-items:center;gap:22px;flex:1 1 auto}
.nav > a,.nav-drop > button{
  position:relative;
  display:inline-flex;align-items:center;gap:5px;
  font:600 12.5px/1 var(--f-ui);
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-2);
  padding:19px 0;
  background:none;border:0;cursor:pointer;
  white-space:nowrap;
}
.nav > a:hover,.nav-drop > button:hover{color:var(--text)}
.nav > a.is-active{color:var(--text)}
.nav > a.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:2px;background:var(--violet);
}
.nav-new{
  font:700 8.5px/1 var(--f-ui);letter-spacing:.08em;
  background:var(--violet);color:#fff;
  padding:3px 4px;border-radius:3px;
  transform:translateY(-4px);
}

/* dropdowns du menu silo */
.nav-drop{position:relative}
.nav-drop-menu{
  position:absolute;top:100%;left:-14px;
  min-width:196px;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:6px;
  display:none;
}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{display:block}
.nav-drop-menu a{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:var(--r-btn);
  font:500 13px/1 var(--f-ui);color:var(--text-2);
}
.nav-drop-menu a:hover{background:var(--card-hover);color:var(--text)}

.header-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.icon-btn{
  width:32px;height:32px;
  display:grid;place-items:center;
  border:0;background:none;border-radius:var(--r-btn);
  color:var(--text-2);cursor:pointer;
}
.icon-btn:hover{background:var(--card-hover);color:var(--text)}
.icon-btn svg{width:17px;height:17px}

/* bascule jour / nuit */
.theme-btn{
  width:32px;height:32px;
  display:grid;place-items:center;
  border:1px solid var(--line);background:transparent;
  border-radius:var(--r-btn);color:var(--text-2);cursor:pointer;
  flex:0 0 auto;
}
.theme-btn:hover{color:var(--text);border-color:var(--violet)}
.theme-btn svg{width:16px;height:16px}
/* une seule des deux icones est visible selon le theme actif */
.theme-btn .i-moon{display:none}
:root[data-theme="light"] .theme-btn .i-moon{display:block}
:root[data-theme="light"] .theme-btn .i-sun{display:none}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]):not([data-theme="light"]) .theme-btn .i-moon{display:block}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .theme-btn .i-sun{display:none}
}

/* burger : obligatoire, jamais de nav masquee sans secours */
.burger{display:none}
.burger-btn{display:none}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:600 13px/1 var(--f-ui);letter-spacing:.03em;
  padding:11px 18px;border-radius:var(--r-btn);
  border:1px solid transparent;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
  white-space:nowrap;
}
.btn svg{width:15px;height:15px}
.btn-primary{background:var(--violet);color:#fff}
.btn-primary:hover{background:var(--violet-light)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--violet);background:rgba(117,71,245,.08)}
.btn-soft{background:var(--card-hover);color:var(--text);border-color:var(--line)}
.btn-soft:hover{border-color:var(--violet)}
.btn-sm{padding:8px 13px;font-size:12px}
.btn-block{display:flex;width:100%}

.link-more{
  display:inline-flex;align-items:center;gap:6px;
  font:600 11.5px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;
  color:var(--violet-light);
}
.link-more:hover{color:var(--text)}
.link-more svg{width:13px;height:13px}

/* --------------------------------------------------------------------------
   Fil d'ariane
   -------------------------------------------------------------------------- */

.crumb{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:14px 0;
  font:500 12px/1 var(--f-ui);color:var(--text-3);
}
.crumb a:hover{color:var(--text-2)}
.crumb i{font-style:normal;color:var(--line)}

/* --------------------------------------------------------------------------
   Titres de section : barre violette + italique
   -------------------------------------------------------------------------- */

.sec-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:0 0 16px;
}
.sec-title{
  display:flex;align-items:center;gap:10px;
  font-family:var(--f-title);font-weight:700;font-style:italic;
  font-size:22px;line-height:1;letter-spacing:.02em;
  text-transform:uppercase;color:var(--text);
}
.sec-title::before{
  content:"";width:3px;height:18px;border-radius:2px;
  background:var(--violet);flex:0 0 auto;
}
.sec{margin:0 0 40px}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
}
.card-pad{padding:18px}
.card-hd{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line);
}
.card-hd h3{font-style:italic;font-size:15px;letter-spacing:.05em;text-transform:uppercase}
a.card:hover{background:var(--card-hover);border-color:#2B3850}

/* --------------------------------------------------------------------------
   Badges / pills
   -------------------------------------------------------------------------- */

.badge{
  display:inline-flex;align-items:center;gap:5px;
  font:700 9.5px/1 var(--f-ui);letter-spacing:.09em;text-transform:uppercase;
  padding:5px 7px;border-radius:4px;
  background:var(--violet);color:#fff;
}
.badge-soft{background:rgba(117,71,245,.15);color:var(--violet-light)}
.badge-line{background:transparent;border:1px solid var(--line);color:var(--text-3)}
.badge-live{background:var(--live);color:#05080F}
:root[data-theme="light"] .badge-live{color:#FFF}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .badge-live{color:#FFF}}
.badge-win{background:rgba(55,223,136,.15);color:var(--win)}
.badge-loss{background:rgba(255,77,97,.15);color:var(--loss)}
.badge-tier{background:rgba(220,235,53,.14);color:var(--live)}

.dot-live{
  width:6px;height:6px;border-radius:50%;background:var(--live);
  box-shadow:0 0 0 0 rgba(220,235,53,.6);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  70%{box-shadow:0 0 0 7px rgba(220,235,53,0)}
  100%{box-shadow:0 0 0 0 rgba(220,235,53,0)}
}

/* forme recente W / L */
.form-pills{display:flex;gap:3px}
.form-pills span{
  width:15px;height:15px;border-radius:3px;
  display:grid;place-items:center;
  font:700 9px/1 var(--f-ui);
}
.form-pills .w{background:rgba(55,223,136,.18);color:var(--win)}
.form-pills .l{background:rgba(255,77,97,.18);color:var(--loss)}

.trend{font:600 12px/1 var(--f-ui);display:inline-flex;align-items:center;gap:3px}
.trend-up{color:var(--win)}
.trend-down{color:var(--loss)}
.trend-flat{color:var(--text-3)}

/* --------------------------------------------------------------------------
   Logos equipes / joueurs
   -------------------------------------------------------------------------- */

.tlogo{
  display:grid;place-items:center;
  width:44px;height:44px;flex:0 0 auto;
}
/* Beaucoup de logos d'equipes sont monochromes sombres : poses tels quels sur
   un fond noir, ils disparaissent. Il leur faut une pastille reellement CLAIRE
   — un gris a 5 % d'opacite ne suffisait pas, les logos noirs restaient
   illisibles. En theme clair, la pastille redevient discrete. */
.tlogo:has(img){
  background:var(--logo-bg);
  border-radius:var(--r-btn);
  padding:5px;
}
.tlogo-lg:has(img),.tlogo-xl:has(img){padding:9px}
.tlogo-sm:has(img){padding:3px;border-radius:4px}
.tlogo img{max-width:100%;max-height:100%;object-fit:contain}
.tlogo-sm{width:26px;height:26px}
.tlogo-lg{width:74px;height:74px}
.tlogo-xl{width:104px;height:104px}

/* fallback quand on n'a pas encore le SVG officiel */
.tlogo-ph{
  border-radius:var(--r-btn);
  background:var(--card-hover);
  border:1px solid var(--line);
  font-family:var(--f-title);font-weight:700;
  color:var(--text-2);font-size:14px;letter-spacing:.02em;
}
.tlogo-lg.tlogo-ph{font-size:22px}
.tlogo-xl.tlogo-ph{font-size:30px}
.tlogo-sm.tlogo-ph{font-size:10px}

.team-name{
  font-family:var(--f-title);font-weight:700;
  font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text);text-align:center;line-height:1.1;
}

/* --------------------------------------------------------------------------
   Match card
   -------------------------------------------------------------------------- */

.mcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  display:block;overflow:hidden;
}
.mcard:hover{background:var(--card-hover);border-color:#2B3850}
.mcard-hd{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 13px;border-bottom:1px solid var(--line-soft);
  font:600 10px/1 var(--f-ui);letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-3);
}
.mcard-hd strong{color:var(--text-2);font-weight:700}
.mcard-body{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  padding:16px 13px;
}
.mcard-side{display:flex;flex-direction:column;align-items:center;gap:8px}
.mcard-vs{
  font-family:var(--f-title);font-weight:700;font-size:13px;
  color:var(--text-3);letter-spacing:.06em;
}
.mcard-time{
  font:500 11px/1 var(--f-ui);color:var(--text-3);
  text-align:center;padding:0 0 12px;
}
.mcard-ft{
  padding:9px 13px;border-top:1px solid var(--line-soft);
  font:500 11px/1 var(--f-ui);color:var(--text-3);text-align:center;
}
.mcard-score{
  font-family:var(--f-title);font-weight:700;font-size:26px;color:var(--text);
}
.mcard-score .lost{color:var(--text-3)}

/* cote cliquable */
.odd{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:52px;padding:6px 9px;border-radius:var(--r-btn);
  font-family:var(--f-title);font-weight:700;font-size:15px;
  background:rgba(220,235,53,.14);color:var(--live);
  border:1px solid rgba(220,235,53,.28);
}
.odd-win{background:rgba(55,223,136,.14);color:var(--win);border-color:rgba(55,223,136,.3)}

/* --------------------------------------------------------------------------
   News cards
   -------------------------------------------------------------------------- */

.thumb{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--card-hover);
  border-radius:var(--r-card) var(--r-card) 0 0;
}
.thumb img{width:100%;height:100%;object-fit:cover}

.ncard{display:block}
.ncard .thumb{margin-bottom:10px;border-radius:var(--r-card)}
.ncard .cat-tag{margin-bottom:7px}
.ncard h3{font-size:15px;line-height:1.25;font-family:var(--f-ui);font-weight:600}
.ncard:hover h3{color:var(--violet-light)}
.ncard p{
  font:400 13px/1.5 var(--f-ui);color:var(--text-3);
  margin:6px 0 0;
}
.ncard .meta{font:500 11px/1 var(--f-ui);color:var(--text-3);margin-top:8px}

.cat-tag{
  display:inline-block;
  font:700 9.5px/1 var(--f-ui);letter-spacing:.09em;text-transform:uppercase;
  padding:4px 6px;border-radius:3px;
  background:rgba(117,71,245,.16);color:var(--violet-light);
}

/* article a la une */
.feat{
  position:relative;border-radius:var(--r-box);overflow:hidden;
  border:1px solid var(--violet-dark);
  min-height:300px;display:flex;align-items:flex-end;
  background:var(--card-hover);
}
.feat-img{position:absolute;inset:0}
.feat-img img{width:100%;height:100%;object-fit:cover;opacity:var(--hero-veil)}
.feat-shade{
  position:absolute;inset:0;
  background:linear-gradient(0deg,var(--shade-1) 8%,color-mix(in srgb,var(--shade-1) 58%,transparent) 55%,transparent 100%);
}
.feat-in{position:relative;padding:22px}
.feat-in h2{font-size:28px;margin:8px 0 10px;max-width:30ch}
.feat-in p{font-size:14px;color:var(--text-2);max-width:52ch}

/* liste news compacte (colonne de droite) */
.nrow{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.nrow:last-child{border-bottom:0}
.nrow .thumb{width:92px;flex:0 0 92px;border-radius:var(--r-btn);margin:0}
.nrow-in{min-width:0}
.nrow-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.nrow-cat{
  font:700 9.5px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;
  color:var(--violet-light);
}
.nrow-date{font:500 10.5px/1 var(--f-ui);color:var(--text-3)}
.nrow h3{font:600 13.5px/1.35 var(--f-ui);color:var(--text)}
.nrow:hover h3{color:var(--violet-light)}

/* --------------------------------------------------------------------------
   Tableaux
   -------------------------------------------------------------------------- */

.tbl{width:100%;border-collapse:collapse}
.tbl th{
  font:600 10px/1 var(--f-ui);letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);text-align:left;
  padding:10px 12px;border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.tbl td{
  padding:11px 12px;border-bottom:1px solid var(--line-soft);
  font:500 13px/1.3 var(--f-ui);color:var(--text-2);
  vertical-align:middle;
}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--card-hover)}
.tbl .num{
  font-family:var(--f-title);font-weight:700;font-size:15px;color:var(--text);
  text-align:right;
}
.tbl .rank{
  font-family:var(--f-title);font-weight:700;font-size:15px;
  color:var(--text-3);width:34px;
}
.tbl .t-cell{display:flex;align-items:center;gap:9px}
.tbl .t-cell span{
  font-family:var(--f-title);font-weight:700;font-size:13.5px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--text);
}
.tbl-scroll{overflow-x:auto}

/* --------------------------------------------------------------------------
   Onglets
   -------------------------------------------------------------------------- */

.tabs{
  display:flex;gap:2px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:5px;margin:0 0 22px;overflow-x:auto;
}
.tabs a{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  flex:1 1 auto;white-space:nowrap;
  padding:11px 14px;border-radius:var(--r-btn);
  font:600 12px/1 var(--f-ui);letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-3);
}
.tabs a svg{width:15px;height:15px}
.tabs a:hover{color:var(--text);background:var(--card-hover)}
.tabs a.is-active{background:var(--violet);color:#fff}

/* onglets legers (filtres) */
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{
  padding:7px 13px;border-radius:var(--r-btn);
  border:1px solid var(--line);background:transparent;
  font:600 11.5px/1 var(--f-ui);letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-3);cursor:pointer;
}
.chip:hover{color:var(--text);border-color:#2B3850}
.chip[data-on="1"]{background:var(--violet);border-color:var(--violet);color:#fff}

/* --------------------------------------------------------------------------
   Stat cards / progress
   -------------------------------------------------------------------------- */

.stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
  padding:15px;
}
.stat-val{
  font-family:var(--f-title);font-weight:700;font-size:26px;line-height:1;
  color:var(--text);
}
.stat-lbl{
  font:600 9.5px/1.3 var(--f-ui);letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);margin-top:7px;
}
.stat-delta{font:600 11px/1 var(--f-ui);margin-top:6px}

.bar{height:6px;border-radius:3px;background:var(--line-soft);overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:var(--violet)}
.bar-split{display:flex;height:6px;border-radius:3px;overflow:hidden}
.bar-split i{display:block;height:100%}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero{
  position:relative;
  min-height:420px;
  display:flex;align-items:center;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-shade{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 40%,rgba(117,71,245,.20),transparent 62%),
    linear-gradient(90deg,var(--shade-1) 20%,color-mix(in srgb,var(--shade-1) 72%,transparent) 55%,color-mix(in srgb,var(--shade-1) 50%,transparent) 100%),
    linear-gradient(0deg,var(--shade-1) 2%,transparent 42%);
}
.hero-in{position:relative;width:100%;padding:52px 0}
.hero-grid{display:grid;grid-template-columns:1fr 400px;gap:36px;align-items:center}
.hero h1{font-size:60px;letter-spacing:.005em}
.hero h1 em{
  display:block;font-style:italic;color:var(--violet-light);
  text-shadow:0 0 34px rgba(117,71,245,.4);
}
.hero-sub{font:400 16px/1.55 var(--f-ui);color:var(--text-2);margin:16px 0 24px;max-width:44ch}
.hero-cta{display:flex;gap:11px;flex-wrap:wrap}
.hero-live{
  display:inline-flex;align-items:center;gap:14px;
  margin-top:34px;padding:10px 14px;
  background:color-mix(in srgb,var(--card) 88%,transparent);border:1px solid var(--line);
  border-radius:var(--r-card);
  font:600 11.5px/1 var(--f-ui);letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-2);
}
.hero-live .sep{width:1px;height:14px;background:var(--line)}
.hero-live b{color:var(--live);font-weight:700}

/* hero secondaire : jeu, competition, joueur */
.phero{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-box);
  background:var(--card-hover);
}
.phero-bg{position:absolute;inset:0}
.phero-bg img{width:100%;height:100%;object-fit:cover;opacity:var(--hero-veil)}
.phero-shade{
  position:absolute;inset:0;
  background:
    radial-gradient(90% 120% at 12% 50%,rgba(117,71,245,.18),transparent 60%),
    linear-gradient(90deg,var(--shade-1) 12%,color-mix(in srgb,var(--shade-1) 70%,transparent) 62%,color-mix(in srgb,var(--shade-1) 45%,transparent) 100%);
}
.phero-in{position:relative;padding:26px}

/* --------------------------------------------------------------------------
   Grilles
   -------------------------------------------------------------------------- */

.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.split{display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:start}
.split-l{display:grid;grid-template-columns:380px 1fr;gap:22px;align-items:start}
.stack{display:grid;gap:18px}
main{padding:26px 0 60px}

/* --------------------------------------------------------------------------
   Bandeau CTA
   -------------------------------------------------------------------------- */

.cta-band{
  position:relative;overflow:hidden;
  border:1px solid var(--violet-dark);border-radius:var(--r-box);
  background:linear-gradient(90deg,color-mix(in srgb,var(--violet) 22%,var(--card)),var(--card) 62%,var(--card));
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 26px;
}
.cta-band h3{font-size:24px;font-style:italic;letter-spacing:.03em}
.cta-band p{margin:7px 0 0;font-size:13.5px;color:var(--text-2)}

/* --------------------------------------------------------------------------
   Bloc operateurs (gate week-end + mobile)
   -------------------------------------------------------------------------- */

.odds-row{
  display:grid;grid-template-columns:96px 1fr 1fr auto;
  align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--line-soft);
}
.odds-row:last-child{border-bottom:0}
.odds-book{
  font-family:var(--f-title);font-weight:700;font-size:15px;
  color:var(--text);letter-spacing:.03em;
}
.odds-pick{display:flex;align-items:center;gap:8px;font:600 13px/1 var(--f-ui);color:var(--text-2)}
.legal-18{
  display:flex;align-items:center;gap:8px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);
  font:500 11px/1.4 var(--f-ui);color:var(--text-3);
}
.legal-18 b{
  display:inline-grid;place-items:center;
  width:20px;height:20px;border-radius:50%;
  border:1px solid var(--text-3);font:700 9px/1 var(--f-ui);
  flex:0 0 auto;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer{
  position:relative;overflow:hidden;
  border-top:1px solid var(--line);
  background:var(--bg-2);
  margin-top:40px;
}
.footer-in{position:relative;display:grid;grid-template-columns:1fr repeat(4,150px);gap:28px;padding:34px 0 26px}
.footer-about p{font:400 12.5px/1.6 var(--f-ui);color:var(--text-3);margin:12px 0 14px;max-width:30ch}
.footer-col h4{
  font:700 10px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text);margin:0 0 12px;font-family:var(--f-ui);
}
.footer-col a{display:block;font:400 12.5px/1 var(--f-ui);color:var(--text-3);padding:6px 0}
.footer-col a:hover{color:var(--text-2)}
.socials{display:flex;gap:12px}
.socials a{color:var(--text-3)}
.socials a:hover{color:var(--violet-light)}
.socials svg{width:17px;height:17px}
.footer-legal{
  border-top:1px solid var(--line);
  padding:14px 0;
  font:400 11.5px/1 var(--f-ui);color:var(--text-3);text-align:center;
}

/* --------------------------------------------------------------------------
   Divers
   -------------------------------------------------------------------------- */

.muted{color:var(--text-3)}
.small{font-size:12px}
.center{text-align:center}
.mt0{margin-top:0}
.sep-line{height:1px;background:var(--line);margin:26px 0}
.scroll-x{overflow-x:auto;scrollbar-width:thin}

.spark{width:100%;height:58px;display:block}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width:1180px){
  .hero-grid{grid-template-columns:1fr 340px}
  .split{grid-template-columns:1fr 330px}
  .split-l{grid-template-columns:330px 1fr}
  .g5{grid-template-columns:repeat(3,1fr)}
  .footer-in{grid-template-columns:1fr repeat(3,140px)}
}

@media (max-width:980px){
  /* le menu passe en burger : la nav n'est jamais masquee sans secours */
  .burger-btn{
    display:grid;place-items:center;
    width:34px;height:34px;border:1px solid var(--line);
    background:transparent;border-radius:var(--r-btn);
    color:var(--text);cursor:pointer;order:3;
  }
  .burger-btn svg{width:17px;height:17px}
  /* `position:absolute` et non `fixed` : .site-header porte un backdrop-filter,
     ce qui en fait le bloc conteneur de ses descendants fixed — un panneau en
     `fixed` s'y retrouve ecrase a la hauteur du header au lieu de couvrir l'ecran. */
  .nav{
    position:absolute;top:100%;left:0;right:0;
    max-height:calc(100vh - var(--header-h));
    display:none;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg-2);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:8px 20px 24px;
    overflow-y:auto;
  }
  .burger:checked ~ .nav{display:flex}
  .nav > a,.nav-drop > button{
    padding:15px 0;font-size:14px;
    border-bottom:1px solid var(--line-soft);width:100%;
  }
  .nav > a.is-active::after{display:none}
  .nav > a.is-active{color:var(--violet-light)}
  .nav-drop{width:100%}
  .nav-drop > button{justify-content:space-between}
  .nav-drop-menu{
    position:static;display:block;
    border:0;background:transparent;padding:0 0 8px 12px;
  }
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .split,.split-l{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .footer-in{grid-template-columns:repeat(2,1fr);gap:22px}
  .footer-about{grid-column:1/-1}
}

@media (max-width:720px){
  h1{font-size:38px}
  h2{font-size:26px}
  .hero h1{font-size:40px}
  .hero{min-height:0}
  .hero-in{padding:34px 0}
  .g2,.g3,.g5{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .feat-in h2{font-size:22px}
  .cta-band{flex-direction:column;align-items:flex-start;text-align:left}
  .odds-row{grid-template-columns:1fr auto;row-gap:8px}
  .odds-book{grid-column:1/-1}
  .tabs{border-radius:var(--r-card)}
  .hero-live{flex-wrap:wrap;gap:9px}
}

@media (max-width:520px){
  .wrap{padding:0 14px}
  .g4{grid-template-columns:1fr}
  .nrow .thumb{width:76px;flex:0 0 76px}
  .mcard-body{padding:13px 9px}
  .footer-in{grid-template-columns:1fr}
}

/* Drapeau de pays. La police emoji est indispensable : sans elle, Windows
   affiche le code du pays en toutes lettres a la place du drapeau. */
.flag{
  font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif;
  font-size:1.05em;line-height:1;
  display:inline-block;vertical-align:-0.08em;
}

/* Pastille de role (Top, Jungle, Mid, Bot, Support). */
.role{
  display:inline-flex;align-items:center;gap:6px;
  font:600 12px/1 var(--f-ui);color:var(--text-2);white-space:nowrap;
}
.role svg{width:15px;height:15px;flex:0 0 auto;color:var(--violet-light)}
.role-lbl{font-weight:600}

/* Barre de filtres des annuaires */
.filters{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 16px;margin:0 0 18px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
}
.filters label{
  display:flex;align-items:center;gap:7px;
  font:600 10px/1 var(--f-ui);letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);
}
.filters select,.filters input{
  font:500 13px/1 var(--f-ui);
  padding:8px 10px;border-radius:var(--r-btn);
  border:1px solid var(--line);background:var(--bg-2);color:var(--text);
  min-width:130px;
}
.filters input{min-width:190px}
.filters select:focus,.filters input:focus{outline:none;border-color:var(--violet)}
.filters-count{margin-left:auto;font:500 12px/1 var(--f-ui);color:var(--text-3)}

/* En-tetes de tableau triables */
.tbl th[data-sort]{cursor:pointer;user-select:none;white-space:nowrap}
.tbl th[data-sort]:hover{color:var(--text)}
.tbl th[data-sort]::after{content:"  ";color:var(--text-3);font-size:9px}
.tbl th[data-sort][data-dir="asc"]::after{content:" ▲";color:var(--violet-light)}
.tbl th[data-sort][data-dir="desc"]::after{content:" ▼";color:var(--violet-light)}

/* --------------------------------------------------------------------------
   Cibles d'ancre.
   L'en-tête est collant (56 px + 38 px de barre de ligues) : sans cette marge,
   cliquer sur un onglet fait atterrir le titre de la section DERRIÈRE l'en-tête,
   et le lecteur croit que le lien n'a rien fait.
   -------------------------------------------------------------------------- */

html{scroll-behavior:smooth}

[id="composition"],[id="stats"],[id="h2h"],[id="manches"],
[id="calendrier"],[id="bracket"],[id="equipes"],[id="resultats"],
[id="classement"],[id="effectif"],[id="matchs"],[id="parcours"],
[id="palmares"],[id="actus"]{
  scroll-margin-top:calc(var(--header-h) + 52px);
}

/* Une section que l'on vient d'atteindre se signale brièvement, sinon rien ne
   distingue « la page a scrollé » de « il ne s'est rien passé ». */
@keyframes anchor-hint{
  from{box-shadow:0 0 0 2px var(--violet)}
  to{box-shadow:0 0 0 2px transparent}
}
:target{animation:anchor-hint 1.4s ease-out}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  :target{animation:none}
}

/* ==========================================================================
   ⚠️ Ces trois blocs ont déjà été perdus une fois : un remplacement de texte
   portant sur « tout ce qui suit un marqueur » a tronqué la fin du fichier,
   et la barre de ligues comme le bracket se sont retrouvés sans style sur les
   1029 pages, sans qu'aucun test ne le voie. Ne jamais réécrire ce fichier par
   tranche ouverte — modifier une règle précise, ou ajouter à la fin.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Barre de ligues — sous l'en-tête, sur toutes les pages
   -------------------------------------------------------------------------- */

.lg-bar{
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg-2) 70%, var(--bg));
}
.lg-bar-in{
  display:flex;align-items:center;gap:6px;
  height:38px;overflow-x:auto;scrollbar-width:none;
}
.lg-bar-in::-webkit-scrollbar{display:none}
.lg-bar-lbl{
  font:700 9.5px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);flex:0 0 auto;margin-right:6px;
}
.lg-bar-in > a{
  display:inline-flex;align-items:baseline;gap:6px;flex:0 0 auto;
  padding:6px 11px;border-radius:var(--r-btn);
  font:700 12.5px/1 var(--f-title);letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-2);white-space:nowrap;
}
.lg-bar-in > a i{
  font:500 9.5px/1 var(--f-ui);font-style:normal;letter-spacing:.04em;
  color:var(--text-3);text-transform:none;
}
.lg-bar-in > a:hover{background:var(--card-hover);color:var(--text)}
.lg-bar-in > a.is-on{background:var(--violet);color:#fff}
.lg-bar-in > a.is-on i{color:rgba(255,255,255,.75)}
.lg-bar-all{
  margin-left:auto;flex:0 0 auto;
  color:var(--violet-light)!important;
  font-family:var(--f-ui)!important;font-size:11px!important;
  text-transform:none!important;letter-spacing:.02em!important;
}
.lg-bar-all svg{width:12px;height:12px}

@media (max-width:720px){
  .lg-bar-lbl{display:none}
  .lg-bar-all{margin-left:0}
}

/* --------------------------------------------------------------------------
   Bracket — arbre de phase finale
   -------------------------------------------------------------------------- */

.bk-scroll{overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.bk{display:flex;gap:14px;min-width:min-content;padding:2px}
.bk-col{display:flex;flex-direction:column;min-width:196px;flex:0 0 196px}
.bk-col-hd{
  font:700 10px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);padding:0 0 10px;text-align:center;
}
.bk-col-body{
  display:flex;flex-direction:column;justify-content:space-around;
  gap:10px;flex:1 1 auto;
}
.bk-match{
  display:block;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
}
.bk-match:hover{border-color:var(--violet)}
.bk-team{display:flex;align-items:center;gap:8px;padding:8px 10px}
.bk-team + .bk-team{border-top:1px solid var(--line-soft)}
.bk-name{
  flex:1 1 auto;min-width:0;
  font:600 12.5px/1.2 var(--f-ui);color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bk-score{
  font:700 14px/1 var(--f-title);color:var(--text-3);
  flex:0 0 auto;min-width:14px;text-align:right;
}
.bk-win{background:color-mix(in srgb, var(--violet) 8%, transparent)}
.bk-win .bk-name{color:var(--text)}
.bk-win .bk-score{color:var(--violet-light)}

@media (max-width:720px){
  .bk-col{min-width:168px;flex:0 0 168px}
}

/* --------------------------------------------------------------------------
   Portrait de joueur
   -------------------------------------------------------------------------- */

.pf-photo{
  flex:0 0 120px;width:120px;height:150px;
  display:grid;place-items:center;overflow:hidden;
  background:var(--card-hover);
  border:1px solid var(--line);
  border-radius:var(--r-card);
}
.pf-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.pf-ini{font:700 40px/1 var(--f-title);color:var(--text-3)}

/* --------------------------------------------------------------------------
   Débordement horizontal : un enfant de grille garde min-width:auto et se
   laisse élargir par une table interne. Mesuré à 402-407 px pour 390 px de
   viewport avant ce correctif.
   -------------------------------------------------------------------------- */

.g2,.g3,.g4,.g5,.split,.split-l,.stack{min-width:0}
.g2 > *,.g3 > *,.g4 > *,.g5 > *,.split > *,.split-l > *,.stack > *{min-width:0}
.split{grid-template-columns:minmax(0,1fr) 380px}
.split-l{grid-template-columns:380px minmax(0,1fr)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}

@media (max-width:1180px){
  .split{grid-template-columns:minmax(0,1fr) 330px}
  .split-l{grid-template-columns:330px minmax(0,1fr)}
  .g5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:980px){
  .split,.split-l{grid-template-columns:minmax(0,1fr)}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .g2,.g3,.g5{grid-template-columns:minmax(0,1fr)}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .g4{grid-template-columns:minmax(0,1fr)}
}

/* Les onglets débordent sur mobile : un dégradé signale qu'il reste à voir. */
.tabs{position:relative}
@media (max-width:820px){
  .tabs{
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
}

/* ==========================================================================
   Correctifs issus de l'audit (contrastes mesurés, spécificités, débordements)
   ========================================================================== */

/* Le token de métadonnée tombait à 3,90:1 sur blanc — sous le seuil lisible.
   Il sert au pied de page, aux en-têtes de tableau, aux mentions légales. */
:root[data-theme="light"]{ --text-3:#5F6875; --line-strong:#C9D1E0; }
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){ --text-3:#5F6875; --line-strong:#C9D1E0; }
}
:root{ --line-strong:#2B3850; }

/* Les fonds d'état étaient figés sur des rgba() pensés pour le thème sombre :
   posés sur du blanc, les pastilles V/D tombaient à 2,97:1. */
:root{
  --tint-win:rgba(55,223,136,.18);
  --tint-loss:rgba(255,77,97,.18);
  --tint-violet:rgba(117,71,245,.16);
  --tint-live:rgba(220,235,53,.14);
}
:root[data-theme="light"]{
  --tint-win:rgba(14,154,87,.14);
  --tint-loss:rgba(214,43,65,.12);
  --tint-violet:rgba(98,49,224,.10);
  --tint-live:rgba(138,122,0,.14);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    --tint-win:rgba(14,154,87,.14);
    --tint-loss:rgba(214,43,65,.12);
    --tint-violet:rgba(98,49,224,.10);
    --tint-live:rgba(138,122,0,.14);
  }
}
.badge-soft{background:var(--tint-violet);color:var(--violet-light)}
.badge-win{background:var(--tint-win);color:var(--win)}
.badge-loss{background:var(--tint-loss);color:var(--loss)}
.badge-tier{background:var(--tint-live);color:var(--live)}
.form-pills .w{background:var(--tint-win);color:var(--win)}
.form-pills .l{background:var(--tint-loss);color:var(--loss)}
.cat-tag,.nrow-cat{color:var(--violet-light)}
.cat-tag{background:var(--tint-violet)}
.odd{background:var(--tint-live);color:var(--live);border-color:var(--tint-live)}
.odd-win{background:var(--tint-win);color:var(--win);border-color:var(--tint-win)}
a.card:hover,.mcard:hover{border-color:var(--line-strong)}
.chip:hover{border-color:var(--line-strong)}

/* `.tbl .num` (0-2-0) écrasait le raccourci `font` de `.tbl th` (0-1-1) :
   « Bilan » et « % » sortaient en Barlow 15 px au milieu d'en-têtes Inter 10 px. */
.tbl th.num{
  font:600 10px/1 var(--f-ui);letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);text-align:right;
}
.tbl td.num{white-space:nowrap}

/* `.tbl .t-cell span` imposait Barlow + uppercase à TOUT span descendant,
   drapeaux compris : le même 🇫🇷 sortait en « FR » dans les tableaux et
   correctement ailleurs. */
.tbl .t-cell .flag,.tbl .flag,.flag{
  font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif;
  text-transform:none;letter-spacing:normal;
}

/* Le fil d'Ariane utilisait une couleur de BORDURE comme couleur de texte :
   le chevron ressortait à 1,2:1, invisible. */
.crumb i{color:var(--text-3)}

/* `.sec-head` était un flex sans retour à la ligne : le lien « voir plus »
   (170 px incompressibles) poussait la largeur minimale de la section au-delà
   du viewport et provoquait un défilement horizontal jusqu'à +31 px. */
.sec-head{flex-wrap:wrap}
.sec-title{min-width:0}

/* Un logo en portrait débordait de sa pastille : `max-height` est sans effet
   sur un item de grille en hauteur automatique. */
.tlogo img{width:100%;height:100%;object-fit:contain}

/* Pastille des logos : assez claire pour qu'un logo noir se lise sur fond
   sombre, sans virer au carré blanc éclatant que les maquettes n'ont pas. */
:root{ --logo-bg:#DCE2EE; }
:root[data-theme="light"]{ --logo-bg:#EDF0F6; }
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){ --logo-bg:#EDF0F6; }
}
:root[data-theme="light"] .tlogo:has(img){border:1px solid var(--line-soft)}

/* En-tête de carte match : deux libellés longs se chevauchaient dès 1360 px. */
.mcard-hd{gap:8px}
.mcard-hd strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mcard-hd > span:last-child{flex:0 0 auto;white-space:nowrap}

/* Le score est l'information numéro un de la fiche : le design system demande
   48-64 px, il était rendu à 44. */
.match-score{font:700 56px/1 var(--f-title);color:var(--text)}
@media (max-width:720px){ .match-score{font-size:42px} }

/* Titres de fiche : cinq tailles différentes en style inline, alors que le
   design system en impose une. */
.h1-fiche{font-size:46px;text-transform:uppercase;letter-spacing:.02em}
@media (max-width:720px){ .h1-fiche{font-size:34px} }

/* En-têtes de tableau triables : le libellé est un bouton, pour le clavier. */
.tbl th[data-sort] button{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
}
.tbl th[data-sort] button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.tbl th[aria-sort="ascending"]::after{content:" ▲";color:var(--violet-light);font-size:9px}
.tbl th[aria-sort="descending"]::after{content:" ▼";color:var(--violet-light);font-size:9px}

/* Champ de recherche : l'anneau de focus natif de Chrome s'affichait au
   chargement à cause de l'autofocus. */
#q:focus{outline:none;border-color:var(--violet)}

/* Focus visible partout : la navigation au clavier n'en avait aucun. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--violet);outline-offset:2px;border-radius:3px;
}

/* Les statistiques joueur formaient une rangée de 4 + une tuile orpheline. */
.g5-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
@media (max-width:980px){ .g5-stats{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .g5-stats{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Icône sociale sans compte associé : présente dans l'identité visuelle, mais
   inerte. Un lien vers « # » est un lien mort ; un span ne promet rien. */
.soc-soon{
  color:var(--text-3);
  display:inline-flex;align-items:center;
  cursor:default;opacity:.55;
}
.soc-soon svg{width:17px;height:17px}

/* ----------------------------------------------- opérateurs partenaires */
/* Ces blocs ne sont servis que le week-end et sur mobile (functions/_middleware.js).
   Ils sont malgré tout écrits pour tenir sur une largeur d'écran quelconque :
   le jour où la règle change, rien n'est à refaire ici. */

.op-block{margin:32px 0 8px}
.op-hd{margin-bottom:16px}
.op-hd h2{
  font:italic 700 22px/1.1 var(--f-display);
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;
}
.op-hd p{font-size:14px;line-height:1.6;max-width:72ch}

.op-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}

.op-card{
  display:flex;flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:18px;
}
.op-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.op-logo{
  font:italic 700 19px/1 var(--f-display);
  text-transform:uppercase;letter-spacing:.02em;color:var(--text);
}
.op-rang{
  display:inline-grid;place-items:center;
  min-width:26px;height:22px;padding:0 6px;border-radius:6px;
  background:color-mix(in srgb, var(--violet) 16%, transparent);
  color:var(--violet-light);
  font:700 11px/1 var(--f-ui);letter-spacing:.04em;
  flex:0 0 auto;
}
.op-accroche{color:var(--text-2);font-size:14px;line-height:1.6;margin:0 0 12px}

.op-atouts{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:7px}
.op-atouts li{
  display:flex;align-items:flex-start;gap:8px;
  color:var(--text-2);font-size:13.5px;line-height:1.5;
}
.op-atouts svg{width:15px;height:15px;color:var(--violet-light);flex:0 0 auto;margin-top:2px}

/* Le bouton est poussé en bas : deux cartes côte à côte alignent leur CTA même
   quand l'une porte une accroche plus longue que l'autre. */
.op-cta{margin-top:auto;justify-content:center;gap:8px}
.op-cta svg{width:15px;height:15px}
.op-legal{margin-top:9px;text-align:center;font:500 10.5px/1.3 var(--f-ui);color:var(--text-3)}

/* ------------------------------------------------------- appel à l'action */

.cta-parier{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;align-self:start;
  margin:0 0 18px;padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--r-card);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--violet) 10%, transparent),
    color-mix(in srgb, var(--violet) 3%, transparent));
}
.cta-parier-txt{
  flex:1 1 200px;
  font:600 14.5px/1.35 var(--f-ui);color:var(--text);
}
.cta-parier .btn{flex:0 0 auto}
.cta-parier-legal{
  flex:1 1 100%;
  font:500 10.5px/1.3 var(--f-ui);color:var(--text-3);
}

@media (max-width:900px){
  .op-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cta-parier{flex-direction:column;align-items:stretch;text-align:center}
  /* En colonne, le flex-grow du texte joue sur la hauteur : sans cette
     remise a zero, le bandeau s'etire et laisse un trou entre l'accroche
     et le bouton des que le parent impose une hauteur. */
  .cta-parier-txt{flex:0 0 auto}
  .cta-parier .btn{width:100%;justify-content:center}
}