@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-700.woff2") format("woff2");
}

/* ====== GLOBAL TOKENS (theme-independent) ====== */
:root {
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 10px; /* cards, fields */
  --radius-sm: 6px; /* badges */
  --radius-pill: 999px; /* chips, pills */
  --maxw: 960px; /* max content width */
}

/* ====== DARK THEME (main) ====== */
html[data-theme="dark"] {
  --bg: #061018;
  --surface: #0c1a22;
  --surface-2: #0a151c;
  --border: #163039;
  --border-champ: #4a747f;
  --accent: #2dd4bf;
  --accent-texte: #2dd4bf;
  --accent-strong: #36f1cd; /* hovers and glow */
  --text: #e6edf3;
  --text-muted: #8fa3ae;
  --badge-bg: rgba(45, 212, 191, 0.12);
  --badge-text: #7fe9da;
  --flash-error: #f87171;
  --flash-warning: #e0b33a;
  --etat-actif: #3fb950; /* admin status badges */
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --glow: 0 0 0 1px rgba(54, 241, 205, 0.25), 0 0 18px rgba(54, 241, 205, 0.15);
}

/* ====== LIGHT THEME (counterpart) ====== */
html[data-theme="light"] {
  --bg: #f4f8f7;
  --surface: #ffffff;
  --surface-2: #eef4f3;
  --border-champ: #728685;
  --accent: #0e9384;
  --accent-texte: #0c7d6f;
  --accent-strong: #0b7d70;
  --text: #0b2027;
  --text-muted: #5a7184;
  --badge-bg: rgba(14, 147, 132, 0.1);
  --badge-text: #0b6f63;
  --flash-error: #c0392b;
  --flash-warning: #9a6b00;
  --etat-actif: #1a7f37;
  --shadow: 0 6px 20px rgba(11, 32, 39, 0.1);
  --glow: 0 0 0 1px rgba(14, 147, 132, 0.25);
}

