/* ==========================================================================
   Jobivoire v3 — home.css
   Couche de style des pages publiques : accueil, landing générateur CV,
   landing recruteur, événements professionnels (listing + fiche).
   Chargée après bootstrap.min.css. Rien de structurant n'est écrit en dur
   dans les vues.
   ========================================================================== */

:root {
    /* Palette de marque */
    --jb-orange: #fe6703;
    --jb-orange-dark: #e25a02;
    --jb-orange-soft: #fff2e9;
    --color-primary-light: #fdecd8;
    --color-primary-lighter: #fff6ee;
    --jb-black: #0b0a0a;
    --jb-white: #ffffff;
    --color-text-muted: #6b7076;
    --color-text-faint: #9a9fa6;

    /* Gris : une seule échelle, pour que rien ne se rapproche « à peu près ». */
    --jb-gray-900: #17161a;
    --jb-gray-800: #2b2a2f;
    --jb-gray-700: #4a484f;
    --jb-gray-600: #6b6870;
    --jb-gray-500: #8e8b94;
    --jb-gray-400: #b4b1ba;
    --jb-gray-300: #dcdadf;
    --jb-gray-200: #e9e7ec;
    --jb-gray-100: #f4f3f6;
    --jb-gray-50: #fafafb;

    --color-bg-soft: #f8f7f6;
    --color-bg-soft-2: #f1efec;
    --color-border: #e8e6e2;
    --color-border-soft: #f0eeeb;

    /* États. Le vert « disponible » de la maquette Talents vit ici. */
    --jb-success: #16a34a;
    --jb-success-soft: #eaf7ef;
    --jb-warning: #d97706;
    --jb-warning-soft: #fdf4e7;
    --jb-danger: #dc2626;
    --jb-danger-soft: #fdecec;
    --jb-info: #2563eb;
    --jb-info-soft: #eaf0fd;

    /* Typographie */
    --jb-font: 'Mulish', 'Google Sans', 'Inter', -apple-system,
        BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --jb-fs-xs: 0.75rem;
    --jb-fs-sm: 0.8125rem;
    --jb-fs-base: 0.9375rem;
    --jb-fs-lg: 1.0625rem;
    --jb-fs-xl: 1.25rem;
    --jb-fs-2xl: 1.5rem;
    --jb-fs-3xl: 2rem;
    --jb-fs-4xl: 2.75rem;

    /* Rayons */
    --jb-radius-sm: 8px;
    --jb-radius: 12px;
    --jb-radius-md: 16px;
    --jb-radius-lg: 20px;
    --jb-radius-pill: 999px;

    /* Ombres : neutres et discrètes, jamais teintées. */
    --jb-shadow-sm: 0 1px 2px rgba(11, 10, 10, .05);
    --jb-shadow: 0 2px 8px rgba(11, 10, 10, .06);
    --jb-shadow-lg: 0 8px 24px rgba(11, 10, 10, .08);

    /* Rythme vertical des sections de page publique. */
    --jb-section-gap: 3.5rem;

    --jb-header-height: 72px;
}

/* ============================ Base ============================ */

* { box-sizing: border-box; }

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

body {
    font-family: var(--jb-font);
    font-size: var(--jb-fs-base);
    color: var(--jb-gray-800);
    background: var(--jb-white);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--jb-font);
    color: var(--jb-gray-900);
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.22;
}

h1 { font-size: var(--jb-fs-3xl); }
h2 { font-size: var(--jb-fs-2xl); }
h3 { font-size: var(--jb-fs-xl); }

a { color: var(--jb-orange-dark); text-decoration: none; }
a:hover { color: var(--jb-orange); }

p { line-height: 1.65; text-wrap: pretty; }

.jb-muted { color: var(--color-text-muted) !important; }
.jb-faint { color: var(--color-text-faint) !important; }
.jb-accent { color: var(--jb-orange-dark) !important; }
.jb-bg-soft { background: var(--color-bg-soft); }
.jb-bg-soft-2 { background: var(--color-bg-soft-2); }
.jb-bg-orange-soft { background: var(--jb-orange-soft); }
.jb-bg-dark { background: var(--jb-black); }

.jb-fs-sm { font-size: var(--jb-fs-sm); }
.jb-fs-xs { font-size: var(--jb-fs-xs); }
.jb-fs-lg { font-size: var(--jb-fs-lg); }

