/* LFW Student Job Map - Standalone Styles */
/* Unified CTA buttons */
.map-cta-btn { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: all 0.2s; border: 2px solid transparent; }
.map-cta-primary { background: var(--vert); color: white; border-color: var(--vert); }
.map-cta-primary:hover { background: var(--v900); border-color: var(--v900); }
.map-cta-outline { background: white; color: var(--vert); border-color: var(--vert); }
.map-cta-outline:hover { background: var(--v100); }
@media (max-width: 900px) { .map-cta-btn { display: none; } }
/* LFW Brand Colors */
:root {
    --lfw-green: var(--v700);        /* LFW Logo Dark Green */
    --lfw-green-dark: var(--v700);   /* Darker green for hover */
    --lfw-green-light: var(--v100);  /* Light green for backgrounds */
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--texte);
    background-color: var(--surf2);
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: white;
    border-bottom: 1px solid var(--bord);
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Single Row Header - Everything on One Level */
.header-single {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 24px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    gap: 20px;
    height: 64px;
    flex-wrap: nowrap;
    overflow: visible;
}

.logo-section {
    flex-shrink: 0;
    margin-right: 20px;
}

.header-logo-big {
    height: 64px;
    width: auto;
    border-radius: 10px;
}

/* Main Navigation */
.main-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-link {
    padding: 10px 18px;
    color: var(--texte);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s;
    white-space: nowrap;
}

.nav-link:hover {
    background: var(--surf2);
    color: var(--texte);
}

.nav-link.active {
    background: var(--v100);
    color: var(--vert);
    font-weight: 600;
}

.header-controls-inline {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    margin-right: 24px;
    height: 64px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    margin-right: 32px;
    height: 64px;
}

/* Language Toggle */
.language-toggle {
    display: flex;
    gap: 0;
    margin-right: 16px;
    background: var(--surf2);
    border-radius: 20px;
    padding: 2px;
}

.lang-btn {
    padding: 12px 20px;
    border: none;
    background: transparent;
    border-radius: 18px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--att);
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.5);
    color: var(--texte);
}

.lang-btn.active {
    background: white;
    color: var(--texte);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.back-link {
    color: var(--att);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.back-link:hover {
    color: var(--vert);
}

.site-title {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.lfw-logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--v700);
}

.subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--texte);
    margin-left: 0.25rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.job-counter {
    color: var(--att);
    font-size: 18px;
    font-weight: 500;
    white-space: nowrap;
    padding: 8px 12px;
    background: rgba(107, 114, 128, 0.08);
    border-radius: 4px;
}

.clear-directions-btn {
    background: #dc2626;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-right: 0.5rem;
}

.clear-directions-btn:hover {
    background: #b91c1c;
}

.clear-directions-btn.hidden {
    display: none;
}

.download-btn {
    background: var(--v700);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 1px 2px rgba(22, 163, 74, 0.2);
}

.download-btn:hover {
    background: var(--v700);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.3);
}

/* Main Content */
.main-content {
    display: flex;
    height: calc(100vh - 64px);
    margin-top: 64px; /* dégage l'en-tête fixe de 64px — plus de bannière */
    overflow: hidden;  /* aucun scroll de page ; seul le panneau défile */
    position: relative; /* ancre la carte flottante de téléchargement */
}

/* Carte flottante de téléchargement — remplace la bannière pleine largeur (brief #2) */
.map-download-card {
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 5;
    display: flex;
    gap: 8px;
    padding: 12px;
    background: var(--creme);
    border: 1px solid var(--bord);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(27, 67, 50, 0.12);
}
.map-download-card .map-dl-ios {
    background: var(--vert);
    color: #fff;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    white-space: nowrap;
}
.map-download-card .map-dl-ios:hover { background: #0F2A1F; }
.map-download-card .map-dl-android {
    color: var(--att);
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 13.5px;
    white-space: nowrap;
    align-self: center;
}

/* Map */
.map-container {
    flex: 1;
    position: relative;
    background: var(--bord);
}

/* Sidebar */
.sidebar {
    width: 400px;
    background: var(--creme);
    border-left: 1px solid var(--bord);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--bord);
    background: white;
}

/* Location Controls */
.location-controls {
    margin-bottom: 1rem;
}

.my-location-btn {
    width: 100%;
    padding: 0.75rem;
    background: var(--vert);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.my-location-btn:hover {
    background: #0F2A1F;
}

.my-location-btn:disabled {
    background: var(--att2);
    cursor: not-allowed;
}

/* Search Controls */
.search-controls {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.job-search-input {
    flex: 2;
    padding: 0.5rem;
    border: 1px solid var(--bord2);
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.min-pay-input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--bord2);
    border-radius: 0.375rem;
    font-size: 0.875rem;
}

.sidebar-header h2 {
    margin-bottom: 1rem;
    color: var(--texte);
    font-size: 1.25rem;
    font-weight: 700;
}

.filters {
    display: flex;
    gap: 0.5rem;
}

.filter-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--bord2);
    background: white;
    color: var(--att);
    border-radius: 0.375rem;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.filter-btn.active,
.filter-btn:hover {
    background: var(--vert);
    color: white;
    border-color: var(--vert);
}

/* Job List */
.job-list {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.loading-jobs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--att);
}

.job-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 12px rgba(27, 67, 50, 0.05);
    border: 1px solid var(--bord);
}

.job-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(27, 67, 50, 0.12);
    border-color: var(--vert);
}

/* LinkedIn-style header */
/* Le logo est le DERNIER enfant dans le HTML et se place a droite : la colonne de texte prend
   le bord gauche de la carte, donc le titre commence a la marge au lieu d'etre indente de 60 px.
   Meme disposition que la fiche (.modal-header-linkedin) et que la carte de liste mobile. */
.job-card-header-linkedin {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
/* La colonne de texte prend tout ce qui reste ; min-width:0 autorise ses enfants a se tronquer
   au lieu de pousser le logo hors de la carte. */
.job-card-header-linkedin .job-card-header-info {
    flex: 1;
    min-width: 0;
}
.job-card-header-linkedin .employer-photo,
.job-card-header-linkedin .employer-photo-placeholder {
    flex-shrink: 0;
}

.employer-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.employer-photo-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--surf2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
}

.job-card-header-info {
    flex: 1;
    min-width: 0;
}

/* NEQ verification badge.
   Rendered by JobMap.verifiedBadge() on the list cards, the details modal and the multi-job
   popup. It previously had no rule at all, so on the one surface that did render it the badge
   came out as unstyled inline text — indistinguishable from the company name next to it.
   Green because it states a verified fact; it describes the EMPLOYER, never a candidate, so
   the never-red-on-a-candidate rule is not in play here. */
