/* e-JOBA Design System — référence globale */
:root{
  --ej-bg:#F8F9FB;
  --ej-surface:#FFFFFF;
  --ej-text:#10131A;
  --ej-text-strong:#151821;
  --ej-text-secondary:#667085;
  --ej-border:#E7E9EE;
  --ej-input-border:#DDE1E7;
  --ej-orange:#FF7A2F;
  --ej-coral:#FF4F68;
  --ej-success:#2E9D63;
  --ej-warning:#F5A623;
  --ej-error:#D64545;
  --ej-gradient:linear-gradient(135deg,#FF7A2F 0%,#FF4F68 100%);
  --ej-radius-sm:8px;
  --ej-radius-md:12px;
  --ej-radius-lg:16px;
  --ej-radius-xl:20px;
  --ej-space-1:4px;
  --ej-space-2:8px;
  --ej-space-3:12px;
  --ej-space-4:16px;
  --ej-space-5:24px;
  --ej-space-6:32px;
  --ej-space-7:48px;

  /* Compatibilité avec les composants historiques */
  --ink:var(--ej-text);
  --muted:var(--ej-text-secondary);
  --green:var(--ej-orange);
  --lime:var(--ej-coral);
  --cream:var(--ej-bg);
  --line:var(--ej-border);
  --surface:var(--ej-surface);
  --soft:#F2F4F7;
}

html{background:var(--ej-bg)}
body,button,input,select,textarea{
  font-family:"Manrope","Segoe UI",Arial,sans-serif;
}
body{
  color:var(--ej-text);
  background:var(--ej-bg);
  font-size:15px;
  line-height:1.5;
}

/* Hiérarchie typographique stable */
.hero h1,.jobs-hero h1{font-size:clamp(36px,4.4vw,60px);font-weight:700;line-height:1.04}
.question-card h2,.complete-card h2,.verify-card h2,.auth-copy h2,
.dashboard-head h2,.profile-detail-head h2,.company-cover h2,.payment-card h2,
.response-form h2,.interview-title h2{font-size:clamp(24px,2.3vw,32px);font-weight:700;line-height:1.18}
.section-title-row h2,.section-title-row h3,.detail-card h3,.main-dashboard-card h3,
.side-dashboard-card h3,.recruiter-application-card h3{font-size:18px;font-weight:600}
.question-eyebrow,.aside-step{
  color:var(--ej-orange)!important;
  font-size:12px;
  font-weight:700;
  letter-spacing:.07em;
}

/* Navigation */
.topbar{
  height:68px;
  padding-inline:clamp(20px,4vw,64px);
  background:var(--ej-surface);
  border-bottom:1px solid var(--ej-border);
}
.brand{color:var(--ej-text);font-size:20px;font-weight:700}
.brand-mark{width:42px;height:42px;border-radius:10px}
.app-nav{gap:var(--ej-space-2)}
.app-nav button,.jobs-link{
  min-height:40px;
  padding:0 12px 2px;
  border-bottom:2px solid transparent;
  color:var(--ej-text-secondary);
  font-size:13px;
  font-weight:600;
}
.app-nav button.active,.jobs-link.active{
  color:var(--ej-text)!important;
  border-bottom-color:var(--ej-orange);
}
.app-nav button:hover,.jobs-link:hover{color:var(--ej-text)}
.login-link{min-height:42px;padding:0 16px;border:1px solid var(--ej-border);border-radius:var(--ej-radius-md);color:var(--ej-text);font-weight:600}

/* Accueil : capital humain, connexion, opportunité */
.hero{background:var(--ej-bg)}
.pill{padding:7px 10px;border-radius:var(--ej-radius-sm);background:#FFF2EB;color:#D85B20;font-size:12px;font-weight:600}
.pill i{background:var(--ej-orange);box-shadow:none}
.choice-card{
  min-height:210px;
  padding:24px;
  border:1px solid var(--ej-border);
  border-radius:var(--ej-radius-lg);
  background:var(--ej-surface);
  color:var(--ej-text);
  box-shadow:none;
}
.choice-card:hover{transform:translateY(-2px);border-color:#D5D8DF;box-shadow:0 6px 18px rgba(16,19,26,.06)}
.choice-card.recruiter{background:var(--ej-text);border-color:var(--ej-text)}
.card-icon{width:40px;height:40px;border-radius:var(--ej-radius-md);background:#FFF2EB;color:#D85B20;font-size:13px;font-weight:700}
.recruiter .card-icon{background:rgba(255,122,47,.14);color:#FF9960}
.card-label{font-size:18px;font-weight:600}
.card-text{color:var(--ej-text-secondary);font-size:14px}
.recruiter .card-text{color:#B8BEC9}
.card-link,.recruiter .card-link{color:var(--ej-orange)!important;font-size:14px;font-weight:600}
.hero-visual{border-radius:var(--ej-radius-xl);background:linear-gradient(145deg,#F1F2F5,#FFFFFF)}
.orbit{border-color:rgba(255,122,47,.25)}
.center-badge{background:var(--ej-text);box-shadow:none}
.center-badge strong{font-family:"Manrope","Segoe UI",Arial,sans-serif;font-weight:700}
.center-badge small{color:#D0D4DB}
.match-card{border:1px solid var(--ej-border);border-radius:var(--ej-radius-lg);box-shadow:0 6px 18px rgba(16,19,26,.06)}
.match-card>span{background:#FFF2EB;color:#D85B20}
.match-card em{position:relative;background:#FFF4EE;color:#C94E25;border-radius:var(--ej-radius-sm)}
.spark{display:none}

/* Surfaces et cartes propriétaires */
.question-card,.complete-card,.verify-card,.main-dashboard-card,.side-dashboard-card,
.candidate-result,.suggestion-card,.featured-job,.job-row,.detail-card,.payment-card,
.interview-card,.response-form,.company-cover,.published-offers-panel,
.candidate-opportunity-section,.recruiter-application-card,.application-review,
.journey-summary,.context-ad,.auth-layout{
  background:var(--ej-surface);
  border:1px solid var(--ej-border);
  border-radius:var(--ej-radius-lg);
  box-shadow:none;
}
.candidate-result,.suggestion-card,.featured-job,.job-row,.recruiter-application-card{
  position:relative;
  overflow:hidden;
  transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;
}
.candidate-result::before,.suggestion-card::before,.featured-job::before,
.job-row::before,.recruiter-application-card::before{
  content:"";
  position:absolute;
  inset:18px auto 18px 0;
  width:3px;
  border-radius:0 8px 8px 0;
  background:var(--ej-gradient);
}
.candidate-result:hover,.suggestion-card:hover,.featured-job:hover,.job-row:hover,
.recruiter-application-card:hover{
  border-color:#DDDDE3;
  box-shadow:0 6px 18px rgba(16,19,26,.06);
}

/* Boutons */
.continue,.auth-submit,.context-ad button{
  min-height:48px;
  padding:0 20px;
  border:0;
  border-radius:var(--ej-radius-md);
  background:var(--ej-text);
  color:#fff;
  font-size:14px;
  font-weight:600;
  box-shadow:none;
}
.continue span{color:var(--ej-orange)}
.continue:hover:not(:disabled),.auth-submit:hover:not(:disabled),.context-ad button:hover{background:#252932}
.continue:disabled{background:#D7DAE0;color:#fff}
.compact-apply,.unlock,#submit-application,#confirm-payment,#request-contact,#schedule,
.invitation-actions button:last-child,.recruiter-response-actions button:last-child,
.job-search button,.new-campaign,.save-button{
  background:var(--ej-gradient)!important;
  color:#fff!important;
}
.compact-apply:hover,.unlock:hover,#submit-application:hover,#confirm-payment:hover,
#request-contact:hover,#schedule:hover,.job-search button:hover{
  filter:saturate(1.05) brightness(.97);
}
.outline-action,.secondary-action,.price-option,.export-button,
.invitation-actions button,.recruiter-response-actions button{
  min-height:44px;
  border:1px solid var(--ej-border);
  border-radius:var(--ej-radius-md);
  background:var(--ej-surface);
  color:var(--ej-text);
  font-size:14px;
  font-weight:600;
  box-shadow:none;
}
.outline-action:hover,.secondary-action:hover,.price-option:hover{border-color:#C9CDD5;background:#F9FAFB}
.text-action,.card-link,.signature-edit{color:var(--ej-orange)!important;font-weight:600}

/* Champs */
#screen input:not([type="checkbox"]):not([type="radio"]),
#screen select,#screen textarea,
.ads-app input:not([type="checkbox"]):not([type="radio"]),
.ads-app select,.ads-app textarea{
  min-height:48px;
  border:1px solid var(--ej-input-border);
  border-radius:var(--ej-radius-md);
  background:var(--ej-surface);
  color:var(--ej-text);
  font-size:14px;
  box-shadow:none;
  outline:none;
}
#screen textarea,.ads-app textarea{padding:12px 14px;line-height:1.5}
#screen input:focus,#screen select:focus,#screen textarea:focus,
.ads-app input:focus,.ads-app select:focus,.ads-app textarea:focus{
  border-color:var(--ej-orange)!important;
  box-shadow:none!important;
}
#screen label,.ads-app label{color:var(--ej-text);font-size:13px;font-weight:500}

/* Choix, badges et tags */
.option{min-height:48px;padding:12px 16px;border-bottom:1px solid var(--ej-border);font-size:14px}
.option.selected{background:#FFF5EF;border-color:var(--ej-border);box-shadow:inset 3px 0 0 var(--ej-orange)}
.option i{border-radius:var(--ej-radius-sm);background:var(--ej-orange)}
.job-meta span,.job-skills span,.result-tags span,.matched-tags span,.trait-tags span,
.interest-tags span,.mission-tags span,.acquired-tags span,.profile-badges span,
.boost-badge,.verified-badge,.count-badge,.match-score,.invitation-status,
.skill-chip,.sector-chip,.cv-tags span{
  border-radius:var(--ej-radius-sm)!important;
}
.job-meta span,.job-skills span,.result-tags span,.trait-tags span,.interest-tags span,
.profile-badges span,.skill-chip,.sector-chip,.cv-tags span{
  background:#FFF2EB;
  color:#D85B20;
  border-color:#FFD6C1;
}
.verified-badge,.profile-preference,.invitation-status.accepted{
  background:#ECF8F1!important;
  color:var(--ej-success)!important;
}

/* Signature matching e-JOBA */
.match-score{
  position:relative;
  overflow:hidden;
  padding:9px 12px 11px;
  background:#FFF4EE!important;
  color:#C94E25!important;
  font-size:14px;
  font-weight:700;
}
.match-score::after{
  content:"";
  position:absolute;
  left:10px;right:10px;bottom:4px;
  height:3px;
  border-radius:0 0 50% 50%;
  background:var(--ej-gradient);
}
.score-row i,.cv-progress,.progress-track,.summary-progress{background:#ECEEF2;border-radius:8px}
.score-row em,.cv-progress span,.progress-track span,.summary-progress span{
  background:var(--ej-gradient)!important;
  border-radius:8px;
}
.score-row b{color:var(--ej-text)}

/* Cartes d’offres, de talents et de candidatures */
.suggestion-card,.featured-job,.job-row,.candidate-result,.recruiter-application-card{padding:20px 24px}
.suggestion-card h4,.job-title-line h3,.candidate-result h3,.applicant-head h3{font-size:16px;color:var(--ej-text)}
.suggestion-card>p,.job-main>p,.candidate-result>p,.applicant-head p{font-size:13px;color:var(--ej-text-secondary)}
.job-meta span,.job-skills span,.result-tags span{padding:6px 8px;font-size:12px}
.job-side>b{font-size:13px;color:var(--ej-text)}
.job-side>small{font-size:11px;color:var(--ej-text-secondary)}
.compact-apply{min-height:44px!important;padding:0 16px!important;border-radius:var(--ej-radius-md)!important;font-size:13px!important}
.invitation-card,.candidate-application-status{border:1px solid var(--ej-border);border-radius:var(--ej-radius-md);background:var(--ej-surface)}
.invitation-content b,.candidate-application-status b{font-size:14px}
.invitation-content span,.candidate-application-status span{font-size:12px}
.invitation-content small,.invitation-content p,.candidate-application-status p{font-size:11px}
.application-data>div,.letter-preview,.received-letter{border-radius:var(--ej-radius-sm);background:#F7F8FA}

/* Régie publicitaire alignée sur le même système */
.ads-app{color:var(--ej-text);background:var(--ej-bg)}
.ads-sidebar{background:var(--ej-text)}
.ads-brand img{border-radius:var(--ej-radius-sm)}
.ads-sidebar nav button{border-radius:var(--ej-radius-sm);font-size:13px;font-weight:600}
.ads-sidebar nav button.active{border-left:2px solid var(--ej-orange)}
.ads-main{background:var(--ej-bg)}
.ads-topbar{border-color:var(--ej-border)}
.ads-topbar h1,.section-head h2{font-size:24px;font-weight:700}
.kpi-card,.panel,.campaign-card,.media-card,.inventory-grid article,.form-section{
  border:1px solid var(--ej-border);
  border-radius:var(--ej-radius-lg);
  background:var(--ej-surface);
  box-shadow:none;
}
.kpi-card{border-top:1px solid var(--ej-border)}
.kpi-card.accent{border-left:3px solid var(--ej-orange);border-top-color:var(--ej-border)}
.kpi-card>span,.panel-head span{font-size:11px;color:var(--ej-text-secondary)}
.kpi-card strong{font-size:28px;color:var(--ej-text)}
.kpi-card small,.panel-head small,.section-head p{font-size:12px;color:var(--ej-text-secondary)}
.panel-head h3{font-size:18px;font-weight:600}
.campaign-card{padding:16px}
.campaign-title small,.campaign-stat span,.media-card small,.media-meta span{font-size:11px}
.campaign-title h3,.media-card h3{font-size:14px}
.campaign-title p,.campaign-stat b{font-size:12px}
.campaign-actions button,.export-button{border:1px solid var(--ej-border);border-radius:var(--ej-radius-sm);background:#fff}
.campaign-form{background:var(--ej-bg)}
.campaign-form>header,.campaign-form>footer{background:var(--ej-surface);border-color:var(--ej-border)}
.form-section h3{font-size:16px}
.form-section label>span{font-size:13px}

/* Questionnaires */
.question-page,.complete-page,.auth-page,.dashboard-page,.jobs-page{background:var(--ej-bg)}
.guided-question-page{min-height:calc(100vh - 68px)!important;background:var(--ej-bg)!important}
.journey-brand-rail{
  min-height:calc(100vh - 68px);
  color:#fff;
  background:var(--ej-text);
  border-right:0;
}
.journey-brand-rail>small{color:#AEB4C0}
.guided-question-page .question-card{
  border:1px solid var(--ej-border);
  border-radius:var(--ej-radius-lg);
  padding:32px;
}
.guided-question-page .question-card::before{
  width:54px;
  height:4px;
  margin:-32px 0 24px;
  border-radius:0 0 8px 8px;
  background:var(--ej-gradient);
}
.journey-stepper li.active>span{background:var(--ej-gradient)}
.journey-stepper li.done>span,.journey-summary li.done i{background:var(--ej-text)}
.journey-summary li.active{background:#FFF4EE;color:var(--ej-orange)}
.journey-summary li.active i{background:var(--ej-orange)}
.summary-progress+strong{color:var(--ej-orange)}

/* Authentification */
.auth-page{background:var(--ej-bg)}
.auth-layout{border-radius:var(--ej-radius-xl);box-shadow:0 6px 18px rgba(16,19,26,.06)}
.auth-aside{background:var(--ej-text)}
.auth-copy::before{background:var(--ej-gradient)}
.auth-tabs{border-radius:var(--ej-radius-md);background:#F4F5F7}
.auth-tabs button{border-radius:var(--ej-radius-sm)}
.auth-tabs button.active{color:var(--ej-text);box-shadow:none;border-bottom:2px solid var(--ej-orange)}

/* Administration publicitaire alignée sur la même identité */
.ads-app{color:var(--ej-text);background:var(--ej-bg)}
.ads-sidebar{background:var(--ej-text)}
.ads-sidebar nav button{border-radius:var(--ej-radius-sm)}
.ads-sidebar nav button.active{background:rgba(255,255,255,.09);box-shadow:inset 3px 0 0 var(--ej-orange)}
.ads-sidebar nav button span{color:var(--ej-orange)}
.ads-main{background:var(--ej-bg)}
.ads-topbar{border-bottom-color:var(--ej-border)}
.panel,.kpi-card,.campaign-card,.media-card,.inventory-grid article,
.form-section,.campaign-toolbar label,.placement-item{
  background:var(--ej-surface);
  border:1px solid var(--ej-border);
  border-radius:var(--ej-radius-lg);
  box-shadow:none;
}
.kpi-card{border-top:1px solid var(--ej-border)}
.kpi-card.accent{border-left:3px solid var(--ej-orange)}
.panel-head span,.media-card small,.inventory-grid article>span,.campaign-title small,
.campaign-form header span{color:var(--ej-orange)}
.campaign-actions button,.campaign-form header button{
  border:1px solid var(--ej-border);
  border-radius:var(--ej-radius-sm);
  background:var(--ej-surface);
}
.campaign-form{background:var(--ej-bg);box-shadow:-8px 0 24px rgba(16,19,26,.08)}
.campaign-form>header,.campaign-form>footer{background:var(--ej-surface);border-color:var(--ej-border)}
.toast{border-radius:var(--ej-radius-md);background:var(--ej-text)}

/* Responsive */
@media(max-width:760px){
  body{font-size:14px}
  .topbar{height:60px}
  .brand-mark{width:38px;height:38px}
  .guided-question-page{min-height:calc(100vh - 60px)!important}
  .guided-question-page .question-card{padding:24px 20px}
  .guided-question-page .question-card::before{margin:-24px 0 20px}
  .header-actions{gap:6px}
  .support{display:none}
  .app-nav:not([hidden]){
    position:fixed;
    z-index:40;
    left:10px;right:10px;bottom:10px;
    min-height:56px;
    padding:6px;
    justify-content:space-around;
    border:1px solid var(--ej-border);
    border-radius:var(--ej-radius-lg);
    background:var(--ej-surface);
    box-shadow:0 6px 18px rgba(16,19,26,.08);
  }
  .app-nav:not([hidden]) button{border-bottom:0;border-top:2px solid transparent}
  .app-nav:not([hidden]) button.active{border-top-color:var(--ej-orange)}
}