/* Icônes Lucide : dimension pilotée ici, jamais dans la vue. */
.jb-i { width: 18px; height: 18px; stroke-width: 2; vertical-align: -3px; flex: none; }
.jb-i-sm { width: 15px; height: 15px; }
.jb-i-lg { width: 22px; height: 22px; }
.jb-i-xl { width: 26px; height: 26px; }

/* Section : rythme vertical unique pour tout le site public. */
.jb-section { padding-top: var(--jb-section-gap); padding-bottom: var(--jb-section-gap); }
.jb-section-tight { padding-top: 2.25rem; padding-bottom: 2.25rem; }

.jb-section-head { margin-bottom: 1.75rem; }
.jb-eyebrow {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: var(--jb-fs-xs); font-weight: 800; text-transform: uppercase;
    letter-spacing: .09em; color: var(--jb-orange-dark); margin-bottom: .6rem;
}
.jb-section-title { margin-bottom: .35rem; }
.jb-section-sub { color: var(--color-text-muted); margin-bottom: 0; }
.jb-link-more {
    display: inline-flex; align-items: center; gap: .35rem;
    font-weight: 700; font-size: var(--jb-fs-sm); color: var(--jb-gray-900);
}
.jb-link-more:hover { color: var(--jb-orange-dark); text-decoration: none; }

/* ============================ Boutons ============================ */

.jb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--jb-font); font-weight: 700; font-size: var(--jb-fs-base);
    line-height: 1.2; padding: .78rem 1.35rem; border: none;
    border-radius: var(--jb-radius-sm); cursor: pointer; text-align: center;
    transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.jb-btn:hover { text-decoration: none; }
.jb-btn:active { transform: translateY(1px); }
.jb-btn:focus-visible { outline: 2px solid var(--jb-orange); outline-offset: 2px; }

.jb-btn-primary { background: var(--jb-orange); color: var(--jb-white); }
.jb-btn-primary:hover { background: var(--jb-orange-dark); color: var(--jb-white); }

.jb-btn-dark { background: var(--jb-black); color: var(--jb-white); }
.jb-btn-dark:hover { background: var(--jb-gray-800); color: var(--jb-white); }

.jb-btn-outline { background: var(--jb-white); color: var(--jb-gray-900); border: 1px solid var(--jb-gray-300); }
.jb-btn-outline:hover { background: var(--jb-gray-100); color: var(--jb-gray-900); }

.jb-btn-soft { background: var(--jb-orange-soft); color: var(--jb-orange-dark); }
.jb-btn-soft:hover { background: var(--color-primary-light); color: var(--jb-orange-dark); }

.jb-btn-ghost { background: transparent; color: var(--jb-gray-800); }
.jb-btn-ghost:hover { background: var(--jb-gray-100); color: var(--jb-gray-900); }

.jb-btn-wa { background: #1faf54; color: var(--jb-white); }
.jb-btn-wa:hover { background: #17913f; color: var(--jb-white); }

.jb-btn-sm { padding: .5rem 1rem; font-size: var(--jb-fs-sm); }
.jb-btn-lg { padding: .95rem 1.7rem; font-size: var(--jb-fs-lg); }
.jb-btn-block { width: 100%; }

@media screen and (min-width: 991px) {
    .jb-btn-lg-block { width: 100%; }
}

.jb-btn-icon {
    width: 40px; height: 40px; padding: 0; border-radius: var(--jb-radius-sm);
    background: var(--jb-white); border: 1px solid var(--jb-gray-300); color: var(--jb-gray-700);
}
.jb-btn-icon:hover { background: var(--jb-gray-100); color: var(--jb-gray-900); }

/* ============================ Badges / chips ============================ */

.jb-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: var(--jb-fs-xs); font-weight: 800; letter-spacing: .01em;
    padding: .3rem .6rem; border-radius: var(--jb-radius-sm);
    background: var(--jb-gray-100); color: var(--jb-gray-700);
}
.jb-badge-orange { background: var(--jb-orange-soft); color: var(--jb-orange-dark); }
.jb-badge-dark { background: var(--jb-black); color: var(--jb-white); }
.jb-badge-success { background: var(--jb-success-soft); color: var(--jb-success); }
.jb-badge-warning { background: var(--jb-warning-soft); color: var(--jb-warning); }
.jb-badge-danger { background: var(--jb-danger-soft); color: var(--jb-danger); }
.jb-badge-info { background: var(--jb-info-soft); color: var(--jb-info); }
.jb-badge-outline { background: var(--jb-white); color: var(--jb-gray-700); border: 1px solid var(--jb-gray-300); }

.jb-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }



/* ============================ Hero accueil ============================ */

.jb-hero { background: var(--color-primary-lighter); border-bottom: 1px solid var(--color-border-soft); }
.jb-hero-title { font-size: var(--jb-fs-4xl); margin-bottom: .75rem; }
.jb-hero-lead { font-size: var(--jb-fs-lg); color: var(--jb-gray-700); margin-bottom: 0; }

.jb-searchbar {
    background: var(--jb-white); border: 1px solid var(--color-border);
    border-radius: var(--jb-radius-md); box-shadow: var(--jb-shadow);
    padding: .5rem;
}
.jb-search-field { padding: .55rem .9rem; min-width: 0; }
.jb-search-field label {
    display: block; font-size: var(--jb-fs-xs); font-weight: 800;
    color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: .1rem;
}
.jb-search-field .form-control,
.jb-search-field .form-select {
    border: none; background: transparent; padding: 0; height: auto;
    font-size: var(--jb-fs-base); font-weight: 600; color: var(--jb-gray-900);
    box-shadow: none; text-overflow: ellipsis;
}
.jb-search-field .form-control:focus,
.jb-search-field .form-select:focus { box-shadow: none; }
.jb-search-sep { border-left: 1px solid var(--jb-gray-200); }

.jb-pathway {
    display: flex; align-items: center; gap: .85rem; height: 100%;
    background: var(--jb-white); border: 1px solid var(--color-border);
    border-radius: var(--jb-radius); padding: 1rem 1.1rem;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.jb-pathway:hover {
    text-decoration: none; box-shadow: var(--jb-shadow); transform: translateY(-2px);
    border-color: var(--jb-gray-300);
}
.jb-pathway-icon {
    width: 42px; height: 42px; border-radius: var(--jb-radius-sm); flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--jb-orange-soft); color: var(--jb-orange-dark);
}
.jb-pathway-icon-dark { background: var(--jb-gray-100); color: var(--jb-gray-900); }
.jb-pathway strong { display: block; font-size: var(--jb-fs-base); color: var(--jb-gray-900); }
.jb-pathway span { font-size: var(--jb-fs-xs); color: var(--color-text-muted); }

/* Bandeau de chiffres */
.jb-figure { text-align: left; }
.jb-figure .n {
    font-size: var(--jb-fs-3xl); font-weight: 800; color: var(--jb-gray-900);
    line-height: 1.05; letter-spacing: -.03em;
}
.jb-figure .l { font-size: var(--jb-fs-sm); color: var(--color-text-muted); font-weight: 600; }


.hero-form-container {
  width: 100%;
  max-width: 700px;
background: var(--jb-white); 
border: 1px solid var(--color-border);
border-radius: var(--jb-radius-md); 
box-shadow: var(--jb-shadow);
  margin: auto;
    padding: .5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50rem;
}
.hero-form-container > input {
  padding: .4rem .75rem;
padding-left: 0.75rem;
  padding-left: .75rem;
  border: 0;
  border: none !important; 
} 
.hero-form-container > input:focus {
  outline: none;
  box-shadow: none !important;
  border : none;
}
/* ============================ Cartes génériques ============================ */

