/* ==========================================================================
   REKRUFY — FRONT THEME
   Design system public — reproduction fidèle de Welcome to the Jungle
   Jaune signature #FFCD00 · texte noir massif · cards post-it inclinées
   Bootstrap 5.3 overrides + composants brandés Rekrufy
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
  /* === COULEURS WTTJ === */
  --rek-yellow: #FFCD00;           /* Jaune signature — hero, accents */
  --rek-yellow-light: #FFF4CC;     /* Jaune pâle — bandeaux, cards post-it */
  --rek-yellow-hover: #F2C200;
  --rek-black: #1A1A1A;            /* Noir — texte, boutons */
  --rek-white: #FFFFFF;

  /* === COULEURS POST-IT (cards illustratives) === */
  --postit-yellow: #FFF4CC;
  --postit-purple: #E6E1FF;
  --postit-green:  #DFF5E1;
  --postit-blue:   #DCEBFF;
  --postit-pink:   #FFE1EC;

  /* === ACCENTS REKRUFY === */
  --rek-accent: #4F46E5;           /* Indigo — liens, CTA secondaires */
  --rek-accent-hover: #4338CA;
  --rek-success: #16A34A;
  --rek-danger: #DC2626;
  --rek-warning: #F59E0B;
  --rek-info: #3B82F6;

  /* === FONDS === */
  --rek-bg: #FFFFFF;
  --rek-bg-light: #F7F7F5;         /* Gris très léger — sections alternées */
  --rek-bg-dark: #1A1A1A;          /* Footer */
  --rek-border: #E5E5E2;
  --rek-border-light: #F0F0EE;

  /* === TEXTE === */
  --rek-text: #1A1A1A;
  --rek-text-secondary: #5A5A5A;
  --rek-text-muted: #8E8E8E;

  /* === BADGES RÉCOMPENSE (signature Rekrufy) === */
  --badge-500: #16A34A;            /* Vert — 500 MAD */
  --badge-1000: #4F46E5;           /* Indigo — 1000 MAD */
  --badge-1500: #8B5CF6;           /* Violet — 1500 MAD */

  /* === SCORING === */
  --score-high: #16A34A;           /* 80%+ */
  --score-mid:  #3B82F6;           /* 60-79% */
  --score-avg:  #F59E0B;           /* 40-59% */
  --score-low:  #DC2626;           /* <40% */

  /* === OMBRES === */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-postit: 0 8px 24px rgba(0,0,0,0.10);
  --shadow-hover: 0 14px 32px rgba(0,0,0,0.14);
  --shadow-focus: 0 0 0 4px rgba(26,26,26,0.12);

  /* === RAYONS === */
  --radius-sm: 8px;
  --radius: 10px;
  --radius-card: 14px;
  --radius-lg: 16px;
  --radius-pill: 100px;

  /* === TRANSITIONS === */
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

  /* === ESPACEMENT SECTIONS === */
  --section-py: 100px;

  /* === BOOTSTRAP OVERRIDES === */
  --bs-primary: #1A1A1A;
  --bs-primary-rgb: 26, 26, 26;
  --bs-body-color: #1A1A1A;
  --bs-body-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-border-radius: 10px;
  --bs-link-color: #4F46E5;
  --bs-link-hover-color: #4338CA;
}

@media (max-width: 768px) {
  :root { --section-py: 56px; }
}

/* ==========================================================================
   2. BASE & TYPOGRAPHIE
   ========================================================================== */
* { box-sizing: border-box; }

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--rek-text);
  background: var(--rek-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--rek-text);
  line-height: 1.15;
  margin-top: 0;
}

/* Titres massifs façon WTTJ */
.display-hero {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
h1, .h1 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
h2, .h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.15; }
h3, .h3 { font-size: 1.4rem; font-weight: 700; }
h4, .h4 { font-size: 1.2rem; font-weight: 700; }
h5, .h5 { font-size: 1.05rem; font-weight: 600; }

.lead { font-size: 1.15rem; font-weight: 400; color: var(--rek-text-secondary); }

a { color: var(--rek-accent); text-decoration: none; transition: var(--transition-fast); }
a:hover { color: var(--rek-accent-hover); }

/* Utilitaires texte */
.text-secondary-rek { color: var(--rek-text-secondary) !important; }
.text-muted-rek { color: var(--rek-text-muted) !important; }
.text-yellow { color: var(--rek-yellow) !important; }
.text-accent { color: var(--rek-accent) !important; }
.text-black-rek { color: var(--rek-black) !important; }

/* Utilitaires fond */
.bg-yellow { background-color: var(--rek-yellow) !important; }
.bg-yellow-light { background-color: var(--rek-yellow-light) !important; }
.bg-light-rek { background-color: var(--rek-bg-light) !important; }
.bg-dark-rek { background-color: var(--rek-bg-dark) !important; }

/* Sections */
.section { padding-top: var(--section-py); padding-bottom: var(--section-py); }
.section-sm { padding-top: calc(var(--section-py) * 0.55); padding-bottom: calc(var(--section-py) * 0.55); }

/* Eyebrow / surtitre */
.section-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   3. BOUTONS
   ========================================================================== */
.btn {
  font-weight: 600;
  border-radius: var(--radius);
  padding: 0.75rem 1.75rem;
  transition: var(--transition);
  line-height: 1.4;
  border: none;
}
.btn:focus, .btn:focus-visible { box-shadow: var(--shadow-focus); outline: none; }
.btn-lg { padding: 0.9rem 2.25rem; font-size: 1.0625rem; }
.btn-sm { padding: 0.45rem 1.1rem; font-size: 0.875rem; }

/* Noir — bouton principal */
.btn-dark-rek {
  background: var(--rek-black);
  color: #fff;
}
.btn-dark-rek:hover,
.btn-dark-rek:focus {
  background: var(--rek-yellow);
  color: var(--rek-black);
  border-color: var(--rek-yellow);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255,205,0,0.45);
}
.btn-dark-rek:active { transform: translateY(0); }

/* Jaune — bouton accent */
.btn-yellow-rek {
  background: var(--rek-yellow);
  color: var(--rek-black);
}
.btn-yellow-rek:hover,
.btn-yellow-rek:focus {
  background: var(--rek-yellow-hover);
  color: var(--rek-black);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255,205,0,0.45);
}
.btn-yellow-rek:active { transform: translateY(0); }

/* Outline noir — bouton secondaire */
.btn-outline-dark-rek {
  background: transparent;
  color: var(--rek-black);
  border: 2px solid var(--rek-black);
  padding: calc(0.75rem - 2px) calc(1.75rem - 2px);
}
.btn-outline-dark-rek:hover,
.btn-outline-dark-rek:focus {
  background: var(--rek-yellow);
  color: var(--rek-black);
  border-color: var(--rek-yellow);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255,205,0,0.45);
}
.btn-outline-dark-rek.btn-lg { padding: calc(0.9rem - 2px) calc(2.25rem - 2px); }
.btn-outline-dark-rek.btn-sm { padding: calc(0.45rem - 2px) calc(1.1rem - 2px); }

/* Ghost / lien */
.btn-ghost {
  background: transparent;
  color: var(--rek-text-secondary);
}
.btn-ghost:hover { color: var(--rek-black); background: var(--rek-bg-light); }

.btn i { font-size: 0.95em; }

/* ==========================================================================
   4. CARDS POST-IT (le composant signature WTTJ)
   ========================================================================== */