/* Badge de taux de réponse.
   Rendu par JobMap.rateBadgeSlot() + fillRateBadges(), collé au nom de l'employeur sur la fiche
   et sur l'en-tête du pop-up multi-postes. Même forme que .verified-badge : le candidat doit lire
   les deux comme la même famille d'information sur l'employeur.

   Ambre et non vert : le vert de .verified-badge dit « fait vérifié » (le NEQ, contrôlé au registre
   des entreprises). Le taux est une mesure de comportement, pas une vérification — deux natures,
   deux couleurs. Jamais rouge : ce badge est visible par un CANDIDAT, et un employeur sous le seuil
   n'affiche simplement rien plutôt qu'un mauvais score.

   Un emplacement non rempli (.rate-badge-slot) n'a AUCUNE règle : largeur nulle, invisible,
   pas d'espace réservé. L'absence de badge ne doit pas se voir.

   SOUS le nom, jamais à côté : le badge est une phrase, pas un mot. Collé au nom sur la même
   ligne il débordait de la carte (constaté sur la fiche de la carte), et `white-space: nowrap`
   garantissait le débordement au lieu de le laisser retomber. Il vit donc en dehors du <p> du
   nom, sur sa propre ligne, et son texte a le droit de passer à la ligne. */
/* La rangée de badges qui décrivent l'EMPLOYEUR (NEQ vérifié, taux de réponse), sous son nom.
   Même structure que l'en-tête de la fiche mobile (JobDetailsScreen, styles.employerBadgeRow) :
   côte à côte s'ils rentrent, empilés sinon, jamais plus larges que leur texte. Les deux surfaces
   doivent se ressembler, sinon le candidat ne reconnaît pas le même signal d'un écran à l'autre.

   :empty → display:none, sinon la marge subsisterait pour un employeur sans aucun badge.
   fillRateBadges() retire son emplacement du DOM quand il n'y a pas de taux, ce qui rend cette
   règle atteignable. */
.employer-badge-row {
    display: flex;
    /* Empiles, pas cote a cote — meme lecture que la fiche mobile : le NEQ (un fait verifie), puis
       le taux (une mesure) en dessous. Sur une seule ligne les deux se lisaient comme une longue
       etiquette unique, et la ligne debordait des que le nom du commerce etait long. */
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
}
.employer-badge-row:empty { display: none; }
/* Dans la rangée, les marges d'alignement inline des badges n'ont plus lieu d'être — le gap
   du conteneur s'en charge. Elles restent utiles ailleurs (cartes de liste), d'où le scoping. */
.employer-badge-row .verified-badge,
.employer-badge-row .rate-badge {
    margin-left: 0;
    margin-top: 0;
}

.rate-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 3px 9px;
    border-radius: 10px;
    background: #FFF3E0;
    color: #B45309;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
    vertical-align: middle;
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--v100);
    color: var(--v700);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
}

.job-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--texte);
    margin-bottom: 2px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-card-company {
    font-size: 13px;
    color: var(--att);
    font-weight: 500;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-card-location {
    font-size: 12px;
    color: var(--att2);
}

.job-card-header-info .job-pay {
    margin-top: 6px;
    font-size: 13px;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.click-to-view {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--vert);
    font-weight: 500;
}

.job-header {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 0.5rem;
}

.job-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--texte);
    line-height: 1.4;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-pay {
    font-size: 1rem;
    font-weight: 700;
    color: var(--vert);
    background: var(--camel);
    padding: 5px 10px;
    border-radius: 12px;
    border: none;
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-company {
    font-size: 0.875rem;
    color: var(--att);
    font-weight: 500;
    margin-bottom: 4px;
}

.job-location-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}

.job-location {
    font-size: 0.875rem;
    color: var(--att);
    flex: 1;
}

.directions-options {
    display: flex;
    gap: 0.25rem;
}

.directions-btn {
    background: var(--vert);
    color: white;
    border: none;
    padding: 0.25rem 0.4rem;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    white-space: nowrap;
}

.directions-btn:hover {
    background: #0F2A1F;
    transform: translateY(-1px);
}

.directions-btn.transit {
    background: var(--v700);
}

.directions-btn.driving {
    background: #dc2626;
}

.directions-btn.driving:hover {
    background: #b91c1c;
}

.job-description-preview {
    font-size: 0.875rem;
    color: var(--texte);
    line-height: 1.4;
}

.job-applicants,
.location-job-applicants,
.job-details-applicants {
    font-size: 0.85rem;
    color: var(--vert);
    font-weight: 600;
    margin-top: 0.5rem;
    padding: 0.25rem 0;
}

.job-details-applicants {
    font-size: 0.95rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0;
}

.no-jobs {
    text-align: center;
    padding: 2rem;
    color: var(--att);
}

.show-all-btn {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: var(--vert);
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    font-weight: 500;
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: var(--surf2);
    border-radius: 1rem;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    padding: 0;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 1.5rem 0 1.5rem;
    background: var(--surf2);
    border-radius: 1rem 1rem 0 0;
}

.modal-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--texte);
    margin-right: 1rem;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--att);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    color: var(--texte);
}

.modal-body {
    padding: 1.5rem;
}

.employer-info {
    margin-bottom: 1rem;
}

.company-name {
    display: block;
    font-weight: 600;
    color: var(--vert);
    margin-bottom: 0.25rem;
}

.job-location {
    color: var(--att);
    font-size: 0.875rem;
}

.job-pay {
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--vert);
    background: var(--camel);
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    margin-bottom: 1rem;
}

.job-description {
    color: var(--texte);
    line-height: 1.6;
    white-space: pre-wrap;
}

.modal-footer {
    padding: 1.5rem;
    background: var(--surf2);
    border-radius: 0 0 1rem 1rem;
}

.apply-btn {
    width: 100%;
    background: var(--v700);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.apply-btn:hover {
    background: var(--v700);
}

/* External QR Job Detail Styles */
.job-details-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.job-details-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--texte);
    margin: 0 0 8px 0;
}

.job-details-company {
    font-size: 18px;
    font-weight: 500;
    color: var(--texte);
    margin: 0 0 12px 0;
}

.job-details-location {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--att);
}

.job-details-pay {
    font-size: 20px;
    font-weight: 700;
    color: var(--vert);
    background: var(--lfw-green-light);
    padding: 8px 16px;
    border-radius: 12px;
    display: inline-block;
}

.job-description-section,
.job-requirements-section,
.job-responsibilities-section,
.job-language-requirements-section,
.job-info-section {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin: 0 20px 16px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.job-description-section h3,
.job-requirements-section h3,
.job-responsibilities-section h3,
.job-language-requirements-section h3,
.job-info-section h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--texte);
    margin: 0 0 12px 0;
}

.job-description-full {
    font-size: 16px;
    line-height: 1.6;
    color: var(--texte);
    white-space: pre-wrap;
}