.jb-card {
    display: flex; flex-direction: column; height: 100%;
    background: var(--jb-white); border: 1px solid var(--color-border);
    border-radius: var(--jb-radius); transition: box-shadow .18s ease, transform .18s ease;
}
.jb-card:hover { box-shadow: var(--jb-shadow); transform: translateY(-2px); }
.jb-card-body { padding: 1.15rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.jb-card-title { font-size: var(--jb-fs-lg); font-weight: 800; margin: 0 0 .3rem; }
.jb-card-title a { color: var(--jb-gray-900); }
.jb-card-title a:hover { color: var(--jb-orange-dark); text-decoration: none; }
.jb-card-foot {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    margin-top: auto; padding-top: .9rem;
}
.jb-card-foot-sep { border-top: 1px solid var(--color-border-soft); margin-top: 1rem; padding-top: .9rem; }

.jb-meta { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: var(--jb-fs-sm); color: var(--color-text-muted); }
.jb-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.jb-meta .jb-i, .jb-meta .jb-i-sm { color: var(--color-text-faint); }

/* Carte offre d'emploi */
.jb-logo {
    width: 48px; height: 48px; border-radius: var(--jb-radius-sm); flex: none;
    object-fit: contain; background: var(--jb-white); border: 1px solid var(--color-border);
    padding: 5px;
}
.jb-logo-initials {
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: var(--jb-fs-sm); background: var(--jb-gray-100);
    color: var(--jb-gray-900); padding: 0;
}
.jb-logo-lg { width: 72px; height: 72px; border-radius: var(--jb-radius); font-size: var(--jb-fs-lg); }
.jb-company-name { font-size: var(--jb-fs-sm); font-weight: 800; color: var(--jb-orange-dark); }

/* Carte talent */
.jb-talent-avatar {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none;
    border: 1px solid var(--color-border); background: var(--jb-gray-100);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: var(--jb-gray-900);
}

/* Carte service / gig */
.jb-thumb-16 {
    display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    background: var(--jb-gray-100); border-radius: var(--jb-radius) var(--jb-radius) 0 0;
}
.jb-thumb-43 {
    display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    background: var(--jb-gray-100); border-radius: var(--jb-radius) var(--jb-radius) 0 0;
}
.jb-price { font-size: var(--jb-fs-xs); color: var(--color-text-muted); font-weight: 600; }
.jb-price strong { display: block; font-size: var(--jb-fs-lg); color: var(--jb-gray-900); font-weight: 800; }

/* Carte article */
.jb-article-cat {
    font-size: var(--jb-fs-xs); font-weight: 800; text-transform: uppercase;
    letter-spacing: .07em; color: var(--jb-orange-dark);
}

/* ============================ État vide ============================ */

.jb-empty {
    text-align: center; padding: 2.75rem 1.5rem;
    background: var(--color-bg-soft); border: 1px dashed var(--jb-gray-300);
    border-radius: var(--jb-radius-md);
}
.jb-empty-icon {
    width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 1rem;
    background: var(--jb-white); border: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: center; color: var(--jb-orange-dark);
}
.jb-empty h3 { font-size: var(--jb-fs-lg); margin-bottom: .4rem; }
.jb-empty p { color: var(--color-text-muted); max-width: 480px; margin: 0 auto 1.25rem; }

/* ============================ Bloc « Nouveautés / Outils » ============================ */

.jb-tool-card {
    display: flex; flex-direction: column; height: 100%; padding: 1.6rem;
    border-radius: var(--jb-radius-md); border: 1px solid var(--color-border);
    background: var(--jb-white);
}
.jb-tool-card-accent { background: var(--jb-orange-soft); border-color: var(--color-primary-light); }
.jb-tool-card-dark { background: var(--jb-black); border-color: var(--jb-black); }
.jb-tool-card-dark h3, .jb-tool-card-dark .jb-tool-audience { color: var(--jb-white); }
.jb-tool-card-dark p { color: rgba(255, 255, 255, .74); }
.jb-tool-audience {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: var(--jb-fs-xs); font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--jb-gray-600); margin-bottom: .75rem;
}
.jb-tool-card h3 { font-size: var(--jb-fs-xl); margin-bottom: .5rem; }
.jb-tool-card p { margin-bottom: 1.25rem; }
.jb-tool-card .jb-btn { align-self: flex-start; margin-top: auto; }

/* ============================ Étapes ============================ */

.jb-step { display: flex; gap: 1rem; height: 100%; }
.jb-step-n {
    width: 34px; height: 34px; border-radius: var(--jb-radius-sm); flex: none;
    background: var(--jb-black); color: var(--jb-white);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: var(--jb-fs-sm);
}
.jb-step h4 { font-size: var(--jb-fs-base); font-weight: 800; margin: .3rem 0 .3rem; }
.jb-step p { font-size: var(--jb-fs-sm); color: var(--color-text-muted); margin: 0; }

/* ============================ Bloc valeur / avantage ============================ */

.jb-value {
    height: 100%; padding: 1.4rem; background: var(--jb-white);
    border: 1px solid var(--color-border); border-radius: var(--jb-radius);
}
.jb-value-icon {
    width: 44px; height: 44px; border-radius: var(--jb-radius-sm); margin-bottom: .9rem;
    background: var(--jb-orange-soft); color: var(--jb-orange-dark);
    display: flex; align-items: center; justify-content: center;
}
.jb-value h3 { font-size: var(--jb-fs-lg); margin-bottom: .35rem; }
.jb-value p { font-size: var(--jb-fs-sm); color: var(--color-text-muted); margin: 0; }