.postit {
  background: var(--postit-yellow);
  border-radius: var(--radius-card);
  padding: 28px;
  box-shadow: var(--shadow-postit);
  position: relative;
  transition: var(--transition);
}
.postit--yellow { background: var(--postit-yellow); }
.postit--purple { background: var(--postit-purple); }
.postit--green  { background: var(--postit-green); }
.postit--blue   { background: var(--postit-blue); }
.postit--pink   { background: var(--postit-pink); }
.postit--white  { background: #fff; }

/* Inclinaisons légères */
.postit--tilt-left  { transform: rotate(-2deg); }
.postit--tilt-right { transform: rotate(2.5deg); }
.postit--tilt-sm    { transform: rotate(-1.2deg); }
.postit:hover { transform: rotate(0deg) translateY(-4px); box-shadow: var(--shadow-hover); }

/* Texture quadrillée optionnelle */
.postit--grid {
  background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Composition de post-its superposés (hero) */
.postit-stack { position: relative; }
.postit-stack .postit { position: relative; }
.postit-stack .postit-float {
  position: absolute;   /* spécificité (0,2,0), placée après .postit-stack .postit → gagne */
  z-index: 3;
  box-shadow: var(--shadow-postit);
}

/* ==========================================================================
   5. CARDS
   ========================================================================== */
.card {
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: var(--transition);
  background: #fff;
  overflow: hidden;
}
.card-hover:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.card-body { padding: 1.5rem; }

/* ----- CARD OFFRE (signature Rekrufy) ----- */
.job-card { display: flex; flex-direction: column; height: 100%; border-radius: var(--radius-card); cursor: pointer; }
.job-card .job-card-media { position: relative; }
.job-card .job-card-media-img { overflow: hidden; border-radius: var(--radius-card) var(--radius-card) 0 0; display: block; }
.job-card .job-card-media img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.job-card:hover .job-card-media img { transform: scale(1.05); }
.job-card .job-card-body { padding: 1.25rem 1.35rem 1.4rem; flex: 1 1 auto; }
.job-card .job-card-title { font-size: 1.125rem; font-weight: 700; color: var(--rek-black); margin-bottom: 0.2rem; line-height: 1.3; }
.job-card .job-card-company { font-size: 0.9375rem; font-weight: 500; color: var(--rek-text-secondary); margin-bottom: 0.75rem; }
.job-card .job-card-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; font-size: 0.8125rem; color: var(--rek-text-secondary); margin-bottom: 0.65rem; }
.job-card .job-card-meta i { color: var(--rek-text-muted); margin-right: 0.2rem; }
.job-card .job-card-date { font-size: 0.8125rem; color: var(--rek-text-muted); display: inline-flex; align-items: center; gap: 0.25rem; }

/* Logo entreprise en overlay (clic → vitrine) */
.job-card .job-card-logo {
  position: absolute; left: 0.85rem; bottom: -18px; z-index: 3;
  width: 46px; height: 46px; border-radius: 12px; background: #fff;
  box-shadow: var(--shadow-card); padding: 5px; display: inline-flex;
  align-items: center; justify-content: center; transition: var(--transition-fast);
}
.job-card .job-card-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.job-card .job-card-logo:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.job-card .job-card-media { position: relative; }
.job-card .job-card-body { padding-top: 1.6rem; } /* place pour le logo overlay */

/* Footer de card : date (gauche) + Suivre (droite) */
.job-card .job-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.85rem 1.35rem 1.1rem; border-top: 1px solid var(--rek-border-light); margin-top: auto;
}

/* ----- CARD ENTREPRISE ----- */
.company-card { height: 100%; border-radius: var(--radius-card); cursor: pointer; }
.company-card .company-card-media { position: relative; }
.company-card .company-card-media img:not(.company-logo) { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.4s ease; }
.company-card:hover .company-card-media img:not(.company-logo) { transform: scale(1.05); }
/* Couverture sobre (repli sans photo) + nom en blanc */
.company-card .company-card-media .company-cover-fallback {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 16 / 10; padding: 1.1rem 1.25rem 1.6rem;
  text-align: center; text-decoration: none;
  background-image: linear-gradient(160deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
}
.company-cover-name {
  color: #fff; font-weight: 800; font-size: 1.1rem; line-height: 1.3;
  letter-spacing: .2px; text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.company-card .company-card-media img.company-logo {
  position: absolute; left: 1rem; bottom: -22px;
  width: 56px; height: 56px; border-radius: 14px;
  background: #fff; box-shadow: var(--shadow-card); padding: 6px;
  object-fit: contain; aspect-ratio: auto; opacity: 1;
}
.company-card .company-card-media .company-logo--initials {
  position: absolute; left: 1rem; bottom: -22px;
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--rek-yellow); color: var(--rek-black);
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.15rem; letter-spacing: .5px;
}
.company-card .company-card-body { padding: 2rem 1.35rem 1.4rem; }
.company-card .company-card-title { font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.35rem; }
.company-card .company-card-meta { font-size: 0.8125rem; color: var(--rek-text-secondary); }
.company-card .company-card-footer {
  border-top: 1px solid var(--rek-border-light);
  margin-top: 1rem; padding-top: 0.9rem;
  display: flex; align-items: center; justify-content: space-between;
}

/* ----- CARD ARTICLE ----- */
.article-card { height: 100%; border-radius: var(--radius-card); cursor: pointer; }
.article-card .article-card-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.4s ease; }
.article-card:hover .article-card-media img { transform: scale(1.04); }
.article-card .article-card-body { padding: 1.25rem 1.35rem 1.4rem; }
.article-card .article-card-title {
  font-size: 1.0625rem; font-weight: 700; line-height: 1.35; margin: 0.6rem 0 0.9rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.article-card .article-card-author { display: flex; align-items: center; gap: 0.55rem; font-size: 0.8125rem; color: var(--rek-text-secondary); }
.article-card .article-card-author img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }

/* ==========================================================================
   6. BADGES & TAGS
   ========================================================================== */
.badge { font-weight: 600; border-radius: var(--radius-pill); padding: 0.4rem 0.85rem; font-size: 0.78125rem; }