.requirements-list,
.responsibilities-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.requirement-item,
.responsibility-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--surf2);
    font-size: 15px;
    color: var(--texte);
    position: relative;
    padding-left: 20px;
}

.requirement-item:before,
.responsibility-item:before {
    content: "•";
    color: var(--vert);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.requirement-item:last-child,
.responsibility-item:last-child {
    border-bottom: none;
}

.apply-now-main {
    width: 100%;
    background: var(--vert);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.apply-now-main:hover {
    background: #0F2A1F;
}

/* Job Info Stats */
.compensation-text-block {
    margin-bottom: 12px;
}

.compensation-text-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--texte);
    margin-bottom: 4px;
    display: block;
}

.compensation-text-value {
    font-size: 15px;
    color: var(--texte);
    line-height: 1.5;
}

.job-info-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.info-stat {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    gap: 4px;
    text-align: center;
    padding: 12px 10px;
    min-height: 74px;
    background: var(--surf2);
    border-radius: 8px;
}

.stat-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--texte);
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}

.stat-label {
    font-size: 11px;
    color: var(--att);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
}

@media (max-width: 480px) {
    .job-info-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

.hours-section {
    padding-top: 12px;
    border-top: 1px solid var(--bord);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.days-section {
    padding-top: 12px;
    border-top: 1px solid var(--bord);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shifts-section {
    padding-top: 12px;
    border-top: 1px solid var(--bord);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Job card compact shifts/days */
.job-card-shifts {
    font-size: 14px;
    margin: 6px 0;
}

.job-card-days {
    font-size: 13px;
    color: var(--att);
    margin: 4px 0;
}

/* Work Schedule Section - like mobile app */
.work-schedule-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--bord);
}

.schedule-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--texte);
    margin: 0 0 12px 0;
}

.schedule-day {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: var(--surf2);
    border-left: 4px solid var(--vert);
    border-radius: 8px;
}

.schedule-day-name {
    font-weight: 600;
    color: var(--texte);
}

.schedule-day-time {
    color: var(--att);
    font-size: 14px;
}

.language-requirement {
    padding: 8px 0;
    border-bottom: 1px solid var(--surf2);
}

.language-requirement:last-child {
    border-bottom: none;
}

/* More Information Section */
.more-info-section {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin: 0 20px 16px 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.more-info-btn {
    background: var(--vert);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.more-info-btn:hover {
    background: #0F2A1F;
    transform: translateY(-1px);
}

/* Location Jobs Section */
.location-jobs-section {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin: 0 20px 16px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.location-jobs-section h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--texte);
    margin: 0 0 16px 0;
}

.location-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.location-job-card {
    background: var(--surf2);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--bord);
}

.location-job-card:hover {
    background: white;
    border-color: var(--vert);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.1);
}

.location-job-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.location-job-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--texte);
    margin: 0;
}

.location-job-pay {
    font-size: 14px;
    font-weight: 600;
    color: var(--vert);
    background: var(--lfw-green-light);
    padding: 4px 8px;
    border-radius: 6px;
}

.location-job-preview {
    font-size: 14px;
    color: var(--att);
    line-height: 1.4;
    margin-bottom: 8px;
}

.location-job-action {
    font-size: 14px;
    color: var(--vert);
    font-weight: 500;
}

/* Work Schedule Styles */
.work-schedule-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--bord);
}

.work-schedule-section h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--texte);
    margin: 0 0 12px 0;
}

.schedule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.schedule-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    background: var(--surf2);
    border-radius: 6px;
    border: 1px solid var(--bord);
}

.day-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--att);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.day-time {
    font-size: 13px;
    font-weight: 500;
    color: var(--texte);
}

.schedule-info {
    padding: 12px;
    background: var(--surf2);
    border-radius: 6px;
    color: var(--att);
    font-style: italic;
    text-align: center;
}

/* General schedule rows (required_days/times/hours) */
.schedule-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surf2);
    border-radius: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.schedule-label {
    font-weight: 600;
    color: var(--texte);
    font-size: 14px;
}

.schedule-value {
    color: var(--texte);
    font-size: 14px;
}

/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.loading-content {
    text-align: center;
    color: var(--att);
}

.spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--bord);
    border-top: 2px solid var(--vert);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

.spinner.large {
    width: 40px;
    height: 40px;
    border-width: 3px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.error-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.retry-btn {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: var(--vert);
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    font-weight: 500;
}

/* Directions Toast */
.directions-toast {
    position: fixed;
    top: 90px;
    right: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 2500;
    max-width: 300px;
    animation: slideInRight 0.3s ease-out;
}

.toast-content {
    padding: 16px;
    position: relative;
}

.toast-content h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--texte);
}

.toast-content p {
    margin: 0;
    font-size: 14px;
    color: var(--att);
}

.toast-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    font-size: 18px;
    color: var(--att);
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-close:hover {
    color: var(--texte);
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Mobile/Tablet Responsive - COMPACT HEADER (matches mobile layout breakpoint) */
@media (max-width: 1024px) {
    /* Compact single-row header */
    .header-single {
        padding: 8px 12px;
        flex-direction: row;
        gap: 8px;
        align-items: center;
        min-height: auto;
    }

    .logo-section {
        margin-right: 0;
    }

    /* Small logo on mobile */
    .header-logo-big {
        height: 40px;
    }

    /* HIDE navigation on mobile - they're already on the map page */
    .main-nav {
        display: none;
    }

    /* Compact controls */
    .header-controls-inline {
        gap: 8px;
        margin-left: auto;
        margin-right: 8px;
        height: auto;
        flex-wrap: nowrap;
    }

    /* Smaller view toggle buttons */
    .view-toggle {
        gap: 2px;
    }

    .view-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    /* Hide job counter on mobile */
    .job-counter {
        display: none;
    }

    /* Compact filter button */
    .filter-btn-header {
        padding: 6px 10px;
        font-size: 12px;
    }

    /* Hide download button and clear directions on mobile header */
    .download-btn,
    .clear-directions-btn {
        display: none !important;
    }

    /* Compact language toggle */
    .header-actions {
        margin-right: 0;
        gap: 4px;
    }

    .language-toggle {
        margin-right: 0;
    }

    .lang-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    /* Main content starts below compact header (~60px) */
    .main-content {
        flex-direction: column;
        padding-top: 60px;
    }

    .map-container {
        height: 50vh;
    }

    .sidebar {
        width: 100%;
        height: 50vh;
        border-left: none;
        border-top: 1px solid var(--bord);
    }

    .sidebar-header {
        padding: 1rem;
    }

    .job-list {
        padding: 0.75rem;
    }

    .job-card {
        padding: 0.75rem;
    }

    .modal {
        align-items: flex-end;
    }

    .modal-content {
        border-radius: 0.5rem 0.5rem 0 0;
        max-height: 90vh;
    }
}

@media (max-width: 480px) {
    .header-content {
        padding: 0.5rem 0.75rem;
    }
    
    .lfw-logo {
        font-size: 1.25rem;
    }
    
    .back-link {
        font-size: 0.875rem;
    }
    
    .job-counter {
        display: none;
    }
    
    .download-btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .main-content {
        padding-top: 60px;
    }
    
    .map-container {
        height: 45vh;
    }
    
    .sidebar {
        height: 55vh;
    }
}/* ===================================
   LANGUAGE TOGGLE - BIGGER BUTTONS
   =================================== */

.language-toggle {
    display: flex;
    gap: 4px;
    background: var(--surf2);
    padding: 4px;
    border-radius: 12px;
    margin-right: 16px;
}

.lang-btn {
    padding: 10px 20px; /* Increased from 6px 12px */
    font-size: 16px; /* Increased from 14px */
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--att);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    min-width: 60px; /* Ensure buttons are wide enough */
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.5);
    color: var(--texte);
}

