:root{
    --ink:#141013; --surface:#1E1815; --surface2:#29201A; --line:#3A2C22;
    --text:#F2E9DE; --muted:#A99686; --faint:#6E5B4C;
    --volt:#D9A227; --volt-ink:#141013;
    --coral:#D62B2B;
    --good:#54C08A; --warn:#E8862E; --crit:#FF5A4D; --info:#5AA0E6;
    --prot:#D62B2B; --carb:#D9A227; --fat:#5AA0E6;
    --grid:rgba(217,162,39,.09);
    --shadow:0 12px 40px rgba(0,0,0,.5);
    --r:16px;
    --bg-grad:radial-gradient(1200px 600px at 85% -10%, rgba(214,43,43,.14), transparent 60%),
              radial-gradient(900px 500px at 0% 0%, rgba(217,162,39,.07), transparent 55%);
  }
  :root[data-theme="light"]{
    --ink:#F4EEE4; --surface:#FFFFFF; --surface2:#F3EBDD; --line:#E4D8C6;
    --text:#241A12; --muted:#6B5B4C; --faint:#9A8A78;
    --volt:#9A6B0E; --volt-ink:#FFF7E8;
    --coral:#B21E1E;
    --good:#12905F; --warn:#B8641A; --crit:#C4362B; --info:#1E6FC4;
    --prot:#B21E1E; --carb:#9A6B0E; --fat:#1E6FC4;
    --grid:rgba(36,26,18,.06);
    --shadow:0 12px 34px rgba(60,40,20,.14);
    --bg-grad:radial-gradient(1200px 600px at 85% -10%, rgba(178,30,30,.07), transparent 60%),
              radial-gradient(900px 500px at 0% 0%, rgba(154,107,14,.05), transparent 55%);
  }
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){
      --ink:#F4EEE4; --surface:#FFFFFF; --surface2:#F3EBDD; --line:#E4D8C6;
      --text:#241A12; --muted:#6B5B4C; --faint:#9A8A78;
      --volt:#9A6B0E; --volt-ink:#FFF7E8;
      --coral:#B21E1E;
      --good:#12905F; --warn:#B8641A; --crit:#C4362B; --info:#1E6FC4;
      --prot:#B21E1E; --carb:#9A6B0E; --fat:#1E6FC4;
      --grid:rgba(36,26,18,.06);
      --shadow:0 12px 34px rgba(60,40,20,.14);
      --bg-grad:radial-gradient(1200px 600px at 85% -10%, rgba(178,30,30,.07), transparent 60%),
                radial-gradient(900px 500px at 0% 0%, rgba(154,107,14,.05), transparent 55%);
    }
  }

  *{box-sizing:border-box}
  /* Regle globale indispensable : le style d'auteur (.btn-primary{display:flex}
     par ex.) bat la regle navigateur [hidden]{display:none}. Sans ce !important,
     un element marque hidden en JS reste VISIBLE des qu'on lui a donne un
     display. C'est le piege qui a fait apparaitre le bouton d'installation
     iOS alors qu'il devait rester cache. */
  [hidden]{display:none !important}
  html,body{margin:0}
  body{
    background:var(--bg-grad), var(--ink); background-attachment:fixed;
    color:var(--text); font-family:"Manrope", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing:antialiased; line-height:1.5;
  }
  h1,h2,h3,h4{font-family:"Barlow Semi Condensed", system-ui, sans-serif; margin:0; text-wrap:balance; letter-spacing:.2px}
  .num{font-variant-numeric:tabular-nums}
  button{font-family:inherit}
  ::selection{background:var(--volt); color:var(--volt-ink)}

  .app{max-width:1180px; margin:0 auto; padding:0 20px 130px}
  .topbar{display:flex; align-items:center; gap:16px; padding:20px 4px 18px; position:sticky; top:0; z-index:30;
    background:linear-gradient(var(--ink) 62%, transparent)}
  .brand{display:flex; align-items:center; gap:11px; font-family:"Barlow Semi Condensed"; font-weight:800;
    font-size:26px; letter-spacing:1px; text-transform:uppercase}
  .brand .crest{width:30px;height:30px;border-radius:8px 8px 10px 10px;display:grid;place-items:center;
    background:linear-gradient(150deg,var(--coral),var(--volt)); color:var(--ink);
    font-family:"Barlow Semi Condensed"; font-weight:800; font-size:21px; line-height:1;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--volt) 18%, transparent)}
  .brand small{font-family:"Manrope"; font-weight:600; font-size:11px; letter-spacing:2px; color:var(--muted);
    text-transform:uppercase; align-self:flex-start; margin-top:3px}
  .topbar .spacer{flex:1}
  .iconbtn{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px;
    background:var(--surface); border:1px solid var(--line); color:var(--text); cursor:pointer; transition:.15s}
  .iconbtn:hover{border-color:var(--volt); color:var(--volt)}
  .me-chip{display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line);
    padding:5px 12px 5px 5px; border-radius:999px}
  .avatar{border-radius:50%; display:grid; place-items:center; font-weight:800; color:#0F1419;
    font-family:"Barlow Semi Condensed"; flex:none; letter-spacing:.5px}

  nav.tabs{display:flex; gap:6px; margin:2px 0 26px; flex-wrap:wrap}
  nav.tabs button{border:1px solid transparent; background:transparent; color:var(--muted);
    padding:9px 15px; border-radius:11px; font-weight:700; font-size:14px; cursor:pointer; transition:.15s;
    display:flex; align-items:center; gap:8px}
  nav.tabs button svg{width:17px;height:17px}
  nav.tabs button:hover{color:var(--text); background:var(--surface)}
  nav.tabs button[aria-selected="true"]{background:var(--surface); color:var(--text); border-color:var(--line)}
  nav.tabs button[aria-selected="true"] svg{color:var(--volt)}

  .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px}
  .card h3{font-size:19px; font-weight:700}
  .section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px}
  .section-head .link{color:var(--muted); font-size:13px; font-weight:600; cursor:pointer}
  .section-head .link:hover{color:var(--volt)}
  .eyebrow{font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); font-weight:700}
  .stack{display:grid; gap:16px}
  .two-col{display:grid; grid-template-columns:1.5fr 1fr; gap:16px; align-items:start}
  .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  .grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}

  .avatar{}
  .pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:3px 9px;
    border-radius:999px; border:1px solid var(--line); background:var(--surface2)}
  .pill.sport{color:var(--coral); border-color:color-mix(in srgb,var(--coral) 40%, var(--line))}
  .pill.good{color:var(--good); border-color:color-mix(in srgb,var(--good) 40%,var(--line))}

  /* ---- Coach: calorie ring ---- */
  .coach-hero{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .ring-card{display:flex; gap:20px; align-items:center}
  .ring-wrap{position:relative; width:172px; height:172px; flex:none}
  .ring-wrap svg{transform:rotate(-90deg)}
  .ring-center{position:absolute; inset:0; display:grid; place-content:center; text-align:center}
  .ring-center .big{font-family:"Barlow Semi Condensed"; font-weight:800; font-size:40px; line-height:.95}
  .ring-center .lbl{font-size:11px; color:var(--muted); font-weight:700; letter-spacing:1px; text-transform:uppercase}
  .macro-list{flex:1; display:grid; gap:12px; min-width:0}
  .macro{display:grid; gap:5px}
  .macro-top{display:flex; justify-content:space-between; font-size:13px; font-weight:700}
  .macro-top .g{color:var(--muted); font-weight:600}
  .bar{height:8px; border-radius:999px; background:var(--surface2); overflow:hidden}
  .bar > i{display:block; height:100%; border-radius:999px; transition:width .4s}
  .add-meal{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
  .add-meal button{border:1px solid var(--line); background:var(--surface2); color:var(--text);
    padding:9px 13px; border-radius:11px; font-weight:700; font-size:13px; cursor:pointer; transition:.12s}
  .add-meal button:hover{border-color:var(--coral); color:var(--coral)}

  .today-workout{background:linear-gradient(150deg, color-mix(in srgb,var(--coral) 22%, var(--surface)), var(--surface) 58%);
    border:1px solid var(--line); border-radius:var(--r); padding:22px; position:relative; overflow:hidden}
  .today-workout .eyebrow{color:var(--text); opacity:.7}
  .tw-title{font-family:"Barlow Semi Condensed"; font-weight:800; font-size:30px; margin:6px 0 4px}
  .tw-meta{display:flex; gap:16px; flex-wrap:wrap; color:var(--muted); font-weight:600; font-size:14px; margin:10px 0 18px}
  .tw-meta b{color:var(--text)}
  .btn-primary{background:var(--volt); color:var(--volt-ink); border:0; padding:13px 22px; border-radius:12px;
    font-weight:800; font-size:15px; cursor:pointer; display:inline-flex; align-items:center; gap:9px; transition:.15s}
  .btn-primary:hover{filter:brightness(1.06); transform:translateY(-1px)}
  .btn-ghost{background:var(--surface2); color:var(--text); border:1px solid var(--line); padding:12px 18px;
    border-radius:12px; font-weight:700; font-size:14px; cursor:pointer}
  .btn-ghost:hover{border-color:var(--volt)}

  .tip{display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); align-items:flex-start}
  .tip:last-child{border-bottom:0}
  .tip .ti{width:34px;height:34px;border-radius:10px;background:var(--surface2);display:grid;place-items:center;font-size:17px;flex:none}
  .tip .tx{font-size:14px}
  .tip .tx b{font-weight:800}

  .water-row{display:flex; gap:7px; margin-top:12px; flex-wrap:wrap}
  .glass{width:30px;height:38px;border-radius:5px 5px 8px 8px; border:2px solid var(--line); cursor:pointer;
    background:transparent; transition:.15s; position:relative}
  .glass.full{background:linear-gradient(var(--info),color-mix(in srgb,var(--info) 60%,transparent)); border-color:var(--info)}

  .metric-tile{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px}
  .metric-tile .v{font-family:"Barlow Semi Condensed"; font-weight:800; font-size:30px; line-height:1}
  .metric-tile .v small{font-size:15px; color:var(--muted); font-weight:700}
  .metric-tile .l{font-size:12px; color:var(--muted); font-weight:600; margin-top:6px}
  .metric-tile .badge{font-size:11px; font-weight:800; margin-top:7px; display:inline-block; padding:2px 8px; border-radius:999px}

  /* ---- Profile form ---- */
  .field{margin-bottom:0}
  .field label{display:block; font-size:12px; font-weight:700; margin-bottom:6px; color:var(--muted)}
  /* Viser les types un par un est un piege : tout nouveau type (password,
     email, tel, date...) retombe sur le style natif du navigateur et jure avec
     le reste. On style donc TOUS les input sauf ceux qui ont leur propre
     apparence (cases a cocher, boutons radio, curseurs). */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select, textarea{width:100%; background:var(--surface2); border:1px solid var(--line);
    color:var(--text); border-radius:11px; padding:11px 13px; font-size:15px; font-family:inherit; font-variant-numeric:tabular-nums}
  input:focus,button:focus-visible,.chip:focus-visible{outline:2px solid var(--volt); outline-offset:2px}
  .seg{display:flex; background:var(--surface2); border:1px solid var(--line); border-radius:11px; padding:3px; gap:2px; flex-wrap:wrap}
  .seg button{border:0; background:transparent; color:var(--muted); font-weight:700; font-size:13px; padding:8px 12px;
    border-radius:8px; cursor:pointer; flex:1; white-space:nowrap}
  .seg button.on{background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.2)}
  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .full{grid-column:1 / -1}

  /* ---- Guided session ---- */
  .ex-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; margin-bottom:14px}
  .ex-head{display:flex; align-items:center; gap:12px; margin-bottom:6px}
  .ex-emoji{width:42px;height:42px;border-radius:12px;background:var(--surface2);display:grid;place-items:center;font-size:21px;flex:none}
  .ex-head h4{font-size:17px; font-weight:700}
  .ex-head .muscles{font-size:12px; color:var(--muted); font-weight:600}
  .overload{font-size:12px; font-weight:700; color:var(--good); background:color-mix(in srgb,var(--good) 12%,transparent);
    padding:3px 9px; border-radius:999px; margin-left:auto; white-space:nowrap}
  .set-head,.set-row{display:grid; grid-template-columns:44px 1fr 1fr 46px; gap:10px; align-items:center}
  .set-head{font-size:11px; color:var(--faint); font-weight:700; text-transform:uppercase; letter-spacing:1px; margin:12px 0 6px; padding:0 2px}
  .set-row{margin-bottom:8px}
  .set-row .setno{font-family:"Barlow Semi Condensed"; font-weight:800; font-size:17px; color:var(--muted); text-align:center}
  .set-row input{padding:9px 10px; text-align:center}
  .check{width:44px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--surface2);
    color:var(--muted); cursor:pointer; display:grid; place-items:center; transition:.12s}
  .check svg{width:19px;height:19px}
  .set-row.done input{opacity:.55}
  .set-row.done .check{background:var(--good); border-color:var(--good); color:#08130D}
  .set-row.done .setno{color:var(--good)}

  .rest-bar{position:fixed; left:0; right:0; bottom:0; z-index:45; background:var(--surface); border-top:1px solid var(--line);
    padding:14px 20px; display:flex; align-items:center; gap:16px; box-shadow:0 -8px 30px rgba(0,0,0,.3)}
  .rest-bar[hidden]{display:none}
  .rest-bar .rt{font-family:"Barlow Semi Condensed"; font-weight:800; font-size:34px; min-width:74px; text-align:center; color:var(--info)}
  .rest-bar .info{flex:1}
  .rest-bar .info .l{font-size:12px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:1px}
  .rest-bar .info .bar{margin-top:7px}
  .rest-bar .info .bar > i{background:var(--info)}

  /* ---- Leaderboard / feed / crew (from crew view) ---- */
  .lb-row{display:flex; align-items:center; gap:13px; padding:11px 6px; border-bottom:1px solid var(--line)}
  .lb-row:last-child{border-bottom:0}
  .lb-rank{width:26px; font-family:"Barlow Semi Condensed"; font-weight:800; font-size:20px; color:var(--faint); text-align:center}
  .lb-row.you{background:color-mix(in srgb,var(--volt) 9%, transparent); border-radius:10px; margin:0 -6px; padding:11px 12px}
  .lb-row.you .lb-rank{color:var(--volt)}
  .lb-name{font-weight:700; flex:1}
  .lb-name .tag{font-size:11px; color:var(--muted); font-weight:600; margin-left:6px}
  .lb-pts{font-family:"Barlow Semi Condensed"; font-weight:800; font-size:20px}
  .lb-pts small{font-size:11px; color:var(--muted); font-weight:600; margin-left:3px; font-family:"Manrope"}
  .medal{width:26px;text-align:center;font-size:17px}
  .feed-item{display:flex; gap:13px; padding:14px 0; border-bottom:1px solid var(--line)}
  .feed-item:last-child{border-bottom:0}
  .feed-body{flex:1; min-width:0}
  .feed-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
  .feed-top b{font-weight:800}
  .feed-top .time{color:var(--faint); font-size:12px; margin-left:auto}
  .feed-detail{color:var(--muted); font-size:14px; margin-top:4px}
  .kudos{display:flex; align-items:center; gap:5px; margin-top:9px; font-size:13px; color:var(--muted);
    cursor:pointer; user-select:none; font-weight:600; width:max-content}
  .kudos:hover{color:var(--volt)} .kudos.on{color:var(--volt)} .kudos svg{width:15px;height:15px}
  .crew-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px}
  .crew-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; text-align:center}
  .crew-card .avatar{margin:0 auto 12px}
  .crew-card h4{font-size:17px} .crew-card .role{font-size:12px; color:var(--muted); font-weight:600; margin-top:2px}
  .crew-stats{display:flex; justify-content:center; gap:16px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
  .crew-stats div{font-family:"Barlow Semi Condensed"; font-weight:800; font-size:20px}
  .crew-stats div small{display:block; font-family:"Manrope"; font-weight:600; font-size:11px; color:var(--muted)}
  .chal{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; margin-bottom:14px}
  .chal.active{border-color:color-mix(in srgb,var(--volt) 45%, var(--line))}
  .chal-top{display:flex; align-items:center; gap:12px; margin-bottom:12px}
  .chal-emoji{width:44px;height:44px;border-radius:12px;background:var(--surface2);display:grid;place-items:center;font-size:22px;flex:none}
  .chal h4{font-size:17px; font-weight:700} .chal .sub{font-size:13px; color:var(--muted)}
  .bar-row{display:flex; align-items:center; gap:11px; margin:9px 0}
  .bar-row .bar{flex:1} .bar-row .val{font-size:12px; font-weight:700; color:var(--muted); width:80px; text-align:right}
  .countdown{font-weight:800; color:var(--warn)}

  /* ---- Progress ---- */
  .chart-wrap{width:100%; overflow-x:auto}
  svg.chart{display:block; width:100%; height:auto}
  .pr-item{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line)}
  .pr-item:last-child{border-bottom:0}
  .pr-item .ico{width:38px;height:38px;border-radius:11px;background:var(--surface2);display:grid;place-items:center;font-size:19px;flex:none}
  .pr-item .name{flex:1;font-weight:700} .pr-item .name span{display:block;font-weight:600;font-size:12px;color:var(--muted)}
  .pr-item .pr-v{font-family:"Barlow Semi Condensed";font-weight:800;font-size:22px}

  .fab{position:fixed; right:24px; bottom:24px; z-index:40; display:flex; align-items:center; gap:9px;
    background:var(--volt); color:var(--volt-ink); border:0; padding:15px 22px; border-radius:999px;
    font-weight:800; font-size:15px; cursor:pointer; box-shadow:var(--shadow); transition:.15s}
  .fab:hover{transform:translateY(-2px)} .fab svg{width:20px;height:20px}

  .overlay{position:fixed; inset:0; z-index:50; background:rgba(6,9,13,.7); backdrop-filter:blur(4px); display:grid; place-items:end center}
  .overlay[hidden]{display:none}
  .sheet{background:var(--surface); border:1px solid var(--line); border-bottom:0; border-radius:22px 22px 0 0;
    width:100%; max-width:520px; max-height:92vh; overflow-y:auto; padding:24px; animation:up .28s cubic-bezier(.2,.8,.2,1)}
  @keyframes up{from{transform:translateY(30px);opacity:.4}to{transform:translateY(0);opacity:1}}
  @media (min-width:600px){.overlay{place-items:center} .sheet{border-radius:22px; border-bottom:1px solid var(--line)}}
  @media (prefers-reduced-motion:reduce){.sheet,.fab,.btn-primary{animation:none;transition:none}}
  .sheet .grab{width:40px;height:4px;border-radius:999px;background:var(--line);margin:0 auto 16px}
  .submit{width:100%; background:var(--volt); color:var(--volt-ink); border:0; padding:15px; border-radius:13px;
    font-weight:800; font-size:16px; cursor:pointer; margin-top:6px}
  .ghost{width:100%; background:transparent; color:var(--muted); border:0; padding:12px; font-weight:700; cursor:pointer}

  .toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); z-index:60;
    background:var(--text); color:var(--ink); padding:13px 20px; border-radius:12px; font-weight:800;
    box-shadow:var(--shadow); opacity:0; transition:.3s; pointer-events:none; display:flex; align-items:center; gap:9px}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

  .view[hidden]{display:none}
  @media (max-width:860px){ .coach-hero,.two-col{grid-template-columns:1fr} .grid4{grid-template-columns:1fr 1fr} }
  @media (max-width:560px){
    .grid3{grid-template-columns:1fr 1fr} .ring-card{flex-direction:column; text-align:center}
    .form-grid{grid-template-columns:1fr} .brand small{display:none} .app{padding:0 14px 130px}
    .set-head,.set-row{grid-template-columns:36px 1fr 1fr 44px}
  }

