/* ============================================================================
   PAGE SCORE — MVP (4 états). D'après les mockups zeepy-score-*.html, repeints
   à la charte Zeepy céleste (var(--primary) #4997D0 + --accent-cool #7DD3FC).
   Aucune couleur violette, aucun hex cyan improvisé : tout en tokens.
   ============================================================================ */

/* Modifs 11 §1 : Score = PLEINE LARGEUR, exactement le même conteneur que la page
   « Rapport hebdo » (weekly-report = .app-content nu -> max-width: var(--container-app)).
   On retire tout cap (640 puis 960 de Modifs 10) : la largeur est héritée de
   .app-content, donc identique à Hebdo à toutes les tailles. Les états « vides »
   (démarrage/construction) restent centrés via .sc-center. */
.sc-page { margin: 0 auto; }
.sc-state[hidden], .sc-boot[hidden] { display: none !important; }
/* Modifs 10 : sans ça, la classe .sc-connect{display:flex} l'emportait sur le
   [hidden] natif -> la card "Connecter" restait affichée même réseau connecté. */
.sc-connect[hidden], .sc-plan[hidden] { display: none !important; }

/* Boot spinner (avant résolution de l'état) */
.sc-boot { min-height: 50vh; display: flex; align-items: center; justify-content: center; }
.sc-spinner, .sc-spin-ic { border-radius: 50%; border: 2px solid rgba(73,151,208,.25); border-top-color: var(--accent-cool); animation: sc-spin .8s linear infinite; }
.sc-spinner { width: 34px; height: 34px; border-width: 3px; }
.sc-spin-ic { width: 15px; height: 15px; }
@keyframes sc-spin { to { transform: rotate(360deg); } }

/* États "plein écran" (attente / démarrage) : centrés verticalement */
.sc-center { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 8px 24px; }