.lang-btn.active {
    background: white;
    color: var(--vert);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ===================================
   MAP/LIST VIEW TOGGLE
   =================================== */

.view-toggle {
    display: flex;
    gap: 2px;
    background: var(--surf2);
    padding: 2px;
    border-radius: 6px;
    margin-right: 12px;
}

.view-btn {
    padding: 10px 18px;
    font-size: 18px;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--att);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.view-btn:hover {
    background: rgba(255, 255, 255, 0.5);
    color: var(--texte);
}

.view-btn.active {
    background: white;
    color: var(--vert);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ===================================
   MAP CONTAINER STATES
   =================================== */

/* Map view (default) */
.map-container {
    flex: 1;
    position: relative;
    transition: all 0.3s ease;
}

/* List-only view */
.list-view .map-container {
    display: none;
}

.list-view .sidebar {
    width: 100%;
    max-width: none;
    height: calc(100vh - 80px);
}

.list-view .job-list {
    max-height: none;
    height: calc(100% - 180px);
}

/* Hide transit/car buttons in list view */
.list-view .directions-options {
    display: none;
}

/* Hide My Location in list view */
.list-view .map-only {
    display: none !important;
}

/* ===================================
   CLEAN SIDEBAR LAYOUT
   =================================== */

.sidebar-header {
    padding: 20px;
    background: white;
    border-bottom: 1px solid var(--bord);
}

.sidebar-header h2 {
    /* 22px mangeait de la hauteur utile dans une colonne dont tout l'intérêt
       est la liste en dessous. Au niveau d'un titre de section. */
    font-size: 18px;
    font-weight: 700;
    color: var(--texte);
    margin-bottom: 12px;
}

/* ===================================
   CLEAN FILTER SYSTEM
   =================================== */

.filters-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--texte);
    min-width: 65px;
    text-align: right;
}

.sort-select,
.date-select,
.job-search-input {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid var(--bord);
    border-radius: 8px;
    font-size: 14px;
    background: white;
    color: var(--texte);
    font-weight: 500;
}

.sort-select,
.date-select {
    cursor: pointer;
}

.sort-select:focus,
.date-select:focus,
.job-search-input:focus,
.pay-input:focus {
    outline: none;
    border-color: var(--vert);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
}

.pay-range-inputs {
    display: flex;
    gap: 8px;
    flex: 1;
}

.pay-input {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid var(--bord);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

/* Remove old filter buttons */
.filters {
    display: none;
}

/* Remove old search controls */
.search-controls {
    display: none;
}

/* ===================================
   JOB LIST IMPROVEMENTS
   =================================== */

.job-list {
    padding: 16px;
    overflow-y: auto;
}

/* ===================================
   CLEAN FILTER SYSTEM
   =================================== */

.filters-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
}

.filter-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--texte);
    min-width: 80px;
}

.sort-select,
.date-select {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid var(--bord);
    border-radius: 8px;
    font-size: 14px;
    background: white;
    color: var(--texte);
    font-weight: 500;
    cursor: pointer;
}

.sort-select:focus,
.date-select:focus {
    outline: none;
    border-color: var(--vert);
}

.pay-range-inputs {
    display: flex;
    gap: 8px;
    flex: 1;
}

.pay-input {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid var(--bord);
    border-radius: 8px;
    font-size: 14px;
}

.pay-input:focus {
    outline: none;
    border-color: var(--vert);
}

/* ===================================
   ENHANCED JOB CARDS
   =================================== */

.job-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.2s;
    cursor: pointer;
    border: 2px solid transparent;
}

.job-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border-color: var(--vert);
    transform: translateY(-2px);
}

.job-header {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 12px;
}

