/* ============================================================================
   Knowdg Talent — habillage des pages publiques d'offres d'emploi.
   ============================================================================

   POURQUOI CE FICHIER EXISTE
   Les vues `Views/jobs/*` portaient leurs styles dans un `<style>` au milieu du
   PHP, avec un vocabulaire inventé (`jobs-header`, `jobs-main`, `jobs-filters`)
   qui ne ressemblait à aucune autre page du site. `www/CLAUDE.md` l'interdit
   explicitement : « n'écrire aucun style local ».

   LA RÉFÉRENCE EST `Views/discover/index.php`
   C'est l'autre page PUBLIQUE du site — celle qui montre les QCM sans compte.
   Les classes `.pub-*` ci-dessous en reprennent les NOMS ET LES VALEURS à
   l'identique : même en-tête collant avec le logo, même accroche centrée, même
   fond `#f4f7fb`, même marque `#0077B6`, mêmes filtres à étiquette majuscule.
   Une personne qui passe de « Découvrir les QCM » à « Knowdg Talent » doit
   avoir l'impression de rester sur le même site, parce que c'est le cas.

   LA COQUILLE N'EST PLUS ICI
   L'en-tête, l'accroche, la largeur de contenu et le pied de page vivaient
   dans ce fichier, avec pour consigne « à la troisième page publique,
   extraire ». Knowdg Academy est cette troisième page : tout cela est passé
   dans `pub-shell.css`, que les vues d'offres chargent AVANT celle-ci. Ne
   rien y redéposer — ce qui reste ici est propre aux offres d'emploi.

   Ce fichier ne sert QU'aux visiteurs sans compte et aux composants partagés
   avec le rendu connecté (cartes, pastilles). Le rendu connecté, lui, garde la
   navbar et la DA `reports-dashboard` du reste de l'application.
   ========================================================================== */

:root {
    --talent-brand: #0077B6;
    --talent-brand-dark: #023e63;
    --talent-fond: #f4f7fb;
    --talent-bordure: #e8ecf2;
    --talent-texte: #1f2937;
    --talent-attenue: #6b7280;
}

/* Barre de filtres. Étiquettes en majuscules et champs de 40 px : mêmes valeurs
   que `discover`, pour que les deux barres se lisent pareil. */
