/* ==========================================================================
   Jobivoire — Espace recruteur / Marché de talents
   Couche CSS personnalisée sur Bootstrap 5. Variables CSS pour tout centraliser.
   ========================================================================== */

:root {
  /* Couleurs de marque (issues de la charte Jobivoire) */
  --color-primary: #ff6a1a;
  --color-primary-dark: #e05a10;
  --color-primary-darker: #c24c0c;
  --color-primary-light: #fdecd8;
  --color-primary-lighter: #fff6ee;

  --color-dark: #17181a;
  --color-dark-soft: #2b2c2e;

  --color-text: #1f2124;
  --color-text-muted: #6b7076;
  --color-text-faint: #9a9fa6;

  --color-white: #ffffff;
  --color-bg: #ffffff;

  --color-success: #1b8a5a;
  --color-success-bg: #e7f5ee;
  --color-warning: #c7790a;
  --color-warning-bg: #fdecd8;
  --color-danger: #d23c3c;
  --color-danger-bg: #fbe9e9;
  --color-info: #2f6fb0;
  --color-info-bg: #eaf2fa;

  /* Rayons */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Ombres neutres (jamais colorées) */
  --shadow-sm: 0 1px 2px rgba(23, 24, 26, 0.06), 0 1px 1px rgba(23, 24, 26, 0.04);
  --shadow-md: 0 10px 24px rgba(23, 24, 26, 0.08);
  --shadow-lg: 0 24px 48px rgba(23, 24, 26, 0.14);

  /* Typo */
  --font-heading: "Mulish", "Segoe UI", sans-serif;
  --font-body: "Mulish", "Segoe UI", sans-serif;

  --header-height: 72px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 56px); }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-dark); font-weight: 700; letter-spacing: -0.01em; }

a { color: var(--color-primary-darker); text-decoration: none; }
a:hover { color: var(--color-primary-dark);}

.text-muted-jv { color: var(--color-text-muted) !important; }
.text-faint { color: var(--color-text-faint) !important; }
.text-primary-jv { color: var(--color-primary) !important; }
.bg-soft { background: var(--color-bg-soft) !important; }

/* ---------------------------------- Boutons ---------------------------------- */
.btn { font-family: var(--font-heading); font-weight: 600; border-radius: var(--radius-pill); border: none; padding: 0.6rem 1.25rem; transition: background-color .15s ease, color .15s ease, transform .1s ease; }
.btn:active { transform: translateY(1px); }
.btn:focus { box-shadow: 0 0 0 3px rgba(255, 106, 26, 0.22); }

.btn-primary-jv { background: var(--color-primary); color: var(--color-white); }
.btn-primary-jv:hover { background: var(--color-primary-dark); color: var(--color-white); }
.btn-primary-jv:disabled { background: var(--color-text-faint); color: var(--color-white); }

.btn-dark-jv { background: var(--color-dark); color: var(--color-white); }
.btn-dark-jv:hover { background: var(--color-dark-soft); color: var(--color-white); }

.btn-outline-jv { background: var(--color-white); color: var(--color-dark); border: 1px solid var(--color-border); }
.btn-outline-jv:hover { background: var(--color-bg-soft); color: var(--color-dark); }

.btn-ghost-jv { background: transparent; color: var(--color-text); border: 1px solid transparent; }
.btn-ghost-jv:hover { background: var(--color-bg-soft-2); }

.btn-soft-primary-jv { background: var(--color-primary-light); color: var(--color-primary-darker); }
.btn-soft-primary-jv:hover { background: #fbe0c4; color: var(--color-primary-darker); }

.btn-sm-jv { padding: 0.4rem 0.9rem; font-size: 0.85rem; }
.btn-icon-jv { width: 42px; height: 42px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); }

