/* Exec.symetis.ai - theme sombre technique (verrouille), aligne sur symetis.ai.
   Tokens releves sur le build du site (accompagnement.BvldMPaM.css, bloc [data-theme=dark]). */

:root {
  --maxw: 1280px;
  --bg: #060f1f;
  --bg-alt: #0a1730;
  --bg-deep: #050c1a;
  --surface: rgba(255, 255, 255, 0.03);
  --surface-2: rgba(255, 255, 255, 0.05);
  --surface-border: rgba(255, 255, 255, 0.1);
  --ink: #eef2f7;
  --ink-dim: rgba(238, 242, 247, 0.65);
  --ink-dim2: rgba(238, 242, 247, 0.45);
  --border: rgba(255, 255, 255, 0.08);
  --cyan: #4ac9e3;
  --cyan-soft: rgba(74, 201, 227, 0.1);
  --cyan-border: rgba(74, 201, 227, 0.45);
  --gold: #fad965;
  --gold-strong: #fad965;
  --gold-border: rgba(250, 217, 101, 0.3);
  --gold-soft: rgba(250, 217, 101, 0.08);
  --green: #6ee7b7;
  --green-border: rgba(110, 231, 183, 0.3);
  --green-bg: rgba(110, 231, 183, 0.08);
  --red: #f4a3a3;
  --red-border: rgba(244, 163, 163, 0.35);
  --red-bg: rgba(244, 163, 163, 0.08);
  --slate: #54627a;
  --chip-bg: rgba(255, 255, 255, 0.05);
  --header-bg: rgba(6, 15, 31, 0.82);
  --font-body: "Figtree", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --r-sm: 8px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
}

/* --- Themes de l'espace candidat (cf. referentiel.THEMES / resolve_theme) ---
   Seuls l'accent principal, les fonds et les polices changent : le gold reste
   la couleur de "vedette" dans les trois, pour un signal constant. Tokens
   d'ingenierie/managerial repris de deckgen-design-system (palette Deckard,
   module blueprint "ING" pour l'ingenierie). */
:root[data-candidat-theme="ingenierie"] {
  --bg: #0d2647;
  --bg-alt: #16335a;
  --bg-deep: #081627;
  --cyan: #f47b20;
  --cyan-soft: rgba(244, 123, 32, 0.12);
  --cyan-border: rgba(244, 123, 32, 0.45);
  --header-bg: rgba(13, 38, 71, 0.82);
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}
:root[data-candidat-theme="managerial"] {
  --bg: #0d2647;
  --bg-alt: #16335a;
  --bg-deep: #081627;
  --cyan: #30878f;
  --cyan-soft: rgba(48, 135, 143, 0.14);
  --cyan-border: rgba(48, 135, 143, 0.45);
  --header-bg: rgba(13, 38, 71, 0.82);
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 0.4em; }
h1 { font-size: clamp(26px, 4vw, 38px); }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
p { margin: 0 0 0.8em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
::selection { background: var(--cyan); color: var(--bg); }

/* --- Typo utilitaire --- */
.mono { font-family: var(--font-mono); }
.overline {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--cyan);
}
.muted { color: var(--ink-dim); }
.muted2 { color: var(--ink-dim2); }
.small { font-size: 13px; }
.tiny { font-size: 11.5px; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* --- Structure --- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 12px 22px;
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; padding: 12px 16px; }
  .topbar .spacer { flex-basis: 100%; height: 0; }
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.03em; }
.brand .dot { width: 26px; height: 26px; }
.brand small { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; color: var(--cyan); letter-spacing: 0.12em; text-transform: uppercase; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  font-size: 13.5px;
  color: var(--ink-dim);
  padding: 7px 12px;
  border-radius: var(--r-sm);
}
.nav a:hover { color: var(--ink); background: var(--chip-bg); text-decoration: none; }
.nav a.active { color: var(--ink); background: var(--cyan-soft); }
.spacer { flex: 1; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 26px 22px 80px; }
.container.narrow { max-width: 820px; }
.row { display: flex; gap: 14px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.spread { display: flex; gap: 8px 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.grow { flex: 1; min-width: 0; }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; } }

/* --- Cartes / panneaux --- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
}
.card.pad-lg { padding: 24px; }
.panel { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 22px; }
.card h3 { margin-top: 0; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

/* Equerres d'angle facon site */
.framed { position: relative; }
.framed::before, .framed::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  border: 1.5px solid var(--cyan-border);
  pointer-events: none;
}
.framed::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.framed::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; opacity: 0.5; }