/* ================= Écran d'authentification ================= */
#authScreen{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px;
  background:var(--bg-grad), var(--ink); background-attachment:fixed; overflow-y:auto}
#authScreen[hidden]{display:none}
.auth-card{width:100%; max-width:420px; background:var(--surface); border:1px solid var(--line);
  border-radius:22px; padding:34px 30px; box-shadow:var(--shadow)}
.auth-brand{display:flex; align-items:center; gap:12px; font-family:"Barlow Semi Condensed"; font-weight:800;
  font-size:34px; letter-spacing:1px; text-transform:uppercase; justify-content:center; margin-bottom:6px}
.auth-brand .crest{width:48px;height:48px;border-radius:11px 11px 14px 14px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--coral),var(--volt)); color:var(--ink);
  font-family:"Barlow Semi Condensed"; font-weight:800; font-size:32px; line-height:1;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--volt) 18%, transparent)}
.auth-tag{text-align:center; color:var(--muted); font-weight:600; margin-bottom:26px; font-size:14px}
.auth-toggle{display:flex; background:var(--surface2); border:1px solid var(--line); border-radius:12px;
  padding:4px; gap:3px; margin-bottom:22px}
.auth-toggle button{flex:1; border:0; background:transparent; color:var(--muted); font-weight:700;
  font-size:14px; padding:10px; border-radius:9px; cursor:pointer; transition:.15s}