/* ====== RESET / BASE ====== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}

main {
  flex: 1;
}

h1,
h2,
h3 {
  font-family: var(--mono);
  line-height: 1.2;
  letter-spacing: -0.5px;
}

a {
  color: var(--accent-texte);
}

img {
  max-width: 100%;
  height: auto;
}

/* ====== ACCESSIBILITY ====== */
/* Skip link. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 100;
  background: var(--surface);
  color: var(--text);
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 8px;
}

/* Keyboard focus indicator. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Reduced motion preference. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ====== INFORMATION BANNER ====== */
.bandeau {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
}
[data-bandeau="masque"] .bandeau {
  display: none;
}
.bandeau__texte {
  flex: 1;
  margin: 0;
  text-align: center;
}
.bandeau__texte strong {
  color: var(--accent-texte);
}
.bandeau__texte a {
  color: var(--accent-texte);
  white-space: nowrap;
}
.bandeau__fermer {
  display: inline-flex;
  flex-shrink: 0;
  padding: 4px;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.bandeau__fermer:hover {
  color: var(--accent-texte);
}

@media (max-width: 640px) {
  .bandeau {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* ====== HEADER / NAVIGATION ====== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.navbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  height: 64px;
  padding: 0 24px;
}
.navbar__brand {
  justify-self: start;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.5px;
  white-space: nowrap;
  color: var(--text);
  text-decoration: none;
}
.navbar__brand-prompt {
  margin-right: 2px;
  color: var(--accent-strong);
}
.navbar__brand-accent {
  color: var(--accent-texte);
}
.navbar__brand-cursor {
  color: var(--accent-strong);
  animation: blink 1.1s steps(1) infinite;
}
/* Blinking cursor. */
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.navbar__links {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.navbar__links a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.navbar__links a:hover {
  color: var(--accent-texte);
}
/* Log out. */
.navbar__logout {
  margin: 0;
}
.navbar__logout-btn {
  padding: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
}
.navbar__logout-btn:hover {
  color: var(--accent-texte);
}

/* Link to the admin area. */
.navbar__links a.navbar__admin {
  color: var(--accent-texte);
  font-weight: 600;
}

/* Menu container. */
.navbar__menu {
  display: contents;
}

/* Burger button. */
.navbar__burger {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 6px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.navbar__burger:hover {
  border-color: var(--accent);
  color: var(--accent-texte);
}

/* Theme toggle button. */
.theme-toggle {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  transition: 0.2s ease;
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent-texte);
}
.theme-toggle__icon {
  flex-shrink: 0;
}

.theme-toggle__icon--sun,
.theme-toggle__label--light {
  display: none;
}
html[data-theme="light"] .theme-toggle__icon--moon,
html[data-theme="light"] .theme-toggle__label--dark {
  display: none;
}
html[data-theme="light"] .theme-toggle__icon--sun,
html[data-theme="light"] .theme-toggle__label--light {
  display: inline-block;
}

/* ====== MAIN CONTENT ====== */
.page {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px 20px;
}

/* ====== HERO (home) ====== */
.hero {
  padding: 28px 0 24px;
}
.hero__title {
  margin: 0 0 20px;
  font-size: clamp(28px, 5vw, 40px);
  letter-spacing: -1px;
}
.hero__hl {
  color: var(--accent-texte);
}
/* Full container width, like the title above. */
.hero__subtitle {
  margin: 0 0 32px;
  color: var(--text-muted);
  font-size: 14px;
}
/* First sentence: the hook, hence larger and in full text colour. */
.hero__subtitle--lead {
  margin-bottom: 12px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.55;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ====== HOME - BLOCKS BELOW THE HERO ====== */
.home-bloc {
  margin: 0 0 40px;
}
.home-bloc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 14px;
}
.home-bloc__title {
  margin: 0 0 14px;
  font-size: 20px;
}
.home-bloc__head .home-bloc__title {
  margin: 0;
}
.home-bloc__vide {
  margin: 0;
  color: var(--text-muted);
}

/* The three journey steps: search, application, follow-up. */
.etapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.etape {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.etape__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--badge-bg);
  color: var(--badge-text);
  font-family: var(--mono);
  font-size: 14px;
}
.etape__titre {
  margin: 10px 0 6px;
  font-size: 16px;
}
.etape__texte {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

@media (max-width: 640px) {
  .etapes {
    grid-template-columns: 1fr;
  }
}

/* ====== FOOTER ====== */
.site-footer {
  margin-top: 20px;
  padding: 30px 20px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 12px;
  text-align: center;
}
.site-footer__logo {
  vertical-align: -4px;
}
.site-footer__links {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.site-footer__links a {
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.site-footer__links a:hover {
  color: var(--accent-texte);
}

/* Tablet and mobile: two columns. */
@media (max-width: 860px) {
  .site-footer__links {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 8px 20px;
  }
}

/* Screen-reader only. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ====== APPLICATION TRACKING ====== */
.suivi__head {
  margin-bottom: 22px;
}
.suivi__head h1 {
  margin: 0 0 6px;
  font-size: 26px;
}
.suivi__count {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}
.suivi__scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.suivi__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.suivi__table th,
.suivi__table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}
.suivi__table thead th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.suivi__table tbody tr + tr td {
  border-top: 1px solid var(--border);
}
.suivi__titre {
  display: block;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.suivi__titre:hover {
  color: var(--accent-texte);
  text-decoration: underline;
}
.suivi__entreprise {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-muted);
}
.suivi__vide {
  color: var(--text-muted);
}
.suivi__retiree {
  font-style: italic;
  color: var(--text-muted);
}
/* Table footnote. */
/* Full width, aligned with the table above it. */
.suivi__note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
/* Actions column. */
.suivi__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.suivi__statut {
  display: flex;
  gap: 6px;
  align-items: center;
}
.suivi__statut select {
  padding: 8px 10px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-champ);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}
.suivi__statut select:focus {
  border-color: var(--accent);
}
/* Inline follow-up confirmation. */
.suivi__confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-basis: 100%;
}
.suivi__confirm-actions {
  display: flex;
  gap: 8px;
}
.btn[hidden] {
  display: none;
}

/* ====== APPLY PAGE ====== */
/* Reading column. */
.candidature {
  max-width: 760px;
  margin: 0 auto;
}
.candidature__head {
  margin-bottom: 22px;
}
.candidature__head h1 {
  margin: 0 0 6px;
  font-size: 26px;
}
.candidature__offre {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}
.candidature__offre a {
  color: inherit;
  text-decoration: none;
}
.candidature__offre a:hover {
  color: var(--accent-texte);
  text-decoration: underline;
}
.candidature__pj {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--text);
}
.candidature__pj li + li {
  margin-top: 6px;
}
/* File name. */
.candidature__pj-nom {
  color: var(--text-muted);
}
/* "Attach cover letter" checkbox. */
.candidature__pj-choix {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.candidature__pj-choix input {
  accent-color: var(--accent);
}

/* ====== FLASH MESSAGES ====== */
.flash-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.flash {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 14px;
}
.flash--success {
  color: var(--accent-texte);
}
.flash--error {
  color: var(--flash-error);
}
.flash--warning {
  color: var(--flash-warning);
}
.flash--info {
  color: var(--text);
}

/* ====== BUTTONS ====== */
.btn {
  display: inline-block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  background: var(--accent);
  color: #04221e;
  border: none;
  border-radius: var(--radius);
  padding: 12px 18px;
  text-decoration: none;
  transition: 0.2s ease;
}
html[data-theme="light"] .btn {
  color: #ffffff;
}
.btn:hover {
  background: var(--accent-strong);
  box-shadow: var(--glow);
}
.btn--secondary {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent-texte);
}
html[data-theme="light"] .btn--secondary {
  color: var(--accent-texte);
}
.btn--secondary:hover {
  background: transparent;
  box-shadow: var(--glow);
}
.btn--danger {
  background: transparent;
  border: 1px solid var(--flash-error);
  color: var(--flash-error);
}
html[data-theme="light"] .btn--danger {
  color: var(--flash-error);
}
.btn--danger:hover {
  background: transparent;
  box-shadow: 0 0 0 1px var(--flash-error);
}

/* ====== CARD (base surface) ====== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  transition: 0.2s ease;
}
.card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* ====== FORMS / AUTH ====== */
.auth {
  max-width: 420px;
  margin: 40px auto;
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.auth h1 {
  margin: 0 0 22px;
  font-size: 22px;
}

.auth form > div {
  margin-bottom: 16px;
}

.auth label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
}

.auth input[type="text"],
.auth input[type="email"],
.auth input[type="password"] {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-champ);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}

.auth input:focus {
  border-color: var(--accent);
}

.form-aide {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.auth__consent label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  font-weight: 400;
}

.auth button[type="submit"] {
  width: 100%;
  margin-top: 8px;
}

.form-errors {
  margin: 0 0 20px;
  padding: 12px 16px 12px 34px;
  list-style: disc;
  color: var(--flash-error);
  background: color-mix(in srgb, var(--flash-error) 10%, var(--surface));
  border: 1px solid var(--flash-error);
  border-radius: var(--radius);
  font-size: 14px;
}
.form-errors li {
  margin: 2px 0;
}