/* ---------------------------------- Navbar ---------------------------------- */
.navbar-jv { background: var(--color-white); border-bottom: 1px solid var(--color-border); height: var(--header-height); }
.navbar-jv .navbar-brand { font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem; color: var(--color-dark); display: flex; align-items: center; gap: 0.5rem; }
.navbar-jv .navbar-brand .brand-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.navbar-jv .nav-link { font-weight: 600; color: var(--color-text); padding: 0.5rem 0.9rem !important; }
.navbar-jv .nav-link.active, .navbar-jv .nav-link:hover { color: var(--color-primary-darker); }
.navbar-jv .dropdown-menu { border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.navbar-jv .user-chip { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem 0.35rem 0.35rem; border-radius: var(--radius-pill); border: 1px solid var(--color-border); }
.navbar-jv .user-chip .avatar-xs { width: 30px; height: 30px; border-radius: 50%; background: var(--color-dark); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; }


/* ---------------------------------- Barre de recherche ---------------------------------- */
.search-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 0.6rem; }
.search-card .form-control, .search-card .form-select { border: none; background: transparent; font-weight: 500; width: 100%; min-width: 0; text-overflow: ellipsis; }
.search-card .form-control:focus, .search-card .form-select:focus { box-shadow: none; }
.search-card > .row > [class*="col-"] { min-width: 0; }
.search-divider { border-color: var(--color-border) !important; }
@media (max-width: 991.98px) { .search-divider { border-top: 1px solid var(--color-border) !important; border-left: 0 !important; padding-top: 0.75rem !important; } }

/* ---------------------------------- Filtres ---------------------------------- */
.filters-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.25rem; }
.filters-card h3 { font-size: 1rem; margin-bottom: 0; }
.filter-group + .filter-group { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--color-border-soft); }
.filter-group .form-check { margin-bottom: 0.45rem; }
.filter-group .form-check-input { border-color: var(--color-text-faint); }
.filter-group .form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); }
.filter-group .form-check-label { font-size: 0.92rem; color: var(--color-text); }
.filter-count { color: var(--color-text-faint); font-size: 0.82rem; }

/* ---------------------------------- Cartes talent (grille) ---------------------------------- */
.talent-card { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: box-shadow .18s ease, transform .18s ease; overflow: visible; }
.talent-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.talent-card .card-body { text-align: center; padding-top: 0.75rem; }
@media screen and (max-width: 885px){
.talent-card .card-body{ padding: .65rem}
}
.btn-fav { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-white); color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; }
.btn-fav:hover { color: var(--color-primary); border-color: var(--color-primary-light); }
.btn-fav.is-active { color: var(--color-primary); }
.btn-fav.is-active i::before { content: "\f415"; } /* bi-heart-fill fallback handled via class swap in JS too */

.talent-card-top { padding: 1.5rem 1rem 0; display: flex; justify-content: center; }
.talent-avatar { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; background-size: cover; background-position: center; border: 1px solid var(--color-border); }
.talent-avatar--initials { background: var(--color-bg-soft-2); color: var(--color-text); }
@media screen and (max-width: 885px){
  .talent-card-top { padding: 0.85rem .95rem 0;}
}

.talent-name { font-size: 1rem; font-weight: 700; margin: 0; }
.text-verified { color: var(--color-info); font-size: 0.9rem; }
.talent-title { font-size: 0.9rem; color: var(--color-text); font-weight: 600; margin: 0.15rem 0 0.3rem; }
.talent-meta { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 0.6rem; }
.talent-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-bottom: 0.9rem; }
@media screen and (max-width: 885px){
  .talent-name { font-size: 0.85rem;}
  .talent-title {font-size: 0.75rem;}
  .text-verified {font-size: 0.78rem; }
  .talent-badges {  margin-bottom: 0.6rem; }
}