.jb-check-item {
    display: flex; align-items: flex-start; gap: .65rem;
    font-size: var(--jb-fs-base); line-height: 1.55;
}
.jb-check-item .jb-i { color: var(--jb-success); margin-top: 3px; }

/* ============================ Chemins de démarrage (2 voies) ============================ */

.jb-path-card {
    display: flex; flex-direction: column; height: 100%; padding: 1.6rem;
    border: 1px solid var(--color-border); border-radius: var(--jb-radius-md);
    background: var(--jb-white);
}
.jb-path-card-featured { border-color: var(--jb-orange); background: var(--color-primary-lighter); }
.jb-path-card h3 { font-size: var(--jb-fs-xl); margin-bottom: .5rem; }
.jb-path-card > p { color: var(--color-text-muted); }
.jb-path-note {
    font-size: var(--jb-fs-sm); color: var(--jb-gray-700);
    background: var(--jb-white); border: 1px solid var(--color-border);
    border-radius: var(--jb-radius-sm); padding: .7rem .85rem; margin-bottom: 1.25rem;
}

/* ============================ Miniatures de modèles ============================ */

.jb-template {
    display: block; border: 1px solid var(--color-border); border-radius: var(--jb-radius);
    background: var(--jb-white); overflow: hidden; transition: box-shadow .18s ease;
}
.jb-template:hover { box-shadow: var(--jb-shadow); text-decoration: none; }
.jb-template img {
    display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
    background: var(--jb-gray-100);
}
.jb-template-name {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .7rem .9rem; font-size: var(--jb-fs-sm); font-weight: 700; color: var(--jb-gray-900);
}

/* ============================ Tarifs / paliers ============================ */

.jb-plan {
    display: flex; flex-direction: column; height: 100%; padding: 1.6rem;
    border: 1px solid var(--color-border); border-radius: var(--jb-radius-md);
    background: var(--jb-white);
}
.jb-plan-featured { border-color: var(--jb-orange); box-shadow: var(--jb-shadow); }
.jb-plan-name { font-size: var(--jb-fs-lg); font-weight: 800; margin-bottom: .2rem; }
.jb-plan-for { font-size: var(--jb-fs-sm); color: var(--color-text-muted); margin-bottom: 1rem; }
.jb-plan-price { font-size: var(--jb-fs-2xl); font-weight: 800; color: var(--jb-gray-900); line-height: 1.1; }
.jb-plan-price small { display: block; font-size: var(--jb-fs-xs); font-weight: 600; color: var(--color-text-faint); }
.jb-plan-list { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; display: flex; flex-direction: column; gap: .55rem; }
.jb-plan-list li { display: flex; align-items: flex-start; gap: .55rem; font-size: var(--jb-fs-sm); line-height: 1.5; }
.jb-plan-list li .jb-i-sm { color: var(--jb-success); margin-top: 3px; }
.jb-plan .jb-btn { margin-top: auto; }

.jb-tarif-table { width: 100%; border-collapse: collapse; font-size: var(--jb-fs-base); }
.jb-tarif-table caption { caption-side: top; text-align: left; padding: 0 0 .75rem; font-size: var(--jb-fs-sm); color: var(--color-text-muted); }
.jb-tarif-table th {
    text-align: left; padding: .85rem 1rem; background: var(--jb-black); color: var(--jb-white);
    font-size: var(--jb-fs-sm); font-weight: 800;
}
.jb-tarif-table td { padding: .95rem 1rem; border-top: 1px solid var(--color-border-soft); vertical-align: top; }
.jb-tarif-table tbody tr:nth-child(even) td { background: var(--color-bg-soft); }
.jb-tarif-table .jb-tarif-price { font-weight: 800; color: var(--jb-orange-dark); white-space: nowrap; }
.jb-table-wrap { border: 1px solid var(--color-border); border-radius: var(--jb-radius); overflow: hidden; }

/* ============================ Bandeau CTA final ============================ */