.auth > p {
  margin: 20px 0 0;
  font-size: 14px;
  text-align: center;
  color: var(--text-muted);
}

/* ====== PROFILE / ACCOUNT ====== */
.profil__head {
  margin-bottom: 22px;
}
.profil__head h1 {
  margin: 0 0 6px;
  font-size: 26px;
}
.profil__subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}
.profil__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

/* Panel. */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}
.card__label {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Account form. */
.field {
  margin-bottom: 16px;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
}
.panel input[type="text"],
.panel input[type="email"],
.panel textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-champ);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}
/* Application textarea. */
.panel textarea {
  display: block;
  resize: vertical;
  min-height: 180px;
  line-height: 1.55;
}
.panel input:focus,
.panel textarea:focus {
  border-color: var(--accent);
}
.panel input:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.75;
}
.account-form__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}
/* Heading of an information block in a form. */
.field__titre {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 500;
}
/* Field help text. */
.field-hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}
.card__sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 22px 0 18px;
}

/* GDPR section (inside the account card). */
.rgpd__label {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rgpd__text {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-muted);
}
.rgpd__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Documents (CV / cover letter). */
.doc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
}
.doc:first-of-type {
  border-top: none;
  padding-top: 4px;
}
.doc__header {
  display: flex;
  gap: 16px;
  align-items: center;
}
.doc__preview {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 100px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
/* Clickable thumbnail hover. */
.doc__preview:has(.doc__preview-link):hover {
  border-color: var(--accent);
  box-shadow: var(--glow);
}
/* Empty slot (no document). */
.doc__preview:not(:has(.doc__preview-link)) {
  border-style: dashed;
  box-shadow: none;
}
.doc__preview-link {
  display: block;
  width: 100%;
  height: 100%;
}
.doc__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.doc__preview-empty {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--text-muted);
}
.doc__info {
  flex: 1;
  min-width: 0;
}
.doc__title {
  margin: 0 0 6px;
  font-size: 16px;
}
.doc__file {
  margin: 0 0 12px;
  font-size: 14px;
}
.doc__name {
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
}
.doc__date {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-muted);
}
.doc__empty {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--text-muted);
}
.doc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.dropzone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 92px;
  margin: 0;
  padding: 18px;
  text-align: center;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.dropzone.is-dragover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
}
.dropzone__browse {
  margin: 0;
}
.dropzone__hint {
  font-size: 13px;
  color: var(--text-muted);
}
.dropzone__filename {
  flex-basis: 100%;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
}
.dropzone__filename:empty {
  display: none;
}
.dropzone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.btn--small {
  padding: 8px 14px;
  font-size: 13px;
}
/* Unavailable action button. */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.documents-note {
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* ====== MY DATA (GDPR SUMMARY) ====== */
/* Shared template for "My data" and the legal pages. */
.mes-donnees,
.doc-page {
  max-width: 720px;
  margin: 0 auto;
}
.mes-donnees__head,
.doc-page__head {
  margin-bottom: 22px;
}
.mes-donnees__head h1,
.doc-page__head h1 {
  margin: 0 0 6px;
  font-size: 26px;
}
.mes-donnees__subtitle,
.doc-page__subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}

/* Legal pages. */
.legal p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.65;
}
.legal p:last-child {
  margin-bottom: 0;
}
.legal ul {
  margin: 0 0 12px;
  padding-left: 18px;
}
.legal li {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
}
.legal li::marker {
  color: var(--border);
}
.legal code {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent-texte);
}

/* Single document grouping the sections. */
.data-doc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 4px 28px;
}
.data-block {
  padding: 22px 0;
  border-top: 1px solid var(--border);
}
.data-block:first-child {
  border-top: none;
}
.data-block__title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-texte);
}

/* Key / value rows. */
.data-list {
  margin: 0;
  display: grid;
  gap: 10px;
}
.data-list__row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.data-list dt {
  font-size: 14px;
  color: var(--text-muted);
}
.data-list dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  word-break: break-word;
}

.data-value {
  margin: 0;
}
/* Favorites and applications. */
.data-lines {
  margin: 10px 0 0;
  padding-left: 18px;
}
.data-lines li {
  margin-bottom: 7px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}
.data-lines li::marker {
  color: var(--border);
}
.data-lines strong {
  color: var(--text);
  font-weight: 600;
}
.data-empty {
  margin: 0;
  color: var(--text-muted);
}
.mes-donnees__back {
  margin: 18px 0 0;
}

/* ====== DELETION CONFIRMATION ====== */
.danger-box {
  margin: 0 0 20px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--flash-error);
  background: color-mix(in srgb, var(--flash-error) 10%, var(--surface));
  border: 1px solid var(--flash-error);
  border-radius: var(--radius);
}
.confirm-cancel {
  display: block;
  width: 100%;
  margin-top: 12px;
  text-align: center;
}

/* ====== RESPONSIVE: TABLET ====== */
@media (max-width: 860px) {
  .account-form__actions,
  .rgpd__actions,
  .doc__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .doc__actions > form {
    display: contents;
  }
  .account-form__actions .btn,
  .rgpd__actions .btn,
  .doc__actions .btn {
    text-align: center;
  }
}

