/* Hokay — Home v2 : structure guidée (nouveaux visiteurs, talents, recruteurs), mobile + PC.
   S'appuie sur les variables de home.css (--card, --sand, --muted, --ember, --border…). */

/* ── États d'affichage : visiteur / connecté / mode ── */
html.hk-guest .hk-auth-only{display:none!important;}
html.hk-auth  .hk-guest-only{display:none!important;}
.hk-for-rec{display:none;}
body.mode-rec .hk-for-rec,body.mode-company .hk-for-rec{display:block;}
body.mode-rec .hk-for-dev,body.mode-company .hk-for-dev{display:none;}

/* Éléments remplacés par la nouvelle structure */
#guest-banner,#welcome-modal{display:none!important;}
html.hk-guest #pow-hero-mobile,html.hk-guest #pow-hero-pc,html.hk-guest #quick-action-pc,html.hk-guest #quick-action-mobile{display:none!important;}
#recent-solves-widget{display:none;}
#recent-solves-widget.hk-show{display:block;}
html.hk-auth #recent-solves-widget{display:none!important;}
body.mode-rec #quick-action-mobile,body.mode-company #quick-action-mobile,body.mode-rec #quick-action-pc,body.mode-company #quick-action-pc{display:none!important;}

/* ── Boutons ── */
.hk-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:8px;border:1px solid var(--border2);
  background:transparent;color:var(--sand);font-family:'Syne',sans-serif;font-weight:700;font-size:.8rem;text-decoration:none;cursor:pointer;white-space:nowrap;}
.hk-btn:hover{border-color:var(--ember);color:var(--ember);}
.hk-btn.primary{background:var(--ember-btn);border-color:transparent;color:#0c0a08;}
.hk-btn.primary:hover{filter:brightness(1.08);color:#0c0a08;}
.hk-pill{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;border:1px solid var(--ember);color:var(--ember);
  font-family:'Syne',sans-serif;font-weight:700;font-size:.74rem;text-decoration:none;white-space:nowrap;}

/* ── Bloc d'accueil (visiteurs) ── */
.hk-welcome{position:relative;overflow:hidden;background:var(--card);border:1px solid rgba(224,123,53,.28);border-radius:16px;padding:20px 18px;margin-bottom:18px;}
.hk-welcome::before{content:'';position:absolute;top:-60px;right:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(224,123,53,.16),transparent 70%);pointer-events:none;}
html.hk-auth .hk-welcome{display:none;}
.hk-eyebrow{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ember);
  background:rgba(224,123,53,.1);border:1px solid rgba(224,123,53,.25);border-radius:999px;padding:3px 10px;margin-bottom:10px;position:relative;}
.hk-welcome h2{position:relative;font-family:'Syne',sans-serif;font-weight:800;font-size:1.35rem;line-height:1.2;letter-spacing:-.4px;color:var(--sand);margin:0 0 6px;}
.hk-welcome .hk-lead{position:relative;font-size:.86rem;line-height:1.5;color:var(--muted);margin:0 0 14px;max-width:560px;}

.hk-aud{position:relative;display:inline-flex;gap:4px;padding:3px;background:var(--surface);border:1px solid var(--border);border-radius:10px;margin-bottom:14px;}
.hk-aud-tab{border:none;background:transparent;color:var(--muted);font-family:'DM Sans',sans-serif;font-weight:600;font-size:.8rem;padding:7px 14px;border-radius:8px;cursor:pointer;}
.hk-aud-tab.active{background:var(--ember-btn);color:#0c0a08;}
.hk-panel{display:none;position:relative;}
.hk-panel.active{display:block;}

.hk-steps{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px;}
.hk-steps li{display:flex;gap:12px;align-items:flex-start;}
.hk-step-n{flex:0 0 26px;height:26px;border-radius:50%;background:rgba(224,123,53,.12);border:1px solid rgba(224,123,53,.35);color:var(--ember);
  font-family:'Syne',sans-serif;font-weight:800;font-size:.78rem;display:flex;align-items:center;justify-content:center;}
.hk-steps b{display:block;font-size:.88rem;color:var(--sand);font-weight:700;}
.hk-steps span.hk-step-t{display:block;font-size:.78rem;color:var(--muted);line-height:1.45;margin-top:1px;}
.hk-cta{display:flex;flex-wrap:wrap;gap:8px;position:relative;}
.hk-explore{position:relative;display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);font-size:.78rem;color:var(--muted);}
.hk-explore a{color:var(--sand);text-decoration:none;font-weight:600;}
.hk-explore a:hover{color:var(--ember);}