.jb-cta-band {
    background: var(--jb-black); border-radius: var(--jb-radius-lg); padding: 2.75rem 2rem;
}
.jb-cta-band h2 { color: var(--jb-white); margin-bottom: .6rem; }
.jb-cta-band p { color: rgba(255, 255, 255, .74); margin-bottom: 0; }
.jb-cta-band-soft { background: var(--jb-orange-soft); }
.jb-cta-band-soft h2 { color: var(--jb-gray-900); }
.jb-cta-band-soft p { color: var(--jb-gray-700); }

/* ============================ FAQ (accordéon Bootstrap personnalisé) ============================ */

.jb-faq .accordion-item {
    border: 1px solid var(--color-border); border-radius: var(--jb-radius);
    margin-bottom: .75rem; overflow: hidden; background: var(--jb-white);
}
.jb-faq .accordion-button {
    font-family: var(--jb-font); font-weight: 800; font-size: var(--jb-fs-base);
    color: var(--jb-gray-900); background: var(--jb-white); padding: 1.05rem 1.25rem;
    box-shadow: none;
}
.jb-faq .accordion-button:not(.collapsed) { background: var(--color-bg-soft); color: var(--jb-gray-900); }
.jb-faq .accordion-button:focus { box-shadow: none; }
.jb-faq .accordion-button:focus-visible { outline: 2px solid var(--jb-orange); outline-offset: -2px; }
.jb-faq .accordion-button::after { width: 1rem; height: 1rem; background-size: 1rem; }
.jb-faq .accordion-body { padding: 0 1.25rem 1.15rem; color: var(--color-text-muted); font-size: var(--jb-fs-base); }

/* ============================ Bloc À propos (SEO) ============================ */

.jb-about p { color: var(--jb-gray-700); }
.jb-about-audience {
    display: flex; gap: .85rem; height: 100%; padding: 1.15rem;
    background: var(--jb-white); border: 1px solid var(--color-border); border-radius: var(--jb-radius);
}
.jb-about-audience h3 { font-size: var(--jb-fs-base); margin-bottom: .25rem; }
.jb-about-audience p { font-size: var(--jb-fs-sm); color: var(--color-text-muted); margin: 0; }

.jb-milestone { position: relative; padding-left: 1.6rem; }
.jb-milestone::before {
    content: ""; position: absolute; left: 4px; top: 6px; width: 11px; height: 11px;
    border-radius: 50%; background: var(--jb-orange-soft); border: 2px solid var(--jb-orange);
}
.jb-milestone .y { font-size: var(--jb-fs-xs); font-weight: 800; color: var(--jb-orange-dark); letter-spacing: .05em; }
.jb-milestone p { font-size: var(--jb-fs-sm); color: var(--color-text-muted); margin: .15rem 0 0; }

/* ============================ Comparatif ============================ */

.jb-compare {
    height: 100%; padding: 1.5rem; border-radius: var(--jb-radius-md);
    border: 1px solid var(--color-border); background: var(--color-bg-soft);
}
.jb-compare-win { background: var(--jb-white); border-color: var(--jb-orange); }
.jb-compare h3 { font-size: var(--jb-fs-lg); margin-bottom: 1rem; }
.jb-compare ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.jb-compare li { display: flex; align-items: flex-start; gap: .55rem; font-size: var(--jb-fs-sm); line-height: 1.5; }
.jb-compare li .jb-i-sm { margin-top: 3px; flex: none; }
.jb-compare-neutral li .jb-i-sm { color: var(--jb-gray-500); }
.jb-compare-win li .jb-i-sm { color: var(--jb-success); }

/* ============================ Témoignage ============================ */

.jb-quote {
    display: flex; flex-direction: column; height: 100%; padding: 1.5rem;
    background: var(--jb-white); border: 1px solid var(--color-border); border-radius: var(--jb-radius);
}
.jb-quote-mark { color: var(--jb-orange); margin-bottom: .7rem; }
.jb-quote p { font-size: var(--jb-fs-base); margin-bottom: 1.1rem; }
.jb-quote-who { display: flex; align-items: center; gap: .65rem; margin-top: auto; }
.jb-quote-who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.jb-quote-who strong { display: block; font-size: var(--jb-fs-sm); }
.jb-quote-who span { font-size: var(--jb-fs-xs); color: var(--color-text-faint); }

/* ============================ Événements ============================ */

