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

/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
  /* === COULEURS WTTJ === */
  --rek-yellow: #FFB400;           /* Jaune signature, hero, accents */
  --rek-yellow-light: #FFF4CC;     /* Jaune pâle, bandeaux, cards post-it */
  --rek-yellow-hover: #E6A200;
  --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,180,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,180,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,180,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: none; }
.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); display: inline-flex;
  align-items: center; justify-content: center; transition: var(--transition-fast);
}
.job-card .job-card-logo img { width: 100%; height: 100%; 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;
}

/* 4.1 : carte offre entierement cliquable. L'overlay couvre les zones mortes
   (ville, contrat, marges) ; les liens propres (titre, entreprise, logo, image)
   et le bouton « Suivre » restent au-dessus pour garder leur action independante. */
.job-card-clickable { position: relative; }
.job-card-overlay { position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-card); }
.job-card-clickable .job-card-title a,
.job-card-clickable .job-card-company a,
.job-card-clickable .job-card-media-img,
.job-card-clickable .js-follow { position: relative; z-index: 2; }

/* ----- 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;
  box-shadow: var(--shadow-card); 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; }

/* Bouton d'affichage du mot de passe (a droite du champ) */
.input-icon-pass .form-control { padding-right: 2.85rem; }
.pass-toggle { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); border: none; background: transparent; cursor: pointer; padding: .35rem .5rem; z-index: 2; }
.pass-toggle i { position: static; left: auto; transform: none; color: var(--rek-text-muted); pointer-events: auto; }
.pass-toggle:hover i { color: var(--rek-black); }

/* ----- 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-dark .footer-contact-list { list-style: none; padding: 0; margin: 0; max-width: 320px; }
.footer-dark .footer-contact-list li {
  display: flex; align-items: flex-start; gap: 0.65rem;
  font-size: 0.9rem; line-height: 1.5; margin-bottom: 0.6rem;
}
.footer-dark .footer-contact-list li i { color: var(--rek-yellow); width: 16px; margin-top: 3px; flex-shrink: 0; }
.footer-dark .footer-contact-list a { 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 (générique) */
.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; }

/* ===========================================================================
   Lecture d'article : confort de lecture (lot 15, point 2.2)
   Colonne de lecture limitée (65-75 caractères), interligne généreux,
   contraste renforcé, hiérarchie de titres nette. Design system Rekrufy.
   =========================================================================== */
.article-prose {
  max-width: 68ch;            /* ~65 à 75 caractères par ligne */
  margin-left: auto;
  margin-right: auto;
  font-size: 1.125rem;        /* ~18px sur ordinateur */
  line-height: 1.8;
  color: #2b2b2b;             /* contraste renforcé vs le gris d'origine */
}
.article-prose > *:first-child { margin-top: 0; }
.article-prose > *:last-child  { margin-bottom: 0; }

/* Paragraphes : espacement marqué entre blocs */
.article-prose p { margin: 0 0 1.4em; }

/* Hiérarchie des titres visible à l'intérieur de l'article */
.article-prose h2,
.article-prose h3 {
  color: var(--rek-text);
  font-weight: 700;
  line-height: 1.3;
  scroll-margin-top: 90px;
}
.article-prose h2 {
  font-size: 1.6rem;
  margin: 2.2em 0 0.7em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--rek-border-light);
}
.article-prose h3 {
  font-size: 1.28rem;
  margin: 1.8em 0 0.6em;
}

