/*
Theme Name:   Joblook Premium Child
Theme URI:    https://recrutia.fr
Description:  Design system moderne & soft — enfant de Joblook Premium.
Author:       Recrutia
Template:     joblook-premium
Version:      1.8.1
Text Domain:  joblook-premium-child
*/

/* ================================================================
   RÈGLE D'OR : ne jamais toucher position, display, overflow, float
   des éléments dont le JS Joblook dépend.
   On overrides uniquement : color, background, font, border, shadow,
   border-radius, padding/margin quand sans impact sur le layout.
   ================================================================ */

/* ================================================================
   1. DESIGN TOKENS
   ================================================================ */
:root {
  --c-primary:        #0090f5;
  --c-primary-dark:   #006ecc;
  --c-primary-light:  #e8f4ff;
  --c-primary-mid:    #bfdfff;
  --c-accent:         #7c3aed;
  --c-accent-light:   #ede9fe;
  --c-success:        #10b981;
  --c-success-light:  #d1fae5;
  --c-warning:        #f59e0b;
  --c-warning-light:  #fef3c7;
  --c-danger:         #ef4444;
  --c-danger-light:   #fee2e2;

  --c-white:    #ffffff;
  --c-bg:       #f8fafc;
  --c-bg-alt:   #f1f5f9;
  --c-border:   #e2e8f0;
  --c-muted:    #94a3b8;
  --c-text:     #334155;
  --c-dark:     #0f172a;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 9999px;

  --s-xs:      0 1px 2px rgba(15,23,42,.05);
  --s-sm:      0 1px 6px rgba(15,23,42,.07), 0 0 1px rgba(15,23,42,.04);
  --s-md:      0 4px 16px rgba(15,23,42,.08), 0 0 1px rgba(15,23,42,.04);
  --s-lg:      0 12px 32px rgba(15,23,42,.10), 0 0 1px rgba(15,23,42,.04);
  --s-primary: 0 6px 20px rgba(0,144,245,.28);

  --t:    .18s ease;
  --t-lg: .32s ease;
}

/* ================================================================
   2. RESET MINIMAL — police et couleurs de base uniquement
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font) !important;
  font-size: 15px !important;
  color: var(--c-text) !important;
  background-color: var(--c-bg) !important;
  -webkit-font-smoothing: antialiased;
}

/* Titres — font + couleur sur fond clair uniquement
   EXCEPTION : pas d'override dans les sections sombres/slider (#header-slider, .dark-*, sections avec image) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font) !important;
  color: var(--c-dark);        /* Pas !important — le slider peut surcharger */
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Sur fond clair (body normal) → forcer couleur sombre */
.site-content h1, .site-content h2, .site-content h3,
.site-content h4, .site-content h5, .site-content h6,
.widget h1, .widget h2, .widget h3,
.widget h4, .widget h5, .widget h6,
.entry-content h1, .entry-content h2, .entry-content h3 {
  color: var(--c-dark) !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
}

/* Sur fond sombre/slider → préserver le blanc */
#header-slider h1, #header-slider h2, #header-slider h3,
#header-slider h4, #header-slider h5, #header-slider h6,
.header-slider h1, .header-slider h2, .header-slider h3,
.header-slider h4, .header-slider h5, .header-slider h6,
.header-slider .banner-wrap h1, .header-slider .banner-wrap h4 {
  color: #ffffff !important;
  font-family: var(--font) !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.2);
}

p { color: var(--c-text); line-height: 1.7; }

/* Liens généraux — PAS !important pour ne pas écraser les boutons */
a { color: var(--c-primary); text-decoration: none !important; transition: color var(--t); }
a:hover { color: var(--c-primary-dark); }

/* Protection des liens dans le contenu éditorial */
.entry-content a,
.widget-area a,
.site-info a { color: var(--c-primary) !important; }

/* Container — max-width seulement, pas de display ni flex */
.container { max-width: 1200px !important; }

/* ================================================================
   3. HEADER — fond, ombre, sticky. PAS de flex ni min-height.
   ================================================================ */
#masthead,
.site-header {
  background-color: rgba(255,255,255,.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--c-border) !important;
  box-shadow: var(--s-sm) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  /* Joblook gère le padding lui-même */
}

/* Logo */
.site-title a,
p.site-title a {
  color: var(--c-dark) !important;
  font-family: var(--font) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: -0.03em;
}
.site-title a:hover,
p.site-title a:hover { color: var(--c-primary) !important; }

.site-description,
p.site-description { color: var(--c-muted) !important; font-size: 12px !important; }

/* ================================================================
   4. NAVIGATION PRINCIPALE — liens uniquement
   ================================================================ */

/* Liens du niveau 1 — couvre les deux structures Joblook (navbar-nav et primary-menu) */
.header-navigation li > a,
.navbar-nav li > a,
nav#site-navigation li > a,
#primary-menu > li > a,
#menu-main > li > a {
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--c-text) !important;
  border-radius: var(--r-md) !important;
  transition: background var(--t), color var(--t) !important;
}
.header-navigation li > a:hover,
.navbar-nav li > a:hover,
nav#site-navigation li > a:hover,
#primary-menu > li > a:hover,
#menu-main > li > a:hover,
#primary-menu > li.current-menu-item > a,
#primary-menu > li.current_page_item > a,
#menu-main > li.current-menu-item > a {
  color: var(--c-primary) !important;
  background-color: var(--c-primary-light) !important;
}

/* Flèche sous-menu (FontAwesome dans Joblook) */
.header-navigation li.menu-item-has-children > a::after,
.navbar-nav li.menu-item-has-children > a::after {
  color: var(--c-muted) !important;
}

/* CTA Login/Signup dans le menu */
li.login-menu > a {
  background-color: var(--c-primary) !important;
  color: var(--c-white) !important;
  border: 2px solid var(--c-primary) !important;
  border-radius: var(--r-full) !important;
  font-weight: 600 !important;
  padding: 7px 18px !important;
  font-size: 13px !important;
  box-shadow: var(--s-primary) !important;
  transition: all var(--t) !important;
}
li.login-menu > a:hover {
  background-color: var(--c-primary-dark) !important;
  border-color: var(--c-primary-dark) !important;
  color: var(--c-white) !important;
}

/* ================================================================
   5. SOUS-MENUS DROPDOWN
   ================================================================ */

/* Container du dropdown — couvre .sub-menu (WP standard) et .dropdown-menu (Joblook Bootstrap) */
nav#site-navigation .menu li.menu-item-has-children .sub-menu,
nav#site-navigation .menu li.menu-item-has-children .dropdown-menu,
.header-navigation ul ul,
.navbar-nav > li > .dropdown-menu,
ul.dropdown-menu.dropdown-sub {
  background-color: var(--c-white) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--s-lg) !important;
  min-width: 210px !important;
  /* JAMAIS toucher : opacity, display, position, left, top — gérés par Joblook/Bootstrap */
}

/* Items du dropdown */
nav#site-navigation li > .sub-menu li > a,
nav#site-navigation li > .dropdown-menu li > a,
.navbar-nav > li > .dropdown-menu li > a,
.header-navigation ul ul a {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--c-text) !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid var(--c-border) !important;
  transition: all var(--t) !important;
  background-color: transparent !important;
}
nav#site-navigation li > .sub-menu li:last-child > a,
nav#site-navigation li > .dropdown-menu li:last-child > a,
.navbar-nav > li > .dropdown-menu li:last-child > a { border-bottom: none !important; }

nav#site-navigation li > .sub-menu li > a:hover,
nav#site-navigation li > .dropdown-menu li > a:hover,
.navbar-nav > li > .dropdown-menu li > a:hover,
.navbar-nav > li > .dropdown-menu li > a:focus,
.header-navigation ul ul a:hover {
  background-color: var(--c-primary-light) !important;
  color: var(--c-primary) !important;
}

/* ================================================================
   6. NAV MOBILE — overlay quand .header-navigation.open
   ================================================================ */
@media (max-width: 991px) {
  /* Le hamburger span */
  #hamburger-menu span { background-color: var(--c-dark) !important; }

  /* Quand le menu mobile est ouvert, Joblook ajoute .open à .header-navigation */
  .header-navigation.open {
    background-color: var(--c-white) !important;
    box-shadow: var(--s-lg) !important;
    border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
  }

  /* Sur mobile, les liens prennent toute la largeur */
  .header-navigation.open li a,
  .header-navigation.open #primary-menu > li > a {
    border-radius: var(--r-md) !important;
    padding: 10px 16px !important;
  }

  /* Fermer le menu — bouton close */
  .close-menu {
    font-family: var(--font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--c-white) !important;
    background-color: var(--c-dark) !important;
    border-radius: var(--r-md) !important;
    padding: 8px 14px !important;
    border: none !important;
  }
}

/* ================================================================
   7. BOUTON CTA HEADER
   ================================================================ */
.header-btn,
a.header-btn,
.header-btn.btn,
a.header-btn.btn {
  background-color: var(--c-primary) !important;
  color: var(--c-white) !important;
  border: 2px solid var(--c-primary) !important;
  border-radius: var(--r-full) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  box-shadow: var(--s-primary) !important;
  transition: all var(--t) !important;
}
.header-btn:hover,
a.header-btn:hover {
  background-color: var(--c-primary-dark) !important;
  border-color: var(--c-primary-dark) !important;
  color: var(--c-white) !important;
  transform: translateY(-1px) !important;
}
.header-btn svg { display: none !important; }

/* ================================================================
   8. BOUTONS GLOBAUX — couvre toutes les variantes Joblook
   Spécificité >= (0,3,1) pour battre le customizer Joblook
   NE PAS toucher : display, position, float
   ================================================================ */

/* Règle de base — fond bleu + texte blanc sur tous les boutons */
.btn,
a.btn,
button.btn,
input[type="submit"].btn,
.btn-default,
a.btn-default,
button.btn-default,
input[type="submit"].btn-default,
.btn-primary,
a.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  background-color: var(--c-primary) !important;
  background: var(--c-primary) !important;
  color: var(--c-white) !important;
  border: 2px solid var(--c-primary) !important;
  border-radius: var(--r-full) !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  box-shadow: var(--s-primary) !important;
  transition: all var(--t) !important;
  text-decoration: none !important;
}

/* Hover — bleu foncé */
.btn:hover,
a.btn:hover,
button.btn:hover,
.btn-default:hover,
a.btn-default:hover,
button.btn-default:hover,
.btn-primary:hover,
a.btn-primary:hover,
html input[type="button"]:hover,
input[type="submit"]:hover {
  background-color: var(--c-primary-dark) !important;
  background: var(--c-primary-dark) !important;
  border-color: var(--c-primary-dark) !important;
  color: var(--c-white) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(0,144,245,.38) !important;
}