/* --- Boutons --- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 10px 16px; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--chip-bg); color: var(--ink);
  cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.05s;
  text-decoration: none; line-height: 1; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-solid { background: var(--cyan); color: #041018; border-color: var(--cyan); }
.btn-solid:hover { background: #6fd6ea; }
.btn-gold { background: var(--gold); color: #1a1400; border-color: var(--gold); }
.btn-gold:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; }
.btn-danger { color: var(--red); border-color: var(--red-border); background: var(--red-bg); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.actions-ligne { flex-wrap: nowrap; align-items: flex-start; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Chips / badges --- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.03em;
  padding: 4px 10px; border-radius: 999px;
  background: var(--chip-bg); border: 1px solid var(--border); color: var(--ink-dim);
}
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--chip-bg); color: var(--ink-dim);
  white-space: nowrap;
}
.badge-cyan { color: var(--cyan); border-color: var(--cyan-border); background: var(--cyan-soft); }
.badge-gold { color: var(--gold); border-color: var(--gold-border); background: var(--gold-soft); }
.badge-green { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
.badge-muted { color: var(--ink-dim2); }
.dot-status { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--ink-dim2); }
.dot-status.open { background: var(--green); }
.dot-status.soon { background: var(--gold); }
.dot-status.closed { background: var(--ink-dim2); }

/* --- Formulaires --- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > label { font-size: 12.5px; font-weight: 600; color: var(--ink-dim); }
.field .hint { font-size: 11.5px; color: var(--ink-dim2); }
input, select, textarea {
  font: inherit; font-size: 14px;
  color: var(--ink); background: var(--bg-deep);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 9px 11px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cyan-border); box-shadow: 0 0 0 3px var(--cyan-soft); }
textarea { resize: vertical; min-height: 84px; }
/* Cases et boutons radio : largeur naturelle (la regle `input` ci-dessus donne 100 % aux champs de texte). */
input[type="checkbox"], input[type="radio"] {
  width: auto; padding: 0; margin: 0; flex: none; accent-color: var(--cyan);
}
/* Champ fichier : le bouton natif reste lisible, le champ prend la largeur que le conteneur lui laisse. */
input[type="file"] { padding: 6px; min-width: 0; }
input[type="file"]::file-selector-button {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--chip-bg); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 6px 12px; margin-right: 10px; cursor: pointer;
}
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
.checkline { display: flex; align-items: center; gap: 9px; }
/* Dépôt de fichier : type, fichier, bouton sur une ligne ; sous 520 px, empilés pleine largeur. */
.form-depot { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.form-depot > .grow { flex: 1 1 220px; }
@media (max-width: 520px) {
  .form-depot > * { flex: 1 1 100%; }
  .form-depot select, .form-depot input[type="file"] { width: 100%; }
  .form-depot .btn { justify-content: center; }
}
/* Champs de texte côte à côte qui passent l'un sous l'autre quand la ligne manque de place. */
.grow-wrap { flex: 1 1 220px; min-width: 0; }

/* --- Champs a curseur (disponibilites candidat) : remplacent la saisie libre --- */
.slider-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.slider-val { font-family: var(--font-mono); font-size: 13px; color: var(--cyan); white-space: nowrap; }

input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  background: var(--chip-bg); border-radius: 999px; padding: 0; margin: 14px 0 4px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--cyan); border: 2px solid var(--bg-alt); cursor: grab;
  box-shadow: 0 0 0 1px var(--cyan-border);
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--cyan);
  border: 2px solid var(--bg-alt); cursor: grab; box-shadow: 0 0 0 1px var(--cyan-border);
}
input[type="range"]::-moz-range-track { background: transparent; }

.split-track { position: relative; height: 4px; margin: 14px 0 4px; border-radius: 999px; overflow: hidden; background: var(--gold-soft); }
.split-track .fill { position: absolute; inset: 0 auto 0 0; background: var(--cyan-soft); }
.split-track input[type="range"] { position: relative; margin: 0; background: transparent; z-index: 1; }
.split-legend { display: flex; justify-content: space-between; font-size: 11.5px; }
.split-legend .fixe { color: var(--cyan); }
.split-legend .variable { color: var(--gold-strong); }