.jb-event-card .jb-thumb-16 { position: relative; }
.jb-event-media { position: relative; }
.jb-event-media .jb-event-flags {
    position: absolute; top: .65rem; left: .65rem; right: .65rem;
    display: flex; gap: .4rem; flex-wrap: wrap;
}
.jb-event-date {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 54px; padding: .45rem 0; flex: none; border-radius: var(--jb-radius-sm);
    background: var(--jb-black); color: var(--jb-white); line-height: 1.1;
}
.jb-event-date .d { font-size: var(--jb-fs-lg); font-weight: 800; }
.jb-event-date .m { font-size: var(--jb-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

.jb-event-banner {
    display: block; width: 100%; aspect-ratio: 21 / 8; min-height: 170px; object-fit: cover;
    border-radius: var(--jb-radius-md); border: 1px solid var(--color-border);
    background: var(--jb-gray-100);
}

.jb-panel {
    background: var(--jb-white); border: 1px solid var(--color-border);
    border-radius: var(--jb-radius-md); 
}
.jb-panel-soft { background: var(--color-bg-soft); }
.jb-panel h2, .jb-panel h3 { font-size: var(--jb-fs-lg); margin-bottom: 1rem; }

.jb-facts { display: flex; flex-direction: column; gap: .1rem; }
.jb-fact {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .7rem 0; border-bottom: 1px solid var(--color-border-soft);
}
.jb-fact:last-child { border-bottom: none; }
.jb-fact .jb-i { color: var(--jb-orange-dark); margin-top: 2px; }
.jb-fact-label { display: block; font-size: var(--jb-fs-xs); font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.jb-fact-value { font-size: var(--jb-fs-base); font-weight: 700; color: var(--jb-gray-900); }

.jb-organiser { display: flex; align-items: center; gap: .9rem; }
.jb-organiser strong { display: block; font-size: var(--jb-fs-base); }
.jb-organiser span { font-size: var(--jb-fs-sm); color: var(--color-text-muted); }

.jb-agenda { list-style: none; padding: 0; margin: 0; }
.jb-agenda li {
    display: flex; gap: 1rem; padding: .85rem 0;
    border-bottom: 1px solid var(--color-border-soft);
}
.jb-agenda li:last-child { border-bottom: none; }
.jb-agenda .h {
    font-size: var(--jb-fs-sm); font-weight: 800; color: var(--jb-orange-dark);
    white-space: nowrap; padding-top: 1px; min-width: 92px;
}
.jb-agenda strong { display: block; font-size: var(--jb-fs-base); }
.jb-agenda p { font-size: var(--jb-fs-sm); color: var(--color-text-muted); margin: .15rem 0 0; }

.jb-prose h3 { font-size: var(--jb-fs-lg); margin: 1.6rem 0 .6rem; }
.jb-prose h3:first-child { margin-top: 0; }
.jb-prose p { margin-bottom: 1rem; }
.jb-prose ul { padding-left: 1.2rem; margin-bottom: 1rem; }
.jb-prose li { margin-bottom: .4rem; line-height: 1.6; }

.jb-share-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Formulaire */
.jb-form-label { font-size: var(--jb-fs-sm); font-weight: 700; color: var(--jb-gray-800); margin-bottom: .35rem; }
.jb-form .form-control, .jb-form .form-select {
    border: 1px solid var(--jb-gray-300); border-radius: var(--jb-radius-sm);
    padding: .7rem .9rem; font-size: var(--jb-fs-base); background: var(--jb-white);
}
.jb-form .form-control:focus, .jb-form .form-select:focus {
    border-color: var(--jb-orange); box-shadow: 0 0 0 3px rgba(254, 103, 3, .14);
}
.jb-form .form-check-input { border-color: var(--jb-gray-400); }
.jb-form .form-check-input:checked { background-color: var(--jb-orange); border-color: var(--jb-orange); }
.jb-form .form-check-label { font-size: var(--jb-fs-sm); color: var(--jb-gray-700); }

/* Message de confirmation en ligne */
.jb-confirm { text-align: center; padding: 1.75rem 1rem; }
.jb-confirm-icon {
    width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 1rem;
    background: var(--jb-success-soft); color: var(--jb-success);
    display: flex; align-items: center; justify-content: center;
}

/* Filtres listing */
.jb-filterbar {
    background: var(--jb-white); border: 1px solid var(--color-border);
    border-radius: var(--jb-radius); padding: 1rem 1.15rem;
}
.jb-filter-label {
    font-size: var(--jb-fs-xs); font-weight: 800; text-transform: uppercase;
    letter-spacing: .06em; color: var(--color-text-muted); margin-bottom: .5rem;
}

/* Pagination */
.jb-pagination .page-link {
    border: none; color: var(--jb-gray-800); font-weight: 700; margin: 0 3px;
    border-radius: var(--jb-radius-sm); padding: .5rem .85rem;
}
.jb-pagination .page-link:hover { background: var(--jb-gray-100); color: var(--jb-gray-900); }
.jb-pagination .page-item.active .page-link { background: var(--jb-black); color: var(--jb-white); }
.jb-pagination .page-item.disabled .page-link { color: var(--jb-gray-400); }

/* Fil d'Ariane */
.jb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: var(--jb-fs-sm); }
.jb-crumbs a { color: var(--color-text-muted); font-weight: 600; }
.jb-crumbs .jb-i-sm { color: var(--jb-gray-400); }
.jb-crumbs .current { color: var(--jb-gray-900); font-weight: 700; }

.jb-page-band { background: var(--color-primary-lighter); border-bottom: 1px solid var(--color-border-soft); }

/* Colonne collante */
.jb-sticky { position: sticky; top: calc(var(--jb-header-height) + 20px); }

/* ============================ Pied de page ============================ */

.jb-footer { background: var(--jb-black); color: rgba(255, 255, 255, .68); }
.jb-footer h2, .jb-footer h3 { color: var(--jb-white); font-size: var(--jb-fs-base); margin-bottom: 1rem; }
.jb-footer a { color: rgba(255, 255, 255, .68); font-size: var(--jb-fs-sm); }
.jb-footer a:hover { color: var(--jb-white); }
.jb-footer .jb-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.jb-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: var(--jb-fs-sm); color: rgba(255, 255, 255, .5);
}
.jb-social {
    width: 38px; height: 38px; border-radius: var(--jb-radius-sm);
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .08); color: var(--jb-white);
}
.jb-social:hover { background: rgba(255, 255, 255, .16); text-decoration: none; color: var(--jb-white); }