.badge-jv { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; font-weight: 600; padding: 0.3rem 0.6rem; border-radius: var(--radius-pill); }
.badge-cv { background: var(--color-bg-soft-2); color: var(--color-text); }
.badge-gig { background: var(--color-primary-light); color: var(--color-primary-darker); }
.badge-dispo { background: var(--color-bg-soft-2); color: var(--color-text-muted); }
.badge-dispo .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--color-text-faint); }
.badge-dispo--now { background: var(--color-success-bg); color: var(--color-success); }
.badge-dispo--now .dot { background: var(--color-success); }
.badge-dispo--soon { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-dispo--soon .dot { background: var(--color-warning); }
.badge-dispo--no { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-dispo--no .dot { background: var(--color-danger); }

.talent-card-link { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; background: var(--color-white); border: 1px solid var(--color-border); color: var(--color-dark); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.talent-card-link:hover { background: var(--color-dark); color: var(--color-white); text-decoration: none; }

/* Domaine tag chip */
.chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 600; padding: 0.32rem 0.7rem; border-radius: var(--radius-pill); background: var(--color-bg-soft-2); color: var(--color-text); border: 1px solid var(--color-border); }
.chip--link { text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.chip--link:hover { border-color: var(--color-primary); color: var(--color-primary-darker); }
.chip-active { background: var(--color-dark); color: var(--color-white); border-color: var(--color-dark); }
.chip-remove { cursor: pointer; }

/* ---------------------------------- Résultats bar ---------------------------------- */
.results-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------------------------------- Pagination ---------------------------------- */
.pagination-jv .page-link { border: none; color: var(--color-text); font-weight: 600; border-radius: var(--radius-pill); margin: 0 3px; }
.pagination-jv .page-item.active .page-link { background: var(--color-dark); color: var(--color-white); }
.pagination-jv .page-link:hover { background: var(--color-bg-soft-2); color: var(--color-text); }

/* ---------------------------------- Profil : bandeau ---------------------------------- */
.profile-header-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.75rem; }
.profile-avatar-wrap { position: relative; width: 128px; height: 128px; flex: none; }
.profile-avatar { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; border: 1px solid var(--color-border); background: var(--color-bg-soft-2); }
.profile-verified-badge { position: absolute; bottom: 4px; right: 4px; width: 30px; height: 30px; border-radius: 50%; background: var(--color-info); color: var(--color-white); display: flex; align-items: center; justify-content: center; border: 3px solid var(--color-white); font-size: 0.9rem; }

.profile-meta-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; font-size: 0.9rem; color: var(--color-text-muted); }
.profile-meta-list i { color: var(--color-text-faint); }

/* ------------- Sous-navigation (scrollspy) ------------ */
.subnav-jv { position: sticky; top: var(--header-height); z-index: 10; background: var(--color-white); border-bottom: 1px solid var(--color-border); }
.subnav-jv .nav-link { color: var(--color-text-muted); font-weight: 600; padding: 0.9rem 1rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.subnav-jv .nav-link.active { color: var(--color-primary-darker); border-bottom-color: var(--color-primary); }
.subnav-jv .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.subnav-jv .nav::-webkit-scrollbar { display: none; }

/* ------------- Sections de contenu profil ------------- */
.section-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.75rem; margin-bottom: 1.5rem; }
.section-card h2 { font-size: 1.15rem; margin-bottom: 1.1rem; display: flex; align-items: center; gap: 0.5rem; }
.section-card h2 i { color: var(--color-primary); }
@media (max-width: 885px) {
  .section-card{ padding: .95rem; }
}
/* Contacts */
.contact-card { background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.25rem; }
.contact-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border-soft); }
.contact-row:last-child { border-bottom: none; }
.contact-row .contact-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--color-white); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); flex: none; }
.contact-value { font-weight: 600; font-size: 0.92rem; }
.contact-value.locked { filter: blur(4px); user-select: none; color: var(--color-text-faint); }
.contact-locked-note { font-size: 0.82rem; color: var(--color-text-muted); }

/* Timeline (formations / expériences) */
.timeline-jv { position: relative; padding-left: 1.75rem; }
.timeline-jv::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: var(--color-border); }
.timeline-item { position: relative; padding-bottom: 1.5rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ""; position: absolute; left: -1.75rem; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: var(--color-primary-light); border: 2px solid var(--color-primary); }
.timeline-item .period { font-size: 0.78rem; color: var(--color-text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.timeline-item h4 { font-size: 0.98rem; margin: 0.15rem 0 0.1rem; }
.timeline-item .org { font-size: 0.88rem; color: var(--color-text-muted); margin-bottom: 0.35rem; }

/* Compétences / langues */
.skill-row { margin-bottom: 0.9rem; }
.skill-row:last-child { margin-bottom: 0; }
.skill-row-head { display: flex; justify-content: space-between; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.35rem; }
.skill-bar-track { height: 6px; border-radius: var(--radius-pill); background: var(--color-bg-soft-2); overflow: hidden; }
.skill-bar-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-pill); }

/* Certifications */
.cert-item { display: flex; gap: 0.9rem; padding: 0.9rem 0; border-bottom: 1px solid var(--color-border-soft); }
.cert-item:last-child { border-bottom: none; }
.cert-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--color-primary-light); color: var(--color-primary-darker); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex: none; }

