@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand Dark (Deep Sovereign Navy from new site headers & metrics) */
  --navy-deep: #0c2340;
  --navy: #0c2340;
  --navy-card: #081a30;
  --navy-surface: #102a4c;
  --navy-light: #1e3a5f;

  /* Brand Primary (Vibrant Emerald Teal from new site CTAs & highlights) */
  --teal: #029e9d;
  --teal-primary: #029e9d;
  --teal-hover: #018584;
  --teal-dark: #016a69;
  --teal-light: #e6f7f7;
  --teal-subtle: #f0fbfb;
  --teal-border: #b3e7e6;
  --teal-bright: #2dd4bf;

  /* Official Accents (Gold for ANEM/CNAS & Badges) */
  --gold: #f59e0b;
  --gold-accent: #f59e0b;
  --gold-light: #fef3c7;
  --gold-border: #fde68a;
  --gold-dark: #b45309;

  /* Canvas & Neutral Surfaces */
  --paper: #f8fafc;
  --canvas: #f8fafc;
  --paper-card: #ffffff;
  --card-white: #ffffff;
  --line: #e5edf4;
  --border-light: #e5edf4;
  --line-focus: #029e9d;
  --ink: #0c2340;
  --text-main: #0c2340;
  --muted: #64748b;
  --text-muted: #64748b;

  /* Status Colors */
  --danger: #ef4444;
  --success: #10b981;
  --status-success-bg: #ecfdf5;
  --status-success-border: #a7f3d0;

  /* Sizing & Geometry from the New Website */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 9999px;

  /* Elevation (Soft Modern Clean Depth) */
  --shadow-sm: 0 2px 8px rgba(12, 35, 64, 0.04);
  --shadow-card: 0 8px 24px -4px rgba(12, 35, 64, 0.06), 0 0 1px 1px rgba(12, 35, 64, 0.04);
  --shadow-hover: 0 16px 36px -6px rgba(12, 35, 64, 0.12), 0 0 1px 1px rgba(12, 35, 64, 0.06);

  /* Typography */
  --font-ar: 'Cairo', system-ui, -apple-system, sans-serif;
  --font-latin: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Global Typography & Body Enhancements */
body.responsive {
  font-family: var(--font-latin);
  background-color: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════ MODERN HEADER ═══════════════ */
header.interne_header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 4px 20px rgba(15, 42, 92, 0.04) !important;
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 6px 0 !important;
}
.dl-main-navbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.dl-main-navbar-logo {
  display: inline-block;
  background: url('/assets/images/logo_dark.png') no-repeat left center !important;
  background-size: contain !important;
  width: 168px !important;
  height: 40px !important;
}
.dl-main-navbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.dl-main-navbar-item .menuBaseline {
  color: var(--navy-deep) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  padding: 6px 14px !important;
  border-radius: var(--r-pill) !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.25s ease !important;
}
.dl-main-navbar-item a:hover .menuBaseline {
  background: #e0f2f4 !important;
  border-color: #bfe6ea !important;
  color: var(--teal-dark) !important;
}
#deconnecter .txtBaseline {
  color: var(--danger) !important;
  font-weight: 700 !important;
}

/* ═══════════════ MODERN AUTH PAGES (LOGIN & REGISTER) ═══════════════ */
.auth-page-wrap {
  min-height: calc(100vh - 180px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  background: radial-gradient(circle at 10% 20%, rgba(3, 152, 158, 0.05) 0%, transparent 40%),
              radial-gradient(circle at 90% 80%, rgba(15, 42, 92, 0.05) 0%, transparent 40%),
              var(--paper);
}
.auth-card {
  background: var(--paper-card);
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  width: 100%;
  max-width: 540px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.auth-card.auth-card-wide {
  max-width: 680px;
}
.auth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--navy-deep), var(--teal), var(--teal-bright));
}

.auth-header {
  text-align: center;
  margin-bottom: 28px;
}
.auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #e0f2f4;
  color: var(--teal-dark);
  font-size: 0.78rem;
  font-weight: 800;
  border-radius: var(--r-pill);
  margin-bottom: 12px;
}
.auth-header h1, .auth-header h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--navy-deep);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.auth-header p {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.5;
}

/* Audience / Switcher Pills */
.auth-switcher {
  display: flex;
  background: var(--paper);
  padding: 5px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  margin-bottom: 28px;
  gap: 4px;
}
.auth-switcher a, .auth-switcher button {
  flex: 1;
  text-align: center;
  padding: 12px 18px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--r-pill);
  color: var(--muted);
  text-decoration: none;
  border: none;
  background: transparent;
  transition: all 0.25s ease;
  cursor: pointer;
}
.auth-switcher a.active, .auth-switcher button.active {
  background: var(--navy-deep);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 42, 92, 0.15);
}