/* Battre la spécificité (0,3,1) du customizer Joblook sur la hero */
.hero-section .btn,
.hero-section a.btn,
.hero-section a.btn.btn-default,
.hero-section button.btn-default,
[class*="section"] a.btn.btn-default,
[class*="section"] a.btn-default,
[class*="-section"] .btn-default {
  background-color: var(--c-primary) !important;
  background: var(--c-primary) !important;
  color: var(--c-white) !important;
  border-color: var(--c-primary) !important;
  border-radius: var(--r-full) !important;
  box-shadow: var(--s-primary) !important;
  font-weight: 600 !important;
}
.hero-section a.btn:hover,
.hero-section a.btn.btn-default:hover,
[class*="section"] a.btn.btn-default:hover {
  background-color: var(--c-primary-dark) !important;
  background: var(--c-primary-dark) !important;
  color: var(--c-white) !important;
  border-color: var(--c-primary-dark) !important;
}

/* Bouton outline/secondaire */
.btn-outline,
a.btn-outline,
.btn-secondary,
a.btn-secondary {
  background-color: transparent !important;
  background: transparent !important;
  color: var(--c-primary) !important;
  border: 2px solid var(--c-primary) !important;
  border-radius: var(--r-full) !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  transition: all var(--t) !important;
  box-shadow: none !important;
}
.btn-outline:hover, a.btn-outline:hover {
  background-color: var(--c-primary) !important;
  background: var(--c-primary) !important;
  color: var(--c-white) !important;
}

/* ================================================================
   9. ICÔNES SOCIALES DU HEADER
   ================================================================ */
.site-header .social-icons a,
header#masthead .social-icons a {
  color: var(--c-muted) !important;
  transition: color var(--t) !important;
}
.site-header .social-icons a:hover,
header#masthead .social-icons a:hover {
  color: var(--c-primary) !important;
}

/* ================================================================
   10. FICHES OFFRES — visuels uniquement
   ================================================================ */
.job_listings li.job_listing {
  background-color: var(--c-white) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--s-sm) !important;
  transition: box-shadow var(--t-lg), border-color var(--t-lg), transform var(--t-lg) !important;
}
.job_listings li.job_listing:hover {
  box-shadow: var(--s-md) !important;
  border-color: var(--c-primary-mid) !important;
  transform: translateY(-2px) !important;
}

/* Titre du poste */
.card-job-title,
.card-job-title a,
.position h3,
.job_listings h3 { color: var(--c-dark) !important; font-family: var(--font) !important; font-weight: 600 !important; }
.card-job-title a:hover { color: var(--c-primary) !important; }

/* Entreprise */
.position .company,
.position .company h3,
.position .company strong { color: var(--c-muted) !important; font-family: var(--font) !important; }

/* Logo entreprise */
.job_listings figure,
.job-listing-card figure {
  border-radius: var(--r-md) !important;
  border: 1px solid var(--c-border) !important;
  background-color: var(--c-bg) !important;
}

/* Localisation */
.location svg { fill: var(--c-muted) !important; }