/* Portfolio */
.portfolio-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-white); transition: box-shadow .18s ease; }
.portfolio-item:hover { box-shadow: var(--shadow-md); }
.portfolio-thumb { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; display: block; background: var(--color-bg-soft-2); }
.portfolio-item .p-body { padding: 0.9rem 1rem; }
.portfolio-item h4 { font-size: 0.92rem; margin: 0 0 0.25rem; }
@media (max-width: 885px) {
  .portfolio-item .p-body { padding: 0.54rem }
}
/* Gigs / services */
.gig-card {overflow: hidden; background: var(--color-white); height: 100%; display: flex; flex-direction: column; transition: all .18s ease; }
.gig-card:hover { transform: translateY(-3px);}
.gig-thumb { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; display: block; background: var(--color-bg-soft-2); }
.gig-thumb-wrap { position: relative; }
.gig-thumb-fallback { display: flex; align-items: center; justify-content: center; color: var(--color-text-faint); font-size: 1.4rem; }
.gig-gallery-badge { position: absolute; bottom: 0.5rem; right: 0.5rem; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 600; padding: 0.22rem 0.55rem; border-radius: var(--radius-pill); background: rgba(11,10,10,0.72); color: var(--color-white); z-index: 2; }
.gig-gallery-badge svg { width: 12px; height: 12px; }

/* Carrousel léger des cartes de listing (`/services`) : fait maison (pas le
   composant `carousel` de Bootstrap, boutons/points posés en frères de l'`<a>`
   plutôt qu'imbriqués dedans, pour rester cliquable partout ailleurs sans
   déclencher la navigation). Photos déjà recadrées 16:9 côté back (galerie
   Service, V3.1.12), l'aspect-ratio du conteneur ne fait que fiabiliser ce
   que le rendu à photo unique obtenait déjà naturellement. */
.gig-media { aspect-ratio: 16 / 9; }
.gig-carousel-track { position: relative; display: block; height: 100%; }
.gig-carousel .gig-carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease; }
.gig-carousel .gig-carousel-slide.is-active { opacity: 1; }
.gig-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: none; border-radius: 50%; background: var(--color-white); color: var(--color-dark); display: flex; align-items: center; justify-content: center; font-size: 0.68rem; box-shadow: var(--shadow-sm); opacity: 0; transition: opacity .15s ease, background-color .15s ease; z-index: 2; }
.gig-carousel:hover .gig-carousel-nav, .gig-carousel-nav:focus-visible { opacity: 1; }
.gig-carousel-nav--prev { left: 8px; }
.gig-carousel-nav--next { right: 8px; }
.gig-carousel-nav:hover { background: var(--color-bg-soft-2); }
.gig-carousel-dots { position: absolute; left: 0; right: 0; bottom: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 0.3rem; z-index: 2; }
.gig-carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.65); transition: width .15s ease, background-color .15s ease; }
.gig-carousel-dot.is-active { width: 16px; border-radius: var(--radius-pill); background: var(--color-white); }
@media (max-width: 885px) {
  .gig-carousel-nav { opacity: 1; }
}
.gig-card .p-body { padding-top: 0.75rem; flex: 1; display: flex; flex-direction: column; }
.gig-card .gig-title { font-size: 1.12rem; margin: 0; font-weight: normal}
.gig-price { font-size: 0.98rem; color: var(--color-warning); }
.gig-price strong { color: var(--color-dark); font-size: 1rem; }
.gig-title{line-height: 24px}
.gig-card:hover .gig-title{ text-decoration: underline;}
/* Sidebar */
.sidebar-sticky { position: sticky; top: calc(var(--header-height) + 70px); }
.quickfacts-list { display: flex; flex-direction: column; gap: 0.7rem; }
.quickfacts-list .row-item { display: flex; align-items: center; gap: 0.7rem; font-size: 0.88rem; }
.quickfacts-list .row-item i { color: var(--color-text-faint); width: 18px; text-align: center; }
.quickfacts-list .row-item .label { color: var(--color-text-muted); }
.quickfacts-list .row-item .value { font-weight: 600; margin-left: auto; text-align: right; }

/* Crédits badge */
.credits-pill { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 700; color: var(--color-primary-darker); background: var(--color-primary-light); border-radius: var(--radius-pill); padding: 0.3rem 0.7rem; }

/* ---------------------------------- Modals ---------------------------------- */
.modal-content { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--color-border-soft); }
.modal-footer { border-top: 1px solid var(--color-border-soft); }

.share-option { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 0.4rem; border-bottom: 1px solid var(--color-border-soft); }
.share-option:last-child { border-bottom: none; }
.share-option .share-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--color-bg-soft-2); display: flex; align-items: center; justify-content: center; flex: none; }
 