/* ⚡ CTA « CV prêt ? » — Inscription express (Fast-Track) */
.auth-cv-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, var(--navy-deep) 0%, #00387C 55%, var(--teal) 135%);
  border-radius: 18px;
  padding: 20px 22px;
  margin: 0 0 28px;
  color: #ffffff;
  box-shadow: 0 12px 32px rgba(15, 42, 92, 0.22);
  position: relative;
  overflow: hidden;
}
.auth-cv-cta::after {
  content: '';
  position: absolute;
  inset-inline-end: -30px;
  top: -45px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(3, 152, 158, 0.22);
  filter: blur(20px);
}
.auth-cv-cta-icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  color: #ffffff;
}
.auth-cv-cta-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.auth-cv-cta-body h2 {
  font-size: 1.12rem;
  font-weight: 800;
  margin: 0 0 4px;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.auth-cv-cta-body p { margin: 0; font-size: 0.92rem; color: rgba(255, 255, 255, 0.85); }
.auth-cv-cta-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: var(--navy-deep);
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.92rem;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}
.auth-cv-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  text-decoration: none;
}
@media (max-width: 620px) {
  .auth-cv-cta { flex-direction: column; align-items: flex-start; }
  .auth-cv-cta-btn { align-self: stretch; justify-content: center; }
}

/* Modern Form Controls */
.auth-form-group {
  margin-bottom: 20px;
  text-align: left;
}
.auth-form-group label {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy-deep);
  margin-bottom: 6px;
}
.auth-input-wrap {
  position: relative;
}
.auth-input-wrap i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.95rem;
  pointer-events: none;
}
.auth-input {
  width: 100%;
  padding: 14px 16px 14px 46px;
  font-size: 1.1rem;
  color: var(--ink);
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  outline: none;
  transition: all 0.25s ease;
  font-family: inherit;
}
.auth-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(3, 152, 158, 0.12);
}
.auth-input::placeholder {
  color: #94a3b8;
}
.auth-select {
  width: 100%;
  padding: 12px 16px 12px 44px;
  font-size: 0.95rem;
  color: var(--ink);
  background: #ffffff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  outline: none;
  transition: all 0.25s ease;
  font-family: inherit;
  appearance: auto;
}
.auth-select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(3, 152, 158, 0.12);
}

/* Modern Button */
.btn-auth-primary {
  width: 100%;
  padding: 16px 24px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(3, 152, 158, 0.25);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-auth-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(3, 152, 158, 0.35);
  background: linear-gradient(135deg, #04adb4 0%, #02595c 100%);
  color: #ffffff;
}

/* CV Drag and Drop Zone */
.auth-dropzone {
  border: 2px dashed #99d5da;
  background: #f0fafb;
  border-radius: var(--r-md);
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-bottom: 20px;
}
.auth-dropzone:hover {
  border-color: var(--teal);
  background: #e4f6f8;
}
.auth-dropzone i {
  font-size: 2rem;
  color: var(--teal);
  margin-bottom: 8px;
  display: inline-block;
}
.auth-dropzone-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--navy-deep);
  margin-bottom: 4px;
}
.auth-dropzone-hint {
  font-size: 0.78rem;
  color: var(--muted);
}

/* Form Helper Links & Footer */
.auth-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 0.95rem;
}
.auth-links a {
  color: var(--teal-dark);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}
.auth-links a:hover {
  color: var(--teal);
  text-decoration: underline;
}
.auth-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 0.88rem;
  color: var(--muted);
}
.auth-footer a {
  color: var(--teal-dark);
  font-weight: 700;
  text-decoration: none;
}
.auth-footer a:hover {
  text-decoration: underline;
}