/* Tags pastel */
.tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.78125rem; font-weight: 500;
  padding: 0.32rem 0.7rem; border-radius: var(--radius-pill);
  background: var(--rek-bg-light); color: var(--rek-text-secondary);
  border: 1px solid var(--rek-border-light);
}
.tag-blue   { background:#DCEBFF; color:#1D4ED8; border-color:#C7DBFB; }
.tag-green  { background:#DFF5E1; color:#15803D; border-color:#C8EECC; }
.tag-purple { background:#E6E1FF; color:#6D28D9; border-color:#D6CEFB; }
.tag-orange { background:#FFE8CC; color:#C2410C; border-color:#FBD9AE; }
.tag-pink   { background:#FFE1EC; color:#BE185D; border-color:#FBCBDC; }
.tag-yellow { background:#FFF4CC; color:#9A7B00; border-color:#F7E7A6; }
.tag-gray   { background:#F0F0EE; color:#5A5A5A; border-color:#E5E5E2; }

/* Badges doux statuts */
.badge-soft-primary { background: var(--rek-yellow-light); color: #9A7B00; }
.badge-soft-success { background:#DFF5E1; color:#15803D; }
.badge-soft-warning { background:#FFF4CC; color:#92400E; }
.badge-soft-danger  { background:#FDE2E2; color:#B91C1C; }

/* ----- BADGE RÉCOMPENSE (LA signature Rekrufy) ----- */
.reward-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 700; font-size: 0.875rem; color: #fff;
  padding: 0.45rem 0.85rem; border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px rgba(0,0,0,0.22); white-space: nowrap;
}
.reward-badge i { font-size: 0.9em; }
.reward-badge.reward-500  { background: linear-gradient(135deg, #16A34A, #15803D); }
.reward-badge.reward-1000 { background: linear-gradient(135deg, #4F46E5, #4338CA); }
.reward-badge.reward-1500 { background: linear-gradient(135deg, #8B5CF6, #7C3AED); }

.reward-badge-overlay { position: absolute; top: 0.85rem; right: 0.85rem; z-index: 2; }

/* ==========================================================================
   7. SCORE DE COMPATIBILITÉ
   ========================================================================== */
.score-circle {
  --score-size: 56px;
  --score-value: 0;
  --score-color: var(--rek-accent);
  width: var(--score-size); height: var(--score-size);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  background: conic-gradient(var(--score-color) calc(var(--score-value) * 1%), var(--rek-border-light) 0);
  flex: 0 0 auto;
}
.score-circle::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.score-circle .score-value {
  position: relative; z-index: 1; font-weight: 700;
  font-size: calc(var(--score-size) * 0.28); color: var(--score-color); line-height: 1;
}
.score-circle .score-value small { font-size: 0.6em; font-weight: 600; }

.score-sm { --score-size: 44px; }
.score-md { --score-size: 56px; }
.score-lg { --score-size: 120px; }
.score-lg .score-value { font-size: 2rem; }
.score-lg::before { inset: 9px; }

.score-high { --score-color: var(--score-high); }
.score-mid  { --score-color: var(--score-mid); }
.score-avg  { --score-color: var(--score-avg); }
.score-low  { --score-color: var(--score-low); }

.score-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rek-text-muted); }

/* ==========================================================================
   8. ONGLETS HORIZONTAUX (pills)
   ========================================================================== */
.pill-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill-tab {
  font-size: 0.9375rem; font-weight: 600;
  padding: 0.5rem 1.15rem; border-radius: var(--radius-pill);
  background: transparent; color: var(--rek-text-secondary);
  border: 1.5px solid transparent; cursor: pointer; transition: var(--transition-fast);
}
.pill-tab:hover { color: var(--rek-black); background: var(--rek-bg-light); }
.pill-tab.active {
  background: var(--rek-black); color: #fff; border-color: var(--rek-black);
}

/* ==========================================================================
   9. FORMULAIRES & RECHERCHE
   ========================================================================== */
.form-label { font-weight: 600; font-size: 0.875rem; color: var(--rek-text); margin-bottom: 0.4rem; }
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--rek-border);
  padding: 0.7rem 1rem; font-size: 0.9375rem; color: var(--rek-text);
  transition: var(--transition-fast);
}
.form-control::placeholder { color: var(--rek-text-muted); }
.form-control:focus, .form-select:focus {
  border-color: var(--rek-black);
  box-shadow: var(--shadow-focus);
}
.form-control-lg { padding: 0.9rem 1.15rem; font-size: 1.0625rem; }

.input-icon { position: relative; }
.input-icon .form-control { padding-left: 2.85rem; }
.input-icon i { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--rek-text-muted); pointer-events: none; }

/* ----- BARRE DE RECHERCHE (hero) ----- */
.search-pill {
  display: flex; align-items: center;
  background: #fff; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-postit);
  padding: 0.4rem 0.4rem 0.4rem 1.5rem; gap: 0.5rem; max-width: 640px;
}
.search-pill i.search-icon { color: var(--rek-text-muted); font-size: 1.05rem; }
.search-pill input {
  border: none; outline: none; flex: 1 1 auto; font-size: 1rem;
  padding: 0.6rem 0.4rem; background: transparent; color: var(--rek-text);
}
.search-pill .btn { border-radius: var(--radius-pill); white-space: nowrap; }

.form-check-input:checked { background-color: var(--rek-black); border-color: var(--rek-black); }
.form-check-input:focus { box-shadow: var(--shadow-focus); }

/* ==========================================================================
   10. ALERTES & BANDEAU NOTIF
   ========================================================================== */
.alert { border: none; border-radius: var(--radius); padding: 1rem 1.25rem; font-size: 0.9375rem; }
.alert-success-rek { background:#DFF5E1; color:#14532D; }
.alert-info-rek    { background:#DCEBFF; color:#1E3A8A; }
.alert-warning-rek { background:#FFF4CC; color:#92400E; }
.alert-danger-rek  { background:#FDE2E2; color:#991B1B; }

/* Bandeau de notification (hero) */
.notif-banner {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  background: var(--rek-yellow-light);
  border-radius: var(--radius-pill);
  padding: 0.6rem 0.6rem 0.6rem 1.25rem;
  font-size: 0.9375rem; font-weight: 500; color: var(--rek-black);
}

/* ==========================================================================
   11. SECTIONS SPÉCIFIQUES
   ========================================================================== */
/* Hero jaune */
.hero-yellow {
  background: var(--rek-yellow);
  color: var(--rek-black);
  position: relative;
  overflow: hidden;
}
.hero-yellow .display-hero, .hero-yellow h1, .hero-yellow p { color: var(--rek-black); }
/* (Footer noir : voir section 11c) */

/* ==========================================================================
   11b. NAVBAR (blanche, sticky)
   ========================================================================== */
.rek-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff;
  border-bottom: 1px solid var(--rek-border-light);
  transition: box-shadow 0.25s ease;
  height: 70px;
}
.rek-navbar.is-scrolled { box-shadow: 0 4px 18px rgba(0,0,0,0.07); }

/* Logo texte brandé */
.rek-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--rek-black);
  line-height: 1;
}
.rek-logo:hover { color: var(--rek-black); }
.rek-logo .rek-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--rek-yellow);
  color: var(--rek-black);
  font-size: 1rem;
}

/* Liens de navigation */
.rek-nav-link {
  position: relative;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--rek-text);
  padding: 0.5rem 0;
}
.rek-nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--rek-black);
  transition: width 0.2s ease;
}
.rek-nav-link:hover { color: var(--rek-black); }
.rek-nav-link:hover::after,
.rek-nav-link.active::after { width: 100%; }
.rek-nav-link.active { font-weight: 600; }

/* Bouton icône (recherche, langue) */
.rek-nav-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--rek-text); background: transparent; border: none;
  transition: var(--transition-fast);
}
.rek-nav-icon:hover { background: var(--rek-bg-light); color: var(--rek-black); }

.rek-lang {
  font-weight: 600; font-size: 0.875rem; color: var(--rek-text-secondary);
  display: inline-flex; align-items: center; gap: 0.3rem;
}

/* Hamburger */
.rek-burger {
  width: 44px; height: 44px; border: none; background: transparent;
  color: var(--rek-black); font-size: 1.35rem; border-radius: var(--radius-sm);
}
.rek-burger:hover { background: var(--rek-bg-light); }

/* Offcanvas mobile */
.rek-offcanvas .offcanvas-body { padding: 1.5rem; }
.rek-offcanvas .rek-nav-link { display: block; font-size: 1.1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rek-border-light); }
.rek-offcanvas .rek-nav-link::after { display: none; }

/* ==========================================================================
   11c. FOOTER (noir)
   ========================================================================== */
.footer-dark { background: var(--rek-bg-dark); color: #B5B5B5; }
.footer-dark a { color: #B5B5B5; }
.footer-dark a:hover { color: #fff; }
.footer-dark h5 { color: #fff; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; }
.footer-dark .footer-link-list { list-style: none; padding: 0; margin: 0; }
.footer-dark .footer-link-list li { margin-bottom: 0.6rem; }
.footer-dark .footer-link-list a { font-size: 0.9375rem; transition: var(--transition-fast); }
.footer-social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: #fff; transition: var(--transition-fast);
}
.footer-social:hover { background: var(--rek-yellow); color: var(--rek-black); transform: translateY(-2px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); }
.footer-bottom a { font-size: 0.8125rem; }

/* ==========================================================================
   11d. PILIERS (pourquoi Rekrufy)
   ========================================================================== */
.pillar-card {
  text-align: center;
  padding: 2.25rem 1.5rem;
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
  height: 100%;
  transition: var(--transition);
}
.pillar-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.pillar-icon {
  width: 64px; height: 64px;
  border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin-bottom: 1.25rem;
}
.pillar-icon.bg-yellow-light { color: #9A7B00; }

/* ==========================================================================
   11e. HOMEPAGE — hero, stats, carousels
   ========================================================================== */
/* Décor hero : formes floues */
.hero-decor { position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.5; pointer-events: none; }
.hero-decor-1 { width: 320px; height: 320px; background: #FFE066; top: -120px; right: -80px; }
.hero-decor-2 { width: 220px; height: 220px; background: #FFFFFF; bottom: -90px; left: -60px; opacity: 0.35; }

.hero-yellow .container { position: relative; z-index: 1; }

/* Compteur d'offres dans le hero */
.hero-count { font-weight: 600; font-size: 1rem; }
.hero-count strong { font-weight: 800; }

/* Stat block (section chiffres) */
.stat-number { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.stat-caption { font-size: 0.9375rem; color: var(--rek-text-secondary); }

/* Swiper — entreprises */
.rek-swiper { padding-bottom: 0.5rem; }
.rek-swiper .swiper-slide { height: auto; }
.rek-swiper .swiper-button-next,
.rek-swiper .swiper-button-prev {
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-card); color: var(--rek-black);
}
.rek-swiper .swiper-button-next:after,
.rek-swiper .swiper-button-prev:after { font-size: 1rem; font-weight: 700; }
.rek-swiper .swiper-pagination-bullet-active { background: var(--rek-black); }

/* Logos clients (bandeau) */
.client-logo { height: 28px; opacity: 0.55; filter: grayscale(1); transition: var(--transition-fast); }
.client-logo:hover { opacity: 1; filter: grayscale(0); }

/* Liste d'avantages (post-it) */
.benefit-list { list-style: none; padding: 0; margin: 0; }
.benefit-list li { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.9375rem; }
.benefit-list li i { color: var(--rek-success); margin-top: 0.2rem; }

/* ==========================================================================
   11f. PAGES DÉTAIL (offre, vitrine entreprise)
   ========================================================================== */
/* Fil d'ariane */
.rek-breadcrumb { font-size: 0.875rem; color: var(--rek-text-muted); }
.rek-breadcrumb a { color: var(--rek-text-secondary); }
.rek-breadcrumb a:hover { color: var(--rek-black); }
.rek-breadcrumb i { font-size: 0.6rem; margin: 0 0.5rem; vertical-align: middle; }

/* Média immersif (offre) */
.detail-hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.detail-hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
.detail-hero .detail-hero-badge { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2; }

/* Contenu rédactionnel */
.prose { color: var(--rek-text-secondary); line-height: 1.75; }
.prose h2, .prose h3 { color: var(--rek-text); margin-top: 1.75rem; margin-bottom: 0.85rem; }
.prose h3 { font-size: 1.2rem; }
.prose p { margin-bottom: 1rem; }
.prose ul { padding-left: 1.2rem; margin-bottom: 1rem; }
.prose li { margin-bottom: 0.4rem; }

/* Bloc latéral sticky */
.detail-sidebar { position: sticky; top: 90px; }

/* Carte d'action (postuler) */
.apply-box {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--rek-border-light);
  padding: 1.5rem;
}

/* Liste de faits clés */
.fact-list { list-style: none; padding: 0; margin: 0; }
.fact-list li { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rek-border-light); font-size: 0.9375rem; }
.fact-list li:last-child { border-bottom: none; }
.fact-list .fact-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--rek-bg-light); display: inline-flex; align-items: center; justify-content: center; color: var(--rek-text-secondary); flex: 0 0 auto; }
.fact-list .fact-label { color: var(--rek-text-muted); font-size: 0.8125rem; }
.fact-list .fact-value { font-weight: 600; }

/* Bloc récompense mis en avant */
.reward-highlight {
  background: var(--rek-yellow-light);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  display: flex; align-items: center; gap: 0.85rem;
}
.reward-highlight .reward-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--rek-yellow); color: var(--rek-black); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex: 0 0 auto; }

/* Mini-card entreprise (sidebar) */
.company-mini { display: flex; align-items: center; gap: 0.85rem; }
.company-mini img { width: 52px; height: 52px; border-radius: 12px; object-fit: contain; background: #fff; box-shadow: var(--shadow-sm); padding: 4px; flex: 0 0 auto; }

/* ---- Vitrine entreprise ---- */
.company-cover { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.company-cover > img { width: 100%; aspect-ratio: 4 / 1; object-fit: cover; display: block; min-height: 220px; }
.company-cover--plain { min-height: 240px; background-image: linear-gradient(160deg, rgba(255,255,255,.05), rgba(0,0,0,.20)); }
.company-cover .company-cover-overlay {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  height: 60%;
}
.company-head {
  display: flex; align-items: flex-end; gap: 1.25rem;
  margin-top: -56px; position: relative; z-index: 2; padding: 0 1.5rem;
}
.company-head .company-head-logo {
  width: 104px; height: 104px; border-radius: 20px; background: #fff;
  box-shadow: var(--shadow-postit); padding: 10px; object-fit: contain; flex: 0 0 auto;
}
@media (max-width: 576px) {
  .company-head { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .company-head .company-head-logo { width: 80px; height: 80px; }
}

/* Onglets ancres (sticky) */
.anchor-tabs { position: sticky; top: 70px; z-index: 1020; background: #fff; border-bottom: 1px solid var(--rek-border-light); }
.anchor-tabs .pill-tabs { padding: 0.85rem 0; }

/* Galerie */
.gallery-grid img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: var(--transition); cursor: pointer;
}
.gallery-grid img:hover { transform: scale(1.02); box-shadow: var(--shadow-card); }

/* Bloc valeur / culture */
.value-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--rek-bg-light); border: 1px solid var(--rek-border-light);
  border-radius: var(--radius-pill); padding: 0.5rem 1rem; font-weight: 500; font-size: 0.9375rem;
}

/* ==========================================================================
   11g. PAGES LISTING / RECHERCHE / MÉDIA
   ========================================================================== */
/* Bandeau de tête de page (jaune) */
.page-hero { background: var(--rek-yellow); }
.page-hero h1 { color: var(--rek-black); }

/* Barre de recherche listing */
.listing-search {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  background: #fff; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-postit); padding: 0.4rem 0.5rem 0.4rem 1.5rem; max-width: 760px;
}
.listing-search .ls-field { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 180px; min-width: 0; }
.listing-search .ls-field i { color: var(--rek-text-muted); }
.listing-search input { border: none; outline: none; background: transparent; width: 100%; font-size: 0.95rem; padding: 0.55rem 0; }
.listing-search .ls-sep { width: 1px; height: 28px; background: var(--rek-border); }

/* Filtres latéraux */
.filter-panel { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.5rem; }
.filter-panel + .filter-panel { margin-top: 1.25rem; }
.filter-group { padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--rek-border-light); }
.filter-group:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.filter-title { font-weight: 700; font-size: 0.9375rem; margin-bottom: 0.85rem; }
.filter-check { display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0; font-size: 0.9375rem; cursor: pointer; }
.filter-check .filter-count { color: var(--rek-text-muted); font-size: 0.8125rem; }
.filter-check input { margin-right: 0.6rem; }

/* En-tête de résultats */
.results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.results-count { font-weight: 700; font-size: 1.1rem; }
.results-count span { color: var(--rek-accent); }

/* Filtres actifs (chips) */
.active-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--rek-yellow-light); color: var(--rek-black);
  border-radius: var(--radius-pill); padding: 0.35rem 0.85rem; font-size: 0.8125rem; font-weight: 500;
}
.filter-chip a { color: var(--rek-text-secondary); display: inline-flex; }
.filter-chip a:hover { color: var(--rek-danger); }

/* Pagination */
.rek-pagination { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap; margin-top: 2.5rem; }
.rek-pagination a, .rek-pagination span {
  min-width: 42px; height: 42px; padding: 0 0.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9375rem;
  background: #fff; color: var(--rek-text); box-shadow: var(--shadow-sm); transition: var(--transition-fast);
}
.rek-pagination a:hover { background: var(--rek-bg-light); }
.rek-pagination .active { background: var(--rek-black); color: #fff; }
.rek-pagination .disabled { opacity: 0.4; pointer-events: none; }

/* Offcanvas filtres (mobile) */
.filter-toggle { display: none; }
@media (max-width: 991px) { .filter-toggle { display: inline-flex; } }

/* État vide */
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--rek-text-secondary); }
.empty-state i { font-size: 2.5rem; color: var(--rek-text-muted); margin-bottom: 1rem; }

/* Article vedette (média) */
.featured-article {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 0;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); background: #fff;
}
.featured-article > img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.featured-article .featured-body { padding: 2.25rem; display: flex; flex-direction: column; justify-content: center; }
.featured-article .article-card-author img { width: 32px; height: 32px; min-height: 0; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
@media (max-width: 768px) { .featured-article { grid-template-columns: 1fr; } .featured-article > img { min-height: 220px; } }

/* Article détail */
.article-hero img { width: 100%; aspect-ratio: 16/7; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.article-meta { display: flex; align-items: center; gap: 0.65rem; color: var(--rek-text-secondary); font-size: 0.9375rem; }

/* ==========================================================================
   11h. AUTH (login candidat)
   ========================================================================== */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-aside { background: var(--rek-yellow); padding: 3rem; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.auth-aside h2 { color: var(--rek-black); }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 2rem; }
.auth-card { width: 100%; max-width: 420px; }
@media (max-width: 768px) { .auth-wrap { grid-template-columns: 1fr; } .auth-aside { display: none; } }

/* ==========================================================================
   11i. ESPACE CANDIDAT (sidebar + dashboard)
   ========================================================================== */
.cand-wrap { display: flex; min-height: 100vh; background: var(--rek-bg-light); }

/* Sidebar */
.cand-sidebar {
  width: 264px; flex: 0 0 264px; background: #fff;
  border-right: 1px solid var(--rek-border-light);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.cand-sidebar .cand-brand { padding: 1.35rem 1.5rem; border-bottom: 1px solid var(--rek-border-light); }
.cand-nav { padding: 1rem 0.85rem; flex: 1 1 auto; overflow-y: auto; }
.cand-nav a {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.75rem 0.95rem; border-radius: var(--radius); margin-bottom: 0.25rem;
  color: var(--rek-text-secondary); font-weight: 500; font-size: 0.95rem; transition: var(--transition-fast);
}
.cand-nav a i { width: 20px; text-align: center; font-size: 1rem; }
.cand-nav a:hover { background: var(--rek-bg-light); color: var(--rek-black); }
.cand-nav a.active { background: var(--rek-black); color: #fff; }
.cand-sidebar .cand-foot { padding: 1rem 0.85rem; border-top: 1px solid var(--rek-border-light); }

/* Zone principale */
.cand-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cand-topbar {
  background: #fff; border-bottom: 1px solid var(--rek-border-light);
  padding: 0.85rem 1.75rem; display: flex; align-items: center; gap: 1rem;
  position: sticky; top: 0; z-index: 1020;
}
.cand-content { padding: 2rem 1.75rem; flex: 1 1 auto; }
@media (max-width: 991px) {
  .cand-sidebar { position: fixed; left: 0; top: 0; z-index: 1040; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: var(--shadow-hover); }
  .cand-sidebar.show { transform: translateX(0); }
  .cand-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1035; display: none; }
  .cand-overlay.show { display: block; }
}

/* Stat cards candidat */
.cand-stat { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.4rem; height: 100%; }
.cand-stat .cand-stat-ico { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 0.85rem; }
.cand-stat .cand-stat-num { font-size: 2rem; font-weight: 800; line-height: 1; }
.cand-stat .cand-stat-lbl { color: var(--rek-text-secondary); font-size: 0.875rem; }

/* Carte panneau */
.cand-panel { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.5rem; }

/* Barre de complétude */
.completeness-bar { height: 10px; border-radius: var(--radius-pill); background: var(--rek-border-light); overflow: hidden; }
.completeness-bar > span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--rek-yellow); transition: width 0.4s ease; }

/* ----- Stepper (profil 3 étapes) ----- */
.stepper { display: flex; align-items: center; gap: 0; margin-bottom: 2rem; }
.stepper .step { display: flex; align-items: center; gap: 0.65rem; flex: 0 0 auto; }
.stepper .step-dot {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; background: var(--rek-bg-light); color: var(--rek-text-muted);
  border: 2px solid var(--rek-border); transition: var(--transition);
}
.stepper .step-label { font-weight: 600; font-size: 0.9375rem; color: var(--rek-text-muted); }
.stepper .step-line { flex: 1 1 auto; height: 2px; background: var(--rek-border); margin: 0 1rem; min-width: 24px; }
.stepper .step.is-active .step-dot { background: var(--rek-black); color: #fff; border-color: var(--rek-black); }
.stepper .step.is-active .step-label { color: var(--rek-black); }
.stepper .step.is-done .step-dot { background: var(--rek-success); color: #fff; border-color: var(--rek-success); }
.stepper .step.is-done .step-label { color: var(--rek-text); }
@media (max-width: 576px) { .stepper .step-label { display: none; } }

.wizard-step { display: none; }
.wizard-step.active { display: block; animation: fadeInUp 0.3s ease; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ----- Candidatures (liste statuts) ----- */
.app-row {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 1rem 1.25rem; margin-bottom: 1rem; transition: var(--transition);
}
.app-row:hover { box-shadow: var(--shadow-hover); }
.app-row .app-thumb { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; }
.app-row .app-main { flex: 1 1 240px; min-width: 0; }
.app-row .app-title { font-weight: 700; margin-bottom: 0.1rem; }

/* Badges de statut candidature */
.status-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; font-size: 0.78125rem; padding: 0.35rem 0.8rem; border-radius: var(--radius-pill); }
.status-submitted { background:#EFF1F5; color:#475569; }
.status-viewed    { background:#DCEBFF; color:#1D4ED8; }
.status-screening { background:#E6E1FF; color:#6D28D9; }
.status-interview { background:#FFF4CC; color:#9A7B00; }
.status-testing   { background:#FFE8CC; color:#C2410C; }
.status-offer     { background:#DFF5E1; color:#15803D; }
.status-hired     { background:#16A34A; color:#fff; }
.status-rejected  { background:#FDE2E2; color:#B91C1C; }
.status-withdrawn { background:#F0F0EE; color:#8E8E8E; }

/* ==========================================================================
   11j. PAGE CANDIDATURE (postuler)
   ========================================================================== */
.apply-question { padding: 1.25rem 0; border-bottom: 1px solid var(--rek-border-light); }
.apply-question:last-child { border-bottom: none; }
.apply-question .q-text { font-weight: 600; margin-bottom: 0.85rem; }
.apply-question .q-required { font-size: 0.75rem; color: var(--rek-text-muted); font-weight: 500; }

/* Sélecteur de niveau 1-5 (quantitatif) */
.level-select { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.level-select input { position: absolute; opacity: 0; pointer-events: none; }
.level-select label {
  width: 48px; height: 48px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; cursor: pointer; user-select: none;
  background: var(--rek-bg-light); border: 2px solid var(--rek-border); color: var(--rek-text-secondary);
  transition: var(--transition-fast);
}
.level-select label:hover { border-color: var(--rek-black); }
.level-select input:checked + label { background: var(--rek-black); color: #fff; border-color: var(--rek-black); }
.level-scale { font-size: 0.75rem; color: var(--rek-text-muted); display: flex; justify-content: space-between; max-width: 280px; margin-top: 0.4rem; }

/* Options déclaratives (radio en cartes) */
.opt-choice { display: block; cursor: pointer; margin-bottom: 0.6rem; }
.opt-choice input { position: absolute; opacity: 0; }
.opt-choice .opt-box {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1.1rem; border-radius: var(--radius);
  border: 2px solid var(--rek-border); background: #fff; transition: var(--transition-fast);
}
.opt-choice .opt-box::before {
  content: ''; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--rek-border); flex: 0 0 auto; transition: var(--transition-fast);
}
.opt-choice:hover .opt-box { border-color: var(--rek-black); }
.opt-choice input:checked + .opt-box { border-color: var(--rek-black); background: var(--rek-bg-light); }
.opt-choice input:checked + .opt-box::before { border-color: var(--rek-black); border-width: 6px; }

/* Récap offre (sidebar candidature) */
.apply-job-card { display: flex; gap: 0.85rem; align-items: center; }
.apply-job-card img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; }

/* ==========================================================================
   11k. PAGE /companies (explorer les entreprises — style WTTJ)
   ========================================================================== */
/* Barre de recherche/filtres sticky */
.companies-search { background: var(--rek-bg-light); }
.companies-search.is-sticky { position: sticky; top: 70px; z-index: 1015; box-shadow: var(--shadow-card); }
.companies-filterbar {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  background: #fff; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card); padding: 0.5rem 0.5rem 0.5rem 1.35rem;
}
.companies-filterbar .fb-field { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 160px; min-width: 0; }
.companies-filterbar .fb-field > i { color: var(--rek-text-muted); flex: 0 0 auto; }
.companies-filterbar .fb-field input,
.companies-filterbar .fb-field select {
  border: none; outline: none; background: transparent; width: 100%;
  font-size: 0.9375rem; font-weight: 500; color: var(--rek-text); padding: 0.5rem 0; cursor: pointer;
}
.companies-filterbar .fb-field input { cursor: text; }
.companies-filterbar .fb-sep { width: 1px; height: 30px; background: var(--rek-border); flex: 0 0 auto; }
.companies-filterbar .btn { border-radius: var(--radius-pill); flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 991px) {
  .companies-filterbar { border-radius: var(--radius-lg); flex-direction: column; align-items: stretch; padding: 1rem; }
  .companies-filterbar .fb-field { border: 1.5px solid var(--rek-border); border-radius: var(--radius-sm); padding: 0.4rem 0.85rem; flex-basis: auto; }
  .companies-filterbar .fb-sep { display: none; }
  .companies-filterbar .btn { width: 100%; }
}

/* Card secteur */
.sector-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 2rem 1rem; border: 1.5px solid var(--rek-border); border-radius: var(--radius-card);
  background: #fff; height: 100%; transition: var(--transition); cursor: pointer;
}
.sector-card:hover { border-color: var(--rek-black); box-shadow: var(--shadow-card); transform: translateY(-3px); }
.sector-card .sector-ico {
  width: 56px; height: 56px; border-radius: 14px; margin-bottom: 1rem;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem;
  background: var(--rek-yellow-light); color: var(--rek-black);
}
.sector-card .sector-name { font-weight: 700; color: var(--rek-text); margin-bottom: 0.2rem; }
.sector-card .sector-count { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rek-text-muted); }

/* CTA recruteur (vert post-it) */
.cta-recruiter {
  background: var(--postit-green); border-radius: var(--radius-lg);
  padding: 2.5rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.cta-recruiter .cta-illus {
  width: 96px; height: 96px; border-radius: 20px; background: #fff; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--rek-success);
  box-shadow: var(--shadow-card);
}

/* État vide AJAX */
#companiesGrid.is-loading { opacity: 0.5; pointer-events: none; transition: opacity 0.2s; }

/* Footer riche (liens régions/secteurs/métiers) */
.rich-footer { background: var(--rek-bg-light); border-top: 1px solid var(--rek-border-light); }
.rich-footer h6 { font-weight: 700; font-size: 0.9375rem; margin-bottom: 1rem; }
.rich-footer ul { list-style: none; padding: 0; margin: 0; }
.rich-footer li { margin-bottom: 0.5rem; }
.rich-footer a { font-size: 0.875rem; color: var(--rek-text-secondary); }
.rich-footer a:hover { color: var(--rek-black); }

/* ==========================================================================
   11l. REFONTE DÉTAIL OFFRE + COOPTATION
   ========================================================================== */
/* En-tête (retour + date) */
.detail-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.detail-back { font-weight: 600; color: var(--rek-text-secondary); }
.detail-back:hover { color: var(--rek-black); }
.detail-date-badge { font-size: 0.8125rem; color: var(--rek-text-secondary); background: var(--rek-bg-light); border-radius: var(--radius-pill); padding: 0.35rem 0.85rem; }

/* Bloc titre offre */
.job-head { display: flex; gap: 1.25rem; align-items: flex-start; }
.job-head .job-head-logo {
  width: 84px; height: 84px; border-radius: 16px; flex: 0 0 auto;
  background: #fff; border: 1px solid var(--rek-border); padding: 8px; object-fit: contain;
}
.featured-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--rek-yellow); color: var(--rek-black);
  font-weight: 700; font-size: 0.78125rem; padding: 0.35rem 0.8rem; border-radius: var(--radius-pill);
}
.verified-badge { color: var(--rek-accent); font-size: 0.95em; }
@media (max-width: 576px) {
  .job-head { flex-direction: column; }
  .job-head .job-head-logo { width: 64px; height: 64px; }
}

/* Onglets soulignés (jaune/noir, JAMAIS orange) */
.detail-tabs { display: flex; gap: 1.75rem; border-bottom: 2px solid var(--rek-border-light); margin-bottom: 2rem; overflow-x: auto; }
.detail-tab {
  position: relative; padding: 0.85rem 0; font-weight: 600; font-size: 0.95rem;
  color: var(--rek-text-secondary); background: none; border: none; white-space: nowrap; cursor: pointer;
}
.detail-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--rek-yellow); border-radius: 3px; transform: scaleX(0); transition: transform 0.2s; }
.detail-tab:hover { color: var(--rek-black); }
.detail-tab.active { color: var(--rek-black); }
.detail-tab.active::after { transform: scaleX(1); }
.detail-tabpane { display: none; }
.detail-tabpane.active { display: block; animation: fadeInUp 0.25s ease; }

/* Section de contenu avec titre + icône */
.detail-section { margin-bottom: 2rem; }
.detail-section .ds-title { display: flex; align-items: center; gap: 0.65rem; font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; }
.detail-section .ds-title .ds-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--rek-yellow-light); color: var(--rek-black); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; flex: 0 0 auto; }
.detail-bullets { list-style: none; padding: 0; margin: 0; }
.detail-bullets li { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.65rem; color: var(--rek-text-secondary); }
.detail-bullets li i { color: var(--rek-accent); margin-top: 0.25rem; flex: 0 0 auto; }

/* Avatars empilés (recommandé pour vous) */
.avatar-stack { display: flex; }
.avatar-stack img, .avatar-stack span {
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; margin-left: -10px;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem;
}
.avatar-stack > :first-child { margin-left: 0; }

/* ----- Bloc d'action : Postuler OU Coopter ----- */
.action-split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.25rem; align-items: stretch; }
.action-card {
  background: #fff; border: 1px solid var(--rek-border-light); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 1.75rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; transition: var(--transition);
}
.action-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.action-card .action-ico {
  width: 60px; height: 60px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 1rem;
}
.action-card.is-apply .action-ico { background: var(--rek-yellow-light); color: var(--rek-black); }
.action-card.is-coopt .action-ico { background: rgba(22,163,74,0.12); color: var(--rek-success); }
.action-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.5rem; }
.action-card p { color: var(--rek-text-secondary); font-size: 0.9375rem; margin-bottom: 1.25rem; flex: 1 1 auto; }
.action-card .btn { width: 100%; }
.action-or {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--rek-text-muted); text-transform: uppercase; font-size: 0.8rem;
  position: relative;
}
.action-or::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--rek-border); }
.action-or span { background: #fff; padding: 0.4rem 0; position: relative; z-index: 1; }
@media (max-width: 767px) {
  .action-split { grid-template-columns: 1fr; }
  .action-or { padding: 0.5rem 0; }
  .action-or::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
}

/* Bandeau "vous venez d'une cooptation" */
.coopt-banner {
  background: var(--postit-green); border-radius: var(--radius);
  padding: 0.85rem 1.25rem; display: flex; align-items: center; gap: 0.65rem; font-weight: 500; margin-bottom: 1.5rem;
}

/* Modale cooptation */
.modal-content { border: none; border-radius: var(--radius-lg); }
.modal-header { border-bottom: 1px solid var(--rek-border-light); }
.coopt-success { text-align: center; padding: 1.5rem 0.5rem; }
.coopt-success .cs-ico { width: 72px; height: 72px; border-radius: 50%; background: var(--postit-green); color: var(--rek-success); display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 1rem; }

/* ==========================================================================
   11m. VITRINE ENTREPRISE (refonte — couleurs Rekrufy)
   ========================================================================== */
/* Hero couverture */
.vitrine-hero { position: relative; }
.vitrine-cover { position: relative; border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden; }
.vitrine-cover > img { width: 100%; height: 340px; object-fit: cover; display: block; }
.vitrine-cover--plain { height: 340px; background-image: linear-gradient(160deg, rgba(255,255,255,.05), rgba(0,0,0,.20)); }
.vitrine-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.60), transparent 55%); pointer-events: none; }
/* Bande titre sur le bas de la couverture (logo + nom en blanc) */
.vitrine-cover-band {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: flex-end; gap: 1.25rem; padding: 1.5rem;
}
.vitrine-cover-title {
  color: #fff; margin: 0; font-weight: 800; line-height: 1.1;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.vitrine-cover-title .verified-badge { color: #fff; }
.vitrine-logo {
  width: 110px; height: 110px; border-radius: 22px; background: #fff;
  box-shadow: var(--shadow-postit); padding: 12px; object-fit: contain; flex: 0 0 auto;
}
.vitrine-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 1rem; position: relative; z-index: 2; padding: 0 0.5rem;
}
.vitrine-meta { flex: 1 1 320px; }
.vitrine-head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 768px) {
  .vitrine-cover > img, .vitrine-cover--plain { height: 220px; }
  .vitrine-cover-band { padding: 1rem; gap: 0.85rem; }
  .vitrine-logo { width: 76px; height: 76px; border-radius: 16px; padding: 8px; }
  .vitrine-cover-title { font-size: 1.4rem; }
}

