/* ============================================================================
   seojobsearch.com : habillage "Impeccable" sombre, accent cyan
   ----------------------------------------------------------------------------
   Feuille d'override UNIQUE, chargée APRES le <style> inline de chaque page.
   Elle ne remplace rien : elle redefinit les variables CSS de chaque archetype
   (contenu, quiz/calc, interview) puis neutralise les couleurs codees en dur.
   Source de verite du design : editer ce seul fichier.
   Accent du site dans le portefeuille : cyan #38bdf8 (anti-empreinte PBN).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans:wght@200;300;400;500&family=Albert+Sans:wght@400;500;600;700&display=swap');

:root{
  /* --- palette sombre commune --- */
  --ink-base:#09090c;      /* fond de page */
  --ink-surface:#101017;   /* sections alternees */
  --ink-card:#15151c;      /* cartes / panneaux */
  --ink-raise:#1a1a22;     /* survol / champ */
  --ink-border:#26262f;
  --ink-text:#e8e7ec;      /* titres */
  --ink-body:#c9c9d2;      /* corps de texte long */
  --ink-muted:#9a9aa6;
  --ink-faint:#6f6f7a;
  --cy:#38bdf8;            /* accent unique */
  --cy-soft:#7dd3fc;       /* survol sur fond sombre */
  --cy-2:#0ea5e9;          /* partenaire de degrade */
  --cy-deep:#0e3a52;       /* fond accent discret */
  --on-cy:#08131a;         /* texte pose sur l'accent cyan */

  /* --- variables des pages CONTENU (index, hubs, articles) --- */
  --primary:var(--cy);
  --primary-dark:var(--cy-soft);
  --secondary:#3a8fb0;
  --text:var(--ink-text);
  --gray:var(--ink-muted);
  --light:var(--ink-surface);
  --white:var(--ink-card);
  --border:var(--ink-border);
  --radius:6px;

  /* --- variables des outils quiz + calculateur --- */
  --accent:var(--cy);
  --bg:var(--ink-base);
  --card:var(--ink-card);
  --muted:var(--ink-muted);
  --bar-bg:#1c1c25;
  --success:#3fb950;
  --error:#f85149;

  /* --- variables de la page interview --- */
  --primary-light:var(--cy-soft);
  --secondary-light:#4a7f98;
  --text-light:var(--ink-muted);
  --easy:#3fb950;   --easy-bg:#0f2a17;
  --medium:#d29922; --medium-bg:#2a2109;
  --hard:#f85149;   --hard-bg:#2a1010;
  --shadow:0 2px 12px rgba(0,0,0,.5);
}