.pub-filters {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
    padding: 14px 18px; margin: 2px 0 22px;
    background: #fff; border: 1px solid var(--talent-bordure); border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}
.pub-filter { display: flex; flex-direction: column; gap: 5px; min-width: 190px; flex: 1 1 190px; }
.pub-filter label {
    font-size: .72rem; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: .03em; margin: 0;
}
.pub-filter .form-control,
.pub-filter .form-select { height: 40px; border-radius: 8px; border: 1px solid #cbd5e1; }
.pub-filters .pub-filter-check { flex: 1 1 240px; min-width: 200px; padding-bottom: .55rem; }
.pub-filters .btn { height: 40px; white-space: nowrap; }
@media (max-width: 600px) {
    .pub-filter { min-width: 0; flex: 1 1 45%; }
}

/* ── Carte d'offre ────────────────────────────────────────────────────────── */
/* Rayon 12, bordure `#e8ecf2`, ombre légère : les valeurs des cartes de
   `marketplace.css` que `discover` réutilise. */

.job-card {
    background: #fff; border: 1px solid var(--talent-bordure); border-radius: 12px;
    padding: 1.05rem 1.2rem; margin-bottom: .85rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.job-card:hover {
    border-color: var(--talent-brand);
    box-shadow: 0 6px 16px rgba(0, 119, 182, .12);
    transform: translateY(-1px);
}
.job-title { font-size: 1.08rem; font-weight: 700; margin: 0 0 .25rem; }
.job-title a { color: var(--talent-brand-dark); text-decoration: none; }
.job-title a:hover { color: var(--talent-brand); }
.job-meta { color: #64757f; font-size: .9rem; }
.job-chip {
    display: inline-block; background: #eef4f8; border-radius: 999px;
    padding: .18rem .65rem; font-size: .82rem; margin: 0 .3rem .3rem 0;
}
.job-chip-verified { background: #e7f6ef !important; color: #1b6b50; }
.job-chip-featured { background: #fff4e0 !important; color: #a06400; }

/* Conversion indicative dans la devise de lecture du visiteur. Volontairement
   plus pâle et en italique que la pastille du montant réel : les deux se lisent
   côte à côte, et rien ne doit laisser croire qu'un salaire converti au taux du
   jour engage le recruteur au même titre que celui qu'il a saisi. */
.job-chip-approx {
    background: transparent !important; border: 1px dashed #cbd5e1;
    color: #64748b; font-style: italic;
}
body.dark-mode .job-chip-approx { border-color: #374151; color: #9ca3af; }
.job-verified { color: #1b6b50; }

.job-section h2 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
.job-prose { white-space: pre-wrap; }

/* Ligne de faits de la fiche d'offre (migration 062) : ce qu'un candidat
   vérifie avant même de lire l'annonce. En grille pour rester lisible du
   téléphone au grand écran, sans tableau. */
.job-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem 1.4rem; margin: .9rem 0 0; }
.job-facts div { min-width: 0; }
.job-facts dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--talent-attenue); margin: 0 0 .1rem; }
.job-facts dd { font-size: .87rem; margin: 0; overflow-wrap: anywhere; }

/* ── Bandeau de promesse (anonymat + compétences prouvées) ────────────────── */
/* Affiché au VISITEUR seulement. Grille et non colonnes fixes : sur téléphone
   les arguments s'empilent au lieu de se serrer, et c'est là que se lit la
   majorité du trafic d'un site d'emploi. */
.jobs-usp {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem; align-items: center;
    background: #fff; border: 1px solid var(--talent-bordure);
    border-left: 4px solid var(--talent-brand);
    border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.25rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}
.jobs-usp strong { color: var(--talent-brand-dark); }
.jobs-usp p { color: #4a5b66; margin-top: .2rem; }
.jobs-usp .btn { align-self: center; white-space: nowrap; }

/* ── Mode sombre ──────────────────────────────────────────────────────────── */
/* Les fonds sont posés en `!important` : la règle universelle de dark-mode.css
   les effacerait sinon (dette documentée dans www/CLAUDE.md). */
body.dark-mode .job-card,
body.dark-mode .jobs-usp,
body.dark-mode .pub-filters { background: #1e2a38 !important; border-color: #2c3a4a; }
body.dark-mode .job-chip { background: #24313f !important; }
body.dark-mode .job-facts dt,
body.dark-mode .jobs-usp p { color: #9CA3AF !important; }
body.dark-mode .job-title a,
body.dark-mode .jobs-usp strong { color: #e5edf5; }

/* Les étiquettes des cases à cocher ne sont pas des titres de champ : elles se
   lisent comme une phrase, donc pas de majuscules forcées. */
.pub-filter .form-check-label.text-none { text-transform: none; font-weight: 400; font-size: .85rem; color: var(--talent-texte); }
.pub-filter .form-check { margin-bottom: .2rem; }

/* ── « Mes candidatures » (rendu connecté) ────────────────────────────────── */
/* Ces règles vivaient dans un `<style>` au milieu de la vue. Même raison que
   tout le reste : un style local n'est ni réutilisable, ni surchargeable. */
.ma-card { background: #fff; border-radius: 10px; padding: 1.25rem; margin-bottom: 1rem; }
.ma-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; padding: .9rem 0; border-bottom: 1px solid #e9ecef; }
.ma-row:last-child { border-bottom: none; }
.ma-title { font-weight: 600; margin: 0 0 .2rem; }
.ma-meta { color: #6c757d; font-size: .875rem; }
.ma-inline { display: inline; }
body.dark-mode .ma-card { background: #1e2a38 !important; }

/* Le bouton ne s'étire pas comme un champ : il garde sa largeur de texte, en
   bout de barre. */
.pub-filter-submit { flex: 0 0 auto; min-width: 0; }

/* ── Barre de recherche principale ────────────────────────────────────────── */
/* Le geste d'Indeed : deux champs seulement — métier et lieu — en grand, et un
   bouton. Les sept autres filtres sont derrière `.talent-plus`.
   Voir l'en-tête de `Views/jobs/index.php` pour l'arbitrage complet. */

.talent-search {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
    background: #fff; border: 1px solid var(--talent-bordure); border-radius: 14px;
    padding: 16px 18px; margin: 4px 0 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.talent-search-field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 260px; min-width: 200px; }
.talent-search-field label {
    font-size: .72rem; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: .03em; margin: 0;
}
/* 46 px et non 40 : ce sont les deux champs que tout le monde remplit, ils
   doivent se distinguer des filtres repliés. */
.talent-search-field .form-control { height: 46px; border-radius: 10px; border: 1px solid #cbd5e1; font-size: 1rem; }
.talent-search-go { height: 46px; border-radius: 10px; padding: 0 1.6rem; font-weight: 700; white-space: nowrap; }

/* Le pays est un troisième champ de la barre principale, plus étroit que le
   métier et le lieu : on le choisit dans une liste, on ne le tape pas. */
.talent-search-country { flex: 0 1 210px; min-width: 170px; }
.talent-search-country .form-select { height: 46px; border-radius: 10px; border: 1px solid #cbd5e1; font-size: .95rem; }

/* Devise du seuil de salaire : collée au montant, parce que les deux ne se
   lisent que l'un avec l'autre. */
.talent-cur-select { flex: 0 0 92px; font-weight: 700; }

/* ── Repli des filtres avancés ────────────────────────────────────────────── */
/* `<details>` natif : l'état survit sans JavaScript et les robots voient les
   champs. */

.talent-plus { margin-bottom: 1.25rem; }
.talent-plus > summary {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; list-style: none;
    font-size: .88rem; font-weight: 600; color: var(--talent-brand);
    padding: .35rem .1rem;
}
.talent-plus > summary::-webkit-details-marker { display: none; }
.talent-plus > summary::after {
    content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    font-size: .7rem; transition: transform .15s;
}
.talent-plus[open] > summary::after { transform: rotate(180deg); }
.talent-plus > summary:hover { color: var(--talent-brand-dark); }
/* Le nombre de filtres actifs : sans lui, un repli fermé cache la raison pour
   laquelle la liste est courte. */
.talent-plus-actifs {
    background: var(--talent-brand); color: #fff; border-radius: 999px;
    font-size: .72rem; font-weight: 700; padding: .05rem .45rem; line-height: 1.5;
}

/* Catalogue vide : le bloc des deux faces passe au-dessus de la liste et prend
   la place qu'il mérite, puisqu'il est alors le seul contenu de la page. */
.jobs-usp-vide { border-left-width: 4px; padding: 1.4rem 1.5rem; }

@media (max-width: 600px) {
    .talent-search { padding: 14px; }
    .talent-search-field { flex: 1 1 100%; }
    .talent-search-go { width: 100%; }
}

body.dark-mode .talent-search { background: #1e2a38 !important; border-color: #2c3a4a; }