.job-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--texte);
    margin: 0 0 6px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-pay {
    font-size: 16px;
    font-weight: 700;
    color: var(--vert);
    background: var(--v100);
    padding: 4px 12px;
    border-radius: 8px;
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-company {
    font-size: 16px;
    font-weight: 600;
    color: var(--texte);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-location {
    font-size: 14px;
    color: var(--att);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.job-location::before {
    content: "📍";
}

.directions-options {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.directions-btn {
    padding: 8px 14px;
    border: 1px solid var(--bord2);
    background: white;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.directions-btn:hover {
    background: var(--surf2);
    border-color: var(--vert);
    transform: scale(1.05);
}

.directions-btn.transit {
    color: #1d4ed8;
}

.directions-btn.driving {
    color: #7c3aed;
}

.job-description-preview {
    font-size: 14px;
    color: var(--att);
    line-height: 1.6;
    margin: 12px 0;
}

.click-to-view {
    font-size: 13px;
    color: var(--vert);
    font-weight: 600;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

@media (max-width: 1024px) {
    .header-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .view-toggle,
    .language-toggle {
        margin-right: 0;
    }

    .lang-btn {
        padding: 8px 16px;
        font-size: 14px;
        min-width: 50px;
    }

    .view-btn {
        padding: 8px 12px;
        font-size: 14px;
    }

    .job-title {
        font-size: 18px;
    }

    .job-pay {
        font-size: 16px;
        padding: 4px 10px;
    }
}

/* ===================================
   FILTERS ENHANCEMENT
   =================================== */

.filters {
    display: flex;
    gap: 8px;
    margin: 16px 0;
}

.filter-btn {
    padding: 10px 18px;
    border: 2px solid var(--bord);
    background: white;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--att);
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
}

.filter-btn:hover {
    border-color: var(--vert);
    color: var(--vert);
}

.filter-btn.active {
    background: var(--vert);
    color: white;
    border-color: var(--vert);
}

/* ===================================
   SEARCH CONTROLS
   =================================== */

.search-controls {
    display: flex;
    gap: 8px;
    margin: 16px 0;
}

.job-search-input,
.min-pay-input {
    padding: 10px 14px;
    border: 2px solid var(--bord);
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.2s;
}

.job-search-input {
    flex: 1;
}

.min-pay-input {
    width: 100px;
}

.job-search-input:focus,
.min-pay-input:focus {
    outline: none;
    border-color: var(--vert);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
}

/* ===================================
   LOADING STATES
   =================================== */

.loading-jobs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--att);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--surf2);
    border-top-color: var(--vert);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===================================
   NO JOBS STATE
   =================================== */

.no-jobs {
    text-align: center;
    padding: 60px 20px;
    color: var(--att);
}

.no-jobs p {
    font-size: 16px;
    margin: 8px 0;
}

.no-jobs p:first-child {
    font-size: 18px;
    font-weight: 600;
    color: var(--texte);
}

/* ===================================
   CRITICAL FIXES - SIDEBAR LAYOUT
   =================================== */

.main-content {
    display: flex !important;
    height: calc(100vh - 80px) !important;
    margin-top: 80px !important;
}

.sidebar {
    width: 420px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.sidebar-header {
    flex-shrink: 0 !important;
}

.job-list {
    flex: 1 !important;
    overflow-y: auto !important;
}

/* ===================================
   COLORFUL JOB CARDS - OVERRIDE
   =================================== */

.job-list {
    background: var(--surf2) !important;
}

.job-card {
    background: white !important;
    border-radius: 10px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    border-left: 4px solid transparent !important;
    transition: all 0.2s !important;
}

.job-card:hover {
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.15) !important;
    border-left-color: var(--vert) !important;
    transform: translateX(2px) !important;
}

.job-pay {
    background: linear-gradient(135deg, var(--v100) 0%, var(--v100) 100%) !important;
    border: 1px solid var(--v100) !important;
    color: var(--vert) !important;
}

.sidebar-header {
    background: linear-gradient(135deg, var(--v100) 0%, var(--surf1) 100%) !important;
}

.job-company::before {
    content: "🏢" !important;
}

.job-location::before {
    content: "📍" !important;
}

.click-to-view {
    color: var(--vert) !important;
}

.job-card:hover .click-to-view {
    gap: 8px !important;
}
/* ===========================================
   MINIMAL FIX - JUST CENTERING + COLORS
   =========================================== */

/* CENTER LIST VIEW */
.list-view .main-content {
    background: var(--surf2) !important;
}

.list-view .sidebar {
    width: 50% !important;
    max-width: 850px !important;
    margin: 0 auto !important;
}

/* GREEN BAR ALWAYS VISIBLE */
.job-card {
    border-left: 4px solid var(--vert) !important;
}

/* BLACK BORDER ON FILTER */
.list-view .sidebar-header {
    border: 2px solid var(--texte) !important;
}

/* ===============================================================
   ADD THESE LINES TO THE END OF YOUR ORIGINAL map.css FILE
   =============================================================== */

/* ============ LIST VIEW FIXES ============ */

/* Center the list view */
.list-view .main-content {
    background: var(--surf2) !important;
    padding: 20px !important;
}

.list-view .sidebar {
    width: 50% !important;
    max-width: 850px !important;
    margin: 0 auto !important;
    border-left: none !important;
}

/* Hide map in list view */
.list-view .map-container {
    display: none !important;
}

/* Hide transit buttons in list view */
.list-view .directions-options {
    display: none !important;
}

/* Hide My Location in list view */
.list-view .map-only {
    display: none !important;
}

/* Black border on filter box */
.list-view .sidebar-header {
    background: white !important;
    border: 2px solid var(--texte) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
}

/* Green bar on job cards - ALWAYS visible */
.job-card {
    border-left: 4px solid var(--vert) !important;
}

.job-card:hover {
    border-left-color: var(--v700) !important;
    transform: translateX(4px) !important;
}

/* Green pay badge */
.job-pay {
    background: linear-gradient(135deg, var(--v100) 0%, var(--v100) 100%) !important;
    border: 1px solid var(--v100) !important;
    color: var(--vert) !important;
}

/* Remove business icon */
.job-company::before {
    content: "" !important;
}

/* Green click text */
.click-to-view {
    color: var(--vert) !important;
}

/* ============ MAP VIEW FIXES ============ */

/* Wider sidebar - no overflow */
.sidebar {
    width: 480px !important;
    overflow: hidden !important;
}

.job-list {
    overflow-y: auto !important;
    background: var(--surf2) !important;
}

/* Fix text overflow in map view — ellipsis, not word-break */
.job-title,
.job-company {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
}
.job-location {
    overflow-wrap: break-word !important;
}

/* Black text for transit buttons */
.directions-btn {
    color: var(--texte) !important;
}

.directions-btn.transit {
    color: var(--texte) !important;
}

.directions-btn.driving {
    color: var(--texte) !important;
}

/* ============ BOTH VIEWS ============ */

/* Gray background for job list */
.job-list {
    background: var(--surf2) !important;
}

/* Light green header */
.sidebar-header {
    background: linear-gradient(135deg, var(--v100) 0%, var(--surf1) 100%) !important;
}

/* ============ FILTER TOGGLE BUTTON (LIST VIEW) ============ */

#filter-toggle-btn {
    width: 100%;
    padding: 8px 12px;
    background: var(--vert);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 8px;
    transition: all 0.2s;
}

#filter-toggle-btn:hover {
    background: var(--v900);
    transform: scale(1.02);
}

.filter-content {
    display: block;
}

/* Compact filter spacing */
.list-view .sidebar-header h2 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
}

.list-view .filters {
    gap: 6px !important;
    margin: 8px 0 !important;
}

.list-view .filter-btn {
    padding: 6px 12px !important;
    font-size: 13px !important;
}

.list-view .search-controls {
    gap: 6px !important;
    margin: 8px 0 !important;
}

.list-view .job-search-input,
.list-view .min-pay-input {
    padding: 6px 10px !important;
    font-size: 13px !important;
}

/* Job Card Rating */
.job-card-rating {
    font-size: 13px;
    color: var(--att);
    margin: 4px 0;
    font-weight: 500;
}

/* Company Info Section */
.company-info-section {
    margin: 12px 0 16px 0;
}

.job-details-company {
    font-size: 18px;
    font-weight: 600;
    color: var(--vert);
    margin: 0 0 8px 0;
}

/* Modal Employer Rating Display */
.employer-rating-modal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFF8E1;
    padding: 8px 12px;
    border-radius: 8px;
    width: fit-content;
    margin: 0;
}

.employer-rating-modal .star-icon {
    font-size: 18px;
    line-height: 1;
}

.employer-rating-modal .rating-score {
    font-size: 16px;
    font-weight: 700;
    color: var(--texte);
}

.employer-rating-modal .rating-count {
    font-size: 14px;
    color: var(--att);
}