.auth-toggle button.on{background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.2)}
#authScreen .field{margin-bottom:15px}
#authScreen label{color:var(--muted)}
.auth-err{background:color-mix(in srgb,var(--crit) 14%, transparent); color:var(--crit); border-radius:10px;
  padding:11px 13px; font-size:13px; font-weight:600; margin-bottom:15px}
.auth-err[hidden]{display:none}
.auth-hint{font-size:12px; color:var(--faint); text-align:center; margin-top:18px; line-height:1.5}
.spin{display:inline-block; width:16px; height:16px; border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; animation:spin .6s linear infinite; vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}

/* petite entrée animée des cartes */
.fade-in{animation:fadeUp .4s ease both}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.fade-in{animation:none}}

.logout-item{color:var(--crit)!important}
.empty{color:var(--muted); font-size:14px; text-align:center; padding:22px 10px}

/* ================= SYSTÈME (rang, XP, quête, stats) ================= */
.sys-hero{display:grid; grid-template-columns:1fr 1.15fr; gap:16px; margin-bottom:16px}
.rank-card{display:flex; gap:18px; align-items:center}
.rank-badge{width:74px; height:84px; flex:none; display:grid; place-items:center;
  font-family:"Barlow Semi Condensed"; font-weight:800; font-size:44px; color:var(--ink);
  border-radius:12px 12px 18px 18px; background:linear-gradient(155deg,var(--coral),var(--volt));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--volt) 16%, transparent), inset 0 -6px 14px rgba(0,0,0,.18)}
