/* mk-table.css — tableaux MkFunded (lot 44).
   Un seul système pour tous les tableaux du site : cadre en relief, en-tête qui
   reste en haut, première colonne qui reste à gauche, lignes qui se révèlent en
   cascade, et squelettes de chargement pour que l'intérieur du tableau se
   remplisse pour son propre compte. Aucune dépendance : les variables du thème
   sont utilisées quand elles existent, sinon les valeurs de repli s'appliquent. */

/* ---- Palette : clair par défaut, puis les pages sombres, puis le thème clair
        explicite qui a le dernier mot (il est déclaré sur <html>, le plus loin). ---- */
:root{
  --mkt-pan:#ffffff;
  --mkt-pan2:#f7f9ff;
  --mkt-head:#f1f5ff;
  --mkt-head2:#e8eeff;
  --mkt-ink:#0b1330;
  --mkt-mut:#5b6785;
  --mkt-line:#e3e9f7;
  --mkt-zeb:rgba(10,85,255,.028);
  --mkt-hov:rgba(10,85,255,.07);
  --mkt-hi:#e9f0ff;
  --mkt-hi-ink:#0b3bc2;
  --mkt-acc:#0a55ff;
  --mkt-sh:rgba(11,25,70,.16);
  --mkt-rim:rgba(10,85,255,.3);
  --mkt-top:rgba(255,255,255,.9);
  --mkt-skb:#e7edf9;
  --mkt-skh:#f6f9ff;
  --mkt-box:0 1px 2px rgba(13,22,48,.06), 0 14px 34px -22px rgba(13,22,48,.35);
}
html[data-mkt=dark],body.cp,body.cine,body.mk-dark,html[data-t=dark]{
  --mkt-pan:#061232;
  --mkt-pan2:#081838;
  --mkt-head:#0a1c47;
  --mkt-head2:#07163a;
  --mkt-ink:#e9eefb;
  --mkt-mut:#9fb2d8;
  --mkt-line:rgba(126,165,255,.14);
  --mkt-zeb:rgba(126,165,255,.035);
  --mkt-hov:rgba(95,152,255,.1);
  --mkt-hi:rgba(95,152,255,.14);
  --mkt-hi-ink:#bcd4ff;
  --mkt-acc:#5f98ff;
  --mkt-sh:rgba(0,4,22,.7);
  --mkt-rim:rgba(126,165,255,.3);
  --mkt-top:rgba(170,200,255,.16);
  --mkt-skb:rgba(126,165,255,.09);
  --mkt-skh:rgba(126,165,255,.2);
  --mkt-box:0 1px 2px rgba(0,4,22,.5), 0 18px 40px -26px rgba(0,4,22,.9);
}
html[data-t=light]{
  --mkt-pan:#ffffff;--mkt-pan2:#f7f9ff;--mkt-head:#f1f5ff;--mkt-head2:#e8eeff;
  --mkt-ink:#0b1330;--mkt-mut:#5b6785;--mkt-line:#e3e9f7;--mkt-zeb:rgba(10,85,255,.028);
  --mkt-hov:rgba(10,85,255,.07);--mkt-hi:#e9f0ff;--mkt-hi-ink:#0b3bc2;--mkt-acc:#0a55ff;
  --mkt-sh:rgba(11,25,70,.16);--mkt-rim:rgba(10,85,255,.3);--mkt-top:rgba(255,255,255,.9);
  --mkt-skb:#e7edf9;--mkt-skh:#f6f9ff;
  --mkt-box:0 1px 2px rgba(13,22,48,.06), 0 14px 34px -22px rgba(13,22,48,.35);
}

/* ---- Le cadre : une plaque en relief, pas un simple rectangle ---- */
.mkt-box{
  position:relative;border-radius:18px;background:var(--mkt-pan);
  border:1px solid var(--mkt-line);box-shadow:var(--mkt-box);
  isolation:isolate;overflow:hidden}
/* liseré clair en haut : c'est lui qui donne l'épaisseur à la plaque */
.mkt-box::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;
  background:linear-gradient(180deg,var(--mkt-top),transparent 2px);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
/* halo d'accent, discret, dans le coin supérieur gauche */
.mkt-box::after{
  content:'';position:absolute;left:0;top:0;width:52%;height:3px;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,var(--mkt-rim),transparent);opacity:.75}

/* ---- La zone de défilement, avec ses ombres de bord ---- */
.mkt-wrap{
  position:relative;overflow:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  background-image:
    linear-gradient(90deg,var(--mkt-pan),rgba(255,255,255,0)),
    linear-gradient(270deg,var(--mkt-pan),rgba(255,255,255,0)),
    radial-gradient(farthest-side at 0 50%,var(--mkt-sh),transparent),
    radial-gradient(farthest-side at 100% 50%,var(--mkt-sh),transparent);
  background-position:0 0,100% 0,0 0,100% 0;
  background-repeat:no-repeat;
  background-size:36px 100%,36px 100%,15px 100%,15px 100%;
  background-attachment:local,local,scroll,scroll}
.mkt-wrap::-webkit-scrollbar{height:8px;width:8px}
.mkt-wrap::-webkit-scrollbar-thumb{background:var(--mkt-line);border-radius:8px}
.mkt-wrap::-webkit-scrollbar-track{background:transparent}

/* ---- Le tableau ---- */
.mkt{
  width:100%;border-collapse:separate;border-spacing:0;
  color:var(--mkt-ink);font-size:14.5px;font-variant-numeric:tabular-nums;background:transparent}
.mkt caption{caption-side:top;text-align:left;padding:.9rem 1.1rem .2rem;color:var(--mkt-mut);font-size:.84rem}