/* ---------------------------------------------------------------- base */
html{background:var(--ink-base)}
body{
  background:var(--ink-base)!important;
  color:var(--ink-text)!important;
  font-family:'Albert Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif!important;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--cy)}
a:hover{color:var(--cy-soft)}

/* ---------------------------------------------------------------- titres
   Signature Impeccable : Alumni Sans, condense et fin, tres grand. */
h1,h2,h3,h4,h5,.logo,.brand{
  font-family:'Alumni Sans','Arial Narrow',sans-serif!important;
  font-weight:300!important;
  letter-spacing:.01em;
}
h1,.hero h1{font-weight:200!important;letter-spacing:0}
/* filet de securite : titres et corps lisibles par defaut sur fond sombre.
   Les couleurs codees en dur (#333, #444, #1a1a2e...) des pages d'origine
   sont ainsi neutralisees ; les accents cyan restent poses via des classes. */
h1,h2,h3,h4,h5,h6{color:var(--ink-text)}
p,li,dd,dt{color:var(--ink-body)}
.logo,.brand{color:var(--cy)!important}

/* ============================================================ PAGES CONTENU */

header{background:var(--ink-base)!important;border-bottom:1px solid var(--ink-border)!important}
.logo{color:var(--cy)!important}

.hero{background:linear-gradient(160deg,#101017 0%,#09090c 100%)!important}
.hero h1{color:var(--ink-text)!important}
.hero .subtitle,.hero-credit{color:var(--ink-muted)!important}
.hero-image{box-shadow:0 8px 40px rgba(0,0,0,.6)!important;border:1px solid var(--ink-border)}

/* widget recherche + degrades de pastille/icone/avatar (violet -> cyan) */
.job-search-section{background:var(--ink-base)!important}
.job-search-widget{background:var(--ink-card)!important;border-color:var(--ink-border)!important;box-shadow:0 4px 24px rgba(0,0,0,.4)!important}
.widget-badge,.pillar-icon,.author-avatar,.category-icon{
  background:linear-gradient(135deg,var(--cy),var(--cy-2))!important;
  color:var(--on-cy)!important;
}
.form-group input,.form-group select{background:var(--ink-surface)!important;color:var(--ink-text)!important;border-color:var(--ink-border)!important}
.form-group label{color:var(--ink-text)!important}
.search-btn{background:var(--cy)!important;color:var(--on-cy)!important}

/* sections + cartes */
.salary-section,.author-section,.pillars{background:var(--ink-base)!important}
.salary-card,.pillar-card,.author-box,.standard-card,.card,.stat-card,.quick-summary,.faq-card,.faq-item,.trust-item,.takeaways{
  background:var(--ink-card)!important;border-color:var(--ink-border)!important;
}
.stat-card .label,.card p{color:var(--ink-muted)!important}
.salary-card:hover,.pillar-card:hover,.job-card:hover{box-shadow:0 12px 40px rgba(0,0,0,.5)!important}
.salary-card .role,.pillar-card h3,.author-name{color:var(--ink-text)!important}
.salary-card .range,.salary-cta a,.author-link,.card-link,.salary-source a{color:var(--cy)}
.salary-cta a,.author-link{background:var(--cy)!important;color:var(--on-cy)!important}
.salary-cta a:hover,.author-link:hover{background:var(--cy-soft)!important;color:var(--on-cy)!important}
.section-subtitle,.salary-card .label,.salary-source,.author-bio,.pillar-card p{color:var(--ink-muted)!important}

footer{border-top-color:var(--ink-border)!important;color:var(--ink-muted)!important}

/* ============================================================ ARTICLES
   Blocs de contenu long : sommaire, encadres, FAQ, tableaux. */
.toc,.quick-summary{background:var(--ink-surface)!important;border-color:var(--ink-border)!important}
.toc a{color:var(--cy)}
.back-btn,.back-link,.back-link a{color:var(--cy)!important}
.info,.info-section{background:transparent!important}
blockquote{border-left-color:var(--cy)!important;color:var(--ink-muted)!important}
code,pre{background:#0d0d13!important;color:var(--cy-soft)!important;border:1px solid var(--ink-border)}
table{background:var(--ink-card)!important;border-color:var(--ink-border)!important}
th{background:var(--cy)!important;color:var(--on-cy)!important}
td{border-bottom-color:var(--ink-border)!important;color:var(--ink-body)}
tbody tr:nth-child(even){background:var(--ink-surface)!important}
tbody tr:hover,tr:hover td{background:var(--ink-raise)!important}
.role-cell{color:var(--ink-text)!important}

/* pastilles de difficulte / badges generiques : fond sombre teinte */
.badge{border:1px solid var(--ink-border)}
.badge-easy{background:var(--easy-bg)!important;color:var(--easy)!important}
.badge-medium{background:var(--medium-bg)!important;color:var(--medium)!important}
.badge-hard{background:var(--hard-bg)!important;color:var(--hard)!important}
.badge-remote{background:#0f2a17!important;color:#3fb950!important}
.badge-hybrid{background:#2a2109!important;color:#d29922!important}
.badge-onsite{background:#0e2a3a!important;color:var(--cy)!important}
.badge-new{background:#2a1020!important;color:#f778ba!important}
.source-badge{background:var(--ink-card)!important;border-color:var(--ink-border)!important;color:var(--ink-muted)!important}

/* ============================================================ OUTIL QUIZ */
.option-btn{background:var(--ink-surface)!important;color:var(--ink-text)!important;border-color:var(--ink-border)!important}
.option-btn:hover{background:var(--ink-raise)!important;border-color:var(--cy)!important}
.option-btn.selected,.option-btn.selected:disabled:hover{background:var(--cy-deep)!important;border-color:var(--cy)!important}
.option-btn.correct,.option-btn.correct:disabled:hover{background:#0f2a17!important;border-color:var(--success)!important}
.option-btn.incorrect,.option-btn.incorrect:disabled:hover{background:#2a1010!important;border-color:var(--error)!important}
.explanation{background:#12121a!important;color:var(--ink-muted)!important}
.nav-btn.next,.retake-btn,.calc-btn{background:var(--cy)!important;color:var(--on-cy)!important}
.nav-btn.next:hover,.retake-btn:hover,.calc-btn:hover{background:var(--cy-soft)!important}
.nav-btn.next:disabled{background:#2a3a44!important;color:var(--ink-faint)!important}
.question-card,.results-card,.calc-card,.salary-table-wrap{background:var(--ink-card)!important;border-color:var(--ink-border)!important}
.q-category{color:var(--cy)!important}
.result-level.advanced,.breakdown-title,.recs-title,.results-title,.section-heading,.faq-q{color:var(--cy)!important}
.result-level.intermediate,.breakdown-bar.ok{color:var(--medium)!important}
.rec-item{background:var(--ink-surface)!important;border-color:var(--ink-border)!important}
.rec-icon{background:var(--cy-deep)!important;color:var(--cy)!important}
.rec-text strong{color:var(--cy)!important}
.salary-bar.high{background:linear-gradient(90deg,var(--cy),var(--cy-2))!important}
.salary-bar.median{background:var(--cy)!important;color:var(--on-cy)!important}
.field select{background:var(--ink-surface)!important;color:var(--ink-text)!important;border-color:var(--ink-border)!important}

/* ============================================================ OUTIL INTERVIEW */
.site-header{background:var(--ink-base)!important;box-shadow:none!important;border-bottom:1px solid var(--ink-border)}
.back-btn{background:var(--ink-raise)!important;color:var(--ink-text)!important}
.back-btn:hover{background:#22222c!important}
.hero h1 span{color:var(--cy)!important}
.hero p,.hero-stat .label{color:var(--ink-muted)!important}
.filter-section{background:var(--ink-base)!important;border-bottom-color:var(--ink-border)!important;box-shadow:none!important}
.filter-link{background:var(--ink-card)!important;color:var(--cy)!important}
.filter-link:hover,.filter-link:focus{background:var(--ink-raise)!important;border-color:var(--cy)!important}
.filter-link .count{background:var(--cy)!important;color:var(--on-cy)!important}
.category-header{border-bottom-color:var(--cy)!important}
.category-header h2{color:var(--cy)!important}
.q-card{background:var(--ink-card)!important;border-color:var(--ink-border)!important}
.q-card:hover{border-color:var(--cy)!important}
.q-card .q-number{background:var(--cy-deep)!important;color:var(--cy)!important}
.q-card summary{color:var(--cy)!important}
.q-card summary:hover{background:var(--ink-raise)!important}
.q-card summary::before{border-left-color:var(--cy)!important}
.q-card .answer,.faq-answer{color:var(--ink-muted)!important}
.faq-section h2{color:var(--cy)!important}
.faq-card{background:var(--ink-card)!important;border-color:var(--ink-border)!important}
.faq-card details summary{color:var(--ink-text)!important}
.faq-card details summary::before{color:var(--cy)!important}
.site-footer{background:#0c0c11!important;color:var(--ink-muted)!important}

/* ---------------------------------------------------------------- focus a11y */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--cy);outline-offset:2px;
}