/* Modern Alerts */
.auth-alert {
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.auth-alert-danger {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.auth-alert-success {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

/* ═══════════════ MODERN FOOTER ═══════════════ */
section.acc_footer {
  background: #081a33 !important;
  color: #94a3b8 !important;
  padding: 60px 0 40px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
section.acc_footer h3 {
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 1.1rem !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 20px !important;
}
section.acc_footer .logo_undertext {
  color: #94a3b8 !important;
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  margin-top: 16px !important;
}
section.acc_footer .useful_links ul li a {
  color: #cbd5e1 !important;
  font-size: 0.92rem !important;
  transition: color 0.25s !important;
}
section.acc_footer .useful_links ul li a:hover {
  color: var(--teal-bright) !important;
  text-decoration: none !important;
}
section.acc_footer .foot_contact_content span {
  color: #cbd5e1 !important;
  font-size: 0.9rem !important;
}
.social-network-links a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: var(--r-pill) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  margin-right: 8px !important;
  transition: all 0.25s !important;
}
.social-network-links a:hover {
  background: var(--teal) !important;
  transform: translateY(-2px) !important;
}
footer {
  background: #051021 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 20px 0 !important;
  color: #64748b !important;
  font-size: 0.82rem !important;
}

/* ═══════════════ HEADER LAYOUT FIX (v2 — two clean rows, no overlap) ═══════════════ */
header.interne_header .dl-main-navbar.container {
  flex-wrap: wrap;
  align-items: center;
  row-gap: 6px;
}
header.interne_header .leftpartmenu {
  padding-top: 0;
}
header.interne_header .rightpartmenu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
header.interne_header .menuconnection {
  margin: 0;
}
header.interne_header .menu_bar {
  margin: 0;
}
header.interne_header .menu_bar ul.dl-main-navbar {
  gap: 6px;
  padding: 0;
}
header.interne_header .man_navbar_menu_element a {
  height: auto;
  line-height: 1.3;
  color: var(--navy-deep) !important;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  transition: background 0.25s ease, color 0.25s ease;
}
header.interne_header .main_navbar_menu_text {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding-top: 0 !important;
  font-size: 13px;
}
header.interne_header .main_navbar_menu_text svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
header.interne_header .man_navbar_menu_element a:hover {
  background: var(--teal-light) !important;
  color: var(--teal-dark) !important;
}
header.interne_header .man_navbar_menu_element.constant a {
  background: var(--teal) !important;
  color: #ffffff !important;
  font-weight: 700;
}
header.interne_header .man_navbar_menu_element.constant a:hover {
  background: var(--teal-dark) !important;
  color: #ffffff !important;
}

/* ═══════════════ CONTACT PAGE FIX (v2) ═══════════════ */
.contact_container .information,
.contact_container .formulaire {
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
}
.contact_container .information {
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, var(--teal-dark) 130%) !important;
}
.contact_container .information .foot_contact_icon img {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.contact_container .information .info_contact_content span {
  color: rgba(255, 255, 255, 0.92) !important;
}
.contact_container .formulaire label {
  color: var(--navy-deep) !important;
  font-weight: 700 !important;
}
.contact_container .formulaire .form-control {
  border-color: var(--line) !important;
  border-radius: 12px !important;
}
.contact_container .formulaire .form-control:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(3, 152, 158, 0.12) !important;
}
.interne_banner,
.interne_banner_presentation {
  background: linear-gradient(100deg, var(--navy-deep) 0%, var(--navy) 55%, var(--teal) 130%) !important;
}

/* ═══════════════ INTERNAL PAGES UNIFICATION (v2) ═══════════════ */
.home-fr .section_title h1,
.home-fr .pres_title_header,
.home-fr h1,
.home-fr h2 {
  color: var(--navy-deep) !important;
}
.home-fr .btn,
.home-fr input[type="submit"],
.home-fr .offer_read_more a {
  border-radius: 999px !important;
  transition: all 0.25s ease !important;
}
.home-fr .btn:hover,
.home-fr input[type="submit"]:hover {
  transform: translateY(-1px);
}
.home-fr .offer_read_more a {
  background: var(--teal) !important;
  border: 1px solid var(--teal) !important;
}
.home-fr .offer_read_more a:hover {
  background: var(--teal-dark) !important;
  border-color: var(--teal-dark) !important;
}

/* ═══════════════════════════════════════════════════════════════
   EMPLOISERVICES 2026 PORTAL EXTENSIONS (ENTREPRISE & CANDIDAT)
   Derived from the official new landing page visual identity
   ═══════════════════════════════════════════════════════════════ */

/* Eyebrow Site Pill with pulsating dot */
.eyebrow-site-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--teal-light);
  color: var(--teal-dark);
  border: 1px solid var(--teal-border);
  padding: 5px 14px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 12px;
}
.eyebrow-site-pill .pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal-primary);
  box-shadow: 0 0 0 3px rgba(2, 158, 157, 0.25);
  display: inline-block;
}