/* ===================================
   FIGMA FILTER MODAL
   =================================== */

/* Filter Button in Header */
.filter-btn-header {
    padding: 12px 20px;
    background: var(--vert);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.filter-btn-header:hover {
    background: var(--v900);
    transform: translateY(-1px);
}

/* Modal Overlay */
.filter-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 20px;
}

.filter-modal-overlay.hidden {
    display: none;
}

/* Modal Container */
.filter-modal {
    background: white;
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
}

/* Modal Header */
.filter-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--bord);
    background: var(--surf2);
}

.filter-modal-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--texte);
    margin: 0;
}

.filter-modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--surf2);
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--att);
}

.filter-modal-close:hover {
    background: var(--bord);
    color: var(--texte);
}

/* Modal Body */
.filter-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Filter Sections */
.filter-section {
    margin-bottom: 24px;
}

.filter-section:last-child {
    margin-bottom: 0;
}

.filter-section-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--texte);
    margin-bottom: 10px;
}

/* Text & Number Inputs */
.filter-modal-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--bord);
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.2s;
}

.filter-modal-input:focus {
    outline: none;
    border-color: var(--vert);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
}

.filter-modal-input::placeholder {
    color: var(--att2);
}

/* Two-column inputs (salary, hours) */
.filter-row-inputs {
    display: flex;
    gap: 12px;
}

.filter-row-inputs .filter-modal-input {
    flex: 1;
}

/* Select dropdown */
.filter-modal-select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--bord);
    border-radius: 10px;
    font-size: 15px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-modal-select:focus {
    outline: none;
    border-color: var(--vert);
}

/* Checkbox Chips (Days) */
.filter-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--surf2);
    border: 2px solid transparent;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--texte);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-chip:hover {
    background: var(--bord);
}

.filter-chip input[type="checkbox"] {
    display: none;
}

.filter-chip:has(input:checked) {
    background: var(--v100);
    border-color: var(--vert);
    color: var(--vert);
}

/* Language Chips */
.filter-langs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-lang-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surf2);
    border: 2px solid transparent;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--texte);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-lang-chip:hover {
    background: var(--bord);
}

.filter-lang-chip input[type="checkbox"] {
    display: none;
}

.filter-lang-chip:has(input:checked) {
    background: var(--v100);
    border-color: var(--vert);
    color: var(--vert);
}

/* Shift Filter */
.filter-shifts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-shift-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--surf2);
    border: 2px solid transparent;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--texte);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-shift-chip:hover {
    background: var(--bord);
}

.filter-shift-chip input[type="checkbox"] {
    display: none;
}

.filter-shift-chip:has(input:checked) {
    background: var(--v100);
    border-color: var(--vert);
    color: var(--vert);
}

/* Hours per week chips */
.filter-hours-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-hour-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--surf2);
    border: 2px solid transparent;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--texte);
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-hour-chip:hover {
    background: var(--bord);
}

.filter-hour-chip input[type="checkbox"] {
    display: none;
}

.filter-hour-chip:has(input:checked) {
    background: var(--v100);
    border-color: var(--vert);
    color: var(--vert);
}

/* Modal Footer */
.filter-modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--bord);
    background: var(--surf2);
}

.filter-reset-btn {
    flex: 1;
    padding: 14px 20px;
    background: white;
    border: 2px solid var(--bord);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--att);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-reset-btn:hover {
    background: var(--surf2);
    border-color: var(--bord2);
}

.filter-apply-btn {
    flex: 1;
    padding: 14px 20px;
    background: var(--vert);
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-apply-btn:hover {
    background: var(--v900);
}

/* Mobile/Tablet Responsive for Filter Modal */
@media (max-width: 1024px) {
    .filter-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .filter-modal {
        max-width: none;
        border-radius: 20px 20px 0 0;
        max-height: 90vh;
    }

    .filter-modal-header {
        padding: 16px 20px;
    }

    .filter-modal-body {
        padding: 20px;
    }

    .filter-chip,
    .filter-lang-chip {
        padding: 6px 12px;
        font-size: 13px;
    }

    .filter-modal-footer {
        padding: 16px 20px;
    }
}

/* ============================================
   MOBILE LAYOUT - FIGMA DESIGN
   Applies to phones AND tablets (max-width: 1024px)
   ============================================ */

/* Hide mobile elements on desktop */
.mobile-header,
.mobile-nav-overlay,
.mobile-bottom-bar,
.mobile-bottom-sheet {
    display: none;
}

/* Hide desktop elements on mobile/tablet */
@media (max-width: 1024px) {
    .desktop-header,
    .desktop-sidebar {
        display: none !important;
    }

    .mobile-header {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: white;
        z-index: 1000;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .mobile-header-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        border-bottom: 1px solid var(--bord);
    }

    .mobile-logo img {
        height: 40px;
        width: auto;
    }

    .mobile-header-right {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-header-right .language-toggle {
        margin-right: 0;
    }

    .mobile-header-right .lang-btn {
        padding: 8px 12px;
        font-size: 14px;
    }

    /* Hamburger Button */
    .hamburger-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px;
        height: 18px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .hamburger-btn span {
        display: block;
        width: 100%;
        height: 2px;
        background: var(--texte);
        border-radius: 1px;
    }

    /* Mobile View Bar (Carte/Liste tabs) */
    .mobile-view-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 16px;
        background: var(--surf2);
    }

    .mobile-view-bar .view-toggle {
        display: flex;
        gap: 4px;
        background: white;
        padding: 4px;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .mobile-view-bar .view-btn {
        padding: 8px 16px;
        font-size: 14px;
        border: none;
        background: transparent;
        border-radius: 6px;
        cursor: pointer;
        color: var(--att);
    }

    .mobile-view-bar .view-btn.active {
        background: var(--v100);
        color: var(--vert);
        font-weight: 600;
    }

    .mobile-job-count {
        font-size: 14px;
        color: var(--texte);
    }

    .mobile-job-count span:first-child {
        font-weight: 700;
        color: var(--vert);
    }

    /* Mobile Navigation Overlay */
    .mobile-nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;
        z-index: 2000;
        display: flex;
        flex-direction: column;
    }

    .mobile-nav-overlay.hidden {
        display: none;
    }

    .mobile-nav-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        border-bottom: 1px solid var(--bord);
    }

    .close-nav-btn {
        font-size: 32px;
        background: none;
        border: none;
        color: var(--texte);
        cursor: pointer;
        line-height: 1;
    }

    .mobile-nav-menu {
        display: flex;
        flex-direction: column;
        padding: 16px;
    }

    .mobile-nav-link {
        padding: 16px;
        font-size: 18px;
        color: var(--texte);
        text-decoration: none;
        border-radius: 8px;
    }

    .mobile-nav-link:hover,
    .mobile-nav-link.active {
        background: var(--v100);
        color: var(--vert);
    }

    .mobile-nav-link.active {
        font-weight: 600;
    }

    /* Main Content - Full screen map */
    .main-content {
        padding-top: 110px; /* Mobile header height */
        height: 100vh;
        position: relative;
    }

    .map-container {
        position: absolute;
        top: 110px;
        left: 0;
        right: 0;
        bottom: 0;
        height: auto !important;
    }

    /* Floating Bottom Bar */
    .mobile-bottom-bar {
        display: flex;
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        background: white;
        border-radius: 50px;
        padding: 8px;
        gap: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        z-index: 900;
    }

    .bottom-bar-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 12px 16px;
        border: none;
        border-radius: 50px;
        font-size: 16px;
        cursor: pointer;
        background: var(--surf2);
        color: var(--texte);
        transition: all 0.2s;
    }

    .bottom-bar-btn:hover {
        background: var(--bord);
    }

    .bottom-bar-btn.location-btn {
        background: white;
        border: 2px solid var(--bord);
    }

    .bottom-bar-btn.filter-btn {
        background: var(--vert);
        color: white;
    }

    .bottom-bar-btn.jobs-btn {
        background: var(--vert);
        color: white;
        font-weight: 600;
    }

    .bottom-bar-btn.jobs-btn span {
        background: white;
        color: var(--vert);
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 14px;
    }

    /* Mobile Bottom Sheet (Job List) */
    .mobile-bottom-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-radius: 24px 24px 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
        z-index: 1100;
        max-height: 70vh;
        display: flex;
        flex-direction: column;
        transform: translateY(0);
        transition: transform 0.3s ease;
    }

    .mobile-bottom-sheet.hidden {
        transform: translateY(100%);
        display: flex; /* Keep display flex for animation */
    }

    .bottom-sheet-header {
        padding: 12px 20px 16px;
        border-bottom: 1px solid var(--bord);
    }

    .bottom-sheet-handle {
        width: 40px;
        height: 4px;
        background: var(--bord2);
        border-radius: 2px;
        margin: 0 auto 12px;
    }

    .bottom-sheet-title-row {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .bottom-sheet-icon {
        font-size: 24px;
    }

    .bottom-sheet-title {
        flex: 1;
    }

    .bottom-sheet-title h2 {
        font-size: 18px;
        font-weight: 700;
        color: var(--texte);
        margin: 0;
    }

    .bottom-sheet-count {
        font-size: 14px;
        color: var(--att);
    }

    .close-sheet-btn {
        font-size: 28px;
        background: none;
        border: none;
        color: var(--att2);
        cursor: pointer;
        line-height: 1;
    }

    .bottom-sheet-content {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
    }

    /* Hide bottom bar when sheet is open */
    body.sheet-open .mobile-bottom-bar {
        display: none;
    }
}