.rank-info{flex:1; min-width:0}
.rank-lvl{font-family:"Barlow Semi Condensed"; font-weight:800; font-size:26px; line-height:1; margin:3px 0 10px}
.xp-bar{height:10px; border-radius:999px; background:var(--surface2); overflow:hidden}
.xp-bar > i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--coral),var(--volt)); transition:width .5s}
.xp-txt{font-size:12px; color:var(--muted); margin-top:8px; font-weight:600}
.xp-txt b{color:var(--text)}

.quest-card .quest-head{display:flex; align-items:center; gap:10px}
.quest-card .quest-head h3{font-size:18px; font-weight:700}
.quest-card .quest-sub{font-size:12px; color:var(--muted); margin:4px 0 12px}
.q-task{display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); cursor:pointer; user-select:none}
.q-task:last-of-type{border-bottom:0}
.q-check{width:24px; height:24px; border-radius:7px; border:2px solid var(--line); flex:none; display:grid; place-items:center; color:transparent; transition:.12s}
.q-check svg{width:14px; height:14px}
.q-task.done .q-check{background:var(--good); border-color:var(--good); color:#08130D}
.q-label{flex:1; font-weight:700}
.q-task.done .q-label{color:var(--muted); text-decoration:line-through}
.q-target{font-family:"Barlow Semi Condensed"; font-weight:800; font-size:17px; color:var(--muted)}
.q-claim{width:100%; margin-top:14px; background:var(--volt); color:var(--volt-ink); border:0; padding:13px; border-radius:12px; font-weight:800; font-size:15px; cursor:pointer}
.q-claim:disabled{opacity:.5; cursor:default}
.q-claimed{margin-top:14px; text-align:center; font-weight:800; color:var(--good); padding:12px; background:color-mix(in srgb,var(--good) 12%,transparent); border-radius:12px}

.stats-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px}
.stat-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px}
.stat-card .st-top{display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px}
.stat-card .st-val{font-family:"Barlow Semi Condensed"; font-weight:800; font-size:30px; line-height:1; margin:9px 0 8px}
.stat-card .st-bar{height:7px; border-radius:999px; background:var(--surface2); overflow:hidden}
.stat-card .st-bar > i{display:block; height:100%; border-radius:999px; transition:width .5s}