/* Pill Badges */
.site-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
}
.site-pill-badge.teal {
  background: var(--teal-light);
  color: var(--teal-dark);
  border: 1px solid var(--teal-border);
}
.site-pill-badge.gold {
  background: var(--gold-light);
  color: var(--gold-dark);
  border: 1px solid var(--gold-border);
}
.site-pill-badge.success {
  background: var(--status-success-bg);
  color: var(--success);
  border: 1px solid var(--status-success-border);
}
.site-pill-badge.navy {
  background: #e2e8f0;
  color: var(--navy-deep);
}

/* Primary & Action Buttons (Website Pill Style) */
.btn-site {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  font-family: var(--font-ar);
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}
.btn-site-teal {
  background: var(--teal-primary);
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(2, 158, 157, 0.25);
}
.btn-site-teal:hover {
  background: var(--teal-hover);
  box-shadow: 0 6px 18px rgba(2, 158, 157, 0.35);
  transform: translateY(-1px);
}
.btn-site-navy {
  background: var(--navy-deep);
  color: #ffffff !important;
}
.btn-site-navy:hover {
  background: #081a30;
  transform: translateY(-1px);
}
.btn-site-ghost {
  background: #ffffff;
  color: var(--navy-deep) !important;
  border: 1px solid var(--border-light);
}
.btn-site-ghost:hover {
  background: var(--canvas);
  border-color: var(--teal-primary);
  color: var(--teal-primary) !important;
}

/* Dark KPI Ribbon (Matching the 35200 Section) */
.dark-kpi-ribbon {
  background: linear-gradient(135deg, var(--navy-deep) 0%, #081a30 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 24px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.dark-kpi-ribbon::before {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(2, 158, 157, 0.18) 0%, transparent 70%);
  top: -60px;
  left: -40px;
  pointer-events: none;
}
.kpi-dark-item {
  position: relative;
  z-index: 2;
}
.kpi-dark-num {
  font-size: 32px;
  font-weight: 900;
  color: #38bdf8;
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-bottom: 4px;
}
.kpi-dark-num.gold {
  color: #fbbf24;
}
.kpi-dark-num.teal {
  color: #2dd4bf;
}
.kpi-dark-label {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 700;
}

/* Tool Cards Grid (Matching Section 'أدوات مجانية') */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.tool-card-box {
  background: var(--card-white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 20px;
  transition: all 0.25s ease;
  position: relative;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.tool-card-box:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--teal-primary);
}
.tool-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}
.icon-square-box {
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
}
.icon-square-box.teal {
  background: var(--teal-primary);
  box-shadow: 0 3px 8px rgba(2, 158, 157, 0.3);
}
.icon-square-box.navy {
  background: var(--navy-deep);
  box-shadow: 0 3px 8px rgba(12, 35, 64, 0.3);
}
.icon-square-box.gold {
  background: var(--gold-accent);
  box-shadow: 0 3px 8px rgba(245, 158, 11, 0.3);
}
.tool-card-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--navy-deep);
  margin-bottom: 6px;
}
.tool-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 14px;
}
.tool-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal-primary);
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  transition: gap 0.2s ease;
}
.tool-card-box:hover .tool-card-link {
  gap: 10px;
}

/* White Panel Card & Tables */
.white-panel-card {
  background: var(--card-white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.panel-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}
table.site-styled-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
}
table.site-styled-table th {
  background: var(--canvas);
  color: var(--navy-deep);
  font-weight: 800;
  text-align: right;
  padding: 12px 16px;
  border-bottom: 2px solid var(--border-light);
  font-size: 12.5px;
}
table.site-styled-table td {
  padding: 16px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
  color: var(--text-body);
}
table.site-styled-table tr:hover td {
  background: rgba(2, 158, 157, 0.02);
}

/* Matcher Progress Bar */
.matcher-progress-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.matcher-bar-track {
  flex: 1;
  height: 7px;
  background: #e2e8f0;
  border-radius: var(--r-pill);
  overflow: hidden;
  min-width: 70px;
}
.matcher-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal-primary), #2dd4bf);
  border-radius: var(--r-pill);
}