/* ---------------------------------- Barre d'actions mobile (sticky bottom) ---------------------------------- */
.mobile-actionbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; background: var(--color-white); border-top: 1px solid var(--color-border); box-shadow: 0 -6px 20px rgba(23,24,26,0.08); padding: 0.6rem 0.75rem; display: flex; gap: 0.5rem; }
.mobile-actionbar .btn { flex: 1; font-size: 0.8rem; padding: 0.55rem 0.4rem; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; border-radius: var(--radius-md); }
.mobile-actionbar .btn i { font-size: 1.05rem; }

@media (max-width: 767.98px) {
  body.has-mobile-bar { padding-bottom: 84px; }
  .profile-header-card { padding: 1.25rem; text-align: center; }
  .profile-header-card .d-flex.gap-4 { flex-direction: column; align-items: center; }
  .profile-meta-list { justify-content: center; }
}

.offcanvas-jv .offcanvas-header { border-bottom: 1px solid var(--color-border-soft); }

/* ---------------------------------- Services / gigs ---------------------------------- */
.gig-hero { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-bg-soft-2); }

/* Carrousel de galerie (`.gig-hero.carousel`) : boutons précédent/suivant en
   cercles blancs de taille fixe (au lieu des flèches translucides par défaut
   de Bootstrap, peu lisibles sur une photo claire), indicateurs en points
   arrondis plutôt que les barres rectangulaires par défaut. */
.gig-hero.carousel .carousel-control-prev,
.gig-hero.carousel .carousel-control-next {
  top: 50%;
  bottom: auto;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  background: var(--color-white);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  opacity: 1;
  transition: background-color .15s ease;
}
.gig-hero.carousel .carousel-control-prev { left: 12px; }
.gig-hero.carousel .carousel-control-next { right: 12px; }
.gig-hero.carousel .carousel-control-prev:hover,
.gig-hero.carousel .carousel-control-next:hover { background: var(--color-bg-soft-2); }
.gig-hero.carousel .carousel-control-prev-icon,
.gig-hero.carousel .carousel-control-next-icon {
  width: 16px;
  height: 16px;
  filter: invert(1);
}
.gig-hero.carousel .carousel-indicators { align-items: center; margin-bottom: 0.75rem; }
.gig-hero.carousel .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background-color: var(--color-white);
  border: none;
  opacity: 0.6;
  margin: 0 4px;
  transition: width .15s ease, opacity .15s ease;
}
.gig-hero.carousel .carousel-indicators [data-bs-target].active {
  width: 22px;
  opacity: 1;
}

/* Dernier item du carrousel de galerie (`.gig-hero-contact-slide`) : overlay
   noir transparent posé sur la même photo de couverture, avec les actions de
   contact direct au premier plan — évite d'obliger le visiteur à descendre
   jusqu'à la sidebar pour agir. */
.gig-hero-contact-slide {
  background-size: cover;
  background-position: center;
  background-color: var(--color-dark);
}
.gig-hero-contact-overlay {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(11, 10, 10, 0.6);
  text-align: center;
}
.gig-hero-contact-title {
  color: var(--color-white);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0;
}
.gig-hero-contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.gig-hero-contact-btn { border-radius: var(--radius-md); font-weight: 600; }
.provider-mini { display: flex; align-items: center; gap: 0.85rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-soft); }
.provider-mini .avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid var(--color-border); flex: none; }
.pricing-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.price-big { font-size: 1.9rem; font-weight: 800; color: var(--color-dark); line-height: 1; }
.pricing-table-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
@media (max-width: 885px) {
  .pricing-table-wrap { overflow-x: auto; }
}
.pricing-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 0; }
.pricing-table th { background: var(--color-dark); color: var(--color-white); text-align: left; padding: 0.75rem 1rem; font-weight: 700; }
.pricing-table td { padding: 0.85rem 1rem; border-top: 1px solid var(--color-border-soft); vertical-align: top; }
.pricing-table tr:nth-child(even) td { background: var(--color-bg-soft); }
.pricing-table .tier-price { font-weight: 700; color: var(--color-primary-darker); white-space: nowrap; }
.social-icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-text); background: var(--color-white); }
.social-icon-btn:hover { background: var(--color-bg-soft-2); color: var(--color-text); text-decoration: none; }
.rich-text p { margin-bottom: 0.9rem; }
.rich-text ul, .rich-text ol { padding-left: 1.2rem; margin-bottom: 0.9rem; }
.rich-text li { margin-bottom: 0.35rem; }
.rich-text h2 { font-size: 1.2rem; margin: 1.25rem 0 0.6rem; }
.rich-text h3 { font-size: 1.1rem; margin: 1.2rem 0 0.55rem; }
.rich-text h4, .rich-text h5 { font-size: 1rem; margin: 1.1rem 0 0.5rem; }
.rich-text strong, .rich-text b { font-weight: 700; }
.rich-text blockquote { margin: 0 0 0.9rem; padding: 0.6rem 1rem; border-left: 3px solid var(--color-primary); background: var(--color-bg-soft); color: var(--color-text-muted); }
.rich-text > *:last-child { margin-bottom: 0; }

