/* Coquille B2B d'iampro.io — SOURCE CANONIQUE.
 *
 * Les surfaces professionnelles (annuaire /e, fiches /e/{slug}, espace
 * recruteur) partagent une identité : la plaque noire du logo en bandeau, du
 * blanc, et le bleu #0A7CD5. Rien d'autre. Le shell éditorial rouge appartient
 * aux pages candidat ; le confondre avec celui-ci brouille les deux publics.
 *
 * Ce fichier est copié à l'identique dans jobko-app (espace recruteur), qui est
 * un service séparé : voir scripts/sync_b2b_shell.sh et le test qui vérifie que
 * les deux copies ne divergent pas. Un lien vers iampro.io depuis le recruteur
 * aurait fait dépendre l'affichage d'une page de connexion de la disponibilité
 * d'un AUTRE service — un incident de l'un aurait défiguré l'autre.
 *
 * 2026-08-01 : /e était visiblement mieux tenu que recruiter.iampro.io, qui
 * avait sa propre palette Tailwind en ligne. Une marque qui change d'apparence
 * entre deux de ses propres surfaces ne se lit pas comme deux produits, mais
 * comme un produit mal fini.
 */

:root {
  --blue: #0A7CD5;
  --blue-dark: #0967B0;
  --blue-tint: rgba(10, 124, 213, .08);
  --ink: #111214;
  --plate: #0b0b0c;          /* la plaque du logo : le fond du bandeau */
  --muted: #5b6168;
  --line: #e5e2dc;
  --bg: #faf8f4;
  --card: #fff;
  --good: #1a7f4b;
  --warn: #a8560a;
  --danger: #c0392b;
  --page: 1280px;            /* même largeur que le reste du site */
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); }

/* ---- Fraunces : la sérif de la marque, self-hostée.
   Elle manquait ici alors qu'elle signe déjà profile.iampro.io et /reach —
   d'où deux surfaces B2B (recruiter.iampro.io et /e) en sans-serif, sans que
   ce soit un choix. La coquille étant ce qui fait que la marque se ressemble
   d'une page à l'autre, la police y appartient plutôt qu'à chaque gabarit.
   Déclarée ici (et non par un lien vers fonts.css) parce que l'espace
   recruteur n'a pas ce fichier : la coquille doit se suffire. ---- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/static/fonts/fraunces-latin-opsz-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Les titres portent la sérif, le reste la sans — même partage que les pages
   profil publiques, dont c'est la signature. */
h1, h2 { font-family: 'Fraunces', Georgia, serif; }

/* ---- Bandeau : contenu bord à bord, corps de page cadré ---- */
.topbar { background: var(--plate); color: #fff; }
.topbar-in { padding: 2px 28px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.brand { display: inline-flex; line-height: 0; }
.brand img { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; }
.topbar-spacer { flex: 1; }
.topbar-link { color: #cfd4da; text-decoration: none; font-size: 14px; font-weight: 600; }
.topbar-link:hover { color: #fff; }
.topbar-link.on { color: #fff; }

/* Le choix de langue est un outil, pas un ornement : discret sur la plaque. */
/* Le libellé d'espace, à côté de la marque : « Employeurs » ou « Recruteurs ».
   Discret et séparé par un filet — il doit situer, pas concurrencer le logo.
   En majuscules espacées, comme une rubrique, jamais comme un bouton. */
.topbar-space {
  margin-left: 12px; padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, .22);
  font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255, 255, 255, .82);
  white-space: nowrap;
}
@media (max-width: 560px) { .topbar-space { display: none; } }

/* Le sélecteur de langue est le composant COMMUN (lang_selector_standalone) :
   la marque n'a qu'un seul sélecteur, sur toutes ses surfaces. Il se peint avec
   des variables CSS, mais la seule variable ne suffit pas ici — le bouton est
   sur fond sombre et son menu sur fond clair, donc deux couleurs de texte
   opposées. Le bandeau l'habille lui-même, plutôt que le composant apprendre
   qu'il existe des bandeaux sombres. */
.topbar .lang-dropdown { margin-left: 14px; }
.topbar .lang-dropdown-btn {
  background: rgba(255, 255, 255, .08); color: #fff;
  border-color: rgba(255, 255, 255, .18);
}
.topbar .lang-dropdown-btn:hover { border-color: rgba(255, 255, 255, .45); }
.topbar .lang-dropdown.open .lang-dropdown-btn { border-color: var(--blue); }
.topbar .lang-dropdown-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.topbar .lang-dropdown-menu { background: #fff; border-color: var(--line); }
.topbar .lang-dropdown-item { color: #111; }
.topbar .lang-dropdown-item:hover { background: #f2f5f8; }
.topbar .lang-dropdown-item.active { color: var(--blue); }

.wrap { max-width: var(--page); margin: 0 auto; padding: 26px 28px 80px; }

/* ---- Blocs communs ---- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }

.btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600;
       font-size: 14px; padding: 9px 16px; border-radius: 10px; border: 1px solid transparent;
       cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }

.input-field { width: 100%; font: inherit; font-size: 15px; padding: 11px 13px;
               border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.input-field:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }

img.flag { width: 20px; height: 15px; object-fit: cover; border-radius: 2px;
           display: inline-block; vertical-align: -2px; }

.avatar { display: inline-flex; align-items: center; justify-content: center;
          background: #1b1c1a; color: #fff; font-weight: 800; letter-spacing: -.5px;
          border-radius: 8px; overflow: hidden; flex: 0 0 auto; }
.avatar img { width: 100%; height: 100%; object-fit: contain; background: #fff; }

@media (max-width: 640px) {
  .topbar-in, .wrap { padding-left: 18px; padding-right: 18px; }
}