/* Types de contrat */
li.job-type {
  font-family: var(--font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  border-radius: var(--r-full) !important;
  background-color: var(--c-primary-light) !important;
  color: var(--c-primary) !important;
}
li.job-type.full-time   { background-color: var(--c-success-light) !important; color: #065f46 !important; }
li.job-type.part-time   { background-color: var(--c-warning-light) !important; color: #92400e !important; }
li.job-type.freelance,
li.job-type.temporary   { background-color: var(--c-accent-light) !important;  color: #5b21b6 !important; }
li.job-type.internship  { background-color: var(--c-danger-light) !important;  color: #991b1b !important; }

/* Date */
.job-date { color: var(--c-muted) !important; font-family: var(--font) !important; font-size: 12px !important; }
.job-date svg { fill: var(--c-muted) !important; }

/* ================================================================
   11. FILTRES RECHERCHE D'OFFRES — design soft
   ================================================================ */

/* ── Carte conteneur — bien visible sur fond gris ────── */
form.job_filters,
.job_filters,
.job-manager-filter-wrap {
  background-color: var(--c-white) !important;
  border: 2px solid var(--c-border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: 0 4px 24px rgba(15,23,42,.10), 0 0 0 1px rgba(15,23,42,.04) !important;
  padding: 28px !important;
  margin-bottom: 32px !important;
}

/* ── Champs de saisie ────────────────────────────────── */
#search_keywords,
#search_location,
.job_filters input[type="text"],
.job_filters input[type="search"],
.job_filters select,
.job_filters .search_jobs input,
.job_filters .search_jobs select {
  font-family: var(--font) !important;
  font-size: 14px !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r-full) !important;
  background-color: var(--c-bg) !important;
  color: var(--c-text) !important;
  height: 46px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  transition: border-color var(--t), box-shadow var(--t) !important;
  box-shadow: none !important;
}
#search_keywords:focus,
#search_location:focus,
.job_filters input:focus,
.job_filters select:focus {
  border-color: var(--c-primary) !important;
  background-color: var(--c-white) !important;
  box-shadow: 0 0 0 3px rgba(0,144,245,.12) !important;
  outline: none !important;
}
/* Placeholder */
.job_filters input::placeholder { color: var(--c-muted) !important; font-size: 14px !important; }

/* ── Bouton Rechercher ───────────────────────────────── */
.job_filters .search_submit,
.job_filters button[type="submit"],
.job_filters input[type="submit"] {
  background-color: var(--c-primary) !important;
  background: var(--c-primary) !important;
  color: var(--c-white) !important;
  border: none !important;
  border-radius: var(--r-full) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  height: 46px !important;
  padding: 0 28px !important;
  box-shadow: var(--s-primary) !important;
  transition: all var(--t) !important;
  letter-spacing: .01em !important;
}
.job_filters .search_submit:hover,
.job_filters button[type="submit"]:hover {
  background-color: var(--c-primary-dark) !important;
  background: var(--c-primary-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 20px rgba(0,144,245,.35) !important;
}

/* ── Layout flexbox — remplace les float Joblook ─────── */
/* Rangée principale : flex wrap propre */
.job_filters .search_jobs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: flex-start !important;
  /* Annuler le clearfix Joblook */
  overflow: visible !important;
}
/* Reset floats sur tous les enfants */
.job_filters .search_jobs > div {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Rangée 1 — Mots-clés + Localisation (côte à côte, 50/50) */
.job_filters .search_jobs div.search_keywords {
  flex: 1 1 220px !important;
  width: auto !important;
}
.job_filters .search_jobs div.search_location {
  flex: 1 1 220px !important;
  width: auto !important;
}

/* Rangée 2 — Catégorie (pleine largeur) */
.job_filters .search_jobs div.search_categories {
  flex: 1 1 100% !important;
  width: 100% !important;
}

/* Rangée 3 — Within + Miles + Sort by (tiers chacun) + bouton */
.job_filters .search_jobs div.search_region,
.job_filters .search_jobs div.filter_first {
  flex: 1 1 140px !important;
  width: auto !important;
}
.job_filters .search_jobs div.search_submit {
  flex: 0 0 auto !important;
  width: auto !important;
  align-self: flex-end !important;
}
/* Bouton pleine hauteur sur rangée selects */
.job_filters .search_jobs div.search_submit button,
.job_filters .search_jobs div.search_submit input[type="submit"] {
  white-space: nowrap !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Télétravail — repositionner (était position: absolute) */
.job_filters .search_jobs div.search_remote_position {
  position: static !important;
  top: auto !important;
  right: auto !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  color: var(--c-text) !important;
  padding-top: 4px !important;
}
.job_filters .search_jobs div.search_remote_position input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--c-primary) !important;
  display: inline-block !important; /* rendre visible */
  opacity: 1 !important;
  position: static !important;
  pointer-events: auto !important;
}
.job_filters .search_jobs div.search_remote_position label {
  color: var(--c-text) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* ── Checkboxes types de contrat → pill toggles ──────── */
.job_filters ul.job_types {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  border-top: 1px solid var(--c-border) !important;
  padding-top: 16px !important;
}
.job_filters ul.job_types li {
  margin: 0 !important;
  padding: 0 !important;
}
.job_filters ul.job_types li label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: var(--r-full) !important;
  border: 1.5px solid var(--c-border) !important;
  background-color: var(--c-white) !important;
  color: var(--c-text) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all var(--t) !important;
  user-select: none !important;
}
.job_filters ul.job_types li label:hover {
  border-color: var(--c-primary) !important;
  color: var(--c-primary) !important;
  background-color: var(--c-primary-light) !important;
}
/* Cacher la checkbox native */
.job_filters ul.job_types li input[type="checkbox"] {
  display: none !important;
}
/* État coché — via :has() (Chrome 105+, Safari 15.4+, FF 121+) */
.job_filters ul.job_types li:has(input:checked) label {
  background-color: var(--c-primary-light) !important;
  border-color: var(--c-primary) !important;
  color: var(--c-primary) !important;
  font-weight: 600 !important;
}
.job_filters ul.job_types li.full-time:has(input:checked) label   { background: var(--c-success-light) !important; border-color: var(--c-success) !important; color: #065f46 !important; }
.job_filters ul.job_types li.part-time:has(input:checked) label   { background: var(--c-warning-light) !important; border-color: var(--c-warning) !important; color: #92400e !important; }
.job_filters ul.job_types li.freelance:has(input:checked) label,
.job_filters ul.job_types li.temporary:has(input:checked) label   { background: var(--c-accent-light)  !important; border-color: var(--c-accent)   !important; color: #5b21b6 !important; }
.job_filters ul.job_types li.internship:has(input:checked) label  { background: var(--c-danger-light)  !important; border-color: var(--c-danger)   !important; color: #991b1b !important; }

/* Icône checkmark dans le label (pseudo-élément) */
.job_filters ul.job_types li:has(input:checked) label::before {
  content: '✓' !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-right: 2px !important;
}

/* ── Filter by tag — badges doux ─────────────────────── */
.job_filters .filter-by-tag,
.job_filters p.filter-by-tag,
.job-filter-tags {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  color: var(--c-muted) !important;
  margin-top: 10px !important;
}
.job_filters .filter-by-tag a,
.job-filter-tags a,
a.job-filter-tag {
  display: inline-block !important;
  padding: 4px 12px !important;
  border-radius: var(--r-full) !important;
  background-color: var(--c-bg) !important;
  border: 1.5px solid var(--c-border) !important;
  color: var(--c-text) !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: all var(--t) !important;
  text-decoration: none !important;
}
.job_filters .filter-by-tag a:hover,
.job-filter-tags a:hover {
  background-color: var(--c-primary-light) !important;
  border-color: var(--c-primary) !important;
  color: var(--c-primary) !important;
}

/* ── Barre de résultats ──────────────────────────────── */
.job-manager-pagination,
.showing_jobs,
p.showing_jobs,
.job_listings .no_job_listings_found {
  font-family: var(--font) !important;
  font-size: 13px !important;
  color: var(--c-muted) !important;
}
/* "Recherche terminée. X résultats..." */
p.load_more_jobs_prompt,
.job_listings > p {
  font-family: var(--font) !important;
  font-size: 13px !important;
  color: var(--c-muted) !important;
}

/* Liens action (Ajouter une alerte / RSS / Réinitialiser) */
.job_filter_result > a,
.job_filters a.reset_filters,
a.reset_filters,
a[href*="reset"],
.job-alert-form a,
.job_filters .rss-link a {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--c-primary) !important;
  text-decoration: none !important;
  padding: 5px 10px !important;
  border-radius: var(--r-md) !important;
  transition: background var(--t), color var(--t) !important;
}
.job_filters a.reset_filters:hover,
a.reset_filters:hover {
  background-color: var(--c-primary-light) !important;
  color: var(--c-primary-dark) !important;
}

/* ================================================================
   12. FORMULAIRES GLOBAUX
   ================================================================ */
input[type="text"]:not(.search-field),
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
select,
textarea {
  font-family: var(--font) !important;
  font-size: 14px !important;
  color: var(--c-text) !important;
  background-color: var(--c-bg) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r-md) !important;
  transition: border-color var(--t), box-shadow var(--t) !important;
}
input[type="text"]:not(.search-field):focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--c-primary) !important;
  background-color: var(--c-white) !important;
  box-shadow: 0 0 0 3px rgba(0,144,245,.12) !important;
  outline: none !important;
}
label {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--c-dark) !important;
}

/* Chosen.js — base */
.chosen-container .chosen-single,
.chosen-container .chosen-drop {
  font-family: var(--font) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  background-color: var(--c-bg) !important;
  background-image: none !important;
  color: var(--c-text) !important;
}
.chosen-container-active .chosen-single {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px rgba(0,144,245,.12) !important;
}
.chosen-container .chosen-results li.highlighted {
  background-color: var(--c-primary) !important;
  background-image: none !important;
}

/* ── Catégorie : chosen pleine largeur + style pill ──────
   Problème : chosen.js injecte width inline → override nécessaire.
   Joblook supprime le border sur .chosen-with-drop : on cible l'état fermé. */
.job_filters .search_categories .chosen-container,
.job_filters .search_categories .chosen-container-single {
  width: 100% !important;
  display: block !important;
}
form.job_filters .search_categories .chosen-container-single .chosen-single {
  height: 46px !important;
  line-height: 46px !important;
  border: 1.5px solid var(--c-primary-mid) !important;
  border-radius: var(--r-full) !important;
  background: var(--c-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--c-text) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  padding: 0 40px 0 18px !important;
}
form.job_filters .search_categories .chosen-container-single .chosen-single span {
  line-height: 46px !important;
  color: var(--c-text) !important;
}
form.job_filters .search_categories .chosen-container-single .chosen-single div {
  top: 0 !important;
  height: 46px !important;
}

/* ── Localisation banner form : SVG absolument positionné ──
   HTML : .form-group > [svg.svg-icon] [input.form-control]
   Le SVG est inline → il chevauche visuellement le début du texte.
   On le fixe absolument et on compense avec padding-left. */
.banner-filter-wrapper .form-group {
  position: relative !important;
}
.banner-filter-wrapper .form-group svg.svg-icon {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  width: 18px !important;
  height: 18px !important;
  opacity: 0.55 !important;
}
.banner-filter-wrapper .form-group .form-control[type="text"] {
  padding-left: 38px !important;
}
/* Chosen de catégorie dans la barre banner */
.banner-filter-wrapper .form-group .chosen-container-single .chosen-single {
  padding-left: 38px !important;
  border: 1.5px solid var(--c-primary-mid) !important;
  background: var(--c-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ================================================================
   13. PAGE DÉTAIL OFFRE
   ================================================================ */
.single_job_listing .entry-title {
  color: var(--c-dark) !important;
  font-family: var(--font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
}

.job-manager-job-meta li strong { color: var(--c-muted) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: .06em !important; }
.job-manager-job-meta li span,
.job-manager-job-meta li a { color: var(--c-dark) !important; font-weight: 600 !important; }

/* Formulaire de candidature */
#apply_form,
.application_form {
  background-color: var(--c-white) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--s-sm) !important;
}

/* ================================================================
   14. SIDEBAR & WIDGETS
   ================================================================ */
.widget {
  background-color: var(--c-white) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--s-xs) !important;
}
.widget-title,
.widgettitle {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--c-dark) !important;
  border-bottom: 2px solid var(--c-primary-light) !important;
  padding-bottom: 10px !important;
}
.widget ul li a { color: var(--c-text) !important; font-family: var(--font) !important; }
.widget ul li a:hover { color: var(--c-primary) !important; }

/* ================================================================
   15. FOOTER
   ================================================================ */
#colophon,
.site-footer {
  background-color: var(--c-dark) !important;
  color: rgba(255,255,255,.65) !important;
}
.site-footer h3, .site-footer h4,
.site-footer .widget-title,
.site-footer .widgettitle {
  color: var(--c-white) !important;
  border-bottom-color: rgba(255,255,255,.1) !important;
}
.site-footer a { color: rgba(255,255,255,.65) !important; }
.site-footer a:hover { color: var(--c-white) !important; }
.site-footer .widget {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.site-footer p { color: rgba(255,255,255,.55) !important; }
.site-info {
  color: rgba(255,255,255,.35) !important;
  font-size: 12px !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* ================================================================
   16. PAGINATION
   ================================================================ */
.page-numbers {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--c-text) !important;
  background-color: var(--c-white) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: 50% !important;
  transition: all var(--t) !important;
}
.page-numbers.current,
.page-numbers:hover {
  background-color: var(--c-primary) !important;
  color: var(--c-white) !important;
  border-color: var(--c-primary) !important;
}
.page-numbers.dots { background-color: transparent !important; border: none !important; }

.load_more_jobs a {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  color: var(--c-primary) !important;
  border: 2px solid var(--c-primary) !important;
  border-radius: var(--r-full) !important;
  transition: all var(--t) !important;
}
.load_more_jobs a:hover {
  background-color: var(--c-primary) !important;
  color: var(--c-white) !important;
}

/* ================================================================
   17. BADGES ET NOTICES
   ================================================================ */
.job-manager-info {
  background-color: var(--c-primary-light) !important;
  border-left: 4px solid var(--c-primary) !important;
  border-radius: 0 var(--r-md) var(--r-md) 0 !important;
  color: var(--c-text) !important;
  font-family: var(--font) !important;
}
.job-manager-error {
  border-left-color: var(--c-danger) !important;
  background-color: var(--c-danger-light) !important;
}

/* ================================================================
   18. TEXTES PROBLÉMATIQUES — couleurs sur fond clair
   ================================================================ */

/* Texte blanc sur fond clair = invisible → forcer sombre (toutes variantes header) */
.header1 .header-navigation li > a,
.header2 .header-navigation li > a,
.header3 .header-navigation li > a,
.header4 .header-navigation li > a,
.header1 .navbar-nav li > a,
.header2 .navbar-nav li > a,
.header3 .navbar-nav li > a,
.header4 .navbar-nav li > a {
  color: var(--c-text) !important;
}

/* Dark header exception — texte blanc sur fond sombre = OK */
header#masthead.dark-header .header-navigation li > a,
header#masthead.dark-header .navbar-nav li > a {
  color: rgba(255,255,255,.85) !important;
}
header#masthead.dark-header .header-navigation li > a:hover,
header#masthead.dark-header .navbar-nav li > a:hover {
  color: var(--c-white) !important;
  background-color: rgba(255,255,255,.1) !important;
}
header#masthead.dark-header li.login-menu > a {
  background-color: var(--c-white) !important;
  color: var(--c-dark) !important;
  border-color: var(--c-white) !important;
}

/* Texte sur bg blanc dans les dropdowns */
.sub-menu a { color: var(--c-text) !important; }
.sub-menu a:hover { color: var(--c-primary) !important; }

/* Texte de blog/articles */
.entry-title a { color: var(--c-dark) !important; }
.entry-title a:hover { color: var(--c-primary) !important; }
.entry-meta, .entry-meta a { color: var(--c-muted) !important; }
.entry-content { color: var(--c-text) !important; font-family: var(--font) !important; }

/* ================================================================
   19. ALIGNER RECRUTIA AVEC LE DESIGN SYSTEM DU SITE
   ================================================================ */
.recrutia-app,
#rc-app {
  --rc-primary:       var(--c-primary);
  --rc-primary-dark:  var(--c-primary-dark);
  --rc-primary-light: var(--c-primary-light);
  --rc-accent:        var(--c-accent);
  --rc-success:       var(--c-success);
  --rc-warning:       var(--c-warning);
  --rc-danger:        var(--c-danger);
  --rc-bg:            var(--c-bg);
  --rc-border:        var(--c-border);
  --rc-muted:         var(--c-muted);
  --rc-text:          var(--c-text);
  --rc-dark:          var(--c-dark);
  --rc-radius:        var(--r-lg);
  --rc-shadow:        var(--s-md);
}

/* ================================================================
   20. HOMEPAGE — visuel amélioré
   ================================================================ */

/* ── Header Slider ─────────────────────────────────── */

/* Overlay plus sombre → meilleure lisibilité */
section#header-slider::before,
.header-slider::before,
.hero-section::before,
.banner-section::before,
.hero-wrap::before {
  background: rgba(0, 0, 0, 0.50) !important;
}

/* Titres slider → blanc avec ombre portée */
section#header-slider h1,
section#header-slider h2,
section#header-slider h4,
.header-slider .banner-wrap h1,
.header-slider .banner-wrap h4,
.hero-section h1, .hero-section h2,
.hero-section .banner-title,
.banner-section h1, .banner-section h2 {
  color: #ffffff !important;
  font-family: var(--font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  text-shadow: 0 3px 20px rgba(0,0,0,.40), 0 1px 4px rgba(0,0,0,.25) !important;
}

/* Sous-titres / paragraphes dans le slider */
section#header-slider p,
section#header-slider h4,
.header-slider .banner-wrap h4,
.hero-section p, .hero-section .banner-subtitle,
.banner-section p {
  color: rgba(255,255,255,.92) !important;
  font-family: var(--font) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.30) !important;
}

/* ── Slider controls — supprimer le "petit cadre" ─── */
/* Le .controls avec border visible devient transparent, icônes blancs */
.controls {
  background: transparent !important;
  border: none !important;
}
.controls .previous,
.controls .next,
.previous,
.next {
  border: none !important;
  background: rgba(255,255,255,.15) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  flex-basis: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  transition: background var(--t) !important;
  backdrop-filter: blur(4px) !important;
}
.controls .previous:hover,
.controls .next:hover,
.previous:hover,
.next:hover {
  background: rgba(255,255,255,.30) !important;
  color: #ffffff !important;
}
.controls .previous i,
.controls .next i,
.previous i, .next i {
  color: #ffffff !important;
}

/* Slick dots — style doux */
.slick-dots li button:before {
  color: rgba(255,255,255,.6) !important;
  font-size: 10px !important;
}
.slick-dots li.slick-active button:before {
  color: #ffffff !important;
}
.slick-dots {
  bottom: 20px !important;
}

/* Texte hero général (hors header-slider) */
.hero-section p,
.hero-section .banner-subtitle,
.banner-section p {
  color: rgba(255,255,255,.92) !important;
  font-family: var(--font) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.2) !important;
}

/* Section "Trusted by" */
.trusted-by-section,
.partner-section,
[class*="partner"],
[class*="trust"] {
  background-color: var(--c-bg) !important;
}
.trusted-by-section h2,
.trusted-by-section h3,
[class*="trust"] h2 {
  color: var(--c-dark) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  opacity: .5;
}