/* Filter Days Grid - 2 columns like Figma */
/* Schedule Presets */
.filter-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.preset-btn {
    padding: 8px 16px;
    background: var(--surf2);
    border: 2px solid var(--bord);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.preset-btn:hover {
    border-color: var(--vert);
    color: var(--vert);
}

.preset-btn.active {
    background: var(--v100);
    border-color: var(--vert);
    color: var(--vert);
}

.filter-days-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.filter-day-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--surf2);
    border: 1px solid var(--bord);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--texte);
}

.filter-day-chip:hover {
    background: var(--surf2);
}

.filter-day-chip input:checked + span {
    color: var(--vert);
    font-weight: 600;
}

/* Industry Filter Grid */
.filter-industry-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-industry-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surf2);
    border: 1px solid var(--bord);
    border-radius: 20px;
    font-size: 13px;
    color: var(--texte);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-industry-chip:hover {
    background: var(--bord);
}

.filter-industry-chip input[type="checkbox"] {
    display: none;
}

.filter-industry-chip:has(input:checked) {
    background: var(--v100);
    border-color: var(--vert);
    color: var(--vert);
}

.loading-industries {
    color: var(--att2);
    font-size: 13px;
    font-style: italic;
}

/* Work Location Type Filter */
.filter-work-location-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-location-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--surf2);
    border: 1px solid var(--bord);
    border-radius: 20px;
    font-size: 14px;
    color: var(--texte);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-location-chip:hover {
    background: var(--bord);
}

.filter-location-chip input[type="checkbox"] {
    display: none;
}

.filter-location-chip:has(input:checked) {
    background: var(--v100);
    border-color: var(--vert);
    color: var(--vert);
}

/* ===================================
   PICKER MODALS (LinkedIn-style)
   =================================== */

.picker-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--surf2);
    border: 1px solid var(--bord);
    border-radius: 8px;
    font-size: 14px;
    color: var(--att);
    cursor: pointer;
    transition: all 0.2s;
}

.picker-button:hover {
    background: var(--surf2);
    border-color: var(--bord2);
}

.picker-arrow {
    font-size: 18px;
    color: var(--att2);
}

.selected-tags-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.selected-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--v100);
    border: 1px solid var(--vert);
    border-radius: 16px;
    font-size: 12px;
    color: var(--vert);
}

.picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4000;
}

.picker-overlay.hidden {
    display: none;
}

.picker-modal {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bord);
}

.picker-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--texte);
    margin: 0;
}

.picker-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--att);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.picker-close:hover {
    color: var(--texte);
}

.picker-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 15px;
    color: var(--texte);
}

.picker-item:hover {
    background: var(--surf2);
}

.picker-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--vert);
}

.picker-item:has(input:checked) {
    background: var(--v100);
    color: var(--vert);
    font-weight: 500;
}

.picker-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--bord);
}

.picker-done-btn {
    width: 100%;
    padding: 12px;
    background: var(--vert);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.picker-done-btn:hover {
    background: var(--v900);
}

/* Compact filter row styles */
.filter-row-compact {
    display: flex;
    gap: 16px;
}

.filter-half {
    flex: 1;
}

.filter-checkboxes-compact {
    display: flex;
    gap: 8px;
}

.filter-chip-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--surf2);
    border: 1px solid var(--bord);
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-chip-small:hover {
    background: var(--bord);
}

.filter-chip-small input[type="checkbox"] {
    display: none;
}

.filter-chip-small:has(input:checked) {
    background: var(--v100);
    border-color: var(--vert);
}

/* Compact days grid */
.filter-days-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-day-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    background: var(--surf2);
    border: 1px solid var(--bord);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--texte);
    min-width: 48px;
}

/* Shifts grid */
.filter-shifts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-shift-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--surf2);
    border: 1px solid var(--bord);
    border-radius: 20px;
    font-size: 14px;
    color: var(--texte);
    cursor: pointer;
    transition: all 0.2s;
}