/* ============================ Barre d'action mobile ============================ */

.jb-actionbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; gap: .5rem; padding: .6rem .75rem;
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom));
    background: var(--jb-white); border-top: 1px solid var(--color-border);
    box-shadow: 0 -6px 20px rgba(11, 10, 10, .07);
}
.jb-actionbar .jb-btn { flex: 1; min-height: 48px; }
body.jb-has-actionbar { padding-bottom: 88px; }

/* ============================ Mobile ============================ */

@media (max-width: 991.98px) {
    :root { --jb-section-gap: 2.5rem; }
    .jb-search-sep { border-left: none; border-top: 1px solid var(--jb-gray-200); }
    .jb-sticky { position: static; }
}

@media (max-width: 767.98px) {
    :root { --jb-fs-4xl: 1.9rem; --jb-fs-3xl: 1.55rem; --jb-fs-2xl: 1.3rem; }
    .jb-hero-lead { font-size: var(--jb-fs-base); }
    .jb-cta-band { padding: 1.9rem 1.35rem; border-radius: var(--jb-radius-md); }
    .jb-btn { min-height: 48px; }
    .jb-btn-sm { min-height: 44px; }
    .jb-section-head .jb-link-more { margin-top: .5rem; }
    .jb-tarif-table th, .jb-tarif-table td { padding: .7rem .8rem; font-size: var(--jb-fs-sm); }
    .jb-agenda li { flex-direction: column; gap: .2rem; }
    .jb-agenda .h { min-width: 0; }
}

@media (max-width: 575.98px) {
    .jb-card-foot { flex-direction: column; align-items: stretch; }
    .jb-card-foot .jb-btn { width: 100%; }
    .jb-figure { text-align: center; }
}

/* Alias de la pastille « Indisponible » (Availability::badgeColor() renvoie
   « secondary ») : sans elle, un talent indisponible affichait une pastille
   sans style. */
.jb-badge-secondary { background: var(--jb-gray-100); color: var(--jb-gray-700); }
.jb-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: var(--jb-radius-sm);
  color: var(--jb-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.topnav-circle, .btn-circle-sm {
  height: 35px;
  width: 35px;
  overflow: hidden;
  border-radius: 50rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b1b1b1;
  text-align: center;
  text-decoration: none;
  color: #535353;
}