/* Mise en forme en ligne */
.article-prose strong, .article-prose b { color: var(--rek-text); font-weight: 700; }
.article-prose em, .article-prose i { font-style: italic; }
.article-prose u { text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Liens dans le corps : visibles et soulignés */
.article-prose a {
  color: var(--rek-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  font-weight: 500;
}
.article-prose a:hover { color: var(--rek-accent-hover); }

/* Listes aérées */
.article-prose ul,
.article-prose ol { margin: 0 0 1.4em; padding-left: 1.4rem; }
.article-prose li { margin-bottom: 0.55em; padding-left: 0.2rem; }
.article-prose li::marker { color: var(--rek-text-muted); }

/* Citations : bloc distinct, accent Rekrufy */
.article-prose blockquote {
  margin: 1.8em 0;
  padding: 0.4em 0 0.4em 1.25rem;
  border-left: 4px solid var(--rek-accent);
  color: var(--rek-text-secondary);
  font-style: italic;
  font-size: 1.15rem;
}
.article-prose blockquote p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
  .article-prose { font-size: 1.0625rem; line-height: 1.75; max-width: 100%; }
  .article-prose h2 { font-size: 1.4rem; }
  .article-prose h3 { font-size: 1.2rem; }
}

/* Barre de partage d'article (contexte clair) */
.article-share { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.article-share .footer-social {
  background: var(--rek-bg-light); color: var(--rek-text);
  border: 1px solid var(--rek-border-light); padding: 0; cursor: pointer;
}
.article-share .footer-social:hover { background: var(--rek-yellow); color: var(--rek-black); border-color: var(--rek-yellow); }
.article-share-feedback {
  font-size: .85rem; font-weight: 600; color: var(--rek-success);
  opacity: 0; transform: translateY(2px); transition: opacity .2s, transform .2s; margin-left: .35rem;
}
.article-share-feedback.show { opacity: 1; transform: translateY(0); }

/* 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; }

/* ==========================================================================
   Espace auteur, liste des articles avec statuts et retour de modération (A4)
   ========================================================================== */
.art-row {
  background: #fff; border: 1px solid var(--rek-border-light);
  border-radius: var(--radius-card); padding: 1.1rem 1.25rem; margin-bottom: 1rem;
  transition: var(--transition);
}
.art-row:hover { box-shadow: var(--shadow-card); }
.art-row--attention { border-left: 4px solid var(--rek-yellow); }
.art-row-head { display: flex; align-items: flex-start; gap: 1rem; }
.art-title { font-weight: 700; font-size: 1.02rem; margin-bottom: 0.15rem; }

.art-badge {
  flex-shrink: 0; padding: 0.28rem 0.7rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}
.art-badge--draft     { background: #F0F0EE; color: #5A5A5A; }
.art-badge--pending   { background: #FFF4CC; color: #8A6A00; }
.art-badge--published { background: #E7F6EC; color: #16A34A; }
.art-badge--changes   { background: #DCEBFF; color: #1D4ED8; }
.art-badge--rejected  { background: #FDECEC; color: #DC2626; }

.art-feedback {
  margin-top: 0.85rem; padding: 0.85rem 1rem;
  background: var(--rek-bg-light); border-left: 3px solid var(--rek-yellow);
  border-radius: var(--radius); font-size: 0.875rem; color: var(--rek-text-secondary);
}
.art-feedback--rejected { border-left-color: var(--rek-danger); }
.art-feedback-title { font-weight: 700; color: var(--rek-text); margin-bottom: 0.3rem; }

@media (max-width: 575.98px) {
  .art-row-head { flex-wrap: wrap; }
}

/* Champs obligatoires du profil (B4) */
.required-mark { color: var(--rek-danger); font-weight: 700; margin-left: 2px; }

.profile-missing {
  background: var(--rek-yellow-light);
  border-left: 4px solid var(--rek-yellow);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
}
.profile-missing .profile-missing-title { font-weight: 700; margin-bottom: 0.35rem; }
.profile-missing ul { margin: 0; padding-left: 1.15rem; font-size: 0.875rem; }
.profile-missing li { margin-bottom: 0.15rem; }

/* Blocs mis en avant de l'étape 2 : secteur / compétences / langues (B7) */
.profile-block {
  border: 1px solid #ECECE9;
  border-radius: var(--radius-card);
  padding: 1.35rem 1.35rem 1.15rem;
  background: #fff;
  transition: var(--transition);
}
.profile-block:hover { border-color: #DEDEDA; box-shadow: var(--shadow-card); }
.profile-block-head { display: flex; align-items: flex-start; gap: 0.9rem; margin-bottom: 1rem; }
.profile-block-ico {
  width: 42px; height: 42px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; font-size: 1.1rem;
  background: var(--rek-yellow); color: var(--rek-black);
}
.profile-block-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.15rem; }
.profile-block-hint { font-size: 0.83rem; color: var(--rek-text-secondary); }

/* Liseré de couleur par bloc pour les distinguer d'un coup d'œil */
.profile-block--sector { border-left: 4px solid var(--rek-yellow); }
.profile-block--skills { border-left: 4px solid var(--rek-accent); }
.profile-block--skills .profile-block-ico { background: var(--rek-accent); color: #fff; }
.profile-block--langs  { border-left: 4px solid var(--rek-success); }
.profile-block--langs  .profile-block-ico { background: var(--rek-success); color: #fff; }

@media (max-width: 575.98px) {
  .profile-block { padding: 1.1rem; }
  .profile-block-head { flex-wrap: wrap; }
}

/* ==========================================================================
   D.1, Bouton « Aperçu » du profil candidat
   Le client le trouvait trop discret en outline : fond jaune de marque,
   texte noir, ombre portée, taille supérieure au btn-sm précédent.
   Contraste #1A1A1A sur #FFB400 = 9,6:1, au-delà du seuil AA (4,5:1).
   ========================================================================== */
.btn-preview-rek {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rek-yellow);
  color: var(--rek-black);
  border: none;
  border-radius: var(--radius);
  padding: 0.7rem 1.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(255, 180, 0, 0.35);
  transition: var(--transition);
}
.btn-preview-rek:hover, .btn-preview-rek:focus {
  background: var(--rek-yellow-hover);
  color: var(--rek-black);
  box-shadow: 0 6px 16px rgba(255, 180, 0, 0.45);
  transform: translateY(-1px);
}
.btn-preview-rek:focus-visible { outline: 3px solid var(--rek-black); outline-offset: 2px; }
.btn-preview-rek:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(255, 180, 0, 0.35); }

@media (max-width: 575.98px) {
  /* Sur mobile le bouton passe pleine largeur sous le bloc Complétude */
  .btn-preview-rek { width: 100%; padding: 0.75rem 1rem; }
}

/* D.2, progression d'envoi des CV vidéo (jusqu'à 150 Mo) */
.upload-progress {
  padding: 0.9rem 1.1rem;
  background: var(--rek-bg-light);
  border: 1px solid var(--rek-border-light);
  border-radius: var(--radius);
}
.upload-progress-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; margin-bottom: 0.5rem; }
.upload-progress-bar { height: 8px; border-radius: 999px; background: #E5E5E2; overflow: hidden; }
.upload-progress-bar span {
  display: block; height: 100%; width: 0;
  background: var(--rek-yellow);
  transition: width 0.2s ease;
}
.upload-progress.is-error { border-color: var(--rek-danger); background: #FDECEC; }
.upload-progress.is-error .upload-progress-bar span { background: var(--rek-danger); }

/* Message d'erreur par emplacement vidéo */
.vs-error {
  margin-top: 0.5rem; padding: 0.5rem 0.7rem;
  background: #FDECEC; color: var(--rek-danger);
  border-radius: var(--radius-sm); font-size: 0.8rem; line-height: 1.4;
}

/* Indicateur d'enregistrement automatique du profil (wizard candidat) */
.autosave-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; white-space: nowrap;
}
.autosave-badge.is-saving { background: var(--rek-bg-light); color: var(--rek-text-secondary); }
.autosave-badge.is-saved  { background: #E7F6EC; color: var(--rek-success); }
.autosave-badge.is-error  { background: #FDECEC; color: var(--rek-danger); }
.autosave-badge.is-saving::before { content: "\f110"; font-family: "Font Awesome 6 Free"; font-weight: 900; animation: rek-spin 1s linear infinite; }
.autosave-badge.is-saved::before   { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.autosave-badge.is-error::before   { content: "\f071"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
@keyframes rek-spin { to { transform: rotate(360deg); } }

/* Bas de page discret des réglages : RGPD + suppression de compte */
.cand-account-footer { margin-top: 2.5rem; padding-top: 0.5rem; border-top: 1px solid #E8E8E6; }
.cand-account-footer .btn-link { font-size: 0.85rem; }
.cand-account-footer .border-top { border-color: #F0F0EE !important; }

/* 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; }

/* 4.3 : barre de progression des questions de prequalification (jaune, poignee mobile) */
.q-progress { --pct: 0%; max-width: 320px; margin-top: 0.7rem; }
.q-progress-track { position: relative; height: 8px; border-radius: 999px; background: var(--rek-border-light); }
.q-progress-fill { position: absolute; left: 0; top: 0; height: 100%; width: var(--pct); background: var(--rek-yellow); border-radius: 999px; transition: width 0.2s ease; }
.q-progress-handle {
  position: absolute; top: 50%; left: var(--pct);
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--rek-yellow); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -50%); transition: left 0.2s ease; opacity: 0;
}
.q-progress.is-set .q-progress-handle { opacity: 1; }
.q-progress-ends { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--rek-text-muted); margin-top: 0.45rem; }

/* 3.1 : blocage d'etape, champ obligatoire vide + bandeau + bouton desactive */
.field-required-msg { color: var(--rek-danger, #E2445C); font-size: 0.8125rem; margin-top: 0.3rem; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--rek-danger, #E2445C); box-shadow: 0 0 0 0.15rem rgba(226, 68, 92, 0.15); }
.required-banner {
  margin: 1rem 0 0; padding: 0.7rem 1rem; border-radius: 10px;
  background: #FDECEF; color: #A32036; border: 1px solid #F3C0CA; font-size: 0.9rem;
}
.btn-dark-rek:disabled, .btn-dark-rek[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* 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;
  border: 1px solid var(--rek-border);
}
.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;
  box-shadow: var(--shadow-postit); 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; }
  .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 */
/* ==========================================================================
   Vitrine entreprise, rubriques Équipe et Actualités (A3)
   ========================================================================== */

/* Cards membres d'équipe */
.team-card {
  background: #fff; border: 1px solid var(--rek-border-light);
  border-radius: var(--radius-card); overflow: hidden;
  display: flex; flex-direction: column; transition: var(--transition);
}
.team-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.team-card-media { background: #F2F2F0; }
.team-card-media img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.team-card-body { padding: 1rem 1.15rem 1.15rem; }
.team-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.team-name { font-weight: 700; line-height: 1.2; }
.team-role { font-size: 0.8125rem; color: var(--rek-text-secondary); }
.team-quote {
  margin: 0.75rem 0 0; padding-left: 0.85rem;
  border-left: 3px solid var(--rek-yellow);
  font-size: 0.875rem; font-style: italic; color: var(--rek-text-secondary);
}
.team-linkedin { display: inline-block; margin-top: 0.75rem; font-size: 0.8125rem; font-weight: 600; color: var(--rek-accent); }

/* Équipe par service (lot 5, 1.4, référence Allianz, palette Rekrufy) */
.team-service { margin-bottom: 2.75rem; }
.team-service-head { margin-bottom: 1rem; }
.team-service-head h3 { font-weight: 800; margin: 0; }
.team-service-head p { color: var(--rek-text-secondary); margin: 0.25rem 0 0; }
/* 6.2 : affichage un peu plus grand des photos et videos de service. */
/* Lot 21 : galerie Equipe fusionnee (photos + videos), vignettes agrandies. */
.team-gallery { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.5rem; }
.team-tile {
  position: relative; flex: 0 0 auto; width: 280px; height: 180px;
  border-radius: 14px; overflow: hidden; background: #000; display: block;
  text-decoration: none; box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,.08));
}
.team-tile img, .team-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-tile--video { cursor: pointer; }
.team-tile--video .tile-play {
  position: absolute; inset: 0; margin: auto; width: 54px; height: 54px;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  cursor: pointer; transition: background .15s, transform .15s;
}
.team-tile--video:hover .tile-play { background: var(--rek-yellow, #FFB400); color: #1A1A1A; transform: scale(1.06); }
.team-tile--video.is-playing .tile-play,
.team-tile--video.is-playing .tile-duration { display: none; }
.team-tile--video .tile-duration {
  position: absolute; left: 8px; bottom: 8px;
  background: rgba(0,0,0,.72); color: #fff; font-size: 0.72rem; font-weight: 600;
  padding: 1px 7px; border-radius: 6px; font-variant-numeric: tabular-nums;
}
.team-member-row {
  display: grid; grid-template-columns: 132px 1fr; gap: 1.25rem;
  align-items: stretch; margin-bottom: 1.15rem;
}
.team-member-thumb img, .team-member-thumb .team-initial {
  width: 132px; height: 132px; border-radius: 14px; object-fit: cover; display: block;
}
.team-member-thumb .team-initial {
  display: flex; align-items: center; justify-content: center;
  background: var(--rek-yellow-light); color: var(--rek-black);
  font-size: 2.25rem; font-weight: 800;
}
/* Lot 21b : charte (accent jaune #FFB400, texte noir), abandon de la palette multicolore
   du lot 5 sur la vitrine Equipe. Nom du salarie en MAJUSCULES (point 3, par CSS, la donnee
   n'est pas modifiee) ; la fonction reste en casse normale. */
.team-quote-block {
  position: relative; background: #fff; border-radius: 14px;
  border-left: 6px solid var(--rek-yellow, #FFB400);
  box-shadow: var(--shadow-card, 0 1px 3px rgba(0,0,0,.08));
  padding: 1.15rem 1.35rem; display: flex; flex-direction: column; justify-content: center;
}
.team-quote-block .tq-text { font-size: 1.02rem; font-style: italic; color: var(--rek-text); margin: 0 0 0.6rem; }
.team-quote-block .tq-meta { font-weight: 700; color: var(--rek-black, #1A1A1A); text-transform: uppercase; letter-spacing: .01em; }
.team-quote-block .tq-meta .tq-role { color: var(--rek-text-secondary); font-weight: 500; text-transform: none; }
.team-quote-block .tq-links { margin-top: 0.5rem; display: flex; gap: 0.9rem; flex-wrap: wrap; }
.team-quote-block .tq-links a { font-size: 0.8125rem; font-weight: 600; color: var(--rek-black, #1A1A1A); }

/* Lot 21b : bande "Autres membres" (salaries sans temoignage), charte jaune/noir. */
.team-others { margin-top: 1.5rem; }
.team-others-title { font-size: 1rem; font-weight: 700; color: var(--rek-black, #1A1A1A); margin-bottom: 0.9rem; }
.team-others-grid { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.team-other { display: flex; align-items: center; gap: 0.75rem; flex: 1 1 240px; max-width: 340px; }
.team-other-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.team-other-initial { display: inline-flex; align-items: center; justify-content: center; background: var(--rek-yellow, #FFB400); color: var(--rek-black, #1A1A1A); font-weight: 700; }
.team-other-info { min-width: 0; }
.team-other-name { font-weight: 700; color: var(--rek-black, #1A1A1A); text-transform: uppercase; letter-spacing: .01em; }
.team-other-role { color: var(--rek-text-secondary); font-size: 0.85rem; }
.team-other-links { margin-top: 0.2rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.team-other-links a { font-size: 0.8125rem; font-weight: 600; color: var(--rek-black, #1A1A1A); }
@media (max-width: 575.98px) {
  .team-member-row { grid-template-columns: 1fr; }
  .team-member-thumb img, .team-member-thumb .team-initial { width: 88px; height: 88px; }
  .team-tile { width: 100%; height: 200px; }
}

/* Timeline des actualités */
.news-timeline { position: relative; padding-left: 1.75rem; }
.news-timeline::before {
  content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px;
  width: 2px; background: var(--rek-border-light);
}
.news-item { position: relative; padding-bottom: 2rem; }
.news-item::before {
  content: ''; position: absolute; left: -1.75rem; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--rek-yellow); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--rek-yellow);
}
.news-date { font-size: 0.8125rem; color: var(--rek-text-muted); margin-bottom: 0.25rem; }
.news-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.75rem; }
.news-media { border-radius: var(--radius); overflow: hidden; margin-bottom: 0.85rem; max-width: 560px; }
.news-media img { width: 100%; display: block; }
.news-content { color: var(--rek-text-secondary); font-size: 0.9375rem; line-height: 1.65; }

/* Cartes actualités (lot 5, 1.5, antéchronologique, lien vers l'article complet) */
.news-card {
  background: #fff; border: 1px solid var(--rek-border-light); border-radius: var(--radius-card, 14px);
  overflow: hidden; color: inherit; transition: box-shadow 0.2s, transform 0.2s;
}
.news-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.news-card-media { aspect-ratio: 16/9; background: #F2F2F0; overflow: hidden; }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--rek-text-muted); font-size: 1.75rem; }
.news-card-body { padding: 1rem 1.15rem 1.15rem; }
.news-card-date { font-size: 0.8125rem; color: var(--rek-text-muted); margin-bottom: 0.4rem; }
.news-card-title { font-size: 1.05rem; font-weight: 700; line-height: 1.3; margin: 0 0 0.5rem; color: var(--rek-text); }
.news-card-excerpt { font-size: 0.9rem; color: var(--rek-text-secondary); line-height: 1.55; margin: 0 0 0.85rem; }
.news-card-more { font-size: 0.85rem; font-weight: 700; color: var(--rek-accent); }
.news-card:hover .news-card-more { text-decoration: underline; }

/* Bloc photos / vidéos / liens commun à chaque rubrique */
.section-extras { padding-top: 1.5rem; border-top: 1px solid var(--rek-border-light); }

@media (max-width: 575.98px) {
  .news-timeline { padding-left: 1.35rem; }
  .news-item::before { left: -1.35rem; }
}

.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) */
@keyframes rekImgReveal { to { opacity: 1; } }
.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;
  /* Filet de sécurité : révèle l'image même si le JS .is-loaded n'est pas exécuté (ex. layout sans le script) */
  animation: rekImgReveal 0.45s ease forwards 0.8s;
}
.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; 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; 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 */
/* Colonnes vraiment egales : minmax(0,1fr) empeche le nowrap du titre violet
   d'elargir sa colonne au detriment du vert. Padding reduit pour gagner en
   largeur utile (le montant « +5 000 MAD » ne doit jamais etre coupe). */
/* Colonnes egales, rangee un peu plus etroite que la carte d'offre pour que le
   titre vert « Decrochez votre emploi » passe sur deux lignes. Contenu ALIGNE
   EN HAUT (meme depart que le bloc violet), pas centre. */
.hero-badge-row { display: grid; grid-template-columns: minmax(0, 15fr) minmax(0, 25fr); gap: 14px; max-width: 494px; margin: 14px auto 0; align-items: stretch; }
.hero-badge-row .postit { margin: 0; height: 100%; padding: 20px; display: flex; flex-direction: column; justify-content: flex-start; }
@media (max-width: 560px) { .hero-badge-row { grid-template-columns: 1fr; max-width: none; } }
/* Ligne de tete : icone a gauche, badge (NOUVEAU) cale a droite */
.hero-badge-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }

/* Carte d'offre mise en avant (hero accueil), maquette client */
.hero-offer-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hero-offer-titles { min-width: 0; }
.hero-offer-company { display: block; font-weight: 800; font-size: 1.15rem; color: var(--rek-black); line-height: 1.2; }
.hero-offer-role { display: block; font-weight: 700; font-size: 1.15rem; color: var(--rek-accent); line-height: 1.25; margin-top: 2px; }
.hero-offer-meta { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: .85rem; color: var(--rek-text-secondary); margin-bottom: 14px; }
.hero-offer-meta i { color: var(--rek-text-muted); margin-right: 5px; }
.hero-offer-sep { width: 1px; height: 15px; background: var(--rek-border); display: inline-block; }
.hero-offer-reward { display: block; width: 100%; text-align: center; background: var(--rek-accent); color: #fff; font-weight: 700; font-size: .95rem; padding: .6rem 1rem; border-radius: 100px; }
.hero-offer-reward i { margin-right: 6px; }
.hero-offer-stats { display: flex; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rek-border-light); }
.hero-offer-stat { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; }
.hero-offer-stat-ico { width: 38px; height: 38px; border-radius: 50%; background: rgba(79,70,229,.13); color: var(--rek-accent); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.hero-offer-stat-label { display: block; font-size: .82rem; color: var(--rek-text-secondary); }
.hero-offer-stat-value { display: block; font-weight: 700; font-size: .95rem; color: var(--rek-black); }

/* Deux cartes du bas : pastille de tete + badge pertinence */
.hero-badge-ico { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; margin-bottom: 10px; }
.hero-badge-ico--green { background: rgba(22,163,74,.15); color: var(--rek-success); }
.hero-badge-ico--violet { background: rgba(79,70,229,.13); color: var(--rek-accent); }
/* Pastille « Jusqu'a 98% de pertinence » : compacte (largeur du texte), texte
   gris normal, seul « 98% » en gras et plus grand. */
.hero-relevance { align-self: flex-start; display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; background: var(--postit-purple); color: var(--rek-text-secondary); font-weight: 400; font-size: .62rem; padding: .3rem .6rem; border-radius: 100px; margin-top: 10px; }
.hero-relevance i { color: var(--rek-accent); align-self: center; }
.hero-relevance strong { color: var(--rek-accent); font-weight: 700; font-size: .82rem; }
@media (max-width: 380px) { .hero-offer-stats { flex-direction: column; gap: 10px; } }

/* Contenu des pages statiques (HTML édité dans l'admin) */
/* Champ de texte libre affiche en paragraphes (vitrine : valeurs, projets, processus) */
.free-text { line-height: 1.7; }

.static-prose { line-height: 1.75; color: var(--rek-text-secondary); }
.static-prose h2 { font-size: 1.3rem; font-weight: 800; color: var(--rek-black); margin: 1.8rem 0 .6rem; }
.static-prose h3 { font-size: 1.08rem; font-weight: 700; color: var(--rek-black); margin: 1.2rem 0 .4rem; }
.static-prose p { margin-bottom: 1rem; }
.static-prose ul, .static-prose ol { margin: 0 0 1rem 1.2rem; }
.static-prose li { margin-bottom: .4rem; }
.static-prose a { color: var(--rek-accent); }
.static-prose strong { color: var(--rek-black); }

/* Repli local card offre (sans picsum) : couverture sobre + logo initiales */
.job-card-cover-fallback { display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; min-height: 100%; }
.job-card-cover-fallback .job-cover-name { color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1.3; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.job-card-logo--initials { display: inline-flex; align-items: center; justify-content: center; background: var(--rek-yellow); color: var(--rek-black); font-weight: 800; font-size: 1.05rem; text-decoration: none; }

/* Repli local card article (sans picsum) */
.article-card-cover-fallback { display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; width: 100%; height: 100%; min-height: 180px; }
.article-card-cover-fallback span { color: #fff; font-weight: 700; font-size: 1rem; line-height: 1.35; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.article-card-author-initials { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--rek-yellow); color: var(--rek-black); font-weight: 800; font-size: .78rem; flex-shrink: 0; }