/* =====================================================================
   Table Hongroise des Porcs - Aerobic Project
   Theme sombre rose/noir, mobile-first.
   ===================================================================== */

:root{
  --color-bg:#0a0a0a;
  --color-bg-2:#1a1a1a;
  --color-surface:#1a1a1a;
  --color-surface-2:#232323;
  --color-accent:#E989C8;
  --color-accent-soft:rgba(233,137,200,0.12);
  --color-text:#f5f5f5;
  --color-muted:#999999;
  --color-border:rgba(255,255,255,0.08);

  --radius:14px;
  --radius-sm:10px;
  --gap:14px;
  --wrap:640px;
  /* hauteur reelle de la barre collante : 10 de padding haut + 52 de bouton
     + le padding bas, qui suit la safe-area iPhone */
  --cta-h:calc(62px + max(12px, env(safe-area-inset-bottom)));

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

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

/* [hidden] doit toujours gagner, meme sur un display:flex */
[hidden]{display:none!important}

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

body{
  margin:0;
  /* de quoi lire la derniere ligne du classement / du bareme au-dessus du CTA */
  padding-bottom:calc(var(--cta-h) + 28px);
  background:var(--color-bg);
  background-image:
    radial-gradient(120% 60% at 50% -10%, rgba(233,137,200,.13), transparent 60%);
  background-repeat:no-repeat;
  color:var(--color-text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
svg use,.sprite symbol{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

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

h1,h2,h3,p,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
strong{font-weight:650}

/* ---------------------------------------------------------------- header */
.hdr{padding:26px 0 18px;border-bottom:1px solid var(--color-border)}
/* Titre : allure "cotation officielle", condense et serre.
   Pas de webfont : on tire sur la graisse et le tracking des polices systeme
   (une dependance Google Fonts pour un seul H1 ne vaut pas le coup ici). */
.hdr__title{
  font-size:1.6rem;line-height:1.1;font-weight:800;letter-spacing:-.035em;
  font-stretch:condensed;                /* utilise si la police systeme le propose */
  text-transform:uppercase;
}
.hdr__pig{filter:saturate(1.1)}
.hdr__sub{margin-top:6px;color:var(--color-muted);font-size:.82rem;letter-spacing:.02em}
.hdr__sub strong{color:var(--color-accent)}
.dot{opacity:.45;padding:0 2px}

/* ----------------------------------------------------------------- tabs */
.tabs{
  position:sticky;top:0;z-index:30;
  display:flex;gap:4px;
  margin:0 auto;padding:8px 12px;
  background:rgba(10,10,10,.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--color-border);
}
.tab{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;                       /* cible tactile */
  padding:9px 4px;border-radius:var(--radius-sm);
  color:var(--color-muted);font-size:.8rem;font-weight:600;
  transition:background .15s,color .15s,transform .14s ease;
}
.tab:active{transform:scale(.97)}
.tab__ico{width:17px;height:17px;flex:none}
.tab.is-active{background:var(--color-accent-soft);color:var(--color-accent)}

/* -------------------------------------------------------------- sections */
main{padding-top:20px}
.tabpane{animation:fade .18s ease-out}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.sec{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:26px 0 12px;font-size:.76rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--color-muted);
}
.sec:first-child{margin-top:0}
.sec em{font-style:normal;font-family:var(--mono);font-size:.72rem;color:var(--color-accent);letter-spacing:0}

.note{margin:-2px 0 12px;color:var(--color-muted);font-size:.8rem;line-height:1.5}
.note--center{text-align:center;margin:12px 0 0}

/* ---------------------------------------------------- porcs de la periode */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.hero__card{
  position:relative;overflow:hidden;
  padding:12px 12px 13px;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius);
}
.hero__card--week{
  background:linear-gradient(160deg,rgba(233,137,200,.16),var(--color-surface) 72%);
  border-color:rgba(233,137,200,.30);
}
.hero__card--month{
  background:linear-gradient(160deg,rgba(255,200,110,.12),var(--color-surface) 72%);
  border-color:rgba(255,200,110,.24);
}
.hero__lbl{
  font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--color-muted);
}
.hero__card--week .hero__lbl{color:var(--color-accent)}
.hero__card--month .hero__lbl{color:#ffd479}
.hero__name{
  margin-top:7px;font-size:1.02rem;font-weight:750;letter-spacing:-.015em;line-height:1.15;
  overflow-wrap:anywhere;
}
.hero__pts{margin-top:3px;font-family:var(--mono);font-size:.86rem;font-weight:700;color:var(--color-accent)}
.hero__card--month .hero__pts{color:#ffd479}
.hero__nb{display:block;font-family:var(--mono);font-size:.62rem;font-weight:500;color:var(--color-muted)}
.hero__empty{margin-top:7px;font-size:.92rem;font-weight:650;color:#cfcfcf}
.hero__sub{margin-top:2px;font-size:.66rem;color:var(--color-muted)}

/* ------------------------------------------------ selecteur de periode */
.seg{
  display:grid;grid-template-columns:repeat(3,1fr);gap:3px;
  margin-bottom:4px;padding:3px;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
}
.seg__btn{
  min-height:44px;                       /* cible tactile */
  padding:9px 4px;border-radius:8px;
  font-size:.8rem;font-weight:650;color:var(--color-muted);
  transition:background .15s,color .15s,transform .14s ease;
}
.seg__btn.is-active{background:var(--color-accent-soft);color:var(--color-accent)}
.seg__btn:active{transform:scale(.97);background:var(--color-surface-2)}

/* ------------------------------------------------------------- stats row */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:22px}
.stat{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-sm);padding:11px 10px;text-align:center;
}
.stat__val{display:block;font-family:var(--mono);font-size:1.15rem;font-weight:700;color:var(--color-accent)}
.stat__lbl{display:block;margin-top:2px;font-size:.63rem;text-transform:uppercase;letter-spacing:.1em;color:var(--color-muted)}

/* --------------------------------------------------------------- podium */
.podium{
  display:grid;grid-template-columns:1fr 1.18fr 1fr;align-items:end;gap:6px;
  margin-bottom:10px;
}
.pod{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:11px 6px 12px;text-align:center;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius);
  min-width:0;
  transition:background .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.pod__medal{font-size:1.1rem;line-height:1}
.pod__name{
  font-size:.8rem;font-weight:700;letter-spacing:-.01em;line-height:1.15;
  overflow-wrap:anywhere;
}
.pod__pts{font-family:var(--mono);font-size:1.05rem;font-weight:750;line-height:1.1}
.pod__grade{font-size:.6rem;padding:1px 6px;max-width:100%;overflow:hidden}

/* 1er : plus haut, plus grand, halo or */
.pod--1{
  padding:16px 6px 14px;
  background:linear-gradient(180deg,rgba(233,184,76,.18),var(--color-surface) 72%);
  border-color:rgba(233,184,76,.45);
  box-shadow:0 0 18px rgba(233,184,76,.16);
}
.pod--1 .pod__medal{font-size:1.5rem}
.pod--1 .pod__name{font-size:.92rem}
.pod--1 .pod__pts{font-size:1.35rem;color:#E9B84C}
/* 2e : argent */
.pod--2{
  background:linear-gradient(180deg,rgba(200,205,215,.14),var(--color-surface) 72%);
  border-color:rgba(200,205,215,.32);
}
.pod--2 .pod__pts{color:#ccd2dc}
/* 3e : bronze */
.pod--3{
  background:linear-gradient(180deg,rgba(198,124,78,.16),var(--color-surface) 72%);
  border-color:rgba(198,124,78,.34);
}
.pod--3 .pod__pts{color:#d59468}

/* ------------------------------------------------------------ classement */
.board{display:flex;flex-direction:column;gap:6px}
.row{
  display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;
  padding:8px 12px;                       /* densite : 5-6 lignes par ecran mobile */
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius);
  transition:transform .14s ease,background .2s ease,box-shadow .2s ease;
}
.row__mid{min-width:0}
.row:active{transform:scale(.985)}
.row--top{
  background:linear-gradient(180deg,var(--color-accent-soft),var(--color-surface) 70%);
  border-color:rgba(233,137,200,.28);
  box-shadow:0 0 14px rgba(233,137,200,.10);
}
.row--zero{opacity:.5}

/* Flash sur la ligne — ou la marche de podium — qui vient de prendre des points */
.row.is-hit,.pod.is-hit{
  background:linear-gradient(180deg,rgba(233,137,200,.30),var(--color-surface) 80%);
  border-color:var(--color-accent);
  box-shadow:0 0 22px rgba(233,137,200,.35);
  animation:hit .55s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes hit{0%{transform:scale(1)}40%{transform:scale(1.035)}100%{transform:scale(1)}}

/* Ligne repliee : "+ N encore propres cette semaine" */
.fold{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 12px;margin-top:2px;
  border:1px dashed var(--color-border);border-radius:var(--radius);
  color:var(--color-muted);font-size:.76rem;font-weight:600;
}
.fold__ico{opacity:.8}
.row__rank{
  font-family:var(--mono);font-size:.95rem;font-weight:700;text-align:center;color:var(--color-muted);
}
.row--top .row__rank{font-size:1.15rem}
.row__name{font-weight:650;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------------------------------------------------------------------
   Badges de grade : une teinte par palier, du gris au rose puis a l'or.
   La progression doit se lire d'un coup d'oeil. Meme palette partout
   (classement, podium, legende des grades).
   --------------------------------------------------------------------- */
.row__grade,.pod__grade,.grades__badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.68rem;font-weight:600;letter-spacing:.02em;
  padding:2px 7px;border-radius:99px;
  background:var(--color-surface-2);color:var(--color-muted);
  border:1px solid var(--color-border);
}
.row__grade{margin-top:3px}

/* 0 - Encore propre : gris muted */
[data-tier="0"]{color:#9a9a9a;background:var(--color-surface-2);border-color:var(--color-border)}
/* 1 - Petit cochon : rose pale */
[data-tier="1"]{color:#f0c4e0;background:rgba(233,137,200,.08);border-color:rgba(233,137,200,.18)}
/* 2 - Porcelet regional : rose accent */
[data-tier="2"]{color:#E989C8;background:rgba(233,137,200,.13);border-color:rgba(233,137,200,.30)}
/* 3 - Cochon confirme : magenta vif */
[data-tier="3"]{color:#f065b8;background:rgba(232,90,176,.15);border-color:rgba(232,90,176,.38);font-weight:650}
/* 4 - Gros porc : magenta profond (fond plus dense) */
[data-tier="4"]{color:#e878b6;background:rgba(201,86,159,.26);border-color:rgba(201,86,159,.52);font-weight:700}
/* 5 - Porc national : or medaille */
[data-tier="5"]{color:#E9B84C;background:rgba(233,184,76,.14);border-color:rgba(233,184,76,.42);font-weight:700}
/* 6 - Legende porcine : or -> rose, avec un leger halo */
[data-tier="6"]{
  color:#2a1a04;border-color:transparent;font-weight:750;
  background:linear-gradient(110deg,#F0C765,#E9B84C 45%,#E989C8);
  box-shadow:0 0 12px rgba(233,184,76,.35);
}
.row__pts{font-family:var(--mono);font-size:1.05rem;font-weight:700;text-align:right;white-space:nowrap}
.row__nb{display:block;font-family:var(--mono);font-size:.62rem;color:var(--color-muted);font-weight:500}

/* ------------------------------------------------------------------ feed */
.feed{display:flex;flex-direction:column;gap:8px}
.card{
  padding:12px 13px;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius);
  transition:transform .14s ease;
}
.card:active{transform:scale(.99)}
.card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.card__who{font-weight:650;letter-spacing:-.01em}
.card__pts{
  font-family:var(--mono);font-weight:700;font-size:.95rem;white-space:nowrap;
  padding:2px 8px;border-radius:99px;
  color:var(--color-accent);background:var(--color-accent-soft);
}
.card__pts--neg{color:#8fd6b4;background:rgba(143,214,180,.12)}
.card__motif{margin-top:4px;font-size:.9rem;color:#e2e2e2}
.tagperso{
  display:inline-block;vertical-align:1px;margin-left:2px;
  padding:1px 6px;border-radius:99px;
  font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:#ffd479;background:rgba(255,200,110,.12);border:1px solid rgba(255,200,110,.28);
}
.card__com{
  margin-top:8px;padding:8px 10px;
  background:var(--color-bg);border-left:2px solid var(--color-accent);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:.86rem;color:#dcdcdc;font-style:italic;
}
.card__meta{
  margin-top:8px;display:flex;flex-wrap:wrap;gap:5px 10px;
  font-size:.7rem;color:var(--color-muted);
}
.card__meta b{color:#c9c9c9;font-weight:600}
.card__meta code{font-family:var(--mono);font-size:.68rem}

.empty{
  padding:26px 16px;text-align:center;color:var(--color-muted);font-size:.87rem;
  background:var(--color-surface);border:1px dashed var(--color-border);border-radius:var(--radius);
}
/* Etat vide illustre : un grand blanc, c'est triste. */
.empty--big{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:190px;padding:28px 22px;
}
.empty__pig{
  font-size:3.4rem;line-height:1;opacity:.16;filter:grayscale(.3);
  user-select:none;
}
.empty__txt{max-width:30ch;margin:0;line-height:1.5}

.linkbtn{
  display:block;width:100%;margin-top:10px;padding:11px;
  border:1px solid var(--color-border);border-radius:var(--radius);
  background:var(--color-surface);color:var(--color-muted);
  font-size:.82rem;font-weight:600;
}
.linkbtn:active{background:var(--color-surface-2)}

/* ---------------------------------------------------------------- grades */
.grades{display:flex;flex-direction:column;gap:6px}
.grades li{
  display:grid;grid-template-columns:82px 1fr;align-items:center;gap:12px;
  padding:10px 13px;
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);
}
.grades b{font-family:var(--mono);font-size:.8rem;color:var(--color-accent);white-space:nowrap}
.grades span{font-size:.92rem;font-weight:600}

/* ---------------------------------------------------------------- bareme */
.catgroup{margin-bottom:18px}
.catgroup__head{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
  color:var(--color-accent);font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
}
.catgroup__head svg{width:18px;height:18px;flex:none}
.catlist{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius);overflow:hidden;
}
.catlist li{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 13px;font-size:.88rem;
  border-top:1px solid var(--color-border);
}
.catlist li:first-child{border-top:0}
.catlist b{font-family:var(--mono);font-weight:700;color:var(--color-accent);white-space:nowrap}
.catlist b.neg{color:#8fd6b4}
.tagrep{
  margin-left:6px;padding:1px 6px;border-radius:99px;font-size:.62rem;font-weight:600;
  color:var(--color-muted);background:var(--color-surface-2);border:1px solid var(--color-border);
  text-transform:uppercase;letter-spacing:.06em;
}

/* ------------------------------------------------------------------- cta */
.cta{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  /* safe-area iPhone : le bouton ne passe jamais sous la barre d'accueil */
  padding:10px 16px max(12px,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(10,10,10,0),rgba(10,10,10,.92) 35%);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.cta .btn{max-width:var(--wrap);margin:0 auto}
/* modale ouverte : on retire le bouton, sinon il transparait sous le voile */
body.sheet-open .cta{display:none}

.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:44px;                       /* cible tactile confortable */
  padding:14px 18px;border-radius:var(--radius);
  font-weight:700;font-size:.95rem;letter-spacing:.01em;
  border:1px solid transparent;transition:transform .14s ease,filter .15s ease;
}
.btn--primary{background:var(--color-accent);color:#12060f;box-shadow:0 6px 22px rgba(233,137,200,.22)}
.btn:active{transform:scale(.98)}
.btn--primary:active{filter:brightness(.94)}
.btn--big{padding:15px 18px;font-size:1rem}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ------------------------------------------------------------ confettis */
.confetti{
  position:fixed;inset:0;z-index:70;
  width:100%;height:100%;
  pointer-events:none;                   /* purement decoratif */
}

/* ----------------------------------------------------------------- sheet */
.sheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sheet__scrim{position:absolute;inset:0;background:rgba(0,0,0,.6);animation:fade .2s ease-out}
.sheet__panel{
  position:relative;display:flex;flex-direction:column;
  width:100%;max-width:var(--wrap);max-height:90vh;
  background:var(--color-bg-2);
  border:1px solid var(--color-border);border-bottom:0;
  border-radius:20px 20px 0 0;
  padding:8px 0 0;
  animation:slideup .22s cubic-bezier(.2,.8,.3,1);
  overflow:hidden;                       /* les coins arrondis rognent le scroll */
}
@keyframes slideup{from{transform:translateY(14%);opacity:.4}to{transform:none;opacity:1}}

/* poignee de drag (indice visuel : ca se tire vers le bas) */
.sheet__grab{width:38px;height:4px;margin:4px auto 10px;border-radius:99px;background:rgba(255,255,255,.16)}
.sheet__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px 12px;flex:none;
}

/* le formulaire occupe la hauteur restante : corps qui defile + pied fixe */
.sheet__form{display:flex;flex-direction:column;flex:1;min-height:0}
.sheet__body{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:0 16px 4px;
}
.sheet__foot{
  flex:none;
  padding:12px 16px max(14px,env(safe-area-inset-bottom));
  background:var(--color-bg-2);
  border-top:1px solid var(--color-border);
}
.sheet__foot .note--center{margin-top:8px}
.sheet__head h2{font-size:1.1rem;font-weight:700;letter-spacing:-.01em}
.iconbtn{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--color-surface-2);color:var(--color-muted);
}
.iconbtn svg{width:18px;height:18px}

/* ---------------------------------------------------------------- champs */
.field{display:block;margin-bottom:13px}
.field__lbl{
  display:flex;align-items:baseline;gap:7px;margin-bottom:6px;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-muted);
}
.field__lbl em{
  font-style:normal;text-transform:none;letter-spacing:.02em;font-weight:500;
  font-size:.68rem;color:rgba(255,255,255,.35);
}
.field--inline{margin-bottom:14px}

.input{
  width:100%;min-height:48px;            /* cible tactile confortable */
  padding:13px 13px;
  background:var(--color-surface);color:var(--color-text);
  border:1px solid var(--color-border);border-radius:var(--radius-sm);
  font-family:var(--font);font-size:16px;line-height:1.3;  /* 16px : pas de zoom iOS */
  appearance:none;-webkit-appearance:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft)}
.input--mono{font-family:var(--mono);font-weight:700}
textarea.input{resize:vertical;min-height:56px}
/* les <select> restent natifs (clavier/accessibilite mobile), mais lisibles
   comme une carte : plus hauts, bordure accent au focus */
select.input{
  min-height:52px;font-weight:600;
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
}
select.input option,select.input optgroup{background:var(--color-bg-2);color:var(--color-text)}

/* Encart "points de porc" : l'intensite monte avec la valeur.
   rose pale -> rose -> magenta -> or au-dela de +300. */
.pointsbox{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:2px 0 14px;padding:12px 14px;
  border-radius:var(--radius);
  background:var(--color-surface-2);border:1px solid var(--color-border);
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.pointsbox__lbl{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--color-muted);transition:color .25s ease;
}
.pointsbox__val{
  font-family:var(--mono);font-size:1.6rem;font-weight:750;line-height:1;
  color:var(--color-muted);transition:color .25s ease;
}
.pointsbox[data-level] .pointsbox__lbl,.pointsbox[data-level] .pointsbox__val{color:inherit}

.pointsbox[data-level="neg"]{background:rgba(143,214,180,.10);border-color:rgba(143,214,180,.30);color:#8fd6b4}
.pointsbox[data-level="low"]{background:rgba(233,137,200,.09);border-color:rgba(233,137,200,.22);color:#f0c4e0}
.pointsbox[data-level="mid"]{background:rgba(233,137,200,.15);border-color:rgba(233,137,200,.36);color:#E989C8}
.pointsbox[data-level="high"]{
  background:rgba(232,90,176,.18);border-color:rgba(232,90,176,.45);color:#f065b8;
  box-shadow:0 0 18px rgba(232,90,176,.15);
}
.pointsbox[data-level="gold"]{
  background:linear-gradient(120deg,rgba(233,184,76,.22),rgba(233,137,200,.16));
  border-color:rgba(233,184,76,.5);color:#E9B84C;
  box-shadow:0 0 22px rgba(233,184,76,.22);
}
.pointsbox[data-level="none"]{color:var(--color-muted)}

/* ------------------------------------------------------- slider points */
.slider{display:grid;grid-template-columns:auto 1fr 84px;align-items:center;gap:10px}
.slider__pig{
  font-size:1.5rem;line-height:1;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.3),filter .18s ease;
  transform-origin:center;
}
.slider__num{padding:10px 8px;text-align:center}
.slider__input{
  -webkit-appearance:none;appearance:none;
  width:100%;height:26px;background:transparent;cursor:pointer;
}
/* piste */
.slider__input::-webkit-slider-runnable-track{
  height:6px;border-radius:99px;
  background:linear-gradient(90deg,rgba(143,214,180,.45),var(--color-surface-2) 50%,var(--color-accent));
}
.slider__input::-moz-range-track{
  height:6px;border-radius:99px;
  background:linear-gradient(90deg,rgba(143,214,180,.45),var(--color-surface-2) 50%,var(--color-accent));
}
/* pouce : >= 26 px, confortable au doigt */
.slider__input::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:26px;height:26px;margin-top:-10px;border-radius:50%;
  background:var(--color-accent);border:2px solid #12060f;
  box-shadow:0 2px 10px rgba(233,137,200,.45);
}
.slider__input::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;
  background:var(--color-accent);border:2px solid #12060f;
  box-shadow:0 2px 10px rgba(233,137,200,.45);
}
.slider__input:focus{outline:none}
.slider__input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--color-accent-soft)}
.slider__input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--color-accent-soft)}

.formerr{
  margin:0 0 12px;padding:10px 12px;border-radius:var(--radius-sm);
  background:rgba(255,110,110,.10);border:1px solid rgba(255,110,110,.3);
  color:#ffb3b3;font-size:.85rem;
}

/* ----------------------------------------------------------------- toast */
.toast{
  position:fixed;left:50%;bottom:calc(var(--cta-h) + 14px);transform:translateX(-50%);
  z-index:80;max-width:calc(100vw - 32px);
  padding:12px 16px;border-radius:99px;
  background:var(--color-accent);color:#12060f;
  font-size:.87rem;font-weight:700;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  animation:pop .25s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop{from{opacity:0;transform:translate(-50%,10px) scale(.95)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

/* ------------------------------------------------------------- squelette */
.skel{height:62px;border-radius:var(--radius);background:var(--color-surface);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:.8}}

/* -------------------------------------------------------------- footer */
.foot{margin:34px auto 0;padding-top:18px;border-top:1px solid var(--color-border);color:var(--color-muted);font-size:.76rem}
.foot strong{color:var(--color-accent)}
.foot__mini{margin-top:4px;opacity:.7}

/* ------------------------------------------------------------ >= tablette */
@media (min-width:560px){
  .hdr__title{font-size:1.75rem}
  .hdr__sub{font-size:.88rem}
  .tab{font-size:.85rem}
  .stat__val{font-size:1.3rem}
  .cta{padding:12px 16px max(12px,env(safe-area-inset-bottom))}
  .sheet{align-items:center}
  .sheet__panel{border-radius:20px;border-bottom:1px solid var(--color-border);max-height:88vh}
  .sheet__grab{display:none}
  .pod__name{font-size:.88rem}
  .pod--1 .pod__name{font-size:1rem}
}

/* ---------------------------------------------------------------------
   Mouvement reduit : on coupe TOUT (count-up et confettis sont deja
   desactives cote JS par motionOff(), ici on neutralise le CSS).
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  /* pas de rebond a l'appui non plus */
  .btn:active,.tab:active,.seg__btn:active,.card:active,.row:active{transform:none!important}
  .confetti{display:none!important}
}