.lvlup{position:fixed; inset:0; z-index:70; display:grid; place-items:center; background:rgba(6,4,3,.78); backdrop-filter:blur(5px); animation:fadeIn .25s}
.lvlup[hidden]{display:none}
.lvlup-card{text-align:center; padding:30px 40px}
.lvlup .big-rank{font-family:"Barlow Semi Condensed"; font-weight:800; font-size:96px; line-height:1;
  background:linear-gradient(150deg,var(--coral),var(--volt)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lvlup .lu-title{font-family:"Barlow Semi Condensed"; font-weight:800; font-size:34px; margin-top:6px; letter-spacing:2px; text-transform:uppercase}
.lvlup .lu-sub{color:var(--muted); font-weight:700; margin-top:8px; letter-spacing:3px; text-transform:uppercase; font-size:12px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.lvlup{animation:none}}

@media (max-width:860px){ .sys-hero{grid-template-columns:1fr} }
@media (max-width:560px){ .stats-row{grid-template-columns:1fr} }

/* ================= Constructeur de séance (zones du corps) ================= */
.builder-grid{display:grid; grid-template-columns:300px 1fr; gap:16px; align-items:start}
@media (max-width:760px){ .builder-grid{grid-template-columns:1fr} }
.body-card{display:flex; flex-direction:column; align-items:center}
.body-svg{width:100%; max-width:250px; height:auto; display:block}
.body-svg .fig{fill:var(--surface2); stroke:var(--line); stroke-width:1.5}
.zone{cursor:pointer}
.zone > *{fill:var(--coral); opacity:.16; stroke:var(--coral); stroke-width:1; transition:.15s}
.zone:hover > *{opacity:.4}
.zone.sel > *{opacity:.66}
.muscle-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; justify-content:center}
.muscle-chips button{border:1px solid var(--line); background:var(--surface2); color:var(--muted);
  padding:6px 10px; border-radius:9px; font-weight:700; font-size:12px; cursor:pointer; transition:.12s}
.muscle-chips button:hover{color:var(--text)}
.muscle-chips button.on{background:var(--coral); color:#fff; border-color:var(--coral)}
.panel-empty{color:var(--muted); text-align:center; padding:40px 16px; font-size:14px}
.ex-pick{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line)}
.ex-pick:last-child{border-bottom:0}
.ex-pick .ico{width:38px; height:38px; border-radius:11px; background:var(--surface2); display:grid; place-items:center; font-size:19px; flex:none}
.ex-pick .nm{flex:1; font-weight:700}
.ex-pick .nm span{display:block; font-weight:600; font-size:12px; color:var(--muted)}
.ex-add{width:40px; height:40px; border-radius:11px; border:1px solid var(--line); background:var(--surface2);
  color:var(--volt); font-size:22px; font-weight:800; cursor:pointer; line-height:1}
.ex-add.added{background:var(--good); border-color:var(--good); color:#08130D}
.picked-bar{position:sticky; bottom:14px; margin-top:16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; box-shadow:var(--shadow)}
.picked-bar .pk-info{flex:1; min-width:160px}
.picked-bar .pk-info b{font-family:"Barlow Semi Condensed"; font-size:22px}

/* stat cards : sous-titre explicatif */
.stat-card .st-sub{font-size:11px; color:var(--faint); font-weight:600; margin-top:6px}

/* ================= Popup mise à jour / nouveautés ================= */
.update-pop{position:fixed; right:20px; bottom:20px; z-index:65; width:min(340px, calc(100vw - 40px));
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow);
  animation:popIn .3s cubic-bezier(.2,.8,.2,1)}
.update-pop[hidden]{display:none}
@keyframes popIn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.update-pop{animation:none}}
.update-pop .up-top{display:flex; align-items:center; gap:9px; font-weight:800; font-size:15px; margin-bottom:6px}
.update-pop .up-badge{background:linear-gradient(150deg,var(--coral),var(--volt)); color:var(--ink);
  font-size:11px; font-weight:800; padding:3px 8px; border-radius:999px; margin-left:auto}