/* Onglets vitrine (sticky, soulignés jaune/noir) */
.vitrine-tabs { position: sticky; top: 70px; z-index: 1015; background: #fff; border-bottom: 1px solid var(--rek-border-light); margin-top: 1.5rem; }
.vitrine-tabs .tabs-inner { display: flex; gap: 1.75rem; overflow-x: auto; }
.vitrine-tab {
  position: relative; padding: 1rem 0; font-weight: 600; font-size: 0.95rem;
  color: var(--rek-text-secondary); background: none; border: none; white-space: nowrap; cursor: pointer;
}
.vitrine-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--rek-yellow); border-radius: 3px; transform: scaleX(0); transition: transform 0.2s; }
.vitrine-tab:hover { color: var(--rek-black); }
.vitrine-tab.active { color: var(--rek-black); }
.vitrine-tab.active::after { transform: scaleX(1); }
.vitrine-pane { display: none; }
.vitrine-pane.active { display: block; animation: fadeInUp 0.25s ease; }

/* Bloc latéral vitrine */
.vitrine-box { background: #fff; border: 1px solid var(--rek-border-light); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; }
.vitrine-box h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 1rem; }

/* Chiffres clés */
.key-figures { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
.figure-item { background: var(--rek-bg-light); border-radius: var(--radius); padding: 0.95rem 1rem; }
.figure-item .figure-val { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.figure-item .figure-lbl { font-size: 0.75rem; color: var(--rek-text-muted); margin-top: 0.2rem; }
/* barre parité */
.parity-bar { height: 8px; border-radius: var(--radius-pill); overflow: hidden; display: flex; margin-top: 0.5rem; }
.parity-bar .pw { background: var(--rek-accent); }
.parity-bar .pm { background: var(--rek-yellow); }

/* Derniers jobs (liste compacte) */
.mini-job { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--rek-border-light); }
.mini-job:last-child { border-bottom: none; }
.mini-job .mj-title { font-weight: 600; color: var(--rek-black); }
.mini-job .mj-meta { font-size: 0.8125rem; color: var(--rek-text-secondary); }
.mini-job:hover .mj-title { color: var(--rek-accent); }

/* Cards vidéo collaborateurs */
.video-card { position: relative; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); cursor: pointer; }
.video-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; transition: transform 0.4s; }
.video-card:hover img { transform: scale(1.05); }
.video-card .vc-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.25);
}
.video-card .vc-play i { width: 56px; height: 56px; border-radius: 50%; background: var(--rek-yellow); color: var(--rek-black); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: var(--shadow-card); }
.video-card .vc-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.85rem 1rem; color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); }
.video-card .vc-name { font-weight: 700; }
.video-card .vc-role { font-size: 0.8125rem; opacity: 0.9; }