/* ---------- Orbite astronaute ---------- */
.sc-orbit { position: relative; display: flex; align-items: center; justify-content: center; }
.sc-orbit-lg { width: 220px; height: 220px; margin-bottom: 8px; }
.sc-orbit-sm { width: 116px; height: 116px; margin-bottom: 4px; }
.sc-ring { position: absolute; inset: 0; border-radius: 50%; }
.sc-r1 { border: 1.5px dashed rgba(73,151,208,.35); animation: sc-orbspin 18s linear infinite; }
.sc-r2 { inset: 28px; border: 1px solid rgba(73,151,208,.16); animation: sc-orbspin-r 26s linear infinite; }
.sc-glowarc { position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--accent-cool); border-right-color: rgba(73,151,208,.5); filter: drop-shadow(0 0 8px rgba(73,151,208,.6)); animation: sc-orbspin 3.6s linear infinite; }
.sc-sat { position: absolute; inset: 0; animation: sc-orbspin 9s linear infinite; }
.sc-sat b { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #7dffc0, var(--success, #17c46a)); box-shadow: 0 0 12px 2px rgba(23,196,106,.7); }
.sc-core { width: 118px; height: 118px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #1c3050, #0c1526); border: 1px solid #2c4a70; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 40px rgba(73,151,208,.35), inset 0 0 30px rgba(73,151,208,.12); animation: sc-float 4s ease-in-out infinite; }
.sc-core-sm { width: 76px; height: 76px; }
.sc-astro { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); animation: sc-pulse 3s ease-in-out infinite; }
.sc-astro-sm { width: 50px; height: 50px; object-fit: contain; }
@keyframes sc-orbspin { to { transform: rotate(360deg); } }
@keyframes sc-orbspin-r { to { transform: rotate(-360deg); } }
@keyframes sc-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes sc-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* ---------- Badges / titres / CTA (états d'attente et construction) ---------- */
.sc-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--primary-soft, rgba(73,151,208,.1)); border: 1px solid rgba(73,151,208,.3); color: var(--accent-cool); font-weight: 700; font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase; padding: 7px 14px; border-radius: 20px; }
.sc-badge-gold { background: rgba(245,194,75,.12); border-color: rgba(245,194,75,.35); color: var(--gold, #f4c64a); }
.sc-h1 { font-size: 28px; font-weight: 800; margin: 15px 0 10px; letter-spacing: -.4px; color: var(--text-primary); }
.sc-lead { color: var(--text-secondary); font-size: 15.5px; line-height: 1.5; max-width: 340px; }
.sc-lead b { color: var(--text-primary); }
.sc-cta { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; max-width: 360px; margin-top: 20px; text-decoration: none; background: linear-gradient(180deg, #8fd4f5, var(--primary)); color: #052435; font-weight: 800; font-size: 16px; border: none; border-radius: 15px; padding: 16px; box-shadow: 0 8px 22px rgba(73,151,208,.32); }
.sc-note { color: var(--text-muted); font-size: 13px; margin-top: 14px; }

/* Steps (attente) */
.sc-steps { width: 100%; max-width: 360px; margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.sc-step { display: flex; align-items: center; gap: 13px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 15px; padding: 14px 16px; text-align: left; }
.sc-step-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; }
.sc-step.done .sc-step-ic { background: rgba(23,196,106,.15); color: var(--success); }
.sc-step.now .sc-step-ic { background: rgba(73,151,208,.15); color: var(--accent-cool); }
.sc-step.wait .sc-step-ic { background: rgba(255,255,255,.05); color: var(--text-muted); }
.sc-step-tx { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.sc-step.wait .sc-step-tx { color: var(--text-muted); }
.sc-step-sub { display: block; font-size: 12.5px; color: var(--text-muted); font-weight: 500; margin-top: 1px; }

/* Compteur + barre */
.sc-counter { width: 100%; max-width: 360px; margin-top: 16px; background: linear-gradient(180deg, rgba(73,151,208,.08), var(--bg-card)); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 15px 18px; }
.sc-construction .sc-counter, .sc-complet .sc-counter { max-width: none; }
.sc-counter-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--text-secondary); font-weight: 600; }
.sc-counter-row b { color: var(--accent-cool); font-size: 20px; font-weight: 800; }
.sc-cbar { height: 9px; border-radius: 6px; background: rgba(3,7,18,.5); border: 1px solid var(--border-subtle); overflow: hidden; margin-top: 11px; }
.sc-cbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), #8fd4f5); box-shadow: 0 0 10px rgba(73,151,208,.5); transition: width .5s ease; }

/* Roadmap (démarrage) */
.sc-road { width: 100%; max-width: 360px; margin-top: 24px; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.sc-rw { display: flex; align-items: center; gap: 13px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 15px; padding: 15px 16px; }
.sc-rw-ic { width: 32px; height: 32px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.sc-rw.next .sc-rw-ic { background: rgba(73,151,208,.15); }
.sc-rw.lock .sc-rw-ic { background: rgba(255,255,255,.05); }
.sc-rw-t { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.sc-rw-t b { color: var(--accent-cool); }
.sc-rw.lock .sc-rw-t { color: var(--text-secondary); }
.sc-rw-s { font-size: 12.5px; color: var(--text-muted); font-weight: 500; margin-top: 2px; }

/* Construction */
.sc-build-top { padding-bottom: 4px; }
.sc-seclead { color: var(--text-secondary); font-size: 14px; margin: 22px 2px 12px; font-weight: 600; }
.sc-bpost { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 18px; padding: 15px; margin-bottom: 12px; }
.sc-bprow { display: flex; gap: 13px; }
.sc-bthumb { width: 64px; height: 86px; border-radius: 11px; flex: none; position: relative; overflow: hidden; background: linear-gradient(150deg, #2a5c8a, #1a2f4d); border: 1px solid #2a3a55; background-size: cover; background-position: center; }
.sc-bmeta { flex: 1; min-width: 0; }
.sc-btop { display: flex; align-items: center; gap: 8px; }
.sc-ok { font-size: 11px; font-weight: 800; color: var(--success); background: rgba(23,196,106,.12); border: 1px solid rgba(23,196,106,.3); padding: 2px 8px; border-radius: 8px; }
.sc-bcat { font-size: 11px; letter-spacing: 1.2px; color: var(--accent-cool); font-weight: 800; font-family: var(--font-mono, monospace); }
.sc-btitle { font-size: 15px; font-weight: 800; line-height: 1.25; margin: 5px 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-primary); }
.sc-bstats { display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: 13px; color: var(--text-secondary); font-family: var(--font-mono, monospace); }
.sc-bstats b { color: var(--text-primary); font-weight: 800; }
.sc-why { display: flex; gap: 8px; align-items: flex-start; background: rgba(73,151,208,.06); border: 1px solid rgba(73,151,208,.16); border-radius: 11px; padding: 10px 12px; margin-top: 11px; font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.sc-why b { color: var(--accent-cool); }
.sc-analyse { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; text-decoration: none;
  background: linear-gradient(135deg, #4997D0, #7DD3FC); color: #062333; font-weight: 800; font-size: 13.5px; border-radius: 12px; padding: 11px;
  box-shadow: 0 6px 16px rgba(73,151,208,.26); }
.sc-analyse b { background: rgba(6,35,51,.16); padding: 2px 8px; border-radius: 20px; font-size: 12px; }
.sc-analyse:active { transform: scale(.99); }
.sc-locked { background: var(--bg-card); border: 1px dashed #2a3a55; border-radius: 18px; padding: 20px 16px; text-align: center; margin-top: 4px; }
.sc-lk { font-size: 26px; }
.sc-lk-t { font-size: 16px; font-weight: 800; margin: 8px 0 4px; color: var(--text-primary); }
.sc-lk-s { font-size: 13.5px; color: var(--text-secondary); line-height: 1.45; }
.sc-lk-s b { color: var(--text-primary); }

/* ============ ÉTAT COMPLET ============ */
.sc-head { margin: 4px 2px 6px; }
.sc-eyebrow { font-family: var(--font-mono, monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.sc-title { font-size: 28px; font-weight: 800; letter-spacing: -.5px; margin: 6px 0 0; color: var(--text-primary); }
.sc-sub { color: var(--text-secondary); font-size: 14px; margin-top: 6px; }
.sc-sub b { color: var(--text-primary); }

.sc-nets { display: flex; gap: 10px; margin: 16px 0 6px; }
.sc-net { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 6px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border-subtle); font-weight: 700; font-size: 15px; color: var(--text-secondary); text-decoration: none; cursor: pointer; }
.sc-net.active { border: 1.5px solid var(--primary); background: var(--primary-soft, rgba(73,151,208,.07)); color: var(--text-primary); box-shadow: 0 0 18px rgba(73,151,208,.12); }
.sc-net svg { width: 20px; height: 20px; flex: none; }

.sc-ovrow { display: flex; align-items: center; justify-content: space-between; margin: 22px 2px 12px; }
.sc-ovrow h2 { font-size: 22px; font-weight: 800; color: var(--text-primary); }
.sc-weeklab { background: var(--primary-soft, rgba(73,151,208,.1)); border: 1px solid rgba(73,151,208,.3); color: var(--accent-cool); font-weight: 700; font-size: 13.5px; padding: 9px 15px; border-radius: 12px; white-space: nowrap; }

/* Toggle segmenté « Contenu classique / Reels d'essai » (Instagram uniquement) */
.sc-trialtoggle { display: flex; gap: 4px; padding: 4px; margin: 0 2px 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 14px; }
/* display:flex écrase l'attribut [hidden] -> sur TikTok/YouTube le toggle restait
   visible. On force la disparition quand hidden (jamais de reels d'essai hors IG). */
.sc-trialtoggle[hidden] { display: none !important; }

/* Badge de niveau premium (pill Zeepy : dot lumineux + dégradé du niveau), au
   lieu du bloc plein plat (« En progression » jaune qui faisait cheap). */
#sc-level.audit-level-badge {
  display: inline-flex; flex-direction: column; align-items: stretch; gap: 8px;
  min-width: 200px; max-width: 280px; padding: 11px 14px 12px; border-radius: 15px;
  background: rgba(9,15,26,.6);
  border: 1px solid color-mix(in srgb, var(--lvl, #7DD3FC) 34%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 20px rgba(0,0,0,.32), 0 0 20px color-mix(in srgb, var(--lvl, #7DD3FC) 15%, transparent);
}
#sc-level[hidden] { display: none; }
.zlvl-head { display: flex; align-items: center; gap: 8px; }
.zlvl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--lvl, #7DD3FC); box-shadow: 0 0 9px var(--lvl, #7DD3FC); }
.zlvl-name { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--lvl, #7DD3FC) 28%, #fff); }
.zlvl-val { margin-left: auto; font-size: 13px; font-weight: 900; color: color-mix(in srgb, var(--lvl, #7DD3FC) 22%, #fff); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.zlvl-val i { font-style: normal; opacity: .55; font-size: 10px; font-weight: 700; }
.zlvl-gauge { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.45); }
.zlvl-gauge i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--lvl, #7DD3FC) 55%, #4997D0), var(--lvl, #7DD3FC));
  box-shadow: 0 0 10px color-mix(in srgb, var(--lvl, #7DD3FC) 75%, transparent);
  transition: width .6s cubic-bezier(.2,.7,.2,1); }
.sc-tt-opt { flex: 1; padding: 11px 8px; border: none; background: none; border-radius: 10px; font-family: inherit; font-weight: 700; font-size: 14px; color: var(--text-secondary); cursor: pointer; transition: background .16s, color .16s; }
.sc-tt-opt:hover { color: var(--text-primary); }
.sc-tt-opt.active { background: var(--primary-soft, rgba(73,151,208,.12)); color: var(--text-primary); box-shadow: inset 0 0 0 1.5px var(--primary); }

.sc-card { background: linear-gradient(180deg, rgba(73,151,208,.08), var(--bg-card)); border: 1px solid var(--border-default); border-radius: 24px; padding: 24px 20px 22px; position: relative; overflow: hidden; }
.sc-gauge { width: 240px; max-width: 100%; margin: 0 auto; }
.sc-gauge svg { display: block; width: 100%; height: auto; }
.sc-gdelta { display: flex; justify-content: center; margin: 2px 0 6px; }
.sc-gdelta span { font-size: 13px; font-weight: 800; color: #2bd587; background: rgba(23,196,106,.13); border: 1px solid rgba(23,196,106,.32); border-radius: 20px; padding: 5px 14px; }
.sc-gdelta span.down { color: var(--error); background: rgba(255,91,96,.12); border-color: rgba(255,91,96,.3); }
.sc-noteblock { text-align: center; margin-top: 6px; }
.sc-note-logo { width: 40px; height: 40px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; }
.sc-note-logo svg { width: 38px; height: 38px; }
.sc-note-title { font-size: 24px; font-weight: 800; letter-spacing: 2px; color: var(--accent-cool); text-transform: uppercase; }
.sc-note-zqs { font-size: 11px; letter-spacing: 2px; color: var(--text-secondary); font-weight: 700; margin-top: 4px; }
/* Badge de niveau (« En progression »…) : Modifs 11 -> design charte (pill crisp,
   contour de la couleur du palier). La couleur reste pilotée en inline (lvl.bg/fg). */
.sc-lvl { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; padding: 7px 15px; border-radius: 10px; margin: 14px 0 4px; letter-spacing: .2px; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent); }
.sc-pot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; background: rgba(73,151,208,.06); border: 1px solid rgba(73,151,208,.22); border-radius: 16px; padding: 12px; font-size: 15.5px; }
.sc-pot-now { color: var(--text-secondary); } .sc-pot b { color: var(--accent-cool); font-weight: 800; } .sc-pot-arrow { color: var(--primary); }

/* Progression (3 signaux) — Modifs 11 : cartes façon charte (KPI cards) :
   label mono en haut, gros nombre mono, flèche de tendance colorée. */
.sc-prog { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 18px; padding: 16px 18px; margin-top: 14px; }
.sc-prog-h { font-size: 12px; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 12px; }
#sc-signals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sc-sig { background: var(--bg-elevated, rgba(255,255,255,.03)); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 12px 13px; }
.sc-sig-l { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.sc-sig-ic { font-size: 12px; }
.sc-sig-row { display: flex; align-items: baseline; gap: 5px; margin: 8px 0 3px; }
.sc-sig-v { font-family: var(--font-mono, monospace); font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--text-primary); line-height: 1; }
.sc-sig-arw { font-size: 12px; font-weight: 800; }
.sc-sig.up .sc-sig-arw { color: #2bd587; }
.sc-sig.down .sc-sig-arw { color: var(--error); }
.sc-sig.na .sc-sig-v { color: var(--text-muted); }
.sc-sig-sub { font-size: 10.5px; color: var(--text-muted); }
@media (max-width: 400px) { #sc-signals { grid-template-columns: 1fr 1fr; } }

/* Détail du score (dropdown cyan) — barres réutilisées façon analytics */
.sc-detail { background: var(--bg-card); border: 1px solid rgba(73,151,208,.28); border-radius: 16px; margin-top: 14px; overflow: hidden; }
.sc-detail > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; font-size: 16px; font-weight: 800; color: var(--accent-cool); }
.sc-detail > summary::-webkit-details-marker { display: none; }
.sc-detail > summary svg { color: var(--primary); transition: transform .2s ease; }
.sc-detail[open] > summary svg { transform: rotate(180deg); }
.sc-axes { display: flex; flex-direction: column; gap: 12px; padding: 4px 18px 18px; }
.sc-axbar-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.sc-axbar-top .l { font-size: 13px; color: var(--text-secondary); }
.sc-axbar-top .v { font-family: var(--font-mono, monospace); font-size: 14px; font-weight: 800; color: var(--text-primary); }
.sc-axbar-track { height: 7px; border-radius: 5px; background: rgba(255,255,255,.06); overflow: hidden; }
.sc-axbar-track i { display: block; height: 100%; border-radius: 5px; background: var(--primary); }
.sc-axbar-track i.good { background: var(--success); } .sc-axbar-track i.mid { background: var(--gold, #f4c64a); } .sc-axbar-track i.low { background: var(--error); }

/* Guide de parcours */
.sc-guide { background: linear-gradient(180deg, rgba(73,151,208,.06), var(--bg-card)); border: 1px solid var(--border-subtle); border-radius: 18px; padding: 16px 18px; margin-top: 12px; }
.sc-guide-t { font-size: 14px; font-weight: 800; color: var(--accent-cool); margin-bottom: 11px; }
.sc-gstep { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--text-secondary); line-height: 1.4; margin-top: 9px; }
.sc-gstep b { color: var(--text-primary); }
.sc-gn { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(73,151,208,.14); border: 1px solid rgba(73,151,208,.35); color: var(--accent-cool); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px; }

/* 6 KPIs */
.sc-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.sc-kpi { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 18px; padding: 16px; }
.sc-kpi-top { display: flex; align-items: center; justify-content: space-between; }
.sc-kpi-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; background: rgba(73,151,208,.12); }
.sc-kpi-num { font-size: 27px; font-weight: 800; margin-top: 14px; letter-spacing: -.5px; color: var(--text-primary); }
.sc-kpi-cap { color: var(--text-secondary); font-size: 14px; margin-top: 2px; }

/* 3 tops par vues */
.sc-sechead { margin: 26px 2px 4px; }
.sc-sechead h3 { font-size: 21px; font-weight: 800; color: var(--text-primary); }
.sc-post { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 20px; padding: 16px; margin-bottom: 14px; position: relative; }
.sc-post.p1 { border-color: rgba(245,194,75,.45); box-shadow: 0 0 22px rgba(245,194,75,.07); }
.sc-rank { position: absolute; top: -11px; left: 16px; width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; }
.sc-rank.r1 { background: linear-gradient(160deg, #ffd85b, #f4a72a); color: #04150c; }
.sc-rank.r2 { background: linear-gradient(160deg, #d6def0, #9fb0cc); color: #141d30; }
.sc-rank.r3 { background: linear-gradient(160deg, #e0a06a, #bd7a44); color: #1a1108; }
.sc-pscore { position: absolute; top: 14px; right: 14px; min-width: 50px; text-align: center; border-radius: 12px; padding: 6px 9px 5px; line-height: 1; }
.sc-pscore .n { font-size: 21px; font-weight: 800; }
.sc-pscore .m { font-size: 9.5px; font-weight: 700; opacity: .65; letter-spacing: .5px; margin-top: 2px; }
.sc-pscore.hi { background: rgba(23,196,106,.13); border: 1px solid rgba(23,196,106,.3); } .sc-pscore.hi .n { color: #2bd587; }
.sc-pscore.mid { background: rgba(245,194,75,.13); border: 1px solid rgba(245,194,75,.3); } .sc-pscore.mid .n { color: var(--gold, #f4c64a); }
/* Modifs 9 §4 : jamais de rouge sur un score de publication -> gris sous 40. */
.sc-pscore.lo { background: rgba(138,149,168,.12); border: 1px solid rgba(138,149,168,.3); } .sc-pscore.lo .n { color: #9aa6b8; }
.sc-prow { display: flex; gap: 14px; }
.sc-thumb { width: 78px; height: 104px; border-radius: 12px; flex: none; position: relative; overflow: hidden; background: linear-gradient(150deg, #2a5c8a, #1a2f4d); border: 1px solid #2a3a55; background-size: cover; background-position: center; }
.sc-pmeta { flex: 1; min-width: 0; }
.sc-pcat { font-size: 12px; letter-spacing: 1.5px; color: var(--accent-cool); font-weight: 800; font-family: var(--font-mono, monospace); }
.sc-ptitle { font-size: 16px; font-weight: 800; line-height: 1.28; margin: 6px 0 10px; padding-right: 52px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-primary); }
.sc-pstats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--text-secondary); font-family: var(--font-mono, monospace); }
.sc-pstats b { color: var(--text-primary); font-weight: 800; }

/* Plan viral */
.sc-plan { background: linear-gradient(180deg, rgba(73,151,208,.14), var(--bg-card)); border: 1px solid rgba(73,151,208,.3); border-radius: 22px; padding: 22px 20px; margin: 16px 0; }
.sc-plan h3 { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.sc-objb { background: rgba(73,151,208,.1); border: 1px solid rgba(73,151,208,.25); border-radius: 14px; padding: 15px; margin: 15px 0; text-align: center; }
.sc-obj-avg { font-size: 14.5px; color: var(--text-secondary); } .sc-obj-avg b { color: var(--text-primary); }
.sc-obj-big { font-size: 18px; font-weight: 800; margin-top: 5px; color: var(--text-primary); } .sc-obj-big b { color: var(--accent-cool); }
.sc-obj-cap { font-size: 11.5px; color: var(--text-muted); margin-top: 8px; }
.sc-plan p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.45; } .sc-plan p b { color: var(--text-primary); }
.sc-unlock { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 16px; text-decoration: none; background: linear-gradient(180deg, #8fd4f5, var(--primary)); color: #052435; font-weight: 800; font-size: 16px; border-radius: 15px; padding: 15px; box-shadow: 0 8px 20px rgba(73,151,208,.32); }

.sc-more { margin-top: 2px; }
.sc-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 15px; color: var(--text-secondary); font-weight: 700; font-size: 15px; }
.sc-more > summary::-webkit-details-marker { display: none; }

@media (min-width: 720px) {
  .sc-page { padding-top: 8px; }
}

/* Réseau non connecté — encadré Connecter (Modifs 7 §9), jamais de "0" */
.sc-connect{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:34px 22px;margin:10px 0 4px;border-radius:18px;background:linear-gradient(180deg,var(--primary-soft,rgba(73,151,208,.08)),rgba(73,151,208,.02));border:1px dashed var(--border-strong,rgba(73,151,208,.38));}
.sc-connect-logo{width:52px;height:52px;display:flex;align-items:center;justify-content:center;}
.sc-connect-logo svg{width:100%;height:100%;}
.sc-connect-t{font-size:16px;font-weight:600;color:var(--text-secondary,#B0BBC9);max-width:290px;line-height:1.45;}
.sc-connect-t b{color:var(--text-primary,#F5F7FA);}
.sc-connect-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:999px;background:linear-gradient(135deg,var(--primary,#4997D0),var(--accent-cool,#7DD3FC));color:#04121f;font-weight:800;font-size:15px;text-decoration:none;box-shadow:0 8px 20px rgba(73,151,208,.35);-webkit-tap-highlight-color:transparent;}
.sc-connect-btn:active{transform:scale(.98);}

/* Tops en attente — card floutée (Modifs 8 §4), jamais un vide ni un "0" */
.sc-post-blur{position:relative;display:flex;align-items:stretch;min-height:96px;background:linear-gradient(180deg,rgba(73,151,208,.05),rgba(73,151,208,.015));border:1px dashed var(--border-strong,rgba(73,151,208,.30));}
.sc-post-blur .sc-rank{opacity:.5;}
.sc-blur-in{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;padding:22px 16px;}
.sc-blur-ic{font-size:26px;opacity:.75;}
.sc-blur-t{font-weight:700;font-size:14px;color:var(--text-secondary,#B0BBC9);}
.sc-blur-s{font-size:12.5px;color:var(--text-muted,#828EA3);}

/* Modifs 9 §4 : onglet réseau non connecté = grisé (cliquable -> encadré Connecter) */
.sc-net-off{opacity:.42;filter:grayscale(.7);}
.sc-net-off.active{opacity:.6;}

/* Modifs 11 : Note Zee « dispo dans 24h » sur un top trop récent (< 24h) */
.sc-pscore.pending { background: rgba(255,255,255,.05); border: 1px solid var(--border-subtle); }
.sc-pscore.pending .n { font-size: 15px; color: var(--text-muted); }
.sc-pscore.pending .m { color: var(--text-muted); opacity: .8; }

/* Potentiel 30j : badge avec mini-jauge (score actuel -> potentiel visé) — hero Score */
.sc-potbadge { margin-top: 13px; max-width: 440px; background: linear-gradient(180deg, rgba(73,151,208,.08), rgba(73,151,208,.03)); border: 1px solid rgba(73,151,208,.24); border-radius: 13px; padding: 11px 14px 13px; }
.sc-potbadge[hidden] { display: none !important; }
.sc-potbadge-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.sc-potbadge-l { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.sc-potbadge-v { font-family: var(--font-mono, monospace); font-size: 16px; font-weight: 800; color: var(--accent-cool); white-space: nowrap; }
.sc-potbadge-v i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.sc-potbadge-bar { position: relative; height: 8px; border-radius: 999px; background: rgba(3,7,18,.55); box-shadow: inset 0 0 0 1px var(--border-subtle); }
/* Zone « potentiel » (0 -> cible) : dégradé lisse translucide, coins arrondis. */
.sc-potbadge-gain { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(73,151,208,.30), rgba(125,211,252,.42)); transition: width .85s cubic-bezier(.22,1,.36,1); }
/* Score actuel (0 -> now) : dégradé plein par-dessus, avec halo. */
.sc-potbadge-now { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--primary), #7DD3FC); box-shadow: 0 0 10px rgba(125,211,252,.45); z-index: 1; transition: width .85s cubic-bezier(.22,1,.36,1); }
/* Repère de la cible (potentiel) : pastille nette + anneau. */
.sc-potbadge-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #eaf6ff; box-shadow: 0 0 0 2px rgba(73,151,208,.9), 0 0 9px 2px rgba(125,211,252,.55); transform: translate(-50%,-50%); z-index: 2; transition: left .85s cubic-bezier(.22,1,.36,1); }

/* Plan viral mis en pause -> carte « Bientôt disponible » (dimmée, non cliquable) */
.sc-plan-soon { background: linear-gradient(180deg, rgba(255,255,255,.035), var(--bg-card)); border-color: var(--border-subtle); }
.sc-plan-soon h3 { opacity: .9; }
.sc-soon { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--border-subtle); border-radius: 16px; }
.sc-soon-ic { font-size: 26px; flex: none; opacity: .9; }
.sc-soon-t { font-size: 15.5px; font-weight: 800; color: var(--text-primary); display: inline-flex; align-items: center; gap: 8px; }
.sc-soon-badge { font-size: 10px; font-weight: 800; letter-spacing: .5px; padding: 2px 8px; border-radius: 20px; background: rgba(73,151,208,.18); color: #7DD3FC; }
.sc-soon-t::after { content: 'Bientôt'; font-family: var(--font-mono, monospace); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-cool); background: var(--primary-soft, rgba(73,151,208,.12)); border: 1px solid rgba(73,151,208,.3); padding: 3px 8px; border-radius: 999px; }
.sc-soon-s { font-size: 13px; color: var(--text-muted); line-height: 1.45; margin-top: 3px; }

/* ============ ÉTAT GRATUIT (freemium) — page Score floutée/teasée ============ */
.sc-free-tabs { display: flex; gap: 9px; margin: 14px 0 6px; }
.sc-free-tab { flex: 1; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 11px 6px; display: flex; align-items: center; justify-content: center; gap: 7px; font-weight: 800; font-size: 13px; color: var(--text-secondary); }
.sc-free-tab.on { border-color: rgba(73,151,208,.5); background: var(--primary-soft, rgba(73,151,208,.06)); color: var(--text-primary); }
.sc-free-plog { width: 19px; height: 19px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
.sc-free-plog.ig { background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7); }
.sc-free-plog.tk { background: #111; }
.sc-free-plog.yt { background: #ff0000; position: relative; width: 22px; }
.sc-free-plog.yt::after { content: ""; position: absolute; top: 5px; left: 8px; border-left: 6px solid #fff; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }

/* Bloc teasé : contenu flouté + petit 🔒 en coin (le flou vend mieux que le vide) */
.sc-free-tease { position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 14px; }
.sc-free-tease .sc-free-data { filter: blur(7px) saturate(.9); opacity: .5; pointer-events: none; user-select: none; }
.sc-free-mini { position: absolute; top: 12px; right: 12px; z-index: 2; background: rgba(11,18,34,.8); border: 1px solid rgba(245,194,75,.4); color: var(--gold, #f4c64a); font-weight: 800; font-size: 11px; padding: 4px 9px; border-radius: 20px; backdrop-filter: blur(2px); }

.sc-free-gaugecard { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 22px; padding: 26px 18px; display: flex; flex-direction: column; align-items: center; }
.sc-free-gauge { width: 190px; height: 116px; position: relative; overflow: hidden; margin-bottom: 6px; }
.sc-free-arc { width: 190px; height: 190px; border-radius: 50%; border: 14px solid #16233c; border-top-color: var(--primary); border-right-color: var(--accent-cool); transform: rotate(-135deg); position: absolute; top: 0; left: 0; }
.sc-free-glabel { position: absolute; top: 22px; left: 0; right: 0; text-align: center; font-size: 11px; letter-spacing: 2px; color: var(--text-muted); font-weight: 800; }
.sc-free-gval { position: absolute; top: 44px; left: 0; right: 0; text-align: center; font-size: 52px; font-weight: 800; color: var(--text-primary); }
.sc-free-gmax { font-size: 11px; letter-spacing: 2px; color: var(--text-muted); font-weight: 800; }

.sc-free-prog { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 18px; padding: 16px; }
.sc-free-progh { font-size: 12px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 10px; }
.sc-free-pr { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 15px; font-weight: 700; color: var(--text-secondary); }
.sc-free-pr:last-child { border-bottom: none; }
.sc-free-pr .v { color: #2bd587; font-weight: 800; }

.sc-free-post { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 18px; padding: 14px; display: flex; gap: 12px; }
.sc-free-th { width: 74px; height: 96px; border-radius: 12px; background: linear-gradient(150deg, #2a5c8a, #1a2f4d); flex: none; }
.sc-free-pl { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.sc-free-pl span { height: 12px; border-radius: 6px; background: #26344c; }
.sc-free-pl span:nth-child(1) { width: 45%; } .sc-free-pl span:nth-child(2) { width: 85%; } .sc-free-pl span:nth-child(3) { width: 60%; }

/* CTA paywall (score en haut + plan au milieu) */
.sc-free-cta { display: block; text-decoration: none; background: linear-gradient(160deg, #15304a, #0e1a2b); border: 1px solid rgba(73,151,208,.35); border-radius: 20px; padding: 20px 18px; text-align: center; margin: 16px 0; box-shadow: 0 0 28px rgba(73,151,208,.08); position: relative; overflow: hidden; }
.sc-free-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 0%, rgba(73,151,208,.14), transparent 70%); }
.sc-free-cta.killer { border-color: rgba(245,194,75,.45); box-shadow: 0 0 30px rgba(245,194,75,.1); }
.sc-free-cta-ic { font-size: 30px; position: relative; }
.sc-free-cta-h { font-size: 18px; font-weight: 800; margin: 6px 0 4px; position: relative; color: var(--text-primary); }
.sc-free-cta-p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; position: relative; margin-bottom: 14px; } .sc-free-cta-p b { color: var(--text-primary); }
.sc-free-cta-btn { display: block; background: linear-gradient(180deg, #8fd4f5, var(--primary)); color: #062333; font-weight: 800; font-size: 15.5px; border-radius: 24px; padding: 15px; box-shadow: 0 8px 22px rgba(73,151,208,.35); position: relative; }
.sc-free-cta-sub { font-size: 12px; color: var(--text-muted); margin-top: 10px; position: relative; } .sc-free-cta-sub b { color: var(--accent-cool); }

/* ===== Navigateur de période « ‹ 7 derniers jours › » ================ */
.sc-period { display: inline-flex; align-items: center; gap: 2px; background: var(--primary-soft, rgba(73,151,208,.1));
  border: 1px solid rgba(73,151,208,.3); border-radius: 12px; padding: 3px; }
.sc-period-arr { width: 30px; height: 30px; flex: none; border: none; background: transparent; color: var(--accent-cool);
  font-size: 20px; line-height: 1; font-weight: 800; border-radius: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.sc-period-arr:hover:not(:disabled) { background: rgba(73,151,208,.18); }
.sc-period-arr:active:not(:disabled) { transform: scale(.9); }
.sc-period-arr:disabled { opacity: .28; cursor: default; }
.sc-period-lab { font-weight: 700; font-size: 13px; color: var(--accent-cool); padding: 0 8px; white-space: nowrap; min-width: 96px; text-align: center; }
/* Badge « Semaine du X » dans la description du hero quand on consulte le passé */
.sc-per-badge { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--accent-cool);
  background: rgba(73,151,208,.14); border: 1px solid rgba(73,151,208,.3); padding: 3px 10px; border-radius: 20px; }

/* Vidéo déjà décortiquée : on ouvre sa fiche, on ne revend rien. Traitement
   sobre (contour) plutôt que le gros bouton d'achat, pour que l'oeil aille
   d'abord vers les vidéos qui restent à analyser. */
.sc-analyse.done {
  background: rgba(73, 151, 208, 0.10);
  border: 1px solid var(--border-default, rgba(125, 211, 252, 0.28));
  color: var(--accent-cool, #7DD3FC);
  box-shadow: none;
}
.sc-analyse.done:hover { background: rgba(125, 211, 252, 0.16); border-color: var(--accent-cool, #7DD3FC); }