.mkt thead th{
  position:sticky;top:0;z-index:3;
  padding:.82rem 1.05rem;text-align:left;white-space:nowrap;
  font-weight:700;font-size:.84rem;letter-spacing:-.005em;color:var(--mkt-mut);
  background:linear-gradient(180deg,var(--mkt-head),var(--mkt-head2));
  border-bottom:1px solid var(--mkt-line)}
/* trait d'accent sous l'en-tête, qui s'affirme quand on fait défiler */
.mkt thead th::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--mkt-acc),transparent);
  opacity:.35;transition:opacity .3s}
.mkt-box.scrolled .mkt thead th::after{opacity:.9}
.mkt-box.scrolled .mkt thead th{box-shadow:0 10px 18px -14px var(--mkt-sh)}

.mkt tbody td,.mkt tbody th{
  padding:.9rem 1.05rem;border-bottom:1px solid var(--mkt-line);vertical-align:middle;text-align:left}
.mkt tbody th{font-weight:600;color:var(--mkt-ink)}
.mkt tbody tr:last-child>*{border-bottom:0}
.mkt tbody tr>*{background:transparent;transition:background .2s}
.mkt tbody tr:nth-child(even)>*{background:var(--mkt-zeb)}
@media(hover:hover){
  .mkt tbody tr:hover>*{background:var(--mkt-hov)}
  .mkt tbody tr:hover>*:first-child{box-shadow:inset 3px 0 0 var(--mkt-acc)}
}
/* ligne ou cellule mise en avant (le prix, par exemple) */
.mkt tr.hi>*,.mkt td.hi,.mkt th.hi{background:var(--mkt-hi);color:var(--mkt-hi-ink);font-weight:800}
.mkt td.num,.mkt th.num,.mkt [data-num]{text-align:right}
.mkt td.ctr,.mkt th.ctr{text-align:center}

/* ---- Colonnes figées : en-tête ET première colonne, sans fond blanc parasite ---- */
.mkt-stick thead th:first-child{left:0;z-index:5}
.mkt-stick tbody th:first-child,.mkt-stick tbody td:first-child{
  position:sticky;left:0;z-index:2;background:var(--mkt-pan)}
.mkt-stick tbody tr:nth-child(even)>*:first-child{background:var(--mkt-pan2)}
.mkt-stick tbody tr.hi>*:first-child{background:var(--mkt-hi)}
.mkt-stick thead th:first-child,.mkt-stick tbody th:first-child,.mkt-stick tbody td:first-child{
  border-right:1px solid var(--mkt-line)}

/* ---- Révélation en cascade des lignes, une seule fois, au remplissage ---- */
@keyframes mktRow{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mkt-anim tbody tr{animation:mktRow .46s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(26ms * var(--r,0))}

/* ---- Squelette : le tableau se remplit tout seul, ligne par ligne ---- */
.mkt-sk>*{border-bottom:1px solid var(--mkt-line)}
.mkt-sk i{
  display:block;height:11px;border-radius:7px;
  background:linear-gradient(90deg,var(--mkt-skb) 0%,var(--mkt-skh) 45%,var(--mkt-skb) 90%);
  background-size:220% 100%;animation:mktSk 1.3s linear infinite}
.mkt-sk i.w7{width:70%}.mkt-sk i.w5{width:50%}.mkt-sk i.w4{width:38%}.mkt-sk i.w3{width:26%}
.mkt-sk tr:nth-child(2) i{animation-delay:.12s}
.mkt-sk tr:nth-child(3) i{animation-delay:.24s}
.mkt-sk tr:nth-child(4) i{animation-delay:.36s}
.mkt-sk tr:nth-child(5) i{animation-delay:.48s}
@keyframes mktSk{to{background-position:-220% 0}}

/* ---- Tableau vide : un message, pas une plaque vide ---- */
.mkt-empty{padding:2.2rem 1.2rem;text-align:center;color:var(--mkt-mut);font-size:.92rem}
.mkt-empty b{display:block;color:var(--mkt-ink);font-size:1rem;margin-bottom:.25rem}

/* ---- Boutons dans un tableau ---- */
.mkt .cmp-buy,.mkt .mkt-act{
  display:inline-flex;align-items:center;gap:.4rem;border:0;cursor:pointer;
  background:var(--mkt-acc);color:#fff;border-radius:10px;padding:.48rem .9rem;
  font:700 .84rem inherit;transition:transform .2s,box-shadow .2s,filter .2s}
html[data-t=dark] .mkt .cmp-buy,body.cp .mkt .cmp-buy,html[data-t=dark] .mkt .mkt-act{color:#04142f}
.mkt .cmp-buy:hover:not(:disabled),.mkt .mkt-act:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 18px -8px var(--mkt-acc)}
.mkt .cmp-buy:disabled,.mkt .mkt-act:disabled{opacity:.5;cursor:not-allowed}

@media(max-width:700px){
  .mkt{font-size:13.5px}
  .mkt thead th{padding:.7rem .8rem;font-size:.78rem}
  .mkt tbody td,.mkt tbody th{padding:.75rem .8rem}
}
@media(prefers-reduced-motion:reduce){
  .mkt-anim tbody tr{animation:none}
  .mkt-sk i{animation:none}
  .mkt-box::after,.mkt thead th::after{transition:none}
}

/* ---- Le comparatif des challenges : valeurs centrées, intitulés à gauche ---- */
table.cmp.mkt thead th:not(:first-child),table.cmp.mkt tbody td{text-align:center}
table.cmp.mkt tbody th{white-space:normal;min-width:11rem}
table.cmp.mkt{min-width:620px}

/* ---- Le conteneur d'origine s'efface derrière la plaque ---- */
.mkt-host{border:0!important;background:none!important;box-shadow:none!important;padding:0!important;overflow:visible!important}