/* Candidate Hero Banner */
.candidate-profile-banner {
  background: linear-gradient(135deg, var(--navy-deep) 0%, #0f2a5c 70%, #0a1f38 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.candidate-profile-banner::after {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(2, 158, 157, 0.28) 0%, transparent 70%);
  top: -80px;
  left: -60px;
  pointer-events: none;
}
.candidate-photo-avatar {
  width: 76px;
  height: 76px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--teal-primary), #2dd4bf);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 900;
  border: 3px solid rgba(255,255,255,0.25);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

/* Smart Screen AI Feature Card (Rule 13) */
.smart-screen-feature-card {
  background: var(--card-white);
  border: 2px solid var(--teal-primary);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 6px 24px rgba(2, 158, 157, 0.1);
  position: relative;
}
.cert-rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.cert-rec-item {
  background: var(--canvas);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: all 0.2s ease;
}
.cert-rec-item:hover {
  background: #fff;
  border-color: var(--teal-primary);
  box-shadow: var(--shadow-sm);
}

/* Interactive Password Eye Toggle (Rule 15) */
.password-toggle-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.password-toggle-wrapper input {
  padding-left: 45px !important;
}
.password-toggle-btn {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: color 0.2s;
  z-index: 5;
}
.password-toggle-btn:hover {
  color: var(--teal-primary);
}

/* Offer Type Distinct Badges (Rule 1 & 31) */
.badge-reel {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 11px;
}
.badge-prestation {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 11px;
}

/* ═══════════════ MOBILE FIRST RESPONSIVE RULES (< 768px) ═══════════════ */
@media (max-width: 768px) {
  .dark-kpi-ribbon {
    grid-template-columns: 1fr;
    padding: 18px 20px;
    gap: 16px;
  }
  .candidate-profile-banner {
    flex-direction: column;
    text-align: center;
    padding: 22px 18px;
    gap: 18px;
  }
  .candidate-photo-avatar {
    margin: 0 auto;
  }
  .tools-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .cert-rec-grid {
    grid-template-columns: 1fr;
  }
  .smart-screen-feature-card {
    padding: 16px;
  }
  .site-table-responsive-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
  }
  table.site-styled-table th, 
  table.site-styled-table td {
    padding: 10px 12px;
    font-size: 12px;
  }
  .auth-card {
    padding: 24px 18px !important;
    margin: 12px 0 !important;
  }
  .auth-title {
    font-size: 1.4rem !important;
  }
}

/* ── Round 20b (2026-09-22) — contraste du hero candidat ──────────────────────
   Le nom du candidat héritait d'une couleur sombre (prévue pour fond clair) et se
   retrouvait quasi illisible sur le dégradé navy du hero. Règle scopée au bandeau
   pour ne rien changer ailleurs. */
.candidate-profile-banner h2,
.candidate-meta-text h2,
.candidate-meta-text h3 {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.candidate-profile-banner .candidate-meta-text p {
  color: #dbeafe !important;
}

/* ═══════════════ ROUND 26 (2026-09-23) — connexion recruteur & champs de formulaire ═══════════════
   La carte recruteur (login_pro.php) portait un `padding: 48px 44px` EN LIGNE : illisible sur
   telephone (le contenu poussait la carte hors ecran). Le padding vit desormais ici, avec une
   variante mobile de 28px / 18px, et tous les champs passent en border-box. Rien n'est supprime
   de l'existant : on ajoute uniquement des regles plus precises. */
.auth-card, .auth-card-pro, .auth-page-wrap { box-sizing: border-box; }
.auth-card-pro { padding: 48px 44px; }
.auth-card-pro .auth-input, .auth-card-pro input, .auth-card-pro select, .auth-card-pro textarea {
  box-sizing: border-box; max-width: 100%;
}
.auth-card-pro .auth-input:focus, .auth-card-pro input:focus, .auth-card-pro select:focus {
  outline: none;
  border-color: #029e9d !important;
  box-shadow: 0 0 0 3px rgba(2, 158, 157, .15) !important;
}
/* Le badge « Espace Recruteur Agreé — Loi 04-19 » ne doit jamais elargir la carte */
.auth-card-pro .auth-badge { max-width: 100%; flex-wrap: wrap; justify-content: center; }
@media (max-width: 768px) {
  .auth-card-pro { padding: 28px 18px !important; }
  .auth-card-pro .auth-header h1 { font-size: 1.6rem !important; }
  .auth-card-pro .auth-header p { font-size: .95rem !important; }
  .auth-card-pro .auth-links { flex-wrap: wrap; gap: 10px; }
  .auth-card-pro .btn-auth-primary { font-size: 1rem !important; }
}
@media (max-width: 380px) {
  .auth-card-pro { padding: 22px 14px !important; }
  .auth-card-pro .auth-header h1 { font-size: 1.4rem !important; }
}

/* Round 34 — etat « Refusee » de la pastille d offre */
.site-pill-badge.danger {
  background: var(--danger-sub, #fef2f2);
  color: var(--danger, #b91c1c);
  border: 1px solid #fecaca;
}