/* ====== JOB POSTING LIST ====== */
.offres__intro {
  margin-bottom: 20px;
}
.offres__title {
  margin: 0 0 8px;
  font-size: clamp(24px, 4vw, 30px);
}
.offres__hl {
  color: var(--accent-texte);
}
.offres__count {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

/* Search and filters form. */
.offres-filtres {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.offres-filtres__search {
  display: flex;
  gap: 10px;
}
.offres-filtres__search input {
  flex: 1;
}
.offres-filtres__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}
.offres-filtres__field {
  display: flex;
  flex: 1 1 150px;
  flex-direction: column;
  gap: 6px;
  min-width: 140px;
}
.offres-filtres__field label {
  font-size: 12px;
  font-weight: 500;
}
.offres-filtres input[type="search"],
.offres-filtres input[type="text"],
.offres-filtres input[type="number"],
.offres-filtres select {
  width: 100%;
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-champ);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}
.offres-filtres input:focus,
.offres-filtres select:focus {
  border-color: var(--accent);
}
.offres-filtres__checks {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
}
.offres-filtres__check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.offres-filtres__actions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-left: auto;
}

.offres-filtres__actions .btn {
  padding: 9px 16px;
  border: 1px solid transparent;
  line-height: 1.5;
}
.offres-filtres__actions .btn--secondary {
  border-color: var(--accent);
}

