/* Essentiel — sober and direct, inspired by the big commerce platforms: off-white pages, white
   cards with a hairline border, near-black ink, Inter everywhere, black pill buttons and no
   decorative colour (status colours stay quiet). Member area (after app.css + soft.css);
   the home page has its own sheet (essentiel-home.css) and the sign-up its own (signup.css). */
html[data-style="essentiel"]{
  --font-h:"Inter","Apple Color Emoji","Noto Color Emoji",system-ui,sans-serif; --h-weight:500; --h-case:none; --h-track:-.03em;
  --font-label:"Inter",system-ui,sans-serif; --label-case:none; --label-track:0;
  --font-b:"Inter","Apple Color Emoji","Noto Color Emoji",system-ui,sans-serif; --font-d:"Inter",system-ui,sans-serif;
  --r:16px; --r-sm:12px; --r-btn:999px;
}
html[data-style="essentiel"][data-theme="light"]{color-scheme:light;
  --bg:#f1f1ef; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#f6f6f4; --line:#e3e3e0; --line-2:#d2d2ce;
  --text:#0b0b0b; --text-2:#222224; --text-3:#3c3c40; --muted:#6b6b70;
  --accent:#0b0b0b; --accent-deep:#000; --accent-soft:rgba(11,11,11,.06);
  --ok:#1a7f45; --ok-soft:rgba(26,127,69,.08); --warn:#0b0b0b; --warn-soft:rgba(11,11,11,.05);
  --danger-text:#c4161c; --info-text:#1f5fbf; --ink:11 11 11; --base:241 241 239;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.06); --card-shadow:none;
}
html[data-style="essentiel"][data-theme="dark"]{color-scheme:dark;
  --bg:#0b0d0d; --bg-2:#111414; --panel:#151818; --panel-2:#1b1f1f; --line:#252a2a; --line-2:#343a3a;
  --text:#f2f2f0; --text-2:#e2e2df; --text-3:#c5c6c3; --muted:#8f9694;
  --accent:#f2f2f0; --accent-deep:#ffffff; --accent-soft:rgba(242,242,240,.07);
  --ok:#5cc58a; --ok-soft:rgba(92,197,138,.1); --warn:#f2f2f0; --warn-soft:rgba(242,242,240,.06);
  --ink:242 242 240; --base:11 13 13;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 34px rgba(0,0,0,.35);
}
html[data-style="essentiel"] body{font-family:var(--font-b);letter-spacing:-.006em;-webkit-font-smoothing:antialiased}

