/* SpeakPro Free Learning Hub — styles (préfixes hb- pour les pages, hp- pour le lecteur d'activités). */
.hb{ --hb-navy:#10233F; --hb-navy2:#1C3A66; --hb-gold:#B98A4E; --hb-gold-l:#D7AE74; --hb-copper:#C8683F; --hb-cream:#F8F3EC; --hb-ivory:#FCF9F4; --hb-line:#E7DDD0; --hb-mute:#5F6878; --hb-ok:#1F7A4D; --hb-ok-bg:#E8F5EE; --hb-ko:#A1352B; --hb-ko-bg:#FCECEA;
  background:var(--hb-cream); color:var(--hb-navy); }
.hb-wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }
.hb-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hb h1, .hb h2, .hb h3, .hp-title{ font-family:var(--display-serif); font-weight:600; color:var(--hb-navy); letter-spacing:-.015em; }
.hb-kicker{ display:inline-flex; align-items:center; gap:12px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--hb-gold); }
.hb-kicker::after{ content:""; width:40px; height:1px; background:currentColor; opacity:.7; }
.hb-sec{ padding:34px 0; }
.hb-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.hb-sec-head h2{ font-size:clamp(23px,2.5vw,30px); margin-top:6px; }
.hb-sec-head p{ color:var(--hb-mute); font-size:15px; max-width:56ch; }
.hb-link{ color:var(--hb-navy); font-weight:700; font-size:14.5px; text-decoration:underline; text-underline-offset:3px; }