/* Galerie masonry */
.masonry { columns: 3 200px; column-gap: 1rem; }
.masonry img { width: 100%; border-radius: var(--radius); margin-bottom: 1rem; break-inside: avoid; box-shadow: var(--shadow-sm); transition: var(--transition); cursor: pointer; }
.masonry img:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }

/* FAQ accordéon */
.faq-item { border: 1px solid var(--rek-border-light); border-radius: var(--radius); margin-bottom: 0.75rem; overflow: hidden; }
.faq-q { width: 100%; text-align: left; background: #fff; border: none; padding: 1rem 1.25rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-q:hover { background: var(--rek-bg-light); }
.faq-q .faq-chevron { transition: transform 0.2s; color: var(--rek-text-muted); }
.faq-item.open .faq-q .faq-chevron { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq-item.open .faq-a { max-height: 400px; }
.faq-a-inner { padding: 0 1.25rem 1.1rem; color: var(--rek-text-secondary); }

/* Carte localisation */
.vitrine-map { border: 0; width: 100%; height: 320px; border-radius: var(--radius-lg); }

/* Widget intégration */
.embed-widget { background: var(--rek-bg-dark); color: #fff; border-radius: var(--radius); padding: 1.25rem; }
.embed-widget code { display: block; background: rgba(255,255,255,0.08); padding: 0.6rem 0.75rem; border-radius: 8px; font-size: 0.75rem; color: #C9CEDC; margin-top: 0.5rem; word-break: break-all; }

/* ==========================================================================
   11n. CV VIDÉO — sélecteur de type (candidat, Point 6)
   ========================================================================== */
.video-type-card {
  display: flex; flex-direction: column; height: 100%; cursor: pointer;
  border: 2px solid var(--rek-border); border-radius: var(--radius); padding: 1.1rem;
  transition: var(--transition-fast); background: #fff; margin: 0;
}
.video-type-card input { position: absolute; opacity: 0; pointer-events: none; }
.video-type-card:hover { border-color: var(--rek-black); }
.video-type-card.selected { border-color: var(--rek-accent); background: var(--rek-accent-soft); }
.video-type-card .vt-ico {
  width: 42px; height: 42px; border-radius: 11px; margin-bottom: 0.65rem;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
  background: var(--rek-yellow-light); color: var(--rek-black);
}
.video-type-card.selected .vt-ico { background: var(--rek-accent); color: #fff; }
.video-type-card .vt-title { font-weight: 700; margin-bottom: 0.3rem; }
.video-type-card .vt-desc { font-size: 0.8125rem; color: var(--rek-text-secondary); line-height: 1.45; }

/* ==========================================================================
   12. DIVERS / UTILITAIRES
   ========================================================================== */
.divider { height: 1px; background: var(--rek-border-light); border: none; }

.avatar { border-radius: 50%; object-fit: cover; background: var(--rek-bg-light); }
.avatar-sm { width: 32px; height: 32px; }
.avatar-md { width: 44px; height: 44px; }
.avatar-lg { width: 64px; height: 64px; }

/* Swatch (page design system) */
.swatch {
  border-radius: var(--radius); height: 88px; box-shadow: var(--shadow-sm);
  display: flex; align-items: flex-end; padding: 0.6rem;
  color: #fff; font-size: 0.75rem; font-weight: 600;
}
.swatch.swatch-light { color: var(--rek-black); }

/* Blocs démo */
.ds-block { padding: 2.25rem 0; border-bottom: 1px solid var(--rek-border-light); }
.ds-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rek-text-muted); margin-bottom: 1.25rem; }

:focus-visible { outline: 2px solid var(--rek-black); outline-offset: 2px; }

/* ==========================================================================
   13. POLISH (skeletons, fade-in images, back-to-top, motion)
   ========================================================================== */
html { scroll-behavior: smooth; }

/* Skeleton shimmer sur les conteneurs média (pendant le chargement de l'image) */
.job-card-media,
.company-card-media,
.article-card-media,
.detail-hero,
.company-cover,
.article-hero,
.featured-article > img,
.gallery-grid img {
  position: relative;
  background: linear-gradient(100deg, #eee 30%, #f5f5f5 50%, #eee 70%);
  background-size: 200% 100%;
  animation: rek-shimmer 1.4s ease-in-out infinite;
}
@keyframes rek-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Fade-in des images au chargement (skeleton → image) */
.job-card-media img,
.company-card-media img,
.article-card-media img,
.detail-hero img,
.company-cover > img,
.article-hero img,
.featured-article > img {
  opacity: 0;
  transition: opacity 0.45s ease;
}
.job-card-media img.is-loaded,
.company-card-media img.is-loaded,
.article-card-media img.is-loaded,
.detail-hero img.is-loaded,
.company-cover > img.is-loaded,
.article-hero img.is-loaded,
.featured-article > img.is-loaded { opacity: 1; }
/* Une fois chargée, l'animation shimmer du conteneur n'est plus utile */
.has-loaded { animation: none !important; background: var(--rek-bg-light); }

/* Skeleton générique (placeholder de bloc) */
.skeleton {
  background: linear-gradient(100deg, #eee 30%, #f5f5f5 50%, #eee 70%);
  background-size: 200% 100%;
  animation: rek-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius);
}
.skeleton-line { height: 0.9rem; margin-bottom: 0.6rem; border-radius: 6px; }
.skeleton-line.w-60 { width: 60%; } .skeleton-line.w-40 { width: 40%; }

/* Bouton retour en haut */
.back-to-top {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1040;
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: var(--rek-black); color: #fff; font-size: 1.1rem;
  box-shadow: var(--shadow-hover); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: var(--transition);
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--rek-yellow); color: var(--rek-black); }
@media (max-width: 576px) { .back-to-top { right: 1rem; bottom: 1rem; width: 44px; height: 44px; } }

/* Accessibilité : respecter prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-aos] { opacity: 1 !important; transform: none !important; }
  .job-card-media img, .company-card-media img, .article-card-media img,
  .detail-hero img, .company-cover > img, .article-hero img, .featured-article > img { opacity: 1; }
}

/* Empêche tout débordement horizontal */
body { overflow-x: hidden; }
img { max-width: 100%; }

/* Logo image personnalisé (configurable depuis l'admin) */
.rek-logo-img { height: 34px; width: auto; max-width: 170px; display: block; object-fit: contain; }
.rek-logo .rek-logo-img { margin: 0; }

/* Cloche notifications (topbar candidat) */
.cand-notif-dot {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px;
  background: var(--rek-danger); color: #fff; font-size: 0.62rem; font-weight: 700;
  border-radius: 100px; display: inline-flex; align-items: center; justify-content: center;
}
.cand-breadcrumb { line-height: 1; margin-bottom: 2px; }

/* Timeline candidature (détail) */
.cand-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.cand-timeline li { position: relative; padding-left: 1.75rem; padding-bottom: 1.1rem; }
.cand-timeline li:last-child { padding-bottom: 0; }
.cand-timeline li::before { content: ''; position: absolute; left: 5px; top: 14px; bottom: -4px; width: 2px; background: var(--rek-border-light); }
.cand-timeline li:last-child::before { display: none; }
.cand-timeline .tl-dot { position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--rek-accent); box-shadow: 0 0 0 3px var(--rek-accent-soft); }

/* Bouton retrait favori (overlay sur card) */
.fav-remove { position: absolute; top: 0.85rem; right: 0.85rem; z-index: 4; margin: 0; }
.fav-remove-btn { width: 38px; height: 38px; border-radius: 50%; border: none; background: #fff; color: var(--rek-danger); box-shadow: var(--shadow-card); cursor: pointer; transition: var(--transition-fast); }
.fav-remove-btn:hover { background: var(--rek-danger); color: #fff; transform: scale(1.08); }

/* Messages — liste conversations */
.convo-row { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.25rem; text-decoration: none; color: inherit; transition: var(--transition-fast); }
.convo-row:hover { background: var(--rek-bg-light); }
.convo-row.border-top { border-top: 1px solid var(--rek-border-light); }
.convo-logo { width: 48px; height: 48px; border-radius: 10px; object-fit: contain; background: #fff; padding: 4px; box-shadow: var(--shadow-sm); flex: 0 0 auto; }
.convo-main { min-width: 0; flex: 1; }
.convo-badge { flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 100px; background: var(--rek-danger); color: #fff; font-size: 0.72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* Chat */
.chat-wrap { display: flex; flex-direction: column; height: calc(100vh - 220px); min-height: 420px; }
.chat-header { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--rek-border-light); }
.chat-body { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; background: var(--rek-bg-light); }
.chat-msg { display: flex; }
.chat-msg.mine { justify-content: flex-end; }
.chat-bubble { max-width: 75%; padding: 0.65rem 0.9rem; border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); font-size: 0.92rem; position: relative; }
.chat-msg.mine .chat-bubble { background: var(--rek-yellow); color: var(--rek-black); }
.chat-time { display: block; font-size: 0.68rem; opacity: 0.6; margin-top: 3px; }
.chat-input { display: flex; gap: 0.5rem; padding: 0.85rem 1rem; border-top: 1px solid var(--rek-border-light); }
.chat-input textarea { resize: none; }

/* CV vidéo — slots (upload + webcam) */
.video-slot { border: 1.5px solid var(--rek-border-light); border-radius: 14px; padding: 0.9rem; height: 100%; transition: var(--transition-fast); background: #fff; }
.video-slot.has-video { border-color: var(--rek-accent); }
.video-slot .vs-head { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; }
.video-slot .vt-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--rek-accent-soft); color: var(--rek-accent); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.video-slot .vt-title { font-size: 0.92rem; }
.video-slot .vt-desc { font-size: 0.78rem; color: var(--rek-text-secondary); margin: 0.4rem 0 0.6rem; }
.video-slot .vs-preview { border-radius: 10px; overflow: hidden; background: #f1f1ef; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; margin-bottom: 0.6rem; }
.video-slot .vs-video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.video-slot .vs-empty { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; color: var(--rek-text-muted); font-size: 0.78rem; }
.video-slot .vs-empty i { font-size: 1.4rem; }
.video-slot .vs-actions { display: flex; gap: 0.4rem; }
.video-slot .vs-actions .btn { flex: 1; }

/* Bandeau cookies RGPD */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1080; background: #fff; border: 1px solid var(--rek-border-light); border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.18); max-width: 920px; margin: 0 auto; }
.cookie-inner { padding: 1.1rem 1.35rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.cookie-text { flex: 1; min-width: 240px; }
.cookie-prefs { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--rek-border-light); }
.cookie-pref { display: flex; align-items: center; gap: .75rem; flex: 1; min-width: 240px; cursor: pointer; }
.cookie-pref input { width: 2.4rem; height: 1.3rem; flex: 0 0 auto; }
.cookie-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 575px){ .cookie-actions { width: 100%; } .cookie-actions .btn { flex: 1; } }

/* Barre de recherche déroulante (header) */
.rek-search-overlay { position: fixed; top: 64px; left: 0; right: 0; z-index: 1035; background: #fff; border-bottom: 1px solid var(--rek-border-light); box-shadow: 0 10px 30px rgba(0,0,0,.10); padding: 1rem 0; animation: rekSearchDrop .2s ease; }
@keyframes rekSearchDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.rek-search-form { display: flex; align-items: center; gap: .75rem; }
.rek-search-form > i { color: var(--rek-text-muted); font-size: 1.1rem; }
.rek-search-form input { flex: 1; border: none; outline: none; font-size: 1.1rem; padding: .5rem 0; background: transparent; }
.rek-search-close { border: none; background: transparent; color: var(--rek-text-secondary); font-size: 1.2rem; cursor: pointer; padding: .25rem .5rem; }
.rek-search-close:hover { color: var(--rek-black); }

/* ===== Modale candidature contextuelle (login/register) ===== */
.apply-auth-modal { border: none; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.25); position: relative; }
.apply-auth-close { position: absolute; top: 14px; right: 16px; z-index: 3; }
.apply-auth-head { display: flex; gap: 16px; align-items: center; padding: 26px 28px 18px; background: var(--rek-yellow); }
.apply-auth-logo { width: 56px; height: 56px; border-radius: 12px; object-fit: contain; background: #fff; padding: 6px; box-shadow: var(--shadow-sm); flex: 0 0 auto; }
.apply-auth-eyebrow { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: rgba(26,26,26,.6); }
.apply-auth-title { font-size: 1.2rem; font-weight: 800; color: var(--rek-black); margin: 0; line-height: 1.2; }
.apply-auth-company { font-size: .9rem; color: rgba(26,26,26,.75); }
.apply-auth-body { padding: 22px 28px 28px; }
.apply-auth-oauth { display: flex; flex-direction: column; gap: 10px; }
.apply-oauth-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: .7rem 1rem; border: 1.5px solid var(--rek-border); border-radius: 10px; background: #fff; font-weight: 600; color: var(--rek-black); cursor: pointer; transition: var(--transition-fast); }
.apply-oauth-btn:hover { background: var(--rek-bg-light); border-color: var(--rek-black); }
.apply-oauth-btn .fa-google { color: #EA4335; } .apply-oauth-btn .fa-linkedin-in { color: #0A66C2; }
.apply-oauth-soon-note { font-size: .8rem; color: var(--rek-text-secondary); text-align: center; margin-top: 8px; }
.apply-auth-sep { display: flex; align-items: center; text-align: center; color: var(--rek-text-muted); font-size: .82rem; margin: 18px 0; }
.apply-auth-sep::before, .apply-auth-sep::after { content: ''; flex: 1; height: 1px; background: var(--rek-border-light); }
.apply-auth-sep span { padding: 0 12px; }
.apply-auth-tabs { display: flex; gap: 6px; background: var(--rek-bg-light); border-radius: 12px; padding: 4px; margin-bottom: 18px; }
.apply-auth-tab { flex: 1; border: none; background: none; padding: .55rem; border-radius: 9px; font-weight: 700; font-size: .9rem; color: var(--rek-text-secondary); cursor: pointer; transition: var(--transition-fast); }
.apply-auth-tab.active { background: var(--rek-black); color: #fff; }
.apply-auth-modal .form-label { font-size: .82rem; font-weight: 600; margin-bottom: 4px; }
@media (max-width: 575px) { .apply-auth-head { padding: 22px 18px 16px; } .apply-auth-body { padding: 18px; } }

/* Bouton "Coopter" — vert plein, bien visible */
.btn-coopt {
  background: var(--rek-success);
  color: #fff;
  border: none;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(22,163,74,0.30);
  transition: var(--transition-fast);
}
.btn-coopt:hover, .btn-coopt:focus {
  background: #15803D;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(22,163,74,0.40);
}
.btn-coopt:active { transform: translateY(0); }

/* Masquer la scrollbar des onglets (détail offre + vitrine entreprise) — défilement conservé */
.detail-tabs,
.vitrine-tabs .tabs-inner {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge ancien */
}
.detail-tabs::-webkit-scrollbar,
.vitrine-tabs .tabs-inner::-webkit-scrollbar {
  display: none;                /* Chrome/Safari/Edge */
}

/* Deux badges du hero côte à côte sous la card principale */
.hero-badge-row { display: flex; gap: 14px; justify-content: center; align-items: stretch; margin-top: 14px; flex-wrap: wrap; }
.hero-badge-row .postit { flex: 1 1 0; min-width: 150px; margin: 0; }