/* Buttons: black pills (white in the dark theme), sentence case */
html[data-style="essentiel"] .btn{font-family:var(--font-b);font-weight:600;text-transform:none;letter-spacing:0;font-size:15px;border-radius:999px;color:#fff}
html[data-style="essentiel"][data-theme="dark"] .btn:not(.ghost){color:#0b0d0d}
html[data-style="essentiel"] .btn:hover{box-shadow:0 6px 18px rgb(var(--ink) / .14)}
html[data-style="essentiel"] .btn.sm{font-size:13.5px}
html[data-style="essentiel"] .btn.ghost{border-color:var(--line-2);color:var(--text);background:var(--panel)}
html[data-style="essentiel"] .btn.ghost:hover{border-color:var(--text)}
html[data-style="essentiel"] input,html[data-style="essentiel"] select,html[data-style="essentiel"] textarea{border-radius:12px;background:var(--panel)}

/* Titles: big, light and tight */
html[data-style="essentiel"] .title{font-weight:500;letter-spacing:-.035em}
html[data-style="essentiel"] .eyebrow{letter-spacing:0;text-transform:none;font-weight:500;font-size:13px}
html[data-style="essentiel"] .eyebrow::before{display:none}
html[data-style="essentiel"] label{font-size:13px;font-weight:500;color:var(--text-3)}
html[data-style="essentiel"] .stat b,html[data-style="essentiel"] .points,html[data-style="essentiel"] .reward-val,html[data-style="essentiel"] .profile-name,html[data-style="essentiel"] .bs-title{font-weight:600;letter-spacing:-.03em}

/* Top bar: one line — below 1100px the links go into the ☰ menu */
html[data-style="essentiel"] .top{background:rgb(var(--base) / .92);border-bottom:1px solid var(--line)}
html[data-style="essentiel"] .nav{flex-wrap:nowrap}
html[data-style="essentiel"] .nav-link{font-weight:500;font-size:14px;padding:8px 10px}
html[data-style="essentiel"] .nav-link::after{display:none}
html[data-style="essentiel"] .nav-link.on{color:var(--text);background:rgb(var(--ink) / .06);border-radius:999px}
html[data-style="essentiel"] .me-menu>summary{background:var(--panel)}
@media (max-width:1100px){
  html[data-style="essentiel"] .nav-right{flex-wrap:nowrap;gap:2px}
  html[data-style="essentiel"] .nav-right>.nav-link:not([href="login.php"]),html[data-style="essentiel"] .nav-right>.theme-btn,html[data-style="essentiel"] .nav-right>.lang-pick{display:none}
  html[data-style="essentiel"] .m-menu{display:block}
  html[data-style="essentiel"] .me-name{display:none}
}

/* Cards and surfaces: white, hairline border, no gradients */
html[data-style="essentiel"] .card,html[data-style="essentiel"] .stat,html[data-style="essentiel"] .pcard,html[data-style="essentiel"] .now-card,html[data-style="essentiel"] .banner{border:1px solid var(--line);background:var(--panel);box-shadow:none}
html[data-style="essentiel"] .now-card::before{display:none}
html[data-style="essentiel"] .now-card.who-you{border-color:var(--text)}
html[data-style="essentiel"] .verify-bar{border:1px solid var(--line);background:var(--panel);border-radius:14px}
html[data-style="essentiel"] .stat.hot{border-color:var(--text)}
html[data-style="essentiel"] .stat.hot b{color:var(--text)}

/* Badges and "whose turn": quiet grey pills, black when the client has something to do */
html[data-style="essentiel"] .badge{font-weight:600;font-size:12px;letter-spacing:0;text-transform:none;border:0;background:rgb(var(--ink) / .06);color:var(--text-3);padding:4px 11px}
html[data-style="essentiel"] .badge.sm{font-size:11px;padding:2px 8px}
html[data-style="essentiel"] .badge.you{background:var(--text);color:var(--bg);animation:none}
html[data-style="essentiel"] .badge.done{background:var(--ok-soft);color:var(--ok)}
html[data-style="essentiel"] .badge.off{background:rgba(196,22,28,.08);color:var(--danger-text)}
html[data-style="essentiel"] .who{border:0;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;background:rgb(var(--ink) / .06);color:var(--text-3)}
html[data-style="essentiel"] .who-you .who{background:var(--text);color:var(--bg)}
html[data-style="essentiel"] .who-us .who,html[data-style="essentiel"] .admin .who{background:var(--ok-soft);color:var(--ok)}
html[data-style="essentiel"] .who-you .pulse,html[data-style="essentiel"] .pulse{background:var(--text)}

/* Progress: black on grey */
html[data-style="essentiel"] .stepper li.done::before,html[data-style="essentiel"] .stepper li.now::before{background:var(--text)}
html[data-style="essentiel"] .stepper li.done i{background:var(--text);border-color:var(--text);color:var(--bg)}
html[data-style="essentiel"] .stepper li.now i{border-color:var(--text);color:var(--text);box-shadow:0 0 0 4px rgb(var(--ink) / .08)}
html[data-style="essentiel"] .progress span,html[data-style="essentiel"] .bar span{background:var(--text)}

/* People without a photo: muted initials, not a rainbow */
html[data-style="essentiel"] .avatar.initials{background:hsl(var(--h,0) 10% 30%);font-family:var(--font-b);font-weight:600}

/* Balance button and the phone tab bar: neutral */
html[data-style="essentiel"] .wallet-btn{--wa:rgb(var(--ink) / .35)}
html[data-style="essentiel"] .tabbar{background:rgba(24,26,26,.72)}
html[data-style="essentiel"] .tabbar a.on,html[data-style="essentiel"] .tabbar a.on .tab-av{color:#fff;border-color:#fff}
html[data-style="essentiel"] .tabbar a.on::after{content:"";position:absolute;bottom:-7px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#fff}

/* Misc */
html[data-style="essentiel"] .subnav a{font-weight:500}
html[data-style="essentiel"] .menu-btn,html[data-style="essentiel"] .m-burger{border-radius:999px}
html[data-style="essentiel"] .ck,html[data-style="essentiel"] .cookie-bar{border-radius:16px;border-top-width:1px}
html[data-style="essentiel"] .ck-txt strong,html[data-style="essentiel"] .cookie-bar strong{font-family:var(--font-b);font-weight:600;text-transform:none;letter-spacing:0}
html[data-style="essentiel"] .foot{border-top:1px solid var(--line);color:var(--muted)}
html[data-style="essentiel"] .gs-list li{border-radius:12px;background:var(--panel-2);border-color:transparent}
html[data-style="essentiel"] .gs-list li.done{text-decoration-color:var(--muted)}
html[data-style="essentiel"] .gs-list li.done .gs-check{background:var(--text);border-color:var(--text)}
html[data-style="essentiel"] .pulse,html[data-style="essentiel"] .who-you .pulse{animation:none;box-shadow:0 0 0 4px rgb(var(--ink) / .08)}

/* Counters: always red with white figures (white on white made empty bubbles in the dark theme) */
html[data-style="essentiel"] .icon-btn b,html[data-style="essentiel"] .pill{background:#e5262d;color:#fff}
html[data-style="essentiel"][data-theme="dark"] legend span,html[data-style="essentiel"][data-theme="dark"] .topup-chip input:checked+span,html[data-style="essentiel"][data-theme="dark"] .vp-play,html[data-style="essentiel"][data-theme="dark"] .fq-play{color:#0b0d0d}
html[data-style="essentiel"][data-theme="dark"] ::selection{color:#0b0d0d}
html[data-style="essentiel"] .gs-list li.done .gs-check{color:var(--bg)}