/* ── Actions rapides (mobile, connecté) ── */
.hk-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px;}
.hk-quick.hk-for-rec{display:none;}
.hk-quick a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;background:var(--card);border:1px solid var(--border);border-radius:12px;
  color:var(--sand);text-decoration:none;font-size:.72rem;font-weight:600;text-align:center;}
.hk-quick a:hover{border-color:rgba(224,123,53,.4);}
.hk-quick a svg{color:var(--ember);}
body.mode-rec .hk-quick a svg{color:#5b9cf6;}
body.mode-company .hk-quick a svg{color:#4caf7d;}
html.hk-guest .hk-quick{display:none!important;}
body.mode-rec .hk-quick.hk-for-dev,body.mode-company .hk-quick.hk-for-dev{display:none;}
body.mode-rec .hk-quick.hk-for-rec,body.mode-company .hk-quick.hk-for-rec{display:grid;}

/* ── En-tête de section du fil ── */
.hk-feed-sub{font-size:.78rem;color:var(--muted);text-align:center;margin:-8px 0 14px;}
html.hk-auth .hk-feed-sub{display:none;}

/* ── PC : fil + colonne « Explorer » ── */
.pc-content-inner.hk-pc{max-width:1080px;margin:0 auto;padding:24px 20px;}
.hk-pc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;}
.hk-pc-main{min-width:0;max-width:680px;width:100%;margin:0 auto;}
.hk-rail{min-width:0;}
@media (min-width:1100px){
  .pc-content-inner.hk-pc{padding:28px 24px;}
  .hk-pc-grid{grid-template-columns:minmax(0,640px) 320px;justify-content:center;gap:32px;}
  .hk-pc-main{max-width:none;margin:0;}
  .hk-rail{position:sticky;top:84px;display:flex;flex-direction:column;gap:16px;align-self:start;max-height:calc(100vh - 100px);overflow-y:auto;scrollbar-width:none;}
  .hk-rail::-webkit-scrollbar{display:none;}
  .hk-rail #challenges-scroll-pc{flex-direction:column!important;overflow:visible!important;gap:10px!important;}
  .hk-rail #challenges-scroll-pc > *{width:100%!important;}
  .hk-rail #challenges-scroll-pc > *:nth-child(n+4){display:none!important;}
  .hk-rail #challenges-section-pc{margin-bottom:0!important;}
}
@media (max-width:1099px){
  .hk-rail{order:-1;}
  .hk-guide{display:none;}
}

.hk-guide{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;}
.hk-guide h3{font-family:'Syne',sans-serif;font-weight:700;font-size:.9rem;color:var(--sand);margin:0 0 12px;}
.hk-guide ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;}
.hk-guide ul.hk-for-rec{display:none;}
body.mode-rec .hk-guide ul.hk-for-rec,body.mode-company .hk-guide ul.hk-for-rec{display:grid;}
body.mode-rec .hk-guide ul.hk-for-dev,body.mode-company .hk-guide ul.hk-for-dev{display:none;}
.hk-guide li a{display:flex;gap:12px;align-items:flex-start;padding:9px 8px;border-radius:10px;text-decoration:none;}
.hk-guide li a:hover{background:rgba(224,123,53,.07);}
.hk-guide .hk-ico{flex:0 0 32px;height:32px;border-radius:9px;background:rgba(224,123,53,.1);color:var(--ember);display:flex;align-items:center;justify-content:center;}
.hk-guide b{display:block;font-size:.84rem;color:var(--sand);font-weight:700;}
.hk-guide small{display:block;font-size:.74rem;color:var(--muted);line-height:1.4;margin-top:1px;}
.hk-guide-foot{margin-top:10px;padding-top:12px;border-top:1px solid var(--border);font-size:.78rem;color:var(--muted);}
.hk-guide-foot a{color:var(--ember);font-weight:700;text-decoration:none;}

/* ── Sidebar visiteur ── */
.hk-side-cta{margin:14px 12px;padding:14px;background:var(--card);border:1px solid rgba(224,123,53,.25);border-radius:14px;}
.hk-side-cta b{display:block;font-family:'Syne',sans-serif;font-size:.86rem;color:var(--sand);margin-bottom:4px;}
.hk-side-cta p{font-size:.76rem;color:var(--muted);line-height:1.45;margin:0 0 10px;}
.hk-side-cta .hk-btn{width:100%;margin-bottom:6px;}

@media (max-width:420px){
  .hk-welcome h2{font-size:1.2rem;}
  .hk-cta .hk-btn{flex:1 1 100%;}
}