/* Jobs of the day — titres et section header */
.jobs-section h2,
.jobs-section .section-title,
[class*="job-section"] h2,
[class*="jobs-"] h2 {
  color: var(--c-dark) !important;
  font-family: var(--font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
}
.jobs-section .section-subtitle,
[class*="job-section"] p {
  color: var(--c-muted) !important;
  font-family: var(--font) !important;
}

/* Cards offres dans la homepage */
.job-listing-item,
.job-listing-card,
ul.job_listings .job_listing,
.jobs-sec .job-listing {
  background-color: var(--c-white) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--s-xs) !important;
  transition: box-shadow var(--t-lg), transform var(--t-lg), border-color var(--t-lg) !important;
}
.job-listing-item:hover,
.job-listing-card:hover,
ul.job_listings .job_listing:hover {
  box-shadow: var(--s-md) !important;
  border-color: var(--c-primary-mid) !important;
  transform: translateY(-2px) !important;
}

/* Section split Employers/Candidates — texte blanc sur image */
.register-section,
.split-section,
[class*="register-sec"],
[class*="employer-sec"],
[class*="candidate-sec"] {
  color: var(--c-white) !important;
}
.register-section h2,
.register-section h3,
.split-section h2,
.split-section h3,
[class*="register-sec"] h2,
[class*="register-sec"] h3 {
  color: #ffffff !important;
  font-family: var(--font) !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.register-section li,
.split-section li,
[class*="register-sec"] li {
  color: rgba(255,255,255,.92) !important;
  font-family: var(--font) !important;
}
.register-section li svg,
.register-section li i,
.split-section li i {
  color: var(--c-white) !important;
}

/* Top bar */
.top-header,
.header-top-bar,
.top-bar {
  background-color: var(--c-dark) !important;
  color: rgba(255,255,255,.75) !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
}
.top-header a,
.top-bar a { color: rgba(255,255,255,.75) !important; }
.top-header a:hover,
.top-bar a:hover { color: var(--c-white) !important; }

/* "Bonjour, simon" et user menu */
.user-header-link,
.user-menu-link,
.header-user-name,
a[class*="user-name"],
.bonjour-link {
  color: var(--c-primary) !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
}

/* Catégories jobs homepage */
.job-cat-wrap .single-job-cat,
.cat-item-wrap {
  background-color: var(--c-white) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--s-xs) !important;
  transition: all var(--t-lg) !important;
}
.job-cat-wrap .single-job-cat:hover {
  box-shadow: var(--s-md) !important;
  border-color: var(--c-primary-mid) !important;
  transform: translateY(-3px) !important;
}
/* Variant AVEC image → icône blanche sur overlay sombre */
.single-job-cat i { color: #ffffff !important; }
.single-job-cat svg path { fill: #ffffff !important; }

/* Variant SANS image — cercle bleu + icône blanche (Joblook: .job-cateory-without-image) */
.job-cateory-without-image .single-job-cat i {
  color: #ffffff !important;          /* icône blanche visible sur cercle bleu */
  background: var(--c-primary) !important;
  height: 48px !important;
  width: 48px !important;
  border-radius: 50% !important;
  line-height: 48px !important;
  font-size: 20px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}
/* Hover : inversion cercle blanc + icône bleue */
.job-cateory-without-image .single-job-cat:hover {
  background: var(--c-primary) !important;
}
.job-cateory-without-image .single-job-cat:hover h3,
.job-cateory-without-image .single-job-cat:hover span {
  color: #ffffff !important;
}
.job-cateory-without-image .single-job-cat:hover i {
  color: var(--c-primary) !important;
  background: #ffffff !important;
}
.job-cat-wrap .single-job-cat h3,
.job-cat-wrap .single-job-cat h4 {
  color: var(--c-dark) !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
}
.job-cat-wrap .single-job-cat p,
.job-cat-wrap .single-job-cat span {
  color: var(--c-muted) !important;
  font-family: var(--font) !important;
}

/* ================================================================
   21. ELEMENTOR — sections et boutons
   ================================================================ */

/* Inter sur tous les titres Elementor */
.elementor-heading-title {
  font-family: var(--font) !important;
  letter-spacing: -0.02em;
}
.elementor-widget-text-editor p,
.elementor-widget-text-editor li { font-family: var(--font) !important; line-height: 1.7; }

/* Boutons Elementor → design system bleu */
.elementor-button,
.elementor-button-wrapper .elementor-button,
a.elementor-button {
  background-color: var(--c-primary) !important;
  background: var(--c-primary) !important;
  color: #ffffff !important;
  border-color: var(--c-primary) !important;
  border-radius: var(--r-full) !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  box-shadow: var(--s-primary) !important;
  transition: all var(--t) !important;
}
.elementor-button:hover,
a.elementor-button:hover {
  background-color: var(--c-primary-dark) !important;
  background: var(--c-primary-dark) !important;
  border-color: var(--c-primary-dark) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* ================================================================
   22. CORRECTIFS COULEURS TEXTE GLOBAUX
   ================================================================ */

/* Contenu éditorial normal → couleur lisible */
.entry-content p, .entry-content li,
.page-content p, .page-content li {
  color: var(--c-text) !important;
  font-family: var(--font) !important;
}

/* Méta texte emplois */
.job-cat-title, .job-company, .job-location,
.date-time, .job-date, .company-name {
  color: var(--c-muted) !important;
  font-family: var(--font) !important;
}

/* Badges type de contrat */
.job-type { font-family: var(--font) !important; font-size: 11px !important; font-weight: 700 !important; border-radius: var(--r-full) !important; padding: 3px 10px !important; border: none !important; }
.job-type.full-time  { background: var(--c-success-light) !important; color: #065f46 !important; }
.job-type.part-time  { background: var(--c-warning-light) !important; color: #92400e !important; }
.job-type.freelance  { background: var(--c-accent-light)  !important; color: #5b21b6 !important; }
.job-type.internship { background: var(--c-danger-light)  !important; color: #991b1b !important; }

/* ================================================================
   23. BOUTONS DE PARTAGE SOCIAL (seo.php → recrutia_job_share_buttons)
   ================================================================ */
.recrutia-share {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 32px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--c-border) !important;
}
.recrutia-share__label {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--c-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  flex: 0 0 100% !important;
  margin-bottom: 4px !important;
}
.recrutia-share__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 8px 16px !important;
  border-radius: var(--r-full) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all var(--t) !important;
  min-height: 40px !important;
  border: 1.5px solid transparent !important;
}
.recrutia-share__btn svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
  flex-shrink: 0 !important;
}
.recrutia-share__btn--linkedin {
  background: #0a66c2 !important;
  color: #fff !important;
}
.recrutia-share__btn--linkedin:hover {
  background: #004182 !important;
  color: #fff !important;
}
.recrutia-share__btn--twitter {
  background: #000 !important;
  color: #fff !important;
}
.recrutia-share__btn--twitter:hover {
  background: #333 !important;
  color: #fff !important;
}
.recrutia-share__btn--facebook {
  background: #1877f2 !important;
  color: #fff !important;
}
.recrutia-share__btn--facebook:hover {
  background: #0d5fd6 !important;
  color: #fff !important;
}
.recrutia-share__btn--email {
  background: var(--c-bg) !important;
  color: var(--c-text) !important;
  border-color: var(--c-border) !important;
}
.recrutia-share__btn--email:hover {
  background: var(--c-primary-light) !important;
  border-color: var(--c-primary) !important;
  color: var(--c-primary) !important;
}

/* ================================================================
   24. RESPONSIVE — mobile-first corrections
   Joblook parent couvre les bases ; on affine ici les zones
   spécifiques au design Recrutia (form, banner, cartes, typo).
   ================================================================ */

/* ── Tablette paysage → 991px ────────────────────────────────── */
@media (max-width: 991px) {

  /* Formulaire banner : 2 colonnes → le padding-left Joblook est
     déjà géré dans media-queries.css ; on aligne l'input padding
     pour ne pas masquer les SVG absolus. */
  .banner-filter-wrapper .form-group .form-control[type="text"] {
    padding-left: 38px !important;
  }

  /* job_filters : les divs Joblook passent à 50% via float ;
     on maintient notre flexbox et on laisse flex-wrap gérer. */
  .job_filters .search_jobs {
    gap: 10px !important;
  }
  .job_filters .search_jobs div.search_keywords,
  .job_filters .search_jobs div.search_location {
    flex: 1 1 180px !important;
  }

  /* Bouton partage : réduire pour tablette */
  .recrutia-share__btn {
    font-size: 12px !important;
    padding: 7px 12px !important;
  }
}

/* ── Tablette portrait → 767px ───────────────────────────────── */
@media (max-width: 767px) {

  /* Formulaire recherche : tout en colonne */
  form.job_filters,
  .job-manager-filter-wrap {
    padding: 18px !important;
    border-radius: var(--r-lg) !important;
  }
  .job_filters .search_jobs {
    gap: 8px !important;
  }
  .job_filters .search_jobs div.search_keywords,
  .job_filters .search_jobs div.search_location,
  .job_filters .search_jobs div.search_region,
  .job_filters .search_jobs div.filter_first {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .job_filters .search_jobs div.search_submit {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .job_filters .search_submit button,
  .job_filters input[type="submit"] {
    width: 100% !important;
  }

  /* Banner form : les form-groups sont déjà 50% via Joblook ;
     on corrige les inputs pour qu'ils aient assez de padding. */
  .banner-filter-wrapper .form-group .form-control[type="text"] {
    font-size: 15px !important;
  }

  /* Typo responsive */
  .banner-wrap h1,
  #header-slider h1,
  .header-slider .banner-wrap h1 {
    font-size: clamp(24px, 6vw, 42px) !important;
  }
  .banner-wrap h4,
  .header-slider .banner-wrap h4 {
    font-size: clamp(14px, 4vw, 18px) !important;
  }

  /* Taille de touch target ≥ 44 px pour les boutons */
  .job_filters .search_submit button,
  .job_filters input[type="submit"],
  .btn, button {
    min-height: 44px !important;
  }

  /* Partage social : colonne sur petit écran */
  .recrutia-share {
    gap: 8px !important;
  }
  .recrutia-share__btn {
    flex: 1 1 calc(50% - 8px) !important;
    justify-content: center !important;
  }
}

/* ── Mobile → 480px ──────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Formulaire banner : form-groups 100% */
  .banner-filter-wrapper .form-group {
    width: 100% !important;
    float: none !important;
    margin: 0 0 6px !important;
    border-bottom: 1px solid var(--c-border) !important;
  }
  .banner-filter-wrapper .form-group:last-child {
    border-bottom: none !important;
  }
  .banner-search-input-wrap {
    border-radius: var(--r-lg) !important;
    padding: 12px !important;
  }

  /* Recherche job : padding réduit */
  form.job_filters,
  .job-manager-filter-wrap {
    padding: 14px !important;
  }
  .job_filters input[type="text"],
  .job_filters input[type="search"],
  #search_keywords,
  #search_location {
    font-size: 15px !important;
    height: 44px !important;
  }
  .job_filters .search_submit button,
  .job_filters input[type="submit"] {
    height: 44px !important;
  }

  /* Cartes offres : full-width avec moins de padding */
  ul.job_listings li.job_listing {
    padding: 12px !important;
  }

  /* Partage : tous en colonne */
  .recrutia-share__btn {
    flex: 1 1 100% !important;
  }

  /* Section hero : moins de padding */
  section#header-slider {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}

/* ================================================================
   25. BOUTON POSTULER — CARTES D'OFFRES D'EMPLOI
   ================================================================ */

/* ── Bouton partagé (liste + grille) ─────────────────────────── */
a.rc-postuler-btn,
.rc-postuler-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background-color: var(--c-primary) !important;
  color: var(--c-white) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 22px !important;
  border-radius: var(--r-full) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background var(--t), box-shadow var(--t) !important;
  box-shadow: 0 2px 8px rgba(79,70,229,.28) !important;
}
a.rc-postuler-btn:hover,
.rc-postuler-btn:hover {
  background-color: var(--c-primary-dark) !important;
  color: var(--c-white) !important;
  box-shadow: 0 4px 14px rgba(79,70,229,.38) !important;
  text-decoration: none !important;
}

/* ── Layout liste : position relative sur li pour ancrer le bouton ─
   On ne touche NI display NI float NI overflow — règle d'or respectée */
ul.job_listings li.job_listing {
  position: relative !important;
}

/* Bouton "Postuler" — ancré en bas à droite du <li>, hors du <a> */
.rc-postuler-wrap {
  position: absolute !important;
  bottom: 14px !important;
  right: 16px !important;
  z-index: 2 !important;
}

/* Espace en bas du lien pour ne pas être recouvert par le bouton */
ul.job_listings li.job_listing > a {
  padding-bottom: 48px !important;
}

/* ── Layout grille : bouton "Apply Now" / "Postuler" ─────────── */
.job-listing-card .job-data-right a.btn.rc-postuler-btn,
.job-listing-card .job-data-right a.btn-default {
  background-color: var(--c-primary) !important;
  color: var(--c-white) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: var(--r-full) !important;
  border: none !important;
  padding: 9px 22px !important;
  text-decoration: none !important;
  transition: background var(--t), box-shadow var(--t) !important;
  box-shadow: 0 2px 8px rgba(79,70,229,.25) !important;
}
.job-listing-card .job-data-right a.btn-default:hover {
  background-color: var(--c-primary-dark) !important;
  color: var(--c-white) !important;
}

/* ── Page offre unique : bouton "Postuler" natif WP Job Manager ─ */
.application .application_button,
a.application_button,
.job-manager-application-details a.button {
  background-color: var(--c-primary) !important;
  color: var(--c-white) !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  border-radius: var(--r-full) !important;
  padding: 12px 32px !important;
  border: none !important;
  text-decoration: none !important;
  transition: background var(--t) !important;
}
.application .application_button:hover,
a.application_button:hover {
  background-color: var(--c-primary-dark) !important;
  color: var(--c-white) !important;
}

/* ================================================================
   25b. SECTION NEWSLETTER
   ================================================================ */

/* Conteneur principal — overflow visible à tous les niveaux (Elementor + Bootstrap) */
.section.newsletter-sec,
.section.newsletter-sec .row,
.section.newsletter-sec .elementor-column,
.section.newsletter-sec .elementor-widget-wrap,
.section.newsletter-sec .elementor-widget-container,
.section.newsletter-sec [class*="elementor-col-"],
.section.newsletter-sec .col-md-6,
.section.newsletter-sec .col-md-4,
.section.newsletter-sec .col-md-8 {
  overflow: visible !important;
}
.section.newsletter-sec .row {
  align-items: center !important;
}

/* Colonne formulaire — flex pour aligner input + bouton sur une ligne */
.section.newsletter-sec form,
.section.newsletter-sec .mc4wp-form-fields {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
}

/* Input email */
.section.newsletter-sec form input[type="email"],
.section.newsletter-sec .mc4wp-form-fields input[type="email"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 12px 18px !important;
  border-radius: var(--r-full) !important;
  border: 2px solid rgba(255,255,255,.35) !important;
  background: rgba(255,255,255,.15) !important;
  color: var(--c-white) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  text-align: left !important;
  outline: none !important;
}
.section.newsletter-sec .mc4wp-form-fields input[type="email"]::placeholder {
  color: rgba(255,255,255,.65) !important;
}

/* Bouton S'inscrire — flex-shrink:0 pour ne jamais être coupé */
.section.newsletter-sec form input[type="submit"],
.section.newsletter-sec .mc4wp-form-fields input[type="submit"],
.section.newsletter-sec form button[type="submit"] {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  background-color: var(--c-white) !important;
  color: var(--c-primary) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 12px 28px !important;
  border-radius: var(--r-full) !important;
  border: none !important;
  cursor: pointer !important;
  transition: background var(--t), box-shadow var(--t) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.15) !important;
}
.section.newsletter-sec form input[type="submit"]:hover {
  background-color: var(--c-primary-light) !important;
  color: var(--c-primary-dark) !important;
}

/* Titres et texte newsletter */
.section.newsletter-sec h2.newsletter-title {
  font-family: var(--font) !important;
  font-size: clamp(20px, 2.5vw, 28px) !important;
  font-weight: 700 !important;
  color: var(--c-white) !important;
}
.section.newsletter-sec p {
  font-family: var(--font) !important;
  color: rgba(255,255,255,.85) !important;
  font-size: 14px !important;
}

/* ================================================================
   26. PAGES RECRUTEMENT : PLEINE LARGEUR SANS SIDEBAR BLOG
   ================================================================ */

/*
 * Masquer la sidebar et ses widgets sur les pages WP Job Manager.
 * On cible #secondary (WordPress standard) et toutes les variantes
 * que Joblook peut générer. Seule exception : les sidebars footer/header
 * qui sont gérées différemment.
 */
body.recrutia-fullwidth #secondary,
body.recrutia-fullwidth .widget-area:not(.footer-widget-area):not(.header-widget-area),
body.recrutia-fullwidth aside.sidebar,
body.recrutia-fullwidth .sidebar-area,
body.recrutia-fullwidth .joblook-sidebar {
  display: none !important;
}

/*
 * Étendre la zone de contenu principal à toute la largeur disponible.
 * On ne touche pas float ni position — on étend width uniquement,
 * ce qui est suffisant pour les layouts float ET flexbox.
 */
body.recrutia-fullwidth #primary,
body.recrutia-fullwidth .content-area,
body.recrutia-fullwidth main#main {
  width: 100% !important;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Retirer le padding/margin latéral du conteneur parent si nécessaire */
body.recrutia-fullwidth #content,
body.recrutia-fullwidth .site-content {
  max-width: var(--container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* ── Mise en forme du formulaire submit_resume / dépôt CV ──────── */

/* Titre de page */
body.recrutia-fullwidth .entry-title,
body.recrutia-fullwidth h1.page-title {
  font-size: clamp(22px, 3vw, 30px) !important;
  font-weight: 700 !important;
  color: var(--c-dark) !important;
  margin-bottom: 24px !important;
  text-align: center !important;
}

/* Carte conteneur du formulaire */
body.recrutia-fullwidth .site-main > article,
body.recrutia-fullwidth .site-main > .hentry {
  background: var(--c-white) !important;
  border: 1.5px solid var(--c-border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--s-md) !important;
  padding: 32px 36px !important;
  margin-bottom: 32px !important;
}

/* Labels du formulaire WP Job Manager */
body.recrutia-fullwidth .fieldset-submit_resume label,
body.recrutia-fullwidth .job-manager-form fieldset label,
body.recrutia-fullwidth form.submit-resume-form label {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--c-dark) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Bouton soumettre */
body.recrutia-fullwidth input[type="submit"],
body.recrutia-fullwidth button[type="submit"],
body.recrutia-fullwidth .job-manager-form input[type="submit"] {
  background-color: var(--c-primary) !important;
  color: var(--c-white) !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 12px 32px !important;
  cursor: pointer !important;
  transition: background var(--t), box-shadow var(--t) !important;
  box-shadow: var(--s-sm) !important;
}
body.recrutia-fullwidth input[type="submit"]:hover,
body.recrutia-fullwidth button[type="submit"]:hover {
  background-color: var(--c-primary-dark) !important;
  box-shadow: var(--s-md) !important;
}

/* Steps / étapes du formulaire multi-pages */
body.recrutia-fullwidth .job-manager-form .steps,
body.recrutia-fullwidth .job-manager-form ol.steps {
  display: flex !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin-bottom: 24px !important;
  border-bottom: 2px solid var(--c-border) !important;
  padding-bottom: 16px !important;
}
body.recrutia-fullwidth .job-manager-form .steps li {
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--c-muted) !important;
  padding: 4px 14px !important;
  border-radius: var(--r-full) !important;
}
body.recrutia-fullwidth .job-manager-form .steps li.active {
  background-color: var(--c-primary-light) !important;
  color: var(--c-primary) !important;
}

/* Message "connectez-vous pour déposer un CV" */
body.recrutia-fullwidth .job-manager-info,
body.recrutia-fullwidth p.job-manager-info {
  background: var(--c-primary-light) !important;
  border-left: 4px solid var(--c-primary) !important;
  border-radius: var(--r-md) !important;
  padding: 12px 16px !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  color: var(--c-text) !important;
}

/* ================================================================
   26. MASQUER TOUTE RÉFÉRENCE À WORDPRESS
   ================================================================ */

/* Liens vers wordpress.org dans le footer */
.site-info a[href*="wordpress.org"],
.site-footer a[href*="wordpress.org"],
.joblook-credit a[href*="wordpress.org"],
#colophon a[href*="wordpress.org"],
a[href*="wordpress.org"].powered-by {
  display: none !important;
}

/* Si Joblook génère un bloc credit entier */
.joblook-credit,
.joblook-powered,
.site-credits,
.wp-credit {
  display: none !important;
}

/* ================================================================
   27. ARTICLES BLOG — styles embarqués extraits des fichiers HTML
   Préfixes : .postdy-int  .postdy-afr  .postdy-article  .postdy-pro
   ================================================================ */

/* ── Article : Guide Entretien 2026 (.postdy-int) ─────────────── */
.postdy-int {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  max-width: 860px;
  margin: 0 auto;
  color: #1F2937;
  line-height: 1.7;
  font-size: 17px;
}
.postdy-int * { box-sizing: border-box; }
.postdy-int-hero {
  background: linear-gradient(135deg, #0F766E 0%, #4F46E5 50%, #7C3AED 100%);
  padding: 60px 40px;
  border-radius: 24px;
  color: white;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}
.postdy-int-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 350px;
  height: 350px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
}
.postdy-int-badge {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.postdy-int-hero h1 {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 20px 0;
  color: white;
  position: relative;
  z-index: 1;
}
.postdy-int-hero p {
  font-size: 19px;
  opacity: 0.95;
  margin: 0;
  position: relative;
  z-index: 1;
  color: white;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.postdy-int-toc {
  background: #F0FDFA;
  border: 2px solid #99F6E4;
  border-radius: 16px;
  padding: 28px;
  margin: 30px 0 40px 0;
}
.postdy-int-toc h3 {
  color: #0F766E;
  font-size: 18px;
  margin: 0 0 16px 0;
  font-weight: 700;
}
.postdy-int-toc ol {
  margin: 0;
  padding-left: 24px;
  columns: 2;
  column-gap: 30px;
}
.postdy-int-toc li {
  padding: 4px 0;
  font-size: 15px;
  break-inside: avoid;
}
.postdy-int-toc a { color: #0F766E; text-decoration: none; font-weight: 500; }
.postdy-int-toc a:hover { text-decoration: underline; }
.postdy-int-intro {
  font-size: 19px;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 40px;
  padding: 30px;
  background: linear-gradient(135deg, #ECFEFF 0%, #F0F9FF 100%);
  border-left: 4px solid #0891B2;
  border-radius: 0 12px 12px 0;
}
.postdy-int-title {
  font-size: 30px;
  font-weight: 800;
  color: #1F2937;
  margin: 50px 0 24px 0;
  line-height: 1.3;
}
.postdy-int-title span {
  background: linear-gradient(120deg, #0F766E 0%, #7C3AED 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.postdy-int-subtitle {
  font-size: 22px;
  font-weight: 700;
  color: #1F2937;
  margin: 30px 0 16px 0;
}
.postdy-int p { margin: 0 0 20px 0; color: #374151; }
.postdy-int-formats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 30px 0;
}
.postdy-int-format {
  border-radius: 16px;
  padding: 24px;
  color: white;
}
.postdy-int-format-1 { background: linear-gradient(135deg, #0F766E 0%, #14B8A6 100%); }
.postdy-int-format-2 { background: linear-gradient(135deg, #4F46E5 0%, #6366F1 100%); }
.postdy-int-format-3 { background: linear-gradient(135deg, #7C3AED 0%, #A78BFA 100%); }
.postdy-int-format h3 { font-size: 18px; font-weight: 700; margin: 0 0 12px 0; color: white; }
.postdy-int-format p { font-size: 14px; margin: 0; color: white; opacity: 0.95; line-height: 1.5; }
.postdy-int-format-icon { font-size: 32px; margin-bottom: 8px; display: block; }
.postdy-int-star {
  background: linear-gradient(135deg, #FEF3C7 0%, #FFFBEB 100%);
  border-radius: 20px;
  padding: 32px;
  margin: 30px 0;
  border: 2px solid #FCD34D;
}
.postdy-int-star-title { font-size: 22px; font-weight: 800; color: #92400E; margin: 0 0 20px 0; text-align: center; }
.postdy-int-star-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}
.postdy-int-star-letter {
  background: white;
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(146,64,14,0.1);
}
.postdy-int-star-letter-big {
  font-size: 42px;
  font-weight: 800;
  background: linear-gradient(135deg, #F59E0B 0%, #DC2626 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 6px;
}
.postdy-int-star-word { font-size: 13px; font-weight: 700; color: #92400E; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.postdy-int-star-desc { font-size: 13px; color: #6B7280; line-height: 1.4; }
.postdy-int-question {
  background: white;
  border: 1px solid #E5E7EB;
  border-left: 4px solid #0891B2;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
  transition: all 0.3s;
}
.postdy-int-question:hover { border-left-color: #7C3AED; box-shadow: 0 4px 16px rgba(124,58,237,0.1); }
.postdy-int-question h4 { font-size: 17px; font-weight: 700; color: #0F766E; margin: 0 0 10px 0; }
.postdy-int-question p { font-size: 15px; color: #4B5563; margin: 0; line-height: 1.6; }
.postdy-int-question .tip {
  display: inline-block;
  background: #F0FDFA;
  color: #0F766E;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 10px;
}
.postdy-int-checklist {
  background: white;
  border: 2px solid #14B8A6;
  border-radius: 16px;
  padding: 28px;
  margin: 30px 0;
}
.postdy-int-checklist h3 { color: #0F766E; font-size: 20px; margin: 0 0 16px 0; font-weight: 700; }
.postdy-int-checklist ul { list-style: none; margin: 0; padding: 0; }
.postdy-int-checklist li {
  padding: 8px 0 8px 32px;
  font-size: 15px;
  color: #374151;
  position: relative;
  line-height: 1.5;
}
.postdy-int-checklist li::before { content: '☐'; position: absolute; left: 0; color: #14B8A6; font-size: 20px; font-weight: 700; }
.postdy-int-tip {
  background: #FEF3C7;
  border-left: 4px solid #F59E0B;
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  margin: 24px 0;
}
.postdy-int-tip strong { color: #92400E; display: block; margin-bottom: 6px; }
.postdy-int-tip p { margin: 0; color: #78350F; font-size: 15px; }
.postdy-int-warning {
  background: #FEF2F2;
  border-left: 4px solid #DC2626;
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  margin: 24px 0;
}
.postdy-int-warning strong { color: #991B1B; display: block; margin-bottom: 6px; }
.postdy-int-warning p { margin: 0; color: #7F1D1D; font-size: 15px; }
.postdy-int-mistakes {
  background: #FEF2F2;
  border-radius: 16px;
  padding: 28px;
  margin: 30px 0;
}
.postdy-int-mistakes h3 { color: #991B1B; font-size: 20px; margin: 0 0 16px 0; }
.postdy-int-mistakes ul { list-style: none; margin: 0; padding: 0; }
.postdy-int-mistakes li { padding: 8px 0 8px 32px; font-size: 15px; color: #7F1D1D; position: relative; }
.postdy-int-mistakes li::before { content: '✖'; position: absolute; left: 0; color: #DC2626; font-weight: 700; }
.postdy-int-summary {
  background: linear-gradient(135deg, #0F766E 0%, #4F46E5 100%);
  border-radius: 20px;
  padding: 32px;
  margin: 40px 0;
  color: white;
}
.postdy-int-summary h3 { font-size: 22px; margin: 0 0 16px 0; color: white; }
.postdy-int-summary p { color: white; opacity: 0.95; margin: 0; }
.postdy-int-cta {
  background: linear-gradient(135deg, #0F766E 0%, #7C3AED 100%);
  border-radius: 24px;
  padding: 50px 40px;
  text-align: center;
  margin: 50px 0;
  color: white;
}
.postdy-int-cta h2 { font-size: 32px; font-weight: 800; margin: 0 0 16px 0; color: white; }
.postdy-int-cta p { font-size: 18px; opacity: 0.95; margin: 0 0 30px 0; color: white; }
.postdy-int-cta-button {
  display: inline-block;
  background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
  color: white !important;
  padding: 18px 40px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(245,158,11,0.4);
}
.postdy-int-cta-secondary {
  display: inline-block;
  margin-top: 16px;
  color: rgba(255,255,255,0.8) !important;
  text-decoration: underline;
  font-size: 15px;
}
.postdy-int-divider { height: 1px; background: linear-gradient(90deg, transparent, #D1D5DB, transparent); margin: 50px 0; border: none; }
.postdy-int-highlight { background: linear-gradient(120deg, #FEF3C7 0%, #FEF3C7 100%); padding: 2px 6px; font-weight: 600; color: #92400E; }
@media (max-width: 768px) {
  .postdy-int-hero { padding: 40px 24px; }
  .postdy-int-hero h1 { font-size: 26px; }
  .postdy-int-hero p { font-size: 16px; }
  .postdy-int-title { font-size: 24px; }
  .postdy-int-cta { padding: 40px 24px; }
  .postdy-int-cta h2 { font-size: 24px; }
  .postdy-int-intro { padding: 20px; font-size: 16px; }
  .postdy-int-toc ol { columns: 1; }
  .postdy-int-star { padding: 24px 20px; }
  .postdy-int-star-letter-big { font-size: 32px; }
}

/* ── Article : Afrique Francophone (.postdy-afr) ──────────────── */
.postdy-afr {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  max-width: 860px;
  margin: 0 auto;
  color: #1F2937;
  line-height: 1.7;
  font-size: 17px;
}
.postdy-afr * { box-sizing: border-box; }
.postdy-afr-hero {
  background: linear-gradient(135deg, #4F46E5 0%, #DC2626 50%, #F59E0B 100%);
  padding: 60px 40px;
  border-radius: 24px;
  color: white;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}
.postdy-afr-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -15%;
  width: 380px;
  height: 380px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
}
.postdy-afr-hero::after {
  content: '☀️';
  position: absolute;
  top: 30px;
  right: 40px;
  font-size: 60px;
  opacity: 0.3;
}
.postdy-afr-badge {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.postdy-afr-hero h1 {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 20px 0;
  color: white;
  position: relative;
  z-index: 1;
}
.postdy-afr-hero p {
  font-size: 19px;
  opacity: 0.95;
  margin: 0;
  position: relative;
  z-index: 1;
  color: white;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.postdy-afr-intro {
  font-size: 19px;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 40px;
  padding: 30px;
  background: linear-gradient(135deg, #FEF3C7 0%, #FFFBEB 100%);
  border-left: 4px solid #F59E0B;
  border-radius: 0 12px 12px 0;
}
.postdy-afr-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin: 40px 0;
}
.postdy-afr-stat {
  background: linear-gradient(135deg, #1E3A8A 0%, #DC2626 100%);
  color: white;
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
}
.postdy-afr-stat-number {
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #FCD34D 0%, #FBBF24 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.postdy-afr-stat-label { font-size: 14px; opacity: 0.95; color: white; line-height: 1.4; }
.postdy-afr-title {
  font-size: 30px;
  font-weight: 800;
  color: #1F2937;
  margin: 50px 0 24px 0;
  line-height: 1.3;
}
.postdy-afr-title span {
  background: linear-gradient(120deg, #DC2626 0%, #F59E0B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.postdy-afr p { margin: 0 0 20px 0; color: #374151; }
.postdy-afr-countries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 30px 0;
}
.postdy-afr-country {
  background: white;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #E5E7EB;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}
.postdy-afr-country:hover { transform: translateY(-4px); box-shadow: 0 15px 35px rgba(220,38,38,0.15); border-color: #F59E0B; }
.postdy-afr-country-flag { font-size: 38px; margin-bottom: 8px; display: block; }
.postdy-afr-country h3 { font-size: 19px; font-weight: 700; color: #1F2937; margin: 0 0 10px 0; }
.postdy-afr-country-tag {
  display: inline-block;
  background: #FEF3C7;
  color: #92400E;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
}
.postdy-afr-country p { font-size: 14px; color: #6B7280; margin: 0; line-height: 1.6; }
.postdy-afr-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 30px 0;
}
.postdy-afr-block { border-radius: 20px; padding: 30px; position: relative; overflow: hidden; }
.postdy-afr-block-candidate { background: linear-gradient(135deg, #DBEAFE 0%, #EFF6FF 100%); border: 2px solid #93C5FD; }
.postdy-afr-block-recruiter { background: linear-gradient(135deg, #FED7AA 0%, #FFEDD5 100%); border: 2px solid #FB923C; }
.postdy-afr-block h3 { font-size: 22px; font-weight: 800; margin: 0 0 12px 0; display: flex; align-items: center; gap: 10px; }
.postdy-afr-block-candidate h3 { color: #1E40AF; }
.postdy-afr-block-recruiter h3 { color: #9A3412; }
.postdy-afr-block ul { margin: 16px 0 0 0; padding-left: 20px; list-style: none; }
.postdy-afr-block li { padding: 6px 0; font-size: 15px; position: relative; padding-left: 24px; color: #374151; }
.postdy-afr-block-candidate li::before { content: '✓'; color: #1E40AF; position: absolute; left: 0; font-weight: 700; }
.postdy-afr-block-recruiter li::before { content: '★'; color: #9A3412; position: absolute; left: 0; font-weight: 700; }
.postdy-afr-spotlight {
  background: linear-gradient(135deg, #1E1B4B 0%, #7C2D12 100%);
  color: white;
  border-radius: 20px;
  padding: 40px;
  margin: 40px 0;
  position: relative;
  overflow: hidden;
}
.postdy-afr-spotlight h3 { font-size: 26px; font-weight: 800; margin: 0 0 16px 0; color: white; }
.postdy-afr-spotlight p { color: white; opacity: 0.95; margin: 0 0 16px 0; }
.postdy-afr-spotlight p:last-child { margin-bottom: 0; }
.postdy-afr-challenges {
  background: #FEF2F2;
  border-radius: 16px;
  padding: 30px;
  margin: 30px 0;
  border-left: 4px solid #DC2626;
}
.postdy-afr-challenges h3 { color: #991B1B; font-size: 20px; margin: 0 0 12px 0; }
.postdy-afr-challenges p { color: #7F1D1D; margin: 0 0 12px 0; }
.postdy-afr-cta {
  background: linear-gradient(135deg, #DC2626 0%, #F59E0B 100%);
  border-radius: 24px;
  padding: 50px 40px;
  text-align: center;
  margin: 50px 0;
  color: white;
}
.postdy-afr-cta h2 { font-size: 32px; font-weight: 800; margin: 0 0 16px 0; color: white; }
.postdy-afr-cta p { font-size: 18px; opacity: 0.95; margin: 0 0 30px 0; color: white; }
.postdy-afr-cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.postdy-afr-cta-primary {
  display: inline-block;
  background: white;
  color: #DC2626 !important;
  padding: 18px 36px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.postdy-afr-cta-secondary {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  color: white !important;
  padding: 18px 36px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,0.4);
}
.postdy-afr-divider { height: 1px; background: linear-gradient(90deg, transparent, #FBBF24, transparent); margin: 50px 0; border: none; }
.postdy-afr-highlight { background: linear-gradient(120deg, #FEF3C7 0%, #FEF3C7 100%); padding: 2px 6px; font-weight: 600; color: #92400E; }
@media (max-width: 768px) {
  .postdy-afr-hero { padding: 40px 24px; }
  .postdy-afr-hero h1 { font-size: 28px; }
  .postdy-afr-hero p { font-size: 16px; }
  .postdy-afr-title { font-size: 24px; }
  .postdy-afr-cta { padding: 40px 24px; }
  .postdy-afr-cta h2 { font-size: 24px; }
  .postdy-afr-intro { padding: 20px; font-size: 16px; }
  .postdy-afr-dual { grid-template-columns: 1fr; }
  .postdy-afr-stat-number { font-size: 30px; }
  .postdy-afr-cta-buttons { flex-direction: column; }
  .postdy-afr-spotlight { padding: 28px 24px; }
}

/* ── Article : Candidats / Job Postdy (.postdy-article) ──────── */
.postdy-article {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  max-width: 860px;
  margin: 0 auto;
  color: #1F2937;
  line-height: 1.7;
  font-size: 17px;
}
.postdy-article * { box-sizing: border-box; }
.postdy-hero {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
  padding: 60px 40px;
  border-radius: 24px;
  color: white;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}
.postdy-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
}
.postdy-hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 250px;
  height: 250px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}
.postdy-hero-badge {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.postdy-hero h1 {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 20px 0;
  color: white;
  position: relative;
  z-index: 1;
}
.postdy-hero p {
  font-size: 19px;
  opacity: 0.95;
  margin: 0;
  position: relative;
  z-index: 1;
  color: white;
}
.postdy-intro {
  font-size: 19px;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 40px;
  padding: 30px;
  background: #FAFBFF;
  border-left: 4px solid #6366F1;
  border-radius: 0 12px 12px 0;
}
.postdy-section-title {
  font-size: 30px;
  font-weight: 800;
  color: #1F2937;
  margin: 50px 0 24px 0;
  line-height: 1.3;
}
.postdy-section-title span {
  background: linear-gradient(120deg, #6366F1 0%, #EC4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.postdy-article p { margin: 0 0 20px 0; color: #374151; }
.postdy-faq-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 30px 0; }
.postdy-faq-card {
  background: white;
  border: 2px solid #E5E7EB;
  border-radius: 16px;
  padding: 28px;
  transition: all 0.3s;
}
.postdy-faq-card:hover { border-color: #6366F1; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(99,102,241,0.15); }
.postdy-faq-question {
  font-weight: 700;
  color: #6366F1;
  font-size: 18px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.postdy-faq-question::before {
  content: '?';
  background: #6366F1;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
}
.postdy-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 30px 0;
}
.postdy-benefit-card {
  background: linear-gradient(135deg, #FFFFFF 0%, #FAFBFF 100%);
  border-radius: 16px;
  padding: 28px;
  border: 1px solid #E5E7EB;
  position: relative;
  overflow: hidden;
}
.postdy-benefit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #6366F1, #EC4899);
}
.postdy-benefit-icon { font-size: 36px; margin-bottom: 12px; display: block; }
.postdy-benefit-card h3 { font-size: 18px; font-weight: 700; color: #1F2937; margin: 0 0 10px 0; }
.postdy-benefit-card p { font-size: 15px; color: #6B7280; margin: 0; line-height: 1.6; }
.postdy-tips-list { list-style: none; padding: 0; margin: 30px 0; }
.postdy-tips-list li {
  background: #FEF3C7;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 14px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.postdy-tips-list li::before { content: '💡'; font-size: 24px; flex-shrink: 0; }
.postdy-tips-list strong { color: #92400E; display: block; margin-bottom: 4px; }
.postdy-cta {
  background: linear-gradient(135deg, #1E1B4B 0%, #4C1D95 100%);
  border-radius: 24px;
  padding: 50px 40px;
  text-align: center;
  margin: 50px 0;
  color: white;
}
.postdy-cta h2 { font-size: 32px; font-weight: 800; margin: 0 0 16px 0; color: white; }
.postdy-cta p { font-size: 18px; opacity: 0.9; margin: 0 0 30px 0; color: white; }
.postdy-cta-button {
  display: inline-block;
  background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
  color: white !important;
  padding: 18px 40px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(245,158,11,0.4);
  transition: transform 0.2s;
}
.postdy-cta-button:hover { transform: translateY(-3px); }
.postdy-cta-secondary { display: inline-block; margin-top: 16px; color: rgba(255,255,255,0.8) !important; text-decoration: underline; font-size: 15px; }
.postdy-highlight { background: linear-gradient(120deg, transparent 0%, #FEF3C7 0%, #FEF3C7 100%, transparent 100%); padding: 2px 6px; font-weight: 600; }
.postdy-quote {
  border-left: 4px solid #EC4899;
  padding: 20px 30px;
  margin: 30px 0;
  background: #FDF2F8;
  border-radius: 0 16px 16px 0;
  font-style: italic;
  color: #831843;
  font-size: 19px;
}
.postdy-divider { height: 1px; background: linear-gradient(90deg, transparent, #D1D5DB, transparent); margin: 50px 0; border: none; }
@media (max-width: 768px) {
  .postdy-hero { padding: 40px 24px; }
  .postdy-hero h1 { font-size: 30px; }
  .postdy-hero p { font-size: 17px; }
  .postdy-section-title { font-size: 24px; }
  .postdy-cta { padding: 40px 24px; }
  .postdy-cta h2 { font-size: 24px; }
  .postdy-intro { padding: 20px; font-size: 17px; }
}

/* ── Article : Recruteurs (.postdy-pro) ──────────────────────── */
.postdy-pro {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  max-width: 860px;
  margin: 0 auto;
  color: #1F2937;
  line-height: 1.7;
  font-size: 17px;
}
.postdy-pro * { box-sizing: border-box; }
.postdy-pro-hero {
  background: linear-gradient(135deg, #1E3A8A 0%, #4F46E5 50%, #0891B2 100%);
  padding: 60px 40px;
  border-radius: 24px;
  color: white;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}
.postdy-pro-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 350px;
  height: 350px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}
.postdy-pro-hero::after {
  content: '';
  position: absolute;
  bottom: -40%;
  left: -10%;
  width: 280px;
  height: 280px;
  background: rgba(255,255,255,0.06);
  border-radius: 50%;
}
.postdy-pro-badge {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.postdy-pro-hero h1 {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 20px 0;
  color: white;
  position: relative;
  z-index: 1;
}
.postdy-pro-hero p {
  font-size: 19px;
  opacity: 0.95;
  margin: 0 0 30px 0;
  position: relative;
  z-index: 1;
  color: white;
}
.postdy-pro-hero-cta {
  display: inline-block;
  background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
  color: white !important;
  padding: 16px 36px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(245,158,11,0.4);
  position: relative;
  z-index: 1;
}
.postdy-pro-intro {
  font-size: 19px;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 40px;
  padding: 30px;
  background: #F0F9FF;
  border-left: 4px solid #0891B2;
  border-radius: 0 12px 12px 0;
}
.postdy-pro-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin: 40px 0;
}
.postdy-pro-stat {
  background: linear-gradient(135deg, #1E3A8A 0%, #4F46E5 100%);
  color: white;
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
}
.postdy-pro-stat-number {
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.postdy-pro-stat-label { font-size: 14px; opacity: 0.95; color: white; }
.postdy-pro-title {
  font-size: 30px;
  font-weight: 800;
  color: #1F2937;
  margin: 50px 0 24px 0;
  line-height: 1.3;
}
.postdy-pro-title span {
  background: linear-gradient(120deg, #4F46E5 0%, #0891B2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.postdy-pro p { margin: 0 0 20px 0; color: #374151; }
.postdy-pro-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0; }
.postdy-pro-before, .postdy-pro-after { border-radius: 16px; padding: 28px; }
.postdy-pro-before { background: #FEF2F2; border: 2px solid #FECACA; }
.postdy-pro-after { background: #ECFDF5; border: 2px solid #A7F3D0; }
.postdy-pro-compare h3 { font-size: 18px; font-weight: 700; margin: 0 0 16px 0; display: flex; align-items: center; gap: 10px; }
.postdy-pro-before h3 { color: #991B1B; }
.postdy-pro-after h3 { color: #065F46; }
.postdy-pro-compare ul { margin: 0; padding-left: 20px; list-style: none; }
.postdy-pro-compare li { padding: 6px 0; font-size: 15px; position: relative; padding-left: 24px; }
.postdy-pro-before li::before { content: '✖'; color: #DC2626; position: absolute; left: 0; font-weight: 700; }
.postdy-pro-after li::before { content: '✓'; color: #059669; position: absolute; left: 0; font-weight: 700; }
.postdy-pro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 30px 0;
}
.postdy-pro-card {
  background: linear-gradient(135deg, #FFFFFF 0%, #F0F9FF 100%);
  border-radius: 16px;
  padding: 28px;
  border: 1px solid #E5E7EB;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}
.postdy-pro-card:hover { transform: translateY(-4px); box-shadow: 0 15px 35px rgba(79,70,229,0.15); }
.postdy-pro-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #4F46E5, #0891B2); }
.postdy-pro-card-icon { font-size: 36px; margin-bottom: 12px; display: block; }
.postdy-pro-card h3 { font-size: 18px; font-weight: 700; color: #1F2937; margin: 0 0 10px 0; }
.postdy-pro-card p { font-size: 15px; color: #6B7280; margin: 0; line-height: 1.6; }
.postdy-pro-steps { margin: 30px 0; }
.postdy-pro-step {
  display: flex;
  gap: 20px;
  padding: 24px;
  background: white;
  border-radius: 16px;
  margin-bottom: 16px;
  border: 1px solid #E5E7EB;
  align-items: flex-start;
}
.postdy-pro-step-number {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #4F46E5 0%, #0891B2 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 20px;
}
.postdy-pro-step h4 { font-size: 17px; font-weight: 700; color: #1F2937; margin: 0 0 6px 0; }
.postdy-pro-step p { font-size: 15px; color: #6B7280; margin: 0; }
.postdy-pro-trust {
  background: linear-gradient(135deg, #ECFDF5 0%, #F0F9FF 100%);
  border-radius: 16px;
  padding: 32px;
  margin: 40px 0;
  border: 2px solid #A7F3D0;
}
.postdy-pro-trust h3 { font-size: 22px; font-weight: 700; color: #065F46; margin: 0 0 16px 0; display: flex; align-items: center; gap: 12px; }
.postdy-pro-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.postdy-pro-trust-item { background: white; padding: 16px; border-radius: 12px; font-size: 15px; }
.postdy-pro-trust-item strong { display: block; color: #065F46; margin-bottom: 4px; }
.postdy-pro-cta {
  background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%);
  border-radius: 24px;
  padding: 50px 40px;
  text-align: center;
  margin: 50px 0;
  color: white;
  position: relative;
  overflow: hidden;
}
.postdy-pro-cta h2 { font-size: 32px; font-weight: 800; margin: 0 0 16px 0; color: white; }
.postdy-pro-cta p { font-size: 18px; opacity: 0.9; margin: 0 0 30px 0; color: white; }
.postdy-pro-cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.postdy-pro-cta-primary {
  display: inline-block;
  background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
  color: white !important;
  padding: 18px 36px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(245,158,11,0.4);
}
.postdy-pro-cta-secondary {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  color: white !important;
  padding: 18px 36px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,0.3);
}
.postdy-pro-quote {
  border-left: 4px solid #0891B2;
  padding: 24px 30px;
  margin: 30px 0;
  background: #F0F9FF;
  border-radius: 0 16px 16px 0;
  font-style: italic;
  color: #0E7490;
  font-size: 19px;
}
.postdy-pro-highlight { background: linear-gradient(120deg, #FEF3C7 0%, #FEF3C7 100%); padding: 2px 6px; font-weight: 600; color: #92400E; }
.postdy-pro-divider { height: 1px; background: linear-gradient(90deg, transparent, #D1D5DB, transparent); margin: 50px 0; border: none; }
@media (max-width: 768px) {
  .postdy-pro-hero { padding: 40px 24px; }
  .postdy-pro-hero h1 { font-size: 28px; }
  .postdy-pro-hero p { font-size: 16px; }
  .postdy-pro-title { font-size: 24px; }
  .postdy-pro-cta { padding: 40px 24px; }
  .postdy-pro-cta h2 { font-size: 24px; }
  .postdy-pro-intro { padding: 20px; font-size: 16px; }
  .postdy-pro-compare { grid-template-columns: 1fr; }
  .postdy-pro-stat-number { font-size: 32px; }
  .postdy-pro-cta-buttons { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
   28. PRICING — Shortcode [recrutia_pricing]
   ═══════════════════════════════════════════════════════════════ */

.rc-pricing {
  padding: 48px 0 64px;
  font-family: 'Inter', sans-serif;
  /* Full-bleed : sort du wrapper article du thème quel que soit sa largeur */
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  box-sizing: border-box;
  background: #f8fafc;
}

/* ── Intro ── */
.rc-pricing__intro {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 44px;
  padding: 0 16px;
}
.rc-pricing__title {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 800;
  color: #111827;
  margin: 0 0 12px;
  line-height: 1.2;
}
.rc-pricing__desc {
  font-size: 15px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

.rc-pricing__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: stretch;
}

/* ── Card ── */
.rc-pricing__card {
  background: #fff;
  border-radius: 20px;
  border: 2px solid #e5e7eb;
  padding: 32px 24px 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}

.rc-pricing__card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,.10);
  transform: translateY(-4px);
}

.rc-pricing__card::before {
  content: '';
  display: block;
  height: 4px;
  background: var(--rc-plan-color, #0090f5);
  border-radius: 4px 4px 0 0;
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  border-radius: 18px 18px 0 0;
}

/* ── Card highlight ── */
.rc-pricing__card--highlight {
  border-color: var(--rc-plan-color, #7c3aed);
  box-shadow: 0 8px 32px rgba(124,58,237,.15);
}

.rc-pricing__card--highlight:hover {
  box-shadow: 0 16px 48px rgba(124,58,237,.22);
}

/* ── Badge "Recommandé" ── */
.rc-pricing__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rc-plan-color, #7c3aed);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 99px;
  white-space: nowrap;
}

/* ── Header ── */
.rc-pricing__header {
  text-align: center;
  margin-bottom: 20px;
}

.rc-pricing__icon {
  font-size: 28px;
  margin-bottom: 10px;
  color: var(--rc-plan-color, #0090f5);
  line-height: 1;
}

.rc-pricing__name {
  font-size: 22px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 6px;
}

.rc-pricing__subtitle {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}

/* ── Prix ── */
.rc-pricing__price {
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.rc-pricing__amount {
  font-size: 42px;
  font-weight: 900;
  color: #111827;
  line-height: 1;
}

.rc-pricing__period {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  letter-spacing: .01em;
}

/* ── Features ── */
.rc-pricing__features {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rc-pricing__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: #374151;
  line-height: 1.4;
}

.rc-pricing__check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--rc-plan-color, #0090f5);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* ── CTA ── */
.rc-pricing__footer {
  margin-top: 24px;
}

.rc-pricing__cta {
  display: block;
  text-align: center;
  padding: 13px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background .18s, color .18s, box-shadow .18s;
  background: #f3f4f6;
  color: #374151;
  border: 2px solid #e5e7eb;
}

.rc-pricing__cta:hover {
  background: #e5e7eb;
  color: #111827;
  text-decoration: none;
}

.rc-pricing__cta--primary {
  background: var(--rc-plan-color, #7c3aed);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(124,58,237,.30);
}

.rc-pricing__cta--primary:hover {
  opacity: .88;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* ── Note bas de page ── */
.rc-pricing__note {
  max-width: 900px;
  margin: 36px auto 0;
  padding: 0 24px;
  text-align: center;
  font-size: 12.5px;
  color: #9ca3af;
  line-height: 1.7;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .rc-pricing__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .rc-pricing__grid {
    grid-template-columns: 1fr;
  }
  .rc-pricing__amount {
    font-size: 32px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   29. NEUTRALISATION anciens packages WP Job Manager Paid Listings
       Les classes ci-dessous proviennent de Joblook Premium / WPJM Paid Listings.
       Elles sont masquées car le shortcode [job_packages] est maintenant
       overridé pour afficher [recrutia_pricing] à la place.
   ═══════════════════════════════════════════════════════════════ */

/* Masque le bloc d'anciens packages si le shortcode n'est pas overridé
   (ex : widget ou zone non interceptée). */
.job-manager-packages:empty,
.joblook-packages-wrap:empty {
  display: none;
}

/* Si les anciens packages s'affichent quand même, on les rend présentables
   avec nos couleurs (fallback de sécurité). */
.joblook-packages-wrap .package,
.job-manager-packages .job-package {
  border-radius: 16px;
  border: 2px solid #e5e7eb;
  font-family: 'Inter', sans-serif;
}

.joblook-packages-wrap .package.featured,
.job-manager-packages .job-package.featured {
  border-color: var(--rc-primary, #0090f5);
  box-shadow: 0 8px 32px rgba(0,144,245,.15);
}

/* Bouton achat ancien system → style Recrutia */
.joblook-packages-wrap .package a.button,
.job-manager-packages .job-package a.button {
  background: var(--rc-primary, #0090f5) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  border: none !important;
  transition: background .18s !important;
}

.joblook-packages-wrap .package a.button:hover,
.job-manager-packages .job-package a.button:hover {
  background: #0070c0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   30. PAGE FORFAITS — ajustements visuels [recrutia_pricing]
   ═══════════════════════════════════════════════════════════════ */

/* Fond page */
body.recrutia-fullwidth { background: #f8fafc; }

/* Supprime le cadre blanc / padding / bordure du wrapper article */
body.recrutia-fullwidth article,
body.recrutia-fullwidth .entry-content,
body.recrutia-fullwidth .site-content article,
body.recrutia-fullwidth .hentry {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 100% !important;
}

/* Élargit la zone de contenu sur les pages fullwidth.
   NB : on ne touche PAS .container — il est utilisé par le header, le footer
   et les pages WP Job Manager (candidatures, formulaires) qui ont besoin de
   leurs paddings Bootstrap normaux. Le recrutia-app a son propre wrapper. */
body.recrutia-fullwidth .site-main,
body.recrutia-fullwidth #main,
body.recrutia-fullwidth .content-area {
  max-width: 100% !important;
  width: 100% !important;
}

/* Masque le titre H1 WordPress (le shortcode a son propre titre) */
body.recrutia-fullwidth .entry-title,
body.recrutia-fullwidth .page-title {
  display: none !important;
}

/* Compatibilité :has() pour navigateurs modernes */
.page:has(.rc-pricing) .entry-title,
.page:has(.rc-pricing) .page-title { display: none !important; }

/* ── Bloc "solution sur mesure" ── */
.rc-pricing__custom {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 860px;
  margin: 40px auto 0;
  padding: 24px 32px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  flex-wrap: wrap;
}
.rc-pricing__custom-icon {
  font-size: 36px;
  flex-shrink: 0;
}
.rc-pricing__custom-content {
  flex: 1;
  min-width: 200px;
}
.rc-pricing__custom-content h3 {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px;
}
.rc-pricing__custom-content p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}
.rc-pricing__custom-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 24px;
  background: #111827;
  color: #fff !important;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .18s;
  flex-shrink: 0;
}
.rc-pricing__custom-cta:hover {
  background: #374151;
}
@media (max-width: 640px) {
  .rc-pricing__custom {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
  .rc-pricing__custom-cta { width: 100%; justify-content: center; }
}