/* ==========================================================================
   INFACT — feuille de style extraite du design system (voir DESIGN.md).
   Écrite pour remplacer directement la constante CSS de build_site.py /
   comparaison.py : mêmes sélecteurs de classes, nouvelles valeurs.
   Zéro dépendance CDN — les polices sont chargées depuis ./polices/.
   ========================================================================== */

/* Le bloc ci-dessous est régénéré par telecharger_polices.py à chaque
   exécution (voir ce script). Ne pas éditer les règles @font-face à la
   main : elles seraient écrasées au prochain lancement du script. */
/* AUTO-GENERATED FONT-FACE START — produit par telecharger_polices.py, ne pas éditer à la main */
@font-face{font-family:'Syne';font-style:normal;font-weight:700;font-display:swap;src:url('polices/syne-700.woff2') format('woff2')}
@font-face{font-family:'Syne';font-style:normal;font-weight:800;font-display:swap;src:url('polices/syne-800.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('polices/dm-sans-400.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('polices/dm-sans-500.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('polices/dm-sans-600.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('polices/jetbrains-mono-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('polices/jetbrains-mono-500.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('polices/jetbrains-mono-700.woff2') format('woff2')}
/* AUTO-GENERATED FONT-FACE END */

:root{
  /* Fond : dégradé crème très doux, du blanc pur en haut de page vers un
     beige léger en bas — jamais un aplat uni. Valeurs lues telles quelles
     dans le CSS de la maquette de référence. */
  --bg-haut:#fff;
  --bg-milieu:#f7f5f0;
  --bg-bas:#f2efe8;
  --bg:#fff;              /* fond des cartes / blocs pleins */
  --bg-doux:#faf9f6;      /* fond des bandeaux, blocs secondaires */
  --bg-puce:#f5f5f5;      /* fond des chips / badges neutres */

  --fg:#111111;           /* texte principal — quasi-noir, pas de bleu-gris */
  /* Gris ASSOMBRIS par rapport a la maquette, mesure a l'appui.
     Les valeurs d'origine (#888 et #bbb) donnaient sur le fond creme des
     rapports de contraste de 3,25 et 1,76 - tres en dessous du minimum WCAG AA
     de 4,5 pour du texte normal. Or ces deux couleurs ne servent QU'A du texte
     ici : titres de section "// Par metier", pied de page, compteurs de
     pagination, meta des colonnes de comparaison. Un texte qu'on ne peut pas
     lire n'est pas un parti pris esthetique, c'est un defaut.
     Les valeurs retenues conservent deux niveaux distincts de hierarchie :
       #5f5f5f -> 5,86  (conforme)
       #6b6b6b -> 4,89  (conforme)
     Verifiable : python audit_a11y.py */
  --gris:#5f5f5f;         /* texte secondaire (descriptions, meta) */
  --gris-clair:#6b6b6b;   /* texte tertiaire (labels mono discrets) */

  --bord:#eeeeee;         /* bordure de carte */
  --bord-fort:#dddddd;    /* bordure de champ interactif (recherche, tag) */
  --bord-section:#e8e6e1; /* séparateur de section pleine largeur */

  --acc:#111111;          /* accent = encre, pas de bleu : boutons, liens */
  --acc-clair:#f5f5f5;    /* fond hover neutre */

  /* Couleurs sémantiques de fraîcheur — LE signal visuel du produit :
     une offre publiée depuis < 30 min est verte, < 1h ambre, plus vieille
     grise, retirée rouge. Valeurs exactes lues dans la maquette. */
  --vert:#16a34a;         --vert-clair:#f0fdf4;
  --ambre:#a16207;        --ambre-clair:#fefce8;
  --rouge:#dc2626;        --rouge-clair:#fef2f2;
  --rouge-vif:#ef4444;    /* trait de la croix "offre retirée" */

  --rayon:10px;
  --rayon-petit:6px;
  --largeur:800px;        /* largeur de contenu de la maquette (pas 920px) */

  --font-affichage:'Syne',system-ui,sans-serif;      /* logo, titres de page, gros numéros */
  --font-corps:'DM Sans',system-ui,sans-serif;        /* texte courant, boutons, cartes */
  --font-mono:'JetBrains Mono',ui-monospace,"Cascadia Mono","Consolas",monospace; /* labels, meta, "// TITRE", chiffres */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--fg);
  background:linear-gradient(180deg,var(--bg-haut) 0%,var(--bg-milieu) 40%,var(--bg-bas) 100%);
  font:400 17px/1.65 var(--font-corps);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--fg);text-decoration:none}
a:hover{color:var(--gris)}
::selection{background:rgba(0,0,0,.08)}

.wrap{max-width:var(--largeur);margin:0 auto;padding:0 24px}
header{border-bottom:1px solid var(--bord-section);padding:20px 0;margin-bottom:44px;
  background:transparent;position:sticky;top:0;z-index:5;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.logo{font:800 20px/1 var(--font-affichage);letter-spacing:-.02em;color:var(--fg)}
.logo:hover{color:var(--fg);opacity:.7}

/* Une seule échelle typographique, appliquée partout. h1/h2 portent la
   voix de marque (Syne) ; le corps reste en DM Sans pour la lisibilité en
   masse (des centaines d'offres listées). */
h1{font:800 34px/1.18 var(--font-affichage);letter-spacing:-.02em;margin:0 0 12px;color:var(--fg)}
h2{font:700 12.5px/1.3 var(--font-mono);letter-spacing:.02em;text-transform:none;
  color:var(--gris-clair);margin:52px 0 16px}
h2::before{content:"// ";color:var(--gris-clair)}
.sub{color:var(--gris);margin:0 0 30px;font:400 17px/1.6 var(--font-corps);max-width:40em}

/* ── Listes d'offres : grille de cartes ──────────────────────────────── */
.offres{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:10px 16px;margin:0 0 8px}
.offre{border:1px solid var(--bord);border-radius:var(--rayon);
  background:var(--bg);padding:16px 18px;transition:border-color .12s,box-shadow .12s;min-width:0}
.offre:hover{border-color:var(--bord-fort);box-shadow:0 2px 12px rgba(0,0,0,.05)}
.offre .t{display:block;font:600 16px/1.25 var(--font-corps);color:var(--fg);
  letter-spacing:-.008em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.offre:hover .t{color:var(--fg);text-decoration:underline;text-underline-offset:2px}
.meta{color:var(--gris)}
.offre .meta{font:400 14px/1.4 var(--font-corps);margin-top:5px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ── Technologies citées (non cliquables — information, pas filtre) ──── */
.stack{margin:24px 0}
.stack h2{margin:0 0 10px}
.techno{display:inline-block;border:1px solid var(--bord);border-radius:var(--rayon-petit);
  padding:5px 11px;margin:0 7px 7px 0;font:400 13.5px/1.3 var(--font-corps);color:var(--fg);
  background:var(--bg-doux)}
.techno-mini{display:inline-block;border:1px solid var(--bord);border-radius:5px;
  padding:2px 8px;margin:0 5px 5px 0;font:400 11.5px/1.3 var(--font-mono);color:var(--gris);
  background:var(--bg-doux)}
.offre-stack{margin-top:6px}

/* ── Rémunération, quand l'employeur la publie ───────────────────────────
   Présente sur 3,5 % des offres seulement. Elle doit se remarquer sans
   crier : les 96,5 % d'offres sans salaire ne doivent pas donner
   l'impression d'un site à moitié vide. D'où l'encre du texte principal
   plutôt qu'une pastille colorée — c'est un fait, pas une alerte — et la
   police mono, qui aligne les chiffres d'une carte à l'autre.
   `.offre .meta` coupe à l'ellipse : le salaire est en fin de ligne, donc
   `flex-shrink:0` sur la ligne meta le protège du rognage. */
.paie{font-family:var(--font-mono);font-weight:600;color:var(--fg);
  white-space:nowrap}
/* Sur une carte, le salaire prend sa PROPRE ligne. Mesure a 1440 px : la
   colonne d'une grille d'offres fait 330 px, et "entreprise · ville · date"
   la remplit deja - ajouter le salaire au bout le faisait rogner par
   l'ellipse de `.offre .meta`. Une ligne dediee le rend lisible, et le met
   au niveau d'importance qu'il merite : c'est le premier critere de tri
   d'un candidat. */
.offre-paie{margin-top:5px}
.col-stack{margin:2px 0 13px}

/* ── Tags / chips de filtre — mêmes chips que la barre de recherche ──── */
.tags{margin:0 0 8px;display:flex;flex-wrap:wrap;gap:8px}
.tag,.chip{border:1px solid var(--bord);border-radius:var(--rayon-petit);padding:6px 12px;
  font:400 12.5px/1 var(--font-mono);color:var(--gris);background:var(--bg-puce);
  line-height:1;transition:color .12s,border-color .12s,background .12s;display:inline-block}
.tag:hover,.chip:hover{border-color:var(--bord-fort);color:var(--fg);background:#eee;
  text-decoration:none}
.chips{display:flex;gap:8px;flex-wrap:wrap}

/* ── Bloc missions : la raison d'être du site ─────────────────────────  */
.missions{white-space:pre-wrap;background:var(--bg-doux);border:1px solid var(--bord);
  border-left:3px solid var(--fg);padding:20px 24px;margin:28px 0;
  border-radius:0 var(--rayon) var(--rayon) 0;font:400 16px/1.6 var(--font-corps)}
.missions h2{margin:0 0 12px;color:var(--fg)}
.missions h2::before{color:var(--fg)}

.cta{display:inline-block;background:var(--fg);color:#fff;padding:12px 22px;
  border-radius:var(--rayon-petit);font:500 15px/1 var(--font-corps);margin:4px 0 32px;
  box-shadow:0 1px 2px rgba(0,0,0,.16)}
.cta:hover{text-decoration:none;background:#333;color:#fff}

.desc{white-space:pre-wrap;margin:8px 0 24px;color:#3d3d3d;font:400 15.5px/1.7 var(--font-corps)}
.desc summary{cursor:pointer;color:var(--fg);font-weight:600;white-space:normal;
  margin-bottom:14px;font-size:16px;list-style:none}
.desc summary::-webkit-details-marker{display:none}
.desc summary::before{content:"\25B8  ";color:var(--gris-clair)}
.desc[open] summary::before{content:"\25BE  "}
.note-troncature{color:var(--gris);font:400 14px/1.5 var(--font-mono);margin-top:14px;
  padding-top:14px;border-top:1px solid var(--bord-section)}

footer{border-top:1px solid var(--bord-section);margin-top:72px;padding:26px 0 40px;
  color:var(--gris-clair);font:400 14px/1.6 var(--font-corps)}
footer .footer-nav{display:block;margin-top:10px}
footer .footer-nav a{color:var(--gris-clair)}
footer .footer-nav a:hover{color:var(--fg)}

.pagination{display:flex;justify-content:space-between;gap:16px;margin:28px 0 8px;
  padding-top:20px;border-top:1px solid var(--bord-section);font-weight:600}
.pagination .compte{color:var(--gris-clair);font:400 14px/1 var(--font-mono)}

.meta-entreprise{color:var(--gris);margin:4px 0;font:400 15px/1.5 var(--font-corps)}

/* ── Comparaison (comparaison.py) ─────────────────────────────────────  */
.comparaison{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  margin:30px 0;align-items:start}
.colonne{border:1px solid var(--bord);border-radius:var(--rayon);padding:20px 21px;
  background:var(--bg);box-shadow:0 1px 2px rgba(0,0,0,.03);transition:box-shadow .15s}
.colonne:hover{box-shadow:0 4px 16px rgba(0,0,0,.06)}
.colonne .employeur{font:700 17px/1.2 var(--font-affichage);letter-spacing:-.01em;margin-bottom:3px}
.colonne .poste{display:block;font:400 15px/1.4 var(--font-corps);margin-bottom:8px}
.colonne .meta{color:var(--gris-clair);font:400 12.5px/1.3 var(--font-mono);margin-bottom:15px;
  padding-bottom:15px;border-bottom:1px solid var(--bord)}
.colonne .extrait{white-space:pre-wrap;font:400 14.5px/1.62 var(--font-corps);color:#333}
.note{color:var(--gris);font:400 14px/1.5 var(--font-mono);border-top:1px solid var(--bord-section);
  padding-top:20px;margin-top:36px;max-width:44em}
.comparer{display:block;background:var(--bg-doux);border:1px solid var(--bord-fort);
  border-radius:var(--rayon);padding:14px 20px;margin:26px 0;font:600 15px/1.3 var(--font-corps);
  color:var(--fg)}
.comparer:hover{text-decoration:none;border-color:var(--fg)}

/* ── Accueil : démontrer avant de lister ──────────────────────────────  */
.hero{padding:24px 0 0}
.hero h1{max-width:17em;font-size:38px}
.accroche{color:var(--gris);font:400 18px/1.6 var(--font-corps);max-width:36em;margin:16px 0 26px}
.chiffres{display:flex;flex-wrap:wrap;gap:12px 0;font:400 13.5px/1 var(--font-mono);color:var(--gris);
  border-top:1px solid var(--bord-section);border-bottom:1px solid var(--bord-section);padding:16px 0}
.chiffres span{padding:0 22px;border-right:1px solid var(--bord-section)}
.chiffres span:first-child{padding-left:0}
.chiffres span:last-child{border-right:0}
.chiffres b{color:var(--fg);font:700 16px/1 var(--font-mono)}

.demo{border:1px solid var(--bord-fort);border-top:3px solid var(--fg);border-radius:12px;
  padding:24px 26px;margin:34px 0;background:var(--bg-doux)}
.demo-eyebrow{font:700 11px/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase;
  color:var(--fg);margin-bottom:8px}
.demo-titre{font:700 16px/1.3 var(--font-corps);letter-spacing:-.01em}
.demo .comparaison{margin:18px 0 14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.demo .colonne{padding:16px 18px}
.demo .extrait{font-size:14px}
.demo-lien{font:600 15px/1.3 var(--font-corps)}

/* ==========================================================================
   COMPOSANTS NOUVEAUX — apportés par la maquette, pas encore générés par
   build_site.py. Classes prêtes à l'emploi pour une intégration future
   (voir DESIGN.md, section "structure HTML minimale" pour chacun).
   ========================================================================== */

/* Bandeau défilant du haut — flux continu façon terminal boursier.
   Nécessite un site qui connaît les dernières offres publiées EN TEMPS
   RÉEL au moment du build ; voir DESIGN.md "ce que la maquette montre et
   que le site n'a pas" avant de le brancher. */
@keyframes infact-defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bandeau{border-bottom:1px solid var(--bord-section);overflow:hidden;height:32px;
  display:flex;align-items:center;background:var(--bg-doux)}
.bandeau-piste{display:flex;gap:40px;white-space:nowrap;padding:0 20px;
  animation:infact-defile 40s linear infinite}
.bandeau-item{font:500 11px/1 var(--font-mono)}
.bandeau-item.frais{color:var(--vert)}
.bandeau-item.tiede{color:var(--ambre)}
.bandeau-item.vieux{color:var(--gris-clair)}
.bandeau-item.retiree{color:var(--gris-clair);text-decoration:line-through}

/* Rubrique — le label "// TITRE" utilisé pour toutes les sections. h2 le
   fait déjà automatiquement (::before). Cette classe sert quand le label
   est seul, hors d'un h2 (ex. au-dessus de la barre de recherche). */
.rubrique{display:block;font:400 12px/1.5 var(--font-mono);color:var(--gris-clair)}
.rubrique b{color:var(--gris)}

/* Barre de recherche — le "produit" avant tout marketing. */
.barre-recherche{background:var(--bg);border:1px solid var(--bord);border-radius:12px;
  padding:22px;box-shadow:0 2px 12px rgba(0,0,0,.04);display:flex;flex-direction:column;gap:16px}
.barre-recherche .champ{display:flex;align-items:center;gap:12px;font:400 17px/1 var(--font-corps);
  color:var(--gris-clair)}
.barre-recherche .champ input{border:0;outline:0;background:transparent;flex:1;
  font:400 17px/1 var(--font-corps);color:var(--fg)}
.barre-recherche .separateur{height:1px;background:var(--bord)}

/* Score — pastille colorée par tranche de fraîcheur/qualité, format
   IDENTIQUE au score affiché dans les cartes d'offres de la maquette. */
.score{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font:700 17px/1 var(--font-mono);flex-shrink:0}
.score.score-haut{background:var(--vert-clair);color:var(--vert)}
.score.score-moyen{background:var(--ambre-clair);color:var(--ambre)}
.score.score-bas{background:var(--bg-puce);color:var(--gris-clair)}

/* Offre au format "carte pleine" de la maquette (variante enrichie de
   .offre) : pastille de score + méta inline + bouton d'action. */
.offre-carte{padding:20px;background:var(--bg);border:1px solid var(--bord);border-radius:var(--rayon);
  display:flex;gap:16px;align-items:flex-start}
.offre-carte .corps{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.offre-carte .entete{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.offre-carte .entete .titre{font:600 16px/1.25 var(--font-corps);color:var(--fg)}
.offre-carte .entete .age{font:400 11px/1 var(--font-mono)}
.offre-carte .entete .age.frais{color:var(--vert)}
.offre-carte .entete .age.tiede{color:var(--ambre)}
.offre-carte .badge-contrat{padding:3px 8px;background:var(--bg-puce);border-radius:4px;
  font:400 11px/1 var(--font-mono);color:var(--gris)}
.offre-carte .resume{font:400 14px/1.4 var(--font-corps);color:var(--gris)}
.offre-carte .infos{display:flex;gap:12px;align-items:center;font:400 13px/1 var(--font-corps)}
.offre-carte .infos .entreprise{font-weight:500;color:#555}
.offre-carte .infos .lieu{color:var(--gris)}
.offre-carte .infos .salaire{font-weight:500;color:var(--fg)}
.offre-carte .infos .sep{color:var(--bord-fort)}
.offre-carte .postuler{padding:8px 16px;background:var(--fg);color:#fff;border-radius:var(--rayon-petit);
  font:500 12px/1 var(--font-corps);flex-shrink:0;align-self:center}

/* Section chiffres "ce qu'on a retiré" — grille de 3 statistiques. À ne
   brancher que si ces compteurs existent réellement côté build (voir
   DESIGN.md). */
.stats-retrait{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--bord-section);border-radius:12px;overflow:hidden}
.stats-retrait .stat{background:var(--bg);padding:26px;display:flex;flex-direction:column;gap:8px}
.stats-retrait .stat .valeur{font:700 34px/1 var(--font-mono);color:var(--rouge)}
.stats-retrait .stat .libelle{font:400 12px/1.4 var(--font-corps);color:var(--gris)}

@media (max-width:640px){
  body{font-size:16px}
  h1{font-size:26px}
  header{position:static}
  .wrap{padding:0 18px}
  .offres{grid-template-columns:1fr}
  .offre .t,.offre .meta{white-space:normal}
  .chiffres span{padding:0 16px 0 0;border-right:0}
  .demo{padding:18px}
  .stats-retrait{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   Detail du score — la contrepartie de la pastille chiffree.
   Replie par defaut : le visiteur qui veut juste postuler n'en a pas besoin,
   celui qui doute doit pouvoir verifier. C'est ce qui separe un score
   explicable d'un algorithme opaque.
   --------------------------------------------------------------------------- */
.score-detail{margin:22px 0;border:1px solid var(--bord);border-radius:var(--rayon);
  background:#fff;padding:0}
.score-detail summary{cursor:pointer;padding:13px 16px;font:500 14px/1.4 var(--font-mono);
  color:var(--gris);list-style:none}
.score-detail summary::-webkit-details-marker{display:none}
.score-detail summary::before{content:"▸ ";color:var(--gris-clair)}
.score-detail[open] summary::before{content:"▾ "}
.score-detail summary:hover{color:var(--fg)}
.sc-liste{list-style:none;margin:0;padding:0 16px 4px}
.sc-liste li{display:flex;justify-content:space-between;gap:16px;
  padding:7px 0;border-top:1px solid var(--bord);font-size:14.5px}
.sc-lib{color:var(--fg)}
.sc-val{font:500 13.5px/1.5 var(--font-mono);color:var(--fg);white-space:nowrap}
.sc-val.sc-na{color:var(--gris-clair);font-weight:400}
.sc-note{margin:4px 16px 16px;font:400 13.5px/1.6 var(--font-corps);color:var(--gris)}

/* ---------------------------------------------------------------------------
   « D'où viennent les offres ? » — bloc de transparence sous la recherche.
   Sobre volontairement : des noms en typo mono, pas des logos. Aligner huit
   logos de marques tierces donnerait l'impression d'un réseau de partenaires
   qui n'existe pas (voir NOMS_SOURCES dans build_site.py).
   --------------------------------------------------------------------------- */
.sources{margin:38px 0 8px;padding-top:26px;border-top:1px solid var(--bord-section)}
.sources h2{margin:0 0 10px}
.src-intro{margin:0 0 18px;font:400 15.5px/1.6 var(--font-corps);color:var(--gris);
  max-width:44em}
.src-liste{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px 16px}
.src-liste li{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;padding:9px 12px;border:1px solid var(--bord);border-radius:var(--rayon-petit);
  background:var(--bg)}
.src-nom{font:500 14.5px/1.3 var(--font-corps);color:var(--fg)}
.src-n{font:400 12.5px/1.3 var(--font-mono);color:var(--gris);white-space:nowrap}
.src-note{margin:16px 0 0;font:400 13px/1.6 var(--font-corps);color:var(--gris);
  max-width:48em}

/* Recherche : meme grammaire visuelle que le reste, rien de clinquant. */
#bloc-recherche{margin:0 0 26px}
#q{width:100%;box-sizing:border-box;font:inherit;font-size:17px;padding:13px 15px;
  border:1px solid var(--bord);border-radius:var(--rayon);background:#fff;color:var(--fg)}
#q:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-clair)}
#filtres{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;align-items:center}
#filtres select{font:inherit;font-size:14.5px;padding:7px 10px;border:1px solid var(--bord);
  border-radius:var(--rayon);background:var(--bg-doux);color:var(--gris)}
#filtres label{font-size:14.5px;color:var(--gris);display:flex;align-items:center;gap:6px}
#compteur{margin:14px 0 8px;font-size:14.5px;color:var(--gris)}
.techno-liste{margin-top:8px}