.dual-range { position: relative; height: 26px; margin: 10px 0 2px; }
.dual-range input[type="range"] {
  position: absolute; inset: 0; top: 4px; margin: 0; background: transparent;
  pointer-events: none;
}
.dual-range input[type="range"]::-webkit-slider-thumb { pointer-events: auto; }
.dual-range input[type="range"]::-moz-range-thumb { pointer-events: auto; }
.dual-range .dr-ideal::-webkit-slider-thumb { background: var(--gold-strong); box-shadow: 0 0 0 1px var(--gold-border); }
.dual-range .dr-ideal::-moz-range-thumb { background: var(--gold-strong); box-shadow: 0 0 0 1px var(--gold-border); }
.dual-range .dr-track { position: absolute; top: 12px; left: 0; right: 0; height: 4px; background: var(--chip-bg); border-radius: 999px; }
.dual-range .dr-fill { position: absolute; top: 12px; height: 4px; background: var(--cyan-soft); border-radius: 999px; }
.dual-range-legend { display: flex; justify-content: space-between; font-size: 11.5px; margin-top: 2px; }
.dual-range-legend .min { color: var(--cyan); }
.dual-range-legend .ideal { color: var(--gold-strong); }

/* --- Carte de selection des villes de relocalisation --- */
.reloc-map { position: relative; width: 100%; aspect-ratio: 2 / 1; background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-top: 10px; }
.reloc-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.reloc-markers { position: absolute; inset: 0; }
.reloc-pin {
  position: absolute; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%;
  background: transparent; border: none; cursor: pointer; padding: 0; display: grid; place-items: center;
}
.reloc-pin::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--slate); border: 2px solid var(--bg-deep); }
.reloc-pin:hover::after { background: var(--ink-dim); }
.reloc-pin.on::after { background: var(--cyan); box-shadow: 0 0 0 4px var(--cyan-soft); }
.reloc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.reloc-chip { display: flex; align-items: center; gap: 6px; background: var(--chip-bg); border: 1px solid var(--border); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 12.5px; }
.reloc-chip button { background: none; border: none; color: var(--ink-dim2); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 4px; }
.reloc-chip button:hover { color: var(--ink); }

/* --- Tables --- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim2); font-weight: 500; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.table td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:hover td { background: var(--chip-bg); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); }

/* Tableaux en cartes sous 720 px (`.table-wrap.cartes`) : une ligne devient un bloc, chaque cellule
   porte son libellé (`data-label`), les cellules sans libellé (titre de la ligne, actions) occupent
   toute la largeur. Les rôles ARIA sont reposés par `static/js/tableaux.js`, car `display: block`
   retire la sémantique de tableau dans certains navigateurs. */
@media (max-width: 720px) {
  .table-wrap.cartes { overflow: visible; border: 0; border-radius: 0; }
  .cartes .table, .cartes .table tbody, .cartes .table tr, .cartes .table td { display: block; width: 100%; }
  .cartes .table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .cartes .table tr {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 6px 14px; margin-bottom: 12px;
  }
  .cartes .table tr:hover td { background: transparent; }
  .cartes .table td { padding: 9px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
  .cartes .table td:last-child { border-bottom: 0; }
  .cartes .table td[data-label] {
    display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: 2px 12px; align-items: center;
  }
  .cartes .table td[data-label]::before {
    content: attr(data-label);
    font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-dim2); font-weight: 500;
  }
  .cartes .table td.nowrap { white-space: normal; }
  /* Les éléments d'une cellule gardent leur largeur naturelle (pastille, case à cocher), alignés à gauche. */
  .cartes .table td[data-label] > * { justify-self: start; }
  .cartes .table td .row { flex-wrap: wrap; }
  /* Actions d'une ligne : en bas du bloc, qui passent à la ligne, formulaire ouvert compris. */
  .cartes .actions-ligne { flex-wrap: wrap; }
  .cartes .actions-ligne > details[open] { flex: 1 1 100%; }
  .cartes .actions-ligne > details[open] select { width: 100%; }
}

/* --- Avatar --- */
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 14px;
  background: var(--cyan-soft); color: var(--cyan); border: 1px solid var(--cyan-border);
  flex: none;
}
.avatar.lg { width: 56px; height: 56px; font-size: 18px; }

/* --- KPI --- */
.kpi { display: flex; flex-direction: column; gap: 3px; }
.kpi .num { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.kpi .lab { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim2); }