.update-pop .up-sum{font-size:13px; color:var(--muted); margin-bottom:14px}
.update-pop .up-actions{display:flex; gap:8px}
.update-pop .up-see{flex:1; background:var(--volt); color:var(--volt-ink); border:0; padding:10px; border-radius:10px; font-weight:800; cursor:pointer}
.update-pop .up-close{background:var(--surface2); color:var(--text); border:1px solid var(--line); padding:10px 14px; border-radius:10px; font-weight:700; cursor:pointer}
.news-item{padding:14px 0; border-bottom:1px solid var(--line)}
.news-item:last-child{border-bottom:0}
.news-item .nv{display:flex; align-items:baseline; gap:10px; margin-bottom:6px}
.news-item .nv b{font-family:"Barlow Semi Condensed"; font-size:18px}
.news-item .nv span{font-size:12px; color:var(--faint)}
.news-item ul{margin:0; padding-left:18px; color:var(--muted); font-size:14px}
.news-item li{margin:3px 0}

/* =============================================================================
   Correctifs mobile (audit sur iPhone 390px et Android 360px)
   L'app est utilisée surtout au téléphone : ces règles corrigent le débordement
   de la barre du haut, les cibles tactiles trop petites et les encoches iOS.
   ============================================================================= */

/* Les pastilles n'avaient AUCUN style : elles s'affichaient en boutons natifs. */
.chip-row{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1px solid var(--line); background:var(--surface2); color:var(--muted);
  padding:10px 14px; border-radius:11px; font-weight:700; font-size:13px;
  min-height:44px; cursor:pointer; font-family:inherit; transition:.12s}
