/* =====================================================================
   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+10 de padding + 52 de bouton */
  --cta-h:calc(76px + 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)}
.hdr__title{
  font-size:1.45rem;line-height:1.15;font-weight:750;letter-spacing:-.02em;
}
.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;
  padding:9px 4px;border-radius:var(--radius-sm);
  color:var(--color-muted);font-size:.8rem;font-weight:600;
  transition:background .15s,color .15s;
}
.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{
  padding:9px 4px;border-radius:8px;
  font-size:.8rem;font-weight:650;color:var(--color-muted);
  transition:background .15s,color .15s;
}
.seg__btn.is-active{background:var(--color-accent-soft);color:var(--color-accent)}
.seg__btn:active{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)}

/* ------------------------------------------------------------ classement */
.board{display:flex;flex-direction:column;gap:8px}
.row{
  display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;
  padding:11px 13px;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius);
}
.row--top{
  background:linear-gradient(180deg,var(--color-accent-soft),var(--color-surface) 70%);
  border-color:rgba(233,137,200,.28);
}
.row--zero{opacity:.55}
.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}
.row__grade{
  display:inline-flex;align-items:center;gap:4px;margin-top:3px;
  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);
}
/* Une teinte par palier : la progression doit se lire d'un coup d'oeil.
   Du plus sobre (gris) au plus vif (rose sature), puis dore pour les 2 derniers. */
.row__grade[data-tier="0"]{color:#8f8f8f;background:var(--color-surface-2);border-color:var(--color-border)}
.row__grade[data-tier="1"]{color:#cfa9c2;background:rgba(233,137,200,.06);border-color:rgba(233,137,200,.14)}
.row__grade[data-tier="2"]{color:#e0a3ce;background:rgba(233,137,200,.10);border-color:rgba(233,137,200,.20)}
.row__grade[data-tier="3"]{color:#ec9ad5;background:rgba(233,137,200,.14);border-color:rgba(233,137,200,.28)}
.row__grade[data-tier="4"]{color:#f78ad4;background:rgba(233,137,200,.20);border-color:rgba(233,137,200,.40);font-weight:700}
.row__grade[data-tier="5"]{color:#ffd479;background:rgba(255,200,110,.14);border-color:rgba(255,200,110,.36);font-weight:700}
.row__grade[data-tier="6"]{
  color:#2a1a04;border-color:transparent;font-weight:750;
  background:linear-gradient(135deg,#ffe6a6,#f5c14e);
}
.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);
}
.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);
}

.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;
  padding:10px 16px calc(10px + 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%;
  padding:14px 18px;border-radius:var(--radius);
  font-weight:700;font-size:.95rem;letter-spacing:.01em;
  border:1px solid transparent;transition:transform .1s,filter .15s;
}
.btn--primary{background:var(--color-accent);color:#12060f;box-shadow:0 6px 22px rgba(233,137,200,.22)}
.btn--primary:active{transform:scale(.985);filter:brightness(.94)}
.btn--big{padding:15px 18px;font-size:1rem}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ----------------------------------------------------------------- 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;width:100%;max-width:var(--wrap);max-height:92vh;overflow-y:auto;
  background:var(--color-bg-2);
  border:1px solid var(--color-border);border-bottom:0;
  border-radius:20px 20px 0 0;
  padding:8px 16px calc(20px + env(safe-area-inset-bottom));
  animation:slideup .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes slideup{from{transform:translateY(14%);opacity:.4}to{transform:none;opacity:1}}
.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;margin-bottom:14px}
.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%;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;
  appearance:none;-webkit-appearance:none;
}
.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}
select.input{
  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)}

.pointsbox{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:2px 0 14px;padding:12px 14px;
  background:var(--color-accent-soft);border:1px solid rgba(233,137,200,.25);
  border-radius:var(--radius);
}
.pointsbox__lbl{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-accent)}
.pointsbox__val{font-family:var(--mono);font-size:1.6rem;font-weight:750;color:var(--color-accent);line-height:1}
.pointsbox--neg{background:rgba(143,214,180,.10);border-color:rgba(143,214,180,.25)}
.pointsbox--neg .pointsbox__lbl,.pointsbox--neg .pointsbox__val{color:#8fd6b4}

.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 calc(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}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}