/* Habillage Quill (éditeur riche des formulaires) : le CDN ne fournit que la
   forme brute, ces règles l'alignent sur l'identité Jobivoire (bordures
   arrondies cohérentes, pas de box-shadow colorée — CLAUDE.md). */
.ql-toolbar.ql-snow { border-color: var(--color-border); border-radius: 10px 10px 0 0; background: var(--color-bg-soft); }
.ql-container.ql-snow { border-color: var(--color-border); border-radius: 0 0 10px 10px; font-family: inherit; font-size: 0.95rem; }
.ql-editor { min-height: 160px; }
.ql-editor.ql-blank::before { color: var(--color-text-muted); font-style: normal; }
.ql-snow .ql-stroke { stroke: var(--color-text); }
.ql-snow .ql-fill { fill: var(--color-text); }
.ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active { color: var(--color-primary); }
.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke { stroke: var(--color-primary); }
.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-fill { fill: var(--color-primary); }
.delivery-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 600; color: var(--color-text-muted); }
.g-2,
.gx-2 {
  --bs-gutter-x: 0.63rem !important;
}.text-info{color: var(--color-info);}
.fs-10{font-size : 0.75rem !important;}

/* Carte Talent : badges d'expérience et ligne de fraîcheur
   (TODO.md Chantier V3.4 Lot D). Le badge d'expérience reprend le gabarit
   neutre de `.badge-cv` — un troisième ton de couleur sur une carte déjà
   dense n'apporterait aucune hiérarchie, seulement du bruit. */
.badge-exp { background: var(--color-bg-soft-2); color: var(--color-text-muted); }

/* Case de sélection multiple (TODO.md Chantier V3.5 Lot D) : coin opposé du
   bouton favori (.btn-fav, top/right) pour ne jamais se superposer. */
.jb-talent-select { position: absolute; top: 12px; left: 12px; z-index: 2; cursor: pointer; }
.jb-talent-select input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jb-talent-select__box {
  width: 26px; height: 26px; border-radius: 7px;
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: .7rem;
}
.jb-talent-select input:checked + .jb-talent-select__box {
  background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white);
}
.jb-talent-select input:focus-visible + .jb-talent-select__box { outline: 2px solid var(--color-primary-light); outline-offset: 2px; }

/* Badge « Mis en avant » (TODO.md Chantier V3.5 Lot B) : même gabarit neutre
   que .badge-cv/.badge-exp, seul le texte prend l'accent orange de marque —
   pas un fond coloré de plus sur une carte déjà dense. */
.badge-boost { background: var(--color-primary-lighter); color: var(--color-primary-darker); }
/* Repères d'état pour le recruteur (TODO.md Chantier V3.6 Lot D) : deux
   badges plutôt qu'une opacité réduite sur la carte — une carte à moitié
   effacée se lit comme désactivée, alors qu'un profil déjà rangé reste tout
   aussi consultable et peut aller dans un dossier de plus. Même gabarit
   neutre que .badge-cv, le vert restant réservé à ce qui est déjà payé. */
.badge-saved { background: var(--color-bg-soft-2); color: var(--color-text-muted); }
.badge-unlocked { background: #e8f6ec; color: #1c7a3c; }
.btn-fav.is-saved { color: var(--color-primary); border-color: var(--color-primary); }

.talent-freshness {
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  color: var(--color-text-faint);
}

/* ---------------------------------- Autres profils (bas de fiche talent) ---------------------------------- */
/* Fond légèrement contrasté et filet en tête : la section se lit comme une
   suite de page, pas comme un quatrième encart de la fiche elle-même. */
.related-talents { background: var(--color-bg-soft); border-top: 1px solid var(--color-border); padding: 2.5rem 0 3.5rem; }
@media (max-width: 767.98px) { .related-talents { padding-bottom: 6rem; } }