/* --- Pipeline --- */
.pipeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.pl-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px; min-height: 90px; transition: background 0.12s, border-color 0.12s; }
.pl-col.drag-over { border-color: var(--cyan-border); background: var(--cyan-soft); }
.pl-col h4 { margin: 0 0 10px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); display: flex; justify-content: space-between; }
.pl-drop { min-height: 30px; }
.pl-card { display: block; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 11px; margin-bottom: 8px; cursor: grab; }
.pl-card:hover { border-color: var(--cyan-border); text-decoration: none; }
.pl-card.dragging { opacity: 0.4; cursor: grabbing; }
.pl-card .nm { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.pl-card .rl { font-size: 12px; color: var(--ink-dim2); }

/* --- Timeline --- */
.timeline { list-style: none; margin: 0; padding: 0; }
.tl-item { position: relative; padding: 0 0 16px 22px; border-left: 1px solid var(--border); }
.tl-item::before { content: ""; position: absolute; left: -5px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); }
.tl-item:last-child { border-left-color: transparent; }
.tl-item .when { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim2); }
.tl-item .what { font-size: 13.5px; }

/* --- Fil de messages --- */
.thread { display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 78%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.msg .meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); margin-top: 5px; }
.msg.staff { align-self: flex-start; background: var(--chip-bg); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.msg.candidat { align-self: flex-end; background: var(--cyan); color: #041018; border-bottom-right-radius: 4px; }
.msg.candidat .meta { color: #041018; }

/* --- Globe en arriere-plan plein cadre (carte candidat + vitrine publique) ---
   Empilement par grille CSS (canvas + panneau sur la meme cellule) : le globe
   occupe tout le fond disponible, le zoom peut agrandir la sphere sans jamais
   etre coupe par un cadre. Le panneau flotte au-dessus (pointer-events cible). */
.globe-backdrop {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: grid;
}
.globe-canvas-layer { grid-area: 1 / 1; position: relative; min-height: min(78vh, 760px); }
.globe-aura { position: absolute; inset: 8% 28%; border-radius: 50%; background: radial-gradient(circle, var(--cyan-soft), transparent 68%); filter: blur(48px); }
.globe-canvas-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.zoom-ctl { position: absolute; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 4px; z-index: 3; }
.zoom-ctl button {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--chip-bg); border: 1px solid var(--border); color: var(--ink);
  font-size: 17px; font-weight: 600; line-height: 1; cursor: pointer; padding: 0;
}
.zoom-ctl button:hover { background: var(--surface-2); border-color: var(--cyan-border); }
.globe-overlay {
  grid-area: 1 / 1; position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: flex-end;
  pointer-events: none;
  padding: 24px clamp(16px, 4vw, 64px);
}
.globe-overlay-inner {
  pointer-events: auto;
  width: min(94vw, 500px);
  max-height: 100%;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  border-radius: var(--r-lg);
  /* Le bord gauche du panneau s'estompe : le globe passe dessous sans arête verticale nette.
     Le remplissage gauche (76 px) loge la zone estompée (64 px), le contenu reste entièrement opaque. */
  padding: 16px 16px 16px 76px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px);
  mask-image: linear-gradient(to right, transparent 0, #000 64px);
}
/* Mobile : globe et liste des opportunites empilees (deux lignes de la grille)
   au lieu de superposees, pour rester lisibles au redimensionnement. */
@media (max-width: 900px) {
  .globe-backdrop { row-gap: 12px; }
  .globe-canvas-layer { grid-row: 1; grid-column: 1; min-height: 46vh; }
  .globe-overlay {
    grid-row: 2; grid-column: 1; position: relative; z-index: auto;
    justify-content: stretch; align-items: stretch; padding: 0 16px 16px;
  }
  .globe-overlay-inner {
    width: 100%; max-height: none; overflow-y: visible; padding: 16px;
    -webkit-mask-image: none; mask-image: none;
  }
}
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-dim); margin: 14px 0 0; }

/* --- Stepper d'etape (recrutement, cote candidat) --- */
.stage-stepper { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 10px auto 6px; max-width: 760px; }
.stage-step { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; color: var(--ink-dim2); padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--chip-bg); }
.stage-step .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-dim2); flex: none; }
.stage-step.done { color: var(--ink-dim); }
.stage-step.done .dot { background: var(--cyan); }
.stage-step.current { color: var(--ink); border-color: var(--cyan-border); background: var(--cyan-soft); font-weight: 600; }
.stage-step.current .dot { background: var(--gold-strong); }