.offres__resultats[aria-busy="true"] {
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

/* Info line above the list. */
.offres__tri {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.offres__vide {
  padding: 30px 0;
  color: var(--text-muted);
}
/* Note below a list title. */
.offres__note {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* Job posting card list. */
.offres__liste {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.offre-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: 0.2s ease;
}
.offre-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.offre-card--expiree {
  opacity: 0.72;
}
.offre-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.offre-card__title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0;
}
.offre-card__title a {
  color: var(--text);
  text-decoration: none;
}
.offre-card__title a:hover {
  color: var(--accent-texte);
}

.offre-card__fav {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  color: var(--accent-texte);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: 0.15s ease;
}
.offre-card__fav:hover {
  background: var(--badge-bg);
  box-shadow: var(--glow);
}

.offre-card__fav.is-active {
  color: var(--accent-strong);
  border-color: var(--accent-strong);
}
.offre-card__fav.is-active svg {
  fill: currentColor;
}

.offre-card__fav:disabled {
  opacity: 0.55;
  cursor: default;
}
.offre-card__meta {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.offre-card__extrait {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Tech chips / tags in the card. */
.offre-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 12px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.chip--tech {
  color: var(--badge-text);
  background: var(--badge-bg);
}
.chip--tag {
  color: var(--text-muted);
  background: var(--surface-2);
  border-color: var(--border);
}
.chip--contrat {
  color: var(--accent-texte);
  border-color: var(--accent);
  font-weight: 600;
}
.chip--expiree {
  color: var(--flash-warning);
  border-color: var(--flash-warning);
}
.offre-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}
.offre-card__footinfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.offre-card__salary {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 14px;
  color: var(--accent-texte);
}
.offre-card__date {
  font-size: 12px;
  color: var(--text-muted);
}

/* Pagination. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 0 0;
}
.pagination__link {
  text-decoration: none;
}

.pagination__disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.pagination__state {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-muted);
}

/* ====== JOB POSTING DETAIL ====== */
.offre-detail__back {
  margin: 0 0 16px;
  font-size: 13px;
}
.offre-detail__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}
.offre-detail__flag {
  margin: 0 0 12px;
}
.offre-detail__title {
  margin: 0 0 6px;
  font-size: 24px;
}
.offre-detail__meta {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}
.offre-detail__chips {
  margin: 16px 0;
}
.offre-detail__salary {
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--accent-texte);
}
.offre-detail__label {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.offre-detail__description {
  margin: 0 0 24px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-line;
}
.offre-detail__source {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}
.offre-detail__published {
  margin-top: 4px;
}
/* Actions column. */
.offre-detail__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 20px;
}
.offre-detail__btn {
  display: block;
  width: 100%;
  text-align: center;
}
/* Favorite button on the detail page. */
.offre-detail__fav.is-active {
  background: var(--badge-bg);
  color: var(--accent-strong);
  border-color: var(--accent-strong);
}
.offre-detail__fav:disabled {
  opacity: 0.55;
  cursor: default;
}
.offre-detail__note {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}

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

/* Intermediate breakpoint. */
@media (max-width: 820px) and (min-width: 761px) {
  .theme-toggle__label {
    display: none !important;
  }
}

/* Burger menu breakpoint. */
@media (max-width: 760px) {
  .navbar {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    gap: 10px 16px;
    padding: 12px 16px;
  }

  .navbar__burger {
    display: inline-flex;
    margin-left: auto;
  }

  .navbar__menu {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 8px 0 4px;
  }
  .navbar__menu.is-open {
    display: flex;
  }

  .navbar__links {
    flex-direction: column;
    gap: 12px;
  }

  .theme-toggle {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .hero {
    padding: 20px 0 16px;
  }

  /* Profile: columns stacked on small screens. */
  .profil__grid {
    grid-template-columns: 1fr;
  }
  .field-row {
    grid-template-columns: 1fr;
  }

  /* Job postings: search and actions full width. */
  .offres-filtres__search {
    flex-direction: column;
    align-items: stretch;
  }
  .offres-filtres__actions {
    width: 100%;
  }
  .offres-filtres__actions .btn {
    flex: 1;
    text-align: center;
  }
  .offre-card__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .offre-card__cta {
    width: 100%;
    text-align: center;
  }

  /* Detail: single column. */
  .offre-detail__layout {
    grid-template-columns: 1fr;
  }
  .offre-detail__actions {
    position: static;
  }

  /* Tracking table becomes a card list. */
  .suivi__scroll {
    overflow-x: visible;
    background: none;
    border: none;
    border-radius: 0;
  }
  .suivi__table thead {
    display: none;
  }
  .suivi__table,
  .suivi__table tbody,
  .suivi__table tr,
  .suivi__table td {
    display: block;
  }
  .suivi__table tr {
    margin-bottom: 14px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .suivi__table td {
    padding: 0;
  }
  .suivi__table td + td {
    margin-top: 10px;
  }
  .suivi__table tbody tr + tr td {
    border-top: none;
  }
  .suivi__table td[data-label]::before {
    content: attr(data-label) " ";
    font-size: 12px;
    color: var(--text-muted);
  }

  .suivi__table td:has(.suivi__vide) {
    display: none;
  }
}

/* ====== SITE MAP ====== */
.doc-page--large {
  max-width: 980px;
}
.plan-section {
  margin: 26px 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-texte);
}
.plan-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.plan-tuile {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
}
.plan-tuile:hover,
.plan-tuile:focus-visible {
  border-color: var(--accent);
}
.plan-tuile__nom {
  display: block;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.plan-tuile__desc {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* ====== ERROR PAGES ====== */
.error-page {
  max-width: 560px;
  margin: 0 auto;
  padding: 56px 0 40px;
  text-align: center;
}
.error-page__code {
  margin: 0;
  font-family: var(--mono);
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-texte);
}
.error-page__title {
  margin: 16px 0 10px;
  font-size: 22px;
}
.error-page__text {
  margin: 0 auto 26px;
  max-width: 46ch;
  color: var(--text-muted);
  line-height: 1.65;
}
.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
/* Stack trace, development only. */
.error-page__debug {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow-x: auto;
}
.error-page__debug pre {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
}
/* 429 page. */
.error-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.error-shell__brand {
  font-size: 18px;
}

/* ====== ADMIN AREA ====== */
.admin-shell {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.admin-shell + .site-footer {
  margin-top: 0;
}
.admin-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  flex: 1;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 16px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.admin-nav__title {
  margin: 0 4px 10px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.admin-nav__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-nav__link {
  display: block;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: 0.15s ease;
}
.admin-nav__link:hover {
  background: var(--surface-2);
  color: var(--accent-texte);
}

.admin-nav__link[aria-current="page"] {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--accent-texte);
  font-weight: 600;
}
/* Exit from the admin area. */
.admin-nav__back {
  margin-top: auto;
  padding: 16px 4px 0;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
}
.admin-nav__back:hover {
  color: var(--accent-texte);
}
/* Wide content area. */
.admin-layout__main {
  min-width: 0;
  padding: 28px 40px;
}

/* Tablet and mobile. */
@media (max-width: 860px) {
  .admin-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .admin-nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .admin-nav__title {
    display: none;
  }
  /* Tablet. */
  .admin-nav__links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  .admin-nav__link {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 7px 10px;
    font-size: 13px;
    text-align: center;
  }
  .admin-nav__link[aria-current="page"] {
    background: var(--accent);
    border-color: var(--accent);
    color: #04221e;
  }
  /* Light theme. */
  html[data-theme="light"] .admin-nav__link[aria-current="page"] {
    color: #ffffff;
  }
  .admin-nav__back {
    flex-basis: 100%;
    margin-top: 0;
    padding: 0 4px;
  }
  .admin-layout__main {
    padding: 20px 16px;
  }
}

/* ====== ADMIN AREA - DASHBOARD ====== */
.admin-dashboard h1 {
  margin: 0 0 6px;
  font-size: 26px;
}
.admin-kpis {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.admin-kpi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.admin-kpi__label {
  font-size: 12px;
  color: var(--text-muted);
}

.admin-kpi__valeur {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent-texte);
}

/* Last sync summary. */
.admin-synchro {
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.admin-synchro__quand {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.admin-synchro > :last-child {
  margin-bottom: 0;
}

/* ====== ADMIN TABLE (shared base) ====== */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.admin-table th,
.admin-table td {
  padding: 12px 12px 12px 0;
  text-align: left;
  vertical-align: middle;
}
.admin-table thead th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.admin-table tbody th,
.admin-table tbody td {
  border-top: 1px solid var(--border);
}
.admin-table tbody th {
  font-weight: 500;
}

/* Per-source detail. */
.admin-synchro__table {
  margin-top: 4px;
}
.admin-synchro__table thead {
  display: none;
}
.admin-synchro__table,
.admin-synchro__table tr,
.admin-synchro__table th,
.admin-synchro__table td {
  display: block;
}
.admin-synchro__table tbody {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.admin-synchro__table tbody tr {
  flex: 1 1 240px;
}
/* Total, below the source grid. */
.admin-synchro__table tfoot {
  display: block;
  margin-top: 12px;
}
.admin-synchro__table tr {
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.admin-synchro__table th,
.admin-synchro__table td {
  padding: 0;
  border-top: none;
}
.admin-synchro__table tbody td,
.admin-synchro__table tfoot td {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 13px;
}
.admin-synchro__table td::before {
  content: attr(data-label);
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-muted);
}
/* Total card. */
.admin-synchro__table tfoot tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px 16px;
  border-color: var(--accent);
}
.admin-synchro__table tfoot th {
  grid-column: 1 / -1;
}
.admin-synchro__table tfoot td {
  display: block;
  margin-top: 0;
}
.admin-synchro__table tfoot td::before {
  display: block;
}
.admin-synchro__table tfoot th {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-texte);
}
/* Source name as a button, at the top of the card. */
.admin-synchro__table tbody th .btn {
  display: block;
  margin-bottom: 8px;
  text-align: center;
}
.admin-synchro__inactive {
  font-size: 12px;
  color: var(--text-muted);
}
/* Non-zero errors. */
.admin-synchro__alerte {
  font-weight: 700;
  color: var(--flash-error);
}

/* Tablet and mobile: counters in 2 x 2. */
@media (max-width: 860px) {
  .admin-dashboard h1 {
    font-size: 22px;
  }
  .admin-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .admin-kpi {
    padding: 14px;
  }
  .admin-kpi__label {
    font-size: 11px;
  }
  .admin-kpi__valeur {
    font-size: 22px;
  }
  .admin-synchro {
    padding: 16px 14px;
  }
}

/* ====== ADMIN AREA - USERS ====== */
.admin-users h1 {
  margin: 0 0 6px;
  font-size: 26px;
}
/* Pills on the left, search on the right. */
.admin-users__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.admin-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.admin-filtre {
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  transition: 0.15s ease;
}
.admin-filtre:hover {
  color: var(--accent-texte);
  border-color: var(--accent);
}
/* Current filter. */
.admin-filtre[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #04221e;
  font-weight: 600;
}
html[data-theme="light"] .admin-filtre[aria-current="page"] {
  color: #ffffff;
}
.admin-users__recherche {
  display: flex;
  gap: 8px;
}
.admin-users__recherche input[type="search"] {
  width: 300px;
  max-width: 100%;
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-champ);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}
.admin-users__recherche input[type="search"]:focus {
  border-color: var(--accent);
}

/* Table and its summary in the same card. */
.admin-users__carte {
  padding: 4px 24px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.admin-users__jamais,
.admin-users__sans-action {
  color: var(--text-muted);
}
.admin-users__sans-action {
  white-space: nowrap;
}

/* Enable / disable toggle. */
.admin-users__action {
  padding: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-texte);
  background: none;
  border: none;
  cursor: pointer;
}
.admin-users__action:hover {
  text-decoration: underline;
}

.admin-users__resume {
  margin: -6px 0 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.admin-users__sep {
  padding: 0 6px;
  color: var(--border);
}
.admin-users__vide {
  margin: 20px 0;
  color: var(--text-muted);
}
.admin-users .pagination {
  margin-top: 18px;
}

/* Role and status badges. */
.admin-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.admin-badge--admin {
  color: var(--badge-text);
  background: var(--badge-bg);
}
.admin-badge--candidat,
.admin-badge--anonymise {
  color: var(--text-muted);
  background: var(--surface-2);
}
.admin-badge--actif {
  color: var(--etat-actif);
  background: color-mix(in srgb, var(--etat-actif) 14%, transparent);
}
.admin-badge--inactif {
  color: var(--flash-error);
  background: color-mix(in srgb, var(--flash-error) 14%, transparent);
}
/* Sync in progress. */
.admin-badge--attente {
  color: var(--flash-warning);
  background: color-mix(in srgb, var(--flash-warning) 14%, transparent);
  animation: pulsation 1.6s ease-in-out infinite;
}
@keyframes pulsation {
  50% {
    opacity: 0.55;
  }
}

/* Loading spinner. */
.spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: rotation 0.7s linear infinite;
}
@keyframes rotation {
  to {
    transform: rotate(1turn);
  }
}

/* Reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .spinner,
  .admin-badge--attente {
    animation: none;
  }
}

@media (max-width: 860px) {
  .admin-users h1 {
    font-size: 22px;
  }
  .admin-users__barre {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-users__recherche {
    flex-direction: column;
  }
  .admin-users__recherche input[type="search"] {
    width: 100%;
  }
}

/* Breakpoint specific to this table. */
@media (max-width: 1120px) {
  /* Each account becomes a standalone card. */
  .admin-users__carte {
    padding: 0;
    background: none;
    border: none;
  }
  .admin-users__table thead {
    display: none;
  }
  .admin-users__table,
  .admin-users__table tbody {
    display: block;
  }
  .admin-users__table th,
  .admin-users__table td {
    display: block;
    padding: 0;
  }
  .admin-users__table tbody th,
  .admin-users__table tbody td {
    border-top: none;
  }

  .admin-users__table tr {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "nom   nom   inscrit"
      "email email email"
      "role  etat  action"
      "conn  conn  conn";
    gap: 6px 8px;
    margin-bottom: 12px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .admin-users__table tbody th {
    grid-area: nom;
    font-size: 14px;
    font-weight: 600;
  }
  .admin-users__table td[data-label="Email"] {
    grid-area: email;
    font-size: 12px;
    color: var(--text-muted);
  }
  .admin-users__table td[data-label="Rôle"] {
    grid-area: role;
  }
  .admin-users__table td[data-label="État"] {
    grid-area: etat;
  }
  .admin-users__table td[data-label="Inscrit le"] {
    grid-area: inscrit;
    justify-self: end;
  }
  .admin-users__table td[data-label="Actions"] {
    grid-area: action;
    justify-self: end;
    align-self: center;
  }
  .admin-users__table td[data-label="Dernière connexion"] {
    grid-area: conn;
  }
  .admin-users__table td[data-label="Inscrit le"]::before,
  .admin-users__table td[data-label="Dernière connexion"]::before {
    content: attr(data-label) " ";
    color: var(--text-muted);
  }
  .admin-users__table td[data-label="Inscrit le"],
  .admin-users__table td[data-label="Dernière connexion"] {
    font-size: 11px;
  }
}

@media (max-width: 640px) {
  .admin-filtres {
    justify-content: center;
    gap: 6px;
  }
  .admin-filtre {
    padding: 6px 10px;
    font-size: 12px;
  }

  /* Admin menu. */
  .admin-nav__links {
    justify-content: center;
    gap: 6px;
  }
  .admin-nav__link {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* ====== SOURCE ATTRIBUTION (Adzuna terms of use) ====== */
.attribution-adzuna {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 116px;
  min-height: 23px;
  font-size: 12px;
  color: var(--text-muted);
}
.attribution-adzuna__texte {
  color: var(--text-muted);
  text-decoration: underline;
}
.attribution-adzuna__texte:hover {
  color: var(--accent-texte);
}
.attribution-adzuna__logo {
  display: inline-flex;
  align-items: center;
}
.attribution-adzuna__logo img {
  height: 18px;
  width: auto;
  display: block;
}
/* Badge in public contexts (card and posting detail). */
.offre-card .attribution-adzuna {
  margin-top: 10px;
}
.offre-detail .attribution-adzuna {
  margin-top: 6px;
}

/* ====== ADMIN AREA - SOURCE DETAIL ====== */
.source-detail__retour {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
}
.source-detail__retour:hover {
  color: var(--accent-texte);
}
/* Source name + status badge. */
.source-detail__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.source-detail__entete h1 {
  margin: 0;
}
/* Configuration as an attribute list. */
.source-detail__config {
  margin: 0;
}
.source-detail__config > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
}
.source-detail__config > div:first-child {
  border-top: none;
}
.source-detail__config dt {
  font-size: 13px;
  color: var(--text-muted);
}
.source-detail__config dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  text-align: right;
}
/* Schedule shown in plain text. */
.source-detail__planif {
  font-family: var(--sans);
}
/* Quotas and usage table. */
.source-detail__quotas td {
  font-family: var(--mono);
}
.source-detail__pct {
  color: var(--text-muted);
}
.source-detail__config a {
  color: var(--accent-texte);
  text-decoration: none;
  word-break: break-all;
}
.source-detail__config a:hover {
  text-decoration: underline;
}
.source-detail__vide {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}

/* ====== ADMIN AREA - SOURCES & SYNC ====== */
.admin-sources h1 {
  margin: 0 0 6px;
  font-size: 26px;
}
.admin-sources__intro {
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--text-muted);
}
.admin-sources__carte {
  padding: 18px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* Card header. */
.admin-sources__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.admin-sources__titre {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.admin-sources__sous-titre {
  margin: 28px 0 12px;
  font-size: 15px;
}

/* Counters. */
.admin-sources__table tbody td[data-label="Récupérées"],
.admin-sources__table tbody td[data-label="Filtrées"],
.admin-sources__table tbody td[data-label="Nouvelles"],
.admin-sources__table tbody td[data-label="Doublons"],
.admin-sources__historique tbody td {
  font-family: var(--mono);
}
.admin-sources__jamais {
  color: var(--text-muted);
}
/* Source name as a button. */
.admin-sources__nom {
  display: block;
  width: 100%;
  text-align: center;
}
.admin-sources__vide {
  color: var(--text-muted);
}

/* Activation switch. Two carriers for one visual spec: a button where the server flips the state
   (admin sources), a checkbox where a form carries it. Styling the checkbox by its ARIA role
   keeps what is seen and what is announced from ever diverging. */
.switch,
input[role="switch"] {
  position: relative;
  width: 40px;
  height: 22px;
  padding: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: 0.15s ease;
}
.switch {
  display: inline-block;
}
input[role="switch"] {
  appearance: none;
  flex: 0 0 auto;
  margin: 0;
}
.switch[aria-checked="true"],
input[role="switch"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
/* The knob: a child span on the button, a pseudo-element on the checkbox. */
.switch__pastille,
input[role="switch"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: 0.15s ease;
}
.switch[aria-checked="true"] .switch__pastille,
input[role="switch"]:checked::after {
  left: 20px;
  background: #04221e;
}
html[data-theme="light"] .switch[aria-checked="true"] .switch__pastille,
html[data-theme="light"] input[role="switch"]:checked::after {
  background: #ffffff;
}
.switch:focus-visible,
input[role="switch"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Breakpoint specific to these tables. */
@media (max-width: 1040px) {
  .admin-sources__carte {
    padding: 0;
    background: none;
    border: none;
  }
  .admin-sources__entete {
    margin-bottom: 14px;
  }
  .admin-sources__table thead,
  .admin-sources__historique thead {
    display: none;
  }
  .admin-sources__table,
  .admin-sources__table tbody,
  .admin-sources__historique,
  .admin-sources__historique tbody {
    display: block;
  }
  .admin-sources__table th,
  .admin-sources__table td,
  .admin-sources__historique th,
  .admin-sources__historique td {
    display: block;
    padding: 0;
  }
  .admin-sources__table tbody th,
  .admin-sources__table tbody td,
  .admin-sources__historique tbody th,
  .admin-sources__historique tbody td {
    border-top: none;
  }
  .admin-sources__table tr,
  .admin-sources__historique tr {
    display: block;
    margin-bottom: 12px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }

  /* Mobile: name on the left, switch on the right. */
  .admin-sources__table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "nom       bascule"
      "synchro   synchro"
      "recup     filtrees"
      "nouvelles doublons"
      "actions   actions";
    gap: 8px;
    align-items: center;
  }
  .admin-sources__table tbody th {
    grid-area: nom;
    font-size: 15px;
    font-weight: 600;
  }
  .admin-sources__table td[data-label="Activer"] {
    grid-area: bascule;
    justify-self: end;
  }
  .admin-sources__table td[data-label="État"] {
    display: none;
  }
  .admin-sources__table td[data-label="Dernière synchro"] {
    grid-area: synchro;
  }
  .admin-sources__table td[data-label="Récupérées"] {
    grid-area: recup;
  }
  .admin-sources__table td[data-label="Filtrées"] {
    grid-area: filtrees;
  }
  .admin-sources__table td[data-label="Nouvelles"] {
    grid-area: nouvelles;
  }
  .admin-sources__table td[data-label="Doublons"] {
    grid-area: doublons;
  }
  .admin-sources__table td[data-label="Actions"] {
    grid-area: actions;
  }
  .admin-sources__table td::before,
  .admin-sources__historique td::before {
    content: attr(data-label) " ";
    font-family: var(--sans);
    font-size: 11px;
    color: var(--text-muted);
  }
  .admin-sources__table td[data-label="Activer"]::before,
  .admin-sources__table td[data-label="Actions"]::before {
    content: none;
  }
  .admin-sources__historique tbody th {
    font-size: 14px;
    font-weight: 600;
  }
  .admin-sources__historique td {
    margin-top: 6px;
    font-size: 13px;
  }
}

/* ====== ADMIN AREA - POSTING MODERATION ====== */
.admin-offres h1 {
  margin: 0 0 6px;
  font-size: 26px;
}
/* Search on the left, below the filters. */
.admin-offres__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.admin-offres__recherche {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.admin-offres__recherche input[type="search"],
.admin-offres__recherche select {
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-champ);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}
.admin-offres__recherche input[type="search"] {
  width: 320px;
  max-width: 100%;
}
.admin-offres__recherche input[type="search"]:focus,
.admin-offres__recherche select:focus {
  border-color: var(--accent);
}
/* Switch, on its own line below the search field. */
.admin-offres__case {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.admin-offres__carte {
  padding: 4px 24px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.admin-offres__table th,
.admin-offres__table td {
  vertical-align: top;
}
.admin-offres__table tbody th {
  max-width: 380px;
}
.admin-offres__entreprise {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}
.admin-offres__action {
  padding: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-texte);
  background: none;
  border: none;
  cursor: pointer;
}
.admin-offres__action:hover {
  text-decoration: underline;
}
.admin-offres__resume {
  margin: -6px 0 12px;
  font-size: 12px;
  color: var(--text-muted);
}
.admin-offres__vide {
  margin: 20px 0;
  color: var(--text-muted);
}
.admin-offres .pagination {
  margin-top: 18px;
}

/* Breakpoint: five columns including a long title. */
@media (max-width: 1180px) {
  .admin-offres__carte {
    padding: 0;
    background: none;
    border: none;
  }
  .admin-offres__table thead {
    display: none;
  }
  .admin-offres__table,
  .admin-offres__table tbody {
    display: block;
  }
  .admin-offres__table th,
  .admin-offres__table td {
    display: block;
    padding: 0;
  }
  .admin-offres__table tbody th,
  .admin-offres__table tbody td {
    border-top: none;
  }
  .admin-offres__table tbody th {
    max-width: none;
  }
  .admin-offres__table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "offre   offre"
      "source  publiee"
      "statut  action";
    gap: 8px;
    margin-bottom: 12px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .admin-offres__table tbody th {
    grid-area: offre;
    font-size: 15px;
    font-weight: 600;
  }
  .admin-offres__table td[data-label="Source"] {
    grid-area: source;
  }
  .admin-offres__table td[data-label="Publiée le"] {
    grid-area: publiee;
    justify-self: end;
  }
  .admin-offres__table td[data-label="Statut"] {
    grid-area: statut;
  }
  .admin-offres__table td[data-label="Action"] {
    grid-area: action;
    justify-self: end;
    align-self: center;
  }
  .admin-offres__table td[data-label="Source"]::before,
  .admin-offres__table td[data-label="Publiée le"]::before {
    content: attr(data-label) " ";
    font-size: 11px;
    color: var(--text-muted);
  }
}

@media (max-width: 860px) {
  .admin-offres h1 {
    font-size: 22px;
  }
  .admin-offres__barre {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-offres__recherche {
    flex-direction: column;
  }
  .admin-offres__recherche input[type="search"] {
    width: 100%;
  }
}

/* ====== ADMIN AREA - ACCOUNT RECORD ====== */
.admin-user__retour {
  margin: 0 0 14px;
  font-size: 13px;
}
.admin-user__retour a {
  text-decoration: none;
}
.admin-user h1 {
  margin: 0 0 10px;
  font-size: 26px;
}
.admin-user__etat {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}
.admin-user__carte {
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.admin-user__fiche {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 12px 20px;
  margin: 0;
  font-size: 14px;
}
.admin-user__fiche dt {
  color: var(--text-muted);
}
.admin-user__fiche dd {
  margin: 0;
}
.admin-user__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}
.admin-user__note {
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-muted);
}

/* Danger zone. */
.admin-user__danger {
  margin-top: 20px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.admin-user__danger[open] {
  border-color: var(--flash-error);
}
.admin-user__danger summary {
  font-size: 14px;
  font-weight: 500;
  color: var(--flash-error);
  cursor: pointer;
}
.admin-user__danger p {
  margin: 12px 0 16px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

@media (max-width: 860px) {
  .admin-user h1 {
    font-size: 22px;
  }
  .admin-user__carte {
    padding: 16px 14px;
  }
  .admin-user__fiche {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .admin-user__fiche dd + dt {
    margin-top: 10px;
  }
}