/* Boutons */
.hb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 20px; border-radius:100px; border:1.5px solid var(--hb-navy); background:var(--hb-navy); color:#fff !important; font:inherit; font-weight:700; font-size:14.5px; cursor:pointer; text-decoration:none; transition:background .2s, border-color .2s; }
.hb-btn:hover{ background:var(--hb-navy2); border-color:var(--hb-navy2); }
.hb-btn.is-ghost{ background:#fff; color:var(--hb-navy) !important; border-color:var(--hb-line); }
.hb-btn.is-ghost:hover{ border-color:var(--hb-navy); }
.hb-btn.is-sm{ min-height:38px; padding:7px 14px; font-size:13.5px; }
.hb-btn:disabled{ opacity:.45; cursor:not-allowed; }
.hb-btn:focus-visible, .hp-opt:focus-visible, .hp-mw:focus-visible, .hp-md:focus-visible, .hb-chip:focus-visible, .hb-card:focus-visible, .hb-tile:focus-visible{ outline:2px solid var(--hb-gold); outline-offset:3px; }
.hb-btn.is-rec{ background:var(--hb-copper); border-color:var(--hb-copper); }
.hb-btn.is-rec.is-on{ background:var(--hb-ko); border-color:var(--hb-ko); }

/* Pastilles */
.hb-lvl{ display:inline-flex; align-items:center; min-height:22px; padding:2px 9px; border-radius:100px; background:var(--hb-navy); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.04em; }
.hb-pill{ display:inline-flex; align-items:center; min-height:22px; padding:2px 9px; border-radius:100px; background:#F1E7D8; color:#6B4A1F; font-size:11.5px; font-weight:700; }
.hb-pill.is-done{ background:var(--hb-ok-bg); color:var(--hb-ok); }
.hb-badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:100px; border:1px solid var(--hb-line); background:#fff; font-size:13px; font-weight:600; }
.hb-badge.is-off{ opacity:.45; }
.hb-badge.is-new{ border-color:var(--hb-gold); background:#FFF7EA; }

/* Hero */
.hb-hero{ background:linear-gradient(180deg, var(--hb-ivory) 0%, var(--hb-cream) 100%); padding:52px 0 26px; }
.hb-hero h1{ font-size:clamp(30px,4vw,46px); line-height:1.1; margin-top:14px; max-width:20ch; }
.hb-hero p.lead{ font-size:17px; color:var(--hb-mute); margin-top:14px; max-width:60ch; line-height:1.65; }
.hb-quick{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:26px; }
.hb-tile{ display:flex; flex-direction:column; gap:4px; padding:16px 18px; border-radius:16px; background:#fff; border:1px solid var(--hb-line); color:var(--hb-navy); text-decoration:none; transition:transform .2s, border-color .2s; }
.hb-tile:hover{ transform:translateY(-2px); border-color:var(--hb-gold-l); }
.hb-tile b{ font-size:16px; }
.hb-tile span{ font-size:13.5px; color:var(--hb-mute); line-height:1.45; }

/* Bandeau de progression */
.hb-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto; gap:0; align-items:stretch; margin-top:20px; background:var(--hb-navy); color:#D9E1EE; border-radius:18px; overflow:hidden; }
.hb-stat{ padding:16px 18px; border-right:1px solid rgba(255,255,255,.1); }
.hb-stat b{ display:block; font-family:var(--display-serif); font-size:26px; font-weight:600; color:#fff; line-height:1.1; }
.hb-stat span{ font-size:12.5px; color:#B9C5DA; }
.hb-stats-note{ padding:14px 18px; font-size:13px; line-height:1.5; display:flex; align-items:center; gap:10px; flex-wrap:wrap; max-width:330px; }
.hb-stats-note a{ color:var(--hb-gold-l); font-weight:700; }

/* Cartes */
.hb-card{ background:#fff; border:1px solid var(--hb-line); border-radius:18px; padding:22px; }
.hb-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.hb-cats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.hb-cat{ display:flex; flex-direction:column; gap:6px; padding:18px; border-radius:16px; background:#fff; border:1px solid var(--hb-line); text-decoration:none; color:var(--hb-navy); transition:transform .2s, border-color .2s, box-shadow .2s; }
.hb-cat:hover{ transform:translateY(-2px); border-color:var(--hb-gold-l); box-shadow:0 12px 28px rgba(16,35,63,.07); }
.hb-cat-ic{ width:40px; height:40px; border-radius:50%; border:1.25px solid var(--hb-gold-l); color:var(--hb-gold); display:flex; align-items:center; justify-content:center; font-family:var(--display-serif); font-size:17px; background:var(--hb-ivory); }
.hb-cat b{ font-size:16.5px; margin-top:4px; }
.hb-cat span{ font-size:13.5px; color:var(--hb-mute); line-height:1.45; }
.hb-cat small{ font-size:12px; color:var(--hb-gold); font-weight:700; margin-top:auto; padding-top:6px; }
.hb-act{ display:flex; flex-direction:column; gap:8px; padding:16px 18px; border-radius:16px; background:#fff; border:1px solid var(--hb-line); text-decoration:none; color:var(--hb-navy); transition:border-color .2s, transform .2s; }
.hb-act:hover{ border-color:var(--hb-navy); transform:translateY(-2px); }
.hb-act-top{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--hb-mute); }
.hb-act b{ font-size:16px; line-height:1.3; }
.hb-act p{ font-size:13.5px; color:var(--hb-mute); line-height:1.45; }
.hb-act-foot{ display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--hb-mute); margin-top:auto; }
.hb-act-foot em{ font-style:normal; color:var(--hb-navy); font-weight:700; }

/* Daily English */
.hb-daily{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:16px; }
.hb-expr{ background:var(--hb-navy); color:#D9E1EE; border-radius:20px; padding:24px; }
.hb-expr .hb-kicker{ color:var(--hb-gold-l); }
.hb-expr h3{ color:#fff; font-size:clamp(23px,2.6vw,30px); margin-top:10px; }
.hb-expr .ex{ margin-top:10px; font-style:italic; color:#E9EEF6; line-height:1.55; }
.hb-expr .hp-opt{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:#fff; }
.hb-expr .hp-opt:hover:not(:disabled){ border-color:var(--hb-gold-l); }
.hb-expr .hp-opt-k{ background:rgba(255,255,255,.12); color:#fff; }
.hb-expr .hp-fb{ color:#E9EEF6; }
.hb-expr .hp-fb.is-ok, .hb-expr .hp-fb.is-ko{ background:rgba(255,255,255,.08); color:#fff; }
.hb-expr .hp-opt.is-ok{ background:rgba(31,122,77,.35); border-color:#5FBF8F; }
.hb-expr .hp-opt.is-ko{ background:rgba(161,53,43,.35); border-color:#E58A80; }
.hb-oral{ margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.14); font-size:14px; color:#C9D3E3; }
.hb-daily-main{ display:flex; flex-direction:column; gap:10px; }

/* Filtres + recherche */
.hb-tools{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.hb-search{ width:100%; min-height:48px; border:1.5px solid #DDD2C4; border-radius:12px; padding:0 14px; font:inherit; font-size:16px; background:#fff; color:var(--hb-navy); }
.hb-search:focus{ outline:none; border-color:var(--hb-gold); box-shadow:0 0 0 3px rgba(185,138,78,.16); }
.hb-chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.hb-chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:7px 14px; border-radius:100px; border:1px solid var(--hb-line); background:#fff; color:var(--hb-navy); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; }
.hb-chip.is-active{ background:var(--hb-navy); border-color:var(--hb-navy); color:#fff; }
.hb-chip-l{ flex:0 0 auto; align-self:center; font-size:12px; font-weight:700; color:var(--hb-mute); text-transform:uppercase; letter-spacing:.08em; padding-right:4px; }
.hb-count{ font-size:13.5px; color:var(--hb-mute); margin:4px 0 12px; }
.hb-empty{ padding:22px; text-align:center; color:var(--hb-mute); background:#fff; border:1px dashed var(--hb-line); border-radius:16px; }

/* Library */
.hb-res{ display:flex; flex-direction:column; gap:8px; padding:16px 18px; border-radius:16px; background:#fff; border:1px solid var(--hb-line); }
.hb-res b{ font-size:15.5px; line-height:1.3; }
.hb-res p{ font-size:13.5px; color:var(--hb-mute); line-height:1.45; }
.hb-res-meta{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--hb-mute); }
.hb-res-meta .t{ font-weight:700; color:var(--hb-navy); }
.hb-res a.hb-btn{ align-self:flex-start; margin-top:auto; }

/* Parcours */
.hb-path{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.hb-month{ padding:18px; border-radius:16px; background:#fff; border:1px solid var(--hb-line); }
.hb-month.is-now{ border-color:var(--hb-gold); box-shadow:0 0 0 3px rgba(185,138,78,.15); }
.hb-month h3{ font-size:18px; margin-top:4px; }
.hb-month p{ font-size:13.5px; color:var(--hb-mute); margin-top:6px; line-height:1.5; }
.hb-month ul{ margin:10px 0 0; padding:0; list-style:none; display:grid; gap:6px; }
.hb-month li a{ display:flex; justify-content:space-between; gap:8px; font-size:13.5px; color:var(--hb-navy); text-decoration:none; padding:6px 8px; border-radius:8px; background:var(--hb-ivory); }
.hb-month li a:hover{ background:#F1E7D8; }
.hb-month li a.is-done::after{ content:"✓"; color:var(--hb-ok); font-weight:700; }
.hb-bar{ height:8px; border-radius:100px; background:#EFE6D8; overflow:hidden; margin-top:10px; }
.hb-bar i{ display:block; height:100%; background:linear-gradient(90deg, var(--hb-gold-l), var(--hb-copper)); }

/* Progression */
.hb-cal{ display:grid; grid-template-columns:repeat(14, minmax(0,1fr)); gap:4px; max-width:520px; }
.hb-cal i{ aspect-ratio:1; border-radius:4px; background:#EFE6D8; }
.hb-cal i.on{ background:var(--hb-copper); }
.hb-cal i.today{ outline:2px solid var(--hb-navy); outline-offset:1px; }
.hb-skill{ display:grid; grid-template-columns:150px 1fr 40px; gap:10px; align-items:center; font-size:14px; margin-top:8px; }
.hb-badges{ display:flex; gap:8px; flex-wrap:wrap; }

/* CTA */
.hb-cta{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background:linear-gradient(135deg,#142B4E 0%, #0B1A30 100%); color:#D9E1EE; border-radius:22px; padding:30px 32px; }
.hb-cta h2{ color:#fff; font-size:clamp(22px,2.4vw,28px); }
.hb-cta p{ margin-top:6px; color:#C9D3E3; max-width:60ch; font-size:15px; line-height:1.6; }
.hb-cta .hb-btn{ background:var(--hb-copper); border-color:var(--hb-copper); }

/* ---------------- Lecteur d'activités ---------------- */
.hp{ max-width:760px; margin:0 auto; }
.hp-head{ margin-bottom:10px; }
.hp-cat{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--hb-gold); }
.hp-title{ font-size:clamp(25px,3.2vw,34px); line-height:1.15; margin-top:6px; }
.hp-sub{ color:var(--hb-mute); margin-top:6px; font-size:15.5px; }
.hp-meta{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; font-size:13px; color:var(--hb-mute); }
.hp-meta span + span::before{ content:"·"; margin-right:8px; color:#C9BBA6; }
.hp-meta .hb-lvl + span::before{ content:""; margin:0; }
.hp-intro{ background:var(--hb-ivory); border:1px solid var(--hb-line); border-radius:14px; padding:12px 14px; font-size:14.5px; line-height:1.55; margin-top:12px; }
.hp-progress{ height:6px; border-radius:100px; background:#EFE6D8; overflow:hidden; margin-top:16px; }
.hp-progress i{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--hb-gold-l), var(--hb-copper)); transition:width .3s ease; }
.hp-count{ font-size:13px; color:var(--hb-mute); margin-top:6px; }
.hp-body{ margin-top:14px; display:flex; flex-direction:column; gap:12px; }
.hp-card{ background:#fff; border:1px solid var(--hb-line); border-radius:18px; padding:20px; }
.hp-tag{ font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--hb-gold); margin-bottom:8px; }
.hp-s{ font-size:18px; line-height:1.55; font-weight:600; }
.hp-blank{ display:inline-block; min-width:56px; border-bottom:2px solid var(--hb-gold); color:transparent; }
.hp-q{ font-size:16.5px; line-height:1.5; margin-top:6px; font-weight:600; }
.hp-opts{ display:grid; gap:10px; margin-top:14px; }
.hp-opt{ display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:10px 14px; border-radius:14px; border:1.5px solid var(--hb-line); background:#fff; color:var(--hb-navy); font:inherit; font-size:15.5px; text-align:left; cursor:pointer; transition:border-color .15s, background .15s; }
.hp-opt:hover:not(:disabled){ border-color:var(--hb-navy); }
.hp-opt-k{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--hb-ivory); display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; }
.hp-opt:disabled{ cursor:default; }
.hp-opt.is-ok{ border-color:var(--hb-ok); background:var(--hb-ok-bg); }
.hp-opt.is-ko{ border-color:var(--hb-ko); background:var(--hb-ko-bg); }
.hp-fb{ margin-top:12px; font-size:14.5px; line-height:1.55; border-radius:12px; }
.hp-fb:empty{ display:none; }
.hp-fb.is-ok, .hp-fb.is-ko{ padding:12px 14px; }
.hp-fb.is-ok{ background:var(--hb-ok-bg); color:#134D31; }
.hp-fb.is-ko{ background:var(--hb-ko-bg); color:#6E241D; }
.hp-gap{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.hp-input{ flex:1; min-width:180px; min-height:48px; border:1.5px solid #DDD2C4; border-radius:12px; padding:0 14px; font:inherit; font-size:16px; color:var(--hb-navy); background:#fff; }
.hp-input:focus{ outline:none; border-color:var(--hb-gold); box-shadow:0 0 0 3px rgba(185,138,78,.16); }
.hp-ta{ width:100%; min-height:90px; padding:10px 14px; resize:vertical; margin-top:10px; }
.hp-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.hp-next{ margin-top:0; }
.hp-note{ font-size:13.5px; color:var(--hb-mute); line-height:1.55; margin-top:8px; }
.hp-wait{ color:var(--hb-mute); font-size:15px; }
.hp-text summary, .hp-trans summary, .hp-mist summary{ cursor:pointer; font-weight:700; font-size:14px; }
.hp-text{ background:#fff; border:1px solid var(--hb-line); border-radius:18px; padding:16px 20px; }
.hp-text-in p{ font-size:16px; line-height:1.75; margin-top:10px; }
.hp-audio-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.hp-trans{ margin-top:12px; }
.hp-trans p{ font-size:15px; line-height:1.6; margin-top:6px; }
.hp-timer{ text-align:center; font-family:var(--display-serif); font-size:28px; font-weight:600; }
.hp-timer.is-low{ color:var(--hb-ko); }
.hp-match{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:10px; margin-top:12px; }
.hp-col{ display:grid; gap:8px; align-content:start; }
.hp-mw, .hp-md{ min-height:48px; padding:10px 12px; border-radius:12px; border:1.5px solid var(--hb-line); background:#fff; color:var(--hb-navy); font:inherit; font-size:14.5px; text-align:left; cursor:pointer; line-height:1.35; }
.hp-mw{ font-weight:700; }
.hp-mw.is-sel{ border-color:var(--hb-navy); background:#EEF2F8; }
.hp-mw.is-ok, .hp-md.is-ok{ border-color:var(--hb-ok); background:var(--hb-ok-bg); cursor:default; }
.hp-md.is-ko{ border-color:var(--hb-ko); background:var(--hb-ko-bg); }
.hp-say-en{ font-family:var(--display-serif); font-size:22px; line-height:1.35; font-weight:600; }
.hp-say-fr{ color:var(--hb-mute); margin-top:4px; }
.hp-hints{ margin:10px 0 0 18px; font-size:14.5px; line-height:1.6; list-style:disc; }
.hp-rec{ display:flex; align-items:center; gap:12px; margin-top:14px; }
.hp-rec-t{ font-variant-numeric:tabular-nums; color:var(--hb-ko); font-weight:700; }
.hp-speak audio{ width:100%; margin-top:10px; }
.hp-sr{ margin-top:8px; }
.hp-sr-words{ font-size:16px; line-height:1.7; margin-top:4px; }
.hp-sr-words .is-heard{ color:var(--hb-ok); font-weight:700; }
.hp-sr-words .is-miss{ color:#9AA3B2; }
.hp-check{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px; }
.hp-check label{ display:flex; gap:10px; align-items:flex-start; font-size:15px; line-height:1.45; cursor:pointer; }
.hp-check input{ width:20px; height:20px; margin-top:1px; flex:0 0 auto; }
.hp-roles{ display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--hb-mute); }
.hp-roles b{ display:inline-flex; width:20px; height:20px; border-radius:50%; background:var(--hb-navy); color:#fff; align-items:center; justify-content:center; font-size:11px; margin-right:4px; }
.hp-chat{ display:flex; flex-direction:column; gap:8px; }
.hp-bub{ max-width:85%; padding:10px 14px; border-radius:16px; position:relative; font-size:15.5px; line-height:1.45; }
.hp-bub.is-them{ align-self:flex-start; background:#fff; border:1px solid var(--hb-line); border-bottom-left-radius:4px; }
.hp-bub.is-me{ align-self:flex-end; background:var(--hb-navy); color:#fff; border-bottom-right-radius:4px; }
.hp-bub-who{ display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.7; margin-bottom:2px; }
.hp-bub-play{ border:0; background:transparent; color:inherit; cursor:pointer; font-size:12px; margin-left:8px; opacity:.7; }
.hp-model{ margin-top:10px; padding:10px 12px; background:var(--hb-ivory); border-radius:10px; font-size:14.5px; }
.hp-end{ text-align:center; }
.hp-end-k{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--hb-gold); }
.hp-end-score{ margin-top:8px; font-family:var(--display-serif); font-size:24px; }
.hp-end-score b{ font-size:52px; font-weight:600; }
.hp-end-score small{ display:block; font-family:inherit; font-size:14px; color:var(--hb-mute); margin-top:4px; font-family:var(--sans, inherit); }
.hp-end-xp{ margin-top:12px; font-size:14.5px; line-height:1.6; }
.hp-end-xp a{ font-weight:700; color:var(--hb-navy); }
.hp-badges{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.hp-badges:empty{ display:none; }
.hp-mist{ text-align:left; margin-top:16px; background:var(--hb-ivory); border-radius:14px; padding:12px 16px; }
.hp-mist ul{ margin:8px 0 0; padding:0; list-style:none; display:grid; gap:10px; }
.hp-mist li{ font-size:14px; line-height:1.5; }
.hp-mist li span{ color:var(--hb-mute); }
.hp-ok{ margin-top:12px; color:var(--hb-ok); font-weight:700; }
.hp-end .hp-actions{ justify-content:center; }
.hp-resume p{ font-size:15.5px; }

@media (max-width:980px){
  .hb-quick{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hb-cats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hb-grid, .hb-path{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hb-daily{ grid-template-columns:1fr; }
  .hb-stats{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .hb-stats-note{ grid-column:1/-1; max-width:none; border-top:1px solid rgba(255,255,255,.1); }
}
@media (max-width:640px){
  .hb-wrap{ padding:0 16px; }
  .hb-hero{ padding:32px 0 18px; }
  .hb-quick{ gap:8px; }
  .hb-tile{ padding:12px 14px; }
  .hb-tile b{ font-size:15px; }
  .hb-cats, .hb-grid, .hb-path{ grid-template-columns:1fr; }
  .hb-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hb-stat:nth-child(2){ border-right:0; }
  .hb-stat{ border-bottom:1px solid rgba(255,255,255,.1); }
  .hb-card, .hp-card{ padding:16px; border-radius:16px; }
  .hp-match{ grid-template-columns:1fr; }
  .hp-match .hp-col:first-child{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hb-skill{ grid-template-columns:110px 1fr 32px; font-size:13px; }
  .hp-end-score b{ font-size:44px; }
  .hb-cta{ padding:22px 18px; }
  .hb-cta .hb-btn{ width:100%; }
}
@media (prefers-reduced-motion: reduce){ .hb-tile, .hb-cat, .hb-act, .hp-progress i{ transition:none; } .hb-tile:hover, .hb-cat:hover, .hb-act:hover{ transform:none; } }

/* ---------------- Practice Zone : navigation, états ---------------- */
.hb-hero--compact{ padding:34px 0 18px; }
.hb-hero--compact h1{ margin-top:8px; }
.hb-crumbs{ display:flex; gap:8px; align-items:center; font-size:13px; color:var(--hb-mute); }
.hb-crumbs a{ color:var(--hb-navy); font-weight:700; text-decoration:none; }
.hb-crumbs a:hover{ text-decoration:underline; }
.hb-tabs{ display:flex; gap:6px; margin-top:20px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.hb-tabs::-webkit-scrollbar{ display:none; }
.hb-tabs a{ flex:0 0 auto; display:inline-flex; align-items:center; min-height:42px; padding:8px 16px; border-radius:100px; border:1px solid var(--hb-line); background:#fff; color:var(--hb-navy); font-size:14px; font-weight:700; text-decoration:none; }
.hb-tabs a:hover{ border-color:var(--hb-navy); }
.hb-tabs a.is-active{ background:var(--hb-navy); border-color:var(--hb-navy); color:#fff; }
.hb-tabs a:focus-visible{ outline:2px solid var(--hb-gold); outline-offset:2px; }
.hb-loading{ display:flex; align-items:center; gap:12px; padding:28px; color:var(--hb-mute); font-size:15px; }
.hb-spin{ width:20px; height:20px; border-radius:50%; border:2.5px solid var(--hb-line); border-top-color:var(--hb-navy); animation:hb-spin .8s linear infinite; }
@keyframes hb-spin{ to{ transform:rotate(360deg); } }
.hb-resume-box{ margin-bottom:14px; padding:16px 18px; }
.hb-resume-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:10px; }
.hb-resume-list a{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:12px; background:var(--hb-ivory); border:1px solid var(--hb-line); color:var(--hb-navy); text-decoration:none; }
.hb-resume-list a:hover{ border-color:var(--hb-navy); }
.hb-resume-list b{ font-size:14.5px; }
.hb-resume-list span{ font-size:12.5px; color:var(--hb-mute); }
.hb-review-note{ margin:0 0 14px; padding:12px 14px; border-radius:12px; background:#FFF7EA; border:1px solid #F0DDBE; font-size:14.5px; }
.hb-chip-link{ text-decoration:none; color:var(--hb-gold) !important; border-style:dashed; }
.hb-back{ margin-bottom:10px; }
.hb-cards-mini{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.hb-lib-old[hidden]{ display:none !important; }
@media (max-width:980px){ .hb-resume-list, .hb-cards-mini{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .hb-spin{ animation-duration:2.4s; } }
/* Pendant une activité : en-tête réduit pour aller droit à l'exercice */
.hb-playing .hb-hero .lead, .hb-playing .hb-hero [data-hb-strip]{ display:none; }
.hb-playing .hb-hero--compact{ padding-bottom:6px; }
@media (max-width:640px){
  .hb-stats{ grid-template-columns:repeat(4,minmax(0,1fr)); border-radius:14px; }
  .hb-stat{ padding:10px 8px; border-bottom:0; }
  .hb-stat:nth-child(2){ border-right:1px solid rgba(255,255,255,.1); }
  .hb-stat:nth-child(4){ border-right:0; }
  .hb-stat b{ font-size:20px; }
  .hb-stat span{ font-size:11px; line-height:1.3; display:block; }
  .hb-stats-note{ font-size:12px; padding:10px 12px; }
  .hb-playing .hb-hero--compact h1{ font-size:24px; }
  .hb-playing .hb-tabs{ margin-top:10px; }
}