/* --- Bascule de langue --- */
.lang-switch { display: flex; gap: 2px; border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
.lang-switch a { font-family: var(--font-mono); font-size: 11px; padding: 4px 9px; border-radius: 999px; color: var(--ink-dim2); text-decoration: none; }
.lang-switch a.active { background: var(--cyan-soft); color: var(--cyan); }

/* --- Kill switch (candidat) --- */
.killswitch { border: 1px solid var(--red-border); background: var(--red-bg); border-radius: var(--r-lg); padding: 14px 16px; margin-top: 24px; }
.killswitch summary { cursor: pointer; color: var(--red); font-weight: 600; font-size: 13.5px; list-style: none; }
.killswitch summary::-webkit-details-marker { display: none; }
.legend li { display: flex; align-items: center; gap: 7px; list-style: none; }
.legend .swatch { width: 9px; height: 9px; border-radius: 50%; }

/* Carte de reveal : detail du poste au premier plan */
.reveal-card { border: 1px solid var(--cyan-border); background: var(--surface); border-radius: var(--r-lg); padding: 16px; transition: opacity 0.25s; }
.reveal-card.dim { opacity: 0.55; }
.reveal-card .role { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.reveal-card .loc { font-family: var(--font-mono); font-size: 12px; color: var(--cyan); }
.pin-list { display: flex; flex-direction: column; gap: 6px; }
.pin { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer; color: var(--ink); }
.pin:hover, .pin.on { background: var(--chip-bg); border-color: var(--border); }
.pin .swatch { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pin.muted { color: var(--ink-dim2); }

/* --- Tiroir (drawer) HTMX --- */
.backdrop { position: fixed; inset: 0; background: rgba(3, 8, 15, 0.6); backdrop-filter: blur(2px); z-index: 60; display: flex; justify-content: flex-end; }
.drawer { width: min(520px, 94vw); height: 100%; background: var(--bg-alt); border-left: 1px solid var(--border); overflow-y: auto; padding: 24px; animation: slideIn 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer .close { float: right; }

/* --- Flash / alerte --- */
.flash { padding: 11px 15px; border-radius: var(--r); border: 1px solid var(--border); font-size: 13.5px; margin-bottom: 16px; }
.flash.ok { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
.flash.err { color: var(--red); border-color: var(--red-border); background: var(--red-bg); }
.flash.info { color: var(--cyan); border-color: var(--cyan-border); background: var(--cyan-soft); }

/* --- Divers --- */
.copy-field { display: flex; gap: 8px; }
.copy-field input { font-family: var(--font-mono); font-size: 12.5px; }
/* Code d'accès affiché en grand : 21 caractères qui doivent tenir sur une ligne à 390 px
   (la taille suit la largeur de l'écran) ; le bouton Copier passe dessous sous 520 px. */
.copy-field .input-code {
  font-size: clamp(14px, 4.6vw, 20px); letter-spacing: 0.04em; text-align: center;
}
@media (min-width: 521px) { .copy-field .input-code { letter-spacing: 0.08em; } }
@media (max-width: 520px) {
  .copy-field.empile { flex-wrap: wrap; }
  .copy-field.empile > input { flex: 1 1 100%; }
  .copy-field.empile > .btn { flex: 1 1 100%; justify-content: center; }
}
.sep { height: 1px; background: var(--border); margin: 4px 0; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; } }

/* --- Barre d'onglets commune au portail et a l'espace candidat (PORTE-UNIFIEE 4.4) : meme balisage et memes
   regles que portail.css, avec les variables de ce theme. --- */
.menu-acces { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.menu-acces form { margin: 0; }
.menu-acces-onglet, .menu-acces-quitter {
  display: inline-block; font: inherit; font-size: 13.5px; line-height: 1.3; cursor: pointer;
  padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid transparent;
  background: transparent; color: var(--ink-dim);
}
.menu-acces-onglet:hover, .menu-acces-quitter:hover { color: var(--ink); background: var(--chip-bg); text-decoration: none; }
.menu-acces-onglet[aria-current="page"] { color: var(--ink); background: var(--cyan-soft); border-color: var(--cyan-border); }
.menu-acces .menu-acces-fin { margin-left: auto; }
@media (max-width: 420px) {
  /* 360 px : les trois entrees tiennent sur une ligne, sans debordement. */
  .menu-acces { gap: 2px; }
  .menu-acces-onglet, .menu-acces-quitter { padding: 8px 8px; font-size: 13px; }
}