.chip:hover{color:var(--text); border-color:var(--muted)}
.chip.on{background:var(--coral); border-color:var(--coral); color:#fff}

/* La popup nouveautés ne doit jamais recouvrir une modale ni le bouton d'action. */
.overlay:not([hidden]) ~ .update-pop{display:none}

/* Encoches et barre d'accueil iOS. */
.fab{bottom:calc(24px + env(safe-area-inset-bottom))}
.sheet{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.rest-bar{padding-bottom:calc(14px + env(safe-area-inset-bottom))}

/* Ligne "toi" du classement qui sortait de sa boîte. */
#leaderboard{overflow:hidden}

/* Un bouton seul sur sa ligne ne doit pas s'étirer sur toute la largeur. */
.seg button{flex:1 1 auto; min-width:0}

/* Cibles tactiles : viser 44px, la recommandation Apple et Google. */
nav.tabs button{padding:12px 15px}
.add-meal button{padding:12px 14px; min-height:44px}
.seg button{padding:11px 12px}
.kudos{padding:8px 10px; margin-top:4px; min-height:40px}
.section-head .pill{padding:9px 14px}
.sheet .ghost{padding:14px}
.muscle-chips button{padding:11px 14px; font-size:13px; min-height:44px}

/* Schéma du corps : zones plus grandes et plus lisibles au doigt. */
@media (max-width:760px){
  .body-svg{max-width:320px}
  .zone{-webkit-tap-highlight-color:transparent}
  .zone > *{stroke-width:2}
}

@media (max-width:560px){
  /* La barre du haut débordait de 31px et faisait dézoomer toute la page. */
  .topbar{gap:8px; padding:14px 0 14px}
  .brand{font-size:20px; letter-spacing:.5px; min-width:0; overflow:hidden}
  .brand .crest{width:26px; height:26px; font-size:18px}
  .brand small{display:none}
  .iconbtn{flex:none; width:40px; height:40px}
  .me-chip{flex:none; padding:4px}
  .me-chip b{display:none}

  /* Popup nouveautés au-dessus du bouton flottant, pas dessus. */
  .update-pop{right:12px; left:12px; width:auto; bottom:calc(88px + env(safe-area-inset-bottom))}

  /* Titres et sélecteurs qui se marchaient dessus sur l'onglet Séance. */
  .section-head{flex-wrap:wrap; row-gap:12px}
  #builder .section-head > div:first-child{flex:1 1 100%}
  #builder .section-head h2{font-size:22px}
  #viewSeg{max-width:none; width:100%}

  /* Verres d'eau assez grands pour le doigt. */
  .glass{width:38px; height:46px}

  /* Textes trop petits pour être lus sur téléphone. */
  .eyebrow,.st-sub,.ring-center .lbl,.lb-name .tag,.lb-pts small,.up-badge{font-size:12px}
  #progress svg text{font-size:11px}
}

/* ============================================================
   Barre d'onglets fixe en bas sur telephone.
   Pourquoi : a 390px les 5 onglets passaient sur 2 lignes et
   mangeaient le haut de l'ecran. Le pouce atteint le bas, pas
   le haut : on adopte le pattern des vraies apps mobiles.
   ============================================================ */
@media (max-width:560px){
  nav.tabs{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    margin:0; gap:0; flex-wrap:nowrap;
    display:grid; grid-template-columns:repeat(5,1fr);
    background:var(--surface); border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    backdrop-filter:saturate(140%) blur(8px);
  }
  nav.tabs button{
    flex-direction:column; gap:3px; padding:7px 2px 5px;
    font-size:10.5px; font-weight:700; letter-spacing:.1px;
    border-radius:10px; min-height:52px; justify-content:center;
    border-color:transparent !important; background:transparent !important;
  }
  nav.tabs button svg{width:21px; height:21px}
  nav.tabs button[aria-selected="true"]{color:var(--volt)}
  nav.tabs button[aria-selected="true"] svg{color:var(--volt)}

  /* on degage la place pour la barre + on remonte tout ce qui flotte */
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  .fab{bottom:calc(84px + env(safe-area-inset-bottom))}
  .update-pop{bottom:calc(148px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}

  /* titres de vue : 3 lignes pour "Haut du corps · Poussee", c'etait trop */
  .view h1, h1{font-size:27px; line-height:1.1}
}

/* ============================================================
   Panneau admin : invitations et membres.
   Les codes se lisent et se dictent, donc police mono, grande,
   et interlettrage large. Sur telephone la ligne se plie au
   lieu de comprimer le code, c'est lui qu'on doit lire.
   ============================================================ */
.inv-item{padding:13px 0; border-bottom:1px solid var(--line)}
.inv-item:last-child{border-bottom:0}
.inv-top{display:flex; align-items:center; gap:10px}
.inv-ico{font-size:18px; flex:none}
.inv-code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:17px; font-weight:700; letter-spacing:1.5px; word-break:break-all}
.inv-code.spent{opacity:.45; text-decoration:line-through}
.inv-sub{font-size:12.5px; color:var(--muted); font-weight:600; margin:5px 0 0 28px}
.inv-acts{display:flex; gap:8px; margin:10px 0 0 28px; flex-wrap:wrap}
.inv-acts .btn-ghost{padding:9px 14px; font-size:12.5px; min-height:40px}

#memberList .pr-item .name span{white-space:normal}
#memberList .pr-item .btn-ghost{padding:9px 13px; font-size:12.5px; min-height:40px; flex:none}

@media (max-width:560px){
  #adminPanel .two-col{grid-template-columns:1fr}
  .inv-sub, .inv-acts{margin-left:0}
}

/* ============================================================
   Carte d'installation. Elle disparait des que l'app tourne en
   mode standalone : rien de plus penible qu'une banniere qui
   te propose d'installer ce que tu as deja installe.
   ============================================================ */
.install-card{background:linear-gradient(150deg, color-mix(in srgb,var(--volt) 14%, var(--surface)), var(--surface) 60%);
  border-color:color-mix(in srgb,var(--volt) 30%, var(--line)); margin-bottom:16px}
.install-card[hidden]{display:none}
.install-card .ins-head{display:flex; gap:13px; align-items:flex-start}
.install-card .ins-ico{font-size:26px; line-height:1; flex:none}
.install-card h3{font-size:18px}
.install-card .ins-sub{font-size:13.5px; color:var(--muted); margin-top:4px}
.install-card .btn-primary{margin-top:14px; width:100%; justify-content:center}
.ins-steps{margin:12px 0 0; padding-left:20px; font-size:13.5px; color:var(--muted); line-height:1.65}
.ins-steps[hidden]{display:none}
.ins-steps li{margin:5px 0}
.ins-steps b{color:var(--text)}