.filter-shift-chip:hover {
    background: var(--bord);
}

.filter-shift-chip input[type="checkbox"] {
    display: none;
}

.filter-shift-chip:has(input:checked) {
    background: var(--v100);
    border-color: var(--vert);
    color: var(--vert);
}

/* ===================================
   MODAL LINKEDIN-STYLE HEADER
   =================================== */

/* Logo en HAUT A DROITE, comme l'en-tete de la fiche mobile (JobDetailsScreen,
   styles.linkedinHeaderRow). 'row-reverse' plutot que de reordonner le HTML : le premier enfant
   (la photo) part a droite et le bloc de texte recupere le bord gauche de la carte, donc le titre
   commence a la marge au lieu d'etre indente de 74 px. */
.modal-header-linkedin {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}
/* La colonne de texte prend tout ce qui reste, sinon 'row-reverse' la laisse collee a la photo
   et le titre se retrouve centre au milieu de la carte. */
.modal-header-linkedin .modal-header-info {
    flex: 1;
    min-width: 0;
}

.modal-employer-photo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.modal-employer-photo-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--surf2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 28px;
}

.modal-header-info {
    flex: 1;
    min-width: 0;
}

.modal-header-info .job-details-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--texte);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.modal-header-info .job-details-company {
    font-size: 16px;
    font-weight: 500;
    color: var(--texte);
    margin: 0;
}

/* ===================================
   DOWNLOAD BUTTONS IN HEADER
   =================================== */

.download-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.download-btn.ios-btn {
    background: #000;
    color: white;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.download-btn.ios-btn:hover {
    background: var(--texte);
    transform: translateY(-1px);
}

.download-btn.android-coming-soon {
    background: var(--bord);
    color: var(--att2);
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: default;
}

/* ===================================
   HEADER DOWNLOAD ROW (below nav)
   =================================== */

.header-download-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 12px 20px 16px;
    background: linear-gradient(to bottom, var(--v100), white);
    border-top: 1px solid var(--bord);
}

.header-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.header-download-btn.ios {
    background: #000;
    color: white;
}

.header-download-btn.ios:hover {
    background: var(--texte);
    transform: translateY(-1px);
}

.header-download-btn.android {
    background: var(--bord);
    color: var(--att2);
    cursor: default;
}

@media (max-width: 1024px) {
    .header-download-row {
        display: none;
    }
}

/* Mobile download section in nav menu */
.mobile-download-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--bord);
}

.mobile-download-btn {
    display: block;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}

.mobile-download-btn.ios {
    background: #000;
    color: white;
}

.mobile-download-btn.android {
    background: var(--surf2);
    color: var(--att2);
}
/* Job list pagination (desktop list + mobile bottom sheet) */
.job-list-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 12px 18px;
    margin-top: 4px;
}
.job-list-pagination .pagination-btn {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid var(--bord2);
    border-radius: 8px;
    background: var(--surf1);
    color: var(--texte);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.job-list-pagination .pagination-btn:hover:not([disabled]) {
    background: var(--surf2);
    border-color: var(--att2);
}
.job-list-pagination .pagination-btn[disabled] {
    opacity: 0.4;
    cursor: default;
}
.job-list-pagination .pagination-info {
    flex: 1 1 auto;
    text-align: center;
    font-size: 12px;
    color: var(--att);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   ÉCHELLE TYPOGRAPHIQUE DES CARTES DE LISTE — la source unique
   ═══════════════════════════════════════════════════════════════════════════════════════════════
   QUATRE tailles, pas sept : 15 titre · 13 corps · 12 secondaire · 10.5 badges. Les mêmes rapports
   que la carte de liste mobile (StudentJobBrowsingScreen), en un cran plus petit — le web affiche
   la carte dans une colonne latérale étroite.

   ⚠️ Ce bloc est en FIN DE FICHIER par nécessité, pas par paresse. `.job-pay` est défini CINQ fois
   dans ce fichier et `.job-title` trois fois, à des endroits sans rapport et avec des `!important`
   épars. Corriger chaque définition demanderait de démêler quelle règle gagne réellement pour
   chaque surface — un changeset à part, à faire un jour. En attendant, un bloc scopé à `.job-card`
   et placé en dernier gagne le cascade sans rien casser ailleurs : les autres définitions de
   `.job-pay` servent aussi la fiche et le pop-up, qui ne doivent PAS bouger.

   Toute nouvelle ligne sur une carte prend une de ces quatre valeurs. */
.job-card .job-card-title,
.job-card .job-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}
.job-card .job-card-company,
.job-card .job-company {
    font-size: 13px;
    font-weight: 500;
    margin-top: 2px;
}
.job-card .job-card-location,
.job-card .job-applicants,
.job-card .click-to-view {
    font-size: 12px;
}
.job-card .job-pay {
    font-size: 13px;
    font-weight: 700;
}
/* Les badges (NEQ, taux) gardent 10.5 px — définis plus haut avec .verified-badge / .rate-badge. */

/* ===========================================================================
   PASSE VISUELLE — aligne la carte sur le langage du site public
   (index / employeurs / candidats). CSS ajouté en fin de fichier : les règles
   précédentes ne sont pas modifiées, celles-ci gagnent par cascade.
   =========================================================================== */

/* La fiche d'emploi : même objet que .jobc sur le site public — accent camel
   permanent à gauche, pas seulement au survol. Avant, une liste de fiches
   n'avait aucun point d'accroche visuel tant qu'on ne passait pas dessus. */
.job-card {
    background: var(--surf1) !important;
    border: 1px solid var(--bord) !important;
    border-left: 4px solid var(--camel) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
}

.job-card:hover {
    border-left-color: var(--vert) !important;
    box-shadow: 0 4px 14px rgba(27, 67, 50, 0.10) !important;
    transform: none !important;   /* le glissement de 2px faisait sauter la liste */
}

/* L'en-tête de colonne : le dégradé vert datait et écrasait le contenu.
   Surface plate + une seule ligne de séparation, comme les sections du site. */
.sidebar-header {
    background: var(--surf1) !important;
    border-bottom: 1px solid var(--bord) !important;
}

/* Le salaire : c'était un dégradé entre deux fois la MÊME couleur, avec une
   bordure de cette couleur aussi. Une pastille plate, comme partout ailleurs. */
.job-pay {
    background: var(--v100) !important;
    border: none !important;
    color: var(--vert) !important;
    border-radius: var(--r-pill) !important;
    padding: 4px 10px !important;
}

/* Zéro emoji décoratif (règle de contenu). 🏢 et 📍 se répétaient sur chaque
   ligne de chaque fiche : du bruit, jamais de l'information. Les boutons de
   contrôle gardent les leurs — eux sont des cibles, pas de la décoration. */
.job-company::before,
.job-location::before {
    display: none !important;
}